Initial commit

archive/AudioStateHandler.vue

@@ -0,0 +1,66 @@
+<template>
+  <div v-if="false">AudioStateHandler</div>
+</template>
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAudioStore } from '~/stores/audio'
+
+export default {
+  name: 'AudioStateHandler',
+
+  computed: {
+    ...mapState(useAudioStore, ['playing'])
+  },
+
+  watch: {
+    playing (newValue) {
+      this.$logger.log('Global playing state changed', newValue)
+    }
+  },
+
+  mounted () {
+    window.addEventListener('keydown', this.handleKeyDown)
+    this.$logger.log('Global audio state handler mounted')
+
+    // Set up MediaSession API
+    if ('mediaSession' in navigator) {
+      navigator.mediaSession.setActionHandler('play', () => this.setPlaying(true))
+      navigator.mediaSession.setActionHandler('pause', () => this.setPlaying(false))
+    }
+  },
+
+  beforeUnmount () {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  },
+
+  methods: {
+    ...mapActions(useAudioStore, ['setPlaying'])
+    /** handleKeyDown (e) {
+      const activeElement = document.activeElement
+      const tagName = activeElement.tagName.toLowerCase()
+
+      // List of elements where spacebar interaction should be preserved
+      const interactiveElements = [
+        'input', 'textarea', 'button', 'select', 'option',
+        'video', 'audio', 'a', 'summary'
+      ]
+
+      // Check for contenteditable attribute
+      const isContentEditable = activeElement.getAttribute('contenteditable') === 'true'
+
+      // Check for custom data attribute that might indicate spacebar interaction
+      const usesSpacebar = activeElement.getAttribute('data-uses-spacebar') === 'true'
+
+      if (e.code === 'Space' &&
+          !interactiveElements.includes(tagName) &&
+          !isContentEditable &&
+          !usesSpacebar) {
+        this.$logger.log('Space key pressed in AudioStateHandler')
+        e.preventDefault() // Prevent the default action (scrolling)
+        this.setPlaying(!this.playing)
+        this.$logger.log('New playing state:', this.playing)
+      }
+    } */
+  }
+}
+</script>