progress on queue

resources/cider-ui/style.less

@@ -1861,6 +1861,34 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+/* queue item */
+.cd-queue-item {
+  border-bottom: 1px solid rgb(200 200 200 / 10%);
+  padding: 8px;
+  .row, .col {
+    padding:0px;
+    margin:0px;
+  }
+  .artwork {
+    width: 32px;
+    height: 32px;
+    flex: 0 0 auto;
+  }
+
+  .queue-info {
+    display:flex;
+    flex-direction: column;
+
+    .queue-title {
+      font-size: 14px;
+    }
+    .queue-subtitle {
+      font-size: 13px;
+      opacity: 0.85;
+    }
+  }
+}
+
 /* horizontal media scroller */
 .cd-hmedia-scroller {
   margin: 0 auto;
@@ -2087,18 +2115,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
-.artwork {
+
-  height: 190px;
-  width: 190px;
-  background: blue;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
-  background: var(--artwork);
-  background-size: cover;
-  flex: 0 0 auto;
-  margin: 6px;
-  margin-top: 0px;
-}
 
 /* mediaitem-square-large */
 .cd-mediaitem-square-large {

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

@@ -0,0 +1,60 @@
+<script type="text/x-template" id="queue-item">
+    <template>
+        <div v-observe-visibility="{callback: visibilityChanged}"
+             @contextmenu="contextMenu"
+             class="cd-mediaitem-list-item">
+            <template v-if="isVisible">
+                <div class="artwork">
+                    <mediaitem-artwork
+                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                            size="34"
+                            :type="item.type"></mediaitem-artwork>
+                </div>
+                <div class="info-rect" :style="{'padding-left': '16px'}">
+                    <div class="title text-overflow-elipsis">
+                        {{ item.attributes.name }}
+                    </div>
+                    <div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
+                        <template v-if="item.attributes.artistName" >
+                            <div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')">
+                                {{ item.attributes.artistName }}
+                            </div>
+                            <template v-if="item.attributes.albumName">&nbsp;-&nbsp;</template>
+                            <template v-if="item.attributes.albumName">
+                                <div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'album')">
+                                {{ item.attributes.albumName }}
+                                </div>
+                            </template>
+                        </template>
+                    </div>
+                </div>
+                <div class="duration">
+                    {{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
+                </div>
+            </template>
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('queue-item', {
+        template: '#queue-item',
+        props: ['item'],
+        data: function () {
+            return {}
+        },
+        methods: {
+            contextMenu(event) {
+                let self = this
+                CiderContextMenu.Create(event, {
+                    items: [{
+                        "name": "Remove from queue",
+                        "action": function () {
+                            
+                        }
+                    }]
+                });
+            }
+        }
+    });
+</script>

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

@@ -2,10 +2,22 @@
     <div>
         <h3>Queue</h3>
         <draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
-            <div v-for="(queueItem, position) in queueItems" :key="position">
+            <template v-for="(queueItem, position) in queueItems">
-                <span v-if="position == queuePosition">▶️</span>
+                <div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
-                {{ queueItem.item.attributes.name }}
+                <div class="cd-queue-item" v-else :key="position" @contextmenu="queueContext($event, queueItem.item, position)">
-            </div>
+                    <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>
+            </template>
         </draggable>
     </div>
 </script>
@@ -22,9 +34,38 @@
             }
         },
         methods: {
+            queueContext(event, item, position) {
+                let self = this
+                CiderContextMenu.Create(event, {
+                    items: [{
+                            "name": "Remove from queue",
+                            "action": function () {
+                                self.queueItems.splice(position, 1)
+                                app.mk.queue._queueItems = self.queueItems;
+                                app.mk.queue._reindex()
+                            }
+                        },
+                        {
+                            "name": "Start Radio",
+                            "action": function () {
+                                app.mk.setStationQueue({
+                                    song: item.attributes.playParams.id ?? item.id
+                                }).then(() => {
+                                    app.mk.play()
+                                })
+                            }
+                        },
+                    ]
+                });
+            },
             updateQueue() {
-                this.queuePosition = app.mk.queue.position;
+                if (app.mk.queue) {
-                this.queueItems = app.mk.queue._queueItems;
+                    this.queuePosition = app.mk.queue.position;
+                    this.queueItems = app.mk.queue._queueItems;
+                } else {
+                    this.queuePosition = 0;
+                    this.queueItems = [];
+                }
             },
             move() {
                 app.mk.queue._queueItems = this.queueItems;

resources/cider-ui/views/main.ejs

@@ -462,6 +462,8 @@
 
 <!-- Queue -->
 <%- include('components/queue') %>
+<!-- Queue Item -->
+<%- include('components/queue-item') %>
 <!-- Horizontal MediaItem Scroller -->
 <%- include('components/mediaitem-scroller-horizontal') %>
 <!-- Horizontal MediaItem Scroller (Large) -->

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

@@ -1,20 +1,6 @@
 <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>
-        <div tabindex="0" class="cd-mediaitem-video">
-            <div class="artwork">
-                <mediaitem-artwork
-                        url="https://is1-ssl.mzstatic.com/image/thumb/Video115/v4/00/8b/eb/008beb79-fc95-a24f-eb38-b2cc5a472d4e/8864491155490101.jpg/{w}x{h}mv.{f}"
-                        size="300"
-                        type="song"></mediaitem-artwork>
-            </div>
-            <div class="title text-overflow-elipsis">
-                Name
-            </div>
-            <div class="subtitle text-overflow-elipsis">
-                Artist Name
-            </div>
-        </div>
         <cider-queue ref="queue"></cider-queue>
     </div>
 </template>