Initial commit

composables/useArtWorkManager.js

@@ -0,0 +1,133 @@
+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
+  }
+}