closes #131

src/components/AddToPlaylist.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted, onActivated } from 'vue';
+import { ref, watch, computed, onMounted } from 'vue';
 
 import Modal from './Modal.vue';
 
@@ -15,32 +15,43 @@ const { t } = useI18n(),
   player = usePlayer(),
   store = useStore();
 
+const props = defineProps({
+    show: Boolean,
+    song: String,
+    title: String,
+  }),
+  emit = defineEmits(['show']);
+
 const pl = ref(''),
   list = ref([]),
   remote = ref([]),
   plRemote = ref(false);
 
+const url = () => props.song || data.state.url,
+  title = () => props.title || data.state.title,
+  show = {
+    get is() {
+      return props.song ? true : player.state.add;
+    },
+    set is(e) {
+      props.song ? emit('show', e) : (player.state.add = e);
+    },
+  };
+
 function Save() {
   if (pl.value) {
     if (plRemote.value == true && store.auth) {
-      useAuthAddToPlaylist(pl.value, data.state.url);
+      useAuthAddToPlaylist(pl.value, url());
     } else if (plRemote.value == false) {
-      useUpdatePlaylist(
-        pl.value,
-        {
-          url: data.state.url,
-          title: data.state.title,
-        },
-        e => {
-          if (e === true) console.log('Added Song');
-        },
-      );
+      useUpdatePlaylist(pl.value, { url: url(), title: title() }, e => {
+        if (e === true) console.log('Added Song');
+      });
     }
   }
 }
 
 function List() {
-  player.state.add = true;
+  show.is = true;
   useListPlaylists(res => {
     list.value = res;
   });
@@ -50,9 +61,13 @@ function List() {
 }
 
 watch(
-  () => player.state.add,
-  e => e == true && List(),
+  () => (props.song ? false : player.state.add),
+  e => e === true && List(),
 );
+
+onMounted(() => {
+  props.song && List();
+});
 </script>
 
 <template>
@@ -60,11 +75,11 @@ watch(
     <Transition name="fade">
       <Modal
         n="2"
-        :display="player.state.add"
+        :display="show.is"
         :title="t('playlist.select')"
         @show="
           e => {
-            player.state.add = e;
+            show.is = e;
           }
         ">
         <template #content>
@@ -94,7 +109,7 @@ watch(
           </div>
         </template>
         <template #buttons>
-          <button aria-label="Cancel" @click="player.state.add = false">
+          <button aria-label="Cancel" @click="show.is = false">
             {{ t('action.cancel') }}
           </button>
 
@@ -102,7 +117,7 @@ watch(
             aria-label="Add Song"
             @click="
               Save();
-              player.state.add = false;
+              show.is = false;
             ">
             {{ t('action.add') }}
           </button>

src/components/SongItem.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 
+import AddToPlaylist from '@/components/AddToPlaylist.vue';
+
 import { getJsonAuth } from '@/scripts/fetch.js';
 import { useRand } from '@/scripts/colors.js';
 import { useStore, useShare } from '@/scripts/util.js';
@@ -28,12 +30,11 @@ const props = defineProps({
   }),
   emit = defineEmits(['open-song', 'nxt-song', 'remove']);
 
-const show = ref(false);
+const show = ref(false),
+  showPl = ref(false);
 
 const openSong = el => {
-    if (!el.classList.contains('ign')) {
-      emit('open-song', props.play);
-    }
+    if (!el.classList.contains('ign')) emit('open-song', props.play);
   },
   addSong = () => {
     data.state.urls.push({
@@ -101,6 +102,12 @@ onMounted(() => {
 });
 </script>
 <template>
+  <AddToPlaylist
+    v-if="showPl"
+    :song="play"
+    :title="title"
+    @show="e => (showPl = e)" />
+
   <div class="song card flex pop" @click="openSong($event.target)">
     <img class="pop-2 bg-img song-bg" loading="lazy" :src="art" alt />
 
@@ -127,6 +134,9 @@ onMounted(() => {
           <span
             class="bi bi-chevron-bar-right clickable ign"
             @click="appendSong"></span>
+          <span
+            class="bi bi-collection clickable ign"
+            @click="showPl = true"></span>
           <span
             class="bi bi-broadcast clickable ign"
             @click="$emit('nxt-song')"></span>