Commit be067b9e authored by Agate's avatar Agate 💬

See #170: subscriptions management UI

parent 926a5cfc
......@@ -384,12 +384,9 @@ def get_channel_from_rss_url(url, raise_exception=False):
library=channel.library,
delete_existing=True,
)
latest_upload_date = max([upload.creation_date for upload in uploads])
if (
not channel.artist.modification_date
or channel.artist.modification_date < latest_upload_date
):
common_utils.update_modification_date(channel.artist)
if uploads:
latest_track_date = max([upload.track.creation_date for upload in uploads])
common_utils.update_modification_date(channel.artist, date=latest_track_date)
return channel, uploads
......
......@@ -410,15 +410,15 @@ def get_audio_mimetype(mt):
return aliases.get(mt, mt)
def update_modification_date(obj, field="modification_date"):
def update_modification_date(obj, field="modification_date", date=None):
IGNORE_DELAY = 60
current_value = getattr(obj, field)
now = timezone.now()
ignore = current_value is not None and current_value < now - datetime.timedelta(
date = date or timezone.now()
ignore = current_value is not None and current_value < date - datetime.timedelta(
seconds=IGNORE_DELAY
)
if ignore:
setattr(obj, field, now)
obj.__class__.objects.filter(pk=obj.pk).update(**{field: now})
setattr(obj, field, date)
obj.__class__.objects.filter(pk=obj.pk).update(**{field: date})
return now
return date
......@@ -791,7 +791,7 @@ def test_get_channel_from_rss_url(db, r_mock, mocker):
<itunes:subtitle>Subtitle</itunes:subtitle>
<itunes:summary><![CDATA[<p>Html content</p>]]></itunes:summary>
<guid isPermaLink="false"><![CDATA[16f66fff-41ae-4a1c-9101-2746218c4f32]]></guid>
<pubDate>Wed, 11 Mar 2020 16:00:00 GMT</pubDate>
<pubDate>Wed, 11 Mar 2020 18:00:00 GMT</pubDate>
<itunes:duration>00:22:37</itunes:duration>
<itunes:keywords>pop rock</itunes:keywords>
<itunes:season>2</itunes:season>
......@@ -806,7 +806,7 @@ def test_get_channel_from_rss_url(db, r_mock, mocker):
<itunes:subtitle>Subtitle</itunes:subtitle>
<itunes:summary><![CDATA[<p>Html content</p>]]></itunes:summary>
<guid isPermaLink="false"><![CDATA[16f66fff-41ae-4a1c-910e-2746218c4f32]]></guid>
<pubDate>Wed, 11 Mar 2020 16:00:00 GMT</pubDate>
<pubDate>Wed, 11 Mar 2020 17:00:00 GMT</pubDate>
<itunes:duration>00:22:37</itunes:duration>
<itunes:keywords>pop rock</itunes:keywords>
<itunes:season>2</itunes:season>
......@@ -865,7 +865,9 @@ def test_get_channel_from_rss_url(db, r_mock, mocker):
library=channel.library,
delete_existing=True,
)
update_modification_date.assert_called_once_with(channel.artist)
update_modification_date.assert_called_once_with(
channel.artist, date=uploads[0].track.creation_date
)
def test_get_channel_from_rss_honor_mrf_inbox_before_http(
......
<template>
<div>
<form id="remote-search" :class="['ui', {loading: isLoading}, 'form']" @submit.stop.prevent="submit">
<div v-if="errors.length > 0" class="ui negative message">
<div class="header"><translate translate-context="Content/*/Error message.Title">Error while fetching object</translate></div>
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
<div class="ui required field">
<label for="object-id">
{{ labels.fieldLabel }}
</label>
<p v-if="type === 'rss'">
<translate translate-context="Content/Fetch/Paragraph">Paste here the RSS url or the fediverse address to subscribe to its feed.</translate>
</p>
<p v-else>
<translate translate-context="Content/Fetch/Paragraph">Use this form to retrieve an object hosted somewhere else in the fediverse.</translate>
</p>
<input type="text" name="object-id" id="object-id" :placeholder="labels.fieldPlaceholder" v-model="id" required>
</div>
<button v-if="showSubmit" type="submit" :class="['ui', 'primary', {loading: isLoading}, 'button']" :disabled="isLoading || !id || id.length === 0">
<translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
</button>
</form>
<div v-if="!isLoading && fetch && fetch.status === 'finished' && !redirectRoute" class="ui warning message">
<p><translate translate-context="Content/*/Error message.Title">This kind of object isn't supported yet</translate></p>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: {
initialId: { type: String, required: false},
type: { type: String, required: false},
redirect: { type: Boolean, default: true},
showSubmit: { type: Boolean, default: true},
standalone: { type: Boolean, default: true},
},
data () {
return {
id: this.initialId,
fetch: null,
obj: null,
isLoading: false,
errors: [],
}
},
created () {
if (this.id) {
if (this.type === 'rss') {
this.rssSubscribe()
} else {
this.createFetch()
}
}
},
computed: {
labels() {
let title = this.$pgettext('Head/Fetch/Title', "Search a remote object")
let fieldLabel = this.$pgettext('Head/Fetch/Field.Label', "URL or @username")
let fieldPlaceholder = ""
if (this.type === "rss") {
title = this.$pgettext('Head/Fetch/Title', "Subscribe to a podcast RSS feed")
fieldLabel = this.$pgettext('*/*/*', "Channel location")
fieldLabel = this.$pgettext('*/*/*', "Channel location")
fieldPlaceholder = this.$pgettext('Head/Fetch/Field.Placeholder', "@channel@pod.example or https://website.example/rss.xml")
}
return {
title,
fieldLabel,
fieldPlaceholder,
}
},
objInfo () {
if (this.fetch && this.fetch.status === 'finished') {
return this.fetch.object
}
},
redirectRoute () {
if (!this.objInfo) {
return
}
switch (this.objInfo.type) {
case 'account':
let [username, domain] = this.objInfo.full_username.split('@')
return {name: 'profile.full', params: {username, domain}}
case 'library':
return {name: 'library.detail', params: {id: this.objInfo.uuid}}
case 'artist':
return {name: 'library.artists.detail', params: {id: this.objInfo.id}}
case 'album':
return {name: 'library.albums.detail', params: {id: this.objInfo.id}}
case 'track':
return {name: 'library.tracks.detail', params: {id: this.objInfo.id}}
case 'upload':
return {name: 'library.uploads.detail', params: {id: this.objInfo.uuid}}
default:
break;
}
}
},
methods: {
submit () {
if (this.type === 'rss') {
return this.rssSubscribe()
} else {
return this.createFetch()
}
},
createFetch () {
if (!this.id) {
return
}
if (this.standalone) {
this.$router.replace({name: "search", query: {id: this.id}})
}
this.fetch = null
let self = this
self.errors = []
self.isLoading = true
let payload = {
object: this.id
}
axios.post('federation/fetches/', payload).then((response) => {
self.isLoading = false
self.fetch = response.data
if (self.fetch.status === 'errored' || self.fetch.status === 'skipped') {
self.errors.push(
self.$pgettext("Content/*/Error message.Title", "This object cannot be retrieved")
)
}
}, error => {
self.isLoading = false
self.errors = error.backendErrors
})
},
rssSubscribe () {
if (!this.id) {
return
}
if (this.standalone) {
console.log('HELLO')
this.$router.replace({name: "search", query: {id: this.id, type: 'rss'}})
}
this.fetch = null
let self = this
self.errors = []
self.isLoading = true
let payload = {
url: this.id
}
axios.post('channels/rss-subscribe/', payload).then((response) => {
self.isLoading = false
self.$store.commit('channels/subscriptions', {uuid: response.data.channel.uuid, value: true})
self.$emit('subscribed', response.data)
if (self.redirect) {
self.$router.push({name: 'channels.detail', params: {id: response.data.channel.uuid}})
}
}, error => {
self.isLoading = false
self.errors = error.backendErrors
})
},
},
watch: {
initialId (v) {
this.id = v
this.createFetch()
},
redirectRoute (v) {
if (v && this.redirect) {
this.$router.push(v)
}
}
}
}
</script>
......@@ -134,6 +134,9 @@
<router-link class="item" :to="{name: 'favorites'}"><i class="heart icon"></i><translate translate-context="Sidebar/Favorites/List item.Link/Noun">Favorites</translate></router-link>
</div>
</div>
<router-link class="header item" :to="{name: 'subscriptions'}" v-if="$store.state.auth.authenticated">
<translate translate-context="*/*/*/Noun">Subscriptions</translate>
</router-link>
<div class="item">
<header class="header">
<translate translate-context="Footer/About/List item.Link">More</translate>
......
......@@ -12,16 +12,24 @@
</router-link>
</strong>
<div class="description">
<translate class="meta ellipsis" translate-context="Content/Channel/Paragraph"
translate-plural="%{ count } episodes"
:translate-n="object.artist.tracks_count"
:translate-params="{count: object.artist.tracks_count}">
%{ count } episode
</translate>
<tags-list label-classes="tiny" :truncate-size="20" :limit="2" :show-more="false" :tags="object.artist.tags"></tags-list>
</div>
</div>
<div class="extra content">
<translate translate-context="Content/Channel/Paragraph"
translate-plural="%{ count } episodes"
:translate-n="object.artist.tracks_count"
:translate-params="{count: object.artist.tracks_count}">
%{ count } episode
</translate>
<time
v-translate
class="meta ellipsis"
:datetime="object.artist.modification_date"
:title="updatedTitle">
{{ object.artist.modification_date | fromNow }}
</time>
<play-button class="right floated basic icon" :dropdown-only="true" :is-playable="true" :dropdown-icon-classes="['ellipsis', 'horizontal', 'large', 'grey']" :artist="object.artist"></play-button>
</div>
</div>
......@@ -31,6 +39,8 @@
import PlayButton from '@/components/audio/PlayButton'
import TagsList from "@/components/tags/List"
import {momentFormat} from '@/filters'
export default {
props: {
object: {type: Object},
......@@ -58,6 +68,11 @@ export default {
} else {
return this.object.uuid
}
},
updatedTitle () {
let d = momentFormat(this.object.artist.modification_date)
let message = this.$pgettext('*/*/*', 'Updated on %{ date }')
return this.$gettextInterpolate(message, {date: d})
}
}
}
......
......@@ -4,8 +4,8 @@
<label for="search-query" class="hidden">
<translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
</label>
<input id="search-query" name="search-query" type="text" :placeholder="labels.searchPlaceholder" :value="value" @input="$emit('input', $event.target.value)">
<i v-if="isClearable" class="x link icon" :title="labels.clear" @click="$emit('input', ''); $emit('search', value)"></i>
<input id="search-query" name="search-query" type="text" :placeholder="placeholder || labels.searchPlaceholder" :value="value" @input="$emit('input', $event.target.value)">
<i v-if="isClearable" class="x link icon" :title="labels.clear" @click.stop.prevent="$emit('input', ''); $emit('search', value)"></i>
<button type="submit" class="ui icon basic button">
<i class="search icon"></i>
</button>
......@@ -15,7 +15,8 @@
<script>
export default {
props: {
value: {type: String, required: true}
value: {type: String, required: true},
placeholder: {type: String, required: false},
},
computed: {
labels () {
......
<template>
<div :class="['ui', {'active': show}, {'overlay fullscreen': ['phone', 'tablet'].indexOf($store.getters['ui/windowSize']) > -1},'modal']">
<div :class="['ui', {'active': show}, {'overlay fullscreen': fullscreen && ['phone', 'tablet'].indexOf($store.getters['ui/windowSize']) > -1},'modal']">
<i class="close inside icon"></i>
<slot v-if="show">
......@@ -12,7 +12,8 @@ import $ from 'jquery'
export default {
props: {
show: {type: Boolean, required: true}
show: {type: Boolean, required: true},
fullscreen: {type: Boolean, default: true},
},
data () {
return {
......
......@@ -38,12 +38,38 @@ export function ago (date, locale) {
lastDay: 'L',
lastWeek: 'L',
sameElse: 'L'
})
})
}
Vue.filter('ago', ago)
export function fromNow (date, locale) {
locale = 'en'
moment.locale('en', {
relativeTime: {
future: 'in %s',
past: '%s ago',
s: 'seconds',
ss: '%ss',
m: 'a minute',
mm: '%dm',
h: 'an hour',
hh: '%dh',
d: 'a day',
dd: '%dd',
M: 'a month',
MM: '%dM',
y: 'a year',
yy: '%dY'
}
});
const m = moment(date)
m.locale(locale)
return m.fromNow(true)
}
Vue.filter('fromNow', fromNow)
export function secondsToObject (seconds) {
let m = moment.duration(seconds, 'seconds')
return {
......
......@@ -906,6 +906,19 @@ export default new Router({
},
]
},
{
path: "/subscriptions",
name: "subscriptions",
props: route => {
return {
defaultQuery: route.query.q
}
},
component: () =>
import(
/* webpackChunkName: "channels-auth" */ "@/views/channels/SubscriptionsList"
),
},
{
path: "*/index.html",
redirect: "/"
......
......@@ -177,6 +177,9 @@ html {
.ui.stripe.segment,
#footer {
padding: 1em;
&.ui.container {
margin: 0;
}
@include media(">tablet") {
padding: 2em;
}
......@@ -372,9 +375,6 @@ input + .help {
margin-top: 0.5em;
}
.tag-list {
margin-top: 0.5em;
}
.expandable {
&:not(.expanded) {
......@@ -444,9 +444,9 @@ input + .help {
}
.ui.cards.app-cards {
$card-width: 14em;
$card-height: 22em;
$card-height: 23em;
$small-card-width: 11em;
$small-card-height: 19em;
$small-card-height: 20em;
.app-card {
display: flex;
width: $small-card-width;
......@@ -619,9 +619,11 @@ input + .help {
}
}
.header.with-actions {
display: flex;
justify-content: space-between;
align-items: center;
@include media(">tablet") {
display: flex;
justify-content: space-between;
align-items: center;
}
.actions {
font-weight: normal;
font-size: 0.6em;
......@@ -662,5 +664,27 @@ input + .help {
.ui.header .content {
display: block;
}
.with-image.item {
display: flex !important;
align-items: center;
height: 3em;
img.image {
width: 3em;
height: 3em;
margin-right: 1em;
}
.icon.image {
width: 3em;
margin-right: 1em;
display: block;
}
.content {
font-size: 1em;
}
.meta {
margin-top: 0.5em;
font-size: 0.8em;
}
}
@import "./themes/_light.scss";
@import "./themes/_dark.scss";
......@@ -2,178 +2,34 @@
<main class="main pusher" v-title="labels.title">
<section class="ui vertical stripe segment">
<div class="ui small text container">
<form :class="['ui', {loading: isLoading}, 'form']" @submit.stop.prevent="submit">
<h2>{{ labels.title }}</h2>
<p v-if="type === 'rss'">
<translate translate-context="Content/Fetch/Paragraph">Use this form to subscribe to a podcast using its RSS feed.</translate>
</p>
<p v-else>
<translate translate-context="Content/Fetch/Paragraph">Use this form to retrieve an object hosted somewhere else in the fediverse.</translate>
</p>
<div v-if="errors.length > 0" class="ui negative message">
<div class="header"><translate translate-context="Content/*/Error message.Title">Error while fetching object</translate></div>
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
<div class="ui required field">
<label for="object-id">
{{ labels.fieldLabel }}
</label>
<input type="text" name="object-id" id="object-id" v-model="id" required>
</div>
<button type="submit" :class="['ui', 'primary', {loading: isLoading}, 'button']" :disabled="isLoading || !id || id.length === 0">
<translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
</button>
</form>
<div v-if="!isLoading && fetch && fetch.status === 'finished' && !redirectRoute" class="ui warning message">
<p><translate translate-context="Content/*/Error message.Title">This kind of object isn't supported yet</translate></p>
</div>
</div>
<h2>{{ labels.title }}</h2>
<remote-search-form :initial-id="initialId" :type="type"></remote-search-form>
</div>
</section>
</main>
</template>
<script>
import axios from 'axios'
import RemoteSearchForm from '@/components/RemoteSearchForm'
export default {
props: {
initialId: { type: String, required: false},
type: { type: String, required: false},
},
components: {},
data () {
return {
id: this.initialId,
fetch: null,
obj: null,
isLoading: false,
errors: [],
}
},
created () {
if (this.id) {
if (this.type === 'rss') {
this.rssSubscribe()
} else {
this.createFetch()
}
}
components: {
RemoteSearchForm,
},
computed: {
labels() {
let title = this.$pgettext('Head/Fetch/Title', "Search a remote object")
let fieldLabel = this.$pgettext('Head/Fetch/Field.Placeholder', "URL or @username")
if (this.type === "rss") {
title = this.$pgettext('Head/Fetch/Title', "Subscribe to a podcast RSS feed")
fieldLabel = this.$pgettext('*/*/*', "RSS Feed URL")
}
return {
title,
fieldLabel
}
},
objInfo () {
if (this.fetch && this.fetch.status === 'finished') {
return this.fetch.object
}
},
redirectRoute () {
if (!this.objInfo) {
return
}
switch (this.objInfo.type) {
case 'account':
let [username, domain] = this.objInfo.full_username.split('@')
return {name: 'profile.full', params: {username, domain}}
case 'library':
return {name: 'library.detail', params: {id: this.objInfo.uuid}}
case 'artist':
return {name: 'library.artists.detail', params: {id: this.objInfo.id}}
case 'album':
return {name: 'library.albums.detail', params: {id: this.objInfo.id}}
case 'track':
return {name: 'library.tracks.detail', params: {id: this.objInfo.id}}
case 'upload':
return {name: 'library.uploads.detail', params: {id: this.objInfo.uuid}}
default:
break;
}
}
},
methods: {
submit () {
if (this.type === 'rss') {
return this.rssSubscribe()
} else {
return this.createFetch()
}
},
createFetch () {
if (!this.id) {
return
}
this.$router.replace({name: "search", query: {id: this.id}})
this.fetch = null
let self = this
self.errors = []
self.isLoading = true
let payload = {
object: this.id
}
axios.post('federation/fetches/', payload).then((response) => {
self.isLoading = false
self.fetch = response.data
if (self.fetch.status === 'errored' || self.fetch.status === 'skipped') {
self.errors.push(
self.$pgettext("Content/*/Error message.Title", "This object cannot be retrieved")
)
}
}, error => {
self.isLoading = false
self.errors = error.backendErrors
})
},
rssSubscribe () {
if (!this.id) {
return
}
this.$router.replace({name: "search", query: {id: this.id, type: 'rss'}})
this.fetch = null
let self = this
self.errors = []
self.isLoading = true
let payload = {
url: this.id
}
axios.post('channels/rss-subscribe/', payload).then((response) => {
self.isLoading = false
self.$store.commit('channels/subscriptions', {uuid: response.data.channel.uuid, value: true})
self.$router.push({name: 'channels.detail', params: {id: response.data.channel.uuid}})
}, error => {
self.isLoading = false
self.errors = error.backendErrors
})
},
},
watch: {
initialId (v) {
this.id = v
this.createFetch()
},
redirectRoute (v) {
if (v) {
this.$router.push(v)
}
}
}
}
</script>
<template>
<main class="main pusher" v-title="labels.title">
<section class="ui head vertical stripe segment container">
<h1 class="ui with-actions header">
{{ labels.title }}
<div class="actions">
<a @click.stop.prevent="showSubscribeModal = true">
<i class="plus icon"></i>
<translate translate-context="Content/Profile/Button">Add new</translate>
</a>
</div>
</h1>
<modal class="tiny" :show.sync="showSubscribeModal" :fullscreen="false">
<h2 class="header">
<translate translate-context="*/*/*/Noun">Subscription</translate>
</h2>
<div class="scrolling content" ref="modalContent">
<remote-search-form
type="rss"
:show-submit="false"
:standalone="false"
@subscribed="showSubscribeModal = false; reloadWidget()"
:redirect="false"></remote-search-form>