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 159090372..76cc753e6 100644 --- a/platypush/backend/http/webapp/src/components/panels/Music/Index.vue +++ b/platypush/backend/http/webapp/src/components/panels/Music/Index.vue @@ -26,6 +26,9 @@ :selected-device="selectedDevice" :active-device="activeDevice" :show-nav-button="!navVisible" + :with-clear="true" + :with-save="true" + :with-swap="true" v-if="selectedView === 'playing'" @play="$emit('play', $event)" @clear="$emit('clear')" @@ -44,6 +47,7 @@
+ + @@ -19,8 +23,9 @@ - + @@ -30,7 +35,8 @@ - + @@ -84,7 +90,9 @@ - + + @@ -109,6 +117,10 @@ export default { components: {DropdownItem, Dropdown, MusicHeader, Loading}, emits: [ 'add', + 'add-to-playlist', + 'add-to-queue', + 'add-to-queue-and-play', + 'back', 'clear', 'info', 'move', @@ -159,6 +171,31 @@ export default { type: Boolean, default: false, }, + + withAddToQueue: { + type: Boolean, + default: false, + }, + + withBack: { + type: Boolean, + default: false, + }, + + withClear: { + type: Boolean, + default: false, + }, + + withSave: { + type: Boolean, + default: false, + }, + + withSwap: { + type: Boolean, + default: false, + }, }, data() { @@ -259,7 +296,7 @@ export default { trackClass(i) { return { selected: this.selectedTracksSet.has(i), - active: this.status?.playingPos === i, + active: !this.withAddToQueue && this.status?.playingPos === i, } }, @@ -271,6 +308,13 @@ export default { this.$emit('add', track) }, + onMenuPlay(i) { + if (this.withAddToQueue) + this.$emit('add-to-queue-and-play', [...(new Set([...this.selectedTracks, i]))]) + else + this.$emit('play', {pos: i}) + }, + onTrackDragStart(track) { this.sourcePos = track }, @@ -364,6 +408,7 @@ export default { .playlist { width: 100%; + height: 100%; display: flex; flex-direction: column; @@ -374,8 +419,16 @@ export default { } .filter { - input { - width: 100%; + display: flex; + flex-direction: row; + align-items: center; + + label { + flex-grow: 1; + + input[type="search"] { + width: 100%; + } } } @@ -388,6 +441,12 @@ export default { } } + :deep(.header) { + .back-btn { + padding-left: .25em; + } + } + .body { height: calc(100% - #{$music-header-height} - #{$media-ctrl-panel-height}); overflow: auto; diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue b/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue index 6d68a9b11..23537a4ba 100644 --- a/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue +++ b/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue @@ -2,76 +2,28 @@
-
- -
- - - -
- -
- - - - - - - - - - -
-
-
- -
-
- No tracks found -
- -
-
-
- {{ track.title || '[No Title]' }} -
- -
- -
- - -
- -
- - - - - - - - - - - -
-
-
+
@@ -134,13 +86,34 @@ import MediaUtils from "@/components/Media/Utils"; import Dropdown from "@/components/elements/Dropdown"; import DropdownItem from "@/components/elements/DropdownItem"; import Loading from "@/components/Loading"; +import Playlist from "./Playlist"; export default { name: "Playlists", mixins: [MediaUtils], - components: {DropdownItem, Dropdown, MusicHeader, Loading}, - emits: ['play', 'load', 'remove', 'playlist-edit', 'search', 'remove-track', 'load-track', 'info', - 'playlist-add', 'add-to-playlist', 'track-move', 'refresh-status', 'select-device'], + components: { + Dropdown, + DropdownItem, + MusicHeader, + Loading, + Playlist, + }, + + emits: [ + 'add-to-playlist', + 'info', + 'load', + 'load-tracks', + 'play', + 'playlist-add', + 'playlist-edit', + 'refresh-status', + 'remove', + 'remove-track', + 'search', + 'select-device', + 'track-move', + ], props: { playlists: { @@ -166,6 +139,11 @@ export default { type: Object, }, + status: { + type: Object, + default: () => {}, + }, + selectedDevice: { type: String, }, @@ -264,14 +242,6 @@ export default { } }, - addTrack() { - const track = prompt('Track path or URL') - if (!track?.length) - return - - this.$emit('playlist-add', track) - }, - onTrackDragStart(track) { this.sourcePos = track }, diff --git a/platypush/backend/http/webapp/src/components/panels/MusicMpd/Index.vue b/platypush/backend/http/webapp/src/components/panels/MusicMpd/Index.vue index 50ea13667..80c5c6f23 100644 --- a/platypush/backend/http/webapp/src/components/panels/MusicMpd/Index.vue +++ b/platypush/backend/http/webapp/src/components/panels/MusicMpd/Index.vue @@ -210,15 +210,18 @@ export default { }, async addToTracklistFromEditedPlaylist(event) { - const track = this.editedPlaylistTracks[event.pos] - if (!track) + const tracks = event?.tracks?.map( + (pos) => this.editedPlaylistTracks[pos] + )?.filter((track) => track?.file)?.map((track) => track.file) + + if (!tracks?.length) return - await this.request('music.mpd.add', {resource: track.file}) + await Promise.all(tracks.map((track) => this.request('music.mpd.add', {resource: track}))) await this.refresh(true) if (event.play) - await this.request('music.mpd.play_pos', {pos: this.tracks.length-1}) + await this.request('music.mpd.play_pos', {pos: this.tracks.length - tracks.length}) }, async removeFromPlaylist(positions) { diff --git a/platypush/backend/http/webapp/src/components/panels/MusicSpotify/Index.vue b/platypush/backend/http/webapp/src/components/panels/MusicSpotify/Index.vue index 6f5f96ea0..0b9d84614 100644 --- a/platypush/backend/http/webapp/src/components/panels/MusicSpotify/Index.vue +++ b/platypush/backend/http/webapp/src/components/panels/MusicSpotify/Index.vue @@ -224,15 +224,25 @@ export default { }, async addToTracklistFromEditedPlaylist(event) { - const track = this.editedPlaylistTracks[event.pos] - if (!track) + const tracks = event?.tracks?.map( + (pos) => this.editedPlaylistTracks[pos] + )?.filter((track) => track?.file)?.map((track) => track.file) + + if (!tracks?.length) return - const method = event.play ? 'play' : 'add' - await this.request(`music.spotify.${method}`, { - device: this.selectedDevice, - resource: track.uri - }) + if (event.play && tracks.length === 1) { + await this.request('music.spotify.play', { + device: this.selectedDevice, + resource: tracks[0], + }) + } else { + await Promise.all(tracks.map((track) => this.request('music.spotify.add', { + device: this.selectedDevice, + resource: track, + }))) + } + await this.refresh(true) },