@remotion/cli 3.2.37 → 3.2.39

package/dist/config/height.d.ts

@@ -0,0 +1,2 @@
+export declare const setHeight: (newHeight: number) => void;
+export declare const getHeight: () => number | null;

package/dist/config/height.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHeight = exports.setHeight = void 0;
+// eslint-disable-next-line no-restricted-imports
+const remotion_1 = require("remotion");
+let specifiedHeight;
+const setHeight = (newHeight) => {
+    remotion_1.Internals.validateDimension(newHeight, 'height', 'passed to `setHeight()`');
+    specifiedHeight = newHeight;
+};
+exports.setHeight = setHeight;
+const getHeight = () => {
+    return specifiedHeight;
+};
+exports.getHeight = getHeight;

package/dist/config/log.d.ts

@@ -1,3 +1,3 @@
 import type { LogLevel } from '@remotion/renderer';
-export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn";
+export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error";
 export declare const setLogLevel: (newLogLevel: LogLevel) => void;

package/dist/config/width.d.ts

@@ -0,0 +1,2 @@
+export declare const setWidth: (newWidth: number) => void;
+export declare const getWidth: () => number | null;

package/dist/config/width.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWidth = exports.setWidth = void 0;
+// eslint-disable-next-line no-restricted-imports
+const remotion_1 = require("remotion");
+let passedWidth = null;
+const setWidth = (newWidth) => {
+    if (typeof newWidth !== 'number') {
+        remotion_1.Internals.validateDimension(newWidth, 'width', 'passed to `setWidth()`');
+    }
+    passedWidth = newWidth;
+};
+exports.setWidth = setWidth;
+const getWidth = () => {
+    return passedWidth;
+};
+exports.getWidth = getWidth;

package/dist/editor/components/Editor.js

@@ -15,7 +15,6 @@ const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
 const FramePersistor_1 = require("./FramePersistor");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
-const KeyboardShortcutsModal_1 = require("./KeyboardShortcutsModal");
 const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
 const NoRegisterRoot_1 = require("./NoRegisterRoot");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -51,6 +50,6 @@ const Editor = () => {
     }, [Root, waitForRoot]);
     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' && (
                         // Quick switcher here because requires timeline zoom ctx
-                        (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, {}))] }));
+                        (0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }) }), 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 }))] }));
 };
 exports.Editor = Editor;

package/dist/editor/components/GlobalKeybindings.js

@@ -27,6 +27,8 @@ const GlobalKeybindings = () => {
             callback: () => {
                 setSelectedModal({
                     type: 'quick-switcher',
+                    mode: 'compositions',
+                    invocationTimestamp: Date.now(),
                 });
             },
             commandCtrlKey: true,
@@ -44,7 +46,9 @@ const GlobalKeybindings = () => {
             key: '?',
             callback: () => {
                 setSelectedModal({
-                    type: 'shortcuts',
+                    type: 'quick-switcher',
+                    mode: 'docs',
+                    invocationTimestamp: Date.now(),
                 });
             },
             commandCtrlKey: false,

package/dist/editor/components/KeyboardShortcutsExplainer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const KeyboardShortcutsExplainer: React.FC;

package/dist/editor/components/KeyboardShortcutsExplainer.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardShortcutsExplainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
+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: '#333',
+    padding: '3px 6px',
+    color: 'white',
+    borderRadius: 3,
+    border: '1px solid black',
+    borderBottomWidth: 3,
+    fontSize: 13,
+    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 ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] })] })] })] }));
+};
+exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;

package/dist/editor/components/QuickSwitcher/AlgoliaCredit.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const AlgoliaCredit: React.FC;

package/dist/editor/components/QuickSwitcher/AlgoliaCredit.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlgoliaCredit = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link = {
+    display: 'inline-flex',
+};
+const AlgoliaCredit = () => {
+    return ((0, jsx_runtime_1.jsx)("a", { style: link, href: "https://www.algolia.com/ref/docsearch/?utm_source=www.remotion.dev&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch", target: "_blank", rel: "noopener noreferrer", children: (0, jsx_runtime_1.jsx)("svg", { width: "77", height: "19", "aria-label": "Algolia", role: "img", children: (0, jsx_runtime_1.jsx)("path", { d: "M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z", fill: "currentColor", fillRule: "evenodd" }) }) }));
+};
+exports.AlgoliaCredit = AlgoliaCredit;

package/dist/editor/components/QuickSwitcher/NoResults.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-export declare type Mode = 'commands' | 'compositions';
+export declare type QuickSwitcherMode = 'commands' | 'compositions' | 'docs';
 export declare const QuickSwitcherNoResults: React.FC<{
     query: string;
-    mode: Mode;
+    mode: QuickSwitcherMode;
 }>;

package/dist/editor/components/QuickSwitcher/NoResults.js

@@ -9,7 +9,12 @@ const container = {
     textAlign: 'center',
     fontSize: 14,
 };
+const MODE_TO_STRING = {
+    commands: 'commands',
+    compositions: 'compositions',
+    docs: 'documentation',
+};
 const QuickSwitcherNoResults = ({ query, mode }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: ["No ", mode === 'commands' ? 'commands' : 'compositions', " matching ", '"', query, '"'] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: ["No ", MODE_TO_STRING[mode], " matching ", '"', query, '"'] }));
 };
 exports.QuickSwitcherNoResults = QuickSwitcherNoResults;

package/dist/editor/components/QuickSwitcher/QuickSwitcher.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
-declare const QuickSwitcher: React.FC;
+import type { QuickSwitcherMode } from './NoResults';
+declare const QuickSwitcher: React.FC<{
+    initialMode: QuickSwitcherMode;
+    invocationTimestamp: number;
+}>;
 export default QuickSwitcher;

package/dist/editor/components/QuickSwitcher/QuickSwitcher.js

@@ -5,12 +5,12 @@ const react_1 = require("react");
 const modals_1 = require("../../state/modals");
 const ModalContainer_1 = require("../ModalContainer");
 const QuickSwitcherContent_1 = require("./QuickSwitcherContent");
-const QuickSwitcher = () => {
+const QuickSwitcher = ({ initialMode, invocationTimestamp }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
     // Separate child component to correctly capture keybindings
-    return ((0, jsx_runtime_1.jsx)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: (0, jsx_runtime_1.jsx)(QuickSwitcherContent_1.QuickSwitcherContent, {}) }));
+    return ((0, jsx_runtime_1.jsx)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: (0, jsx_runtime_1.jsx)(QuickSwitcherContent_1.QuickSwitcherContent, { invocationTimestamp: invocationTimestamp, initialMode: initialMode }) }));
 };
 exports.default = QuickSwitcher;

package/dist/editor/components/QuickSwitcher/QuickSwitcherContent.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
-export declare const QuickSwitcherContent: React.FC;
+import type { QuickSwitcherMode } from './NoResults';
+export declare const QuickSwitcherContent: React.FC<{
+    initialMode: QuickSwitcherMode;
+    invocationTimestamp: number;
+}>;

package/dist/editor/components/QuickSwitcher/QuickSwitcherContent.js

@@ -10,7 +10,10 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const use_menu_structure_1 = require("../../helpers/use-menu-structure");
 const modals_1 = require("../../state/modals");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
+const KeyboardShortcutsExplainer_1 = require("../KeyboardShortcutsExplainer");
 const layout_1 = require("../layout");
+const algolia_search_1 = require("./algolia-search");
+const AlgoliaCredit_1 = require("./AlgoliaCredit");
 const fuzzy_search_1 = require("./fuzzy-search");
 const NoResults_1 = require("./NoResults");
 const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
@@ -19,9 +22,6 @@ const input = {
     border: '2px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
     width: '100%',
 };
-const container = {
-    width: 500,
-};
 const modeSelector = {
     paddingLeft: 16,
     paddingRight: 16,
@@ -52,10 +52,9 @@ const content = {
     paddingRight: 16,
     paddingTop: 4,
     paddingBottom: 10,
-};
-const results = {
-    overflowY: 'auto',
-    height: 300,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
 };
 const loopIndex = (index, length) => {
     if (index < 0) {
@@ -63,25 +62,56 @@ const loopIndex = (index, length) => {
     }
     return index % length;
 };
-const QuickSwitcherContent = () => {
+const stripQuery = (query) => {
+    if (query.startsWith('>') || query.startsWith('?')) {
+        return query.substring(1).trim();
+    }
+    return query.trim();
+};
+const mapQueryToMode = (query) => {
+    return query.startsWith('>')
+        ? 'commands'
+        : query.startsWith('?')
+            ? 'docs'
+            : 'compositions';
+};
+const mapModeToQuery = (mode) => {
+    if (mode === 'commands') {
+        return '> ';
+    }
+    if (mode === 'compositions') {
+        return '';
+    }
+    if (mode === 'docs') {
+        return '? ';
+    }
+    throw new Error('no mode' + mode);
+};
+const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const [state, setState] = (0, react_1.useState)({
-        query: '',
-        selectedIndex: 0,
+    const [state, setState] = (0, react_1.useState)(() => {
+        return {
+            query: mapModeToQuery(initialMode),
+            selectedIndex: 0,
+        };
     });
+    (0, react_1.useEffect)(() => {
+        setState({
+            query: mapModeToQuery(initialMode),
+            selectedIndex: 0,
+        });
+    }, [initialMode, invocationTimestamp]);
     const inputRef = (0, react_1.useRef)(null);
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const closeMenu = (0, react_1.useCallback)(() => undefined, []);
     const actions = (0, use_menu_structure_1.useMenuStructure)(closeMenu);
+    const [docResults, setDocResults] = (0, react_1.useState)({ type: 'initial' });
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const mode = state.query.startsWith('>') ? 'commands' : 'compositions';
+    const mode = mapQueryToMode(state.query);
     const actualQuery = (0, react_1.useMemo)(() => {
-        if (mode === 'commands') {
-            return state.query.substring(1).trim();
-        }
-        return state.query.trim();
-    }, [mode, state.query]);
+        return stripQuery(state.query);
+    }, [state.query]);
     const menuActions = (0, react_1.useMemo)(() => {
         if (mode !== 'commands') {
             return [];
@@ -92,6 +122,9 @@ const QuickSwitcherContent = () => {
         if (mode === 'commands') {
             return (0, fuzzy_search_1.fuzzySearch)(actualQuery, menuActions);
         }
+        if (mode === 'docs' && docResults.type === 'results') {
+            return docResults.results;
+        }
         return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions.map((c) => {
             return {
                 id: 'composition-' + c.id,
@@ -106,9 +139,10 @@ const QuickSwitcherContent = () => {
         }));
     }, [
         mode,
-        compositions,
         actualQuery,
+        compositions,
         menuActions,
+        docResults,
         selectComposition,
         setSelectedModal,
     ]);
@@ -140,6 +174,33 @@ const QuickSwitcherContent = () => {
             binding.unregister();
         };
     }, [keybindings, onArrowDown, onArrowUp]);
+    (0, react_1.useEffect)(() => {
+        if (mode !== 'docs') {
+            return;
+        }
+        if (actualQuery.trim() === '') {
+            setDocResults({ type: 'initial' });
+            return;
+        }
+        let cancelled = false;
+        setDocResults({ type: 'loading' });
+        (0, algolia_search_1.algoliaSearch)(actualQuery)
+            .then((agoliaResults) => {
+            if (cancelled) {
+                return;
+            }
+            setDocResults({ type: 'results', results: agoliaResults });
+        })
+            .catch((err) => {
+            if (cancelled) {
+                return;
+            }
+            setDocResults({ type: 'error', error: err });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [actualQuery, mode]);
     // Arrow down
     (0, react_1.useEffect)(() => {
         const binding = keybindings.registerKeybinding({
@@ -158,22 +219,49 @@ const QuickSwitcherContent = () => {
     const selectedIndexRounded = loopIndex(state.selectedIndex, resultsArray.length);
     const onActionsSelected = (0, react_1.useCallback)(() => {
         var _a;
-        setState({
-            query: '> ',
+        setState((s) => ({
+            query: `> ${stripQuery(s.query)}`,
             selectedIndex: 0,
-        });
+        }));
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
         var _a;
-        setState({
-            query: '',
+        setState((s) => ({
+            query: stripQuery(s.query),
             selectedIndex: 0,
-        });
+        }));
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const onDocSearchSelected = (0, react_1.useCallback)(() => {
+        var _a;
+        setState((s) => ({
+            query: `? ${stripQuery(s.query)}`,
+            selectedIndex: 0,
+        }));
+        setDocResults({ type: 'initial' });
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsxs)("div", { style: modeSelector, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" })] }), (0, jsx_runtime_1.jsx)("div", { style: content, children: (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", style: input, autoFocus: true, value: state.query, onChange: onTextChange, placeholder: "Search compositions..." }) }), (0, jsx_runtime_1.jsxs)("div", { style: results, children: [resultsArray.map((result, i) => {
-                        return ((0, jsx_runtime_1.jsx)(QuickSwitcherResult_1.QuickSwitcherResult, { selected: selectedIndexRounded === i, result: result }, result.id));
-                    }), resultsArray.length === 0 ? ((0, jsx_runtime_1.jsx)(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : null] })] }));
+    const showKeyboardShortcuts = mode === 'docs' && actualQuery.trim() === '';
+    const showSearchLoadingState = mode === 'docs' && docResults.type === 'loading';
+    const container = (0, react_1.useMemo)(() => {
+        return {
+            width: showKeyboardShortcuts ? 800 : 500,
+        };
+    }, [showKeyboardShortcuts]);
+    const results = (0, react_1.useMemo)(() => {
+        if (showKeyboardShortcuts) {
+            return {
+                maxHeight: 600,
+            };
+        }
+        return {
+            overflowY: 'auto',
+            height: 300,
+        };
+    }, [showKeyboardShortcuts]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsxs)("div", { style: modeSelector, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: onDocSearchSelected, style: mode === 'docs' ? modeActive : modeInactive, type: "button", children: "Documentation" })] }), (0, jsx_runtime_1.jsxs)("div", { style: content, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", style: input, autoFocus: true, value: state.query, onChange: onTextChange, placeholder: "Search compositions..." }), showKeyboardShortcuts ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), " ", (0, jsx_runtime_1.jsx)(AlgoliaCredit_1.AlgoliaCredit, {})] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: results, children: showKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(KeyboardShortcutsExplainer_1.KeyboardShortcutsExplainer, {})) : showSearchLoadingState ? null : resultsArray.length === 0 ? ((0, jsx_runtime_1.jsx)(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result, i) => {
+                    return ((0, jsx_runtime_1.jsx)(QuickSwitcherResult_1.QuickSwitcherResult, { selected: selectedIndexRounded === i, result: result }, result.id));
+                })) })] }));
 };
 exports.QuickSwitcherContent = QuickSwitcherContent;

package/dist/editor/components/QuickSwitcher/QuickSwitcherResult.d.ts

@@ -4,6 +4,10 @@ declare type QuickSwitcherResultDetail = {
     compositionType: 'composition' | 'still';
 } | {
     type: 'menu-item';
+} | {
+    type: 'search-result';
+    titleLine: string;
+    subtitleLine: string;
 };
 export declare type TQuickSwitcherResult = {
     title: string;

package/dist/editor/components/QuickSwitcher/QuickSwitcherResult.js

@@ -11,23 +11,29 @@ const layout_1 = require("../layout");
 const container = {
     paddingLeft: 16,
     paddingRight: 16,
-    paddingTop: 3,
-    paddingBottom: 3,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     cursor: 'pointer',
 };
 const label = {
-    flex: 1,
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
-    overflow: 'hidden',
+};
+const searchLabel = {
+    ...label,
+    lineHeight: 1.25,
 };
 const iconStyle = {
     width: 14,
     height: 14,
 };
+const labelContainer = {
+    overflow: 'hidden',
+    flex: 1,
+    paddingTop: 5,
+    paddingBottom: 5,
+};
 const QuickSwitcherResult = ({ result, selected }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -80,11 +86,23 @@ const QuickSwitcherResult = ({ result, selected }) => {
     }, [hovered, selected]);
     const labelStyle = (0, react_1.useMemo)(() => {
         return {
-            ...label,
-            color: selected || hovered ? 'white' : colors_1.LIGHT_TEXT,
+            ...(result.type === 'search-result' ? searchLabel : label),
+            color: result.type === 'search-result'
+                ? colors_1.LIGHT_TEXT
+                : selected || hovered
+                    ? 'white'
+                    : colors_1.LIGHT_TEXT,
             fontSize: 15,
         };
-    }, [hovered, selected]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(film_1.FilmIcon, { style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: result.title })] }, result.id));
+    }, [hovered, result.type, selected]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(film_1.FilmIcon, { style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML: {
+                                __html: result.titleLine,
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML: {
+                                __html: result.subtitleLine,
+                            } })] })) : ((0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: result.title })) })] }, result.id));
 };
 exports.QuickSwitcherResult = QuickSwitcherResult;

package/dist/editor/components/QuickSwitcher/agolia-search.d.ts

@@ -0,0 +1,2 @@
+import type { TQuickSwitcherResult } from './QuickSwitcherResult';
+export declare const agoliaSearch: (query: string) => Promise<TQuickSwitcherResult[]>;

package/dist/editor/components/QuickSwitcher/agolia-search.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.agoliaSearch = void 0;
+const AGOLIA_API_KEY = '3e42dbd4f895fe93ff5cf40d860c4a85';
+const AGOLIA_APPLICATION_ID = 'PLSDUOL1CA';
+const AGOLIA_SEARCH_URL = 'https://plsduol1ca-dsn.algolia.net/1/indexes/*/queries';
+const agoliaSearch = async (query) => {
+    const url = new URL(AGOLIA_SEARCH_URL);
+    url.searchParams.set('x-algolia-agen', encodeURIComponent('Remotion Preview DocSearch'));
+    url.searchParams.set('x-algolia-api-key', AGOLIA_API_KEY);
+    url.searchParams.set('x-algolia-application-id', AGOLIA_APPLICATION_ID);
+    const { results } = await fetch(url.toString(), {
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded',
+        },
+        body: JSON.stringify({
+            requests: [
+                {
+                    query,
+                    indexName: 'remotion',
+                    params: 'attributesToRetrieve=["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"]&attributesToSnippet=["hierarchy.lvl1:10","hierarchy.lvl2:10","hierarchy.lvl3:10","hierarchy.lvl4:10","hierarchy.lvl5:10","hierarchy.lvl6:10","content:10"]&snippetEllipsisText=…&highlightPreTag=<mark>&highlightPostTag=</mark>&hitsPerPage=20&facetFilters=[]',
+                },
+            ],
+        }),
+        method: 'POST',
+    }).then((res) => res.json());
+    const { hits } = results[0];
+    return hits.map((hit) => {
+        var _a;
+        return ({
+            type: 'menu-item',
+            id: hit.objectID,
+            title: (_a = hit.hierarchy[hit.type]) !== null && _a !== void 0 ? _a : '',
+            onSelected: () => {
+                window.open(hit.url);
+            },
+        });
+    });
+};
+exports.agoliaSearch = agoliaSearch;

package/dist/editor/components/QuickSwitcher/algolia-search.d.ts

@@ -0,0 +1,29 @@
+import type { TQuickSwitcherResult } from './QuickSwitcherResult';
+declare type Levels = 'lvl0' | 'lvl1' | 'lvl2' | 'lvl3' | 'lvl4' | 'lvl5' | 'lvl6';
+export declare type Match = {
+    value: string;
+    matchLevel: 'none' | 'partial' | 'full';
+};
+declare type DynamicHit = {
+    type: 'content';
+    _highlightResult: {
+        content: Match;
+        hierarchy: Record<Levels, Match>;
+    };
+} | {
+    type: Levels;
+    _highlightResult: {
+        hierarchy: Record<Levels, Match>;
+    };
+};
+declare type Hit = {
+    url: string;
+    hierarchy: Record<Levels, string | null>;
+    objectID: string;
+} & DynamicHit;
+export declare const algoliaSearch: (query: string) => Promise<TQuickSwitcherResult[]>;
+export declare const splitMatchIntoTitleAndSubtitle: (match: Hit) => {
+    title: string;
+    subtitle: string;
+};
+export {};

package/dist/editor/components/QuickSwitcher/algolia-search.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitMatchIntoTitleAndSubtitle = exports.algoliaSearch = void 0;
+const truthy_1 = require("../../../truthy");
+const ALGOLIA_API_KEY = '3e42dbd4f895fe93ff5cf40d860c4a85';
+const ALGOLIA_APPLICATION_ID = 'PLSDUOL1CA';
+const AGOLIA_SEARCH_URL = 'https://plsduol1ca-dsn.algolia.net/1/indexes/*/queries';
+const algoliaSearch = async (query) => {
+    const url = new URL(AGOLIA_SEARCH_URL);
+    url.searchParams.set('x-algolia-agen', encodeURIComponent('Remotion Preview DocSearch'));
+    url.searchParams.set('x-algolia-api-key', ALGOLIA_API_KEY);
+    url.searchParams.set('x-algolia-application-id', ALGOLIA_APPLICATION_ID);
+    const { results } = await fetch(url.toString(), {
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded',
+        },
+        body: JSON.stringify({
+            requests: [
+                {
+                    query,
+                    indexName: 'remotion',
+                    params: 'attributesToRetrieve=["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"]&attributesToSnippet=["hierarchy.lvl1:10","hierarchy.lvl2:10","hierarchy.lvl3:10","hierarchy.lvl4:10","hierarchy.lvl5:10","hierarchy.lvl6:10","content:10"]&hitsPerPage=20',
+                },
+            ],
+        }),
+        method: 'POST',
+    }).then((res) => res.json());
+    const { hits } = results[0];
+    return hits
+        .map((hit) => {
+        var _a;
+        const entries = Object.values(hit._highlightResult.hierarchy);
+        const result = (_a = entries.find((value) => value.matchLevel === 'full')) !== null && _a !== void 0 ? _a : entries.find((value) => value.matchLevel === 'partial');
+        const { subtitle, title } = (0, exports.splitMatchIntoTitleAndSubtitle)(hit);
+        if (!result) {
+            return null;
+        }
+        return {
+            type: 'search-result',
+            id: hit.objectID,
+            title: 'Should not display',
+            titleLine: title,
+            subtitleLine: subtitle,
+            onSelected: () => {
+                window.open(hit.url);
+            },
+        };
+    })
+        .filter(truthy_1.truthy);
+};
+exports.algoliaSearch = algoliaSearch;
+const splitMatchIntoTitleAndSubtitle = (match) => {
+    const main = match.type === 'content'
+        ? match._highlightResult.content
+        : match._highlightResult.hierarchy[match.type];
+    const title = main.value;
+    const subtitle = Object.entries(match._highlightResult.hierarchy)
+        .filter(([level]) => level !== match.type)
+        .map((value) => value[1].value)
+        .join(' • ');
+    return { title, subtitle };
+};
+exports.splitMatchIntoTitleAndSubtitle = splitMatchIntoTitleAndSubtitle;

package/dist/editor/helpers/use-menu-structure.js

@@ -4,6 +4,7 @@ exports.makeSearchResults = exports.useMenuStructure = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
 const truthy_1 = require("../../truthy");
 const layout_1 = require("../components/layout");
 const SizeSelector_1 = require("../components/SizeSelector");
@@ -199,7 +200,7 @@ const useMenuStructure = (closeMenu) => {
                                     subMenu: null,
                                     type: 'item',
                                     value: 'expanded',
-                                    quickSwitcherLabel: null,
+                                    quickSwitcherLabel: 'Expand',
                                 },
                                 {
                                     id: 'sidebar-collapsed',
@@ -212,7 +213,7 @@ const useMenuStructure = (closeMenu) => {
                                     subMenu: null,
                                     type: 'item',
                                     value: 'collapsed',
-                                    quickSwitcherLabel: null,
+                                    quickSwitcherLabel: 'Collapse',
                                 },
                             ],
                         },
@@ -292,6 +293,28 @@ const useMenuStructure = (closeMenu) => {
                         id: 'in-out-divider',
                         type: 'divider',
                     },
+                    {
+                        id: 'quick-switcher',
+                        keyHint: `${ShortcutHint_1.cmdOrCtrlCharacter}+K`,
+                        label: 'Quick Switcher',
+                        onClick: () => {
+                            closeMenu();
+                            setSelectedModal({
+                                type: 'quick-switcher',
+                                mode: 'compositions',
+                                invocationTimestamp: Date.now(),
+                            });
+                        },
+                        type: 'item',
+                        value: 'quick-switcher',
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Switch composition',
+                    },
+                    {
+                        id: 'in-out-divider',
+                        type: 'divider',
+                    },
                     {
                         id: 'in-mark',
                         keyHint: 'I',
@@ -374,7 +397,9 @@ const useMenuStructure = (closeMenu) => {
                         onClick: () => {
                             closeMenu();
                             setSelectedModal({
-                                type: 'shortcuts',
+                                type: 'quick-switcher',
+                                mode: 'docs',
+                                invocationTimestamp: Date.now(),
                             });
                         },
                         keyHint: '?',

package/dist/editor/state/modals.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { UpdateInfo } from '../components/UpdateCheck';
 export declare type CompType = 'composition' | 'still';
 export declare type ModalState = {
@@ -9,8 +10,8 @@ export declare type ModalState = {
     info: UpdateInfo;
 } | {
     type: 'quick-switcher';
-} | {
-    type: 'shortcuts';
+    mode: QuickSwitcherMode;
+    invocationTimestamp: number;
 };
 export declare type ModalContextType = {
     selectedModal: ModalState | null;

package/dist/get-cli-options.d.ts

@@ -31,7 +31,7 @@ export declare const getCliOptions: (options: {
     browserExecutable: BrowserExecutable;
     ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
     ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-    logLevel: "error" | "verbose" | "info" | "warn";
+    logLevel: "verbose" | "info" | "warn" | "error";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/get-composition-with-dimension-override.d.ts

@@ -0,0 +1,10 @@
+import type { TCompMetadata } from 'remotion';
+export declare const getCompositionWithDimensionOverride: ({ validCompositions, height, width, }: {
+    validCompositions: TCompMetadata[];
+    height: number | null;
+    width: number | null;
+}) => Promise<{
+    compositionId: string;
+    reason: string;
+    config: TCompMetadata;
+}>;

package/dist/get-composition-with-dimension-override.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompositionWithDimensionOverride = void 0;
+const get_composition_id_1 = require("./get-composition-id");
+const getCompositionWithDimensionOverride = async ({ validCompositions, height, width, }) => {
+    const returnValue = await (0, get_composition_id_1.getCompositionId)(validCompositions);
+    return {
+        ...returnValue,
+        config: {
+            ...returnValue.config,
+            height: height !== null && height !== void 0 ? height : returnValue.config.height,
+            width: width !== null && width !== void 0 ? width : returnValue.config.width,
+        },
+    };
+};
+exports.getCompositionWithDimensionOverride = getCompositionWithDimensionOverride;

package/dist/index.d.ts

@@ -90,7 +90,7 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
         ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;

package/dist/preview-server/error-overlay/remotion-overlay/ShortcutHint.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const cmdOrCtrlCharacter: string;
 export declare const ShortcutHint: React.FC<{
     keyToPress: string;
     cmdOrCtrl: boolean;

package/dist/preview-server/error-overlay/remotion-overlay/ShortcutHint.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShortcutHint = void 0;
+exports.ShortcutHint = exports.cmdOrCtrlCharacter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const cmdOrCtrlCharacter = window.navigator.platform.startsWith('Mac')
+exports.cmdOrCtrlCharacter = window.navigator.platform.startsWith('Mac')
     ? '⌘'
     : 'Ctrl';
 const container = {
@@ -11,6 +11,6 @@ const container = {
     opacity: 0.6,
 };
 const ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
-    return ((0, jsx_runtime_1.jsxs)("span", { style: container, children: [cmdOrCtrl ? `${cmdOrCtrlCharacter}+` : '', keyToPress.toUpperCase()] }));
+    return ((0, jsx_runtime_1.jsxs)("span", { style: container, children: [cmdOrCtrl ? `${exports.cmdOrCtrlCharacter}+` : '', keyToPress.toUpperCase()] }));
 };
 exports.ShortcutHint = ShortcutHint;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.2.37",
+	"version": "3.2.39",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -22,16 +22,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.2.37",
-		"@remotion/media-utils": "3.2.37",
-		"@remotion/player": "3.2.37",
-		"@remotion/renderer": "3.2.37",
+		"@remotion/bundler": "3.2.39",
+		"@remotion/media-utils": "3.2.39",
+		"@remotion/player": "3.2.39",
+		"@remotion/renderer": "3.2.39",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
 		"prompts": "2.4.1",
-		"remotion": "3.2.37",
+		"remotion": "3.2.39",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -44,7 +44,7 @@
 		"@types/minimist": "^1.2.2",
 		"@types/node": "^16.7.5",
 		"@types/prompts": "^2.4.1",
-		"@types/react": "18.0.1",
+		"@types/react": "18.0.23",
 		"@types/react-dom": "18.0.0",
 		"@types/semver": "^7.3.4",
 		"@types/webpack-env": "^1.16.0",
@@ -72,5 +72,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b4b40f35b14bac31fbee5d35b95e7fad9f464c94"
+	"gitHead": "406632092cb2b96ac34d489808283508298c4e1f"
 }

package/dist/check-version.d.ts

@@ -1 +0,0 @@
-export declare const checkNodeVersion: () => void;

package/dist/check-version.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkNodeVersion = void 0;
-const log_1 = require("./log");
-const semver = require('semver');
-const current = process.version;
-const supported = '>=12.10.0';
-const checkNodeVersion = () => {
-    if (!semver.satisfies(current, supported)) {
-        log_1.Log.warn(`Required node version ${supported} not satisfied with current version ${current}.`);
-        log_1.Log.warn(`Update your node version to ${supported}`);
-    }
-};
-exports.checkNodeVersion = checkNodeVersion;

package/dist/editor/components/QuickSwitcher.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const QuickSwitcher: React.FC<{}>;
-export default QuickSwitcher;

package/dist/editor/components/QuickSwitcher.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const colors_1 = require("../helpers/colors");
-const modals_1 = require("../state/modals");
-const ModalContainer_1 = require("./ModalContainer");
-const input = {
-    padding: 4,
-    border: '2px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-    width: '100%',
-};
-const content = {
-    padding: 16,
-    minWidth: 500,
-};
-const results = {
-    overflowY: 'auto',
-    maxHeight: 300,
-};
-const QuickSwitcher = (props) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const onQuit = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)("div", { style: content, children: (0, jsx_runtime_1.jsx)("input", { type: "text", style: input, autoFocus: true, placeholder: "Search compositions and commands" }) }), (0, jsx_runtime_1.jsx)("div", { style: results, children: compositions.map((c) => {
-                    return (0, jsx_runtime_1.jsx)("div", { children: c.id }, c.id);
-                }) })] }));
-};
-exports.default = QuickSwitcher;

package/dist/editor/helpers/use-menu-toolbar.js

@@ -1 +0,0 @@
-"use strict";

package/dist/validate-ffmpeg-version.d.ts

@@ -1,3 +0,0 @@
-export declare const checkAndValidateFfmpegVersion: (options: {
-    ffmpegExecutable: string | null;
-}) => Promise<void>;

package/dist/validate-ffmpeg-version.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkAndValidateFfmpegVersion = void 0;
-const renderer_1 = require("@remotion/renderer");
-const log_1 = require("./log");
-const warn_about_ffmpeg_version_1 = require("./warn-about-ffmpeg-version");
-const checkAndValidateFfmpegVersion = async (options) => {
-    const ffmpegVersion = await renderer_1.RenderInternals.getFfmpegVersion({
-        ffmpegExecutable: options.ffmpegExecutable,
-    });
-    const buildConf = await renderer_1.RenderInternals.getFfmpegBuildInfo({
-        ffmpegExecutable: options.ffmpegExecutable,
-    });
-    log_1.Log.verbose('Your FFMPEG version:', ffmpegVersion ? ffmpegVersion.join('.') : 'Built from source');
-    (0, warn_about_ffmpeg_version_1.warnAboutFfmpegVersion)({ ffmpegVersion, buildConf });
-};
-exports.checkAndValidateFfmpegVersion = checkAndValidateFfmpegVersion;

package/dist/warn-about-ffmpeg-version.d.ts

@@ -1,5 +0,0 @@
-import type { FfmpegVersion } from '@remotion/renderer';
-export declare const warnAboutFfmpegVersion: ({ ffmpegVersion, buildConf, }: {
-    ffmpegVersion: FfmpegVersion;
-    buildConf: string | null;
-}) => null | undefined;

package/dist/warn-about-ffmpeg-version.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.warnAboutFfmpegVersion = void 0;
-const log_1 = require("./log");
-const printMessage = (ffmpegVersion) => {
-    log_1.Log.warn('⚠️Old FFMPEG version detected: ' + ffmpegVersion.join('.'));
-    log_1.Log.warn('   For audio support, you need at least version 4.1.0.');
-    log_1.Log.warn('   Upgrade FFMPEG to get rid of this warning.');
-};
-const printBuildConfMessage = () => {
-    log_1.Log.error('⚠️  Unsupported FFMPEG version detected.');
-    log_1.Log.error("   Your version doesn't support the -buildconf flag");
-    log_1.Log.error('   Audio will not be supported and you may experience other issues.');
-    log_1.Log.error('   Upgrade FFMPEG to at least v4.1.0 to get rid of this warning.');
-};
-const warnAboutFfmpegVersion = ({ ffmpegVersion, buildConf, }) => {
-    if (buildConf === null) {
-        printBuildConfMessage();
-        return;
-    }
-    if (ffmpegVersion === null) {
-        return null;
-    }
-    const [major, minor] = ffmpegVersion;
-    // 3.x and below definitely is too old
-    if (major < 4) {
-        printMessage(ffmpegVersion);
-        return;
-    }
-    // 5.x will be all good
-    if (major > 4) {
-        return;
-    }
-    if (minor < 1) {
-        printMessage(ffmpegVersion);
-    }
-};
-exports.warnAboutFfmpegVersion = warnAboutFfmpegVersion;