mindboost-rnbo-test-project/composables/useArtWorkManager.js

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
  }
}