Starting queue on zoo page

resources/cider-ui/index.js

@@ -345,6 +345,9 @@ const app = new Vue({
             })
 
             this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
+                if(self.$refs.queue) {
+                    self.$refs.queue.updateQueue();
+                }
                 this.currentSongInfo = a
                 try {
                     a = a.item.attributes;

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

@@ -0,0 +1,35 @@
+<script type="text/x-template" id="cider-queue">
+    <div>
+        <h3>Queue</h3>
+        <draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
+            <div v-for="(queueItem, position) in queueItems" :key="position">
+                <span v-if="position == queuePosition">▶️</span>
+                {{ queueItem.item.attributes.name }}
+            </div>
+        </draggable>
+    </div>
+</script>
+
+
+<script>
+    Vue.component('cider-queue', {
+        template: '#cider-queue',
+        data: function () {
+            return {
+                drag: false,
+                queuePosition: app.mk.queue.position,
+                queueItems: app.mk.queue._queueItems
+            }
+        },
+        methods: {
+            updateQueue() {
+                this.queuePosition = app.mk.queue.position;
+                this.queueItems = app.mk.queue._queueItems;
+            },
+            move() {
+                app.mk.queue._queueItems = this.queueItems;
+                app.mk.queue._reindex()
+            }
+        }
+    });
+</script>

resources/cider-ui/views/main.ejs

@@ -20,6 +20,7 @@
     <script src="vue.js"></script>
     <script src="sortable.min.js"></script>
     <script src="vue-observe-visibility.min.js"></script>
+    <script src="sortable.min.js"></script>
     <script src="vuedraggable.umd.min.js"></script>
     <link rel="manifest" href="./manifest.json?v=2">
     <script src="https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js"></script>
@@ -459,6 +460,8 @@
     </button>
 </script>
 
+<!-- Queue -->
+<%- include('components/queue') %>
 <!-- Horizontal MediaItem Scroller -->
 <%- include('components/mediaitem-scroller-horizontal') %>
 <!-- Horizontal MediaItem Scroller (Large) -->

resources/cider-ui/views/pages/zoo.ejs

@@ -15,5 +15,6 @@
                 Artist Name
             </div>
         </div>
+        <cider-queue ref="queue"></cider-queue>
     </div>
 </template>