UNPKG

@remotion/studio

Version:

APIs for interacting with the Remotion Studio

www.remotion.dev/docs/studio/api

152 lines (151 loc) • 15.8 kB
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.KeyboardShortcutsExplainer = void 0; const jsx_runtime_1 = require("react/jsx-runtime"); const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint"); const colors_1 = require("../helpers/colors"); const use_keybinding_1 = require("../helpers/use-keybinding"); const keys_1 = require("../icons/keys"); const layout_1 = require("./layout"); const left = { width: 85, paddingTop: 8, paddingBottom: 8, }; const key = { background: colors_1.INPUT_BACKGROUND, padding: '3px 6px', color: 'white', borderRadius: 3, border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED, borderBottomWidth: 3, fontSize: 14, fontFamily: 'monospace', }; const right = { fontSize: 14, color: '#eee', }; const container = { paddingLeft: 20, paddingRight: 40, paddingTop: 10, paddingBottom: 10, }; const title = { fontWeight: 'bold', color: 'white', fontSize: 14, marginBottom: 10, }; const keyboardShortcutsDisabled = { padding: 12, width: '100%', fontSize: 14, backgroundColor: 'rgba(255, 255, 255, 0.1)', }; const ul = { marginTop: 0, marginBottom: 0, }; const li = { fontSize: 14, }; const KeyboardShortcutsExplainer = () => { return (jsx_runtime_1.jsxs("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", jsx_runtime_1.jsxs("ul", { style: ul, children: [ jsx_runtime_1.jsx("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), jsx_runtime_1.jsx("li", { style: li, children: "b) Config.setKeyboardShortcutsEnabled(false) being set or" }), jsx_runtime_1.jsx("li", { style: li, children: " c) a Remotion version mismatch." }) ] }) ] })) : null, jsx_runtime_1.jsxs(layout_1.Row, { style: container, children: [ jsx_runtime_1.jsxs(layout_1.Column, { children: [ jsx_runtime_1.jsx("div", { style: title, children: "Playback" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsxs("div", { style: left, children: [ jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ShiftIcon, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ArrowLeft, {}) }) ] }), jsx_runtime_1.jsx("div", { style: right, children: "1 second back" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ArrowLeft, {}) }) }), jsx_runtime_1.jsx("div", { style: right, children: "Previous frame" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Space" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Play / Pause" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ArrowRight, {}) }) }), jsx_runtime_1.jsx("div", { style: right, children: "Next frame" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsxs("div", { style: left, children: [ jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ShiftIcon, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ArrowRight, {}) }) ] }), jsx_runtime_1.jsx("div", { style: right, children: "1 second forward" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "A" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Jump to beginning" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "E" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Jump to end" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "J" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Reverse playback" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "K" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Pause" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "L" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Play / Speed up" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "G" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Go to frame" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Enter" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Pause & return to playback start" }) ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Sidebar" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsxs("div", { style: left, children: [ jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "B" }) ] }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle left sidebar" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsxs("div", { style: left, children: [ jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "J" }) ] }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle right sidebar" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsxs("div", { style: left, children: [ jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "G" }) ] }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle both sidebars" }) ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "View" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "F" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Enter fullscreen" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Esc" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Exit fullscreen" }) ] }) ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 8 }), jsx_runtime_1.jsxs(layout_1.Column, { children: [ jsx_runtime_1.jsx("div", { style: title, children: "Navigation" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "PageUp" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Previous composition" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "PageDown" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Next composition" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "R" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Render composition" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "T" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle checkerboard background" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "?" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Show keyboard shortcuts" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsxs("div", { style: left, children: [ jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "K" }) ] }), jsx_runtime_1.jsx("div", { style: right, children: "Quick Switcher" }) ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Playback range" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "I" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Set In Point" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "O" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Set Out Point" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "X" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Clear In/Out Points" }) ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Zoom" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "+" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Zoom in" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "-" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Zoom out" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "0" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Reset zoom" }) ] }), ' ', jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Props Editor" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsxs("div", { style: left, children: [ jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "Z" }) ] }), jsx_runtime_1.jsx("div", { style: right, children: "Undo" }) ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsxs("div", { style: left, children: [ jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "Y" }) ] }), jsx_runtime_1.jsx("div", { style: right, children: "Redo" }) ] }), process.env.ASK_AI_ENABLED && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [ jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "AI" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [ jsx_runtime_1.jsxs("div", { style: left, children: [ jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "I" }) ] }), jsx_runtime_1.jsx("div", { style: right, children: "Ask AI" }) ] }) ] }))] }) ] }) ] })); }; exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;