[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:
parent
f59a276e09
commit
b785609eda
GPG Key ID:
D90FBA7F76362774
|
|
@ -6,29 +6,62 @@
|
|||
@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>
|
||||
<main>
|
||||
<div class="nav-container">
|
||||
<Nav :selected-view="selectedView" @input="selectedView = $event" />
|
||||
<div class="nav-container mobile" v-if="navVisible">
|
||||
<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 class="view-container">
|
||||
<Playlist :tracks="tracks" :status="status" :loading="loading" :devices="devices"
|
||||
:selected-device="selectedDevice" :active-device="activeDevice" 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"
|
||||
@refresh-status="refreshStatus" @select-device="selectDevice" />
|
||||
<Playlist :tracks="tracks"
|
||||
:status="status"
|
||||
:loading="loading"
|
||||
:devices="devices"
|
||||
:selected-device="selectedDevice"
|
||||
:active-device="activeDevice"
|
||||
: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"
|
||||
:selected-device="selectedDevice" :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)"
|
||||
<Playlists :playlists="playlists"
|
||||
:loading="loading"
|
||||
:devices="devices"
|
||||
:selected-device="selectedDevice"
|
||||
: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)"
|
||||
@remove-track="$emit('remove-from-playlist', $event)" @info="$emit('info', $event)"
|
||||
@playlist-add="$emit('playlist-add', $event)" @add-to-playlist="openAddToPlaylist"
|
||||
@track-move="$emit('playlist-track-move', $event)" @search="search"
|
||||
@refresh-status="refreshStatus" @select-device="selectDevice" />
|
||||
@remove-track="$emit('remove-from-playlist', $event)"
|
||||
@info="$emit('info', $event)"
|
||||
@playlist-add="$emit('playlist-add', $event)"
|
||||
@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"
|
||||
:selected-device="selectedDevice" :active-device="activeDevice" @search="search"
|
||||
|
|
@ -260,6 +293,7 @@ export default {
|
|||
selectedPlaylists: [],
|
||||
addToPlaylistTrack: null,
|
||||
playlistFilter: '',
|
||||
navVisible: false,
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<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"
|
||||
:class="{selected: name === selectedView}" @click="$emit('input', name)">
|
||||
<i :class="view.iconClass" />
|
||||
|
|
@ -10,7 +14,7 @@
|
|||
<script>
|
||||
export default {
|
||||
name: "Nav",
|
||||
emits: ['input'],
|
||||
emits: ['input', 'toggle'],
|
||||
props: {
|
||||
selectedView: {
|
||||
type: String,
|
||||
|
|
@ -57,6 +61,7 @@ export default {
|
|||
nav {
|
||||
width: $music-nav-width;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: $nav-collapsed-bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -66,6 +71,26 @@ nav {
|
|||
margin-left: 2.5px;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -4,14 +4,20 @@
|
|||
<div class="playlist fade-in" v-else>
|
||||
<div class="header-container">
|
||||
<MusicHeader ref="header">
|
||||
<div class="col-8 filter">
|
||||
<div class="col-7 filter">
|
||||
<label>
|
||||
<input type="search" placeholder="Filter" v-model="filter">
|
||||
</label>
|
||||
</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">
|
||||
<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"
|
||||
|
|
@ -27,14 +33,6 @@
|
|||
<DropdownItem text="Clear playlist" icon-class="fa fa-ban" :disabled="!tracks?.length" @click="$emit('clear')" />
|
||||
</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">
|
||||
<DropdownItem v-for="(device, id) in devices" :key="id" v-text="device.name"
|
||||
:item-class="{active: activeDevice === id, selected: selectedDevice === id}"
|
||||
|
|
@ -109,8 +107,21 @@ export default {
|
|||
name: "Playlist",
|
||||
mixins: [MediaUtils],
|
||||
components: {DropdownItem, Dropdown, MusicHeader, Loading},
|
||||
emits: ['play', 'clear', 'add', 'remove', 'swap', 'search', 'move', 'save', 'info', 'refresh-status',
|
||||
'select-device'],
|
||||
emits: [
|
||||
'add',
|
||||
'clear',
|
||||
'info',
|
||||
'move',
|
||||
'play',
|
||||
'refresh-status',
|
||||
'remove',
|
||||
'save',
|
||||
'search',
|
||||
'select-device',
|
||||
'swap',
|
||||
'toggle-nav',
|
||||
],
|
||||
|
||||
props: {
|
||||
tracks: {
|
||||
type: Array,
|
||||
|
|
@ -143,6 +154,11 @@ export default {
|
|||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
|
||||
showNavButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue