[Music UI] New music nav logic.

Don't display the vertical nav on mobile by default - same logic as the
generic media nav.
This commit is contained in:
Fabio Manganiello 2024-01-07 16:19:59 +01:00
parent f59a276e09
commit b785609eda
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
3 changed files with 106 additions and 31 deletions

View file

@ -6,29 +6,62 @@
@set-volume="$emit('set-volume', $event)" @seek="$emit('seek', $event)" @consume="$emit('consume', $event)" @set-volume="$emit('set-volume', $event)" @seek="$emit('seek', $event)" @consume="$emit('consume', $event)"
@repeat="$emit('repeat', $event)" @random="$emit('random', $event)" @search="search" v-else> @repeat="$emit('repeat', $event)" @random="$emit('random', $event)" @search="search" v-else>
<main> <main>
<div class="nav-container"> <div class="nav-container mobile" v-if="navVisible">
<Nav :selected-view="selectedView" @input="selectedView = $event" /> <Nav :selected-view="selectedView"
@input="selectedView = $event"
@toggle="navVisible = !navVisible" />
</div>
<div class="nav-container from tablet">
<Nav :selected-view="selectedView"
@input="selectedView = $event"
@toggle="navVisible = !navVisible" />
</div> </div>
<div class="view-container"> <div class="view-container">
<Playlist :tracks="tracks" :status="status" :loading="loading" :devices="devices" <Playlist :tracks="tracks"
:selected-device="selectedDevice" :active-device="activeDevice" v-if="selectedView === 'playing'" :status="status"
@play="$emit('play', $event)" @clear="$emit('clear')" @swap="$emit('swap-tracks', $event)" :loading="loading"
@add="$emit('add-to-tracklist', $event)" @remove="$emit('remove-from-tracklist', $event)" :devices="devices"
@move="$emit('tracklist-move', $event)" @save="$emit('tracklist-save', $event)" :selected-device="selectedDevice"
@info="$emit('info', $event)" @add-to-playlist="openAddToPlaylist" @search="search" :active-device="activeDevice"
@refresh-status="refreshStatus" @select-device="selectDevice" /> :show-nav-button="!navVisible"
v-if="selectedView === 'playing'"
@play="$emit('play', $event)"
@clear="$emit('clear')"
@swap="$emit('swap-tracks', $event)"
@add="$emit('add-to-tracklist', $event)"
@remove="$emit('remove-from-tracklist', $event)"
@move="$emit('tracklist-move', $event)"
@save="$emit('tracklist-save', $event)"
@info="$emit('info', $event)"
@add-to-playlist="openAddToPlaylist"
@search="search"
@toggle-nav="navVisible = !navVisible"
@refresh-status="refreshStatus"
@select-device="selectDevice" />
<Playlists :playlists="playlists" :loading="loading" :devices="devices" <Playlists :playlists="playlists"
:selected-device="selectedDevice" :active-device="activeDevice" v-else-if="selectedView === 'playlists'" :loading="loading"
:edited-playlist="editedPlaylist" :tracks="editedPlaylistTracks" :devices="devices"
@play="$emit('play-playlist', $event)" @load="$emit('load-playlist', $event)" :selected-device="selectedDevice"
@remove="$emit('remove-playlist', $event)" @playlist-edit="$emit('playlist-edit', $event)" :active-device="activeDevice"
v-else-if="selectedView === 'playlists'"
:edited-playlist="editedPlaylist"
:tracks="editedPlaylistTracks"
@play="$emit('play-playlist', $event)"
@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-track="$emit('add-to-tracklist-from-edited-playlist', $event)"
@remove-track="$emit('remove-from-playlist', $event)" @info="$emit('info', $event)" @remove-track="$emit('remove-from-playlist', $event)"
@playlist-add="$emit('playlist-add', $event)" @add-to-playlist="openAddToPlaylist" @info="$emit('info', $event)"
@track-move="$emit('playlist-track-move', $event)" @search="search" @playlist-add="$emit('playlist-add', $event)"
@refresh-status="refreshStatus" @select-device="selectDevice" /> @add-to-playlist="openAddToPlaylist"
@track-move="$emit('playlist-track-move', $event)"
@search="search"
@refresh-status="refreshStatus"
@select-device="selectDevice" />
<Search :loading="loading" v-else-if="selectedView === 'search'" :devices="devices" <Search :loading="loading" v-else-if="selectedView === 'search'" :devices="devices"
:selected-device="selectedDevice" :active-device="activeDevice" @search="search" :selected-device="selectedDevice" :active-device="activeDevice" @search="search"
@ -260,6 +293,7 @@ export default {
selectedPlaylists: [], selectedPlaylists: [],
addToPlaylistTrack: null, addToPlaylistTrack: null,
playlistFilter: '', playlistFilter: '',
navVisible: false,
} }
}, },

View file

@ -1,5 +1,9 @@
<template> <template>
<nav> <nav>
<button class="menu-button mobile" @click="$emit('toggle')">
<i class="fa fa-bars" />
</button>
<li v-for="(view, name) in views" :key="name" :title="view.displayName" <li v-for="(view, name) in views" :key="name" :title="view.displayName"
:class="{selected: name === selectedView}" @click="$emit('input', name)"> :class="{selected: name === selectedView}" @click="$emit('input', name)">
<i :class="view.iconClass" /> <i :class="view.iconClass" />
@ -10,7 +14,7 @@
<script> <script>
export default { export default {
name: "Nav", name: "Nav",
emits: ['input'], emits: ['input', 'toggle'],
props: { props: {
selectedView: { selectedView: {
type: String, type: String,
@ -57,6 +61,7 @@ export default {
nav { nav {
width: $music-nav-width; width: $music-nav-width;
height: 100%; height: 100%;
position: relative;
background: $nav-collapsed-bg; background: $nav-collapsed-bg;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -66,6 +71,26 @@ nav {
margin-left: 2.5px; margin-left: 2.5px;
overflow: hidden; overflow: hidden;
.menu-button {
position: absolute;
top: 0.75em;
left: 0;
width: 100%;
display: inline-flex;
justify-content: center;
padding: 0;
margin: 0;
font-size: 1.2em;
border: 0;
background: none;
cursor: pointer;
z-index: 1;
&:hover {
color: $default-hover-fg;
}
}
li { li {
display: flex; display: flex;
align-items: center; align-items: center;

View file

@ -4,14 +4,20 @@
<div class="playlist fade-in" v-else> <div class="playlist fade-in" v-else>
<div class="header-container"> <div class="header-container">
<MusicHeader ref="header"> <MusicHeader ref="header">
<div class="col-8 filter"> <div class="col-7 filter">
<label> <label>
<input type="search" placeholder="Filter" v-model="filter"> <input type="search" placeholder="Filter" v-model="filter">
</label> </label>
</div> </div>
<div class="col-4 buttons"> <div class="col-5 buttons">
<button class="mobile" title="Menu" @click="$emit('toggle-nav')" v-if="showNavButton">
<i class="fas fa-bars" />
</button>
<Dropdown title="Actions" icon-class="fa fa-ellipsis-h"> <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" />
<DropdownItem text="Save as playlist" icon-class="fa fa-save" :disabled="!tracks?.length" <DropdownItem text="Save as playlist" icon-class="fa fa-save" :disabled="!tracks?.length"
@click="playlistSave" /> @click="playlistSave" />
<DropdownItem text="Swap tracks" icon-class="fa fa-retweet" v-if="selectedTracks?.length === 2" <DropdownItem text="Swap tracks" icon-class="fa fa-retweet" v-if="selectedTracks?.length === 2"
@ -27,14 +33,6 @@
<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')" />
</Dropdown> </Dropdown>
<button title="Add track" @click="addTrack">
<i class="fa fa-plus"></i>
</button>
<button title="Refresh status" @click="$emit('refresh-status')" v-if="devices != null">
<i class="fa fa-sync"></i>
</button>
<Dropdown title="Players" icon-class="fa fa-volume-up" v-if="Object.keys(devices || {}).length"> <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" <DropdownItem v-for="(device, id) in devices" :key="id" v-text="device.name"
:item-class="{active: activeDevice === id, selected: selectedDevice === id}" :item-class="{active: activeDevice === id, selected: selectedDevice === id}"
@ -109,8 +107,21 @@ export default {
name: "Playlist", name: "Playlist",
mixins: [MediaUtils], mixins: [MediaUtils],
components: {DropdownItem, Dropdown, MusicHeader, Loading}, components: {DropdownItem, Dropdown, MusicHeader, Loading},
emits: ['play', 'clear', 'add', 'remove', 'swap', 'search', 'move', 'save', 'info', 'refresh-status', emits: [
'select-device'], 'add',
'clear',
'info',
'move',
'play',
'refresh-status',
'remove',
'save',
'search',
'select-device',
'swap',
'toggle-nav',
],
props: { props: {
tracks: { tracks: {
type: Array, type: Array,
@ -143,6 +154,11 @@ export default {
type: Number, type: Number,
default: 100, default: 100,
}, },
showNavButton: {
type: Boolean,
default: false,
},
}, },
data() { data() {