134 lines
4.7 KiB
JavaScript
134 lines
4.7 KiB
JavaScript
import { useAudioStore } from '~/stores/audio'
|
|
import { useUserStore } from '~/stores/user'
|
|
import { getSoundcapeList } from '~/tracks.config'
|
|
|
|
/**
|
|
* The useArtWorkManager composable is used to provide an update to
|
|
* the mediaSession of the navigator. This is relevant whenever
|
|
* the soundscape of the user changes.
|
|
*
|
|
* If Soundscapes are played, the soundscape should be shown.
|
|
* If MusicMode is selected (so no Soundscape is playing), a Noise media Session is shown.
|
|
*
|
|
* @returns useArtWorkManager: Set of functions.
|
|
*/
|
|
|
|
export const useArtWorkManager = () => {
|
|
let dummyAudio = null
|
|
// State Management
|
|
const currentSoundscape = ref(() => useUserStore().user.settings.soundscape || 'Forest')
|
|
const playing = ref(() => useAudioStore().playing)
|
|
const musicMode = ref(() => useUserStore().soundMode)
|
|
|
|
// Helper functions
|
|
/**
|
|
* Easily access the next soundscape in the playlist to update the media meta data.
|
|
* @returns soundscape title as string
|
|
*/
|
|
|
|
const createAudioTag = () => {
|
|
if (!dummyAudio) {
|
|
dummyAudio = new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU2LjM2LjEwMAAAAAAAAAAAAAAA//OEAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAAEAAABIADAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV6urq6urq6urq6urq6urq6urq6urq6urq6v////////////////////////////////8AAAAATGF2YzU2LjQxAAAAAAAAAAAAAAAAJAAAAAAAAAAAASDs90hvAAAAAAAAAAAAAAAAAAAA//MUZAAAAAGkAAAAAAAAA0gAAAAATEFN//MUZAMAAAGkAAAAAAAAA0gAAAAARTMu//MUZAYAAAGkAAAAAAAAA0gAAAAAOTku//MUZAkAAAGkAAAAAAAAA0gAAAAANVVV')
|
|
dummyAudio.loop = true
|
|
dummyAudio.playbackRate = 0.25
|
|
dummyAudio.muted = true
|
|
dummyAudio.preload = 'auto'
|
|
dummyAudio.controls = true // oder true für Debug
|
|
dummyAudio.id = 'dummy-audio'
|
|
dummyAudio.setAttribute('data-role', 'media-session-dummy')
|
|
document.body.appendChild(dummyAudio)
|
|
|
|
// Versuche zu spielen, nur nach Nutzerinteraktion e.g. click)
|
|
dummyAudio.play().catch((err) => {
|
|
useNuxtApp().$logger.warn('[MediaSession] DummyAudio konnte nicht starten', err)
|
|
})
|
|
}
|
|
}
|
|
|
|
const getNextSoundscape = () => {
|
|
const list = getSoundcapeList()
|
|
const current = currentSoundscape.value
|
|
const index = list.indexOf(current)
|
|
return list[(index + 1) % list.length]
|
|
}
|
|
const getPreviousSoundscape = () => {
|
|
const list = getSoundcapeList()
|
|
const current = currentSoundscape.value
|
|
const index = list.indexOf(current)
|
|
return list[(index - 1) % list.length]
|
|
}
|
|
|
|
const addMusicArtWork = (scenery = 'Calm Speech Blocker') => {
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
|
title: scenery,
|
|
artist: 'mindboost',
|
|
album: 'mindboost focus soundscapes',
|
|
artwork: [
|
|
{ src: '/images/scenery/' + scenery + '.svg', sizes: '512x512', type: 'image/svg' }
|
|
]
|
|
})
|
|
navigator.mediaSession.playbackState = !playing.value ? 'paused' : 'playing'
|
|
}
|
|
}
|
|
|
|
const addNoiseArtWork = () => {
|
|
createAudioTag()
|
|
if ('mediaSession' in navigator) {
|
|
const pathKlein = window.location.origin + '/images/scenery/noise_artwork_1024.jpg'
|
|
const pathGross = window.location.origin + '/images/scenery/noise_artwork_512.jpg'
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
|
title: 'Calm Speech Blocker',
|
|
artist: 'mindboost',
|
|
album: 'get your focus',
|
|
artwork: [
|
|
{ src: pathKlein, sizes: '1024x1024', type: 'image/jpeg' },
|
|
{ src: pathGross, sizes: '512x512', type: 'image/jpeg' }
|
|
]
|
|
})
|
|
navigator.mediaSession.playbackState = !playing.value ? 'paused' : 'playing'
|
|
}
|
|
}
|
|
|
|
// Watcher for changes of the currentSoundscape
|
|
watch(currentSoundscape.value, (newVal, oldVal) => {
|
|
if (newVal !== oldVal) {
|
|
if (musicMode.value === 'music') {
|
|
// Noise Placeholder will be shown
|
|
addNoiseArtWork()
|
|
}
|
|
if (musicMode.value === 'soundscape') {
|
|
// Soundscape Media will be shown
|
|
addMusicArtWork(newVal)
|
|
}
|
|
}
|
|
}, { immediate: true })
|
|
|
|
watch(musicMode.value, (newVal, oldVal) => {
|
|
if (newVal !== oldVal) {
|
|
if (newVal === 'music') {
|
|
// Noise Placeholder will be shown
|
|
addNoiseArtWork()
|
|
}
|
|
if (newVal === 'soundscape') {
|
|
// Soundscape Media will be shown
|
|
addMusicArtWork(newVal)
|
|
}
|
|
}
|
|
}, { immediate: true })
|
|
|
|
watch(playing.value, (newVal) => {
|
|
if (newVal) {
|
|
if (musicMode.value === 'music') { addNoiseArtWork() }
|
|
if (musicMode.value === 'soundscape') { addMusicArtWork() }
|
|
}
|
|
}, { immediate: true })
|
|
|
|
return {
|
|
addMusicArtWork,
|
|
addNoiseArtWork,
|
|
getNextSoundscape,
|
|
getPreviousSoundscape
|
|
}
|
|
}
|