Merge branch 'main' of https://github.com/ciderapp/Cider

resources/cider-ui/index.js

@@ -22,16 +22,24 @@ var CiderContextMenu = {
         var menuBackground = document.createElement("div");
         var menu = document.createElement("div");
         menu.classList.add("context-menu-body");
+        menu.classList.add("context-menu-open");
         menuBackground.classList.add("context-menu");
         menu.style.left = 0 + "px";
         menu.style.top = 0 + "px";
         menu.style.position = "absolute";
         menu.style.zIndex = "99909";
+        menu.addEventListener("animationend", function () {
+            menu.classList.remove("context-menu-open");
+        }, {once: true});
 
         // when menubackground is clicked, remove it
         menuBackground.addEventListener("click", function () {
-            menuBackground.remove();
-            menu.remove();
+            menuBackground.style.pointerEvents = "none";
+            menu.classList.add("context-menu-close");
+            menu.addEventListener("animationend", function () {
+                menuBackground.remove();
+                menu.remove();
+            }, {once: true});
         });
 
         // add menu to menuBackground
@@ -337,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/style.less

@@ -461,9 +461,42 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     padding: 6px;
     border-radius: 6px;
     box-shadow: var(--mediaItemShadow-Shadow);
+    &.context-menu-open {
+      animation-duration: .10s;
+      animation-name: contextMenuIn;
+      animation-iteration-count: 1;
+      animation-easings: var(--appleEase);
+    }
+    &.context-menu-close {
+      animation-duration: .10s;
+      animation-name: contextMenuOut;
+      animation-iteration-count: 1;
+      animation-easings: var(--appleEase);
+    }
   }
 }
 
+@keyframes contextMenuIn {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes contextMenuOut {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}
 
 .app-sidebar-content::-webkit-scrollbar {
   display: none;

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>