From d8a921189800508276a267d38b2559379e7f56dd Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Wed, 20 Apr 2022 12:20:09 +0200
Subject: [PATCH] fix: make song context work again

---
 .../__tests__/components/song/add-to-menu.spec.ts |  2 +-
 .../components/song/context-menu.spec.ts          |  2 +-
 resources/assets/js/app.vue                       |  8 +++-----
 .../song/{add-to-menu.vue => AddToMenu.vue}       |  8 ++++----
 .../{context-menu.vue => SongContextMenu.vue}     | 10 +++++-----
 .../assets/js/components/song/list-controls.vue   |  2 +-
 resources/assets/js/composables/useContextMenu.ts | 15 ++++++++++++---
 .../assets/js/composables/useSongMenuMethods.ts   | 15 +++++++--------
 8 files changed, 34 insertions(+), 28 deletions(-)
 rename resources/assets/js/components/song/{add-to-menu.vue => AddToMenu.vue} (92%)
 rename resources/assets/js/components/song/{context-menu.vue => SongContextMenu.vue} (95%)

diff --git a/resources/assets/js/__tests__/components/song/add-to-menu.spec.ts b/resources/assets/js/__tests__/components/song/add-to-menu.spec.ts
index 096aa9dc..3b391556 100644
--- a/resources/assets/js/__tests__/components/song/add-to-menu.spec.ts
+++ b/resources/assets/js/__tests__/components/song/add-to-menu.spec.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import Component from '@/components/song/add-to-menu.vue'
+import Component from '@/components/song/AddToMenu.vue'
 import factory from '@/__tests__/factory'
 import { playlistStore, queueStore, favoriteStore } from '@/stores'
 import { mock } from '@/__tests__/__helpers__'
diff --git a/resources/assets/js/__tests__/components/song/context-menu.spec.ts b/resources/assets/js/__tests__/components/song/context-menu.spec.ts
index 1323b59b..7ac5e130 100644
--- a/resources/assets/js/__tests__/components/song/context-menu.spec.ts
+++ b/resources/assets/js/__tests__/components/song/context-menu.spec.ts
@@ -1,4 +1,4 @@
-import Component from '@/components/song/context-menu.vue'
+import Component from '@/components/song/SongContextMenu.vue'
 import { download } from '@/services'
 import { songStore, playlistStore, queueStore, favoriteStore, sharedStore, userStore } from '@/stores'
 import { eventBus } from '@/utils'
diff --git a/resources/assets/js/app.vue b/resources/assets/js/app.vue
index ea229c85..f62dac01 100644
--- a/resources/assets/js/app.vue
+++ b/resources/assets/js/app.vue
@@ -15,7 +15,7 @@
     </div>
   </template>
 
-  <SongContextMenu :songs="contextMenuSongs" ref="songContextMenu"/>
+  <SongContextMenu ref="songContextMenu"/>
   <AlbumContextMenu :album="contextMenuAlbum" ref="albumContextMenu"/>
   <ArtistContextMenu :artist="contextMenuArtist" ref="artistContextMenu"/>
 </template>
@@ -35,13 +35,12 @@ import { $, eventBus, hideOverlay, showOverlay, arrayify } from '@/utils'
 import { favoriteStore, preferenceStore as preferences, queueStore, sharedStore } from '@/stores'
 import { auth, playback, socket } from '@/services'
 
-const SongContextMenu = defineAsyncComponent(() => import('@/components/song/context-menu.vue'))
+const SongContextMenu = defineAsyncComponent(() => import('@/components/song/SongContextMenu.vue'))
 const AlbumContextMenu = defineAsyncComponent(() => import('@/components/album/context-menu.vue'))
 const ArtistContextMenu = defineAsyncComponent(() => import('@/components/artist/context-menu.vue'))
 const SupportKoel = defineAsyncComponent(() => import('@/components/meta/support-koel.vue'))
 
 const authenticated = ref(false)
-const contextMenuSongs = ref<Song[]>([])
 const contextMenuAlbum = ref<Album>()
 const contextMenuArtist = ref<Artist>()
 
@@ -85,9 +84,8 @@ onMounted(async () => {
 })
 
 eventBus.on('SONG_CONTEXT_MENU_REQUESTED', async (e: MouseEvent, songs: Song | Song[]) => {
-  contextMenuSongs.value = arrayify(songs)
   await nextTick()
-  songContextMenu.value?.open(e.pageY, e.pageX)
+  songContextMenu.value?.open(e.pageY, e.pageX, { songs: arrayify(songs) })
 })
 
 eventBus.on('ALBUM_CONTEXT_MENU_REQUESTED', async (e: MouseEvent, album: Album) => {
diff --git a/resources/assets/js/components/song/add-to-menu.vue b/resources/assets/js/components/song/AddToMenu.vue
similarity index 92%
rename from resources/assets/js/components/song/add-to-menu.vue
rename to resources/assets/js/components/song/AddToMenu.vue
index f293cc33..df5eb251 100644
--- a/resources/assets/js/components/song/add-to-menu.vue
+++ b/resources/assets/js/components/song/AddToMenu.vue
@@ -13,9 +13,9 @@
 
       <ul>
         <template v-if="config.queue">
-          <li class="after-current" @click="queueSongsAfterCurrent" role="button" tabindex="0">After Current Song</li>
-          <li class="bottom-queue" @click="queueSongsToBottom" role="button" tabindex="0">Bottom of Queue</li>
-          <li class="top-queue" @click="queueSongsToTop" role="button" tabindex="0">Top of Queue</li>
+          <li class="after-current" role="button" tabindex="0" @click="queueSongsAfterCurrent">After Current Song</li>
+          <li class="bottom-queue" role="button" tabindex="0" @click="queueSongsToBottom">Bottom of Queue</li>
+          <li class="top-queue" role="button" tabindex="0" @click="queueSongsToTop">Top of Queue</li>
         </template>
 
         <li
@@ -83,7 +83,7 @@ const {
   queueSongsToTop,
   addSongsToFavorite,
   addSongsToExistingPlaylist
-} = useSongMenuMethods(songs.value, close)
+} = useSongMenuMethods(songs, close)
 
 watch(songs, () => songs.value.length || close())
 
diff --git a/resources/assets/js/components/song/context-menu.vue b/resources/assets/js/components/song/SongContextMenu.vue
similarity index 95%
rename from resources/assets/js/components/song/context-menu.vue
rename to resources/assets/js/components/song/SongContextMenu.vue
index 78945fb7..aaab06e9 100644
--- a/resources/assets/js/components/song/context-menu.vue
+++ b/resources/assets/js/components/song/SongContextMenu.vue
@@ -39,30 +39,30 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, toRefs } from 'vue'
+import { computed, reactive, Ref, toRef, toRefs, watchEffect } from 'vue'
 import { copyText, eventBus, isClipboardSupported as copyable } from '@/utils'
 import { playlistStore, queueStore, sharedStore, songStore, userStore } from '@/stores'
 import { download as downloadService, playback } from '@/services'
 import router from '@/router'
 import { useContextMenu, useSongMenuMethods } from '@/composables'
 
-const props = defineProps<{ songs: Song[] }>()
-const { songs } = toRefs(props)
-
 const {
+  context,
   base,
   BaseContextMenu,
   open,
   close
 } = useContextMenu()
 
+const songs = toRef(context, 'songs') as Ref<Song[]>
+
 const {
   queueSongsAfterCurrent,
   queueSongsToBottom,
   queueSongsToTop,
   addSongsToFavorite,
   addSongsToExistingPlaylist
-} = useSongMenuMethods(songs.value, close)
+} = useSongMenuMethods(songs, close)
 
 const playlistState = reactive(playlistStore.state)
 const sharedState = reactive(sharedStore.state)
diff --git a/resources/assets/js/components/song/list-controls.vue b/resources/assets/js/components/song/list-controls.vue
index 12f61d7b..789ce7d5 100644
--- a/resources/assets/js/components/song/list-controls.vue
+++ b/resources/assets/js/components/song/list-controls.vue
@@ -97,7 +97,7 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, toRefs } from 'vue'
 
-const AddToMenu = defineAsyncComponent(() => import('./add-to-menu.vue'))
+const AddToMenu = defineAsyncComponent(() => import('./AddToMenu.vue'))
 const Btn = defineAsyncComponent(() => import('@/components/ui/btn.vue'))
 const BtnGroup = defineAsyncComponent(() => import('@/components/ui/btn-group.vue'))
 
diff --git a/resources/assets/js/composables/useContextMenu.ts b/resources/assets/js/composables/useContextMenu.ts
index 88512841..b0ec9b5a 100644
--- a/resources/assets/js/composables/useContextMenu.ts
+++ b/resources/assets/js/composables/useContextMenu.ts
@@ -1,16 +1,25 @@
-import { defineAsyncComponent, ref } from 'vue'
+import { defineAsyncComponent, reactive, ref } from 'vue'
+
+export type ContextMenuContext = Record<string, any>
 
 export const useContextMenu = () => {
   const BaseContextMenu = defineAsyncComponent(() => import('@/components/ui/context-menu.vue'))
   const base = ref<InstanceType<typeof BaseContextMenu>>()
 
-  const open = (top: number, left: number) => base.value?.open(top, left)
+  const context = reactive<ContextMenuContext>({})
+
+  const open = (top: number, left: number, ctx: ContextMenuContext = {}) => {
+    base.value?.open(top, left, ctx)
+    Object.assign(context, ctx)
+  }
+
   const close = () => base.value?.close()
 
   return {
     base,
     BaseContextMenu,
     open,
-    close
+    close,
+    context
   }
 }
diff --git a/resources/assets/js/composables/useSongMenuMethods.ts b/resources/assets/js/composables/useSongMenuMethods.ts
index 857d72b2..58851301 100644
--- a/resources/assets/js/composables/useSongMenuMethods.ts
+++ b/resources/assets/js/composables/useSongMenuMethods.ts
@@ -1,34 +1,33 @@
 import { favoriteStore, playlistStore, queueStore } from '@/stores'
+import { Ref } from 'vue'
 
 /**
  * Includes the methods trigger-able on a song (context) menu.
  * Each component including this mixin must have a `songs` array as either data, prop, or computed.
  */
-export const useSongMenuMethods = (songs: Song[], close: TAnyFunction) => {
-  console.log(songs)
-
+export const useSongMenuMethods = (songs: Ref<Song[]>, close: TAnyFunction) => {
   const queueSongsAfterCurrent = () => {
-    queueStore.queueAfterCurrent(songs)
+    queueStore.queueAfterCurrent(songs.value)
     close()
   }
 
   const queueSongsToBottom = () => {
-    queueStore.queue(songs)
+    queueStore.queue(songs.value)
     close()
   }
 
   const queueSongsToTop = () => {
-    queueStore.queueToTop(songs)
+    queueStore.queueToTop(songs.value)
     close()
   }
 
   const addSongsToFavorite = async () => {
-    await favoriteStore.like(songs)
+    await favoriteStore.like(songs.value)
     close()
   }
 
   const addSongsToExistingPlaylist = async (playlist: Playlist) => {
-    await playlistStore.addSongs(playlist, songs)
+    await playlistStore.addSongs(playlist, songs.value)
     close()
   }