[music UI] Several UI improvements

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

View file

@ -43,7 +43,11 @@
<div class="track-container col-s-9 col-m-9 col-l-3"> <div class="track-container col-s-9 col-m-9 col-l-3">
<div class="track-info" v-if="track && status?.state !== 'stop'"> <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="img-container" v-if="track.image">
<img class="image from desktop" :src="track.image" :alt="track.title">
</div>
<div class="title-container">
<div class="title" v-if="status.state === 'play' || status.state === 'pause'"> <div class="title" v-if="status.state === 'play' || status.state === 'pause'">
<a :href="$route.fullPath" v-text="track.title?.length ? track.title : '[No Title]'" <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> @click.prevent="$emit('search', {artist: track.artist, album: track.album})" v-if="track.album"></a>
@ -55,6 +59,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="playback-controls from desktop col-6"> <div class="playback-controls from desktop col-6">
<div class="row buttons"> <div class="row buttons">

View file

@ -146,11 +146,42 @@ import Utils from "@/Utils";
export default { export default {
name: "Music", name: "Music",
emits: ['play', 'pause', 'stop', 'clear', 'previous', 'next', 'set-volume', 'seek', 'consume', 'repeat', 'random', emits: [
'status-update', 'playlist-update', 'new-playing-track', 'add-to-tracklist', 'remove-from-tracklist', 'add-to-playlist',
'swap-tracks', 'play-playlist', 'load-playlist', 'remove-playlist', 'tracklist-move', 'tracklist-save', 'add-to-tracklist',
'add-to-tracklist-from-edited-playlist', 'remove-from-playlist', 'info', 'playlist-add', 'add-to-playlist', 'add-to-tracklist-from-edited-playlist',
'playlist-track-move', 'search', 'search-clear', 'cd', 'refresh-status', 'select-device'], '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], mixins: [Utils, MediaUtils],
components: {Loading, Modal, Nav, MediaView, Playlist, Playlists, FormFooter, Search, Library}, components: {Loading, Modal, Nav, MediaView, Playlist, Playlists, FormFooter, Search, Library},

View file

@ -49,10 +49,17 @@
No tracks are loaded No tracks are loaded
</div> </div>
<div class="row track" @dragstart="onTrackDragStart(i)" @dragend="onTrackDragEnd(i)" <div class="row track"
@dragover="onTrackDragOver(i)" draggable="true" @dragstart="onTrackDragStart(i)"
:class="{selected: selectedTracksSet.has(i), active: status?.playingPos === i, hidden: !displayedTracks.has(i)}" @dragend="onTrackDragEnd(i)"
v-for="(track, i) in tracks" :key="i" @click="onTrackClick($event, i)" @dblclick="$emit('play', {pos: 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="col-10">
<div class="title"> <div class="title">
{{ track.title || '[No Title]' }} {{ track.title || '[No Title]' }}
@ -148,22 +155,20 @@ export default {
return new Set(this.selectedTracks) return new Set(this.selectedTracks)
}, },
displayedTracks() { displayedTrackIndices() {
const positions = [...Array(this.tracks.length).keys()] const positions = [...Array(this.tracks.length).keys()]
if (!this.filter?.length) if (!this.filter?.length)
return new Set(positions) return positions
const self = this const self = this
const filter = (self.filter || '').toLowerCase() const filter = (self.filter || '').toLowerCase()
return new Set( return positions.filter((pos) => {
positions.filter((pos) => {
const track = this.tracks[pos] const track = this.tracks[pos]
return (track?.artist || '').toLowerCase().indexOf(filter) >= 0 return (track?.artist || '').toLowerCase().indexOf(filter) >= 0
|| (track?.title || '').toLowerCase().indexOf(filter) >= 0 || (track?.title || '').toLowerCase().indexOf(filter) >= 0
|| (track?.album || '').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() { addTrack() {
const track = prompt('Item path or URL') const track = prompt('Item path or URL')
if (!track?.length) if (!track?.length)

View file

@ -33,12 +33,20 @@
.artist, .album { .artist, .album {
display: inline-flex; display: inline-flex;
opacity: 0.7;
font-size: .9em; font-size: .9em;
} }
.artist {
opacity: 0.85;
}
.album {
opacity: 0.7;
}
.artist { .artist {
margin-right: .25em; margin-right: .25em;
font-weight: bold;
} }
.album { .album {