add key bind / to search

src/components/BrtPlayer.vue

@@ -1657,12 +1657,12 @@ function skipOpening() {
     ))
   )
 }
+import {checkContentEditable} from "src/helpers/checkContentEditable"
 useEventListener(window, "keydown", (event: KeyboardEvent) => {
   switch (event.code) {
     case "Space": {
       if (
-        (event.target as HTMLElement | undefined)?.nodeName !== "TEXTAREA" &&
-        (event.target as HTMLElement | undefined)?.nodeName !== "INPUT"
+      !checkContentEditable(event.target as HTMLElement | null)
       )
         event.preventDefault()
       const playing = artPlaying.value

src/helpers/checkContentEditable.ts

@@ -0,0 +1,8 @@
+
+const tags = ["INPUT", "TEXTAREA"]
+
+export function checkContentEditable (el?: HTMLElement | null): boolean {
+  if (!el) return false
+
+  return tags.includes(el.tagName)
+}

src/layouts/MainLayout.vue

@@ -38,6 +38,7 @@
             @focus="focusing = true"
             @blur="focusing = false"
             @keydown.stop
+            ref="inputSearchRef"
           >
             <template v-slot:append>
               <q-separator vertical inset class="bg-[rgba(153,153,153,0.3)]" />
@@ -1102,6 +1103,20 @@ const tabMenuAccountActive = ref<"normal" | "locale" | "setting">("normal")
 watch(showMenuAccount, (val) => {
   if (val) tabMenuAccountActive.value = "normal"
 })
+
+// key bind
+import { useEventListener } from "@vueuse/core"
+import {checkContentEditable } from "src/helpers/checkContentEditable"
+
+const inputSearchRef = ref<QInput>()
+useEventListener(window, "keypress", event => {
+  if (checkContentEditable(document.activeElement)) return
+
+  if (event.code === 'Slash') {
+    event.preventDefault()
+    inputSearchRef.value?.focus()
+  }
+})
 </script>
 
 <style lang="scss">