From 33531fb3bf2628d5c5c79d43e0e37b543c9384e1 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Fri, 18 Jul 2025 07:37:12 +0600 Subject: feat: implement keybindings listener and disabler composables in use-keybindings hook --- apps/web/src/hooks/use-keybindings.ts | 76 +++++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 apps/web/src/hooks/use-keybindings.ts (limited to 'apps/web/src/hooks/use-keybindings.ts') diff --git a/apps/web/src/hooks/use-keybindings.ts b/apps/web/src/hooks/use-keybindings.ts new file mode 100644 index 00000000..6c7c0d06 --- /dev/null +++ b/apps/web/src/hooks/use-keybindings.ts @@ -0,0 +1,76 @@ +import { useEffect } from "react"; +import { ActionWithOptionalArgs, invokeAction } from "../constants/actions"; +import { useKeybindingsStore } from "@/stores/keybindings-store"; + +/** + * This variable keeps track whether keybindings are being accepted + * true -> Keybindings are checked + * false -> Key presses are ignored (Keybindings are not checked) + */ +let keybindingsEnabled = true; + +/** + * A composable that hooks to the caller component's + * lifecycle and hooks to the keyboard events to fire + * the appropriate actions based on keybindings + */ +export function useKeybindingsListener() { + const { keybindings, getKeybindingString } = useKeybindingsStore(); + + useEffect(() => { + const handleKeyDown = (ev: KeyboardEvent) => { + // Do not check keybinds if the mode is disabled + if (!keybindingsEnabled) return; + + const binding = getKeybindingString(ev); + if (!binding) return; + + const boundAction = keybindings[binding]; + if (!boundAction) return; + + ev.preventDefault(); + + // Handle actions with default arguments + let actionArgs: any = undefined; + + if (boundAction === "seek-forward") { + actionArgs = { seconds: 1 }; + } else if (boundAction === "seek-backward") { + actionArgs = { seconds: 1 }; + } else if (boundAction === "jump-forward") { + actionArgs = { seconds: 5 }; + } else if (boundAction === "jump-backward") { + actionArgs = { seconds: 5 }; + } + + invokeAction(boundAction, actionArgs, "keypress"); + }; + + document.addEventListener("keydown", handleKeyDown); + + return () => { + document.removeEventListener("keydown", handleKeyDown); + }; + }, [keybindings, getKeybindingString]); +} + +/** + * This composable allows for the UI component to be disabled if the component in question is mounted + */ +export function useKeybindingDisabler() { + const disableKeybindings = () => { + keybindingsEnabled = false; + }; + + const enableKeybindings = () => { + keybindingsEnabled = true; + }; + + return { + disableKeybindings, + enableKeybindings, + }; +} + +// Export the bindings for backward compatibility +export const bindings = {}; -- cgit v1.3.1 From 8e4661951d214f917357caef9d2895f2a4f7eb1e Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Fri, 18 Jul 2025 08:05:02 +0600 Subject: feat: enhance keybinding management by integrating keybindingsEnabled state and updating related hooks --- apps/web/src/hooks/use-keybindings.ts | 22 +++++----------------- apps/web/src/stores/keybindings-store.ts | 12 ++++++++++++ 2 files changed, 17 insertions(+), 17 deletions(-) (limited to 'apps/web/src/hooks/use-keybindings.ts') diff --git a/apps/web/src/hooks/use-keybindings.ts b/apps/web/src/hooks/use-keybindings.ts index 6c7c0d06..7887f3f1 100644 --- a/apps/web/src/hooks/use-keybindings.ts +++ b/apps/web/src/hooks/use-keybindings.ts @@ -1,21 +1,15 @@ import { useEffect } from "react"; -import { ActionWithOptionalArgs, invokeAction } from "../constants/actions"; +import { invokeAction } from "../constants/actions"; import { useKeybindingsStore } from "@/stores/keybindings-store"; -/** - * This variable keeps track whether keybindings are being accepted - * true -> Keybindings are checked - * false -> Key presses are ignored (Keybindings are not checked) - */ -let keybindingsEnabled = true; - /** * A composable that hooks to the caller component's * lifecycle and hooks to the keyboard events to fire * the appropriate actions based on keybindings */ export function useKeybindingsListener() { - const { keybindings, getKeybindingString } = useKeybindingsStore(); + const { keybindings, getKeybindingString, keybindingsEnabled } = + useKeybindingsStore(); useEffect(() => { const handleKeyDown = (ev: KeyboardEvent) => { @@ -51,20 +45,14 @@ export function useKeybindingsListener() { return () => { document.removeEventListener("keydown", handleKeyDown); }; - }, [keybindings, getKeybindingString]); + }, [keybindings, getKeybindingString, keybindingsEnabled]); } /** * This composable allows for the UI component to be disabled if the component in question is mounted */ export function useKeybindingDisabler() { - const disableKeybindings = () => { - keybindingsEnabled = false; - }; - - const enableKeybindings = () => { - keybindingsEnabled = true; - }; + const { disableKeybindings, enableKeybindings } = useKeybindingsStore(); return { disableKeybindings, diff --git a/apps/web/src/stores/keybindings-store.ts b/apps/web/src/stores/keybindings-store.ts index ddfb270b..6a72423f 100644 --- a/apps/web/src/stores/keybindings-store.ts +++ b/apps/web/src/stores/keybindings-store.ts @@ -43,6 +43,7 @@ export interface KeybindingConflict { interface KeybindingsState { keybindings: KeybindingConfig; isCustomized: boolean; + keybindingsEnabled: boolean; // Actions updateKeybinding: (key: string, action: ActionWithOptionalArgs) => void; @@ -50,6 +51,8 @@ interface KeybindingsState { resetToDefaults: () => void; importKeybindings: (config: KeybindingConfig) => void; exportKeybindings: () => KeybindingConfig; + enableKeybindings: () => void; + disableKeybindings: () => void; // Validation validateKeybinding: ( @@ -67,6 +70,7 @@ export const useKeybindingsStore = create()( (set, get) => ({ keybindings: { ...defaultKeybindings }, isCustomized: false, + keybindingsEnabled: true, updateKeybinding: (key: string, action: ActionWithOptionalArgs) => { set((state) => { @@ -99,6 +103,14 @@ export const useKeybindingsStore = create()( }); }, + enableKeybindings: () => { + set({ keybindingsEnabled: true }); + }, + + disableKeybindings: () => { + set({ keybindingsEnabled: false }); + }, + importKeybindings: (config: KeybindingConfig) => { set({ keybindings: { ...config }, -- cgit v1.3.1