Play next (closes #109)

src/assets/base.css

@@ -94,10 +94,12 @@ body[data-theme*='blur'] .pl-modal,
 body[data-theme*='blur'] .modal-box,
 body[data-theme*='blur'] .popup input[type='text'] {
   background: var(--color-blur);
+  -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
 }
 
 body[data-theme*='blur'] .modal {
+  -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(5px);
 }
 

src/assets/version.json

@@ -1,3 +1,3 @@
 {
-  "date": "2023-02-09"
+  "date": "2023-02-22"
 }

src/components/SongItem.vue

@@ -40,9 +40,7 @@ const openSong = el => {
       thumbnails: [{ url: props.art }],
     });
 
-    const index = data.state.urls.map(s => s.url).indexOf(data.state.url);
-
-    console.log(data.state.urls);
+    const index = data.state.urls.findIndex(s => s.url == data.state.url);
 
     if (
       (index == data.state.urls.length - 1 && player.state.time > 98) ||
@@ -50,6 +48,15 @@ const openSong = el => {
     )
       emit('open-song', props.play);
   },
+  appendSong = () => {
+    const index = data.state.urls.findIndex(s => s.url == data.state.url);
+
+    data.state.urls.splice(index + 1, 0, {
+      url: props.play,
+      title: props.title,
+      thumbnails: [{ url: props.art }],
+    });
+  },
   Remove = () => {
     const auth = useStore().getItem('auth'),
       isRemote = results.items?.songs?.title?.startsWith('Playlist - ');
@@ -131,7 +138,12 @@ onMounted(() => {
             v-if="playlistId"
             class="bi bi-dash-lg clickable ign"
             @click="Remove"></span>
-          <span class="bi bi-broadcast ign" @click="$emit('nxt-song')"></span>
+          <span
+            class="bi bi-chevron-bar-right clickable ign"
+            @click="appendSong"></span>
+          <span
+            class="bi bi-broadcast clickable ign"
+            @click="$emit('nxt-song')"></span>
           <span class="bi bi-plus-lg clickable ign" @click="addSong"></span>
           <span class="bi bi-share clickable ign" @click="Share"></span>
         </div>