Initial commit

components/experiments/statemanagement/NavigatorPlayHandler.vue

@@ -0,0 +1,56 @@
+<template>
+  <h1>hell yeah</h1>
+  <div @click="newDummyAudio"> NEW AUDIO</div>
+  <div @click="showArtWork">SHOW ARTWORK</div>
+  <div @click="play">PLAY</div>
+</template>
+
+<script  lang="ts" setup>
+import { watch, onMounted } from 'vue'
+import { useAudioStore, ensureAudio } from '~/stores/audio'
+
+const createAudioTag = () => {
+  const newDummyAudio = new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU2LjM2LjEwMAAAAAAAAAAAAAAA//OEAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAAEAAABIADAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV6urq6urq6urq6urq6urq6urq6urq6urq6v////////////////////////////////8AAAAATGF2YzU2LjQxAAAAAAAAAAAAAAAAJAAAAAAAAAAAASDs90hvAAAAAAAAAAAAAAAAAAAA//MUZAAAAAGkAAAAAAAAA0gAAAAATEFN//MUZAMAAAGkAAAAAAAAA0gAAAAARTMu//MUZAYAAAGkAAAAAAAAA0gAAAAAOTku//MUZAkAAAGkAAAAAAAAA0gAAAAANVVV')
+  newDummyAudio.loop = true
+  newDummyAudio.controls = true
+  newDummyAudio.muted = true
+  newDummyAudio.play()
+}
+
+const play = (state) => {
+  const audio = newDummyAudio()
+  if (state) {
+    audio.play().catch(() => {})
+  }
+}
+
+const showArtWork = () => {
+  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 = null
+  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' }
+    ]
+  })
+}
+
+watch(
+  () => useAudioStore().getPlaying,
+  (newVal) => {
+  },
+  { immediate: true }
+)
+
+// Media Session Setup separat
+onMounted(async () => {
+  const playState = useAudioStore().getPlaying
+  await ensureAudio
+  createAudioTag()
+  showArtWork()
+})
+</script>