revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

[music UI] Several UI improvements

Browse source
This commit is contained in:
Fabio Manganiello 2023-12-25 13:47:13 +01:00
parent be54469df0
commit ce1e8513d4
4 changed files with 84 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
platypush/backend/http/webapp/src/components/Media/Controls.vue
View file

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

41
platypush/backend/http/webapp/src/components/panels/Music/Index.vue
View file

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

40
platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue
View file

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

10
platypush/backend/http/webapp/src/components/panels/Music/track.scss
View file

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