From 459175ef1bf33c6369959ecd540b15610f904758 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 15 Dec 2021 19:51:00 -0800
Subject: [PATCH] Queue is now implemented into main window, active drawers
 will now change the icons on the chrome

---
 resources/cider-ui/index.js                   | 21 ++++++++
 resources/cider-ui/style.less                 | 30 +++++++++--
 resources/cider-ui/views/components/queue.ejs | 50 ++++++++++++-------
 resources/cider-ui/views/main.ejs             | 11 ++--
 resources/cider-ui/views/pages/zoo.ejs        |  1 +
 5 files changed, 84 insertions(+), 29 deletions(-)

diff --git a/resources/cider-ui/index.js b/resources/cider-ui/index.js
index 250861b8..34834e4d 100644
--- a/resources/cider-ui/index.js
+++ b/resources/cider-ui/index.js
@@ -127,6 +127,10 @@ const app = new Vue({
             desiredDuration: 0,
             userInteraction: false
         },
+        drawer: {
+            open: false,
+            panel: ""
+        },
         browsepage: [],
         listennow: [],
         radio: {
@@ -390,6 +394,23 @@ const app = new Vue({
             })
             document.body.removeAttribute("loading")
         },
+        invokeDrawer(panel) {
+            if(this.drawer.panel == panel && this.drawer.open) {
+                if(panel == "lyrics") {
+                    this.lyricon = false
+                }
+                this.drawer.panel = ""
+                this.drawer.open = false
+            }else{
+                if(panel == "lyrics") {
+                    this.lyricon = true
+                }else{
+                    this.lyricon = false
+                }
+                this.drawer.open = true
+                this.drawer.panel = panel
+            }
+        },
         async showCollection(response, title, type) {
             let self = this
             this.collectionList.response = response
diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index 4cee9a15..72909299 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -1319,11 +1319,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   height: 100%;
 }
 
-.queue-body {
-  width: 100%;
-  height: 100%;
-}
-
 .search-body {
   position: absolute;
   width: 100%;
@@ -1861,6 +1856,31 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+.queue-panel {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+
+  .queue-header-text {
+    margin: 18px 6px;
+  }
+
+  .queue-body {
+    overflow: overlay;
+    height: 100%;
+  }
+  .autoplay {
+    background: rgb(200 200 200 / 15%);
+    appearance: none;
+    border: 0;
+    border-radius: 6px;
+    font-weight: 500;
+    font-family: inherit;
+    height: 30px;
+  }
+}
+
 /* queue item */
 .cd-queue-item {
   border-bottom: 1px solid rgb(200 200 200 / 10%);
diff --git a/resources/cider-ui/views/components/queue.ejs b/resources/cider-ui/views/components/queue.ejs
index 7d1a8019..2ef9e618 100644
--- a/resources/cider-ui/views/components/queue.ejs
+++ b/resources/cider-ui/views/components/queue.ejs
@@ -1,24 +1,33 @@
 <script type="text/x-template" id="cider-queue">
-    <div>
-        <h3>Queue</h3>
-        <draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
-            <template v-for="(queueItem, position) in queueItems">
-                <div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
-                <div class="cd-queue-item" v-else :key="position" @contextmenu="queueContext($event, queueItem.item, position)">
-                    <div class="row">
-                        <div class="col-auto flex-center">
-                            <div class="artwork">
-                                <mediaitem-artwork :url="queueItem.item.attributes.artwork.url" :size="32"></mediaitem-artwork>
+    <div class="queue-panel">
+        <div class="row">
+            <div class="col">
+                <h3 class="queue-header-text">Queue</h3>
+            </div>
+            <div class="col-auto flex-center">
+                <button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled">AUTO</button>
+            </div>
+        </div>
+        <div class="queue-body">
+            <draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
+                <template v-for="(queueItem, position) in queueItems">
+                    <div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
+                    <div class="cd-queue-item" v-else :key="position" @contextmenu="queueContext($event, queueItem.item, position)">
+                        <div class="row">
+                            <div class="col-auto flex-center">
+                                <div class="artwork">
+                                    <mediaitem-artwork :url="queueItem.item.attributes.artwork.url" :size="32"></mediaitem-artwork>
+                                </div>
+                            </div>
+                            <div class="col queue-info">
+                                <div class="queue-title text-overflow-elipsis">{{ queueItem.item.attributes.name }}</div>
+                                <div class="queue-subtitle text-overflow-elipsis">{{ queueItem.item.attributes.albumName }} - {{ queueItem.item.attributes.artistName }}</div>
                             </div>
                         </div>
-                        <div class="col queue-info">
-                            <div class="queue-title text-overflow-elipsis">{{ queueItem.item.attributes.name }}</div>
-                            <div class="queue-subtitle text-overflow-elipsis">{{ queueItem.item.attributes.albumName }} - {{ queueItem.item.attributes.artistName }}</div>
-                        </div>
                     </div>
-                </div>
-            </template>
-        </draggable>
+                </template>
+            </draggable>
+        </div>
     </div>
 </script>
 
@@ -29,10 +38,13 @@
         data: function () {
             return {
                 drag: false,
-                queuePosition: app.mk.queue.position,
-                queueItems: app.mk.queue._queueItems
+                queuePosition: 0,
+                queueItems: []
             }
         },
+        mounted() {
+            this.updateQueue()
+        },
         methods: {
             queueContext(event, item, position) {
                 let self = this
diff --git a/resources/cider-ui/views/main.ejs b/resources/cider-ui/views/main.ejs
index 9c5379c1..f2f6576a 100644
--- a/resources/cider-ui/views/main.ejs
+++ b/resources/cider-ui/views/main.ejs
@@ -114,11 +114,11 @@
                     </button>
                 </div>
                 <div class="app-chrome-item generic">
-                    <button class="playback-button--small queue"></button>
+                    <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}" @click="invokeDrawer('queue')"></button>
                 </div>
                 <div class="app-chrome-item generic">
-                    <button class="playback-button--small lyrics"
-                            @click=" lyricon =!lyricon; if( document.getElementById(`apple-music-video-container`).style.display != `block`){drawertest = !drawertest; if (drawertest) lyricon = true;}; "></button>
+                    <button class="playback-button--small lyrics" :class="{'active': drawer.panel == 'lyrics'}"
+                            @click="invokeDrawer('lyrics')"></button>
                 </div>
                 <div class="app-chrome-item full-height">
                     <div class="window-controls">
@@ -372,9 +372,10 @@
                 </transition>
             </div>
             <transition name="drawertransition">
-                <div class="app-drawer" v-if="drawertest">
-                    <lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics">
+                <div class="app-drawer" v-if="drawer.open">
+                    <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics">
                     </lyrics-view>
+                    <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
                 </div>
             </transition>
         </div>
diff --git a/resources/cider-ui/views/pages/zoo.ejs b/resources/cider-ui/views/pages/zoo.ejs
index 55090b4a..f5d8bcaf 100644
--- a/resources/cider-ui/views/pages/zoo.ejs
+++ b/resources/cider-ui/views/pages/zoo.ejs
@@ -1,6 +1,7 @@
 <template v-if="page == 'zoo'">
     <div class="content-inner">
         <h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
+        <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
         <cider-queue ref="queue"></cider-queue>
     </div>
 </template>