@remotion/cli 3.2.35-crf.3 → 3.2.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +1 -1
- package/dist/benchmark.js +8 -5
- package/dist/check-version.d.ts +1 -0
- package/dist/check-version.js +14 -0
- package/dist/composition-prompts.d.ts +8 -0
- package/dist/composition-prompts.js +26 -0
- package/dist/editor/components/Editor.js +4 -1
- package/dist/editor/components/GlobalKeybindings.js +11 -0
- package/dist/editor/components/MenuToolbar.js +3 -449
- package/dist/editor/components/NewComposition/ComboBox.d.ts +2 -1
- package/dist/editor/components/NewComposition/NewComposition.js +3 -0
- package/dist/editor/components/PlayPause.js +2 -1
- package/dist/editor/components/PlaybackRateSelector.js +1 -0
- package/dist/editor/components/QuickSwitcher/NoResults.d.ts +6 -0
- package/dist/editor/components/QuickSwitcher/NoResults.js +15 -0
- package/dist/editor/components/QuickSwitcher/QuickSwitcher.d.ts +3 -0
- package/dist/editor/components/QuickSwitcher/QuickSwitcher.js +16 -0
- package/dist/editor/components/QuickSwitcher/QuickSwitcherContent.d.ts +2 -0
- package/dist/editor/components/QuickSwitcher/QuickSwitcherContent.js +179 -0
- package/dist/editor/components/QuickSwitcher/QuickSwitcherResult.d.ts +17 -0
- package/dist/editor/components/QuickSwitcher/QuickSwitcherResult.js +90 -0
- package/dist/editor/components/QuickSwitcher/fuzzy-search.d.ts +2 -0
- package/dist/editor/components/QuickSwitcher/fuzzy-search.js +26 -0
- package/dist/editor/components/QuickSwitcher.d.ts +3 -0
- package/dist/editor/components/QuickSwitcher.js +32 -0
- package/dist/editor/components/SizeSelector.js +1 -0
- package/dist/editor/helpers/use-menu-structure.d.ts +7 -0
- package/dist/editor/helpers/use-menu-structure.js +547 -0
- package/dist/editor/helpers/use-menu-toolbar.d.ts +0 -0
- package/dist/editor/helpers/use-menu-toolbar.js +1 -0
- package/dist/editor/state/modals.d.ts +2 -0
- package/dist/get-composition-id.d.ts +6 -1
- package/dist/get-composition-id.js +27 -6
- package/dist/index.d.ts +4 -0
- package/dist/index.js +2 -0
- package/dist/preview-server/start-server.js +9 -5
- package/dist/render.js +9 -13
- package/dist/select-composition.d.ts +7 -0
- package/dist/select-composition.js +51 -0
- package/dist/still.js +11 -15
- package/dist/validate-ffmpeg-version.d.ts +3 -0
- package/dist/validate-ffmpeg-version.js +17 -0
- package/dist/warn-about-ffmpeg-version.d.ts +5 -0
- package/dist/warn-about-ffmpeg-version.js +38 -0
- package/package.json +9 -7
package/LICENSE.md
CHANGED
package/dist/benchmark.js
CHANGED
|
@@ -14,6 +14,7 @@ const log_1 = require("./log");
|
|
|
14
14
|
const make_progress_bar_1 = require("./make-progress-bar");
|
|
15
15
|
const parse_command_line_1 = require("./parse-command-line");
|
|
16
16
|
const progress_bar_1 = require("./progress-bar");
|
|
17
|
+
const select_composition_1 = require("./select-composition");
|
|
17
18
|
const setup_cache_1 = require("./setup-cache");
|
|
18
19
|
const truthy_1 = require("./truthy");
|
|
19
20
|
const DEFAULT_RUNS = 3;
|
|
@@ -85,7 +86,7 @@ const makeBenchmarkProgressBar = ({ totalRuns, run, progress, doneIn, }) => {
|
|
|
85
86
|
].join(' ');
|
|
86
87
|
};
|
|
87
88
|
const benchmarkCommand = async (remotionRoot, args) => {
|
|
88
|
-
var _a
|
|
89
|
+
var _a;
|
|
89
90
|
const runs = (_a = parse_command_line_1.parsedCli.runs) !== null && _a !== void 0 ? _a : DEFAULT_RUNS;
|
|
90
91
|
const filePath = args[0];
|
|
91
92
|
if (!filePath) {
|
|
@@ -124,10 +125,12 @@ const benchmarkCommand = async (remotionRoot, args) => {
|
|
|
124
125
|
port,
|
|
125
126
|
puppeteerInstance,
|
|
126
127
|
});
|
|
127
|
-
const ids = (
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
128
|
+
const ids = (args[1]
|
|
129
|
+
? args[1]
|
|
130
|
+
.split(',')
|
|
131
|
+
.map((c) => c.trim())
|
|
132
|
+
.filter(truthy_1.truthy)
|
|
133
|
+
: await (0, select_composition_1.selectCompositions)(comps));
|
|
131
134
|
const compositions = ids.map((compId) => {
|
|
132
135
|
const composition = comps.find((c) => c.id === compId);
|
|
133
136
|
if (!composition) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const checkNodeVersion: () => void;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.checkNodeVersion = void 0;
|
|
4
|
+
const log_1 = require("./log");
|
|
5
|
+
const semver = require('semver');
|
|
6
|
+
const current = process.version;
|
|
7
|
+
const supported = '>=12.10.0';
|
|
8
|
+
const checkNodeVersion = () => {
|
|
9
|
+
if (!semver.satisfies(current, supported)) {
|
|
10
|
+
log_1.Log.warn(`Required node version ${supported} not satisfied with current version ${current}.`);
|
|
11
|
+
log_1.Log.warn(`Update your node version to ${supported}`);
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
exports.checkNodeVersion = checkNodeVersion;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { PromptObject } from 'prompts';
|
|
2
|
+
import prompts from 'prompts';
|
|
3
|
+
export declare type Question<V extends string = string> = PromptObject<V> & {
|
|
4
|
+
optionsPerPage?: number;
|
|
5
|
+
};
|
|
6
|
+
export declare type NamelessQuestion = Omit<Question<'value'>, 'name'>;
|
|
7
|
+
export default function prompt(questions: Question): Promise<prompts.Answers<string>>;
|
|
8
|
+
export declare function selectAsync(question: NamelessQuestion): Promise<string | string[]>;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.selectAsync = void 0;
|
|
7
|
+
const prompts_1 = __importDefault(require("prompts"));
|
|
8
|
+
const log_1 = require("./log");
|
|
9
|
+
function prompt(questions) {
|
|
10
|
+
return (0, prompts_1.default)([questions], {
|
|
11
|
+
onCancel() {
|
|
12
|
+
log_1.Log.error('No composition selected.');
|
|
13
|
+
process.exit(1);
|
|
14
|
+
},
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
exports.default = prompt;
|
|
18
|
+
async function selectAsync(question) {
|
|
19
|
+
const { value } = await prompt({
|
|
20
|
+
...question,
|
|
21
|
+
name: 'value',
|
|
22
|
+
type: question.type,
|
|
23
|
+
});
|
|
24
|
+
return value !== null && value !== void 0 ? value : null;
|
|
25
|
+
}
|
|
26
|
+
exports.selectAsync = selectAsync;
|
|
@@ -19,6 +19,7 @@ const KeyboardShortcutsModal_1 = require("./KeyboardShortcutsModal");
|
|
|
19
19
|
const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
|
|
20
20
|
const NoRegisterRoot_1 = require("./NoRegisterRoot");
|
|
21
21
|
const NotificationCenter_1 = require("./Notifications/NotificationCenter");
|
|
22
|
+
const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
|
|
22
23
|
const UpdateModal_1 = require("./UpdateModal/UpdateModal");
|
|
23
24
|
const ZoomPersistor_1 = require("./ZoomPersistor");
|
|
24
25
|
const background = {
|
|
@@ -48,6 +49,8 @@ const Editor = () => {
|
|
|
48
49
|
});
|
|
49
50
|
return () => cleanup();
|
|
50
51
|
}, [Root, waitForRoot]);
|
|
51
|
-
return ((0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsx)(timeline_zoom_1.TimelineZoomContext, { children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), Root === null ? (0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}) : (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsx)(timeline_zoom_1.TimelineZoomContext, { children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), Root === null ? (0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}) : (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {}), modalContextType && modalContextType.type === 'quick-switcher' && (
|
|
53
|
+
// Quick switcher here because requires timeline zoom ctx
|
|
54
|
+
(0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, {}))] }) }), modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'shortcuts' && ((0, jsx_runtime_1.jsx)(KeyboardShortcutsModal_1.KeyboardShortcuts, {}))] }));
|
|
52
55
|
};
|
|
53
56
|
exports.Editor = Editor;
|
|
@@ -21,6 +21,16 @@ const GlobalKeybindings = () => {
|
|
|
21
21
|
},
|
|
22
22
|
commandCtrlKey: false,
|
|
23
23
|
});
|
|
24
|
+
const cmdKKey = keybindings.registerKeybinding({
|
|
25
|
+
event: 'keydown',
|
|
26
|
+
key: 'k',
|
|
27
|
+
callback: () => {
|
|
28
|
+
setSelectedModal({
|
|
29
|
+
type: 'quick-switcher',
|
|
30
|
+
});
|
|
31
|
+
},
|
|
32
|
+
commandCtrlKey: true,
|
|
33
|
+
});
|
|
24
34
|
const cKey = keybindings.registerKeybinding({
|
|
25
35
|
event: 'keypress',
|
|
26
36
|
key: 't',
|
|
@@ -43,6 +53,7 @@ const GlobalKeybindings = () => {
|
|
|
43
53
|
nKey.unregister();
|
|
44
54
|
cKey.unregister();
|
|
45
55
|
questionMark.unregister();
|
|
56
|
+
cmdKKey.unregister();
|
|
46
57
|
};
|
|
47
58
|
}, [keybindings, setCheckerboard, setSelectedModal]);
|
|
48
59
|
return null;
|
|
@@ -3,22 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.MenuToolbar = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
|
-
const remotion_1 = require("remotion");
|
|
7
6
|
const colors_1 = require("../helpers/colors");
|
|
8
|
-
const
|
|
9
|
-
const use_keybinding_1 = require("../helpers/use-keybinding");
|
|
10
|
-
const Checkmark_1 = require("../icons/Checkmark");
|
|
11
|
-
const checkerboard_1 = require("../state/checkerboard");
|
|
12
|
-
const modals_1 = require("../state/modals");
|
|
13
|
-
const preview_size_1 = require("../state/preview-size");
|
|
14
|
-
const rich_timeline_1 = require("../state/rich-timeline");
|
|
15
|
-
const sidebar_1 = require("../state/sidebar");
|
|
16
|
-
const timeline_ref_1 = require("../state/timeline-ref");
|
|
7
|
+
const use_menu_structure_1 = require("../helpers/use-menu-structure");
|
|
17
8
|
const layout_1 = require("./layout");
|
|
18
9
|
const MenuItem_1 = require("./Menu/MenuItem");
|
|
19
10
|
const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
|
|
20
|
-
const SizeSelector_1 = require("./SizeSelector");
|
|
21
|
-
const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
|
|
22
11
|
const UpdateCheck_1 = require("./UpdateCheck");
|
|
23
12
|
const row = {
|
|
24
13
|
alignItems: 'center',
|
|
@@ -34,20 +23,8 @@ const row = {
|
|
|
34
23
|
const flex = {
|
|
35
24
|
flex: 1,
|
|
36
25
|
};
|
|
37
|
-
const openExternal = (link) => {
|
|
38
|
-
window.open(link, '_blank');
|
|
39
|
-
};
|
|
40
|
-
const rotate = {
|
|
41
|
-
transform: `rotate(90deg)`,
|
|
42
|
-
};
|
|
43
|
-
const ICON_SIZE = 16;
|
|
44
26
|
const MenuToolbar = () => {
|
|
45
27
|
const [selected, setSelected] = (0, react_1.useState)(null);
|
|
46
|
-
const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
|
|
47
|
-
const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
|
|
48
|
-
const { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
|
|
49
|
-
const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
|
|
50
|
-
const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
|
|
51
28
|
const itemClicked = (0, react_1.useCallback)((itemId) => {
|
|
52
29
|
setSelected(itemId);
|
|
53
30
|
}, [setSelected]);
|
|
@@ -56,433 +33,10 @@ const MenuToolbar = () => {
|
|
|
56
33
|
setSelected(itemId);
|
|
57
34
|
}
|
|
58
35
|
}, [selected, setSelected]);
|
|
59
|
-
const
|
|
36
|
+
const closeMenu = (0, react_1.useCallback)(() => {
|
|
60
37
|
setSelected(null);
|
|
61
38
|
}, []);
|
|
62
|
-
const
|
|
63
|
-
const structure = (0, react_1.useMemo)(() => {
|
|
64
|
-
const struct = [
|
|
65
|
-
{
|
|
66
|
-
id: 'remotion',
|
|
67
|
-
label: ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }) })),
|
|
68
|
-
leaveLeftPadding: false,
|
|
69
|
-
items: [
|
|
70
|
-
{
|
|
71
|
-
id: 'about',
|
|
72
|
-
value: 'about',
|
|
73
|
-
label: 'About Remotion',
|
|
74
|
-
onClick: () => {
|
|
75
|
-
close();
|
|
76
|
-
openExternal('https://remotion.dev');
|
|
77
|
-
},
|
|
78
|
-
type: 'item',
|
|
79
|
-
keyHint: null,
|
|
80
|
-
leftItem: null,
|
|
81
|
-
subMenu: null,
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
id: 'changelog',
|
|
85
|
-
value: 'changelog',
|
|
86
|
-
label: 'Changelog',
|
|
87
|
-
onClick: () => {
|
|
88
|
-
close();
|
|
89
|
-
openExternal('https://github.com/remotion-dev/remotion/releases');
|
|
90
|
-
},
|
|
91
|
-
type: 'item',
|
|
92
|
-
keyHint: null,
|
|
93
|
-
leftItem: null,
|
|
94
|
-
subMenu: null,
|
|
95
|
-
},
|
|
96
|
-
{
|
|
97
|
-
id: 'license',
|
|
98
|
-
value: 'license',
|
|
99
|
-
label: 'License',
|
|
100
|
-
onClick: () => {
|
|
101
|
-
close();
|
|
102
|
-
openExternal('https://github.com/remotion-dev/remotion/blob/main/LICENSE.md');
|
|
103
|
-
},
|
|
104
|
-
type: 'item',
|
|
105
|
-
keyHint: null,
|
|
106
|
-
leftItem: null,
|
|
107
|
-
subMenu: null,
|
|
108
|
-
},
|
|
109
|
-
],
|
|
110
|
-
},
|
|
111
|
-
{
|
|
112
|
-
id: 'file',
|
|
113
|
-
label: 'File',
|
|
114
|
-
leaveLeftPadding: false,
|
|
115
|
-
items: [
|
|
116
|
-
{
|
|
117
|
-
id: 'new-sequence',
|
|
118
|
-
value: 'new-sequence',
|
|
119
|
-
label: 'New composition...',
|
|
120
|
-
onClick: () => {
|
|
121
|
-
close();
|
|
122
|
-
setSelectedModal({
|
|
123
|
-
compType: 'composition',
|
|
124
|
-
type: 'new-comp',
|
|
125
|
-
});
|
|
126
|
-
},
|
|
127
|
-
type: 'item',
|
|
128
|
-
keyHint: 'N',
|
|
129
|
-
leftItem: null,
|
|
130
|
-
subMenu: null,
|
|
131
|
-
},
|
|
132
|
-
{
|
|
133
|
-
id: 'new-still',
|
|
134
|
-
value: 'new-still',
|
|
135
|
-
label: 'New still...',
|
|
136
|
-
onClick: () => {
|
|
137
|
-
close();
|
|
138
|
-
setSelectedModal({
|
|
139
|
-
compType: 'still',
|
|
140
|
-
type: 'new-comp',
|
|
141
|
-
});
|
|
142
|
-
},
|
|
143
|
-
type: 'item',
|
|
144
|
-
keyHint: null,
|
|
145
|
-
leftItem: null,
|
|
146
|
-
subMenu: null,
|
|
147
|
-
},
|
|
148
|
-
],
|
|
149
|
-
},
|
|
150
|
-
{
|
|
151
|
-
id: 'view',
|
|
152
|
-
label: 'View',
|
|
153
|
-
leaveLeftPadding: true,
|
|
154
|
-
items: [
|
|
155
|
-
{
|
|
156
|
-
id: 'preview-size',
|
|
157
|
-
keyHint: null,
|
|
158
|
-
label: 'Preview size',
|
|
159
|
-
onClick: () => undefined,
|
|
160
|
-
type: 'item',
|
|
161
|
-
value: 'preview-size',
|
|
162
|
-
leftItem: null,
|
|
163
|
-
subMenu: {
|
|
164
|
-
leaveLeftSpace: true,
|
|
165
|
-
preselectIndex: sizes.findIndex((s) => String(size.size) === String(s.size)),
|
|
166
|
-
items: sizes.map((newSize) => ({
|
|
167
|
-
id: String(newSize.size),
|
|
168
|
-
keyHint: newSize.size === 1 ? '0' : null,
|
|
169
|
-
label: (0, SizeSelector_1.getPreviewSizeLabel)(newSize),
|
|
170
|
-
leftItem: String(newSize.size) === String(size.size) ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
|
|
171
|
-
onClick: () => {
|
|
172
|
-
close();
|
|
173
|
-
setSize(() => newSize);
|
|
174
|
-
},
|
|
175
|
-
subMenu: null,
|
|
176
|
-
type: 'item',
|
|
177
|
-
value: newSize.size,
|
|
178
|
-
})),
|
|
179
|
-
},
|
|
180
|
-
},
|
|
181
|
-
{
|
|
182
|
-
id: 'timeline-divider',
|
|
183
|
-
type: 'divider',
|
|
184
|
-
},
|
|
185
|
-
{
|
|
186
|
-
id: 'left-sidebar',
|
|
187
|
-
label: 'Sidebar',
|
|
188
|
-
keyHint: null,
|
|
189
|
-
type: 'item',
|
|
190
|
-
value: 'preview-size',
|
|
191
|
-
leftItem: null,
|
|
192
|
-
subMenu: {
|
|
193
|
-
leaveLeftSpace: true,
|
|
194
|
-
preselectIndex: 0,
|
|
195
|
-
items: [
|
|
196
|
-
{
|
|
197
|
-
id: 'sidebar-responsive',
|
|
198
|
-
keyHint: null,
|
|
199
|
-
label: 'Responsive',
|
|
200
|
-
leftItem: sidebarCollapsedState === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
|
|
201
|
-
onClick: () => {
|
|
202
|
-
setSidebarCollapsedState('responsive');
|
|
203
|
-
},
|
|
204
|
-
subMenu: null,
|
|
205
|
-
type: 'item',
|
|
206
|
-
value: 'responsive',
|
|
207
|
-
},
|
|
208
|
-
{
|
|
209
|
-
id: 'sidebar-expanded',
|
|
210
|
-
keyHint: null,
|
|
211
|
-
label: 'Expanded',
|
|
212
|
-
leftItem: sidebarCollapsedState === 'expanded' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
|
|
213
|
-
onClick: () => {
|
|
214
|
-
setSidebarCollapsedState('expanded');
|
|
215
|
-
},
|
|
216
|
-
subMenu: null,
|
|
217
|
-
type: 'item',
|
|
218
|
-
value: 'expanded',
|
|
219
|
-
},
|
|
220
|
-
{
|
|
221
|
-
id: 'sidebar-collapsed',
|
|
222
|
-
keyHint: null,
|
|
223
|
-
label: 'Collapsed',
|
|
224
|
-
leftItem: sidebarCollapsedState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
|
|
225
|
-
onClick: () => {
|
|
226
|
-
setSidebarCollapsedState('collapsed');
|
|
227
|
-
},
|
|
228
|
-
subMenu: null,
|
|
229
|
-
type: 'item',
|
|
230
|
-
value: 'collapsed',
|
|
231
|
-
},
|
|
232
|
-
],
|
|
233
|
-
},
|
|
234
|
-
onClick: () => undefined,
|
|
235
|
-
},
|
|
236
|
-
{
|
|
237
|
-
id: 'timeline-divider',
|
|
238
|
-
type: 'divider',
|
|
239
|
-
},
|
|
240
|
-
{
|
|
241
|
-
id: 'checkerboard',
|
|
242
|
-
keyHint: 'T',
|
|
243
|
-
label: 'Transparency as checkerboard',
|
|
244
|
-
onClick: () => {
|
|
245
|
-
close();
|
|
246
|
-
setCheckerboard((c) => !c);
|
|
247
|
-
},
|
|
248
|
-
type: 'item',
|
|
249
|
-
value: 'checkerboard',
|
|
250
|
-
leftItem: checkerboard ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
|
|
251
|
-
subMenu: null,
|
|
252
|
-
},
|
|
253
|
-
{
|
|
254
|
-
id: 'timeline-divider',
|
|
255
|
-
type: 'divider',
|
|
256
|
-
},
|
|
257
|
-
{
|
|
258
|
-
id: 'rich-timeline',
|
|
259
|
-
keyHint: null,
|
|
260
|
-
label: 'Rich timeline',
|
|
261
|
-
onClick: () => {
|
|
262
|
-
close();
|
|
263
|
-
setRichTimeline((r) => !r);
|
|
264
|
-
},
|
|
265
|
-
type: 'item',
|
|
266
|
-
value: 'rich-timeline',
|
|
267
|
-
leftItem: richTimeline ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
|
|
268
|
-
subMenu: null,
|
|
269
|
-
},
|
|
270
|
-
{
|
|
271
|
-
id: 'expand-all',
|
|
272
|
-
keyHint: null,
|
|
273
|
-
label: 'Expand all',
|
|
274
|
-
onClick: () => {
|
|
275
|
-
var _a;
|
|
276
|
-
close();
|
|
277
|
-
(_a = timeline_ref_1.timelineRef.current) === null || _a === void 0 ? void 0 : _a.expandAll();
|
|
278
|
-
},
|
|
279
|
-
type: 'item',
|
|
280
|
-
value: 'expand-all',
|
|
281
|
-
leftItem: null,
|
|
282
|
-
subMenu: null,
|
|
283
|
-
},
|
|
284
|
-
{
|
|
285
|
-
id: 'collapse-all',
|
|
286
|
-
keyHint: null,
|
|
287
|
-
label: 'Collapse all',
|
|
288
|
-
onClick: () => {
|
|
289
|
-
var _a;
|
|
290
|
-
close();
|
|
291
|
-
(_a = timeline_ref_1.timelineRef.current) === null || _a === void 0 ? void 0 : _a.collapseAll();
|
|
292
|
-
},
|
|
293
|
-
type: 'item',
|
|
294
|
-
value: 'collapse-all',
|
|
295
|
-
leftItem: null,
|
|
296
|
-
subMenu: null,
|
|
297
|
-
},
|
|
298
|
-
{
|
|
299
|
-
id: 'in-out-divider',
|
|
300
|
-
type: 'divider',
|
|
301
|
-
},
|
|
302
|
-
{
|
|
303
|
-
id: 'in-mark',
|
|
304
|
-
keyHint: 'I',
|
|
305
|
-
label: 'In Mark',
|
|
306
|
-
leftItem: null,
|
|
307
|
-
onClick: () => {
|
|
308
|
-
var _a;
|
|
309
|
-
close();
|
|
310
|
-
(_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.inMarkClick(null);
|
|
311
|
-
},
|
|
312
|
-
subMenu: null,
|
|
313
|
-
type: 'item',
|
|
314
|
-
value: 'in-mark',
|
|
315
|
-
},
|
|
316
|
-
{
|
|
317
|
-
id: 'out-mark',
|
|
318
|
-
keyHint: 'O',
|
|
319
|
-
label: 'Out Mark',
|
|
320
|
-
leftItem: null,
|
|
321
|
-
onClick: () => {
|
|
322
|
-
var _a;
|
|
323
|
-
close();
|
|
324
|
-
(_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.outMarkClick(null);
|
|
325
|
-
},
|
|
326
|
-
subMenu: null,
|
|
327
|
-
type: 'item',
|
|
328
|
-
value: 'out-mark',
|
|
329
|
-
},
|
|
330
|
-
{
|
|
331
|
-
id: 'x-mark',
|
|
332
|
-
keyHint: 'X',
|
|
333
|
-
label: 'Clear In/Out Marks',
|
|
334
|
-
leftItem: null,
|
|
335
|
-
onClick: () => {
|
|
336
|
-
var _a;
|
|
337
|
-
close();
|
|
338
|
-
(_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.clearMarks();
|
|
339
|
-
},
|
|
340
|
-
subMenu: null,
|
|
341
|
-
type: 'item',
|
|
342
|
-
value: 'clear-marks',
|
|
343
|
-
},
|
|
344
|
-
],
|
|
345
|
-
},
|
|
346
|
-
'EyeDropper' in window
|
|
347
|
-
? {
|
|
348
|
-
id: 'tools',
|
|
349
|
-
label: 'Tools',
|
|
350
|
-
leaveLeftPadding: false,
|
|
351
|
-
items: [
|
|
352
|
-
{
|
|
353
|
-
id: 'color-picker',
|
|
354
|
-
value: 'color-picker',
|
|
355
|
-
label: 'Color Picker',
|
|
356
|
-
onClick: () => (0, pick_color_1.pickColor)(),
|
|
357
|
-
leftItem: null,
|
|
358
|
-
keyHint: null,
|
|
359
|
-
subMenu: null,
|
|
360
|
-
type: 'item',
|
|
361
|
-
},
|
|
362
|
-
],
|
|
363
|
-
}
|
|
364
|
-
: null,
|
|
365
|
-
{
|
|
366
|
-
id: 'help',
|
|
367
|
-
label: 'Help',
|
|
368
|
-
leaveLeftPadding: false,
|
|
369
|
-
items: [
|
|
370
|
-
{
|
|
371
|
-
id: 'shortcuts',
|
|
372
|
-
value: 'shortcuts',
|
|
373
|
-
label: (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
|
|
374
|
-
? 'Shortcuts (disabled)'
|
|
375
|
-
: 'Shortcuts',
|
|
376
|
-
onClick: () => {
|
|
377
|
-
close();
|
|
378
|
-
setSelectedModal({
|
|
379
|
-
type: 'shortcuts',
|
|
380
|
-
});
|
|
381
|
-
},
|
|
382
|
-
keyHint: '?',
|
|
383
|
-
leftItem: null,
|
|
384
|
-
subMenu: null,
|
|
385
|
-
type: 'item',
|
|
386
|
-
},
|
|
387
|
-
{
|
|
388
|
-
id: 'docs',
|
|
389
|
-
value: 'docs',
|
|
390
|
-
label: 'Docs',
|
|
391
|
-
onClick: () => {
|
|
392
|
-
close();
|
|
393
|
-
openExternal('https://remotion.dev/docs');
|
|
394
|
-
},
|
|
395
|
-
type: 'item',
|
|
396
|
-
keyHint: null,
|
|
397
|
-
leftItem: null,
|
|
398
|
-
subMenu: null,
|
|
399
|
-
},
|
|
400
|
-
{
|
|
401
|
-
id: 'file-issue',
|
|
402
|
-
value: 'file-issue',
|
|
403
|
-
label: 'File an issue',
|
|
404
|
-
onClick: () => {
|
|
405
|
-
close();
|
|
406
|
-
openExternal('https://github.com/remotion-dev/remotion/issues/new/choose');
|
|
407
|
-
},
|
|
408
|
-
type: 'item',
|
|
409
|
-
keyHint: null,
|
|
410
|
-
leftItem: null,
|
|
411
|
-
subMenu: null,
|
|
412
|
-
},
|
|
413
|
-
{
|
|
414
|
-
id: 'discord',
|
|
415
|
-
value: 'discord',
|
|
416
|
-
label: 'Join Discord community',
|
|
417
|
-
onClick: () => {
|
|
418
|
-
close();
|
|
419
|
-
openExternal('https://discord.com/invite/6VzzNDwUwV');
|
|
420
|
-
},
|
|
421
|
-
type: 'item',
|
|
422
|
-
keyHint: null,
|
|
423
|
-
leftItem: null,
|
|
424
|
-
subMenu: null,
|
|
425
|
-
},
|
|
426
|
-
{
|
|
427
|
-
id: 'help-divider',
|
|
428
|
-
type: 'divider',
|
|
429
|
-
},
|
|
430
|
-
{
|
|
431
|
-
id: 'insta',
|
|
432
|
-
value: 'insta',
|
|
433
|
-
label: 'Instagram',
|
|
434
|
-
onClick: () => {
|
|
435
|
-
close();
|
|
436
|
-
openExternal('https://instagram.com/remotion.dev');
|
|
437
|
-
},
|
|
438
|
-
type: 'item',
|
|
439
|
-
keyHint: null,
|
|
440
|
-
leftItem: null,
|
|
441
|
-
subMenu: null,
|
|
442
|
-
},
|
|
443
|
-
{
|
|
444
|
-
id: 'twitter',
|
|
445
|
-
value: 'twitter',
|
|
446
|
-
label: 'Twitter',
|
|
447
|
-
onClick: () => {
|
|
448
|
-
close();
|
|
449
|
-
openExternal('https://twitter.com/remotion_dev');
|
|
450
|
-
},
|
|
451
|
-
type: 'item',
|
|
452
|
-
keyHint: null,
|
|
453
|
-
leftItem: null,
|
|
454
|
-
subMenu: null,
|
|
455
|
-
},
|
|
456
|
-
{
|
|
457
|
-
id: 'tiktok',
|
|
458
|
-
value: 'tiktok',
|
|
459
|
-
label: 'TikTok',
|
|
460
|
-
onClick: () => {
|
|
461
|
-
close();
|
|
462
|
-
openExternal('https://www.tiktok.com/@remotion.dev');
|
|
463
|
-
},
|
|
464
|
-
type: 'item',
|
|
465
|
-
keyHint: null,
|
|
466
|
-
leftItem: null,
|
|
467
|
-
subMenu: null,
|
|
468
|
-
},
|
|
469
|
-
],
|
|
470
|
-
},
|
|
471
|
-
].filter(remotion_1.Internals.truthy);
|
|
472
|
-
return struct;
|
|
473
|
-
}, [
|
|
474
|
-
checkerboard,
|
|
475
|
-
close,
|
|
476
|
-
richTimeline,
|
|
477
|
-
setCheckerboard,
|
|
478
|
-
setRichTimeline,
|
|
479
|
-
setSelectedModal,
|
|
480
|
-
setSidebarCollapsedState,
|
|
481
|
-
setSize,
|
|
482
|
-
sidebarCollapsedState,
|
|
483
|
-
size.size,
|
|
484
|
-
sizes,
|
|
485
|
-
]);
|
|
39
|
+
const structure = (0, use_menu_structure_1.useMenuStructure)(closeMenu);
|
|
486
40
|
const menus = (0, react_1.useMemo)(() => {
|
|
487
41
|
return structure.map((s) => s.id);
|
|
488
42
|
}, [structure]);
|
|
@@ -8,7 +8,7 @@ export declare type SubMenu = {
|
|
|
8
8
|
leaveLeftSpace: boolean;
|
|
9
9
|
items: ComboboxValue[];
|
|
10
10
|
};
|
|
11
|
-
declare type SelectionItem = {
|
|
11
|
+
export declare type SelectionItem = {
|
|
12
12
|
type: 'item';
|
|
13
13
|
id: string;
|
|
14
14
|
label: React.ReactNode;
|
|
@@ -17,6 +17,7 @@ declare type SelectionItem = {
|
|
|
17
17
|
keyHint: string | null;
|
|
18
18
|
leftItem: React.ReactNode;
|
|
19
19
|
subMenu: SubMenu | null;
|
|
20
|
+
quickSwitcherLabel: string | null;
|
|
20
21
|
};
|
|
21
22
|
export declare type ComboboxValue = DividerItem | SelectionItem;
|
|
22
23
|
export declare const Combobox: React.FC<{
|
|
@@ -147,6 +147,7 @@ const NewComposition = (props) => {
|
|
|
147
147
|
keyHint: null,
|
|
148
148
|
leftItem: String(frameRate) === selectedFrameRate ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
|
|
149
149
|
subMenu: null,
|
|
150
|
+
quickSwitcherLabel: null,
|
|
150
151
|
};
|
|
151
152
|
});
|
|
152
153
|
}, [onFpsChange, selectedFrameRate]);
|
|
@@ -164,6 +165,7 @@ const NewComposition = (props) => {
|
|
|
164
165
|
subMenu: null,
|
|
165
166
|
type: 'item',
|
|
166
167
|
value: 'composition',
|
|
168
|
+
quickSwitcherLabel: null,
|
|
167
169
|
},
|
|
168
170
|
{
|
|
169
171
|
id: 'still',
|
|
@@ -174,6 +176,7 @@ const NewComposition = (props) => {
|
|
|
174
176
|
subMenu: null,
|
|
175
177
|
type: 'item',
|
|
176
178
|
value: 'still',
|
|
179
|
+
quickSwitcherLabel: null,
|
|
177
180
|
},
|
|
178
181
|
];
|
|
179
182
|
}, [onTypeChanged]);
|