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

See #170: single track page redesign

See merge request !1068

api/funkwhale_api/music/mutations.py

@@ -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
 
 

api/funkwhale_api/playlists/filters.py

@@ -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:

api/tests/music/test_mutations.py

@@ -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"]

api/tests/playlists/test_filters.py

+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]

front/package.json

@@ -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",

front/src/components/audio/PlayButton.vue

@@ -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"

front/src/components/common/RenderedDescription.vue

 <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: {

front/src/components/favorites/TrackFavoriteIcon.vue

@@ -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 () {

front/src/components/library/TrackBase.vue

@@ -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')),
+        })
       }
     }
   },

front/src/components/playlists/TrackPlaylistIcon.vue

@@ -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 {

front/src/style/_main.scss

@@ -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: ' ';
+      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";

front/yarn.lock

@@ -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"