67 lines
2.0 KiB
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>
|