107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
import { useUiStore } from '~/store/ui'
|
|
import { usePlayerStore } from '~/store/player'
|
|
import { onBeforeUnmount, onUnmounted, onMounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useDataStore } from '~/store/data'
|
|
|
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
// Ne s'exécuter que côté client
|
|
if (process.server) return
|
|
|
|
const ui = useUiStore()
|
|
const player = usePlayerStore()
|
|
const route = useRoute()
|
|
const dataStore = useDataStore()
|
|
|
|
function isInputElement(target: EventTarget | null): boolean {
|
|
return (
|
|
target instanceof HTMLInputElement ||
|
|
target instanceof HTMLTextAreaElement ||
|
|
target instanceof HTMLSelectElement ||
|
|
(target instanceof HTMLElement && target.isContentEditable)
|
|
)
|
|
}
|
|
|
|
function handleKeyDown(e: KeyboardEvent) {
|
|
console.log('Key pressed:', e.code, 'Key:', e.key, 'Target:', e.target)
|
|
|
|
// Ne pas interférer avec les champs de formulaire
|
|
if (isInputElement(e.target as HTMLElement)) {
|
|
console.log('Input element, ignoring key')
|
|
return
|
|
}
|
|
|
|
// Gestion du raccourci de recherche (Ctrl+F / Cmd+F)
|
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'f') {
|
|
e.preventDefault()
|
|
if (!ui.showSearch) {
|
|
ui.openSearch()
|
|
}
|
|
return
|
|
}
|
|
|
|
// Gestion des autres touches uniquement si pas de touche de contrôle enfoncée
|
|
if (e.ctrlKey || e.altKey || e.metaKey) {
|
|
return
|
|
}
|
|
|
|
switch (e.code) {
|
|
// Gestion de la barre d'espace pour play/pause
|
|
case 'Space':
|
|
console.log('Space pressed, toggling play/pause')
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
if (player.currentTrack) {
|
|
console.log('Toggling play state')
|
|
player.togglePlay()
|
|
} else {
|
|
console.log('No current track to play/pause')
|
|
}
|
|
return false
|
|
|
|
// Gestion de la touche Échap pour fermer la boîte
|
|
case 'Escape':
|
|
e.preventDefault()
|
|
ui.closeBox()
|
|
break
|
|
|
|
// Gestion de la touche Entrée pour ouvrir une boîte
|
|
case 'Enter':
|
|
if (document.activeElement?.id) {
|
|
e.preventDefault()
|
|
ui.selectBox(document.activeElement.id)
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
break
|
|
|
|
// Gestion des touches fléchées (à implémenter si nécessaire)
|
|
case 'ArrowUp':
|
|
case 'ArrowDown':
|
|
case 'ArrowLeft':
|
|
case 'ArrowRight':
|
|
// Implémentation future de la navigation au clavier
|
|
break
|
|
}
|
|
}
|
|
|
|
// Ajout de l'écouteur d'événements avec capture pour intercepter l'événement plus tôt
|
|
window.addEventListener('keydown', handleKeyDown, { capture: true, passive: false })
|
|
console.log('Keyboard event listener added')
|
|
|
|
// Nettoyage lors de la destruction
|
|
const stop = () => {
|
|
window.removeEventListener('keydown', handleKeyDown)
|
|
}
|
|
|
|
// Nettoyage quand le composant est démonté
|
|
onUnmounted(stop)
|
|
|
|
// Nettoyage quand la page est déchargée
|
|
if (process.client) {
|
|
window.addEventListener('unload', stop)
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('unload', stop)
|
|
})
|
|
}
|
|
})
|