Queue is now implemented into main window, active drawers will now change the icons on the chrome

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

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%);

resources/cider-ui/views/components/queue.ejs

@@ -1,6 +1,14 @@
 <script type="text/x-template" id="cider-queue">
-    <div>
+    <div class="queue-panel">
-        <h3>Queue</h3>
+        <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>
@@ -20,6 +28,7 @@
                 </template>
             </draggable>
         </div>
+    </div>
 </script>
 
 
@@ -29,10 +38,13 @@
         data: function () {
             return {
                 drag: false,
-                queuePosition: app.mk.queue.position,
+                queuePosition: 0,
-                queueItems: app.mk.queue._queueItems
+                queueItems: []
             }
         },
+        mounted() {
+            this.updateQueue()
+        },
         methods: {
             queueContext(event, item, position) {
                 let self = this

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"
+                    <button class="playback-button--small lyrics" :class="{'active': drawer.panel == 'lyrics'}"
-                            @click=" lyricon =!lyricon; if( document.getElementById(`apple-music-video-container`).style.display != `block`){drawertest = !drawertest; if (drawertest) lyricon = true;}; "></button>
+                            @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">
+                <div class="app-drawer" v-if="drawer.open">
-                    <lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics">
+                    <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>

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>