MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch '551-display-libraries' into 'develop' 

Resolve "Display available libraries containing a track / album / artist"

Closes #551

See merge request funkwhale/funkwhale!433
This commit is contained in:
Eliot Berriot 2018-10-02 17:46:33 +00:00
parent d7b6e54621 c2a2321be2
commit 7876e77aab
22 changed files with 215 additions and 1306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
api/funkwhale_api/music/views.py
View File

@ -3,7 +3,7 @@ import urllib
from django.conf import settings
from django.db import transaction
from django.db.models import Count, Prefetch, Sum, F
from django.db.models import Count, Prefetch, Sum, F, Q
from django.db.models.functions import Length
from django.utils import timezone
@ -26,6 +26,28 @@ from . import filters, models, serializers, tasks, utils
logger = logging.getLogger(__name__)
def get_libraries(filter_uploads):
def view(self, request, *args, **kwargs):
obj = self.get_object()
actor = utils.get_actor_from_request(request)
uploads = models.Upload.objects.all()
uploads = filter_uploads(obj, uploads)
uploads = uploads.playable_by(actor)
libraries = models.Library.objects.filter(
pk__in=uploads.values_list("library", flat=True)
)
libraries = libraries.select_related("actor")
page = self.paginate_queryset(libraries)
if page is not None:
serializer = federation_api_serializers.LibrarySerializer(page, many=True)
return self.get_paginated_response(serializer.data)
serializer = federation_api_serializers.LibrarySerializer(libraries, many=True)
return Response(serializer.data)
return view
class TagViewSetMixin(object):
def get_queryset(self):
queryset = super().get_queryset()
@ -50,6 +72,14 @@ class ArtistViewSet(viewsets.ReadOnlyModelViewSet):
)
return queryset.prefetch_related(Prefetch("albums", queryset=albums)).distinct()
libraries = detail_route(methods=["get"])(
get_libraries(
filter_uploads=lambda o, uploads: uploads.filter(
Q(track__artist=o) | Q(track__album__artist=o)
)
)
)
class AlbumViewSet(viewsets.ReadOnlyModelViewSet):
queryset = (
@ -76,6 +106,10 @@ class AlbumViewSet(viewsets.ReadOnlyModelViewSet):
qs = queryset.prefetch_related(Prefetch("tracks", queryset=tracks))
return qs.distinct()
libraries = detail_route(methods=["get"])(
get_libraries(filter_uploads=lambda o, uploads: uploads.filter(track__album=o))
)
class LibraryViewSet(
mixins.CreateModelMixin,
@ -197,6 +231,10 @@ class TrackViewSet(TagViewSetMixin, viewsets.ReadOnlyModelViewSet):
serializer = serializers.LyricsSerializer(lyrics)
return Response(serializer.data)
libraries = detail_route(methods=["get"])(
get_libraries(filter_uploads=lambda o, uploads: uploads.filter(track=o))
)
def get_file_path(audio_file):
serve_path = settings.MUSIC_DIRECTORY_SERVE_PATH

31
api/tests/music/test_views.py
View File

@ -449,3 +449,34 @@ def test_user_can_list_own_library_follows(factories, logged_in_api_client):
"previous": None,
"results": [federation_api_serializers.LibraryFollowSerializer(follow).data],
}
@pytest.mark.parametrize("entity", ["artist", "album", "track"])
def test_can_get_libraries_for_music_entities(
factories, api_client, entity, preferences
):
preferences["common__api_authentication_required"] = False
upload = factories["music.Upload"](playable=True)
# another private library that should not appear
factories["music.Upload"](
import_status="finished", library__privacy_level="me", track=upload.track
).library
library = upload.library
data = {
"artist": upload.track.artist,
"album": upload.track.album,
"track": upload.track,
}
url = reverse("api:v1:{}s-libraries".format(entity), kwargs={"pk": data[entity].pk})
response = api_client.get(url)
expected = federation_api_serializers.LibrarySerializer(library).data
assert response.status_code == 200
assert response.data == {
"count": 1,
"next": None,
"previous": None,
"results": [expected],
}

1
changes/changelog.d/551.enhancement Normal file
View File

@ -0,0 +1 @@
Added a library widget to display libraries associated with a track, album and artist (#551)

4
front/src/components/audio/album/Card.vue
View File

@ -38,7 +38,7 @@
</table>
<div class="center aligned segment" v-if="album.tracks.length > initialTracks">
<em v-if="!showAllTracks" @click="showAllTracks = true" class="expand">
<translate :translate-params="{count: album.tracks.length - initialTracks}" :translate-n="album.tracks.length - initialTracks" translate-plural="Show %{ count } more tracks">Show 1 more track</translate>
<translate :translate-params="{count: album.tracks.length - initialTracks}" :translate-n="album.tracks.length - initialTracks" translate-plural="Show %{ count } more tracks">Show %{ count } more track</translate>
</em>
<em v-else @click="showAllTracks = false" class="expand">
<translate>Collapse</translate>
@ -52,7 +52,7 @@
</play-button>
<span>
<i class="music icon"></i>
<translate :translate-params="{count: album.tracks.length}" :translate-n="album.tracks.length" translate-plural="%{ count } tracks">1 track</translate>
<translate :translate-params="{count: album.tracks.length}" :translate-n="album.tracks.length" translate-plural="%{ count } tracks">%{ count } track</translate>
</span>
</div>
</div>

7
front/src/components/common/CopyInput.vue
View File

@ -4,7 +4,7 @@
<translate>Text copied to clipboard!</translate>
</p>
<input ref="input" :value="value" type="text">
<button @click="copy" class="ui teal right labeled icon button">
<button @click="copy" :class="['ui', buttonClasses, 'right', 'labeled', 'icon', 'button']">
<i class="copy icon"></i>
<translate>Copy</translate>
</button>
@ -12,7 +12,10 @@
</template>
<script>
export default {
props: ['value'],
props: {
value: {type: String},
buttonClasses: {type: String, default: 'teal'}
},
data () {
return {
copied: false,

128
front/src/components/federation/LibraryCard.vue
View File

@ -1,128 +0,0 @@
<template>
<div class="ui card">
<div class="content">
<div class="header ellipsis">
<router-link
v-if="library"
:title="displayName"
:to="{name: 'federation.libraries.detail', params: {id: library.uuid }}">
{{ displayName }}
</router-link>
<span :title="displayName" v-else>{{ displayName }}</span>
</div>
</div>
<div class="content">
<span class="right floated" v-if="following">
<i class="check icon"></i><translate>Following</translate>
</span>
<span class="right floated" v-else-if="manuallyApprovesFollowers">
<i class="lock icon"></i><translate>Followers only</translate>
</span>
<span class="right floated" v-else>
<i class="open lock icon"></i><translate>Open</translate>
</span>
<span v-if="totalItems">
<i class="music icon"></i>
<translate
translate-plural="%{ count } tracks"
:translate-n="totalItems"
:translate-params="{count: totalItems}">
1 track
</translate>
</span>
</div>
<div class="extra content">
<template v-if="awaitingApproval">
<i class="clock icon"></i>
<translate>Follow request pending approval</translate>
</template>
<div
v-if="!library"
@click="follow"
:disabled="isLoading"
:class="['ui', 'basic', {loading: isLoading}, 'green', 'button']">
<translate v-if="manuallyApprovesFollowers">Send a follow request</translate>
<translate v-else>Follow</translate>
</div>
<router-link
v-else
class="ui basic button"
:to="{name: 'federation.libraries.detail', params: {id: library.uuid }}">
<translate>Detail</translate>
</router-link>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: ['libraryData', 'libraryInstance'],
data () {
return {
library: this.libraryInstance,
isLoading: false,
data: null,
errors: []
}
},
methods: {
follow () {
let params = {
'actor': this.libraryData['actor']['id'],
'autoimport': false,
'download_files': false,
'federation_enabled': true
}
let self = this
self.isLoading = true
axios.post('/federation/libraries/', params).then((response) => {
self.$emit('follow', {data: self.libraryData, library: response.data})
self.library = response.data
self.isLoading = false
}, error => {
self.isLoading = false
self.errors = error.backendErrors
})
}
},
computed: {
displayName () {
if (this.libraryData) {
return this.libraryData.display_name
} else {
return `${this.library.actor.preferred_username}@${this.library.actor.domain}`
}
},
manuallyApprovesFollowers () {
if (this.libraryData) {
return this.libraryData.actor.manuallyApprovesFollowers
} else {
return this.library.actor.manually_approves_followers
}
},
totalItems () {
if (this.libraryData) {
return this.libraryData.library.totalItems
} else {
return this.library.tracks_count
}
},
awaitingApproval () {
if (this.libraryData) {
return this.libraryData.local.awaiting_approval
} else {
return this.library.follow.approved === null
}
},
following () {
if (this.libraryData) {
return this.libraryData.local.following
} else {
return this.library.follow.approved
}
}
}
}
</script>

196
front/src/components/federation/LibraryFollowTable.vue
View File

@ -1,196 +0,0 @@
<template>
<div>
<div class="ui form">
<div class="fields">
<div class="ui six wide field">
<input type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
</div>
<div class="ui four wide inline field">
<div class="ui checkbox">
<input v-model="pending" type="checkbox">
<label>
<translate>Pending approval</translate>
</label>
</div>
</div>
</div>
</div>
<div class="ui hidden divider"></div>
<table v-if="result" class="ui very basic single line unstackable table">
<thead>
<tr>
<th><translate>Actor</translate></th>
<th><translate>Creation date</translate></th>
<th><translate>Status</translate></th>
<th><translate>Actions</translate></th>
</tr>
</thead>
<tbody>
<tr v-for="follow in result.results">
<td>
{{ follow.actor.preferred_username }}@{{ follow.actor.domain }}
</td>
<td>
<human-date :date="follow.creation_date"></human-date>
</td>
<td>
<template v-if="follow.approved === true">
<i class="check icon"></i>
<translate>Approved</translate>
</template>
<template v-else-if="follow.approved === false">
<i class="x icon"></i>
<translate>Refused</translate>
</template>
<template v-else>
<i class="clock icon"></i>
<translate>Pending</translate>
</template>
</td>
<td>
<dangerous-button v-if="follow.approved !== false" class="tiny basic labeled icon" color='red' @confirm="updateFollow(follow, false)">
<i class="x icon"></i>
<translate>Deny</translate>
<p slot="modal-header">
<translate>Deny access?</translate>
</p>
<p slot="modal-content">
<translate
:translate-params="{username: follow.actor.preferred_username + '@' + follow.actor.domain}">
By confirming, %{ username } will be denied access to your library.
</translate>
</p>
<p slot="modal-confirm">
<translate>Deny</translate>
</p>
</dangerous-button>
<dangerous-button v-if="follow.approved !== true" class="tiny basic labeled icon" color='green' @confirm="updateFollow(follow, true)">
<i class="check icon"></i>
<translate>Approve</translate>
<p slot="modal-header">
<translate>Approve access?</translate>
</p>
<p slot="modal-content">
<translate
:translate-params="{username: follow.actor.preferred_username + '@' + follow.actor.domain}">
By confirming, %{ username } will be granted access to your library.
</translate>
<p slot="modal-confirm">
<translate>Approve</translate>
</p>
</dangerous-button>
</td>
</tr>
</tbody>
<tfoot class="full-width">
<tr>
<th>
<pagination
v-if="result && result.count > paginateBy"
@page-changed="selectPage"
:compact="true"
:current="page"
:paginate-by="paginateBy"
:total="result.count"
></pagination>
</th>
<th v-if="result && result.results.length > 0">
<translate
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}">
Showing results %{ start }-%{ end } on %{ total }
</translate>
</th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</template>
<script>
import axios from 'axios'
import _ from 'lodash'
import Pagination from '@/components/Pagination'
export default {
props: {
filters: {type: Object, required: false, default: () => {}}
},
components: {
Pagination
},
data () {
return {
isLoading: false,
result: null,
page: 1,
paginateBy: 25,
search: '',
pending: false
}
},
created () {
this.fetchData()
},
computed: {
labels () {
return {
searchPlaceholder: this.$gettext('Search by username, domain...')
}
}
},
methods: {
fetchData () {
let params = _.merge({
'page': this.page,
'page_size': this.paginateBy,
'q': this.search
}, this.filters)
if (this.pending) {
params.pending = true
}
let self = this
self.isLoading = true
axios.get('/federation/libraries/followers/', {params: params}).then((response) => {
self.result = response.data
self.isLoading = false
}, error => {
self.isLoading = false
self.errors = error.backendErrors
})
},
selectPage: function (page) {
this.page = page
},
updateFollow (follow, approved) {
let payload = {
follow: follow.id,
approved: approved
}
let self = this
axios.patch('/federation/libraries/followers/', payload).then((response) => {
follow.approved = response.data.approved
self.isLoading = false
}, error => {
self.isLoading = false
self.errors = error.backendErrors
})
}
},
watch: {
search (newValue) {
if (newValue.length > 0) {
this.fetchData()
}
},
page () {
this.fetchData()
},
pending () {
this.fetchData()
}
}
}
</script>

123
front/src/components/federation/LibraryForm.vue
View File

@ -1,123 +0,0 @@
<template>
<form class="ui form" @submit.prevent="fetchInstanceInfo">
<h3 class="ui header">
<translate>Federate with a new instance</translate>
</h3>
<p>
<translate>Use this form to scan an instance and setup federation.</translate>
</p>
<div v-if="errors.length > 0 || scanErrors.length > 0" class="ui negative message">
<div class="header">
<translate>Error while scanning library</translate>
</div>
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
<li v-for="error in scanErrors">{{ error }}</li>
</ul>
</div>
<div class="ui two fields">
<div class="ui field">
<label>
<translate>Library name</translate>
</label>
<input v-model="libraryUsername" type="text" :placeholder="labels.namePlaceholder" />
</div>
<div class="ui field">
<label>&nbsp;</label>
<button
type="submit"
:disabled="isLoading"
:class="['ui', 'icon', {loading: isLoading}, 'button']">
<i class="search icon"></i>
<translate>Launch scan</translate>
</button>
</div>
</div>
</form>
</template>
<script>
import axios from 'axios'
import TrackTable from '@/components/audio/track/Table'
import RadioButton from '@/components/radios/Button'
import Pagination from '@/components/Pagination'
export default {
components: {
TrackTable,
RadioButton,
Pagination
},
data () {
return {
isLoading: false,
libraryUsername: '',
result: null,
errors: []
}
},
methods: {
follow () {
let params = {
'actor': this.result['actor']['id'],
'autoimport': false,
'download_files': false,
'federation_enabled': true
}
let self = this
self.isFollowing = false
axios.post('/federation/libraries/', params).then((response) => {
self.$emit('follow', {data: self.result, library: response.data})
self.result = response.data
self.isFollowing = false
}, error => {
self.isFollowing = false
self.errors = error.backendErrors
})
},
fetchInstanceInfo () {
let self = this
this.isLoading = true
self.errors = []
self.result = null
axios.get('/federation/libraries/fetch/', {params: {account: this.libraryUsername.trim()}}).then((response) => {
self.result = response.data
self.result.display_name = self.libraryUsername
self.isLoading = false
}, error => {
self.isLoading = false
self.errors = error.backendErrors
})
}
},
computed: {
labels () {
return {
namePlaceholder: this.$gettext('library@demo.funkwhale.audio')
}
},
scanErrors () {
let errors = []
if (!this.result) {
return errors
}
let keys = ['webfinger', 'actor', 'library']
keys.forEach(k => {
if (this.result[k]) {
if (this.result[k].errors) {
this.result[k].errors.forEach(e => {
errors.push(e)
})
}
}
})
return errors
}
},
watch: {
result (newValue, oldValue) {
this.$emit('scanned', newValue)
}
}
}
</script>

228
front/src/components/federation/LibraryTrackTable.vue
View File

@ -1,228 +0,0 @@
<template>
<div>
<div class="ui inline form">
<div class="fields">
<div class="ui six wide field">
<label><translate>Search</translate></label>
<input type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
</div>
<div class="ui field">
<label><translate>Import status</translate></label>
<select class="ui dropdown" v-model="importedFilter">
<option :value="null"><translate>Any</translate></option>
<option :value="'imported'"><translate>Imported</translate></option>
<option :value="'not_imported'"><translate>Not imported</translate></option>
<option :value="'import_pending'"><translate>Import pending</translate></option>
</select>
</div>
<div class="field">
<label><translate>Ordering</translate></label>
<select class="ui dropdown" v-model="ordering">
<option v-for="option in orderingOptions" :value="option[0]">
{{ option[1] }}
</option>
</select>
</div>
<div class="field">
<label><translate>Ordering direction</translate></label>
<select class="ui dropdown" v-model="orderingDirection">
<option value="+"><translate>Ascending</translate></option>
<option value="-"><translate>Descending</translate></option>
</select>
</div>
</div>
</div>
<div class="dimmable">
<div v-if="isLoading" class="ui active inverted dimmer">
<div class="ui loader"></div>
</div>
<action-table
v-if="result"
@action-launched="fetchData"
:objects-data="result"
:actions="actions"
:action-url="'federation/library-tracks/action/'"
:filters="actionFilters">
<template slot="header-cells">
<th><translate>Status</translate></th>
<th><translate>Title</translate></th>
<th><translate>Artist</translate></th>
<th><translate>Album</translate></th>
<th><translate>Published date</translate></th>
<th v-if="showLibrary"><translate>Library</translate></th>
</template>
<template slot="action-success-footer" slot-scope="scope">
<router-link
v-if="scope.result.action === 'import'"
:to="{name: 'library.import.batches.detail', params: {id: scope.result.result.batch.id }}">
<translate
:translate-params="{id: scope.result.result.batch.id}">
Import #%{ id } launched
</translate>
</router-link>
</template>
<template slot="row-cells" slot-scope="scope">
<td>
<span v-if="scope.obj.status === 'imported'" class="ui basic green label"><translate>In library</translate></span>
<span v-else-if="scope.obj.status === 'import_pending'" class="ui basic yellow label"><translate>Import pending</translate></span>
<span v-else class="ui basic label"><translate>Not imported</translate></span>
</td>
<td>
<span :title="scope.obj.title">{{ scope.obj.title|truncate(30) }}</span>
</td>
<td>
<span class="discrete link" @click="updateSearch({key: 'artist', value: scope.obj.artist_name})" :title="scope.obj.artist_name">{{ scope.obj.artist_name|truncate(30) }}</span>
</td>
<td>
<span class="discrete link" @click="updateSearch({key: 'album', value: scope.obj.album_title})" :title="scope.obj.album_title">{{ scope.obj.album_title|truncate(20) }}</span>
</td>
<td>
<human-date :date="scope.obj.published_date"></human-date>
</td>
<td v-if="showLibrary">
<span class="discrete link" @click="updateSearch({key: 'domain', value: scope.obj.library.actor.domain})">{{ scope.obj.library.actor.domain }}</span>
</td>
</template>
</action-table>
</div>
<div>
<pagination
v-if="result && result.count > paginateBy"
@page-changed="selectPage"
:compact="true"
:current="page"
:paginate-by="paginateBy"
:total="result.count"
></pagination>
<span v-if="result && result.results.length > 0">
<translate
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}">
Showing results %{ start }-%{ end } on %{ total }
</translate>
</span>
</div>
</div>
</template>
<script>
import axios from 'axios'
import _ from 'lodash'
import Pagination from '@/components/Pagination'
import ActionTable from '@/components/common/ActionTable'
import OrderingMixin from '@/components/mixins/Ordering'
export default {
mixins: [OrderingMixin],
props: {
filters: {type: Object, required: false},
showLibrary: {type: Boolean, default: false}
},
components: {
Pagination,
ActionTable
},
data () {
return {
isLoading: false,
result: null,
page: 1,
paginateBy: 25,
search: '',
importedFilter: null,
orderingDirection: '-',
ordering: 'published_date',
orderingOptions: [
['published_date', 'Published date'],
['title', 'Title'],
['album_title', 'Album title'],
['artist_name', 'Artist name']
]
}
},
created () {
this.fetchData()
},
methods: {
updateSearch ({key, value}) {
if (value.indexOf(' ') > -1) {
value = `"${value}"`
}
this.search = `${key}:${value}`
},
fetchData () {
let params = _.merge({
'page': this.page,
'page_size': this.paginateBy,
'ordering': this.getOrderingAsString(),
'q': this.search
}, this.filters)
if (this.importedFilter !== null) {
params.status = this.importedFilter
}
let self = this
self.isLoading = true
self.checked = []
axios.get('/federation/library-tracks/', {params: params}).then((response) => {
self.result = response.data
self.isLoading = false
}, error => {
self.isLoading = false
self.errors = error.backendErrors
})
},
selectPage: function (page) {
this.page = page
}
},
computed: {
labels () {
return {
searchPlaceholder: this.$gettext('Search by title, artist, domain...')
}
},
actionFilters () {
var currentFilters = {
q: this.search
}
if (this.filters) {
return _.merge(currentFilters, this.filters)
} else {
return currentFilters
}
},
actions () {
let msg = this.$gettext('Import')
return [
{
name: 'import',
label: msg,
filterCheckable: (obj) => { return obj.status === 'not_imported' }
}
]
}
},
watch: {
orderingDirection: function () {
this.page = 1
this.fetchData()
},
ordering: function () {
this.page = 1
this.fetchData()
},
search (newValue) {
this.page = 1
this.fetchData()
},
page () {
this.fetchData()
},
importedFilter () {
this.page = 1
this.fetchData()
}
}
}
</script>

84
front/src/components/federation/LibraryWidget.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<div class="wrapper">
<h3 class="ui header">
<slot name="title"></slot>
</h3>
<p v-if="!isLoading && libraries.length > 0" class="ui subtitle"><slot name="subtitle"></slot></p>
<p v-if="!isLoading && libraries.length === 0" class="ui subtitle"><translate>No matching library.</translate></p>
<i @click="fetchData(previousPage)" :disabled="!previousPage" :class="['ui', {disabled: !previousPage}, 'circular', 'medium', 'angle left', 'icon']">
</i>
<i @click="fetchData(nextPage)" :disabled="!nextPage" :class="['ui', {disabled: !nextPage}, 'circular', 'medium', 'angle right', 'icon']">
</i>
<div class="ui hidden divider"></div>
<div class="ui three cards">
<div v-if="isLoading" class="ui inverted active dimmer">
<div class="ui loader"></div>
</div>
<library-card
:display-scan="false"
:display-follow="$store.state.auth.authenticated"
:library="library"
:display-copy-fid="true"
v-for="library in libraries"
:key="library.uuid"></library-card>
</div>
</div>
</template>
<script>
import _ from 'lodash'
import axios from 'axios'
import LibraryCard from '@/views/content/remote/Card'
export default {
props: {
url: {type: String, required: true}
},
components: {
LibraryCard
},
data () {
return {
libraries: [],
limit: 6,
isLoading: false,
errors: null,
previousPage: null,
nextPage: null
}
},
created () {
this.fetchData()
},
methods: {
fetchData () {
this.isLoading = true
let self = this
let params = _.clone({})
params.page_size = this.limit
params.offset = this.offset
axios.get(this.url, {params: params}).then((response) => {
self.previousPage = response.data.previous
self.nextPage = response.data.next
self.isLoading = false
self.libraries = response.data.results
}, error => {
self.isLoading = false
self.errors = error.backendErrors
})
},
updateOffset (increment) {
if (increment) {
this.offset += this.limit
} else {
this.offset = Math.max(this.offset - this.limit, 0)
}
}
},
watch: {
offset () {
this.fetchData()
}
}
}
</script>

12
front/src/components/library/Album.vue
View File

@ -45,6 +45,14 @@
</h2>
<track-table v-if="album" :artist="album.artist" :display-position="true" :tracks="album.tracks"></track-table>
</div>
<div class="ui vertical stripe segment">
<h2>
<translate>User libraries</translate>
</h2>
<library-widget :url="'albums/' + id + '/libraries/'">
<translate slot="subtitle">This album is present in the following libraries:</translate>
</library-widget>
</div>
</template>
</div>
</template>
@ -55,6 +63,7 @@ import logger from '@/logging'
import backend from '@/audio/backend'
import PlayButton from '@/components/audio/PlayButton'
import TrackTable from '@/components/audio/track/Table'
import LibraryWidget from '@/components/federation/LibraryWidget'
const FETCH_URL = 'albums/'
@ -62,7 +71,8 @@ export default {
props: ['id'],
components: {
PlayButton,
TrackTable
TrackTable,
LibraryWidget
},
data () {
return {

12
front/src/components/library/Artist.vue
View File

@ -56,6 +56,14 @@
</h2>
<track-table :display-position="true" :tracks="tracks"></track-table>
</div>
<div class="ui vertical stripe segment">
<h2>
<translate>User libraries</translate>
</h2>
<library-widget :url="'artists/' + id + '/libraries/'">
<translate slot="subtitle">This artist is present in the following libraries:</translate>
</library-widget>
</div>
</template>
</div>
</template>
@ -69,6 +77,7 @@ import AlbumCard from '@/components/audio/album/Card'
import RadioButton from '@/components/radios/Button'
import PlayButton from '@/components/audio/PlayButton'
import TrackTable from '@/components/audio/track/Table'
import LibraryWidget from '@/components/federation/LibraryWidget'
export default {
props: ['id'],
@ -76,7 +85,8 @@ export default {
AlbumCard,
RadioButton,
PlayButton,
TrackTable
TrackTable,
LibraryWidget
},
data () {
return {

12
front/src/components/library/Track.vue
View File

@ -118,6 +118,14 @@
</a>
</template>
</div>
<div class="ui vertical stripe segment">
<h2>
<translate>User libraries</translate>
</h2>
<library-widget :url="'tracks/' + id + '/libraries/'">
<translate slot="subtitle">This track is present in the following libraries:</translate>
</library-widget>
</div>
</template>
</div>
</template>
@ -131,6 +139,7 @@ import logger from '@/logging'
import PlayButton from '@/components/audio/PlayButton'
import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon'
import LibraryWidget from '@/components/federation/LibraryWidget'
const FETCH_URL = 'tracks/'
@ -139,7 +148,8 @@ export default {
components: {
PlayButton,
TrackPlaylistIcon,
TrackFavoriteIcon
TrackFavoriteIcon,
LibraryWidget
},
data () {
return {

50
front/src/router/index.js
View File

@ -31,12 +31,6 @@ import AdminUsersBase from '@/views/admin/users/Base'
import AdminUsersDetail from '@/views/admin/users/UsersDetail'
import AdminUsersList from '@/views/admin/users/UsersList'
import AdminInvitationsList from '@/views/admin/users/InvitationsList'
import FederationBase from '@/views/federation/Base'
import FederationScan from '@/views/federation/Scan'
import FederationLibraryDetail from '@/views/federation/LibraryDetail'
import FederationLibraryList from '@/views/federation/LibraryList'
import FederationTrackList from '@/views/federation/LibraryTrackList'
import FederationFollowersList from '@/views/federation/LibraryFollowersList'
import ContentBase from '@/views/content/Base'
import ContentHome from '@/views/content/Home'
import LibrariesHome from '@/views/content/libraries/Home'
@ -203,50 +197,6 @@ export default new Router({
name: 'manage.settings',
component: AdminSettings
},
{
path: '/manage/federation',
component: FederationBase,
children: [
{
path: 'scan',
name: 'federation.libraries.scan',
component: FederationScan },
{
path: 'libraries',
name: 'federation.libraries.list',
component: FederationLibraryList,
props: (route) => ({
defaultOrdering: route.query.ordering,
defaultQuery: route.query.query,
defaultPaginateBy: route.query.paginateBy,
defaultPage: route.query.page
})
},
{
path: 'tracks',
name: 'federation.tracks.list',
component: FederationTrackList,
props: (route) => ({
defaultOrdering: route.query.ordering,
defaultQuery: route.query.query,
defaultPaginateBy: route.query.paginateBy,
defaultPage: route.query.page
})
},
{
path: 'followers',
name: 'federation.followers.list',
component: FederationFollowersList,
props: (route) => ({
defaultOrdering: route.query.ordering,
defaultQuery: route.query.query,
defaultPaginateBy: route.query.paginateBy,
defaultPage: route.query.page
})
},
{ path: 'libraries/:id', name: 'federation.libraries.detail', component: FederationLibraryDetail, props: true }
]
},
{
path: '/manage/library',
component: AdminLibraryBase,

4
front/src/views/content/libraries/Card.vue
View File

@ -36,8 +36,8 @@
<i class="database icon"></i>
{{ library.size | humanSize }}
</span>
<i class="music icon"></i> {{ library.uploads_count }}
<translate :translate-params="{count: library.uploads_count}" :translate-n="library.uploads_count" translate-plural="%{ count } tracks">1 track</translate>
<i class="music icon"></i>
<translate :translate-params="{count: library.uploads_count}" :translate-n="library.uploads_count" translate-plural="%{ count } tracks">%{ count } track</translate>
</div>
</div>
<div class="ui bottom basic attached buttons">

23
front/src/views/content/remote/Card.vue
View File

@ -24,9 +24,9 @@
</div>
<div class="meta">
<i class="music icon"></i>
<translate :translate-params="{count: library.uploads_count}" :translate-n="library.uploads_count" translate-plural="%{ count } tracks">1 tracks</translate>
<translate :translate-params="{count: library.uploads_count}" :translate-n="library.uploads_count" translate-plural="%{ count } tracks">%{ count } tracks</translate>
</div>
<div v-if="latestScan" class="meta">
<div v-if="displayScan && latestScan" class="meta">
<template v-if="latestScan.status === 'pending'">
<i class="hourglass icon"></i>
<translate>Scan pending</translate>
@ -59,7 +59,7 @@
<translate>Errored tracks:</translate> {{ latestScan.errored_files }}
</div>
</div>
<div v-if="canLaunchScan" class="clearfix">
<div v-if="displayScan && canLaunchScan" class="clearfix">
<span class="right floated link" @click="launchScan">
<translate>Launch scan</translate> <i class="paper plane icon" />
</span>
@ -68,7 +68,15 @@
<div class="extra content">
<actor-link :actor="library.actor" />
</div>
<div class="ui bottom attached buttons">
<div v-if="displayCopyFid" class="extra content">
<div class="ui form">
<div class="field">
<label><translate>Sharing link</translate></label>
<copy-input :button-classes="'basic'" :value="library.fid" />
</div>
</div>
</div>
<div v-if="displayFollow" class="ui bottom attached buttons">
<button
v-if="!library.follow"
@click="follow()"
@ -104,7 +112,12 @@
import axios from 'axios'
export default {
props: ['library'],
props: {
library: {type: Object, required: true},
displayFollow: {type: Boolean, default: true},
displayScan: {type: Boolean, default: true},
displayCopyFid: {type: Boolean, default: false},
},
data () {
return {
isLoadingFollow: false,

61
front/src/views/federation/Base.vue
View File

@ -1,61 +0,0 @@
<template>
<div class="main pusher" v-title="labels.title">
<div class="ui secondary pointing menu">
<router-link
class="ui item"
:to="{name: 'federation.libraries.list'}"><translate>Libraries</translate></router-link>
<router-link
class="ui item"
:to="{name: 'federation.tracks.list'}"><translate>Tracks</translate></router-link>
<div class="ui secondary right menu">
<router-link
class="ui item"
:to="{name: 'federation.followers.list'}">
<translate>Followers</translate>
<div class="ui teal label" :title="labels.pendingRequests">{{ requestsCount }}</div>
</router-link>
</div>
</div>
<router-view :key="$route.fullPath"></router-view>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
requestsCount: 0
}
},
created () {
this.fetchRequestsCount()
},
computed: {
labels () {
let title = this.$gettext('Federation')
let pendingRequests = this.$gettext('Pending requests')
return {
title,
pendingRequests
}
}
},
methods: {
fetchRequestsCount () {
let self = this
axios.get('federation/libraries/followers/', {params: {pending: true}}).then(response => {
self.requestsCount = response.data.count
})
}
}
}
</script>
<style scoped>
.ui.menu .item > .label {
position: absolute;
right: -2em;
}
</style>

220
front/src/views/federation/LibraryDetail.vue
View File

@ -1,220 +0,0 @@
<template>
<div>
<div v-if="isLoading" class="ui vertical segment" v-title="labels.title">
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
</div>
<template v-if="object">
<div :class="['ui', 'head', 'vertical', 'center', 'aligned', 'stripe', 'segment']" v-title="libraryUsername">
<div class="segment-content">
<h2 class="ui center aligned icon header">
<i class="circular inverted cloud olive icon"></i>
<div class="content">
{{ libraryUsername }}
</div>
</h2>
</div>
<div class="ui hidden divider"></div>
<div class="ui one column centered grid">
<table class="ui collapsing very basic table">
<tbody>
<tr>
<td >
<translate>Follow status</translate>
<span :data-tooltip="labels.statusTooltip"><i class="question circle icon"></i></span>
</td>
<td>
<template v-if="object.follow.approved === null">
<i class="loading icon"></i> <translate>Pending approval</translate>
</template>
<template v-else-if="object.follow.approved === true">
<i class="check icon"></i> <translate>Following</translate>
</template>
<template v-else-if="object.follow.approved === false">
<i class="x icon"></i> <translate>Not following</translate>
</template>
</td>
<td>
</td>
</tr>
<tr>
<td>
<translate>Federation</translate>
<span :data-tooltip="labels.federationTooltip"><i class="question circle icon"></i></span>
</td>
<td>
<div class="ui toggle checkbox">
<input
@change="update('federation_enabled')"
v-model="object.federation_enabled" type="checkbox">
<label></label>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<translate>Auto importing</translate>
<span :data-tooltip="labels.autoImportTooltip"><i class="question circle icon"></i></span>
</td>
<td>
<div class="ui toggle checkbox">
<input
@change="update('autoimport')"
v-model="object.autoimport" type="checkbox">
<label></label>
</div>
</td>
<td></td>
</tr>
<!-- Disabled until properly implemented on the backend
<tr>
<td><translate>File mirroring</translate></td>
<td>
<div class="ui toggle checkbox">
<input
@change="update('download_files')"
v-model="object.download_files" type="checkbox">
<label></label>
</div>
</td>
<td></td>
</tr>
-->
<tr>
<td><translate>Library size</translate></td>
<td>
<template v-if="object.tracks_count">
<translate
translate-plural="%{ count } tracks"
:translate-n="object.tracks_count"
:translate-params="{count: object.tracks_count}">
%{ count } track
</translate>
</template>
<template v-else>
<translate>Unknown</translate>
</template>
</td>
<td></td>
</tr>
<tr>
<td><translate>Last fetched</translate></td>
<td>
<human-date v-if="object.fetched_date" :date="object.fetched_date"></human-date>
<template v-else>Never</template>
<button
@click="scan"
v-if="!scanTrigerred"
:class="['ui', 'basic', {loading: isScanLoading}, 'button']">
<i class="sync icon"></i> <translate>Trigger scan</translate>
</button>
<button v-else class="ui success button">
<i class="check icon"></i> <translate>Scan triggered!</translate>
</button>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="ui hidden divider"></div>
<button @click="fetchData" class="ui basic button"><translate>Refresh</translate></button>
</div>
<div class="ui vertical stripe segment">
<h2><translate>Tracks available in this library</translate></h2>
<library-track-table v-if="!isLoading" :filters="{library: id}"></library-track-table>
</div>
</template>
</div>
</template>
<script>
import axios from 'axios'
import logger from '@/logging'
import LibraryTrackTable from '@/components/federation/LibraryTrackTable'
export default {
props: ['id'],
components: {
LibraryTrackTable
},
data () {
return {
isLoading: true,
isScanLoading: false,
object: null,
scanTrigerred: false
}
},
created () {
this.fetchData()
},
methods: {
fetchData () {
var self = this
this.scanTrigerred = false
this.isLoading = true
let url = 'federation/libraries/' + this.id + '/'
logger.default.debug('Fetching library "' + this.id + '"')
axios.get(url).then((response) => {
self.object = response.data
self.isLoading = false
})
},
scan (until) {
var self = this
this.isScanLoading = true
let data = {}
let url = 'federation/libraries/' + this.id + '/scan/'
logger.default.debug('Triggering scan for library "' + this.id + '"')
axios.post(url, data).then((response) => {
self.scanTrigerred = true
logger.default.debug('Scan triggered with id', response.data)
self.isScanLoading = false
})
},
update (attr) {
let newValue = this.object[attr]
let params = {}
let self = this
params[attr] = newValue
axios.patch('federation/libraries/' + this.id + '/', params).then((response) => {
logger.default.info(`${attr} was updated succcessfully to ${newValue}`)
}, (error) => {
logger.default.error(`Error while setting ${attr} to ${newValue}`, error)
self.object[attr] = !newValue
})
}
},
computed: {
labels () {
let title = this.$gettext('Library')
let statusTooltip = this.$gettext('This indicate if the remote library granted you access')
let federationTooltip = this.$gettext('Use this flag to enable/disable federation with this library')
let autoImportTooltip = this.$gettext('When enabled, auto importing will automatically import new tracks published in this library')
return {
title,
statusTooltip,
federationTooltip,
autoImportTooltip
}
},
libraryUsername () {
let actor = this.object.actor
return `${actor.preferred_username}@${actor.domain}`
}
},
watch: {
id () {
this.fetchData()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

33
front/src/views/federation/LibraryFollowersList.vue
View File

@ -1,33 +0,0 @@
<template>
<div v-title="labels.title">
<div class="ui vertical stripe segment">
<h2 class="ui header"><translate>Browsing followers</translate></h2>
<p>
<translate>Be careful when accepting follow requests, as it means the follower will have access to your entire library.</translate>
</p>
<div class="ui hidden divider"></div>
<library-follow-table></library-follow-table>
</div>
</div>
</template>
<script>
import LibraryFollowTable from '@/components/federation/LibraryFollowTable'
export default {
components: {
LibraryFollowTable
},
computed: {
labels () {
return {
title: this.$gettext('Followers')
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

183
front/src/views/federation/LibraryList.vue
View File

@ -1,183 +0,0 @@
<template>
<div v-title="labels.title">
<div class="ui vertical stripe segment">
<h2 class="ui header"><translate>Browsing libraries</translate></h2>
<router-link
class="ui basic green button"
:to="{name: 'federation.libraries.scan'}">
<i class="plus icon"></i>
<translate>Add a new library</translate>
</router-link>
<div class="ui hidden divider"></div>
<div :class="['ui', {'loading': isLoading}, 'form']">
<div class="fields">
<div class="field">
<label><translate>Search</translate></label>
<input class="search" type="text" v-model="query" :placeholder="labels.searchPlaceholder"/>
</div>
<div class="field">
<label><translate>Ordering</translate></label>
<select class="ui dropdown" v-model="ordering">
<option v-for="option in orderingOptions" :value="option[0]">
{{ option[1] }}
</option>
</select>
</div>
<div class="field">
<label><translate>Ordering direction</translate></label>
<select class="ui dropdown" v-model="orderingDirection">
<option value="+"><translate>Ascending</translate></option>
<option value="-"><translate>Descending</translate></option>
</select>
</div>
<div class="field">
<label><translate>Results per page</translate></label>
<select class="ui dropdown" v-model="paginateBy">
<option :value="parseInt(12)">12</option>
<option :value="parseInt(25)">25</option>
<option :value="parseInt(50)">50</option>
</select>
</div>
</div>
</div>
<div class="ui hidden divider"></div>
<div
v-if="result"
v-masonry
transition-duration="0"
item-selector=".column"
percent-position="true"
stagger="0"
class="ui stackable three column doubling grid">
<div
v-masonry-tile
v-if="result.results.length > 0"
v-for="library in result.results"
:key="library.id"
class="column">
<library-card class="fluid" :library-instance="library"></library-card>
</div>
</div>
<div class="ui center aligned basic segment">
<pagination
v-if="result && result.results.length > 0"
@page-changed="selectPage"
:current="page"
:paginate-by="paginateBy"
:total="result.count"
></pagination>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import _ from 'lodash'
import $ from 'jquery'
import logger from '@/logging'
import OrderingMixin from '@/components/mixins/Ordering'
import PaginationMixin from '@/components/mixins/Pagination'
import LibraryCard from '@/components/federation/LibraryCard'
import Pagination from '@/components/Pagination'
const FETCH_URL = 'federation/libraries/'
export default {
mixins: [OrderingMixin, PaginationMixin],
props: {
defaultQuery: {type: String, required: false, default: ''}
},
components: {
LibraryCard,
Pagination
},
data () {
let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
return {
isLoading: true,
result: null,
page: parseInt(this.defaultPage),
query: this.defaultQuery,
paginateBy: parseInt(this.defaultPaginateBy || 50),
orderingDirection: defaultOrdering.direction || '+',
ordering: defaultOrdering.field,
orderingOptions: [
['creation_date', 'Creation date'],
['tracks_count', 'Available tracks']
]
}
},
created () {
this.fetchData()
},
mounted () {
$('.ui.dropdown').dropdown()
$(this.$el).find('.field .search').focus()
},
computed: {
labels () {
let searchPlaceholder = this.$gettext('Enter a library domain name...')
let title = this.$gettext('Libraries')
return {
searchPlaceholder,
title
}
}
},
methods: {
updateQueryString: _.debounce(function () {
this.$router.replace({
query: {
query: this.query,
page: this.page,
paginateBy: this.paginateBy,
ordering: this.getOrderingAsString()
}
})
}, 500),
fetchData: _.debounce(function () {
var self = this
this.isLoading = true
let url = FETCH_URL
let params = {
page: this.page,
q: this.query,
ordering: this.getOrderingAsString()
}
logger.default.debug('Fetching libraries')
axios.get(url, {params: params}).then((response) => {
self.result = response.data
self.isLoading = false
})
}, 500),
selectPage: function (page) {
this.page = page
}
},
watch: {
page () {
this.updateQueryString()
this.fetchData()
},
ordering () {
this.updateQueryString()
this.fetchData()
},
orderingDirection () {
this.updateQueryString()
this.fetchData()
},
query () {
this.updateQueryString()
this.fetchData()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

30
front/src/views/federation/LibraryTrackList.vue
View File

@ -1,30 +0,0 @@
<template>
<div v-title="labels.title">
<div class="ui vertical stripe segment">
<h2 class="ui header"><translate>Browsing federated tracks</translate></h2>
<div class="ui hidden divider"></div>
<library-track-table :show-library="true"></library-track-table>
</div>
</div>
</template>
<script>
import LibraryTrackTable from '@/components/federation/LibraryTrackTable'
export default {
components: {
LibraryTrackTable
},
computed: {
labels () {
return {
title: this.$gettext('Federated tracks')
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

39
front/src/views/federation/Scan.vue
View File

@ -1,39 +0,0 @@
<template>
<div>
<div class="ui vertical stripe segment">
<library-form @scanned="updateLibraryData"></library-form>
<library-card v-if="libraryData" :library-data="libraryData"></library-card>
</div>
<div class="ui vertical stripe segment">
</div>
</div>
</template>
<script>
// import axios from 'axios'
import TrackTable from '@/components/audio/track/Table'
import RadioButton from '@/components/radios/Button'
import Pagination from '@/components/Pagination'
import LibraryForm from '@/components/federation/LibraryForm'
import LibraryCard from '@/components/federation/LibraryCard'
export default {
components: {
TrackTable,
RadioButton,
Pagination,
LibraryForm,
LibraryCard
},
data () {
return {
libraryData: null
}
},
methods: {
updateLibraryData (data) {
this.libraryData = data
}
}
}
</script>