Fix queue and player bugs

front/src/App.vue

@@ -65,7 +65,6 @@ const [showShortcutsModal, toggleShortcutsModal] = useToggle(false)
 onKeyboardShortcut('h', () => toggleShortcutsModal())
 
 const { width } = useWindowSize()
-const player = ref()
 const showSetInstanceModal = ref(false)
 </script>
 
@@ -92,10 +91,7 @@ const showSetInstanceModal = ref(false)
     <set-instance-modal v-model:show="showSetInstanceModal" />
     <service-messages />
     <transition name="queue">
-      <queue
+      <queue v-if="store.state.ui.queueFocused" />
-        v-if="store.state.ui.queueFocused"
-        @touch-progress="player.setCurrentTime($event)"
-      />
     </transition>
 
     <router-view v-slot="{ Component }">
@@ -112,7 +108,7 @@ const showSetInstanceModal = ref(false)
       </template>
     </router-view>
 
-    <audio-player ref="player" />
+    <audio-player />
     <playlist-modal v-if="store.state.auth.authenticated" />
     <channel-upload-modal v-if="store.state.auth.authenticated" />
     <filter-modal v-if="store.state.auth.authenticated" />

front/src/components/Queue.vue

@@ -6,7 +6,7 @@ import time from '~/utils/time'
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
-import Draggable, {  } from 'vuedraggable'
+import Draggable from 'vuedraggable'
 import { whenever, useTimeoutFn, useWindowScroll, useWindowSize } from '@vueuse/core'
 import { useGettext } from "vue3-gettext"
 import useQueue from '~/composables/audio/useQueue'
@@ -18,7 +18,6 @@ const { activate } = useFocusTrap(queueModal, { allowOutsideClick: true })
 activate()
 
 const store = useStore()
-const queue = computed(() => store.state.queue)
 const currentIndex = computed(() => store.state.queue.currentIndex)
 
 const { y: pageYOffset } = useWindowScroll()
@@ -55,6 +54,7 @@ const {
   currentTimeFormatted,
   progress,
   bufferProgress,
+  currentTime,
   pause,
   resume,
 } = usePlayer()
@@ -100,13 +100,10 @@ whenever(
 const router = useRouter()
 router.beforeEach(() => store.commit('ui/queueFocused', null))
 
-// TODO (wvffle): move setCurrentTime to usePlayer
-const emit = defineEmits(['touch-progress'])
-
 const progressBar = ref()
 const touchProgress = (event: MouseEvent) => {
-  const time = (event.clientX / progressBar.value.offsetWidth) * duration.value
+  const time = ((event.clientX - (event.target as Element).getBoundingClientRect().left) / progressBar.value.offsetWidth) * duration.value
-  emit('touch-progress', time)
+  currentTime.value = time
 }
 </script>
 
@@ -253,7 +250,7 @@ const touchProgress = (event: MouseEvent) => {
                         href=""
                         :aria-label="labels.restart"
                         class="left floated timer discrete start"
-                        @click.prevent="emit('touch-progress', 0)"
+                        @click.prevent="currentTime = 0"
                       >{{ currentTimeFormatted }}</a>
                       <span class="right floated timer total">{{ durationFormatted }}</span>
                     </template>
@@ -334,7 +331,7 @@ const touchProgress = (event: MouseEvent) => {
                     <div>
                       <translate
                         translate-context="Sidebar/Queue/Text"
-                        :translate-params="{index: currentIndex + 1, length: queue.tracks.length}"
+                        :translate-params="{index: currentIndex + 1, length: tracks.length}"
                       >
                         Track %{ index } of %{ length }
                       </translate>
@@ -351,7 +348,7 @@ const touchProgress = (event: MouseEvent) => {
             </div>
             <table class="ui compact very basic fixed single line selectable unstackable table">
               <draggable
-                v-model:list="tracks"
+                v-model="tracks"
                 tag="tbody"
                 handle=".handle"
                 item-key="id"

front/src/components/audio/Player.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 // TODO (wvffle): Move most of this stufff to usePlayer
 import { useStore } from '~/store'
-import { Howler } from 'howler'
 import VolumeControl from './VolumeControl.vue'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
-import { computed, onMounted } from 'vue'
+import { computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import useQueue from '~/composables/audio/useQueue'
 import usePlayer from '~/composables/audio/usePlayer'
@@ -89,11 +88,6 @@ const setCurrentTime = (time: number) => {
   currentTime.value = time
 }
 
-onMounted(() => {
-  // TODO (wvffle): Check if it is needed
-  Howler.unload() // clear existing cache, if any
-})
-
 const switchTab = () => {
   store.commit('ui/queueFocused', store.state.ui.queueFocused === 'player' ? 'queue' : 'player')
 }

front/src/composables/audio/usePlayer.ts

@@ -102,10 +102,8 @@ const currentTime = computed({
 
     currentSound.value.seek(time)
 
-    // If player is paused update progress immediately to ensure updated UI
+    // Update progress immediately to ensure updated UI
-    if (!playing.value) {
+    progress.value = time
-      progress.value = time
-    }
   }
 })
 

front/src/composables/audio/useSound.ts

@@ -94,7 +94,10 @@ const loadSound = (track: Track): Sound => {
     },
 
     onplay () {
-      if (this !== currentSound.value?.howl) {
+      const [otherId] = (this as any)._getSoundIds()
+      const [currentId] = (currentSound.value?.howl as any)._getSoundIds() ?? []
+
+      if (otherId !== currentId) {
         return (this as any).stop()
       }
 
@@ -119,7 +122,10 @@ const loadSound = (track: Track): Sound => {
       soundCache.delete(track.id)
       howl.unload()
 
-      if (this !== currentSound.value?.howl) {
+      const [otherId] = (this as any)._getSoundIds()
+      const [currentId] = (currentSound.value?.howl as any)._getSoundIds() ?? []
+
+      if (otherId !== currentId) {
         console.error('load error', soundId, error)
         return
       }

front/src/router/index.ts

@@ -1,8 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import routes from './routes'
 
-console.log('PROCESS', import.meta.env)
-
 export default createRouter({
   history: createWebHistory(import.meta.env.VUE_APP_ROUTER_BASE_URL as string ?? '/'),
   linkActiveClass: 'active',