feat: ensure next track is always preloaded

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>
environments/review-docs-nginx-aqlin2/deployments/17397
Kasper Seweryn 2023-01-28 21:23:46 +01:00 zatwierdzone przez Marge
rodzic e87811c554
commit 026196d698
3 zmienionych plików z 54 dodań i 46 usunięć

Wyświetl plik

@ -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",

Wyświetl plik

@ -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<QueueTrack>()
// 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'
})

Wyświetl plik

@ -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 "*"