Bug Fixes

index.html

@@ -22,10 +22,6 @@
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.css" />
-
-    <script
-      src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"
-      defer></script>
     <script type="module" src="/src/main.js" defer></script>
   </body>
 </html>

src/App.vue

@@ -242,16 +242,16 @@ async function getNext(hash) {
 
     console.log(data.state.urls);
   } else {
-    setMetadata();
-
     if (data.state.urls.length == 0) {
       data.state.urls = [
         {
-          title: nowtitle,
+          title: data.state.title,
           url: data.state.url,
         },
       ];
     }
+
+    setMetadata();
   }
 }
 
@@ -339,17 +339,13 @@ watch(
   () => player.state.play,
   () => {
     if (audio.value.paused) {
-      audio.value
-        .play()
-        .then(() => {
-          player.state.state = 'pause';
-        })
-        .catch(err => {
-          alert(err);
-          player.state.state = 'play';
-        });
+      player.state.status = 'pause';
+      audio.value.play().catch(err => {
+        alert(err);
+        player.state.status = 'play';
+      });
     } else {
-      player.state.state = 'play';
+      player.state.status = 'play';
       audio.value.pause();
     }
   },
@@ -386,11 +382,16 @@ onMounted(() => {
   /* Media Session Controls */
   if ('mediaSession' in navigator) {
     navigator.mediaSession.setActionHandler('play', () => {
-      player.state.state = 'play';
+      player.state.status = 'pause';
+      audio.value.play().catch(err => {
+        alert(err);
+        player.state.status = 'play';
+      });
     });
 
     navigator.mediaSession.setActionHandler('pause', () => {
-      player.state.state = 'pause';
+      audio.value.pause();
+      player.state.status = 'play';
     });
 
     navigator.mediaSession.setActionHandler('previoustrack', () => {
@@ -512,7 +513,7 @@ header {
   width: 175px;
 }
 .bg-img {
-  --art: v-bind(`url(${data.state.art}) `);
+  --art: v-bind('"url(" + data.state.art + ")"');
 }
 img,
 .card,

src/assets/base.css

@@ -55,7 +55,7 @@ body[data-theme='light'] {
 }
 
 body[data-theme='nord'] {
-  --color-foreground: var(--vt-c-blue);
+  --color-foreground: #88c0d0;
   --color-background: #2e3440;
   --color-background-soft: #3b4252;
   --color-background-mute: #434c5e;
@@ -64,7 +64,7 @@ body[data-theme='nord'] {
   --color-border-hover: #4c566a;
 
   --color-shadow: #4c566a;
-  --color-scrollbar: var(--vt-c-blue);
+  --color-scrollbar: #88c0d0;
 
   --color-heading: #d8dee9;
   --color-text: #d8dee9;

src/components/Modal.vue

@@ -49,6 +49,7 @@ watch(show, n => {
 }
 .modal-box {
   width: 50vw;
+  max-height: 90vh;
   border-radius: 0.5rem;
   background-color: var(--color-background-soft);
 }
@@ -59,6 +60,8 @@ watch(show, n => {
 }
 .modal-content {
   padding: 1rem;
+  max-height: calc(90vh - 8rem);
+  overflow-y: auto;
 }
 .modal-content * {
   width: 100%;

src/components/NewPlaylist.vue

@@ -69,6 +69,7 @@ const Play = key => {
 watch(
   () => show.sync,
   () => {
+    import('https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js');
     if (show.sync === true) {
       sync.peer = new Peer('hyp-' + Math.random().toString(36).substr(2));
 

src/components/StatusBar.vue

@@ -72,7 +72,8 @@ function Save() {
       <button
         id="btn-play-pause"
         aria-label="Play or Pause"
-        :class="'bi bi-' + player.state.status"
+        class="bi"
+        :class="'bi-' + player.state.status"
         @click="player.toggle('play')"></button>
 
       <div id="statusbar-progress" class="range-wrap">
@@ -225,6 +226,7 @@ input[type='range']:focus {
 
 /* Webkit */
 input[type='range']::-webkit-slider-thumb {
+  background-color: var(--color-foreground);
   -webkit-appearance: none;
   appearance: none;
   opacity: 0;
@@ -232,7 +234,6 @@ input[type='range']::-webkit-slider-thumb {
 }
 input[type='range']:hover::-webkit-slider-thumb,
 #vol input[type='range']::-webkit-slider-thumb {
-  background-color: var(--color-foreground);
   opacity: 1;
   height: 1rem;
   width: 1rem;
@@ -290,6 +291,7 @@ input[type='range']::-moz-range-track {
   height: 0.25rem;
   background-color: var(--color-foreground);
   transition: width 0.4s ease;
+  z-index: 2;
 }
 .range-wrap input[type='range'] {
   --w: 100%;