1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
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, isRecording } =
useKeybindingsStore();
useEffect(() => {
const handleKeyDown = (ev: KeyboardEvent) => {
// Do not check keybinds if the mode is disabled
if (!keybindingsEnabled) return;
// ignore key events if user is changing keybindings
if (isRecording) return;
const binding = getKeybindingString(ev);
if (!binding) return;
const boundAction = keybindings[binding];
if (!boundAction) return;
const activeElement = document.activeElement;
const isTextInput =
activeElement &&
(activeElement.tagName === "INPUT" ||
activeElement.tagName === "TEXTAREA" ||
(activeElement as HTMLElement).isContentEditable);
if (isTextInput) return;
ev.preventDefault();
// Handle actions with default arguments
let actionArgs: any;
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, isRecording]);
}
/**
* 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 = {};
|
