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