Fix calling createTrack multiple times when radio track changes

front/src/components/Queue.vue

@@ -35,11 +35,11 @@ const {
   currentTrack,
   currentIndex,
   queue,
-  tracks,
   dequeue,
   playTrack,
   reorder,
-  endsIn: timeLeft
+  endsIn: timeLeft,
+  clear
 } = useQueue()
 
 const queueModal = ref()
@@ -291,7 +291,7 @@ const reorderTracks = async (from: number, to: number) => {
               </button>
               <button
                 class="ui right floated basic button danger"
-                @click="tracks.length = 0"
+                @click="clear"
               >
                 <translate translate-context="*/Queue/*/Verb">
                   Clear

front/src/components/radios/Button.vue

@@ -27,14 +27,12 @@ const running = computed(() => {
     return false
   }
 
-  return store.state.radios.current?.type === props.type
-    && store.state.radios.current?.customRadioId === props.customRadioId
+  const { current } = store.state.radios
+  return current?.type === props.type
+    && current?.customRadioId === props.customRadioId
     && (
-      typeof props.objectId === 'string'
-          || (
-            typeof props.objectId !== 'number'
-              && store.state.radios.current?.objectId?.fullUsername === props.objectId?.fullUsername
-          )
+      (typeof props.objectId === 'object' && current.objectId?.fullUsername === props.objectId?.fullUsername)
+        || current.objectId === props.objectId
     )
 })
 

front/src/composables/audio/queue.ts

@@ -235,6 +235,12 @@ export const useQueue = createGlobalState(() => {
     return date
   }))
 
+  // Clear
+  const clear = () => {
+    store.commit('radios/reset')
+    tracks.value.length = 0
+  }
+
   // Radio queue populating
   watchEffect(() => {
     if (store.state.radios.running && currentIndex.value === tracks.value.length - 1) {
@@ -260,6 +266,7 @@ export const useQueue = createGlobalState(() => {
     shuffle,
     reshuffleUpcomingTracks,
     reorder,
-    endsIn
+    endsIn,
+    clear
   }
 })

front/src/composables/audio/tracks.ts

@@ -3,7 +3,7 @@ import type { Sound } from '~/api/player'
 
 import { soundImplementation } from '~/api/player'
 import { createGlobalState, syncRef } from '@vueuse/core'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { useQueue } from '~/composables/audio/queue'
 import { connectAudioSource } from '~/composables/audio/audio-api'
@@ -113,7 +113,7 @@ export const useTracks = createGlobalState(() => {
   // NOTE: We want to have it called only once, hence we're using createGlobalState
   const initialize = createGlobalState(() => {
     const { currentTrack: track, currentIndex } = useQueue()
-    watchEffect(async () => createTrack(currentIndex.value))
+    watch(currentIndex, (index) => createTrack(index))
     syncRef(currentTrack, track)
   })
 

front/src/composables/audio/usePlayOptions.ts

@@ -25,7 +25,7 @@ export interface PlayOptionsProps {
 }
 
 export default (props: PlayOptionsProps) => {
-  const { enqueue: addToQueue, currentTrack, playNext, currentIndex, enqueueAt, queue, tracks, playTrack } = useQueue()
+  const { enqueue: addToQueue, currentTrack, playNext, currentIndex, enqueueAt, queue, clear, playTrack } = useQueue()
   const { isPlaying } = usePlayer()
   const store = useStore()
 
@@ -157,7 +157,7 @@ export default (props: PlayOptionsProps) => {
   }
 
   const replacePlay = async () => {
-    tracks.value.length = 0
+    clear()
 
     jQuery(el.value).find('.ui.dropdown').dropdown('hide')
 

front/src/init/axios.ts

@@ -40,11 +40,16 @@ export const install: InitModule = ({ store, router }) => {
 
     switch (error.response?.status) {
       case 404:
+        if (error.response?.data === 'Radio doesn\'t have more candidates') {
+          error.backendErrors.push(error.response.data)
+          break
+        }
+
         error.backendErrors.push('Resource not found')
         error.isHandled = true
         store.commit('ui/addMessage', {
           // @ts-expect-error TS does not know about .data structure
-          content: error.response?.data?.detail ?? error.response?.data,
+          content: error.response?.data?.detail ?? error.response?.data ?? 'Resource not found',
           class: 'error'
         })
         break

front/src/store/radios.ts

@@ -1,6 +1,6 @@
+import type { BackendError, Track } from '~/types'
 import type { RootState } from '~/store/index'
 import type { Module } from 'vuex'
-import type { Track } from '~/types'
 
 import { useQueue } from '~/composables/audio/queue'
 import { usePlayer } from '~/composables/audio/player'
@@ -144,7 +144,14 @@ const store: Module<State, RootState> = {
           isPlaying.value = true
         }
       } catch (error) {
-        logger.error('Error while adding track to queue from radio', error)
+        if ((error as BackendError).backendErrors?.[0] === 'Radio doesn\'t have more candidates') {
+          commit('ui/addMessage', {
+            content: (error as BackendError).backendErrors?.[0]
+          }, { root: true })
+        } else {
+          logger.error('Error while adding track to queue from radio', error)
+        }
+
         commit('reset')
       } finally {
         state.populating = false