feat: start queue view

web/package.json

@@ -11,6 +11,9 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^7.3.1",
+    "@fortawesome/fontawesome-svg-core": "^7.3.1",
+    "@fortawesome/free-regular-svg-icons": "^7.3.1",
     "pinia": "^4.0.2",
     "vue": "^3.5.40",
     "vue-router": "^5.2.0"
@@ -24,14 +27,14 @@
     "@vue/tsconfig": "^0.9.1",
     "eslint-plugin-vue": "^10.10.0",
     "globals": "^17.11.0",
+    "musickitjs-v3-types": "^1.0.0",
     "npm-run-all2": "^9.0.2",
     "sass-embedded": "^1.103.1",
     "typescript": "~6.0.0",
     "typescript-eslint": "^8.67.0",
     "vite": "^8.1.5",
     "vite-plugin-vue-devtools": "^8.1.5",
-    "vue-tsc": "^3.3.7",
-    "musickitjs-v3-types": "^1.0.0"
+    "vue-tsc": "^3.3.7"
   },
   "engines": {
     "node": "^22.18.0 || >=24.12.0"

web/src/App.vue

@@ -57,7 +57,7 @@
         --secondary-color: white;
         --background-color: rgb(221, 221, 221);
         --nav-background: white;
-        --hover-color: #00457a;
+        --accent-color: #00457a;
         --popup-color: rgb(224, 224, 224);
         --overlay-color: rgba(0, 0, 0, 0.7);
         --PI: 3.14159265358979;
@@ -74,7 +74,7 @@
         --background-color: rgb(32, 32, 32);
         --nav-background: rgb(54, 54, 54);
         --popup-color: rgb(58, 58, 58);
-        --hover-color: #007ddd;
+        --accent-color: #007ddd;
         --overlay-color: rgba(104, 104, 104, 0.575);
         --gray-color: rgb(207, 207, 207);
         --footer-background: rgb(53, 53, 53);
@@ -90,7 +90,7 @@
             --background-color: rgb(32, 32, 32);
             --nav-background: rgb(54, 54, 54);
             --popup-color: rgb(58, 58, 58);
-            --hover-color: #007ddd;
+            --accent-color: #007ddd;
             --overlay-color: rgba(104, 104, 104, 0.575);
             --gray-color: rgb(207, 207, 207);
             --footer-background: rgb(53, 53, 53);

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,13 +37,12 @@
         transition: all 0.5s;
         transform: scale(1);
         z-index: 99;
-    }
 
-    .hidden {
+        &.hidden {
             transform: scale(0);
         }
 
-    .popup-main {
+        >.popup-main {
             width: 40%;
             height: 50%;
             background-color: var( --secondary-color );
@@ -52,9 +51,8 @@
             position: relative;
             overflow-y: scroll;
             display: block;
-    }
 
-    .close-icon {
+            >.close-icon {
                 position: absolute;
                 top: 20px;
                 right: 20px;
@@ -62,4 +60,6 @@
                 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>

web/src/views/AppView.vue

@@ -1,5 +1,12 @@
+<script setup lang="ts">
+    import QueueViewer from '@/components/QueueViewer.vue';
+
+
+</script>
+
 <template>
     <div>
         <h1>Player</h1>
+        <QueueViewer />
     </div>
 </template>