feat: better context menu implementation

resources/assets/js/App.vue

@@ -15,13 +15,16 @@
     </div>
   </template>
 
-  <SongContextMenu ref="songContextMenu"/>
+  <SongContextMenu/>
-  <AlbumContextMenu ref="albumContextMenu"/>
+  <AlbumContextMenu/>
-  <ArtistContextMenu ref="artistContextMenu"/>
+  <ArtistContextMenu/>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, nextTick, onMounted, ref } from 'vue'
+import { defineAsyncComponent, onMounted, ref } from 'vue'
+import { $, eventBus, hideOverlay, showOverlay } from '@/utils'
+import { commonStore, favoriteStore, preferenceStore as preferences, queueStore } from '@/stores'
+import { authService, playbackService, socketService } from '@/services'
 
 import AppHeader from '@/components/layout/AppHeader.vue'
 import AppFooter from '@/components/layout/app-footer/index.vue'
@@ -30,20 +33,12 @@ import Hotkeys from '@/components/utils/HotkeyListener.vue'
 import LoginForm from '@/components/auth/LoginForm.vue'
 import MainWrapper from '@/components/layout/main-wrapper/index.vue'
 import Overlay from '@/components/ui/Overlay.vue'
+import AlbumContextMenu from '@/components/album/AlbumContextMenu.vue'
+import ArtistContextMenu from '@/components/artist/ArtistContextMenu.vue'
+import SongContextMenu from '@/components/song/SongContextMenu.vue'
 
-import { $, arrayify, eventBus, hideOverlay, showOverlay } from '@/utils'
-import { commonStore, favoriteStore, preferenceStore as preferences, queueStore } from '@/stores'
-import { authService, playbackService, socketService } from '@/services'
-
-const SongContextMenu = defineAsyncComponent(() => import('@/components/song/SongContextMenu.vue'))
-const AlbumContextMenu = defineAsyncComponent(() => import('@/components/album/AlbumContextMenu.vue'))
-const ArtistContextMenu = defineAsyncComponent(() => import('@/components/artist/ArtistContextMenu.vue'))
 const SupportKoel = defineAsyncComponent(() => import('@/components/meta/SupportKoel.vue'))
 
-const songContextMenu = ref<InstanceType<typeof SongContextMenu>>()
-const albumContextMenu = ref<InstanceType<typeof AlbumContextMenu>>()
-const artistContextMenu = ref<InstanceType<typeof ArtistContextMenu>>()
-
 const authenticated = ref(false)
 
 /**
@@ -80,21 +75,6 @@ onMounted(async () => {
   $.addClass(document.documentElement, navigator.userAgent.includes('Mac') ? 'mac' : 'non-mac')
 })
 
-eventBus.on('SONG_CONTEXT_MENU_REQUESTED', async (e: MouseEvent, songs: Song | Song[]) => {
-  await nextTick()
-  songContextMenu.value?.open(e.pageY, e.pageX, { songs: arrayify(songs) })
-})
-
-eventBus.on('ALBUM_CONTEXT_MENU_REQUESTED', async (e: MouseEvent, album: Album) => {
-  await nextTick()
-  albumContextMenu.value?.open(e.pageY, e.pageX, { album })
-})
-
-eventBus.on('ARTIST_CONTEXT_MENU_REQUESTED', async (e: MouseEvent, artist: Artist) => {
-  await nextTick()
-  artistContextMenu.value?.open(e.pageY, e.pageX, { artist })
-})
-
 const init = async () => {
   showOverlay()
   await socketService.init()

resources/assets/js/components/album/AlbumCard.spec.ts

@@ -1,50 +1,59 @@
 import { fireEvent } from '@testing-library/vue'
 import { expect, it } from 'vitest'
-import { downloadService } from '@/services'
+import { downloadService, playbackService } from '@/services'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import AlbumCard from './AlbumCard.vue'
+import { songStore } from '@/stores'
 
 let album: Album
 
 new class extends UnitTestCase {
-  protected beforeEach () {
+  private renderComponent () {
-    super.beforeEach(() => {
+    album = factory<Album>('album', {
-      album = factory<Album>('album', {
+      name: 'IV',
-        name: 'IV'
+      play_count: 30,
-      })
+      song_count: 10,
+      length: 123
+    })
+
+    return this.render(AlbumCard, {
+      props: {
+        album
+      }
     })
   }
 
   protected test () {
     it('renders', () => {
-      const { getByText, getByTestId } = this.render(AlbumCard, {
+      const { getByText, getByTestId } = this.renderComponent()
-        props: {
-          album
-        }
-      })
 
       expect(getByTestId('name').textContent).toBe('IV')
-      getByText(/^10 songs.+0 plays$/)
+      getByText(/^10 songs.+02:03.+30 plays$/)
       getByTestId('shuffle-album')
       getByTestId('download-album')
     })
 
     it('downloads', async () => {
       const mock = this.mock(downloadService, 'fromAlbum')
-
+      const { getByTestId } = this.renderComponent()
-      const { getByTestId } = this.render(AlbumCard, {
-        props: {
-          album
-        }
-      })
 
       await fireEvent.click(getByTestId('download-album'))
+
       expect(mock).toHaveBeenCalledTimes(1)
     })
 
     it('shuffles', async () => {
-      throw 'Unimplemented'
+      const songs = factory<Song>('song', 10)
+      const fetchMock = this.mock(songStore, 'fetchForAlbum').mockResolvedValue(songs)
+      const shuffleMock = this.mock(playbackService, 'queueAndPlay').mockResolvedValue(void 0)
+      const { getByTestId } = this.renderComponent()
+
+      await fireEvent.click(getByTestId('shuffle-album'))
+      await this.tick()
+
+      expect(fetchMock).toHaveBeenCalledWith(album)
+      expect(shuffleMock).toHaveBeenCalledWith(songs, true)
     })
   }
 }

resources/assets/js/components/album/AlbumContextMenu.vue

@@ -15,15 +15,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, Ref, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { albumStore, artistStore, commonStore, songStore } from '@/stores'
 import { downloadService, playbackService } from '@/services'
 import { useContextMenu } from '@/composables'
 import router from '@/router'
+import { eventBus } from '@/utils'
 
 const { context, base, ContextMenuBase, open, trigger } = useContextMenu()
 
-const album = toRef(context, 'album') as Ref<Album>
+const album = ref<Album>()
 const allowDownload = toRef(commonStore.state, 'allow_download')
 
 const isStandardAlbum = computed(() => !albumStore.isUnknown(album.value))
@@ -42,5 +43,8 @@ const viewAlbumDetails = () => trigger(() => router.go(`album/${album.value.id}`
 const viewArtistDetails = () => trigger(() => router.go(`artist/${album.value.artist_id}`))
 const download = () => trigger(() => downloadService.fromAlbum(album.value))
 
-defineExpose({ open })
+eventBus.on('ALBUM_CONTEXT_MENU_REQUESTED', async (e: MouseEvent, _album: Album) => {
+  album.value = _album
+  open(e.pageY, e.pageX, { album })
+})
 </script>

resources/assets/js/components/artist/ArtistContextMenu.vue

@@ -16,15 +16,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, Ref, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { artistStore, commonStore, songStore } from '@/stores'
 import { downloadService, playbackService } from '@/services'
 import { useContextMenu } from '@/composables'
 import router from '@/router'
+import { eventBus } from '@/utils'
 
 const { context, base, ContextMenuBase, open, trigger } = useContextMenu()
 
-const artist = toRef(context, 'artist') as Ref<Artist>
+const artist = ref<Artist>()
 const allowDownload = toRef(commonStore.state, 'allow_download')
 
 const isStandardArtist = computed(() =>
@@ -41,5 +42,8 @@ const shuffle = () => {
 const viewArtistDetails = () => trigger(() => router.go(`artist/${artist.value.id}`))
 const download = () => trigger(() => downloadService.fromArtist(artist.value))
 
-defineExpose({ open })
+eventBus.on('ARTIST_CONTEXT_MENU_REQUESTED', async (e: MouseEvent, _artist: Artist) => {
+  artist.value = _artist
+  open(e.pageY, e.pageX, { _artist })
+})
 </script>

resources/assets/js/components/song/SongContextMenu.vue

@@ -42,8 +42,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, Ref, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
-import { alerts, copyText, eventBus, isClipboardSupported as copyable } from '@/utils'
+import { alerts, arrayify, copyText, eventBus, isClipboardSupported as copyable } from '@/utils'
 import { commonStore, playlistStore, queueStore, songStore, userStore } from '@/stores'
 import { downloadService, playbackService } from '@/services'
 import router from '@/router'
@@ -51,7 +51,7 @@ import { useAuthorization, useContextMenu, useSongMenuMethods } from '@/composab
 
 const { context, base, ContextMenuBase, open, close, trigger } = useContextMenu()
 
-const songs = toRef(context, 'songs') as Ref<Song[]>
+const songs = ref<Song[]>([])
 
 const {
   queueSongsAfterCurrent,
@@ -101,5 +101,8 @@ const copyUrl = () => trigger(() => {
   alerts.success('URL copied to clipboard.')
 })
 
-defineExpose({ open })
+eventBus.on('SONG_CONTEXT_MENU_REQUESTED', async (e: MouseEvent, _songs: Song | Song[]) => {
+  songs.value = arrayify(_songs)
+  open(e.pageY, e.pageX, { songs: songs.value })
+})
 </script>

resources/assets/js/composables/useContextMenu.ts

@@ -21,11 +21,11 @@ export const useContextMenu = () => {
   }
 
   return {
-    base,
     ContextMenuBase,
+    base,
+    context,
     open,
     close,
-    trigger,
+    trigger
-    context
   }
 }