@remotion/cli 4.0.79 → 4.0.82

package/dist/editor/components/NewComposition/InputDragger.js

@@ -1,122 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDragger = 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 noop_1 = require("../../helpers/noop");
-const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
-const z_index_1 = require("../../state/z-index");
-const RemInput_1 = require("./RemInput");
-const isInt = (num) => {
-    return num % 1 === 0;
-};
-const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }) => {
-    const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
-    const fallbackRef = (0, react_1.useRef)(null);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...RemInput_1.inputBaseStyle,
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
-        };
-    }, []);
-    const span = (0, react_1.useMemo)(() => ({
-        borderBottom: '1px dotted ' + colors_1.BLUE,
-        paddingBottom: 1,
-        color: colors_1.BLUE,
-        cursor: 'ew-resize',
-        userSelect: 'none',
-        fontSize: 13,
-        fontVariantNumeric: 'tabular-nums',
-    }), []);
-    const onClick = (0, react_1.useCallback)((e) => {
-        if (!(0, input_dragger_click_lock_1.getClickLock)()) {
-            e.stopPropagation();
-        }
-        if ((0, input_dragger_click_lock_1.getClickLock)()) {
-            return;
-        }
-        setInputFallback(true);
-    }, []);
-    const onEscape = (0, react_1.useCallback)(() => {
-        setInputFallback(false);
-    }, []);
-    const onBlur = (0, react_1.useCallback)(() => {
-        if (!fallbackRef.current) {
-            return;
-        }
-        const newValue = fallbackRef.current.value;
-        if (newValue.trim() === '') {
-            onEscape();
-            return;
-        }
-        if (fallbackRef.current.checkValidity()) {
-            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newValue);
-            setInputFallback(false);
-        }
-        else {
-            fallbackRef.current.reportValidity();
-        }
-    }, [onEscape, onTextChange]);
-    const onKeyPress = (0, react_1.useCallback)((e) => {
-        var _a;
-        if (e.key === 'Enter') {
-            (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-        }
-    }, []);
-    const roundToStep = (val, stepSize) => {
-        const factor = 1 / stepSize;
-        return Math.ceil(val * factor) / factor;
-    };
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        const { pageX, pageY, button } = e;
-        if (button !== 0) {
-            return;
-        }
-        const moveListener = (ev) => {
-            const xDistance = ev.pageX - pageX;
-            const distanceFromStart = Math.sqrt(xDistance ** 2 + (ev.pageY - pageY) ** 2);
-            const step = Number(_step !== null && _step !== void 0 ? _step : 1);
-            const min = Number(_min !== null && _min !== void 0 ? _min : 0);
-            const max = Number(_max !== null && _max !== void 0 ? _max : Infinity);
-            if (distanceFromStart > 4) {
-                (0, input_dragger_click_lock_1.setClickLock)(true);
-            }
-            const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
-            const newValue = Math.min(max, Math.max(min, Number(value) + diff));
-            const roundedToStep = roundToStep(newValue, step);
-            onValueChange(roundedToStep);
-        };
-        window.addEventListener('mousemove', moveListener);
-        window.addEventListener('pointerup', () => {
-            window.removeEventListener('mousemove', moveListener);
-            setTimeout(() => {
-                (0, input_dragger_click_lock_1.setClickLock)(false);
-            }, 2);
-        }, {
-            once: true,
-        });
-    }, [_step, _min, _max, value, onValueChange]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (inputFallback) {
-            (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.select();
-        }
-    }, [inputFallback]);
-    const deriveStep = (0, react_1.useMemo)(() => {
-        if (_step !== undefined) {
-            return _step;
-        }
-        if (typeof _min === 'number' && isInt(_min)) {
-            return 1;
-        }
-        return 0.0001;
-    }, [_min, _step]);
-    if (inputFallback) {
-        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props }) }));
-    }
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: formatter(value) }) }));
-};
-exports.InputDragger = InputDragger;

package/dist/editor/components/NewComposition/MenuContent.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { ComboboxValue } from './ComboBox';
-export declare const MenuContent: React.FC<{
-    values: ComboboxValue[];
-    onHide: () => void;
-    onNextMenu: () => void;
-    onPreviousMenu: () => void;
-    leaveLeftSpace: boolean;
-    preselectIndex: false | number;
-    topItemCanBeUnselected: boolean;
-    fixedHeight: number | null;
-}>;

package/dist/editor/components/NewComposition/MenuContent.js

@@ -1,245 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuContent = 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 is_menu_item_1 = require("../Menu/is-menu-item");
-const MenuDivider_1 = require("../Menu/MenuDivider");
-const MenuSubItem_1 = require("../Menu/MenuSubItem");
-const styles_1 = require("../Menu/styles");
-const BORDER_SIZE = 1;
-const container = {
-    paddingTop: styles_1.MENU_VERTICAL_PADDING,
-    paddingBottom: styles_1.MENU_VERTICAL_PADDING,
-    border: `${BORDER_SIZE}px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
-    marginLeft: 0 - BORDER_SIZE,
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    minWidth: 200,
-    maxWidth: styles_1.MAX_MENU_WIDTH,
-};
-const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, fixedHeight, }) => {
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const containerRef = (0, react_1.useRef)(null);
-    const [subMenuActivated, setSubMenuActivated] = (0, react_1.useState)(false);
-    if (values[0].type === 'divider') {
-        throw new Error('first value cant be divide');
-    }
-    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number' && preselectIndex >= 0
-        ? values[preselectIndex].id
-        : null);
-    const onEscape = (0, react_1.useCallback)(() => {
-        onHide();
-    }, [onHide]);
-    const onItemSelected = (0, react_1.useCallback)((id) => {
-        setSelectedItem(id);
-    }, []);
-    const onArrowUp = (0, react_1.useCallback)(() => {
-        setSelectedItem((prevItem) => {
-            if (prevItem === null) {
-                return null;
-            }
-            const index = values.findIndex((val) => val.id === prevItem);
-            if ((topItemCanBeUnselected && index === 0) || prevItem === null) {
-                return null;
-            }
-            const previousItems = values.filter((v, i) => i < index && v.type !== 'divider');
-            if (previousItems.length > 0) {
-                return previousItems[previousItems.length - 1].id;
-            }
-            const firstNonDivider = values.find((v) => v.type !== 'divider');
-            if (firstNonDivider) {
-                return firstNonDivider.id;
-            }
-            throw new Error('could not find previous item');
-        });
-    }, [topItemCanBeUnselected, values]);
-    const onArrowDown = (0, react_1.useCallback)(() => {
-        setSelectedItem((prevItem) => {
-            const index = values.findIndex((val) => val.id === prevItem);
-            const nextItem = values.find((v, i) => i > index && v.type !== 'divider');
-            if (nextItem) {
-                return nextItem.id;
-            }
-            const lastNonDivider = values
-                .slice()
-                .reverse()
-                .find((v) => v.type !== 'divider');
-            if (lastNonDivider) {
-                return lastNonDivider.id;
-            }
-            throw new Error('could not find next item');
-        });
-    }, [values]);
-    const onEnter = (0, react_1.useCallback)(() => {
-        if (selectedItem === null) {
-            return onHide();
-        }
-        const item = values.find((i) => i.id === selectedItem);
-        if (!item) {
-            throw new Error('cannot find item');
-        }
-        if (item.type === 'divider') {
-            throw new Error('cannot find divider');
-        }
-        if (item.subMenu) {
-            return setSubMenuActivated('without-mouse');
-        }
-        onHide();
-        item.onClick(item.id, null);
-    }, [onHide, selectedItem, values]);
-    const onArrowRight = (0, react_1.useCallback)(() => {
-        if (selectedItem === null) {
-            return onNextMenu();
-        }
-        const item = values.find((i) => i.id === selectedItem);
-        if (!item) {
-            throw new Error('cannot find item');
-        }
-        if (item.type === 'divider') {
-            throw new Error('cannot find divider');
-        }
-        if (!item.subMenu) {
-            return onNextMenu();
-        }
-        setSubMenuActivated('without-mouse');
-    }, [onNextMenu, selectedItem, values]);
-    const containerWithHeight = (0, react_1.useMemo)(() => {
-        if (fixedHeight === null) {
-            return { ...container, maxHeight: 600 };
-        }
-        return {
-            ...container,
-            maxHeight: fixedHeight,
-        };
-    }, [fixedHeight]);
-    (0, react_1.useEffect)(() => {
-        const escapeBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'Escape',
-            callback: onEscape,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const rightBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'ArrowRight',
-            commandCtrlKey: false,
-            callback: onArrowRight,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const leftBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            commandCtrlKey: false,
-            key: 'ArrowLeft',
-            callback: onPreviousMenu,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const downBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'ArrowDown',
-            commandCtrlKey: false,
-            callback: onArrowDown,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const upBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'ArrowUp',
-            callback: onArrowUp,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const enterBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'Enter',
-            callback: onEnter,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const spaceBinding = keybindings.registerKeybinding({
-            event: 'keyup',
-            key: ' ',
-            callback: onEnter,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            escapeBinding.unregister();
-            leftBinding.unregister();
-            rightBinding.unregister();
-            downBinding.unregister();
-            upBinding.unregister();
-            enterBinding.unregister();
-            spaceBinding.unregister();
-        };
-    }, [
-        keybindings,
-        onEscape,
-        onNextMenu,
-        onPreviousMenu,
-        onArrowDown,
-        onArrowUp,
-        onEnter,
-        onArrowRight,
-    ]);
-    // Disable submenu if not selected
-    (0, react_1.useEffect)(() => {
-        if (!subMenuActivated) {
-            return;
-        }
-        if (selectedItem === null) {
-            return setSubMenuActivated(false);
-        }
-        const item = values.find((i) => i.id === selectedItem);
-        if (!item) {
-            throw new Error('cannot find item');
-        }
-        if (item.type === 'divider') {
-            throw new Error('should not select divider');
-        }
-        if (!item.subMenu && subMenuActivated) {
-            setSubMenuActivated(false);
-        }
-    }, [selectedItem, subMenuActivated, values]);
-    (0, react_1.useEffect)(() => {
-        const { current } = containerRef;
-        if (!current) {
-            return;
-        }
-        const onPointerLeave = () => {
-            if (subMenuActivated) {
-                return;
-            }
-            setSelectedItem(null);
-        };
-        current.addEventListener('pointerleave', onPointerLeave);
-        return () => current.removeEventListener('pointerleave', onPointerLeave);
-    }, [onHide, subMenuActivated]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: containerWithHeight, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
-            if (item.type === 'divider') {
-                return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
-            }
-            const onClick = (id, e) => {
-                onHide();
-                item.onClick(id, e);
-            };
-            return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated }, item.id));
-        }) }));
-};
-exports.MenuContent = MenuContent;

package/dist/editor/components/NewComposition/NewCompAspectRatio.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare const NewCompAspectRatio: React.FC<{
-    width: number;
-    height: number;
-    aspectRatioLocked: number | null;
-    setAspectRatioLocked: (newOption: boolean) => void;
-}>;

package/dist/editor/components/NewComposition/NewCompAspectRatio.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewCompAspectRatio = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const new_comp_layout_1 = require("./new-comp-layout");
-const render_aspect_ratio_1 = require("./render-aspect-ratio");
-const ToggleAspectRatio_1 = require("./ToggleAspectRatio");
-const GUIDE_HEIGHT = 55;
-const GUIDE_WIDTH = 10;
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    marginLeft: 10,
-    alignItems: 'center',
-};
-const NewCompAspectRatio = ({ width, height, aspectRatioLocked, setAspectRatioLocked }) => {
-    const pixels = Number(width) * Number(height);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("svg", { width: GUIDE_WIDTH, height: GUIDE_HEIGHT, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 0 L ${GUIDE_WIDTH} 0 L ${GUIDE_WIDTH} ${GUIDE_HEIGHT} L 0 ${GUIDE_HEIGHT}`, fill: "transparent", strokeWidth: "2", stroke: "rgba(255, 255, 255, 0.2)" }) }), (0, jsx_runtime_1.jsx)(ToggleAspectRatio_1.ToggleAspectRatio, { aspectRatioLocked: Boolean(aspectRatioLocked), setAspectRatioLocked: setAspectRatioLocked }), pixels > 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.rightLabel, children: ["Aspect ratio ", (0, render_aspect_ratio_1.aspectRatio)(Number(width), Number(height))] })) : null] }) }));
-};
-exports.NewCompAspectRatio = NewCompAspectRatio;

package/dist/editor/components/NewComposition/NewCompCode.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export declare const getNewCompositionCode: ({ type, height, width, fps, durationInFrames, name, raw, }: {
-    type: 'still' | 'composition';
-    height: number;
-    width: number;
-    fps: number;
-    durationInFrames: number;
-    name: string;
-    raw: boolean;
-}) => string | (string | JSX.Element | (string | JSX.Element)[])[];

package/dist/editor/components/NewComposition/NewCompCode.js

@@ -1,67 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNewCompositionCode = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const strColor = '#9ECBFF';
-const consColor = '#79B8FF';
-const propColor = '#B392F0';
-const keywordColor = '#F97583';
-const cssReset = {
-    fontFamily: 'monospace',
-};
-const makeProperty = (key, val, type, raw) => {
-    if (raw) {
-        return makePropertyRaw(key, val, type);
-    }
-    return [
-        `  `,
-        (0, jsx_runtime_1.jsx)("span", { style: { ...cssReset, color: propColor }, children: key }, key + 'key'),
-        (0, jsx_runtime_1.jsx)("span", { style: { ...cssReset, color: keywordColor }, children: '=' }, key + 'equal'),
-        type === 'string'
-            ? [
-                (0, jsx_runtime_1.jsxs)("span", { style: { ...cssReset, color: strColor }, children: ['"', val, '"'] }, key + 'value'),
-            ]
-            : [
-                '{',
-                (0, jsx_runtime_1.jsx)("span", { style: {
-                        ...cssReset,
-                        color: typeof val === 'number' ? consColor : strColor,
-                    }, children: val }, key + 'value'),
-                '}',
-            ],
-        (0, jsx_runtime_1.jsx)("br", {}, key + 'br'),
-    ];
-};
-const makePropertyRaw = (key, val, type) => {
-    return [
-        `  `,
-        key,
-        '=',
-        type === 'string' ? ['"' + val + '"'].join('') : ['{', val, '}'].join(''),
-        '\n',
-    ].join('');
-};
-const getNewCompositionCode = ({ type, height, width, fps, durationInFrames, name, raw, }) => {
-    const compName = type === 'still' ? 'Still' : 'Composition';
-    const props = [
-        ...makeProperty('id', name, 'string', raw),
-        ...makeProperty('component', name, 'const', raw),
-        ...(type === 'composition'
-            ? makeProperty('durationInFrames', durationInFrames, 'const', raw)
-            : []),
-        ...makeProperty('height', height, 'const', raw),
-        ...makeProperty('width', width, 'const', raw),
-        ...(type === 'composition' ? makeProperty('fps', fps, 'const', raw) : []),
-    ];
-    if (raw) {
-        return ['<', compName, '\n', ...props, '/>'].join('');
-    }
-    return [
-        `<`,
-        (0, jsx_runtime_1.jsx)("span", { style: { ...cssReset, color: '#79B8FF' }, children: compName }, "compname"),
-        (0, jsx_runtime_1.jsx)("br", {}, "linebr1"),
-        ...props,
-        '/>',
-    ];
-};
-exports.getNewCompositionCode = getNewCompositionCode;

package/dist/editor/components/NewComposition/NewCompDuration.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const NewCompDuration: React.FC<{
-    durationInFrames: string;
-    fps: string;
-    setDurationInFrames: React.Dispatch<React.SetStateAction<string>>;
-}>;

package/dist/editor/components/NewComposition/NewCompDuration.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewCompDuration = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
-const layout_1 = require("../layout");
-const InputDragger_1 = require("./InputDragger");
-const new_comp_layout_1 = require("./new-comp-layout");
-const ValidationMessage_1 = require("./ValidationMessage");
-const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
-    const onDurationInFramesChanged = (0, react_1.useCallback)((newValue) => {
-        setDurationInFrames(String(Number(newValue)));
-    }, [setDurationInFrames]);
-    const onDurationChangedDirectly = (0, react_1.useCallback)((newVal) => {
-        setDurationInFrames(String(newVal));
-    }, [setDurationInFrames]);
-    const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
-                                // Hitting Promise.all() limit in Chrome
-                                max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })] })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
-};
-exports.NewCompDuration = NewCompDuration;

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { CompType } from '../../state/modals';
-declare const NewComposition: React.FC<{
-    initialCompType: CompType;
-}>;
-export default NewComposition;