From b785609eda8f8a687bcc1cfd2267e919df823f00 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 7 Jan 2024 16:19:59 +0100
Subject: [PATCH] [Music UI] New music nav logic.

Don't display the vertical nav on mobile by default - same logic as the
generic media nav.
---
 .../src/components/panels/Music/Index.vue     | 70 ++++++++++++++-----
 .../src/components/panels/Music/Nav.vue       | 27 ++++++-
 .../src/components/panels/Music/Playlist.vue  | 40 +++++++----
 3 files changed, 106 insertions(+), 31 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Index.vue b/platypush/backend/http/webapp/src/components/panels/Music/Index.vue
index 9031eda83..c0ad44d14 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Music/Index.vue
@@ -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,
     }
   },
 
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Nav.vue b/platypush/backend/http/webapp/src/components/panels/Music/Nav.vue
index 5cbdedafc..88ab4850e 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/Nav.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Music/Nav.vue
@@ -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;
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue b/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue
index 1f3fa2e4a..032a1f06d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue
@@ -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() {