koel/resources/assets/js/components/utils/hotkeys.vue

<template>
  <GlobalEvents
    @keydown.space="togglePlayback"
    @keydown.j="playNext"
    @keydown.k="playPrev"
    @keydown.f="search"
    @keydown.l="toggleLike"
    @keydown.176="playPrev"
    @keydown.177="playNext"
    @keydown.179="togglePlayback"
  />
</template>

<script lang="ts" setup>
import { GlobalEvents } from 'vue-global-events'
import { $, eventBus } from '@/utils'
import { playback, socket } from '@/services'
import { favoriteStore, queueStore, songStore } from '@/stores'

const togglePlayback = (e: KeyboardEvent) => {
  if (
    !(e.target instanceof Document) &&
    $.is(e.target as Element, 'input, textarea, button, select') &&
    !$.is(e.target as Element, 'input[type=range]')
  ) {
    return true
  }

  e.preventDefault()
  playback.toggle()

  return false
}

/**
 * Play the previous song when user presses K.
 */
const playPrev = (e: KeyboardEvent) => {
  if (!(e.target instanceof Document) && $.is(e.target as Element, 'input, select, textarea')) {
    return true
  }

  e.preventDefault()
  playback.playPrev()

  return false
}

/**
 * Play the next song when user presses J.
 */
const playNext = (e: KeyboardEvent) => {
  if (!(e.target instanceof Document) && $.is(e.target as Element, 'input, select, textarea')) {
    return true
  }

  e.preventDefault()
  playback.playNext()

  return false
}

/**
 * Put focus into the search field when user presses F.
 */
const search = (e: KeyboardEvent) => {
  if (
    !(e.target instanceof Document) &&
    ($.is(e.target as Element, 'input, select, textarea') && !$.is(e.target as Element, 'input[type=range]'))
  ) {
    return true
  }

  if (e.metaKey || e.ctrlKey) {
    return true
  }

  e.preventDefault()
  eventBus.emit('FOCUS_SEARCH_FIELD')

  return false
}

/**
 * Like/unlike the current song when use presses L.
 */
const toggleLike = (e: KeyboardEvent) => {
  if (!(e.target instanceof Document) && $.is(e.target as Element, 'input, select, textarea')) {
    return true
  }

  if (!queueStore.current) {
    return false
  }

  favoriteStore.toggleOne(queueStore.current)
  socket.broadcast('SOCKET_SONG', songStore.generateDataToBroadcast(queueStore.current))

  return false
}
</script>