Fix playback

front/src/components/Queue.vue

@@ -261,9 +261,9 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                 >
                   <h1>{{ currentTrack.title }}</h1>
                   <h2>
-                    {{ currentTrack.artistName }}
+                    {{ currentTrack.artistName ?? $t('components.Queue.meta.unknownArtist') }}
                     <span class="symbol hyphen middle" />
-                    {{ currentTrack.albumTitle }}
+                    {{ currentTrack.albumTitle ?? $t('components.Queue.meta.unknownAlbum') }}
                   </h2>
                 </div>
               </Transition>
@@ -282,7 +282,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                   class="discrete link artist"
                   :to="{name: 'library.artists.detail', params: {id: currentTrack.artistId }}"
                 >
-                  {{ currentTrack.artistName }}
+                  {{ currentTrack.artistName ?? $t('components.Queue.meta.unknownArtist') }}
                 </router-link>
                 <template v-if="currentTrack.albumId !== -1">
                   <span class="middle slash symbol" />
@@ -290,7 +290,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                     class="discrete link album"
                     :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
                   >
-                    {{ currentTrack.albumTitle }}
+                    {{ currentTrack.albumTitle ?? $t('components.Queue.meta.unknownAlbum') }}
                   </router-link>
                 </template>
               </div>

front/src/components/audio/Player.vue

@@ -188,7 +188,7 @@ const hideArtist = () => {
                 :to="{name: 'library.artists.detail', params: {id: currentTrack.artistId }}"
                 @click.stop.prevent=""
               >
-                {{ currentTrack.artistName }}
+                {{ currentTrack.artistName ?? $t('components.audio.Player.meta.unknownArtist') }}
               </router-link>
               <template v-if="currentTrack.albumId !== -1">
                 <span class="middle slash symbol" />
@@ -197,7 +197,7 @@ const hideArtist = () => {
                   :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
                   @click.stop.prevent=""
                 >
-                  {{ currentTrack.albumTitle }}
+                  {{ currentTrack.albumTitle ?? $t('components.audio.Player.meta.unknownAlbum') }}
                 </router-link>
               </template>
             </div>
@@ -216,10 +216,10 @@ const hideArtist = () => {
               {{ currentTrack.title }}
             </strong>
             <div class="meta">
-              {{ currentTrack.artistName }}
+              {{ currentTrack.artistName ?? $t('components.audio.Player.meta.unknownArtist') }}
               <template v-if="currentTrack.albumId !== -1">
                 <span class="middle slash symbol" />
-                {{ currentTrack.albumTitle }}
+                {{ currentTrack.albumTitle ?? $t('components.audio.Player.meta.unknownAlbum') }}
               </template>
             </div>
           </div>

front/src/composables/audio/queue.ts

@@ -4,7 +4,6 @@ import { createGlobalState, useNow, useStorage, useTimeAgo, whenever } from '@vu
 import { computed, ref, shallowReactive, watchEffect } from 'vue'
 import { shuffle as shuffleArray, sum } from 'lodash-es'
 import { useClamp } from '@vueuse/math'
-import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import { looping, LoopingMode, isPlaying } from '~/composables/audio/player'
@@ -25,8 +24,8 @@ export interface QueueTrackSource {
 export interface QueueTrack {
   id: number
   title: string
-  artistName: string
-  albumTitle: string
+  artistName?: string
+  albumTitle?: string
   position?: number
 
   // TODO: Add urls for those
@@ -99,9 +98,9 @@ export const currentTrack = computed(() => queue.value[currentIndex.value])
 // Use Queue
 export const useQueue = createGlobalState(() => {
   const { currentSound } = useTracks()
+  // const { t } = useI18n()
 
   const createQueueTrack = async (track: Track): Promise<QueueTrack> => {
-    const { t } = useI18n()
     const { default: store } = await import('~/store')
 
     if (track.uploads.length === 0) {
@@ -115,8 +114,8 @@ export const useQueue = createGlobalState(() => {
     return {
       id: track.id,
       title: track.title,
-      artistName: track.artist?.name ?? t('composables.audio.queue.unknownArtist'),
-      albumTitle: track.album?.title ?? t('composables.audio.queue.unknownAlbum'),
+      artistName: track.artist?.name,
+      albumTitle: track.album?.title,
       position: track.position,
       artistId: track.artist?.id ?? -1,
       albumId: track.album?.id ?? -1,

front/src/locales/en_US.json

@@ -190,7 +190,9 @@
       },
       "meta": {
         "queuePosition": "Track {index} of {length}",
-        "startTime": "00:00"
+        "startTime": "00:00",
+        "unknownArtist": "Unknown Artist",
+        "unknownAlbum": "Unknown Album"
       }
     },
     "RemoteSearchForm": {
@@ -514,7 +516,9 @@
           "player": "Audio player and controls"
         },
         "meta": {
-          "position": "{index} of {length}"
+          "position": "{index} of {length}",
+          "unknownArtist": "Unknown Artist",
+          "unknownAlbum": "Unknown Album"
         }
       },
       "Search": {
@@ -2960,10 +2964,6 @@
     "audio": {
       "usePlayOptions": {
         "addToQueueMessage": "{n} tracks were added to your queue | {n} track was added to your queue | {n} tracks were added to your queue"
-      },
-      "queue": {
-        "unknownArtist": "Unknown Artist",
-        "unknownAlbum": "Unknown Album"
       }
     },
     "locale": {