feat: implement keybindings listener and disabler composables in use-keybindings hook

1 files changed, 76 insertions, 0 deletions

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 = {};