diff --git a/front/src/App.vue b/front/src/App.vue
index 44c44ad8d..4b67911b9 100644
--- a/front/src/App.vue
+++ b/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)
@@ -92,10 +91,7 @@ const showSetInstanceModal = ref(false)
-
+
@@ -112,7 +108,7 @@ const showSetInstanceModal = ref(false)
-
+
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index eb6d75608..4e4fda500 100644
--- a/front/src/components/Queue.vue
+++ b/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
- emit('touch-progress', time)
+ const time = ((event.clientX - (event.target as Element).getBoundingClientRect().left) / progressBar.value.offsetWidth) * duration.value
+ currentTime.value = time
}
@@ -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 }}
{{ durationFormatted }}
@@ -334,7 +331,7 @@ const touchProgress = (event: MouseEvent) => {
Track %{ index } of %{ length }
@@ -351,7 +348,7 @@ const touchProgress = (event: MouseEvent) => {
// 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')
}
diff --git a/front/src/composables/audio/usePlayer.ts b/front/src/composables/audio/usePlayer.ts
index bf65d9f53..a84ca8832 100644
--- a/front/src/composables/audio/usePlayer.ts
+++ b/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
- if (!playing.value) {
- progress.value = time
- }
+ // Update progress immediately to ensure updated UI
+ progress.value = time
}
})
diff --git a/front/src/composables/audio/useSound.ts b/front/src/composables/audio/useSound.ts
index 35fe1433b..5cc8c3de3 100644
--- a/front/src/composables/audio/useSound.ts
+++ b/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
}
diff --git a/front/src/router/index.ts b/front/src/router/index.ts
index 6f39f52e9..67927a799 100644
--- a/front/src/router/index.ts
+++ b/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',