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

Merge branch '170-single-track-view' into 'develop' 

See #170: single track page redesign

See merge request funkwhale/funkwhale!1068
This commit is contained in:
Eliot Berriot 2020-03-26 16:40:35 +01:00
parent c43fe461c4 f361791c1b
commit 8c834ce635
13 changed files with 388 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
api/funkwhale_api/music/mutations.py
View File

@ -9,6 +9,8 @@ from funkwhale_api.tags import serializers as tags_serializers
from . import models
NOOP = object()
def can_suggest(obj, actor):
return obj.is_local
@ -34,9 +36,10 @@ class TagMutation(mutations.UpdateMutationSerializer):
return handlers
def update(self, instance, validated_data):
tags = validated_data.pop("tags", [])
tags = validated_data.pop("tags", NOOP)
r = super().update(instance, validated_data)
tags_models.set_tags(instance, *tags)
if tags != NOOP:
tags_models.set_tags(instance, *tags)
return r
@ -53,9 +56,10 @@ class DescriptionMutation(mutations.UpdateMutationSerializer):
return handlers
def update(self, instance, validated_data):
description = validated_data.pop("description", None)
description = validated_data.pop("description", NOOP)
r = super().update(instance, validated_data)
common_utils.attach_content(instance, "description", description)
if description != NOOP:
common_utils.attach_content(instance, "description", description)
return r

16
api/funkwhale_api/playlists/filters.py
View File

@ -2,6 +2,7 @@ from django.db.models import Count
from django_filters import rest_framework as filters
from funkwhale_api.common import filters as common_filters
from funkwhale_api.music import models as music_models
from funkwhale_api.music import utils
from . import models
@ -10,6 +11,21 @@ from . import models
class PlaylistFilter(filters.FilterSet):
q = filters.CharFilter(field_name="_", method="filter_q")
playable = filters.BooleanFilter(field_name="_", method="filter_playable")
track = filters.ModelChoiceFilter(
"playlist_tracks__track",
queryset=music_models.Track.objects.all(),
distinct=True,
)
album = filters.ModelChoiceFilter(
"playlist_tracks__track__album",
queryset=music_models.Album.objects.all(),
distinct=True,
)
artist = filters.ModelChoiceFilter(
"playlist_tracks__track__artist",
queryset=music_models.Artist.objects.all(),
distinct=True,
)
scope = common_filters.ActorScopeFilter(actor_field="user__actor", distinct=True)
class Meta:

37
api/tests/music/test_mutations.py
View File

@ -220,3 +220,40 @@ def test_album_mutation_description(factory_name, factories, mocker):
mutation.previous_state["description"]
== common_serializers.ContentSerializer(content).data
)
@pytest.mark.parametrize(
"factory_name", ["music.Track", "music.Album", "music.Artist"],
)
def test_mutation_description_keep_tags(factory_name, factories, mocker):
mocker.patch("funkwhale_api.federation.routes.outbox.dispatch")
content = factories["common.Content"]()
obj = factories[factory_name](description=content, set_tags=["punk", "rock"])
mutation = factories["common.Mutation"](
type="update",
target=obj,
payload={"description": {"content_type": "text/plain", "text": "hello there"}},
)
mutation.apply()
obj.refresh_from_db()
assert obj.description.content_type == "text/plain"
assert obj.description.text == "hello there"
assert obj.get_tags() == ["punk", "rock"]
@pytest.mark.parametrize(
"factory_name", ["music.Track", "music.Album", "music.Artist"],
)
def test_mutation_tags_keep_descriptions(factory_name, factories, mocker):
mocker.patch("funkwhale_api.federation.routes.outbox.dispatch")
content = factories["common.Content"]()
obj = factories[factory_name](description=content)
mutation = factories["common.Mutation"](
type="update", target=obj, payload={"tags": ["punk", "rock"]},
)
mutation.apply()
obj.refresh_from_db()
assert obj.description == content
assert obj.get_tags() == ["punk", "rock"]

29
api/tests/playlists/test_filters.py Normal file
View File

@ -0,0 +1,29 @@
from funkwhale_api.playlists import filters
from funkwhale_api.playlists import models
def test_playlist_filter_track(factories, queryset_equal_list):
plt = factories["playlists.PlaylistTrack"]()
factories["playlists.PlaylistTrack"]()
qs = models.Playlist.objects.all()
filterset = filters.PlaylistFilter({"track": plt.track.pk}, queryset=qs)
assert filterset.qs == [plt.playlist]
def test_playlist_filter_album(factories, queryset_equal_list):
plt = factories["playlists.PlaylistTrack"]()
factories["playlists.PlaylistTrack"]()
qs = models.Playlist.objects.all()
filterset = filters.PlaylistFilter({"album": plt.track.album.pk}, queryset=qs)
assert filterset.qs == [plt.playlist]
def test_playlist_filter_artist(factories, queryset_equal_list):
plt = factories["playlists.PlaylistTrack"]()
factories["playlists.PlaylistTrack"]()
qs = models.Playlist.objects.all()
filterset = filters.PlaylistFilter({"artist": plt.track.artist.pk}, queryset=qs)
assert filterset.qs == [plt.playlist]

1
front/package.json
View File

@ -28,6 +28,7 @@
"register-service-worker": "^1.6.2",
"sanitize-html": "^1.20.1",
"showdown": "^1.8.6",
"text-clipper": "^1.3.0",
"vue": "^2.6.10",
"vue-gettext": "^2.1.0",
"vue-lazyload": "^1.2.6",

2
front/src/components/audio/PlayButton.vue
View File

@ -7,7 +7,7 @@
:disabled="!playable"
:class="buttonClasses.concat(['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}])">
<i :class="[playIconClass, 'icon']"></i>
<template v-if="!discrete && !iconOnly"><slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template>
<template v-if="!discrete && !iconOnly">&nbsp;<slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template>
</button>
<div
v-if="!discrete && !iconOnly"

26
front/src/components/common/RenderedDescription.vue
View File

@ -1,6 +1,18 @@
<template>
<div>
<div v-html="html" v-if="content && !isUpdating"></div>
<template v-if="content && !isUpdating">
<div v-html="html"></div>
<template v-if="isTruncated">
<div class="ui small hidden divider"></div>
<a @click.stop.prevent="showMore = true" v-if="showMore === false">
<translate translate-context="*/*/Button,Label">Show more</translate>
</a>
<a @click.stop.prevent="showMore = false" v-else="showMore === true">
<translate translate-context="*/*/Button,Label">Show less</translate>
</a>
</template>
</template>
<p v-else-if="!isUpdating">
<translate translate-context="*/*/Placeholder">No description available</translate>
</p>
@ -33,6 +45,7 @@
<script>
import {secondsToObject} from '@/filters'
import axios from 'axios'
import clip from 'text-clipper'
export default {
props: {
@ -42,11 +55,13 @@ export default {
canUpdate: {required: false, default: true, type: Boolean},
fetchHtml: {required: false, default: false, type: Boolean},
permissive: {required: false, default: false, type: Boolean},
truncateLength: {required: false, default: 500, type: Number},
},
data () {
return {
isUpdating: false,
showMore: false,
newText: (this.content || {text: ''}).text,
errors: null,
isLoading: false,
@ -64,7 +79,16 @@ export default {
if (this.fetchHtml) {
return this.preview
}
if (this.truncateLength > 0 && !this.showMore) {
return this.truncatedHtml
}
return this.content.html
},
truncatedHtml () {
return clip(this.content.html, this.truncateLength)
},
isTruncated () {
return this.truncateLength > 0 && this.truncatedHtml.length < this.content.html.length
}
},
methods: {

5
front/src/components/favorites/TrackFavoriteIcon.vue
View File

@ -7,7 +7,7 @@
<button
v-else
@click.stop="$store.dispatch('favorites/toggle', track.id)"
:class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', 'really', 'button']"
:class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
:aria-label="title"
:title="title">
<i :class="['heart', {'pink': isFavorite}, 'basic', 'icon']"></i>
@ -18,7 +18,8 @@
export default {
props: {
track: {type: Object},
button: {type: Boolean, default: false}
button: {type: Boolean, default: false},
border: {type: Boolean, default: false},
},
computed: {
title () {

139
front/src/components/library/TrackBase.vue
View File

@ -5,63 +5,45 @@
</div>
<template v-if="track">
<section
:class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
:style="headerStyle"
:class="['ui', 'head', 'vertical', 'center', 'aligned', 'stripe', 'segment']"
v-title="track.title"
>
<div class="segment-content">
<h2 class="ui center aligned icon header">
<i class="circular inverted music orange icon"></i>
<div class="content">
{{ track.title }}
<div class="sub header" v-html="subtitle"></div>
<div class="ui basic padded segment">
<div class="ui stackable grid row container">
<div class="eight wide left aligned column">
<h1 class="ui header">
{{ track.title }}
<div class="sub header" v-html="subtitle"></div>
</h1>
</div>
</h2>
<tags-list v-if="track.tags && track.tags.length > 0" :tags="track.tags"></tags-list>
<div class="ui hidden divider"></div>
<div class="header-buttons">
<div class="ui buttons">
<div class="eight wide right aligned column button-group">
<play-button class="orange" :track="track">
<translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate>
</play-button>
</div>
<div class="ui buttons">
<track-favorite-icon :track="track" :button="true"></track-favorite-icon>
</div>
<div class="ui buttons">
<track-playlist-icon :button="true" v-if="$store.state.auth.authenticated" :track="track"></track-playlist-icon>
</div>
<div class="ui buttons">
<a v-if="upload" :href="downloadUrl" target="_blank" class="ui icon labeled button">
&nbsp;
<track-favorite-icon v-if="$store.state.auth.authenticated" :border="true" :track="track"></track-favorite-icon>
<track-playlist-icon class="circular" v-if="$store.state.auth.authenticated" :border="true" :track="track"></track-playlist-icon>
<a v-if="upload" :href="downloadUrl" target="_blank" class="ui basic circular icon button" :title="labels.download">
<i class="download icon"></i>
<translate translate-context="Content/Track/Link/Verb">Download</translate>
</a>
</div>
<modal v-if="publicLibraries.length > 0" :show.sync="showEmbedModal">
<div class="header">
<translate translate-context="Popup/Track/Title">Embed this track on your website</translate>
</div>
<div class="content">
<div class="description">
<embed-wizard type="track" :id="track.id" />
<modal v-if="publicLibraries.length > 0" :show.sync="showEmbedModal">
<div class="header">
<translate translate-context="Popup/Track/Title">Embed this track on your website</translate>
</div>
</div>
<div class="actions">
<div class="ui basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
<div class="content">
<div class="description">
<embed-wizard type="track" :id="track.id" />
</div>
</div>
</div>
</modal>
<div class="ui buttons">
<button class="ui button" @click="$refs.dropdown.click()">
<translate translate-context="*/*/Button.Label/Noun">More…</translate>
</button>
<div class="ui floating dropdown icon button" ref="dropdown" v-dropdown>
<i class="dropdown icon"></i>
<div class="menu">
<div class="actions">
<div class="ui basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div>
</div>
</modal>
<div class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}">
<i class="ellipsis vertical icon"></i>
<div class="menu" style="right: 0; left: auto">
<div
role="button"
v-if="publicLibraries.length > 0"
@ -74,14 +56,10 @@
<i class="wikipedia w icon"></i>
<translate translate-context="Content/*/Button.Label/Verb">Search on Wikipedia</translate>
</a>
<a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" rel="noreferrer noopener" class="basic item">
<a v-if="discogsUrl ":href="discogsUrl" target="_blank" rel="noreferrer noopener" class="basic item">
<i class="external icon"></i>
<translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
<translate translate-context="Content/*/Button.Label/Verb">Search on Discogs</translate>
</a>
<a v-if="discogsUrl ":href="discogsUrl" target="_blank" rel="noreferrer noopener" class="basic item">
<i class="external icon"></i>
<translate translate-context="Content/*/Button.Label/Verb">Search on Discogs</translate>
</a>
<router-link
v-if="track.is_local"
:to="{name: 'library.tracks.edit', params: {id: track.id }}"
@ -144,11 +122,23 @@ import TrackFavoriteIcon from "@/components/favorites/TrackFavoriteIcon"
import TrackPlaylistIcon from "@/components/playlists/TrackPlaylistIcon"
import Modal from '@/components/semantic/Modal'
import EmbedWizard from "@/components/audio/EmbedWizard"
import TagsList from "@/components/tags/List"
import ReportMixin from '@/components/mixins/Report'
import {momentFormat} from '@/filters'
const FETCH_URL = "tracks/"
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
export default {
props: ["id"],
mixins: [ReportMixin],
@ -158,7 +148,6 @@ export default {
TrackFavoriteIcon,
Modal,
EmbedWizard,
TagsList,
},
data() {
return {
@ -213,7 +202,9 @@ export default {
},
labels() {
return {
title: this.$pgettext('*/*/*/Noun', "Track")
title: this.$pgettext('*/*/*/Noun', "Track"),
download: this.$pgettext('Content/Track/Link/Verb', "Download"),
more: this.$pgettext('*/*/Button.Label/Noun', "More…"),
}
},
wikipediaUrl() {
@ -222,11 +213,6 @@ export default {
encodeURI(this.track.title + " " + this.track.artist.name)
)
},
musicbrainzUrl() {
if (this.track.mbid) {
return "https://musicbrainz.org/recording/" + this.track.mbid
}
},
discogsUrl() {
if (this.track.album) {
return (
@ -251,10 +237,15 @@ export default {
}
return u
},
cover() {
if (this.track.cover) {
return this.track.cover
}
attributedToUrl () {
let route = this.$router.resolve({
name: 'profile.full.overview',
params: {
username: this.track.attributed_to.preferred_username,
domain: this.track.attributed_to.domain
}
})
return route.href
},
albumUrl () {
let route = this.$router.resolve({name: 'library.albums.detail', params: {id: this.track.album.id }})
@ -276,12 +267,20 @@ export default {
},
subtitle () {
let msg
if (this.track.album) {
msg = this.$pgettext('Content/Track/Paragraph', 'From album <a class="internal" href="%{ albumUrl }">%{ album }</a> by <a class="internal" href="%{ artistUrl }">%{ artist }</a>')
return this.$gettextInterpolate(msg, {album: this.track.album.title, artist: this.track.artist.name, albumUrl: this.albumUrl, artistUrl: this.artistUrl})
if (this.track.attributed_to) {
msg = this.$pgettext('Content/Track/Paragraph', 'Uploaded by <a class="internal" href="%{ uploaderUrl }">%{ uploader }</a> on <time title="%{ date }" datetime="%{ date }">%{ prettyDate }</time>')
return this.$gettextInterpolate(msg, {
uploaderUrl: this.attributedToUrl,
uploader: escapeHtml(`@${this.track.attributed_to.full_username}`),
date: escapeHtml(this.track.creation_date),
prettyDate: escapeHtml(momentFormat(this.track.creation_date, 'LL')),
})
} else {
msg = this.$pgettext('Content/Track/Paragraph', 'By <a class="internal" href="%{ artistUrl }">%{ artist }</a>')
return this.$gettextInterpolate(msg, {artist: this.track.artist.name, artistUrl: this.artistUrl})
msg = this.$pgettext('Content/Track/Paragraph', 'Uploaded by on <time title="%{ date }" datetime="%{ date }">%{ prettyDate }</time>')
return this.$gettextInterpolate(msg, {
date: escapeHtml(this.track.creation_date),
prettyDate: escapeHtml(momentFormat(this.track.creation_date, 'LL')),
})
}
}
},

247
front/src/components/library/TrackDetail.vue
View File

@ -1,88 +1,154 @@
<template>
<div v-if="track">
<section class="ui vertical stripe center aligned segment">
<h2 class="ui header">
<translate translate-context="Content/Track/Title/Noun">Track information</translate>
</h2>
<table class="ui very basic collapsing celled center aligned table">
<tbody>
<tr>
<td>
<translate translate-context="Content/Track/*/Noun">Copyright</translate>
</td>
<td v-if="track.copyright" :title="track.copyright">{{ track.copyright|truncate(50) }}</td>
<td v-else>
<translate translate-context="Content/Track/Table.Paragraph">No copyright information available for this track</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">License</translate>
</td>
<td v-if="license">
<a :href="license.url" target="_blank" rel="noopener noreferrer">{{ license.name }}</a>
</td>
<td v-else>
<translate translate-context="Content/Track/Table.Paragraph">No licensing information for this track</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*">Duration</translate>
</td>
<td v-if="upload && upload.duration">{{ time.parse(upload.duration) }}</td>
<td v-else>
<translate translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">Size</translate>
</td>
<td v-if="upload && upload.size">{{ upload.size | humanSize }}</td>
<td v-else>
<translate translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/Track/*/Noun">Bitrate</translate>
</td>
<td v-if="upload && upload.bitrate">{{ upload.bitrate | humanSize }}/s</td>
<td v-else>
<translate translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/Track/Table.Label/Noun">Type</translate>
</td>
<td v-if="upload && upload.extension">{{ upload.extension }}</td>
<td v-else>
<translate translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">Federation ID</translate>
</td>
<td :title="track.fid">
<a :href="track.fid" target="_blank" rel="noopener noreferrer">
{{ track.fid|truncate(65)}}
</a>
</td>
</tr>
</tbody>
</table>
</section>
<section class="ui vertical stripe segment">
<h2>
<translate translate-context="Content/*/Title/Noun">User libraries</translate>
</h2>
<library-widget @loaded="$emit('libraries-loaded', $event)" :url="'tracks/' + id + '/libraries/'">
<translate translate-context="Content/Track/Paragraph" slot="subtitle">This track is present in the following libraries:</translate>
</library-widget>
<div class="ui stackable grid row container">
<div class="six wide column">
<img class="image" v-if="cover && cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
<template v-if="upload">
<h3 class="ui header">
<translate translate-context="Content/*/*">Track Details</translate>
</h3>
<table class="ui basic table">
<tbody>
<tr>
<td>
<translate translate-context="Content/*/*">Duration</translate>
</td>
<td class="right aligned">
<template v-if="upload.duration">{{ time.parse(upload.duration) }}</template>
<translate v-else translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">Size</translate>
</td>
<td class="right aligned">
<template v-if="upload.size">{{ upload.size | humanSize }}</template>
<translate v-else translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">Codec</translate>
</td>
<td class="right aligned">
<template v-if="upload.extension">{{ upload.extension }}</template>
<translate v-else translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/Track/*/Noun">Bitrate</translate>
</td>
<td class="right aligned">
<template v-if="upload.bitrate">{{ upload.bitrate | humanSize }}/s</template>
<translate v-else translate-context="*/*/*">N/A</translate>
</td>
</tr>
</tbody>
</table>
</template>
</div>
<div class="ten wide column">
<template v-if="track.tags && track.tags.length > 0">
<tags-list :tags="track.tags"></tags-list>
<div class="ui hidden divider"></div>
</template>
<rendered-description
:content="track.description"
can-update="false"></rendered-description>
<h2 class="ui header">
<translate translate-context="Content/*/*">Release Details</translate>
</h2>
<table class="ui basic table ellipsis-rows">
<tbody>
<tr>
<td>
<translate translate-context="*/*/*/Noun">Artist</translate>
</td>
<td class="right aligned">
<router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id}}">
{{ track.artist.name }}
</router-link>
</td>
</tr>
<tr v-if="track.album">
<td>
<translate translate-context="*/*/*/Noun">Album</translate>
</td>
<td class="right aligned">
<router-link :to="{name: 'library.albums.detail', params: {id: track.album.id}}">
{{ track.album.title }}
</router-link>
</td>
</tr>
<tr>
<td>
<translate translate-context="*/*/*">Year</translate>
</td>
<td class="right aligned">
<template v-if="track.album && track.album.release_date">
{{ track.album.release_date | moment('Y') }}
</template>
<template v-else>
<translate translate-context="*/*/*">N/A</translate>
</template>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/Track/*/Noun">Copyright</translate>
</td>
<td class="right aligned">
<span v-if="track.copyright" :title="track.copyright">{{ track.copyright|truncate(50) }}</span>
<template v-else>
<translate translate-context="*/*/*">N/A</translate>
</template>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">License</translate>
</td>
<td class="right aligned">
<a v-if="license" :title="license.name" :href="license.url" target="_blank" rel="noopener noreferrer">{{ license.name }}</a>
<translate v-else translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr v-if="!track.is_local">
<td>
<translate translate-context="Content/*/*/Noun">URL</translate>
</td>
<td :title="track.fid">
<a :href="track.fid" target="_blank" rel="noopener noreferrer">
{{ track.fid|truncate(65)}}
</a>
</td>
</tr>
</tbody>
</table>
<a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" rel="noreferrer noopener">
<i class="external icon"></i>
<translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
</a>
<h2 class="ui header">
<translate translate-context="Content/*/Title/Noun">Related Playlists</translate>
</h2>
<playlist-widget :url="'playlists/'" :filters="{track: track.id, playable: true, ordering: '-modification_date'}">
</playlist-widget>
<h2 class="ui header">
<translate translate-context="Content/*/Title/Noun">Related Libraries</translate>
</h2>
<library-widget @loaded="$emit('libraries-loaded', $event)" :url="'tracks/' + id + '/libraries/'">
<translate translate-context="Content/Track/Paragraph" slot="subtitle">This track is present in the following libraries:</translate>
</library-widget>
</div>
</div>
</section>
</div>
</template>
@ -93,6 +159,8 @@ import axios from "axios"
import url from "@/utils/url"
import logger from "@/logging"
import LibraryWidget from "@/components/federation/LibraryWidget"
import TagsList from "@/components/tags/List"
import PlaylistWidget from "@/components/playlists/Widget"
const FETCH_URL = "tracks/"
@ -100,6 +168,8 @@ export default {
props: ["track", "libraries"],
components: {
LibraryWidget,
TagsList,
PlaylistWidget,
},
data() {
return {
@ -128,6 +198,11 @@ export default {
title: this.$pgettext('*/*/*/Noun', "Track")
}
},
musicbrainzUrl() {
if (this.track.mbid) {
return "https://musicbrainz.org/recording/" + this.track.mbid
}
},
upload() {
if (this.track.uploads) {
return this.track.uploads[0]
@ -138,7 +213,15 @@ export default {
return null
}
return this.licenseData
}
},
cover () {
if (this.track.cover && this.track.cover.original) {
return this.track.cover
}
if (this.track.album && this.track.album.cover) {
return this.track.album.cover
}
},
},
watch: {
track (v) {

5
front/src/components/playlists/TrackPlaylistIcon.vue
View File

@ -9,7 +9,7 @@
<button
v-else
@click.stop="$store.commit('playlists/chooseTrack', track)"
:class="['ui', 'basic', 'circular', 'icon', 'really', 'button']"
:class="['ui', 'basic', 'circular', 'icon', {'really': !border}, 'button']"
:aria-label="labels.addToPlaylist"
:title="labels.addToPlaylist">
<i :class="['list', 'basic', 'icon']"></i>
@ -21,7 +21,8 @@
export default {
props: {
track: {type: Object},
button: {type: Boolean, default: false}
button: {type: Boolean, default: false},
border: {type: Boolean, default: false},
},
data () {
return {

27
front/src/style/_main.scss
View File

@ -206,7 +206,27 @@ html {
white-space: nowrap;
overflow: hidden;
}
.ellipsis-rows tr > {
td:nth-child(1) {
max-width: 4em;
}
td:nth-child(2) {
position: relative;
&:before {
content: '&nbsp;';
visibility: hidden;
}
> * {
position: absolute;
left: 0;
right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 0.5em;
}
}
}
.ui.small.text.container {
max-width: 500px !important;
}
@ -686,5 +706,10 @@ input + .help {
font-size: 0.8em;
}
}
.button-group {
> *:not(:first-child) {
margin-left: 0.5em;
}
}
@import "./themes/_light.scss";
@import "./themes/_dark.scss";

5
front/yarn.lock
View File

@ -9589,6 +9589,11 @@ terser@^4.4.3:
source-map "~0.6.1"
source-map-support "~0.5.12"
text-clipper@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/text-clipper/-/text-clipper-1.3.0.tgz#9cdda9a36f955b3600d73dfffd7487143aac890f"
integrity sha512-6MjWFsTsXI8VyqqpGxTkb7685IPUInyJzG8sNhHHD2xbrnwv9xENQg5dAAabaFLIUa1QXDtRd406HYTauM010Q==
text-table@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"