MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Revert "Rewrite player logic" 

This reverts commit ec630a234ab5ea0dccddaf06c462536bbf1ed329.
This commit is contained in:
wvffle 2022-07-29 11:29:08 +00:00 committed by Georg Krause
parent 06310593ac
commit 1d4a3468ee
21 changed files with 859 additions and 793 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/package.json
View File

@ -35,7 +35,6 @@
"howler": "2.2.3", "howler": "2.2.3",
"js-logger": "1.6.1", "js-logger": "1.6.1",
"lodash-es": "4.17.21", "lodash-es": "4.17.21",
"lru-cache": "^7.13.1",
"mavon-editor": "^3.0.0-beta", "mavon-editor": "^3.0.0-beta",
"moment": "2.29.4", "moment": "2.29.4",
"qs": "6.11.0", "qs": "6.11.0",
@ -43,7 +42,6 @@
"sanitize-html": "2.7.1", "sanitize-html": "2.7.1",
"sass": "1.54.0", "sass": "1.54.0",
"showdown": "2.1.0", "showdown": "2.1.0",
"standardized-audio-context": "^25.3.29",
"text-clipper": "2.2.0", "text-clipper": "2.2.0",
"tiptap-markdown": "^0.5.0", "tiptap-markdown": "^0.5.0",
"transliteration": "2.3.5", "transliteration": "2.3.5",

61
front/src/components/Queue.vue
View File

@ -11,7 +11,7 @@ import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
import { whenever, watchDebounced, useCurrentElement, useScrollLock } from '@vueuse/core' import { whenever, watchDebounced, useCurrentElement, useScrollLock } from '@vueuse/core'
import { useGettext } from 'vue3-gettext' import { useGettext } from 'vue3-gettext'
import useQueue from '~/composables/audio/useQueue' import useQueue from '~/composables/audio/useQueue'
import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer' import usePlayer from '~/composables/audio/usePlayer'
import VirtualList from '~/components/vui/list/VirtualList.vue' import VirtualList from '~/components/vui/list/VirtualList.vue'
import QueueItem from '~/components/QueueItem.vue' import QueueItem from '~/components/QueueItem.vue'
@ -24,32 +24,32 @@ const scrollLock = useScrollLock(document.body)
const store = useStore() const store = useStore()
const { const {
playing,
loading: isLoadingAudio,
errored,
duration,
durationFormatted,
currentTimeFormatted,
progress,
bufferProgress,
currentTime,
pause,
resume
} = usePlayer()
const {
currentTrack,
hasNext,
isEmpty: emptyQueue, isEmpty: emptyQueue,
tracks, tracks,
reorder, reorder,
endsIn: timeLeft, endsIn: timeLeft,
currentIndex,
removeTrack, removeTrack,
clear clear,
} = useQueue()
const currentIndex = computed(() => store.state.queue.currentIndex)
const currentTrack = computed(() => store.state.queue.tracks[currentIndex.value])
const hasNext = computed(() => store.getters['queue/hasNext'])
const durationFormatted = computed(() => time.parse(Math.floor(duration.value)))
const currentTimeFormatted = computed(() => time.parse(Math.floor(currentTime.value)))
const {
play,
pause,
next, next,
previous, previous
playing, } = useQueue()
errored,
progress,
duration,
time: currentTime,
loading: isLoadingAudio
} = useWebAudioPlayer()
const labels = computed(() => ({ const labels = computed(() => ({
queue: $pgettext('*/*/*', 'Queue'), queue: $pgettext('*/*/*', 'Queue'),
@ -105,12 +105,13 @@ router.beforeEach(() => store.commit('ui/queueFocused', null))
const progressBar = ref() const progressBar = ref()
const touchProgress = (event: MouseEvent) => { const touchProgress = (event: MouseEvent) => {
const percent = (event.clientX - ((event.target as Element).closest('.progress')?.getBoundingClientRect().left ?? 0)) / progressBar.value.offsetWidth const time = ((event.clientX - (event.target as Element).getBoundingClientRect().left) / progressBar.value.offsetWidth) * duration.value
progress.value = percent * 100 currentTime.value = time
} }
const playIndex = (index: number) => { const play = (index: unknown) => {
store.state.queue.currentIndex = index store.dispatch('queue/currentIndex', index as number)
resume()
} }
const getCover = (track: Track) => { const getCover = (track: Track) => {
@ -254,8 +255,12 @@ const reorderTracks = async (from: number, to: number) => {
<div <div
ref="progressBar" ref="progressBar"
:class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']" :class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']"
@click.stop.prevent="touchProgress" @click="touchProgress"
> >
<div
class="buffer bar"
:style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
/>
<div <div
class="position bar" class="position bar"
:style="{ 'transform': `translateX(calc(${progress}% - 100%)` }" :style="{ 'transform': `translateX(calc(${progress}% - 100%)` }"
@ -308,7 +313,7 @@ const reorderTracks = async (from: number, to: number) => {
:title="labels.play" :title="labels.play"
:aria-label="labels.play" :aria-label="labels.play"
class="control" class="control"
@click.prevent.stop="play" @click.prevent.stop="resume"
> >
<i :class="['ui', 'play', {'disabled': !currentTrack}, 'icon']" /> <i :class="['ui', 'play', {'disabled': !currentTrack}, 'icon']" />
</span> </span>
@ -390,7 +395,7 @@ const reorderTracks = async (from: number, to: number) => {
:index="index" :index="index"
:source="item" :source="item"
:class="[...classList, currentIndex === index && 'active']" :class="[...classList, currentIndex === index && 'active']"
@play="playIndex" @play="play"
@remove="removeTrack" @remove="removeTrack"
/> />
</template> </template>

4
front/src/components/audio/ChannelEntryCard.vue
View File

@ -4,7 +4,7 @@ import type { Cover, Track } from '~/types'
import PlayButton from '~/components/audio/PlayButton.vue' import PlayButton from '~/components/audio/PlayButton.vue'
import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue' import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
import useQueue from '~/composables/audio/useQueue' import useQueue from '~/composables/audio/useQueue'
import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer' import usePlayer from '~/composables/audio/usePlayer'
import { computed } from 'vue' import { computed } from 'vue'
interface Props { interface Props {
@ -16,7 +16,7 @@ interface Props {
const props = defineProps<Props>() const props = defineProps<Props>()
const { currentTrack } = useQueue() const { currentTrack } = useQueue()
const { playing } = useWebAudioPlayer() const { playing } = usePlayer()
const cover = computed(() => props.entry.cover ?? null) const cover = computed(() => props.entry.cover ?? null)
const duration = computed(() => props.entry.uploads.find(upload => upload.duration)?.duration ?? null) const duration = computed(() => props.entry.uploads.find(upload => upload.duration)?.duration ?? null)

2
front/src/components/audio/PlayButton.vue
View File

@ -155,7 +155,7 @@ const openMenu = () => {
data-ref="enqueue" data-ref="enqueue"
:disabled="!playable" :disabled="!playable"
:title="labels.addToQueue" :title="labels.addToQueue"
@click.stop.prevent="enqueue()" @click.stop.prevent="enqueue"
> >
<i class="plus icon" /><translate translate-context="*/Queue/Dropdown/Button/Label/Short">Add to queue</translate> <i class="plus icon" /><translate translate-context="*/Queue/Dropdown/Button/Label/Short">Add to queue</translate>
</button> </button>

108
front/src/components/audio/Player.vue
View File

@ -1,7 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { LoopState } from '~/store/player' // TODO (wvffle): Move most of this stufff to usePlayer
import time from '~/utils/time'
import { useStore } from '~/store' import { useStore } from '~/store'
import VolumeControl from './VolumeControl.vue' import VolumeControl from './VolumeControl.vue'
import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue' import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
@ -9,9 +7,9 @@ import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
import onKeyboardShortcut from '~/composables/onKeyboardShortcut' import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { useGettext } from 'vue3-gettext' import { useGettext } from 'vue3-gettext'
import { useMouse, useElementSize } from '@vueuse/core' import { useMouse, useWindowSize } from '@vueuse/core'
import useQueue from '~/composables/audio/useQueue' import useQueue from '~/composables/audio/useQueue'
import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer' import usePlayer from '~/composables/audio/usePlayer'
const store = useStore() const store = useStore()
const { $pgettext } = useGettext() const { $pgettext } = useGettext()
@ -21,41 +19,40 @@ const toggleMobilePlayer = () => {
} }
const { const {
currentIndex, isShuffling,
currentTrack, shuffle,
previous,
isEmpty: queueIsEmpty,
hasNext, hasNext,
hasPrevious, hasPrevious,
currentTrack,
currentIndex,
tracks, tracks,
isEmpty: queueIsEmpty, next
isShuffling,
isShuffled,
unshuffle,
shuffle,
clear
} = useQueue() } = useQueue()
const { const {
toggleMute,
play,
pause,
seek,
next,
previous,
playing, playing,
loading: isLoadingAudio,
looping,
currentTime,
progress, progress,
durationFormatted,
currentTimeFormatted,
bufferProgress,
duration, duration,
time: currentTime, toggleMute,
loading: isLoadingAudio seek,
} = useWebAudioPlayer() togglePlayback,
resume,
const durationFormatted = computed(() => time.parse(Math.floor(duration.value))) pause
const currentTimeFormatted = computed(() => time.parse(Math.floor(currentTime.value))) } = usePlayer()
// Key binds // Key binds
onKeyboardShortcut('e', toggleMobilePlayer) onKeyboardShortcut('e', toggleMobilePlayer)
onKeyboardShortcut('p', () => playing.value ? pause() : play()) onKeyboardShortcut('p', togglePlayback)
onKeyboardShortcut('s', shuffle) onKeyboardShortcut('s', shuffle)
onKeyboardShortcut('q', () => clear) onKeyboardShortcut('q', () => store.dispatch('queue/clean'))
onKeyboardShortcut('m', () => toggleMute) onKeyboardShortcut('m', () => toggleMute)
onKeyboardShortcut('l', () => store.commit('player/toggleLooping')) onKeyboardShortcut('l', () => store.commit('player/toggleLooping'))
onKeyboardShortcut('f', () => store.dispatch('favorites/toggle', currentTrack.value?.id)) onKeyboardShortcut('f', () => store.dispatch('favorites/toggle', currentTrack.value?.id))
@ -89,19 +86,22 @@ const labels = computed(() => ({
addArtistContentFilter: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…') addArtistContentFilter: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…')
})) }))
const setCurrentTime = (time: number) => {
currentTime.value = time
}
const switchTab = () => { const switchTab = () => {
store.commit('ui/queueFocused', store.state.ui.queueFocused === 'player' ? 'queue' : 'player') store.commit('ui/queueFocused', store.state.ui.queueFocused === 'player' ? 'queue' : 'player')
} }
const progressBar = ref() const progressBar = ref()
const touchProgress = (event: MouseEvent) => { const touchProgress = (event: MouseEvent) => {
const percent = (event.clientX - ((event.target as Element).closest('.progress')?.getBoundingClientRect().left ?? 0)) / progressBar.value.offsetWidth const time = ((event.clientX - ((event.target as Element).closest('.progress')?.getBoundingClientRect().left ?? 0)) / progressBar.value.offsetWidth) * duration.value
progress.value = percent * 100 currentTime.value = time
} }
// TODO (wvffle): Use createSharedComposable
const { x } = useMouse() const { x } = useMouse()
const { width: progressWidth } = useElementSize(progressBar) const { width: screenWidth } = useWindowSize()
</script> </script>
<template> <template>
@ -128,13 +128,17 @@ const { width: progressWidth } = useElementSize(progressBar)
:class="['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']" :class="['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']"
@click.prevent.stop="touchProgress" @click.prevent.stop="touchProgress"
> >
<div
class="buffer bar"
:style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
/>
<div <div
class="position bar" class="position bar"
:style="{ 'transform': `translateX(calc(${progress}% - 100%)` }" :style="{ 'transform': `translateX(calc(${progress}% - 100%)` }"
/> />
<div <div
class="seek bar" class="seek bar"
:style="{ 'transform': `translateX(${x / progressWidth * 100 - 100}%)` }" :style="{ 'transform': `translateX(${x / screenWidth * 100 - 100}%)` }"
/> />
</div> </div>
<div class="controls-row"> <div class="controls-row">
@ -253,7 +257,7 @@ const { width: progressWidth } = useElementSize(progressBar)
:aria-label="labels.previous" :aria-label="labels.previous"
:disabled="!hasPrevious" :disabled="!hasPrevious"
class="circular button control tablet-and-up" class="circular button control tablet-and-up"
@click.prevent.stop="previous" @click.prevent.stop="$store.dispatch('queue/previous')"
> >
<i :class="['ui', 'large', {'disabled': !hasPrevious}, 'backward step', 'icon']" /> <i :class="['ui', 'large', {'disabled': !hasPrevious}, 'backward step', 'icon']" />
</button> </button>
@ -262,7 +266,7 @@ const { width: progressWidth } = useElementSize(progressBar)
:title="labels.play" :title="labels.play"
:aria-label="labels.play" :aria-label="labels.play"
class="circular button control" class="circular button control"
@click.prevent.stop="play" @click.prevent.stop="resume"
> >
<i :class="['ui', 'big', 'play', {'disabled': !currentTrack}, 'icon']" /> <i :class="['ui', 'big', 'play', {'disabled': !currentTrack}, 'icon']" />
</button> </button>
@ -280,7 +284,7 @@ const { width: progressWidth } = useElementSize(progressBar)
:aria-label="labels.next" :aria-label="labels.next"
:disabled="!hasNext" :disabled="!hasNext"
class="circular button control" class="circular button control"
@click.prevent.stop="next" @click.prevent.stop="$store.dispatch('queue/next')"
> >
<i :class="['ui', 'large', {'disabled': !hasNext}, 'forward step', 'icon']" /> <i :class="['ui', 'large', {'disabled': !hasNext}, 'forward step', 'icon']" />
</button> </button>
@ -291,7 +295,7 @@ const { width: progressWidth } = useElementSize(progressBar)
<template v-if="!isLoadingAudio"> <template v-if="!isLoadingAudio">
<span <span
class="start" class="start"
@click.stop.prevent="progress = 0" @click.stop.prevent="setCurrentTime(0)"
> >
{{ currentTimeFormatted }} {{ currentTimeFormatted }}
</span> </span>
@ -304,53 +308,57 @@ const { width: progressWidth } = useElementSize(progressBar)
<div class="group"> <div class="group">
<volume-control class="expandable" /> <volume-control class="expandable" />
<button <button
v-if="$store.state.player.looping === LoopState.NO_LOOP" v-if="looping === 0"
class="circular control button" class="circular control button"
:title="labels.loopingDisabled" :title="labels.loopingDisabled"
:aria-label="labels.loopingDisabled" :aria-label="labels.loopingDisabled"
:disabled="!currentTrack" :disabled="!currentTrack"
@click.prevent.stop="$store.commit('player/toggleLooping')" @click.prevent.stop="$store.commit('player/looping', 1)"
> >
<i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'icon']" /> <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'icon']" />
</button> </button>
<button <button
v-if="$store.state.player.looping === LoopState.LOOP_CURRENT" v-if="looping === 1"
class="looping circular control button"
:title="labels.loopingSingle" :title="labels.loopingSingle"
:aria-label="labels.loopingSingle" :aria-label="labels.loopingSingle"
:disabled="!currentTrack" :disabled="!currentTrack"
@click.prevent.stop="$store.commit('player/toggleLooping')" class="looping circular control button"
@click.prevent.stop="$store.commit('player/looping', 2)"
> >
<i class="repeat icon"> <i
class="repeat icon"
>
<span class="ui circular tiny vibrant label">1</span> <span class="ui circular tiny vibrant label">1</span>
</i> </i>
</button> </button>
<button <button
v-if="$store.state.player.looping === LoopState.LOOP_QUEUE" v-if="looping === 2"
class="looping circular control button" class="looping circular control button"
:title="labels.loopingWhole" :title="labels.loopingWhole"
:aria-label="labels.loopingWhole" :aria-label="labels.loopingWhole"
:disabled="!currentTrack" :disabled="!currentTrack"
@click.prevent.stop="$store.commit('player/toggleLooping')" @click.prevent.stop="$store.commit('player/looping', 0)"
> >
<i class="repeat icon"> <i
class="repeat icon"
>
<span class="ui circular tiny vibrant label">&infin;</span> <span class="ui circular tiny vibrant label">&infin;</span>
</i> </i>
</button> </button>
<button <button
class="circular control button shuffling" class="circular control button"
:disabled="queueIsEmpty" :disabled="queueIsEmpty || null"
:title="labels.shuffle" :title="labels.shuffle"
:aria-label="labels.shuffle" :aria-label="labels.shuffle"
@click.prevent.stop="() => isShuffled ? unshuffle() : shuffle()" @click.prevent.stop="shuffle()"
> >
<div <div
v-if="isShuffling" v-if="isShuffling"
class="ui inline inverted tiny active loader" class="ui inline shuffling inverted tiny active loader"
/> />
<i <i
v-else v-else
:class="['ui', 'random', {disabled: queueIsEmpty, vibrant: isShuffled}, 'icon']" :class="['ui', 'random', {'disabled': queueIsEmpty}, 'icon']"
/> />
</button> </button>
</div> </div>

16
front/src/components/audio/VolumeControl.vue
View File

@ -1,21 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { useGettext } from 'vue3-gettext'
import { useStore } from '~/store' import { useStore } from '~/store'
import { useGettext } from 'vue3-gettext'
import { useTimeoutFn } from '@vueuse/core' import { useTimeoutFn } from '@vueuse/core'
import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer' import usePlayer from '~/composables/audio/usePlayer'
const { mute, unmute } = useWebAudioPlayer()
const store = useStore() const store = useStore()
const { volume, mute, unmute } = usePlayer()
const sliderVolume = computed({
get: () => store.state.player.volume * 100,
set: (value) => store.commit('player/volume', value / 100)
})
const expanded = ref(false) const expanded = ref(false)
const volumeSteps = 100 const volumeSteps = 100
const sliderVolume = computed({
get: () => volume.value * volumeSteps,
set: (value) => store.commit('player/volume', value / volumeSteps)
})
const { $pgettext } = useGettext() const { $pgettext } = useGettext()
const labels = computed(() => ({ const labels = computed(() => ({
unmute: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Unmute'), unmute: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Unmute'),

4
front/src/components/audio/podcast/MobileRow.vue
View File

@ -9,7 +9,7 @@ import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
import TrackModal from '~/components/audio/track/Modal.vue' import TrackModal from '~/components/audio/track/Modal.vue'
import usePlayOptions from '~/composables/audio/usePlayOptions' import usePlayOptions from '~/composables/audio/usePlayOptions'
import useQueue from '~/composables/audio/useQueue' import useQueue from '~/composables/audio/useQueue'
import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer' import usePlayer from '~/composables/audio/usePlayer'
interface Props extends PlayOptionsProps { interface Props extends PlayOptionsProps {
track: Track track: Track
@ -39,7 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
const showTrackModal = ref(false) const showTrackModal = ref(false)
const { currentTrack } = useQueue() const { currentTrack } = useQueue()
const { playing } = useWebAudioPlayer() const { playing } = usePlayer()
const { activateTrack } = usePlayOptions(props) const { activateTrack } = usePlayOptions(props)
const { $pgettext } = useGettext() const { $pgettext } = useGettext()

4
front/src/components/audio/track/MobileRow.vue
View File

@ -9,7 +9,7 @@ import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
import TrackModal from '~/components/audio/track/Modal.vue' import TrackModal from '~/components/audio/track/Modal.vue'
import usePlayOptions from '~/composables/audio/usePlayOptions' import usePlayOptions from '~/composables/audio/usePlayOptions'
import useQueue from '~/composables/audio/useQueue' import useQueue from '~/composables/audio/useQueue'
import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer' import usePlayer from '~/composables/audio/usePlayer'
interface Props extends PlayOptionsProps { interface Props extends PlayOptionsProps {
track: Track track: Track
@ -39,7 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
const showTrackModal = ref(false) const showTrackModal = ref(false)
const { currentTrack } = useQueue() const { currentTrack } = useQueue()
const { playing } = useWebAudioPlayer() const { playing } = usePlayer()
const { activateTrack } = usePlayOptions(props) const { activateTrack } = usePlayOptions(props)
const { $pgettext } = useGettext() const { $pgettext } = useGettext()

4
front/src/components/audio/track/Row.vue
View File

@ -8,7 +8,7 @@ import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
import PlayButton from '~/components/audio/PlayButton.vue' import PlayButton from '~/components/audio/PlayButton.vue'
import usePlayOptions from '~/composables/audio/usePlayOptions' import usePlayOptions from '~/composables/audio/usePlayOptions'
import useQueue from '~/composables/audio/useQueue' import useQueue from '~/composables/audio/useQueue'
import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer' import usePlayer from '~/composables/audio/usePlayer'
import { computed } from 'vue' import { computed } from 'vue'
interface Props extends PlayOptionsProps { interface Props extends PlayOptionsProps {
@ -44,7 +44,7 @@ const props = withDefaults(defineProps<Props>(), {
displayActions: true displayActions: true
}) })
const { playing, loading } = useWebAudioPlayer() const { playing, loading } = usePlayer()
const { currentTrack } = useQueue() const { currentTrack } = useQueue()
const { activateTrack } = usePlayOptions(props) const { activateTrack } = usePlayOptions(props)

33
front/src/composables/audio/usePlayOptions.ts
View File

@ -5,7 +5,7 @@ import { useStore } from '~/store'
import { useGettext } from 'vue3-gettext' import { useGettext } from 'vue3-gettext'
import { computed, markRaw, ref } from 'vue' import { computed, markRaw, ref } from 'vue'
import axios from 'axios' import axios from 'axios'
import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer' import usePlayer from '~/composables/audio/usePlayer'
import useQueue from '~/composables/audio/useQueue' import useQueue from '~/composables/audio/useQueue'
import { useCurrentElement } from '@vueuse/core' import { useCurrentElement } from '@vueuse/core'
import jQuery from 'jquery' import jQuery from 'jquery'
@ -26,8 +26,8 @@ export default (props: PlayOptionsProps) => {
// TODO (wvffle): Test if we can defineProps in composable // TODO (wvffle): Test if we can defineProps in composable
const store = useStore() const store = useStore()
const { play, pause, next, playing } = useWebAudioPlayer() const { resume, pause, playing } = usePlayer()
const { currentTrack, clear } = useQueue() const { currentTrack } = useQueue()
const playable = computed(() => { const playable = computed(() => {
if (props.isPlayable) { if (props.isPlayable) {
@ -133,25 +133,32 @@ export default (props: PlayOptionsProps) => {
} }
const el = useCurrentElement() const el = useCurrentElement()
const enqueue = async (skip = false, index?: number) => { const enqueue = async () => {
jQuery(el.value).find('.ui.dropdown').dropdown('hide') jQuery(el.value).find('.ui.dropdown').dropdown('hide')
const tracks = await getPlayableTracks()
await store.dispatch('queue/appendMany', { tracks })
addMessage(tracks)
}
const enqueueNext = async (next = false) => {
jQuery(el.value).find('.ui.dropdown').dropdown('hide')
const tracks = await getPlayableTracks() const tracks = await getPlayableTracks()
const wasEmpty = store.state.queue.tracks.length === 0 const wasEmpty = store.state.queue.tracks.length === 0
await store.dispatch('queue/appendMany', { tracks, index: store.state.queue.currentIndex + 1 })
await store.dispatch('queue/appendMany', { tracks, index }) if (next && !wasEmpty) {
await store.dispatch('queue/next')
if (skip && !wasEmpty) { resume()
await next()
} }
addMessage(tracks) addMessage(tracks)
} }
const enqueueNext = async (skip?: boolean) => enqueue(skip, store.state.queue.currentIndex + 1)
const replacePlay = async () => { const replacePlay = async () => {
await clear() store.dispatch('queue/clean')
jQuery(el.value).find('.ui.dropdown').dropdown('hide') jQuery(el.value).find('.ui.dropdown').dropdown('hide')
@ -166,7 +173,7 @@ export default (props: PlayOptionsProps) => {
store.dispatch('queue/currentIndex', 0) store.dispatch('queue/currentIndex', 0)
} }
play() resume()
addMessage(tracks) addMessage(tracks)
} }
@ -177,7 +184,7 @@ export default (props: PlayOptionsProps) => {
return pause() return pause()
} }
return play() return resume()
} }
replacePlay() replacePlay()

265
front/src/composables/audio/usePlayer.ts Normal file
View File

@ -0,0 +1,265 @@
import type { Track } from '~/types'
import { computed, watchEffect, ref, watch } from 'vue'
import { Howler } from 'howler'
import { useRafFn, useTimeoutFn } from '@vueuse/core'
import useQueue from '~/composables/audio/useQueue'
import useSound from '~/composables/audio/useSound'
import toLinearVolumeScale from '~/composables/audio/toLinearVolumeScale'
import store from '~/store'
import axios from 'axios'
const PRELOAD_DELAY = 15
const { currentSound, loadSound, onSoundProgress } = useSound()
const { isShuffling, currentTrack, currentIndex } = useQueue()
const looping = computed(() => store.state.player.looping)
const playing = computed(() => store.state.player.playing)
const loading = computed(() => store.state.player.isLoadingAudio)
const errored = computed(() => store.state.player.errored)
const focused = computed(() => store.state.ui.queueFocused === 'player')
// Cache sound if we have currentTrack available
if (currentTrack.value) {
loadSound(currentTrack.value)
}
// Playing
const playTrack = async (track: Track, oldTrack?: Track) => {
const oldSound = currentSound.value
// TODO (wvffle): Move oldTrack to watcher
if (oldSound && track !== oldTrack) {
oldSound.stop()
}
if (!track) {
return
}
if (!isShuffling.value) {
if (!track.uploads.length) {
// we don't have any information for this track, we need to fetch it
track = await axios.get(`tracks/${track.id}/`)
.then(response => response.data, () => null)
}
if (track === null) {
store.commit('player/isLoadingAudio', false)
store.dispatch('player/trackErrored')
return
}
currentSound.value = loadSound(track)
if (playing.value) {
currentSound.value.play()
store.commit('player/playing', true)
} else {
store.commit('player/isLoadingAudio', false)
}
store.commit('player/errored', false)
store.dispatch('player/updateProgress', 0)
}
}
const { start: loadTrack, stop: cancelLoading } = useTimeoutFn((track, oldTrack) => {
playTrack(track as Track, oldTrack as Track)
}, 100, { immediate: false }) as {
start: (a: Track, b: Track) => void
stop: () => void
}
watch(currentTrack, (track, oldTrack) => {
cancelLoading()
currentSound.value?.pause()
store.commit('player/isLoadingAudio', true)
loadTrack(track, oldTrack)
})
// Volume
const volume = computed({
get: () => store.state.player.volume,
set: (value) => store.commit('player/volume', value)
})
watchEffect(() => Howler.volume(toLinearVolumeScale(volume.value)))
const mute = () => store.dispatch('player/mute')
const unmute = () => store.dispatch('player/unmute')
const toggleMute = () => store.dispatch('player/toggleMute')
// Time and duration
const duration = computed(() => store.state.player.duration)
const currentTime = computed({
get: () => store.state.player.currentTime,
set: (time) => {
if (time < 0 || time > duration.value) {
return
}
if (!currentSound.value?.getSource() || time === currentSound.value.seek()) {
return
}
currentSound.value.seek(time)
// Update progress immediately to ensure updated UI
progress.value = time
}
})
const durationFormatted = computed(() => store.getters['player/durationFormatted'])
const currentTimeFormatted = computed(() => store.getters['player/currentTimeFormatted'])
// Progress
const progress = computed({
get: () => store.getters['player/progress'],
set: (time) => {
if (currentSound.value?.state() === 'loaded') {
store.state.player.currentTime = time
const duration = currentSound.value.duration()
currentSound.value.triggerSoundProgress(time, duration)
}
}
})
const bufferProgress = computed(() => store.state.player.bufferProgress)
onSoundProgress(({ node, time, duration }) => {
const toPreload = store.state.queue.tracks[currentIndex.value + 1]
if (!nextTrackPreloaded.value && toPreload && (time > PRELOAD_DELAY || duration - time < 30)) {
loadSound(toPreload)
nextTrackPreloaded.value = true
}
if (time > duration / 2) {
if (!isListeningSubmitted.value) {
store.dispatch('player/trackListened', currentTrack.value)
isListeningSubmitted.value = true
}
}
// from https://github.com/goldfire/howler.js/issues/752#issuecomment-372083163
const { buffered, currentTime } = node
let range = 0
try {
while (buffered.start(range) >= currentTime || currentTime >= buffered.end(range)) {
range += 1
}
} catch (IndexSizeError) {
return
}
let loadPercentage
const start = buffered.start(range)
const end = buffered.end(range)
if (range === 0) {
// easy case, no user-seek
const loadStartPercentage = start / node.duration
const loadEndPercentage = end / node.duration
loadPercentage = loadEndPercentage - loadStartPercentage
} else {
const loaded = end - start
const remainingToLoad = node.duration - start
// user seeked a specific position in the audio, our progress must be
// computed based on the remaining portion of the track
loadPercentage = loaded / remainingToLoad
}
if (loadPercentage * 100 === bufferProgress.value) {
return
}
store.commit('player/bufferProgress', loadPercentage * 100)
})
const observeProgress = ref(false)
useRafFn(() => {
if (observeProgress.value && currentSound.value?.state() === 'loaded') {
progress.value = currentSound.value.seek()
}
})
watch(playing, async (isPlaying) => {
if (currentSound.value) {
if (isPlaying) {
currentSound.value.play()
} else {
currentSound.value.pause()
}
} else {
await playTrack(currentTrack.value)
}
observeProgress.value = isPlaying
})
const isListeningSubmitted = ref(false)
const nextTrackPreloaded = ref(false)
watch(currentTrack, () => (nextTrackPreloaded.value = false))
// Controls
const pause = () => store.dispatch('player/pausePlayback')
const resume = () => store.dispatch('player/resumePlayback')
const { next } = useQueue()
const seek = (step: number) => {
// seek right
if (step > 0) {
if (currentTime.value + step < duration.value) {
store.dispatch('player/updateProgress', (currentTime.value + step))
} else {
next()
}
return
}
// seek left
const position = Math.max(currentTime.value + step, 0)
store.dispatch('player/updateProgress', position)
}
const togglePlayback = () => {
if (playing.value) return pause()
return resume()
}
export default () => {
return {
looping,
playing,
loading,
errored,
focused,
isListeningSubmitted,
playTrack,
volume,
mute,
unmute,
toggleMute,
duration,
currentTime,
durationFormatted,
currentTimeFormatted,
progress,
bufferProgress,
pause,
resume,
seek,
togglePlayback
}
}

110
front/src/composables/audio/useQueue.ts
View File

@ -1,19 +1,35 @@
import { useTimeAgo, useNow } from '@vueuse/core' import type { Track } from '~/types'
import { useTimeoutFn, useThrottleFn, useTimeAgo, useNow, whenever } from '@vueuse/core'
import { Howler } from 'howler'
import { gettext } from '~/init/locale' import { gettext } from '~/init/locale'
import { computed } from 'vue' import { ref, computed } from 'vue'
import { sum } from 'lodash-es' import { sum } from 'lodash-es'
import store from '~/store' import store from '~/store'
const { $pgettext } = gettext
const currentTrack = computed(() => store.getters['queue/currentTrack'])
const currentIndex = computed(() => store.state.queue.currentIndex) const currentIndex = computed(() => store.state.queue.currentIndex)
const currentTrack = computed(() => store.state.queue.tracks[currentIndex.value])
const hasNext = computed(() => store.getters['queue/hasNext']) const hasNext = computed(() => store.getters['queue/hasNext'])
const hasPrevious = computed(() => store.getters['queue/hasPrevious']) const hasPrevious = computed(() => store.getters['queue/hasPrevious'])
const tracks = computed(() => store.state.queue.tracks)
const isShuffling = computed(() => !!store.state.queue.shuffleAbortController) const isEmpty = computed(() => store.getters['queue/isEmpty'])
const isShuffled = computed(() => !!store.state.queue.unshuffled.length) whenever(isEmpty, () => Howler.unload())
const isEmpty = computed(() => tracks.value.length === 0)
const clear = () => store.dispatch('queue/clean')
const removeTrack = (index: number) => store.dispatch('queue/cleanTrack', index) const removeTrack = (index: number) => store.dispatch('queue/cleanTrack', index)
const clear = () => store.dispatch('queue/clean')
const next = () => store.dispatch('queue/next')
const previous = () => store.dispatch('queue/previous')
const focused = computed(() => store.state.ui.queueFocused === 'queue')
//
// Track list
//
const tracks = computed<Track[]>(() => store.state.queue.tracks)
const reorder = (oldIndex: number, newIndex: number) => { const reorder = (oldIndex: number, newIndex: number) => {
store.commit('queue/reorder', { store.commit('queue/reorder', {
oldIndex, oldIndex,
@ -23,22 +39,30 @@ const reorder = (oldIndex: number, newIndex: number) => {
// //
// Shuffle // Shuffle
const { $pgettext } = gettext //
const shuffle = async () => { const isShuffling = ref(false)
await store.dispatch('queue/shuffle')
store.commit('ui/addMessage', {
content: $pgettext('Content/Queue/Message', 'Queue shuffled!'),
date: new Date()
})
}
const unshuffle = async () => { const forceShuffle = useThrottleFn(() => {
await store.dispatch('queue/unshuffle') isShuffling.value = true
store.commit('ui/addMessage', {
content: $pgettext('Content/Queue/Message', 'Queue order restored!'), useTimeoutFn(async () => {
date: new Date() await store.dispatch('queue/shuffle')
}) store.commit('ui/addMessage', {
} content: $pgettext('Content/Queue/Message', 'Queue shuffled!'),
date: new Date()
})
isShuffling.value = false
}, 100)
})
const shuffle = useThrottleFn(() => {
if (isShuffling.value || isEmpty.value) {
return
}
return forceShuffle()
}, 101, false)
// //
// Time left // Time left
@ -56,19 +80,27 @@ const endsIn = useTimeAgo(computed(() => {
return date return date
})) }))
export default () => ({ export default () => {
currentIndex, return {
currentTrack, currentTrack,
hasNext, currentIndex,
hasPrevious, hasNext,
tracks, hasPrevious,
isEmpty, isEmpty,
shuffle, isShuffling,
unshuffle,
isShuffling, removeTrack,
isShuffled, clear,
endsIn, next,
clear, previous,
removeTrack,
reorder tracks,
}) reorder,
shuffle,
forceShuffle,
endsIn,
focused
}
}

160
front/src/composables/audio/useSound.ts Normal file
View File

@ -0,0 +1,160 @@
import type { Track } from '~/types'
import { ref, computed } from 'vue'
import { Howl } from 'howler'
import useTrackSources from '~/composables/audio/useTrackSources'
import useSoundCache from '~/composables/audio/useSoundCache'
import usePlayer from '~/composables/audio/usePlayer'
import store from '~/store'
import { createEventHook, useThrottleFn } from '@vueuse/core'
interface Sound {
id?: number
howl: Howl
stop: () => void
play: () => void
pause: () => void
state: () => 'unloaded' | 'loading' | 'loaded'
seek: (time?: number) => number
duration: () => number
getSource: () => boolean
triggerSoundProgress: (time: number, duration: number) => void
}
const soundCache = useSoundCache()
const currentTrack = computed(() => store.getters['queue/currentTrack'])
const looping = computed(() => store.state.player.looping)
const currentSound = ref()
const soundId = ref()
const soundProgress = createEventHook<{ node: HTMLAudioElement, time: number, duration: number }>()
const createSound = (howl: Howl): Sound => ({
howl,
play () {
this.id = howl.play(this.id)
},
stop () {
howl.stop(this.id)
this.id = undefined
},
pause () {
howl.pause(this.id)
},
state: () => howl.state(),
seek: (time?: number) => howl.seek(time),
duration: () => howl.duration(),
getSource: () => (howl as any)._sounds[0],
triggerSoundProgress: useThrottleFn((time: number, duration: number) => {
const node = (howl as any)._sounds[0]?._node
if (node) {
soundProgress.trigger({ node, time, duration })
}
}, 1000)
})
const loadSound = (track: Track): Sound => {
const cached = soundCache.get(track.id)
if (cached) {
return createSound(cached.howl)
}
const sources = useTrackSources(track)
const howl = new Howl({
src: sources.map((source) => source.url),
format: sources.map((source) => source.type),
autoplay: false,
loop: false,
html5: true,
preload: true,
onend () {
const onlyTrack = store.state.queue.tracks.length === 1
if (looping.value === 1 || (onlyTrack && looping.value === 2)) {
currentSound.value.seek(0)
store.dispatch('player/updateProgress', 0)
soundId.value = currentSound.value.play(soundId.value)
} else {
store.dispatch('player/trackEnded', currentTrack.value)
}
},
onunlock () {
if (store.state.player.playing && currentSound.value) {
soundId.value = currentSound.value.play(soundId.value)
}
},
onload () {
const node = (howl as any)._sounds[0]._node as HTMLAudioElement
node.addEventListener('progress', () => {
if (howl !== currentSound.value) {
return
}
currentSound.value._triggerSoundProgress()
})
},
onplay () {
const [otherId] = (this as any)._getSoundIds()
const [currentId] = (currentSound.value?.howl as any)._getSoundIds() ?? []
if (otherId !== currentId) {
return (this as any).stop()
}
const time = currentSound.value.seek()
const duration = currentSound.value.duration()
if (time <= duration / 2) {
const { isListeningSubmitted } = usePlayer()
isListeningSubmitted.value = false
}
store.commit('player/isLoadingAudio', false)
store.commit('player/resetErrorCount')
store.commit('player/errored', false)
store.commit('player/duration', howl.duration())
},
onplayerror (soundId, error) {
console.error('play error', soundId, error)
},
onloaderror (soundId, error) {
soundCache.delete(track.id)
howl.unload()
const [otherId] = (this as any)._getSoundIds()
const [currentId] = (currentSound.value?.howl as any)._getSoundIds() ?? []
if (otherId !== currentId) {
console.error('load error', soundId, error)
return
}
console.error('Error while playing:', soundId, error)
store.commit('player/isLoadingAudio', false)
store.dispatch('player/trackErrored')
}
})
soundCache.set(track.id, {
id: track.id,
date: new Date(),
howl
})
return createSound(howl)
}
export default () => {
return {
loadSound,
currentSound,
onSoundProgress: soundProgress.on
}
}

38
front/src/composables/audio/useSoundCache.ts Normal file
View File

@ -0,0 +1,38 @@
import type { Howl } from 'howler'
import { sortBy } from 'lodash-es'
import { reactive, watchEffect, ref } from 'vue'
const MAX_PRELOADED = 3
export interface CachedSound {
id: string
date: Date
howl: Howl
}
const soundCache = reactive(new Map<string, CachedSound>())
const cleaningCache = ref(false)
watchEffect(() => {
const toRemove = soundCache.size - MAX_PRELOADED
if (toRemove > 0 && !cleaningCache.value) {
cleaningCache.value = true
const excess = sortBy([...soundCache.values()], [(cached: CachedSound) => cached.date])
.slice(0, toRemove)
for (const cached of excess) {
console.log('Removing cached element:', cached)
soundCache.delete(cached.id)
cached.howl.unload()
}
cleaningCache.value = false
}
})
export default () => {
return soundCache
}

18
front/src/composables/audio/useTrackSources.ts
View File

@ -2,26 +2,16 @@ import type { Track } from '~/types'
import store from '~/store' import store from '~/store'
import updateQueryString from '~/composables/updateQueryString' import updateQueryString from '~/composables/updateQueryString'
import axios from 'axios'
export interface TrackSource { export interface TrackSource {
url: string url: string
type: string type: string
} }
const audio = document.createElement('audio') export default (trackData: Track): TrackSource[] => {
const allowed = ['probably', 'maybe'] const audio = document.createElement('audio')
export default async (trackData: Track, abortSignal?: AbortSignal): Promise<TrackSource[]> => { const allowed = ['probably', 'maybe']
if (trackData.uploads.length === 0) {
trackData = await axios.get(`tracks/${trackData.id}/`, { signal: abortSignal })
.then(response => response.data)
.catch(() => null)
}
if (!trackData) {
return []
}
const sources = trackData.uploads const sources = trackData.uploads
.filter(upload => { .filter(upload => {
@ -45,8 +35,6 @@ export default async (trackData: Track, abortSignal?: AbortSignal): Promise<Trac
) )
}) })
// TODO: Quality picker - sort sources by quality
const token = store.state.auth.scopedTokens.listen const token = store.state.auth.scopedTokens.listen
if (store.state.auth.authenticated && token !== null) { if (store.state.auth.authenticated && token !== null) {
// we need to send the token directly in url // we need to send the token directly in url

377
front/src/composables/audio/useWebAudioPlayer.ts
View File

@ -1,377 +0,0 @@
import type { IAudioContext, IMediaElementAudioSourceNode } from 'standardized-audio-context'
import type { Track } from '~/types'
import { AudioContext } from 'standardized-audio-context'
import { ref, reactive, computed, watchEffect, nextTick, shallowRef, shallowReactive } from 'vue'
import { useRafFn, watchDebounced, computedEager } from '@vueuse/core'
import { uniq } from 'lodash-es'
import LRUCache from 'lru-cache'
import store from '~/store'
import axios from 'axios'
import useTrackSources from './useTrackSources'
import { LoopState } from '~/store/player'
import useLogger from '../useLogger'
import toLinearVolumeScale from './toLinearVolumeScale'
const TO_PRELOAD = 3
const context = new AudioContext()
const logger = useLogger()
//
// Audio loading
//
// Maximum of 20 song buffers can be cached
const audioCache = new LRUCache<string, IMediaElementAudioSourceNode<IAudioContext>>({
max: 20,
disposeAfter (source: IMediaElementAudioSourceNode<IAudioContext>, key: string) {
// In case we've disposed the current buffer from cache, add it back
if (source === currentNode.value) {
audioCache.set(key, source)
}
}
})
const loadAudio = async (track: Track, abortSignal?: AbortSignal) => {
if (audioCache.has(track.id)) {
return audioCache.get(track.id)
}
const sources = await useTrackSources(track, abortSignal)
if (!sources.length) return null
const audio = document.createElement('audio')
audio.preload = 'auto'
// @ts-expect-error Firefox doesn't yet support NetworkInformation
// without a `dom.netinfo.enabled` flag enabled
const type = navigator.connection?.effectiveType
const index = type === '2g' || type === '3g'
? sources.length - 1
// TODO: Quality picker - get audio quality from store
: 0
audio.src = sources[index].url
const source = context.createMediaElementSource(audio)
source.addEventListener('ended', ended)
audioCache.set(track.id, source)
return source
}
const ended = () => {
// Since pause() also emits ended event, we need to check if we're playing currently
if (playerState.playing) {
next()
}
}
const createMediaNode = async (track: Track) => {
// TODO (wvffle): Sync
const source = await preload(track)
if (!source) return null
source.connect(gainNode)
return source
}
const preloadControllers = shallowReactive(new Map())
const preload = (track: Track) => {
if (track && audioCache.has(track.id)) {
return audioCache.get(track.id)
}
const controller = new AbortController()
preloadControllers.set(track.id, controller)
const msg = `Preloading ${track.artist?.name ?? 'Unknown artist'} - ${track.title}`
logger.time(msg)
const promise = loadAudio(track, controller.signal).then(data => {
preloadControllers.delete(track.id)
logger.timeEnd(msg)
return data
})
return promise
}
const preloads = computed<Array<Track | undefined>>(() => {
const index = store.state.queue.currentIndex
const tracks = store.state.queue.tracks
const preloads = uniq([...Array(TO_PRELOAD).keys()].map(i => {
const preloadIndex = (index + i) % tracks.length
return tracks[preloadIndex]
}))
return preloads.length === 0
? [tracks[index - 1]]
: preloads
})
// Preloading handler
watchDebounced([
// on index change
() => store.state.queue.currentIndex,
// on new track
() => store.state.queue.tracks,
// on shuffle/unshuffle
() => store.state.queue.shuffleAbortController
], async () => {
const shouldPreload = preloads.value
// Abort requests we no longer need
for (const [id, controller] of preloadControllers.entries()) {
if (!shouldPreload.some(track => track?.id === id)) {
controller.abort()
logger.info(`Aborted loading track ${id}`)
}
}
// Preload new reqests synchronously
for (const track of shouldPreload) {
if (track && !preloadControllers.has(track.id)) {
await preload(track)
}
}
}, { immediate: true, debounce: 1000 })
const currentTrack = computedEager(() => store.state.queue.tracks[store.state.queue.currentIndex])
//
// Audio gain
//
const gainNode = context.createGain()
gainNode.connect(context.destination)
watchEffect(() => (gainNode.gain.value = toLinearVolumeScale(store.state.player.volume)))
const unmute = () => store.dispatch('player/unmute')
const mute = () => store.dispatch('player/mute')
const toggleMute = () => store.state.player.volume === 0
? unmute()
: mute()
//
// Audio playback
//
const currentNode = shallowRef<IMediaElementAudioSourceNode<IAudioContext> | null>(null)
const playerState = reactive({
playing: false,
startedAt: 0,
pausedAt: 0
})
const play = () => {
if (context.state === 'suspended') context.resume()
playerState.playing = true
}
const pause = () => {
playerState.playing = false
}
const stop = () => {
if (currentNode.value) {
progress.value = 0
stopNode(currentNode.value)
currentNode.value = null
playerState.playing = false
playerState.pausedAt = 0
}
}
const seek = (addTime: number) => {
if (currentNode.value) {
progress.value = Math.max(0, Math.min(100, progress.value + (addTime / duration.value) * 100))
}
}
const isLastTrack = computedEager(() => store.state.queue.currentIndex + 1 >= store.state.queue.tracks.length)
const willLoopQueue = computedEager(() => store.state.player.looping === LoopState.LOOP_QUEUE && isLastTrack.value)
const next = async () => {
// Looping queue
if (willLoopQueue.value) {
return store.dispatch('queue/currentIndex', 0)
}
// Pause if last
if (isLastTrack.value) {
progress.value = 0
// We need to wait for the first debounce tick
await nextTick()
// We need to wait for the play() to run after seeking to the beginning
await nextTick()
return pause()
}
// Play next track
if (playerState.pausedAt === 0) {
stop()
await store.dispatch('queue/currentIndex', store.state.queue.currentIndex + 1)
play()
}
}
const previous = async () => {
if (store.state.queue.currentIndex > 0 && time.value < 3) {
await store.dispatch('queue/currentIndex', store.state.queue.currentIndex - 1)
} else {
progress.value = 0
}
}
// Stop node, remove handlers and disconnect from gain node
const stopNode = (node: IMediaElementAudioSourceNode<IAudioContext> | null) => {
pauseProgress()
if (node === null) return
node.removeEventListener('ended', ended)
node.disconnect(gainNode)
}
const errored = ref(false)
// Play handler
watchDebounced([
() => playerState.playing,
currentTrack
], async () => {
if (playerState.playing && currentTrack.value) {
stopNode(currentNode.value)
currentNode.value = null
const source = await createMediaNode(currentTrack.value)
// Play request is aborted
if (source === false) return
// Play request errored
if (source === null) {
errored.value = true
return
}
// NOTE: We've now list reactivity tracking after the first await call
// if (playerState.pausedAt !== 0) {
// // Start from the paused moment
// source.start(0, playerState.pausedAt - playerState.startedAt)
// playerState.pausedAt = 0
// } else {
// // Start from the beginning
// source.start()
// playerState.startedAt = context.currentTime
// }
source.mediaElement.play()
currentNode.value = source
resumeProgress()
}
}, { debounce: 0 })
// Pause handler
watchEffect(() => {
if (!playerState.playing && currentTrack.value && currentNode.value) {
currentNode.value.mediaElement.pause()
pauseProgress()
}
})
// Looping handler
watchEffect(() => {
if (currentNode.value) {
currentNode.value.mediaElement.loop = store.state.player.looping === LoopState.LOOP_CURRENT
|| (store.state.player.looping === LoopState.LOOP_QUEUE && store.state.queue.tracks.length === 1)
}
})
// Progress getter and setter
const time = ref(0)
const duration = computedEager(() => currentNode.value?.mediaElement.duration ?? 0)
const progress = computed({
// Get progress
get: () => currentNode.value
? Math.min(time.value / duration.value * 100, 100)
: 0,
// Seek to percent
set: async (percent: number) => {
// Initialize track if we haven't already
if (!currentNode.value) {
await play()
await nextTick()
progress.value = percent
return
}
const time = percent / 100 * duration.value
pause()
playerState.startedAt = context.currentTime - time
playerState.pausedAt = context.currentTime
await nextTick()
play()
}
})
// Progress animation loop
const { resume: resumeProgress, pause: pauseProgress } = useRafFn(() => {
if (playerState.playing) {
time.value = context.currentTime - playerState.startedAt
return
}
time.value = 0
}, { immediate: false })
// Animation fix for looped tracks and track listened handler
const isListened = ref(false)
watchEffect(() => {
// When we are done but looping, reset startedAt
if (progress.value === 100 && currentNode.value?.mediaElement.loop) {
playerState.startedAt = context.currentTime
}
// If unathenticated, do not track track listenings
if (!store.state.auth.authenticated) return
// When we are half-way through, send track listened
if (progress.value > 50 && !isListened.value) {
isListened.value = true
return axios.post('history/listenings/', { track: currentTrack.value.id })
.catch((error) => logger.error('Could not record track in history', error))
}
// When we are before half-way through, reset listened state
if (currentNode.value && progress.value <= 50 && isListened.value) {
isListened.value = false
}
})
// Exports
export default () => ({
// Audio loading
preload,
// Audio gain
toggleMute,
unmute,
mute,
// Audio playback
play,
pause,
stop,
seek,
next,
previous,
errored,
time,
progress,
duration,
playing: computedEager(() => playerState.playing),
loading: computedEager(() => playerState.playing && currentTrack.value && !currentNode.value)
})

11
front/src/init/mediaSession.ts
View File

@ -2,15 +2,15 @@ import type { InitModule } from '~/types'
import { whenever } from '@vueuse/core' import { whenever } from '@vueuse/core'
import useQueue from '~/composables/audio/useQueue' import useQueue from '~/composables/audio/useQueue'
import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer' import usePlayer from '~/composables/audio/usePlayer'
export const install: InitModule = ({ app }) => { export const install: InitModule = ({ app }) => {
const { currentTrack } = useQueue() const { currentTrack, next, previous } = useQueue()
const { play, pause, seek, next, previous } = useWebAudioPlayer() const { resume, pause, seek } = usePlayer()
// Add controls for notification drawer // Add controls for notification drawer
if ('mediaSession' in navigator) { if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('play', play) navigator.mediaSession.setActionHandler('play', resume)
navigator.mediaSession.setActionHandler('pause', pause) navigator.mediaSession.setActionHandler('pause', pause)
navigator.mediaSession.setActionHandler('seekforward', () => seek(5)) navigator.mediaSession.setActionHandler('seekforward', () => seek(5))
navigator.mediaSession.setActionHandler('seekbackward', () => seek(-5)) navigator.mediaSession.setActionHandler('seekbackward', () => seek(-5))
@ -25,8 +25,7 @@ export const install: InitModule = ({ app }) => {
const metadata: MediaMetadataInit = { const metadata: MediaMetadataInit = {
title, title,
// TODO (wvffle): translate artist: artist.name
artist: artist?.name ?? 'Unknown artist'
} }
if (album?.cover) { if (album?.cover) {

68
front/src/store/index.ts
View File

@ -1,4 +1,3 @@
import type { Track } from '~/types'
import type { InjectionKey } from 'vue' import type { InjectionKey } from 'vue'
import type { State as FavoritesState } from './favorites' import type { State as FavoritesState } from './favorites'
import type { State as ChannelsState } from './channels' import type { State as ChannelsState } from './channels'
@ -40,39 +39,8 @@ export interface RootState {
player: PlayerState player: PlayerState
} }
// we keep only valuable fields to make the cache lighter and avoid
// cyclic value serialization errors
const trackReducer = (track: Track) => {
const artist = track.artist
? {
id: track.artist.id,
mbid: track.artist.mbid,
name: track.artist.name
}
: {}
return {
id: track.id,
title: track.title,
mbid: track.mbid,
uploads: track.uploads,
listen_url: track.listen_url,
artist,
album: track.album
? {
id: track.album.id,
title: track.album.title,
mbid: track.album.mbid,
cover: track.album.cover,
artist
}
: {}
}
}
export const key: InjectionKey<Store<RootState>> = Symbol('vuex state injection key') export const key: InjectionKey<Store<RootState>> = Symbol('vuex state injection key')
export default createStore<RootState>({ export default createStore<RootState>({
// TODO (wvffle): Use strict mode
modules: { modules: {
ui, ui,
auth, auth,
@ -128,16 +96,36 @@ export default createStore<RootState>({
return { return {
queue: { queue: {
currentIndex: state.queue.currentIndex, currentIndex: state.queue.currentIndex,
shuffleAbortController: state.queue.shuffleAbortController && null, tracks: state.queue.tracks.map((track: any) => {
tracks: state.queue.tracks.map(trackReducer), // we keep only valuable fields to make the cache lighter and avoid
unshuffled: state.queue.unshuffled.map(trackReducer) // cyclic value serialization errors
const artist = {
id: track.artist.id,
mbid: track.artist.mbid,
name: track.artist.name
}
const data = {
id: track.id,
title: track.title,
mbid: track.mbid,
uploads: track.uploads,
listen_url: track.listen_url,
artist,
album: {}
}
if (track.album) {
data.album = {
id: track.album.id,
title: track.album.title,
mbid: track.album.mbid,
cover: track.album.cover,
artist
}
}
return data
})
} }
} }
},
rehydrated: async (store) => {
if (store.state.queue.shuffleAbortController === null) {
await store.dispatch('queue/unshuffle', true)
}
} }
}) })
] ]

130
front/src/store/player.ts
View File

@ -1,13 +1,9 @@
import type { Module } from 'vuex' import type { Module } from 'vuex'
import type { RootState } from '~/store/index' import type { RootState } from '~/store/index'
import axios from 'axios'
import time from '~/utils/time' import time from '~/utils/time'
import useLogger from '~/composables/useLogger'
export enum LoopState {
NO_LOOP,
LOOP_CURRENT,
LOOP_QUEUE
}
export interface State { export interface State {
maxConsecutiveErrors: number maxConsecutiveErrors: number
@ -15,13 +11,16 @@ export interface State {
playing: boolean playing: boolean
isLoadingAudio: boolean isLoadingAudio: boolean
volume: number volume: number
lastVolume: number tempVolume: number
duration: number duration: number
currentTime: number currentTime: number
errored: boolean errored: boolean
looping: LoopState bufferProgress: number
looping: 0 | 1 | 2 // 0 -> no, 1 -> on track, 2 -> on queue
} }
const logger = useLogger()
const store: Module<State, RootState> = { const store: Module<State, RootState> = {
namespaced: true, namespaced: true,
state: { state: {
@ -30,25 +29,35 @@ const store: Module<State, RootState> = {
playing: false, playing: false,
isLoadingAudio: false, isLoadingAudio: false,
volume: 1, volume: 1,
lastVolume: 0.5, tempVolume: 0.5,
duration: 0, duration: 0,
currentTime: 0, currentTime: 0,
errored: false, errored: false,
looping: LoopState.NO_LOOP bufferProgress: 0,
looping: 0
}, },
mutations: { mutations: {
reset (state) { reset (state) {
state.errorCount = 0 state.errorCount = 0
state.playing = false state.playing = false
}, },
volume (state, value: number) { volume (state, value) {
state.volume = Math.min(Math.max(value, 0), 1) value = parseFloat(value)
value = Math.min(value, 1)
value = Math.max(value, 0)
state.volume = value
}, },
lastVolume (state, value: number) { tempVolume (state, value) {
state.lastVolume = Math.min(Math.max(value, 0), 1) value = parseFloat(value)
value = Math.min(value, 1)
value = Math.max(value, 0)
state.tempVolume = value
}, },
incrementVolume (state, value) { incrementVolume (state, value) {
state.volume = Math.min(Math.max(value, 0), 1) value = parseFloat(state.volume + value)
value = Math.min(value, 1)
value = Math.max(value, 0)
state.volume = value
}, },
incrementErrorCount (state) { incrementErrorCount (state) {
state.errorCount += 1 state.errorCount += 1
@ -65,23 +74,20 @@ const store: Module<State, RootState> = {
currentTime (state, value) { currentTime (state, value) {
state.currentTime = value state.currentTime = value
}, },
looping (state, value: LoopState) { looping (state, value) {
state.looping = value state.looping = value
}, },
playing (state, value) { playing (state, value) {
state.playing = value state.playing = value
}, },
bufferProgress (state, value) {
state.bufferProgress = value
},
toggleLooping (state) { toggleLooping (state) {
switch (state.looping) { if (state.looping > 1) {
case LoopState.NO_LOOP: state.looping = 0
state.looping = LoopState.LOOP_CURRENT } else {
break state.looping += 1
case LoopState.LOOP_CURRENT:
state.looping = LoopState.LOOP_QUEUE
break
case LoopState.LOOP_QUEUE:
state.looping = LoopState.NO_LOOP
break
} }
}, },
isLoadingAudio (state, value) { isLoadingAudio (state, value) {
@ -103,15 +109,83 @@ const store: Module<State, RootState> = {
incrementVolume ({ commit, state }, value) { incrementVolume ({ commit, state }, value) {
commit('volume', state.volume + value) commit('volume', state.volume + value)
}, },
stop ({ commit }) {
commit('errored', false)
commit('resetErrorCount')
},
togglePlayback ({ commit, state, dispatch }) {
commit('playing', !state.playing)
if (state.errored && state.errorCount < state.maxConsecutiveErrors) {
setTimeout(() => {
if (state.playing) {
dispatch('queue/next', null, { root: true })
}
}, 3000)
}
},
async resumePlayback ({ commit, state, dispatch }) {
commit('playing', true)
if (state.errored && state.errorCount < state.maxConsecutiveErrors) {
await new Promise(resolve => setTimeout(resolve, 3000))
if (state.playing) {
return dispatch('queue/next', null, { root: true })
}
}
},
pausePlayback ({ commit }) {
commit('playing', false)
},
toggleMute ({ commit, state }) {
if (state.volume > 0) {
commit('tempVolume', state.volume)
commit('volume', 0)
} else {
commit('volume', state.tempVolume)
}
},
trackListened ({ rootState }, track) {
if (!rootState.auth.authenticated) {
return
}
return axios.post('history/listenings/', { track: track.id }).catch((error) => {
logger.error('Could not record track in history', error)
})
},
trackEnded ({ commit, dispatch, rootState }) {
const queueState = rootState.queue
if (queueState.currentIndex === queueState.tracks.length - 1) {
// we've reached last track of queue, trigger a reload
// from radio if any
dispatch('radios/populateQueue', null, { root: true })
}
dispatch('queue/next', null, { root: true })
if (queueState.ended) {
// Reset playback
commit('playing', false)
dispatch('updateProgress', 0)
}
},
trackErrored ({ commit, dispatch, state }) {
commit('errored', true)
commit('incrementErrorCount')
if (state.errorCount < state.maxConsecutiveErrors) {
setTimeout(() => {
if (state.playing) {
dispatch('queue/next', null, { root: true })
}
}, 3000)
}
},
updateProgress ({ commit }, t) { updateProgress ({ commit }, t) {
commit('currentTime', t) commit('currentTime', t)
}, },
mute ({ commit, state }) { mute ({ commit, state }) {
commit('lastVolume', state.volume) commit('tempVolume', state.volume)
commit('volume', 0) commit('volume', 0)
}, },
unmute ({ commit, state }) { unmute ({ commit, state }) {
commit('volume', state.lastVolume) commit('volume', state.tempVolume)
} }
} }
} }

211
front/src/store/queue.ts
View File

@ -2,99 +2,38 @@ import type { Module } from 'vuex'
import type { RootState } from '~/store/index' import type { RootState } from '~/store/index'
import type { Track } from '~/types' import type { Track } from '~/types'
import { shuffle, chunk } from 'lodash-es' import { shuffle } from 'lodash-es'
import useLogger from '~/composables/useLogger' import useLogger from '~/composables/useLogger'
const CHUNK_SIZE = 50
export interface State { export interface State {
tracks: Track[] tracks: Track[]
unshuffled: Track[]
// NOTE: It's null when we are rehydrated from local storage
// and we were mid-shuffling before
shuffleAbortController?: AbortController | null
currentIndex: number currentIndex: number
ended: boolean
} }
const logger = useLogger() const logger = useLogger()
// Load useWebAudioPlayer dynamically to avoid vuex not initialized issues
const useWebAudioPlayer = async () => {
const { default: useWebAudioPlayer } = await import('~/composables/audio/useWebAudioPlayer')
return useWebAudioPlayer()
}
interface DeferredAppendOptions {
signal?: AbortSignal
mapChunk?: (chunk: Track[]) => Track[]
mapChunks?: (chunk: Track[][]) => Track[][]
afterChunk?: (i: number, chunk: Track[]) => Promise<void> | void
}
const deferredAppend = async (from: Track[], to: Track[], options: DeferredAppendOptions = {}) => {
const {
mapChunk = (i) => i,
mapChunks = (i) => i,
afterChunk = () => {}
} = options
const chunks = mapChunks(chunk(from, CHUNK_SIZE))
const firstChunk = mapChunk(chunks[0])
if (!firstChunk) return
to.push(...firstChunk)
await afterChunk(0, firstChunk)
for (let i = 1; i < chunks.length; i++) {
// Break if we have aborted
if (options.signal?.aborted) {
break
}
const chunk = mapChunk(chunks[i])
await new Promise<void>(resolve => {
requestAnimationFrame(async () => {
// Break before modyfing the array, if we have aborted
if (options.signal?.aborted) {
return resolve()
}
to.push(...chunk)
await afterChunk(0, chunk)
return resolve()
})
})
}
}
const store: Module<State, RootState> = { const store: Module<State, RootState> = {
namespaced: true, namespaced: true,
state: { state: {
tracks: [], tracks: [],
unshuffled: [], currentIndex: -1,
currentIndex: -1 ended: true
}, },
mutations: { mutations: {
reset (state) { reset (state) {
state.tracks.length = 0 state.tracks.length = 0
state.unshuffled.length = 0
state.currentIndex = -1 state.currentIndex = -1
state.ended = true
}, },
currentIndex (state, value) { currentIndex (state, value) {
state.currentIndex = value state.currentIndex = value
}, },
splice (state, { start, size, items = [] }) { ended (state, value) {
state.tracks.splice(start, size, ...items) state.ended = value
}, },
push (state, { items = [], to = state.tracks }) { splice (state, { start, size }) {
to.push(...items) state.tracks.splice(start, size)
},
clean (state, array = state.tracks) {
array.length = 0
},
controller (state, controller: AbortController | undefined) {
state.shuffleAbortController = controller
}, },
tracks (state, value) { tracks (state, value) {
state.tracks = value state.tracks = value
@ -139,7 +78,7 @@ const store: Module<State, RootState> = {
return dispatch('appendMany', { tracks: [track], index }) return dispatch('appendMany', { tracks: [track], index })
}, },
async appendMany ({ commit, state }, { tracks, index = state.tracks.length }) { appendMany ({ state, dispatch }, { tracks, index = state.tracks.length }) {
logger.info( logger.info(
'Enqueueing tracks', 'Enqueueing tracks',
tracks.map((track: Track) => [track.artist?.name, track.title].join(' - ')) tracks.map((track: Track) => [track.artist?.name, track.title].join(' - '))
@ -153,37 +92,31 @@ const store: Module<State, RootState> = {
if (index >= state.tracks.length) { if (index >= state.tracks.length) {
// we simply push to the end // we simply push to the end
commit('push', { items: tracks }) state.tracks.push(...tracks)
} else { } else {
// we insert the track at given position // we insert the track at given position
commit('splice', { start: index, size: 0, items: tracks }) state.tracks.splice(index, 0, ...tracks)
}
// If the queue is shuffled, push back to the original queue
if (state.unshuffled.length) {
commit('push', { items: tracks, to: state.unshuffled })
} }
if (shouldPlay) { if (shouldPlay) {
const { play } = await useWebAudioPlayer() return dispatch('next')
return play()
} }
}, },
async cleanTrack ({ state, dispatch, commit }, index) { cleanTrack ({ state, dispatch, commit }, index) {
const { stop, play } = await useWebAudioPlayer() // are we removing current playin track
// are we removing currently playing track
const current = index === state.currentIndex const current = index === state.currentIndex
if (current) stop()
if (current) {
dispatch('player/stop', null, { root: true })
}
commit('splice', { start: index, size: 1 }) commit('splice', { start: index, size: 1 })
if (index < state.currentIndex) { if (index < state.currentIndex) {
commit('currentIndex', state.currentIndex - 1) commit('currentIndex', state.currentIndex - 1)
} else if (index > 0 && index === state.tracks.length && current) { } else if (index > 0 && index === state.tracks.length && current) {
// If you delete the last track of the queue while it's // kind of a edge case: if you delete the last track of the queue
// playing we set current index to the previous one to // while it's playing we set current index to the previous one to
// avoid the queue tab from being stuck because the player // avoid the queue tab from being stuck because the player
// disappeared cf #1092 // disappeared cf #1092
commit('currentIndex', state.tracks.length - 1) commit('currentIndex', state.tracks.length - 1)
@ -192,87 +125,57 @@ const store: Module<State, RootState> = {
commit('currentIndex', index) commit('currentIndex', index)
} }
if (state.tracks.length > state.currentIndex) {
play()
}
if (state.currentIndex + 1 === state.tracks.length) { if (state.currentIndex + 1 === state.tracks.length) {
return dispatch('radios/populateQueue', null, { root: true }) dispatch('radios/populateQueue', null, { root: true })
} }
}, },
previous ({ state, dispatch, rootState }) {
if (state.currentIndex > 0 && rootState.player.currentTime < 3) {
dispatch('currentIndex', state.currentIndex - 1)
} else {
dispatch('currentIndex', state.currentIndex)
}
},
next ({ state, dispatch, commit, rootState }) {
if (rootState.player.looping === 2 && state.currentIndex >= state.tracks.length - 1) {
logger.info('Going back to the beginning of the queue')
return dispatch('currentIndex', 0)
} else {
if (state.currentIndex < state.tracks.length - 1) {
logger.debug('Playing next track')
return dispatch('currentIndex', state.currentIndex + 1)
} else {
commit('ended', true)
}
}
},
last ({ state, dispatch }) { last ({ state, dispatch }) {
return dispatch('currentIndex', state.tracks.length - 1) return dispatch('currentIndex', state.tracks.length - 1)
}, },
async currentIndex ({ commit, state, rootState, dispatch }, index) { currentIndex ({ commit, state, rootState, dispatch }, index) {
commit('ended', false)
commit('player/currentTime', 0, { root: true })
commit('currentIndex', index) commit('currentIndex', index)
// TODO (wvffle): Move to useRadio if (state.tracks.length - index <= 2 && rootState.radios.running) {
if (index === state.tracks.length - 1 && rootState.radios.running) {
return dispatch('radios/populateQueue', null, { root: true }) return dispatch('radios/populateQueue', null, { root: true })
} }
}, },
async clean ({ dispatch, state }) { clean ({ dispatch, commit, state }) {
const { stop } = await useWebAudioPlayer() dispatch('radios/stop', null, { root: true })
stop() dispatch('player/stop', null, { root: true })
await dispatch('radios/stop', null, { root: true })
state.tracks.length = 0 state.tracks.length = 0
state.unshuffled.length = 0 dispatch('currentIndex', -1)
state.shuffleAbortController = undefined // so we replay automatically on next track append
await dispatch('currentIndex', -1) commit('ended', true)
}, },
async shuffle ({ dispatch, state }) {
const shuffled = shuffle(state.tracks)
state.tracks.length = 0
async shuffle ({ commit, dispatch, state }) { await dispatch('appendMany', { tracks: shuffled })
const { play, stop } = await useWebAudioPlayer() await dispatch('currentIndex', 0)
stop()
logger.time('Shuffling')
const abortController = new AbortController()
commit('controller', abortController)
// This should be rather quick, as it doesn't re-render the UI
commit('clean', state.unshuffled)
commit('push', { items: state.tracks, to: state.unshuffled })
commit('clean')
await deferredAppend(state.unshuffled, state.tracks, {
signal: abortController.signal,
mapChunk: shuffle,
mapChunks: shuffle,
async afterChunk (i) {
if (i === 0) {
await dispatch('currentIndex', 0)
play()
}
}
})
commit('controller', undefined)
logger.timeEnd('Shuffling')
},
async unshuffle ({ commit, dispatch, state }, rehydration = false) {
const { play, stop } = await useWebAudioPlayer()
stop()
state.shuffleAbortController?.abort()
const abortController = new AbortController()
commit('controller', abortController)
commit('clean')
await deferredAppend(state.unshuffled, state.tracks, {
signal: abortController.signal,
async afterChunk (i) {
if (i === 0 && !rehydration) {
await dispatch('currentIndex', 0)
play()
}
}
})
commit('clean', state.unshuffled)
commit('controller', undefined)
} }
} }
} }

26
front/yarn.lock
View File

@ -908,7 +908,7 @@
"@babel/types" "^7.4.4" "@babel/types" "^7.4.4"
esutils "^2.0.2" esutils "^2.0.2"
"@babel/runtime@^7.11.2", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4": "@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
version "7.19.0" version "7.19.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA== integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
@ -2635,14 +2635,6 @@ atob@^2.1.2:
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
automation-events@^4.0.20:
version "4.0.20"
resolved "https://registry.yarnpkg.com/automation-events/-/automation-events-4.0.20.tgz#a103d322db98b9999d04b44a3cf276539a88cc37"
integrity sha512-ALTOLrB4vTyXOsLPia8OKM1qZKtlsGC+3VDe3jcCGUpvgKTbqlzvaJU3HqDhU6jlVEMMBqT01XZv3K/3Z5g29w==
dependencies:
"@babel/runtime" "^7.18.9"
tslib "^2.4.0"
axios-auth-refresh@3.3.3: axios-auth-refresh@3.3.3:
version "3.3.3" version "3.3.3"
resolved "https://registry.yarnpkg.com/axios-auth-refresh/-/axios-auth-refresh-3.3.3.tgz#f8c2fd0ca3adf89168dfb0caff10f076499ea482" resolved "https://registry.yarnpkg.com/axios-auth-refresh/-/axios-auth-refresh-3.3.3.tgz#f8c2fd0ca3adf89168dfb0caff10f076499ea482"
@ -5502,11 +5494,6 @@ lru-cache@^6.0.0:
dependencies: dependencies:
yallist "^4.0.0" yallist "^4.0.0"
lru-cache@^7.13.1:
version "7.14.0"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.14.0.tgz#21be64954a4680e303a09e9468f880b98a0b3c7f"
integrity sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==
magic-string@^0.25.0, magic-string@^0.25.7: magic-string@^0.25.0, magic-string@^0.25.7:
version "0.25.9" version "0.25.9"
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c" resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@ -6657,15 +6644,6 @@ stack-utils@^2.0.3:
dependencies: dependencies:
escape-string-regexp "^2.0.0" escape-string-regexp "^2.0.0"
standardized-audio-context@^25.3.29:
version "25.3.29"
resolved "https://registry.yarnpkg.com/standardized-audio-context/-/standardized-audio-context-25.3.29.tgz#4f1948a3903323bb831b8c7129bed9320e500be5"
integrity sha512-5RqrvuaphiR3W2t8nd8PRBhQKXTTf0gHu8I0BukH3A11C9ZHQQmeE9WywBe68TcYBj9DCm42db8OWTw1PluLUA==
dependencies:
"@babel/runtime" "^7.18.9"
automation-events "^4.0.20"
tslib "^2.4.0"
string-length@^4.0.1: string-length@^4.0.1:
version "4.0.2" version "4.0.2"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a" resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
@ -6965,7 +6943,7 @@ tslib@^1.8.1, tslib@^1.9.3:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.3.1, tslib@^2.4.0: tslib@^2.3.1:
version "2.4.0" version "2.4.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==