feat: start queue view

web/src/components/PlaylistPicker.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        Hello World
+    </div>
+</template>

web/src/components/PopupElement.vue

@@ -22,7 +22,7 @@
 </script>
 
 
-<style scoped>
+<style scoped lang="scss">
     .popup-backdrop {
         width: 100vw;
         height: 100vh;
@@ -37,29 +37,29 @@
         transition: all 0.5s;
         transform: scale(1);
         z-index: 99;
-    }
 
-    .hidden {
-        transform: scale(0);
-    }
+        &.hidden {
+            transform: scale(0);
+        }
 
-    .popup-main {
-        width: 40%;
-        height: 50%;
-        background-color: var( --secondary-color );
-        padding: 2.5%;
-        border-radius: 20px;
-        position: relative;
-        overflow-y: scroll;
-        display: block;
-    }
+        >.popup-main {
+            width: 40%;
+            height: 50%;
+            background-color: var( --secondary-color );
+            padding: 2.5%;
+            border-radius: 20px;
+            position: relative;
+            overflow-y: scroll;
+            display: block;
 
-    .close-icon {
-        position: absolute;
-        top: 20px;
-        right: 20px;
-        font-size: 2rem;
-        cursor: pointer;
-        user-select: none;
+            >.close-icon {
+                position: absolute;
+                top: 20px;
+                right: 20px;
+                font-size: 2rem;
+                cursor: pointer;
+                user-select: none;
+            }
+        }
     }
 </style>

web/src/components/QueueViewer.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+    import {
+        beautifyTime
+    } from '@/ts/util/time';
+    import player from '@/ts/player';
+
+    const queue = player.queue;
+    const idx = player.queueIdx;
+    const isPlaying = player.isPlaying;
+
+</script>
+
+<template>
+    <div>
+        <div>
+            <button>
+                <i class="fa-solid fa-plus"></i>
+                Add
+            </button>
+            <button>
+                <i class="fa-solid fa-xmark"></i>
+                Clear
+            </button>
+            <button>
+                <i class="fa-solid fa-save"></i>
+                Save
+            </button>
+            <!-- TODO: Should only appear when sharing -->
+            <button>
+                <i class="fa-solid fa-paper-plane"></i>
+                Transmit
+            </button>
+        </div>
+        <div>
+            <div v-for="(song, index) in queue" :key="index">
+                <div class="song-cover-wrapper">
+                    <img
+                        v-if="song.cover"
+                        :src="song.cover"
+                        alt="Song cover"
+                        class="song-cover"
+                    >
+                    <i v-else class="fa-solid fa-music song-cover"></i>
+                    <div v-if="isPlaying && index === idx" class="playing-symbols">
+                        <div id="bar-1" class="playing-bar"></div>
+                        <div id="bar-2" class="playing-bar"></div>
+                        <div id="bar-3" class="playing-bar"></div>
+                    </div>
+                    <i v-else class="fa-solid fa-play play-pause" @click="() => player.playIndex( index )"></i>
+                    <i class="fa-solid fa-pause play-pause" @click="player.pause"></i>
+                </div>
+                <div>
+                    <h3>{{ song.name }}</h3>
+                    <p>{{ song.artist }}</p>
+                    <p>{{ beautifyTime( song.duration ) }}</p>
+                    <p>{{ song['additional-info'] }}</p>
+                </div>
+                <div>
+                    <i class="fa-solid fa-trash-can"></i>
+                    <i class="fa-solid fa-pen-to-square"></i>
+                    <i class="fa-solid fa-grip-vertical"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

web/src/components/SortableList.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+    const queue = defineModel<unknown[]>();
+</script>
+
+<template>
+    <div>
+        <div v-for="(song, index) in queue" :key="index">
+            <slot :item="song"></slot>
+            <div>
+                <i class="fa-solid fa-grip-vertical"></i>
+            </div>
+        </div>
+    </div>
+</template>