mindboost-rnbo-test-project/archive/AudioStateHandler.vue

67 lines
2.0 KiB
Vue

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