From ce1e8513d4b4f18a578bb0bbd0aa87084ec9bc68 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 25 Dec 2023 13:47:13 +0100
Subject: [PATCH] [music UI] Several UI improvements

---
 .../webapp/src/components/Media/Controls.vue  | 21 ++++++----
 .../src/components/panels/Music/Index.vue     | 41 ++++++++++++++++---
 .../src/components/panels/Music/Playlist.vue  | 40 +++++++++++-------
 .../src/components/panels/Music/track.scss    | 10 ++++-
 4 files changed, 84 insertions(+), 28 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Media/Controls.vue b/platypush/backend/http/webapp/src/components/Media/Controls.vue
index 6f75d2921e..2bc599021a 100644
--- a/platypush/backend/http/webapp/src/components/Media/Controls.vue
+++ b/platypush/backend/http/webapp/src/components/Media/Controls.vue
@@ -43,15 +43,20 @@
 
     <div class="track-container col-s-9 col-m-9 col-l-3">
       <div class="track-info" v-if="track && status?.state !== 'stop'">
-        <img class="image from desktop" :src="track.image" :alt="track.title" v-if="track.image">
-        <div class="title" v-if="status.state === 'play' || status.state === 'pause'">
-          <a :href="$route.fullPath" v-text="track.title?.length ? track.title : '[No Title]'"
-             @click.prevent="$emit('search', {artist: track.artist, album: track.album})" v-if="track.album"></a>
-          <a :href="track.url" v-text="track.title?.length ? track.title : '[No Title]'" v-else-if="track.url"></a>
-          <span v-text="track.title?.length ? track.title : '[No Title]' " v-else></span>
+        <div class="img-container" v-if="track.image">
+          <img class="image from desktop" :src="track.image" :alt="track.title">
         </div>
-        <div class="artist" v-if="track.artist?.length && (status.state === 'play' || status.state === 'pause')">
-          <a :href="$route.fullPath" v-text="track.artist" @click.prevent="$emit('search', {artist: track.artist})"></a>
+
+        <div class="title-container">
+          <div class="title" v-if="status.state === 'play' || status.state === 'pause'">
+            <a :href="$route.fullPath" v-text="track.title?.length ? track.title : '[No Title]'"
+               @click.prevent="$emit('search', {artist: track.artist, album: track.album})" v-if="track.album"></a>
+            <a :href="track.url" v-text="track.title?.length ? track.title : '[No Title]'" v-else-if="track.url"></a>
+            <span v-text="track.title?.length ? track.title : '[No Title]' " v-else></span>
+          </div>
+          <div class="artist" v-if="track.artist?.length && (status.state === 'play' || status.state === 'pause')">
+            <a :href="$route.fullPath" v-text="track.artist" @click.prevent="$emit('search', {artist: track.artist})"></a>
+          </div>
         </div>
       </div>
     </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Index.vue b/platypush/backend/http/webapp/src/components/panels/Music/Index.vue
index 16af2fb05d..9031eda835 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Music/Index.vue
@@ -146,11 +146,42 @@ import Utils from "@/Utils";
 
 export default {
   name: "Music",
-  emits: ['play', 'pause', 'stop', 'clear', 'previous', 'next', 'set-volume', 'seek', 'consume', 'repeat', 'random',
-    'status-update', 'playlist-update', 'new-playing-track', 'add-to-tracklist', 'remove-from-tracklist',
-    'swap-tracks', 'play-playlist', 'load-playlist', 'remove-playlist', 'tracklist-move', 'tracklist-save',
-    'add-to-tracklist-from-edited-playlist', 'remove-from-playlist', 'info', 'playlist-add', 'add-to-playlist',
-    'playlist-track-move', 'search', 'search-clear', 'cd', 'refresh-status', 'select-device'],
+  emits: [
+    'add-to-playlist',
+    'add-to-tracklist',
+    'add-to-tracklist-from-edited-playlist',
+    'cd',
+    'clear',
+    'consume',
+    'info',
+    'load-playlist',
+    'new-playing-track',
+    'next',
+    'pause',
+    'play',
+    'play-playlist',
+    'playlist-add',
+    'playlist-edit',
+    'playlist-track-move',
+    'playlist-update',
+    'previous',
+    'random',
+    'refresh-status',
+    'remove-from-playlist',
+    'remove-from-tracklist',
+    'remove-playlist',
+    'repeat',
+    'search',
+    'search-clear',
+    'seek',
+    'select-device',
+    'set-volume',
+    'status-update',
+    'stop',
+    'swap-tracks',
+    'tracklist-move',
+    'tracklist-save',
+  ],
 
   mixins: [Utils, MediaUtils],
   components: {Loading, Modal, Nav, MediaView, Playlist, Playlists, FormFooter, Search, Library},
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue b/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue
index 7d891f2e95..933bb1601f 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue
@@ -49,10 +49,17 @@
         No tracks are loaded
       </div>
 
-      <div class="row track" @dragstart="onTrackDragStart(i)" @dragend="onTrackDragEnd(i)"
-           @dragover="onTrackDragOver(i)" draggable="true"
-           :class="{selected: selectedTracksSet.has(i), active: status?.playingPos === i, hidden: !displayedTracks.has(i)}"
-           v-for="(track, i) in tracks" :key="i" @click="onTrackClick($event, i)" @dblclick="$emit('play', {pos: i})">
+      <div class="row track"
+           @dragstart="onTrackDragStart(i)"
+           @dragend="onTrackDragEnd(i)"
+           @dragover="onTrackDragOver(i)"
+           draggable="true"
+           v-for="i in displayedTrackIndices"
+           :set="track = tracks[i]"
+           :key="i"
+           :class="trackClass(i)"
+           @click="onTrackClick($event, i)"
+           @dblclick="$emit('play', {pos: i})">
         <div class="col-10">
           <div class="title">
             {{ track.title || '[No Title]' }}
@@ -148,22 +155,20 @@ export default {
       return new Set(this.selectedTracks)
     },
 
-    displayedTracks() {
+    displayedTrackIndices() {
       const positions = [...Array(this.tracks.length).keys()]
       if (!this.filter?.length)
-        return new Set(positions)
+        return positions
 
       const self = this
       const filter = (self.filter || '').toLowerCase()
 
-      return new Set(
-          positions.filter((pos) => {
-            const track = this.tracks[pos]
-            return (track?.artist || '').toLowerCase().indexOf(filter) >= 0
-                || (track?.title || '').toLowerCase().indexOf(filter) >= 0
-                || (track?.album || '').toLowerCase().indexOf(filter) >= 0
-          })
-      )
+      return positions.filter((pos) => {
+          const track = this.tracks[pos]
+          return (track?.artist || '').toLowerCase().indexOf(filter) >= 0
+              || (track?.title || '').toLowerCase().indexOf(filter) >= 0
+              || (track?.album || '').toLowerCase().indexOf(filter) >= 0
+        })
     },
   },
 
@@ -201,6 +206,13 @@ export default {
       }
     },
 
+    trackClass(i) {
+      return {
+        selected: this.selectedTracksSet.has(i),
+        active: this.status?.playingPos === i,
+      }
+    },
+
     addTrack() {
       const track = prompt('Item path or URL')
       if (!track?.length)
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/track.scss b/platypush/backend/http/webapp/src/components/panels/Music/track.scss
index a1042b7d9e..703e580fc5 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/track.scss
+++ b/platypush/backend/http/webapp/src/components/panels/Music/track.scss
@@ -33,12 +33,20 @@
 
   .artist, .album {
     display: inline-flex;
-    opacity: 0.7;
     font-size: .9em;
   }
 
+  .artist {
+    opacity: 0.85;
+  }
+
+  .album {
+    opacity: 0.7;
+  }
+
   .artist {
     margin-right: .25em;
+    font-weight: bold;
   }
 
   .album {