@remotion/cli 3.2.34 → 3.2.35

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickSwitcherNoResults = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const container = {
+    padding: 80,
+    color: colors_1.LIGHT_TEXT,
+    textAlign: 'center',
+    fontSize: 14,
+};
+const QuickSwitcherNoResults = ({ query, mode }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: ["No ", mode === 'commands' ? 'commands' : 'compositions', " matching ", '"', query, '"'] }));
+};
+exports.QuickSwitcherNoResults = QuickSwitcherNoResults;

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../../state/modals");
+const ModalContainer_1 = require("../ModalContainer");
+const QuickSwitcherContent_1 = require("./QuickSwitcherContent");
+const QuickSwitcher = () => {
+    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, {}) }));
+};
+exports.default = QuickSwitcher;

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

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

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

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickSwitcherContent = void 0;
+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 is_composition_still_1 = require("../../helpers/is-composition-still");
+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 layout_1 = require("../layout");
+const fuzzy_search_1 = require("./fuzzy-search");
+const NoResults_1 = require("./NoResults");
+const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
+const input = {
+    padding: 4,
+    border: '2px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    width: '100%',
+};
+const container = {
+    width: 500,
+};
+const modeSelector = {
+    paddingLeft: 16,
+    paddingRight: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    paddingTop: 8,
+    paddingBottom: 5,
+};
+const modeItem = {
+    appearance: 'none',
+    border: 'none',
+    fontFamily: 'inherit',
+    padding: 0,
+    fontSize: 13,
+    cursor: 'pointer',
+};
+const modeInactive = {
+    ...modeItem,
+    color: colors_1.LIGHT_TEXT,
+};
+const modeActive = {
+    ...modeItem,
+    color: 'white',
+    fontWeight: 'bold',
+};
+const content = {
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 4,
+    paddingBottom: 10,
+};
+const results = {
+    overflowY: 'auto',
+    height: 300,
+};
+const loopIndex = (index, length) => {
+    if (index < 0) {
+        index += length;
+    }
+    return index % length;
+};
+const QuickSwitcherContent = () => {
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [state, setState] = (0, react_1.useState)({
+        query: '',
+        selectedIndex: 0,
+    });
+    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 { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const mode = state.query.startsWith('>') ? 'commands' : 'compositions';
+    const actualQuery = (0, react_1.useMemo)(() => {
+        if (mode === 'commands') {
+            return state.query.substring(1).trim();
+        }
+        return state.query.trim();
+    }, [mode, state.query]);
+    const menuActions = (0, react_1.useMemo)(() => {
+        if (mode !== 'commands') {
+            return [];
+        }
+        return (0, use_menu_structure_1.makeSearchResults)(actions, setSelectedModal);
+    }, [actions, mode, setSelectedModal]);
+    const resultsArray = (0, react_1.useMemo)(() => {
+        if (mode === 'commands') {
+            return (0, fuzzy_search_1.fuzzySearch)(actualQuery, menuActions);
+        }
+        return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions.map((c) => {
+            return {
+                id: 'composition-' + c.id,
+                title: c.id,
+                type: 'composition',
+                onSelected: () => {
+                    selectComposition(c, true);
+                    setSelectedModal(null);
+                },
+                compositionType: (0, is_composition_still_1.isCompositionStill)(c) ? 'still' : 'composition',
+            };
+        }));
+    }, [
+        mode,
+        compositions,
+        actualQuery,
+        menuActions,
+        selectComposition,
+        setSelectedModal,
+    ]);
+    const onArrowDown = (0, react_1.useCallback)(() => {
+        setState((s) => {
+            return {
+                ...s,
+                selectedIndex: s.selectedIndex + 1,
+            };
+        });
+    }, []);
+    const onArrowUp = (0, react_1.useCallback)(() => {
+        setState((s) => {
+            return {
+                ...s,
+                selectedIndex: s.selectedIndex - 1,
+            };
+        });
+    }, []);
+    // Arrow up
+    (0, react_1.useEffect)(() => {
+        const binding = keybindings.registerKeybinding({
+            key: 'ArrowUp',
+            callback: onArrowUp,
+            commandCtrlKey: false,
+            event: 'keydown',
+        });
+        return () => {
+            binding.unregister();
+        };
+    }, [keybindings, onArrowDown, onArrowUp]);
+    // Arrow down
+    (0, react_1.useEffect)(() => {
+        const binding = keybindings.registerKeybinding({
+            key: 'ArrowDown',
+            callback: onArrowDown,
+            commandCtrlKey: false,
+            event: 'keydown',
+        });
+        return () => {
+            binding.unregister();
+        };
+    }, [keybindings, onArrowDown]);
+    const onTextChange = (0, react_1.useCallback)((e) => {
+        setState({ query: e.target.value, selectedIndex: 0 });
+    }, []);
+    const selectedIndexRounded = loopIndex(state.selectedIndex, resultsArray.length);
+    const onActionsSelected = (0, react_1.useCallback)(() => {
+        var _a;
+        setState({
+            query: '> ',
+            selectedIndex: 0,
+        });
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const onCompositionsSelected = (0, react_1.useCallback)(() => {
+        var _a;
+        setState({
+            query: '',
+            selectedIndex: 0,
+        });
+        (_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] })] }));
+};
+exports.QuickSwitcherContent = QuickSwitcherContent;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type QuickSwitcherResultDetail = {
+    type: 'composition';
+    compositionType: 'composition' | 'still';
+} | {
+    type: 'menu-item';
+};
+export declare type TQuickSwitcherResult = {
+    title: string;
+    id: string;
+    onSelected: () => void;
+} & QuickSwitcherResultDetail;
+export declare const QuickSwitcherResult: React.FC<{
+    result: TQuickSwitcherResult;
+    selected: boolean;
+}>;
+export {};

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

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickSwitcherResult = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const film_1 = require("../../icons/film");
+const still_1 = require("../../icons/still");
+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 iconStyle = {
+    width: 14,
+    height: 14,
+};
+const QuickSwitcherResult = ({ result, selected }) => {
+    const [hovered, setIsHovered] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!selected) {
+            return;
+        }
+        const binding = keybindings.registerKeybinding({
+            key: 'Enter',
+            callback: result.onSelected,
+            commandCtrlKey: false,
+            event: 'keydown',
+        });
+        return () => {
+            binding.unregister();
+        };
+    }, [keybindings, result.onSelected, selected]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (selected) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                block: 'nearest',
+                inline: 'center',
+            });
+        }
+    }, [selected]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected,
+            }),
+        };
+    }, [hovered, selected]);
+    const labelStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...label,
+            color: 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));
+};
+exports.QuickSwitcherResult = QuickSwitcherResult;

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

@@ -0,0 +1,2 @@
+import type { TQuickSwitcherResult } from './QuickSwitcherResult';
+export declare function fuzzySearch(query: string, dataset: TQuickSwitcherResult[]): TQuickSwitcherResult[];

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fuzzySearch = void 0;
+function fuzzySearch(query, dataset) {
+    const q = query ? query.trim().toLowerCase() : '';
+    const matchingIndices = [];
+    if (q.length === 0) {
+        for (let i = 0; i < dataset.length; i++) {
+            matchingIndices.push(i);
+        }
+        return dataset.filter((_, i) => matchingIndices.includes(i));
+    }
+    dataset.forEach((d, index) => {
+        const s = d.title.trim().toLowerCase();
+        let i = 0;
+        let n = -1;
+        let l;
+        // eslint-disable-next-line no-bitwise
+        for (; (l = q[i++]);)
+            if (!~(n = s.indexOf(l, n + 1)))
+                return;
+        matchingIndices.push(index);
+    });
+    return dataset.filter((_, i) => matchingIndices.includes(i));
+}
+exports.fuzzySearch = fuzzySearch;

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

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

package/dist/editor/components/QuickSwitcher.js

@@ -0,0 +1,32 @@
+"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/components/SizeSelector.js

@@ -87,6 +87,7 @@ const SizeSelector = () => {
                 keyHint: newSize.size === 1 ? '0' : null,
                 leftItem: String(size.size) === String(newSize.size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
+                quickSwitcherLabel: null,
             };
         });
     }, [setSize, size]);

package/dist/editor/helpers/use-menu-structure.d.ts

@@ -0,0 +1,7 @@
+import type { Menu } from '../components/Menu/MenuItem';
+import type { TQuickSwitcherResult } from '../components/QuickSwitcher/QuickSwitcherResult';
+import type { ModalState } from '../state/modals';
+declare type Structure = Menu[];
+export declare const useMenuStructure: (closeMenu: () => void) => Structure;
+export declare const makeSearchResults: (actions: Structure, setSelectedModal: (value: React.SetStateAction<ModalState | null>) => void) => TQuickSwitcherResult[];
+export {};