From 57692dcf6a4cf64fb6c6ac46813beecb560b3134 Mon Sep 17 00:00:00 2001 From: wvffle Date: Sun, 3 Jul 2022 23:57:14 +0000 Subject: [PATCH] Fix queue and player bugs --- front/src/App.vue | 8 ++------ front/src/components/Queue.vue | 17 +++++++---------- front/src/components/audio/Player.vue | 8 +------- front/src/composables/audio/usePlayer.ts | 6 ++---- front/src/composables/audio/useSound.ts | 10 ++++++++-- front/src/router/index.ts | 2 -- 6 files changed, 20 insertions(+), 31 deletions(-) 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',