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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
"use client";
import { useMemo } from "react";
import { useKeybindingsStore } from "@/stores/keybindings-store";
import { Action } from "@/constants/actions";
export interface KeyboardShortcut {
id: string;
keys: string[];
description: string;
category: string;
action: Action;
icon?: React.ReactNode;
}
// Map actions to their descriptions and categories
const actionDescriptions: Record<
Action,
{ description: string; category: string }
> = {
"toggle-play": { description: "Play/Pause", category: "Playback" },
"stop-playback": { description: "Stop playback", category: "Playback" },
"seek-forward": {
description: "Seek forward 1 second",
category: "Playback",
},
"seek-backward": {
description: "Seek backward 1 second",
category: "Playback",
},
"frame-step-forward": {
description: "Frame step forward",
category: "Navigation",
},
"frame-step-backward": {
description: "Frame step backward",
category: "Navigation",
},
"jump-forward": {
description: "Jump forward 5 seconds",
category: "Navigation",
},
"jump-backward": {
description: "Jump backward 5 seconds",
category: "Navigation",
},
"goto-start": { description: "Go to timeline start", category: "Navigation" },
"goto-end": { description: "Go to timeline end", category: "Navigation" },
"split-element": {
description: "Split element at playhead",
category: "Editing",
},
"delete-selected": {
description: "Delete selected elements",
category: "Editing",
},
"select-all": { description: "Select all elements", category: "Selection" },
"duplicate-selected": {
description: "Duplicate selected element",
category: "Selection",
},
"toggle-snapping": { description: "Toggle snapping", category: "Editing" },
undo: { description: "Undo", category: "History" },
redo: { description: "Redo", category: "History" },
};
// Convert key binding format to display format
const formatKey = (key: string): string => {
return key
.replace("ctrl", "Cmd")
.replace("alt", "Alt")
.replace("shift", "Shift")
.replace("left", "ArrowLeft")
.replace("right", "ArrowRight")
.replace("up", "ArrowUp")
.replace("down", "ArrowDown")
.replace("space", "Space")
.replace("home", "Home")
.replace("end", "End")
.replace("delete", "Delete")
.replace("backspace", "Backspace")
.replace("-", "+");
};
export const useKeyboardShortcutsHelp = () => {
const { keybindings } = useKeybindingsStore();
const shortcuts = useMemo(() => {
const result: KeyboardShortcut[] = [];
// Group keybindings by action
const actionToKeys: Record<Action, string[]> = {} as any;
Object.entries(keybindings).forEach(([key, action]) => {
if (action) {
if (!actionToKeys[action]) {
actionToKeys[action] = [];
}
actionToKeys[action].push(formatKey(key));
}
});
// Convert to shortcuts format
Object.entries(actionToKeys).forEach(([action, keys]) => {
const actionInfo = actionDescriptions[action as Action];
if (actionInfo) {
result.push({
id: action,
keys,
description: actionInfo.description,
category: actionInfo.category,
action: action as Action,
});
}
});
return result;
}, [keybindings]);
return {
shortcuts,
};
};
|
