From 026196d69814137b4eef64e9e1e6af2bce990b78 Mon Sep 17 00:00:00 2001 From: Kasper Seweryn Date: Sat, 28 Jan 2023 21:23:46 +0100 Subject: [PATCH] feat: ensure next track is always preloaded Part-of: --- front/package.json | 8 ++-- front/src/composables/audio/tracks.ts | 32 ++++++++------ front/yarn.lock | 60 +++++++++++++-------------- 3 files changed, 54 insertions(+), 46 deletions(-) diff --git a/front/package.json b/front/package.json index e0509e5bd..14f069829 100644 --- a/front/package.json +++ b/front/package.json @@ -20,10 +20,10 @@ "@sentry/tracing": "7.27.0", "@sentry/vue": "7.27.0", "@vue/runtime-core": "3.2.45", - "@vueuse/core": "9.6.0", - "@vueuse/integrations": "9.6.0", - "@vueuse/math": "9.6.0", - "@vueuse/router": "9.6.0", + "@vueuse/core": "9.11.1", + "@vueuse/integrations": "9.11.1", + "@vueuse/math": "9.11.1", + "@vueuse/router": "9.11.1", "axios": "1.2.3", "axios-auth-refresh": "3.3.6", "butterchurn": "3.0.0-beta.4", diff --git a/front/src/composables/audio/tracks.ts b/front/src/composables/audio/tracks.ts index e29235522..195df4ae9 100644 --- a/front/src/composables/audio/tracks.ts +++ b/front/src/composables/audio/tracks.ts @@ -3,7 +3,7 @@ import type { Track, Upload } from '~/types' import type { Sound } from '~/api/player' import { createGlobalState, syncRef, useTimeoutFn, whenever } from '@vueuse/core' -import { computed, ref } from 'vue' +import { computed, ref, watchEffect } from 'vue' import { connectAudioSource } from '~/composables/audio/audio-api' import { usePlayer } from '~/composables/audio/player' @@ -110,7 +110,8 @@ export const useTracks = createGlobalState(() => { } // Preload next track - const { start: startPreloadTimeout, stop: stopPreloadTimeout } = useTimeoutFn(async (index) => { + const { start: startPreloadTimeout } = useTimeoutFn(async (index) => { + console.log('@@@@', index) const { queue } = useQueue() const sound = await createSound(queue.value[index as number]) await sound.preload() @@ -118,8 +119,6 @@ export const useTracks = createGlobalState(() => { // Create track from queue const createTrack = async (index: number) => { - stopPreloadTimeout() - const { queue, currentIndex, playNext, hasNext } = useQueue() if (queue.value.length <= index || index === -1) return console.log('LOADING TRACK', index) @@ -148,24 +147,33 @@ export const useTracks = createGlobalState(() => { if (isPlaying.value && index === currentIndex.value) { await sound.play() } - - // NOTE: Preload next track - if (index === currentIndex.value && index + 1 < queue.value.length) { - // @ts-expect-error vueuse is wrongly typed? - startPreloadTimeout(index + 1) - } } - + const currentTrack = ref() // NOTE: We want to have it called only once, hence we're using createGlobalState const initialize = createGlobalState(() => { - const { currentIndex, currentTrack: track } = useQueue() + const { currentIndex, currentTrack: track, queue, hasNext } = useQueue() whenever(track, () => { createTrack(currentIndex.value) }, { immediate: true }) + let lastTrack: QueueTrack + watchEffect(async () => { + if (!hasNext.value) return + + const nextTrack = queue.value[currentIndex.value + 1] + if (lastTrack === nextTrack) return + lastTrack = nextTrack + + // NOTE: Preload next track + // Calling this function clears previous timeout and starts a new one. + // Since this watchEffect fires whenever currentIndex / nextTrack changes, it will automatically cleanup previous preload. + // @ts-expect-error vueuse is wrongly typed? + startPreloadTimeout(currentIndex.value + 1) + }) + syncRef(track, currentTrack, { direction: 'ltr' }) diff --git a/front/yarn.lock b/front/yarn.lock index 7ad272d6c..794ba2c9c 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -2181,50 +2181,50 @@ resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.1.3.tgz#4a61dbd29783d01ddab504276dcf0c2b6988654f" integrity sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg== -"@vueuse/core@9.6.0": - version "9.6.0" - resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.6.0.tgz#de1d4730849cdbe28a9ebcf6cad167a700919603" - integrity sha512-qGUcjKQXHgN+jqXEgpeZGoxdCbIDCdVPz3QiF1uyecVGbMuM63o96I1GjYx5zskKgRI0FKSNsVWM7rwrRMTf6A== +"@vueuse/core@9.11.1": + version "9.11.1" + resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.11.1.tgz#1552aef67144220da7e6b797372a194a9c7ff52e" + integrity sha512-E/cizD1w9ILkq4axYjZrXLkKaBfzloaby2n3NMjUfd6yI/jkfTVgc6iwy/Cw2e++Ld4LphGbO+3MhzizvwUslQ== dependencies: "@types/web-bluetooth" "^0.0.16" - "@vueuse/metadata" "9.6.0" - "@vueuse/shared" "9.6.0" + "@vueuse/metadata" "9.11.1" + "@vueuse/shared" "9.11.1" vue-demi "*" -"@vueuse/integrations@9.6.0": - version "9.6.0" - resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-9.6.0.tgz#e2c6a5e1770b189a643d9c5ed65592c486db6254" - integrity sha512-+rs2OWY/3spxoAGQMnlHQpxf8ErAYf4D1bT0aXaPnxphmtYgexm6KIjTFpBbcQnHwVi1g2ET1SJoQL16yDrgWA== +"@vueuse/integrations@9.11.1": + version "9.11.1" + resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-9.11.1.tgz#ddcb69210d406992c74f32936443e16575a290e6" + integrity sha512-1VBT1U0ScI0GmJn+i7RvyCX5P+Dh04yxHurN3RniYPCFOJ8mCKSqJlzSA5aQ94UIK0ZKI2RyEGS8FY0WAteixw== dependencies: - "@vueuse/core" "9.6.0" - "@vueuse/shared" "9.6.0" + "@vueuse/core" "9.11.1" + "@vueuse/shared" "9.11.1" vue-demi "*" -"@vueuse/math@9.6.0": - version "9.6.0" - resolved "https://registry.yarnpkg.com/@vueuse/math/-/math-9.6.0.tgz#7baa1e92bd7be362a749673078b918e702ca2dea" - integrity sha512-bYTFZjTcJwgqPdY7SaxS/J5mrWy1QaESxD5HK5UhXY49DUYf4jjZxXjMVBObM/A46jQgRolqSEQDOXrrpEfEww== +"@vueuse/math@9.11.1": + version "9.11.1" + resolved "https://registry.yarnpkg.com/@vueuse/math/-/math-9.11.1.tgz#b574099f9c36729803b95d76191d6196133fcc82" + integrity sha512-EE0QCHexD91lleJuNFtcYAuJw08j9Hl/DytBFZSx+Piug86qhbHfcr6eHzawvZb+Yc2pHLPkUVSErsvf0d+Vkw== dependencies: - "@vueuse/shared" "9.6.0" + "@vueuse/shared" "9.11.1" vue-demi "*" -"@vueuse/metadata@9.6.0": - version "9.6.0" - resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.6.0.tgz#b0a73277538cebef5d477983f74fdd2aa21ce5f9" - integrity sha512-sIC8R+kWkIdpi5X2z2Gk8TRYzmczDwHRhEFfCu2P+XW2JdPoXrziqsGpDDsN7ykBx4ilwieS7JUIweVGhvZ93w== +"@vueuse/metadata@9.11.1": + version "9.11.1" + resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.11.1.tgz#f4e5fd9cb421c5a02373d034a0ce53538b370518" + integrity sha512-ABjkrG+VXggNhjfGyw5e/sekxTZfXTwjrYXkkWQmQ7Biyv+Gq9UD6IDNfeGvQZEINI0Qzw6nfuO2UFCd3hlrxQ== -"@vueuse/router@9.6.0": - version "9.6.0" - resolved "https://registry.yarnpkg.com/@vueuse/router/-/router-9.6.0.tgz#2827ea2238e7937ee6ff3acb32dc8feddafe6200" - integrity sha512-3TIZPX5smlimSNlTm+K3ESRTkA2VBHnwMintNrw4Z+WK5bh1UAh7lcBQluiGg3LJjkrMXYfuO7IPdU+a8NRnFA== +"@vueuse/router@9.11.1": + version "9.11.1" + resolved "https://registry.yarnpkg.com/@vueuse/router/-/router-9.11.1.tgz#cdf32998a8646b0fda47e52cb9b89301d392766c" + integrity sha512-nGmPnBZCcErEDpN2FXLcbdsHKSyRr10y+u2HzzJeDj3IutZjlCEysEOdDzlfjgUssNWao6CeSIb3sRMFZpWRsA== dependencies: - "@vueuse/shared" "9.6.0" + "@vueuse/shared" "9.11.1" vue-demi "*" -"@vueuse/shared@9.6.0": - version "9.6.0" - resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.6.0.tgz#ce2e0e8124c6bdb1e270fc213e334ccc71dcb951" - integrity sha512-/eDchxYYhkHnFyrb00t90UfjCx94kRHxc7J1GtBCqCG4HyPMX+krV9XJgVtWIsAMaxKVU4fC8NSUviG1JkwhUQ== +"@vueuse/shared@9.11.1": + version "9.11.1" + resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.11.1.tgz#c76805c9d86da109b132529b4745d7d706106e7f" + integrity sha512-UTZYGAjT96hWn4buf4wstZbeheBVNcKPQuej6qpoSkjF1atdaeCD6kqm9uGL2waHfisSgH9mq0qCRiBOk5C/2w== dependencies: vue-demi "*"