feat: add songs via Apple Music

web/src/components/AddSong.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+    import ImportTypePicker from '@/composables/ImportTypePicker.vue';
     import PopupElement from '@/components/PopupElement.vue';
     import player from '@/ts/player';
     import {
@@ -17,6 +18,7 @@
 
 <template>
     <div>
+        <ImportTypePicker />
         <PopupElement v-model="showPopup" show-close>
             <h1>Add Song</h1>
             <div class="song-sources">

web/src/components/PlayerControls.vue

@@ -79,5 +79,5 @@
 </template>
 
 <style lang="scss" scoped>
-    @import '@/scss/components/player.scss';
+    @use '@/scss/components/player.scss';
 </style>

web/src/components/ProgressBar.vue

@@ -50,5 +50,5 @@
 </template>
 
 <style lang="scss" scoped>
-    @import '@/scss/components/progressbar.scss';
+    @use '@/scss/components/progressbar.scss';
 </style>

web/src/components/QueueViewer.vue

@@ -10,7 +10,7 @@
     } from 'vue';
 
     const queue = player.queue;
-    const idx = player.queueIdx;
+    const queueIndex = player.queueIdx;
     const isPlaying = player.isPlaying;
     const showAddSong = ref( false );
 
@@ -26,7 +26,7 @@
                 <i class="fa-solid fa-plus"></i>
                 Add
             </button>
-            <button>
+            <button @click="player.clearQueue">
                 <i class="fa-solid fa-xmark"></i>
                 Clear
             </button>
@@ -43,33 +43,46 @@
         <AddSong v-model="showAddSong" />
         <div>
             <SortableList v-slot="{ item: song, index }" v-model="queue">
-                <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 class="song-list-element">
+                    <div class="song-cover-wrapper">
+                        <img
+                            v-if="song.artwork"
+                            :src="song.artwork"
+                            alt="Song cover"
+                            class="song-cover"
+                        >
+                        <i v-else class="fa-solid fa-music song-cover"></i>
+                        <div v-if="index === queueIndex" class="play-overlay">
+                            <div v-if="isPlaying" 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-pause"
+                            ></i>
+                        </div>
+                        <div v-else class="play-overlay hover">
+                            <i class="fa-solid fa-play" @click="() => player.playIndex( index )"></i>
+                        </div>
+                    </div>
+                    <div>
+                        <h3>{{ song.name }}</h3>
+                        <p>{{ song.artist }}</p>
+                        <p>{{ beautifyTime( song.duration ) }}</p>
+                        <p>{{ song['additional-info'] }}</p>
+                    </div>
+                    <div>
+                        <i v-if="index !== queueIndex" class="fa-solid fa-trash-can"></i>
+                        <i class="fa-solid fa-pen-to-square"></i>
                     </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>
                 </div>
             </SortableList>
         </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+    @use '@/scss/components/queue.scss';
+</style>

web/src/components/SortableList.vue

@@ -95,9 +95,10 @@
         const before = array.value.slice( 0, movingIdx.value );
         const after = array.value.slice( movingIdx.value + 1 );
         const el = array.value[ movingIdx.value ]!;
+        const arr = before.concat( after );
 
-        array.value = before.concat( after );
-        array.value.splice( movingCurrentIdx.value, 0, el );
+        arr.splice( movingCurrentIdx.value, 0, el );
+        array.value = arr;
         movingIdx.value = -1;
         movingCurrentIdx.value = -1;
 
@@ -156,5 +157,5 @@
 </template>
 
 <style lang="scss" scoped>
-    @import '@/scss/components/sortablelist.scss'
+    @use '@/scss/components/sortablelist.scss'
 </style>