From 27801ce5417449b3a67758d9492a56be78a05212 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 26 Mar 2020 16:18:37 +0100
Subject: [PATCH] See #170: revamped track detail page

---
 front/package.json                            |   1 +
 front/src/components/audio/PlayButton.vue     |   2 +-
 .../components/common/RenderedDescription.vue |  26 +-
 .../favorites/TrackFavoriteIcon.vue           |   5 +-
 front/src/components/library/TrackBase.vue    | 138 +++++-----
 front/src/components/library/TrackDetail.vue  | 247 ++++++++++++------
 .../playlists/TrackPlaylistIcon.vue           |   5 +-
 front/src/style/_main.scss                    |  27 +-
 front/yarn.lock                               |   5 +
 9 files changed, 297 insertions(+), 159 deletions(-)

diff --git a/front/package.json b/front/package.json
index e631ead69..99c143852 100644
--- a/front/package.json
+++ b/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",
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index b8c1e42fe..62f72bc95 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/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"
diff --git a/front/src/components/common/RenderedDescription.vue b/front/src/components/common/RenderedDescription.vue
index 92b2d080f..f17092cdd 100644
--- a/front/src/components/common/RenderedDescription.vue
+++ b/front/src/components/common/RenderedDescription.vue
@@ -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: {
diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index e2b90460c..8670dbcb9 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/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 () {
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 747446f00..af8edd47c 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -5,63 +5,44 @@
     </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">
+              <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 +55,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 +121,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 +147,6 @@ export default {
     TrackFavoriteIcon,
     Modal,
     EmbedWizard,
-    TagsList,
   },
   data() {
     return {
@@ -213,7 +201,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 +212,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 +236,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 +266,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')),
+        })
       }
     }
   },
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index ce443fcd4..d271ed88c 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -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) {
diff --git a/front/src/components/playlists/TrackPlaylistIcon.vue b/front/src/components/playlists/TrackPlaylistIcon.vue
index 04787406d..3bfd4ce85 100644
--- a/front/src/components/playlists/TrackPlaylistIcon.vue
+++ b/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 {
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index fbebc66ed..3af8480d3 100644
--- a/front/src/style/_main.scss
+++ b/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: '&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";
diff --git a/front/yarn.lock b/front/yarn.lock
index a7d19a7ba..0301cb4f4 100644
--- a/front/yarn.lock
+++ b/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"