platypush/platypush
platypush
/
platypush
2
2
Fork 4
Code Issues 44 Pull Requests 1 Packages Projects 4 Releases Wiki Activity

[Music UI] Use the `Playlist` component also for playlist editors.

This commit is contained in:
Fabio Manganiello 2024-01-08 22:17:04 +01:00
parent e881fedc59
commit 5ef7313bdc
Signed by: blacklight
GPG Key ID: D90FBA7F76362774
5 changed files with 146 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
platypush/backend/http/webapp/src/components/panels/Music/Index.vue
View File

@ -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 @@
<Playlists :playlists="playlists"
:loading="loading"
:devices="devices"
:status="status"
:selected-device="selectedDevice"
:active-device="activeDevice"
:edited-playlist="editedPlaylist"
@ -54,7 +58,7 @@
@load="$emit('load-playlist', $event)"
@remove="$emit('remove-playlist', $event)"
@playlist-edit="$emit('playlist-edit', $event)"
@load-track="$emit('add-to-tracklist-from-edited-playlist', $event)"
@load-tracks="$emit('add-to-tracklist-from-edited-playlist', $event)"
@remove-track="$emit('remove-from-playlist', $event)"
@info="$emit('info', $event)"
@playlist-add="$emit('playlist-add', $event)"

73
platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue
View File

@ -5,6 +5,10 @@
<div class="header-container">
<MusicHeader ref="header">
<div class="col-7 filter">
<button class="back-btn" title="Back" @click="$emit('back')" v-if="withBack">
<i class="fas fa-arrow-left" />
</button>
<label>
<input type="search" placeholder="Filter" v-model="filter">
</label>
@ -19,8 +23,9 @@
<DropdownItem text="Add track" icon-class="fa fa-plus" @click="addTrack" />
<DropdownItem text="Refresh status" icon-class="fa fa-sync" @click="$emit('refresh-status')" v-if="devices != null" />
<DropdownItem text="Save as playlist" icon-class="fa fa-save" :disabled="!tracks?.length"
@click="playlistSave" />
<DropdownItem text="Swap tracks" icon-class="fa fa-retweet" v-if="selectedTracks?.length === 2"
@click="playlistSave" v-if="withSave" />
<DropdownItem text="Swap tracks" icon-class="fa fa-retweet"
v-if="withSwap && selectedTracks?.length === 2"
@click="$emit('swap', selectedTracks)" />
<DropdownItem :text="selectionMode ? 'End selection' : 'Start selection'" icon-class="far fa-check-square"
:disabled="!tracks?.length" @click="selectionMode = !selectionMode" />
@ -30,7 +35,8 @@
<DropdownItem :text="'Remove track' + (selectedTracks.length > 1 ? 's' : '')"
icon-class="fa fa-trash" v-if="selectedTracks.length > 0"
@click="$emit('remove', [...(new Set(selectedTracks))])" />
<DropdownItem text="Clear playlist" icon-class="fa fa-ban" :disabled="!tracks?.length" @click="$emit('clear')" />
<DropdownItem text="Clear playlist" icon-class="fa fa-ban"
:disabled="!tracks?.length" @click="$emit('clear')" v-if="withClear" />
</Dropdown>
<Dropdown title="Players" icon-class="fa fa-volume-up" v-if="Object.keys(devices || {}).length">
@ -84,7 +90,9 @@
<span class="actions">
<Dropdown title="Actions" icon-class="fa fa-ellipsis-h">
<DropdownItem text="Play" icon-class="fa fa-play" @click="$emit('play', {pos: i})" />
<DropdownItem text="Play" icon-class="fa fa-play" @click="onMenuPlay" />
<DropdownItem text="Add to queue" icon-class="fa fa-plus"
@click="$emit('add-to-queue', [...(new Set([...selectedTracks, i]))])" v-if="withAddToQueue" />
<DropdownItem text="Add to playlist" icon-class="fa fa-list-ul" @click="$emit('add-to-playlist', track)" />
<DropdownItem text="Remove" icon-class="fa fa-trash" @click="$emit('remove', [...(new Set([...selectedTracks, i]))])" />
<DropdownItem text="Info" icon-class="fa fa-info" @click="$emit('info', tracks[i])" />
@ -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;

132
platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue
View File

@ -2,76 +2,28 @@
<Loading v-if="loading" />
<div class="editor-container fade-in" v-else-if="editedPlaylist != null">
<div class="header-container">
<MusicHeader ref="header">
<div class="col-8 filter">
<button class="back-btn" title="Back" @click="$emit('playlist-edit', null)">
<i class="fas fa-arrow-left" />
</button>
<label class="search-box">
<input type="search" placeholder="Filter" v-model="trackFilter">
</label>
</div>
<div class="col-4 buttons pull-right">
<Dropdown title="Players" icon-class="fa fa-volume-up" v-if="Object.keys(devices || {}).length">
<DropdownItem v-for="(device, id) in devices" :key="id" v-text="device.name"
:item-class="{active: activeDevice === id, selected: selectedDevice === id}"
icon-class="fa fa-volume-up" @click="$emit('select-device', id)" />
</Dropdown>
<Dropdown title="Actions" icon-class="fa fa-ellipsis-h">
<DropdownItem text="Add track" icon-class="fa fa-plus" @click="addTrack" />
<DropdownItem text="Refresh status" icon-class="fa fa-sync" @click="$emit('refresh-status')" v-if="devices != null" />
</Dropdown>
<button class="mobile" title="Menu" @click="$emit('toggle-nav')" v-if="showNavButton">
<i class="fas fa-bars" />
</button>
</div>
</MusicHeader>
</div>
<div class="editor" ref="editor">
<div class="no-content" v-if="!tracks?.length">
No tracks found
</div>
<div class="row track" draggable="true" v-for="(track, i) in tracks" :key="i"
:class="{selected: selectedTracksSet.has(i), active: status?.playingPos === i, hidden: !displayedTracks.has(i)}"
@dragstart="onTrackDragStart(i)" @dragend="onTrackDragEnd(i)" @dragover="onTrackDragOver(i)"
@click="onTrackClick($event, i)" @dblclick="$emit('load-track', {pos: i, play: true})">
<div class="col-10">
<div class="title">
{{ track.title || '[No Title]' }}
</div>
<div class="artist" v-if="track.artist">
<a :href="$route.fullPath" v-text="track.artist" @click.prevent="$emit('search', {artist: track.artist})" />
</div>
<div class="album" v-if="track.album">
<a :href="$route.fullPath" v-text="track.album"
@click.prevent="$emit('search', {artist: track.artist, album: track.album})" />
</div>
</div>
<div class="col-2 right-side">
<span class="duration" v-text="track.time ? convertTime(track.time) : '-:--'" />
<span class="actions">
<Dropdown title="Actions" icon-class="fa fa-ellipsis-h">
<DropdownItem text="Play" icon-class="fa fa-play" @click="$emit('load-track', {pos: i, play: true})" />
<DropdownItem text="Add to queue" icon-class="fa fa-plus" @click="$emit('load-track', {pos: i, play: false})" />
<DropdownItem text="Add to playlist" icon-class="fa fa-list-ul" @click="$emit('add-to-playlist', track)" />
<DropdownItem text="Remove" icon-class="fa fa-trash" @click="$emit('remove-track', [...(new Set([...selectedTracks, i]))])" />
<DropdownItem text="Info" icon-class="fa fa-info" @click.stop="$emit('info', tracks[i])" />
</Dropdown>
</span>
</div>
</div>
</div>
<Playlist
:tracks="tracks || []"
:status="status"
:devices="devices"
:selected-device="selectedDevice"
:active-device="activeDevice"
:show-nav-button="showNavButton"
:with-add-to-queue="true"
:with-back="true"
@add="$emit('playlist-add', $event)"
@add-to-playlist="$emit('add-to-playlist', $event)"
@add-to-queue="$emit('load-tracks', {tracks: $event, play: false})"
@add-to-queue-and-play="$emit('load-tracks', {tracks: $event, play: true})"
@back="$emit('playlist-edit', null)"
@info="$emit('info', $event)"
@move="$emit('track-move', {...$event, playlist: editedPlaylist})"
@play="$emit('load-tracks', {tracks: [$event], play: true})"
@refresh-status="$emit('refresh-status')"
@remove="$emit('remove-track', $event)"
@search="$emit('search', $event)"
@select-device="$emit('select-device', $event)"
@toggle-nav="$emit('toggle-nav')" />
</div>
<div class="playlists fade-in" v-else>
@ -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
},

11
platypush/backend/http/webapp/src/components/panels/MusicMpd/Index.vue
View File

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

24
platypush/backend/http/webapp/src/components/panels/MusicSpotify/Index.vue
View File

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