OpenCut/apps/web/src/hooks/use-keybindings.ts

import { useEffect } from "react";
import { invokeAction } from "../constants/actions";
import { useKeybindingsStore } from "@/stores/keybindings-store";

/**
 * 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, keybindingsEnabled } =
    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, keybindingsEnabled]);
}

/**
 * This composable allows for the UI component to be disabled if the component in question is mounted
 */
export function useKeybindingDisabler() {
  const { disableKeybindings, enableKeybindings } = useKeybindingsStore();

  return {
    disableKeybindings,
    enableKeybindings,
  };
}

// Export the bindings for backward compatibility
export const bindings = {};