@remotion/cli 2.3.0 → 2.3.4

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type CompType = 'composition' | 'still';
+export declare const CompositionType: React.FC<{
+    type: CompType;
+    onSelected: (type: CompType) => void;
+}>;
+//# sourceMappingURL=CompositionType.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompositionType.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/CompositionType.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAkB/E,oBAAY,QAAQ,GAAG,aAAa,GAAG,OAAO,CAAC;AAgE/C,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC,CAWA,CAAC"}

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionType = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const film_1 = require("../../icons/film");
+const still_1 = require("../../icons/still");
+const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
+const panel = {
+    flex: 1,
+    borderRadius: 8,
+    padding: 16,
+    cursor: 'pointer',
+    fontSize: 14,
+    flexDirection: 'row',
+    display: 'flex',
+    alignItems: 'center',
+};
+const Panel = ({ selected, type, onSelected }) => {
+    const ref = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onMouseEnter = () => setHovered(true);
+        const onMouseLeave = () => setHovered(false);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...panel,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected,
+            }),
+            color: 'white',
+            appearance: 'none',
+            border: 'none',
+            textAlign: 'left',
+        };
+    }, [hovered, selected]);
+    const onClick = (0, react_1.useCallback)(() => {
+        onSelected(type);
+    }, [onSelected, type]);
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref, tabIndex: tabIndex, type: "button", style: style, onClick: onClick }, { children: [type === 'composition' ? ((0, jsx_runtime_1.jsx)(film_1.FilmIcon, { style: { height: 18, width: 18 } }, void 0)) : ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { style: { height: 18, width: 18 } }, void 0)), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: type === 'composition' ? '<Composition>' : '<Still>' }, void 0), (0, jsx_runtime_1.jsx)("div", { children: type === 'composition' ? 'For videos' : 'For still images' }, void 0)] }, void 0)] }), void 0));
+};
+const CompositionType = ({ onSelected, type }) => {
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Panel, { onSelected: onSelected, type: "composition", selected: type === 'composition' }, void 0), (0, jsx_runtime_1.jsx)(Panel, { onSelected: onSelected, type: "still", selected: type === 'still' }, void 0)] }, void 0));
+};
+exports.CompositionType = CompositionType;
+//# sourceMappingURL=CompositionType.js.map

package/dist/editor/components/NewComposition/CompositionType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositionType.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/CompositionType.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import React, { InputHTMLAttributes } from 'react';
+declare type Props = InputHTMLAttributes<HTMLInputElement> & {
+    onValueChange: (newVal: number) => void;
+};
+export declare const InputDragger: React.FC<Props>;
+export {};
+//# sourceMappingURL=InputDragger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputDragger.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/InputDragger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACb,mBAAmB,EAMnB,MAAM,OAAO,CAAC;AAKf,aAAK,KAAK,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IACpD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6GxC,CAAC"}

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

@@ -0,0 +1,74 @@
+"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 input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
+const RemInput_1 = require("./RemInput");
+const InputDragger = ({ onValueChange, ...props }) => {
+    const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...RemInput_1.inputBaseStyle,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+        };
+    }, []);
+    const span = (0, react_1.useMemo)(() => ({
+        borderBottom: '1px dotted var(--blue)',
+        paddingBottom: 1,
+        color: 'var(--blue)',
+        cursor: 'ew-resize',
+        userSelect: 'none',
+    }), []);
+    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 onBlur = (0, react_1.useCallback)(() => {
+        setInputFallback(false);
+    }, []);
+    const onKeyPress = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Enter') {
+            setInputFallback(false);
+        }
+    }, []);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        const { pageX, pageY } = e;
+        const moveListener = (ev) => {
+            var _a, _b;
+            const xDistance = ev.pageX - pageX;
+            const distanceFromStart = Math.sqrt(xDistance ** 2 + (ev.pageY - pageY) ** 2);
+            const step = Number((_a = props.step) !== null && _a !== void 0 ? _a : 1);
+            const min = Number((_b = props.min) !== null && _b !== void 0 ? _b : 0);
+            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.max(min, Math.floor(Number(props.value) + diff));
+            const roundToStep = Math.floor(newValue / step) * step;
+            onValueChange(roundToStep);
+        };
+        window.addEventListener('mousemove', moveListener);
+        window.addEventListener('pointerup', () => {
+            window.removeEventListener('mousemove', moveListener);
+            setTimeout(() => {
+                (0, input_dragger_click_lock_1.setClickLock)(false);
+            }, 2);
+        }, {
+            once: true,
+        });
+    }, [onValueChange, props.min, props.step, props.value]);
+    if (inputFallback) {
+        return ((0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, Object.assign({ autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur }, props), void 0));
+    }
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ style: span }, { children: props.value }), void 0) }), void 0));
+};
+exports.InputDragger = InputDragger;
+//# sourceMappingURL=InputDragger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputDragger.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/InputDragger.tsx"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/MenuContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAMtE,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAUzC,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,KAAK,GAAG,MAAM,CAAC;IAC/B,sBAAsB,EAAE,OAAO,CAAC;CAChC,CAyPA,CAAC"}

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

@@ -0,0 +1,173 @@
+"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 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,
+};
+const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, }) => {
+    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' ? 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');
+        }
+        item.onClick(item.id);
+    }, [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]);
+    (0, react_1.useEffect)(() => {
+        const escapeBinding = keybindings.registerKeybinding('keydown', 'Escape', onEscape);
+        const rightBinding = keybindings.registerKeybinding('keydown', 'ArrowRight', onArrowRight);
+        const leftBinding = keybindings.registerKeybinding('keydown', 'ArrowLeft', onPreviousMenu);
+        const downBinding = keybindings.registerKeybinding('keydown', 'ArrowDown', onArrowDown);
+        const upBinding = keybindings.registerKeybinding('keydown', 'ArrowUp', onArrowUp);
+        const enterBinding = keybindings.registerKeybinding('keydown', 'Enter', onEnter);
+        const spaceBinding = keybindings.registerKeybinding('keyup', ' ', onEnter);
+        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", Object.assign({ ref: containerRef, style: container }, { children: values.map((item) => {
+            if (item.type === 'divider') {
+                return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
+            }
+            const onClick = () => {
+                onHide();
+                item.onClick(item.id);
+            };
+            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));
+        }) }), void 0));
+};
+exports.MenuContent = MenuContent;
+//# sourceMappingURL=MenuContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/MenuContent.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const NewCompHeader: React.FC;
+//# sourceMappingURL=ModalHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAmBrD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAYjC,CAAC"}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewCompHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../../state/modals");
+const layout_1 = require("../layout");
+const CancelButton_1 = require("./CancelButton");
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    width: '100%',
+    borderBottom: '1px solid black',
+};
+const icon = {
+    height: 20,
+    width: 20,
+};
+const NewCompHeader = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onPress = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: container }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "New composition" }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress }, void 0)] }), void 0));
+};
+exports.NewCompHeader = NewCompHeader;
+//# sourceMappingURL=ModalHeader.js.map

package/dist/editor/components/NewComposition/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ModalHeader.tsx"],"names":[],"mappings":";;;;AAAA,iCAAqD;AACrD,+CAAiD;AACjD,sCAA+B;AAC/B,iDAA4C;AAE5C,MAAM,SAAS,GAAwB;IACtC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,iBAAiB;CAC/B,CAAC;AAEF,MAAM,IAAI,GAAwB;IACjC,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACT,CAAC;AAEK,MAAM,aAAa,GAAa,GAAG,EAAE;IAC3C,MAAM,EAAC,gBAAgB,EAAC,GAAG,IAAA,kBAAU,EAAC,sBAAa,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAChC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvB,OAAO,CACN,+CAAK,KAAK,EAAE,SAAS,iBACpB,sEAA0B,EAC1B,uBAAC,aAAI,aAAG,EACR,uBAAC,2BAAY,IAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,WAAI,aAC1C,CACN,CAAC;AACH,CAAC,CAAC;AAZW,QAAA,aAAa,iBAYxB"}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const NewCompAspectRatio: React.FC<{
+    width: number;
+    height: number;
+    aspectRatioLocked: boolean;
+    setAspectRatioLocked: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+//# sourceMappingURL=NewCompAspectRatio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewCompAspectRatio.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompAspectRatio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACpE,CA6BA,CAAC"}

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

@@ -0,0 +1,19 @@
+"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 NewCompAspectRatio = ({ width, height, aspectRatioLocked, setAspectRatioLocked }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: {
+                display: 'flex',
+                flexDirection: 'row',
+                marginLeft: 10,
+                alignItems: 'center',
+            } }, { children: [(0, jsx_runtime_1.jsx)("svg", Object.assign({ 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)" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(ToggleAspectRatio_1.ToggleAspectRatio, { aspectRatioLocked: aspectRatioLocked, setAspectRatioLocked: setAspectRatioLocked }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: new_comp_layout_1.rightLabel }, { children: ["Aspect ratio ", (0, render_aspect_ratio_1.aspectRatio)(Number(width), Number(height))] }), void 0)] }), void 0) }, void 0));
+};
+exports.NewCompAspectRatio = NewCompAspectRatio;
+//# sourceMappingURL=NewCompAspectRatio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewCompAspectRatio.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompAspectRatio.tsx"],"names":[],"mappings":";;;;AACA,uDAA6C;AAC7C,+DAAkD;AAClD,2DAAsD;AAEtD,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,WAAW,GAAG,EAAE,CAAC;AAEhB,MAAM,kBAAkB,GAK1B,CAAC,EAAC,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,oBAAoB,EAAC,EAAE,EAAE;IACjE,OAAO,CACN,0CACC,+CACC,KAAK,EAAE;gBACN,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK;gBACpB,UAAU,EAAE,EAAE;gBACd,UAAU,EAAE,QAAQ;aACpB,iBAED,8CAAK,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,gBAC5C,iCACC,CAAC,EAAE,WAAW,WAAW,QAAQ,WAAW,IAAI,YAAY,QAAQ,YAAY,EAAE,EAClF,IAAI,EAAC,aAAa,EAClB,WAAW,EAAC,GAAG,EACf,MAAM,EAAC,0BAA0B,WAChC,YACG,EACN,uBAAC,qCAAiB,IACjB,iBAAiB,EAAE,iBAAiB,EACpC,oBAAoB,EAAE,oBAAoB,WACzC,EACF,+CAAK,KAAK,EAAE,4BAAU,kCACP,IAAA,iCAAW,EAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,aACnD,aACD,WACD,CACN,CAAC;AACH,CAAC,CAAC;AAlCW,QAAA,kBAAkB,sBAkC7B"}

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

@@ -0,0 +1,10 @@
+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)[])[];
+//# sourceMappingURL=NewCompCode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewCompCode.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompCode.tsx"],"names":[],"mappings":"AA2DA,eAAO,MAAM,qBAAqB;UAS3B,OAAO,GAAG,aAAa;YACrB,MAAM;WACP,MAAM;SACR,MAAM;sBACO,MAAM;UAClB,MAAM;SACP,OAAO;kEA4BZ,CAAC"}

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

@@ -0,0 +1,62 @@
+"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 makeProperty = (key, val, type, raw) => {
+    if (raw) {
+        return makePropertyRaw(key, val, type);
+    }
+    return [
+        `  `,
+        (0, jsx_runtime_1.jsx)("span", Object.assign({ style: { color: propColor } }, { children: key }), key + 'key'),
+        (0, jsx_runtime_1.jsx)("span", Object.assign({ style: { color: keywordColor } }, { children: '=' }), key + 'equal'),
+        type === 'string'
+            ? [
+                (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: strColor } }, { children: ['"', val, '"'] }), key + 'value'),
+            ]
+            : [
+                '{',
+                (0, jsx_runtime_1.jsx)("span", Object.assign({ style: { 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", Object.assign({ style: { color: '#79B8FF' } }, { children: compName }), "compname"),
+        (0, jsx_runtime_1.jsx)("br", {}, "linebr1"),
+        ...props,
+        '/>',
+    ];
+};
+exports.getNewCompositionCode = getNewCompositionCode;
+//# sourceMappingURL=NewCompCode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewCompCode.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompCode.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const NewCompDuration: React.FC<{
+    durationInFrames: string;
+    fps: string;
+    setDurationInFrames: React.Dispatch<React.SetStateAction<string>>;
+}>;
+//# sourceMappingURL=NewCompDuration.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewCompDuration.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompDuration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAW7D,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,gBAAgB,EAAE,MAAM,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAClE,CAsCA,CAAC"}

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

@@ -0,0 +1,24 @@
+"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 layout_1 = require("../layout");
+const InputDragger_1 = require("./InputDragger");
+const new_comp_layout_1 = require("./new-comp-layout");
+const label = {
+    fontSize: 13,
+    color: 'rgba(255, 255, 255, 0.5)',
+    marginLeft: 10,
+};
+const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
+    const onDurationInFramesChanged = (0, react_1.useCallback)((e) => {
+        setDurationInFrames(e.target.value);
+    }, [setDurationInFrames]);
+    const onDurationChangedDirectly = (0, react_1.useCallback)((newVal) => {
+        setDurationInFrames(String(newVal));
+    }, [setDurationInFrames]);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: new_comp_layout_1.leftLabel }, { children: " Duration in frames" }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: new_comp_layout_1.inputArea }, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "height", min: 1, onValueChange: onDurationChangedDirectly }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: new_comp_layout_1.rightLabel }, { children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] }), void 0)] }), void 0) }, void 0) }, void 0));
+};
+exports.NewCompDuration = NewCompDuration;
+//# sourceMappingURL=NewCompDuration.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewCompDuration.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompDuration.tsx"],"names":[],"mappings":";;;;AAAA,iCAA6D;AAC7D,sCAA8B;AAC9B,iDAA4C;AAC5C,uDAAmE;AAEnE,MAAM,KAAK,GAAwB;IAClC,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,0BAA0B;IACjC,UAAU,EAAE,EAAE;CACd,CAAC;AAEK,MAAM,eAAe,GAIvB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,EAAE,GAAG,EAAC,EAAE,EAAE;IACrD,MAAM,yBAAyB,GAAyC,IAAA,mBAAW,EAClF,CAAC,CAAC,EAAE,EAAE;QACL,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,mBAAmB,CAAC,CACrB,CAAC;IAEF,MAAM,yBAAyB,GAAG,IAAA,mBAAW,EAC5C,CAAC,MAAc,EAAE,EAAE;QAClB,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,mBAAmB,CAAC,CACrB,CAAC;IAEF,OAAO,CACN,0CACC,4CACC,wBAAC,YAAG,kBAAC,KAAK,EAAC,QAAQ,iBAClB,8CAAK,KAAK,EAAE,2BAAS,iDAA2B,EAChD,8CAAK,KAAK,EAAE,2BAAS,gBACpB,uBAAC,2BAAY,IACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,yBAAyB,EACnC,WAAW,EAAC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,EACN,aAAa,EAAE,yBAAyB,WACvC,YACG,EACN,gDAAM,KAAK,EAAE,4BAAU,iBACrB,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,oBAC9C,aACF,WACC,WACH,CACN,CAAC;AACH,CAAC,CAAC;AA1CW,QAAA,eAAe,mBA0C1B"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const NewCompHeader: React.FC;
+//# sourceMappingURL=NewCompHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewCompHeader.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAmBrD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAYjC,CAAC"}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewCompHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../../state/modals");
+const layout_1 = require("../layout");
+const CancelButton_1 = require("./CancelButton");
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    width: '100%',
+    borderBottom: '1px solid black',
+};
+const icon = {
+    height: 20,
+    width: 20,
+};
+const NewCompHeader = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onPress = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: container }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "New composition" }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress }, void 0)] }), void 0));
+};
+exports.NewCompHeader = NewCompHeader;
+//# sourceMappingURL=NewCompHeader.js.map