fix: stablize song sharing functionality

resources/assets/js/components/screens/QueueScreen.vue

@@ -53,14 +53,14 @@ import { faCoffee } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref, toRef } from 'vue'
 import { eventBus, logger, pluralize } from '@/utils'
 import { commonStore, queueStore, songStore } from '@/stores'
-import { playbackService } from '@/services'
+import { localStorageService as storage, playbackService } from '@/services'
 import { useDialogBox, useRouter, useSongList } from '@/composables'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
 import SongListSkeleton from '@/components/ui/skeletons/SongListSkeleton.vue'
 
-const { go } = useRouter()
+const { go, onScreenActivated } = useRouter()
 const { showErrorDialog } = useDialogBox()
 
 const {
@@ -122,12 +122,16 @@ const removeSelected = () => {
 const onPressEnter = () => selectedSongs.value.length && playbackService.play(selectedSongs.value[0])
 const onReorder = (target: Song) => queueStore.move(selectedSongs.value, target)
 
-eventBus.on('SONG_QUEUED_FROM_ROUTE', async id => {
+onScreenActivated('Queue', async () => {
+  if (!storage.get('song-to-queue')) {
+    return
+  }
+
   let song: Song | undefined
 
   try {
     loading.value = true
-    song = await songStore.resolve(id)
+    song = await songStore.resolve(storage.get('song-to-queue')!)
 
     if (!song) {
       throw new Error('Song not found')
@@ -137,10 +141,11 @@ eventBus.on('SONG_QUEUED_FROM_ROUTE', async id => {
     logger.error(e)
     return
   } finally {
+    storage.remove('songQueuedFromRoute')
     loading.value = false
   }
 
-  queueStore.queueIfNotQueued(song!)
-  await playbackService.play(song!)
+  queueStore.clearSilently()
+  queueStore.queue(song!)
 })
 </script>

resources/assets/js/config/events.ts

@@ -36,7 +36,6 @@ export interface Events {
 
   SONGS_UPDATED: () => void
   SONGS_DELETED: (songs: Song[]) => void
-  SONG_QUEUED_FROM_ROUTE: (songId: string) => void
 
   SOCKET_TOGGLE_PLAYBACK: () => void
   SOCKET_TOGGLE_FAVORITE: () => void

resources/assets/js/config/routes.ts

@@ -1,6 +1,7 @@
 import { eventBus } from '@/utils'
 import { Route } from '@/router'
 import { userStore } from '@/stores'
+import { localStorageService } from '@/services'
 
 export const routes: Route[] = [
   {
@@ -98,7 +99,10 @@ export const routes: Route[] = [
     path: '/song/(?<id>[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})',
     screen: 'Queue',
     redirect: () => 'queue',
-    onResolve: params => eventBus.emit('SONG_QUEUED_FROM_ROUTE', params.id)
+    onResolve: params => {
+      localStorageService.set('song-to-queue', params.id)
+      return true
+    }
   },
   {
     path: '/invitation/accept/(?<token>[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})',

resources/assets/js/stores/queueStore.ts

@@ -106,6 +106,13 @@ export const queueStore = {
     this.all = []
   },
 
+  /**
+   * Clear the queue without saving the state.
+   */
+  clearSilently () {
+    this.state.songs = []
+  },
+
   indexOf (song: Song) {
     return this.all.indexOf(reactive(song))
   },