@remotion/cli 2.3.0 → 2.3.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewCompHeader.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompHeader.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/NewComposition.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CompType } from './CompositionType';
+export declare const NewComposition: React.FC<{
+    initialCompType: CompType;
+}>;
+//# sourceMappingURL=NewComposition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewComposition.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewComposition.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AASf,OAAO,EAAkB,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAsC5D,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,eAAe,EAAE,QAAQ,CAAA;CAAC,CAyOhE,CAAC"}

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

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewComposition = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const Checkmark_1 = require("../../icons/Checkmark");
+const modals_1 = require("../../state/modals");
+const CopyButton_1 = require("../CopyButton");
+const layout_1 = require("../layout");
+const ModalContainer_1 = require("../ModalContainer");
+const ModalHeader_1 = require("../ModalHeader");
+const ComboBox_1 = require("./ComboBox");
+const CompositionType_1 = require("./CompositionType");
+const InputDragger_1 = require("./InputDragger");
+const new_comp_layout_1 = require("./new-comp-layout");
+const NewCompAspectRatio_1 = require("./NewCompAspectRatio");
+const NewCompCode_1 = require("./NewCompCode");
+const NewCompDuration_1 = require("./NewCompDuration");
+const RemInput_1 = require("./RemInput");
+const ValidationMessage_1 = require("./ValidationMessage");
+const panelContent = {
+    flexDirection: 'row',
+    display: 'flex',
+    width: 1100,
+    height: 450,
+};
+const left = {
+    padding: 12,
+    paddingBottom: 80,
+    paddingRight: 12,
+    flex: 1,
+};
+const panelRight = {
+    width: 400,
+    backgroundColor: 'black',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+};
+const pre = {
+    fontSize: 17,
+};
+const commonFrameRates = [24, 25, 29.97, 30, 48, 50];
+const NewComposition = ({ initialCompType, }) => {
+    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(String(commonFrameRates[0]));
+    const [type, setType] = (0, react_1.useState)(initialCompType);
+    const [name, setName] = (0, react_1.useState)('MyComp');
+    const [width, setWidth] = (0, react_1.useState)('1280');
+    const [height, setHeight] = (0, react_1.useState)('720');
+    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)('150');
+    const [aspectRatioLocked, setAspectRatioLocked] = (0, react_1.useState)(false);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onQuit = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const onTypeChanged = (0, react_1.useCallback)((newType) => {
+        setType(newType);
+    }, []);
+    const onWidthChanged = (0, react_1.useCallback)((e) => {
+        setWidth(e.target.value);
+    }, []);
+    const onWidthDirectlyChanged = (0, react_1.useCallback)((newWidth) => {
+        setWidth(String(newWidth));
+    }, []);
+    const onHeightDirectlyChanged = (0, react_1.useCallback)((newHeight) => {
+        setHeight(String(newHeight));
+    }, []);
+    const onHeightChanged = (0, react_1.useCallback)((e) => {
+        setHeight(e.target.value);
+    }, []);
+    const onNameChange = (0, react_1.useCallback)((e) => {
+        setName(e.target.value);
+    }, []);
+    const onFpsChange = (0, react_1.useCallback)((newFps) => {
+        setFrameRate(String(newFps));
+    }, []);
+    const items = (0, react_1.useMemo)(() => {
+        return commonFrameRates.map((frameRate) => {
+            return {
+                id: String(frameRate),
+                label: `${frameRate}fps`,
+                onClick: () => onFpsChange(frameRate),
+                type: 'item',
+                value: frameRate,
+                keyHint: null,
+                leftItem: String(frameRate) === selectedFrameRate ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                subMenu: null,
+            };
+        });
+    }, [onFpsChange, selectedFrameRate]);
+    const isValidCompName = remotion_1.Internals.isCompositionIdValid(name);
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, Object.assign({ onOutsideClick: onQuit, onEscape: onQuit }, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: panelContent }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: left }, { children: [(0, jsx_runtime_1.jsx)(CompositionType_1.CompositionType, { onSelected: onTypeChanged, type: type }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }, void 0), (0, jsx_runtime_1.jsxs)("form", { 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: "Name" }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: new_comp_layout_1.inputArea }, { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }, void 0), isValidCompName ? null : ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: remotion_1.Internals.invalidCompositionErrorMessage }, void 0))] }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                        } }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(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: "Width" }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: new_comp_layout_1.inputArea }, { children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: width, placeholder: "Width (px)", onChange: onWidthChanged, name: "width", step: 2, min: 2, onValueChange: onWidthDirectlyChanged }, void 0), Number(width) % 2 === 0 ? null : ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: "Dimension should be divisible by 2, since H264 codec doesn't support odd dimensions.." }, void 0))] }), void 0)] }), void 0) }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), (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: "Height" }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: new_comp_layout_1.inputArea }, { children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: height, onChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, min: 2, onValueChange: onHeightDirectlyChanged }, void 0), Number(height) % 2 === 0 ? null : ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: "Dimension should be divisible by 2, since H264 codec doesn't support odd dimensions.." }, void 0))] }), void 0)] }), void 0) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(width), height: Number(height), aspectRatioLocked: aspectRatioLocked, setAspectRatioLocked: setAspectRatioLocked }, void 0) }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames }, void 0)) : null, (0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: new_comp_layout_1.leftLabel }, { children: "Framerate" }), void 0), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { style: {
+                                                            width: new_comp_layout_1.inputArea.width,
+                                                        }, values: items, selectedId: selectedFrameRate }, void 0)] }, void 0)] }, void 0)) : null] }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: panelRight }, { children: [(0, jsx_runtime_1.jsx)("pre", Object.assign({ style: pre }, { children: (0, NewCompCode_1.getNewCompositionCode)({
+                                    type,
+                                    durationInFrames: Number(durationInFrames),
+                                    fps: Number(selectedFrameRate),
+                                    height: Number(height),
+                                    width: Number(width),
+                                    name,
+                                    raw: false,
+                                }) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
+                                    position: 'absolute',
+                                    bottom: 10,
+                                    right: 10,
+                                } }, { children: (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { label: "Copy code", labelWhenCopied: "Copied!", textToCopy: (0, NewCompCode_1.getNewCompositionCode)({
+                                        type,
+                                        durationInFrames: Number(durationInFrames),
+                                        fps: Number(selectedFrameRate),
+                                        height: Number(height),
+                                        width: Number(width),
+                                        name,
+                                        raw: true,
+                                    }) }, void 0) }), void 0)] }), void 0)] }), void 0)] }), void 0));
+};
+exports.NewComposition = NewComposition;
+//# sourceMappingURL=NewComposition.js.map

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const inputBaseStyle: React.CSSProperties;
+export declare const RemotionInput: (props: React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+//# sourceMappingURL=RemInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemInput.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/RemInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAef,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,aAOlC,CAAC;AAyDF,eAAO,MAAM,aAAa;;8HAAiC,CAAC"}

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemotionInput = exports.inputBaseStyle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const font_1 = require("../../helpers/font");
+const z_index_1 = require("../../state/z-index");
+exports.inputBaseStyle = {
+    fontFamily: font_1.FONT_FAMILY,
+    padding: '8px 10px',
+    color: 'white',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    fontSize: 14,
+};
+const RemInputForwardRef = (props, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...exports.inputBaseStyle,
+            width: '100%',
+            borderColor: isFocused
+                ? colors_1.SELECTED_BACKGROUND
+                : isHovered
+                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                    : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    });
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [inputRef]);
+    return (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: inputRef, tabIndex: tabIndex }, props, { style: style }), void 0);
+};
+exports.RemotionInput = (0, react_1.forwardRef)(RemInputForwardRef);
+//# sourceMappingURL=RemInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemInput.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/RemInput.tsx"],"names":[],"mappings":";;;;AAAA,iCAOe;AACf,iDAK8B;AAC9B,6CAA+C;AAC/C,iDAA8C;AAOjC,QAAA,cAAc,GAAwB;IAClD,UAAU,EAAE,kBAAW;IACvB,OAAO,EAAE,UAAU;IACnB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,CAAC;IACd,QAAQ,EAAE,EAAE;CACZ,CAAC;AAEF,MAAM,kBAAkB,GAGpB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAClB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAA,mBAAS,GAAE,CAAC;IAE/B,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;;QAC1B,OAAO;YACN,eAAe,EAAE,yBAAgB;YACjC,GAAG,sBAAc;YACjB,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,SAAS;gBACrB,CAAC,CAAC,4BAAmB;gBACrB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,mCAA0B;oBAC5B,CAAC,CAAC,qCAA4B;YAC/B,GAAG,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC;SACtB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAExC,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,OAA2B,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YACtB,OAAO;SACP;QAED,MAAM,EAAC,OAAO,EAAC,GAAG,QAAQ,CAAC;QAE3B,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACzC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAC9C,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAE/C,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC3C,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACzC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACrD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAErD,OAAO,GAAG,EAAE;YACX,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC9C,OAAO,CAAC,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YAC5C,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;YACxD,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACzD,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,gDAAO,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,IAAM,KAAK,IAAE,KAAK,EAAE,KAAK,YAAI,CAAC;AAC9E,CAAC,CAAC;AAEW,QAAA,aAAa,GAAG,IAAA,kBAAU,EAAC,kBAAkB,CAAC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleAspectRatio.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ToggleAspectRatio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAe5D,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACpE,CAaA,CAAC"}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleAspectRatio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const lock_1 = require("../../icons/lock");
+const buttonStyle = {
+    backgroundColor: colors_1.BACKGROUND,
+    border: 'none',
+    position: 'absolute',
+};
+const iconStyle = {
+    width: 14,
+    color: 'white',
+};
+const ToggleAspectRatio = ({ aspectRatioLocked, setAspectRatioLocked }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        setAspectRatioLocked((a) => !a);
+    }, [setAspectRatioLocked]);
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", onClick: onClick, style: buttonStyle }, { children: aspectRatioLocked ? ((0, jsx_runtime_1.jsx)(lock_1.LockIcon, { style: iconStyle }, void 0)) : ((0, jsx_runtime_1.jsx)(lock_1.UnlockIcon, { style: iconStyle }, void 0)) }), void 0));
+};
+exports.ToggleAspectRatio = ToggleAspectRatio;
+//# sourceMappingURL=ToggleAspectRatio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleAspectRatio.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ToggleAspectRatio.tsx"],"names":[],"mappings":";;;;AAAA,iCAA4D;AAC5D,iDAAgD;AAChD,2CAAsD;AAEtD,MAAM,WAAW,GAAwB;IACxC,eAAe,EAAE,mBAAU;IAC3B,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,UAAU;CACpB,CAAC;AAEF,MAAM,SAAS,GAAwB;IACtC,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,OAAO;CACd,CAAC;AAEK,MAAM,iBAAiB,GAGzB,CAAC,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,EAAE,EAAE;IAClD,MAAM,OAAO,GAAsB,IAAA,mBAAW,EAAC,GAAG,EAAE;QACnD,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC3B,OAAO,CACN,iDAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,gBACxD,iBAAiB,CAAC,CAAC,CAAC,CACpB,uBAAC,eAAQ,IAAC,KAAK,EAAE,SAAS,WAAI,CAC9B,CAAC,CAAC,CAAC,CACH,uBAAC,iBAAU,IAAC,KAAK,EAAE,SAAS,WAAI,CAChC,YACO,CACT,CAAC;AACH,CAAC,CAAC;AAhBW,QAAA,iBAAiB,qBAgB5B"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ValidationMessage: React.FC<{
+    message: string;
+}>;
+//# sourceMappingURL=ValidationMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationMessage.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ValidationMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AA4BtC,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC;CAChB,CAUA,CAAC"}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidationMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../layout");
+const Triangle = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "0 0 576 512" }, props, { children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }, void 0) }), void 0));
+};
+const style = {
+    width: 11,
+    height: 11,
+};
+const container = {
+    marginTop: 5,
+};
+const label = {
+    fontSize: 13,
+    flex: 1,
+};
+const ValidationMessage = ({ message }) => {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: container }, { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)(Triangle, { style: style, color: "#f1c40f" }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: label }, { children: message }), void 0)] }), void 0) }), void 0));
+};
+exports.ValidationMessage = ValidationMessage;
+//# sourceMappingURL=ValidationMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationMessage.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ValidationMessage.tsx"],"names":[],"mappings":";;;;AACA,sCAAuC;AAEvC,MAAM,QAAQ,GAAsC,CAAC,KAAK,EAAE,EAAE;IAC7D,OAAO,CACN,8CAAK,OAAO,EAAC,aAAa,IAAK,KAAK,cACnC,iCACC,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,+kBAA+kB,WAChlB,YACG,CACN,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,KAAK,GAAwB;IAClC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,SAAS,GAAwB;IACtC,SAAS,EAAE,CAAC;CACZ,CAAC;AAEF,MAAM,KAAK,GAAwB;IAClC,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,CAAC;CACP,CAAC;AAEK,MAAM,iBAAiB,GAEzB,CAAC,EAAC,OAAO,EAAC,EAAE,EAAE;IAClB,OAAO,CACN,8CAAK,KAAK,EAAE,SAAS,gBACpB,wBAAC,YAAG,kBAAC,KAAK,EAAC,QAAQ,iBAClB,uBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,SAAS,WAAG,EAC1C,uBAAC,gBAAO,IAAC,CAAC,EAAE,CAAC,WAAI,EACjB,8CAAK,KAAK,EAAE,KAAK,gBAAG,OAAO,YAAO,aAC7B,YACD,CACN,CAAC;AACH,CAAC,CAAC;AAZW,QAAA,iBAAiB,qBAY5B"}

package/dist/editor/components/NewComposition/new-comp-layout.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const leftLabel: React.CSSProperties;
+export declare const inputArea: React.CSSProperties;
+export declare const rightLabel: React.CSSProperties;
+//# sourceMappingURL=new-comp-layout.d.ts.map

package/dist/editor/components/NewComposition/new-comp-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"new-comp-layout.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/new-comp-layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,aAO7B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,aAE7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,aAI9B,CAAC"}

package/dist/editor/components/NewComposition/new-comp-layout.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rightLabel = exports.inputArea = exports.leftLabel = void 0;
+exports.leftLabel = {
+    width: 160,
+    display: 'inline-block',
+    textAlign: 'right',
+    paddingRight: 30,
+    fontSize: 14,
+    color: '#ddd',
+};
+exports.inputArea = {
+    width: 190,
+};
+exports.rightLabel = {
+    fontSize: 13,
+    color: 'rgba(255, 255, 255, 0.5)',
+    marginLeft: 10,
+};
+//# sourceMappingURL=new-comp-layout.js.map

package/dist/editor/components/NewComposition/new-comp-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"new-comp-layout.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/new-comp-layout.ts"],"names":[],"mappings":";;;AAEa,QAAA,SAAS,GAAwB;IAC7C,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,cAAc;IACvB,SAAS,EAAE,OAAO;IAClB,YAAY,EAAE,EAAE;IAChB,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,MAAM;CACb,CAAC;AAEW,QAAA,SAAS,GAAwB;IAC7C,KAAK,EAAE,GAAG;CACV,CAAC;AAEW,QAAA,UAAU,GAAwB;IAC9C,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,0BAA0B;IACjC,UAAU,EAAE,EAAE;CACd,CAAC"}

package/dist/editor/components/NewComposition/render-aspect-ratio.d.ts

@@ -0,0 +1,2 @@
+export declare const aspectRatio: (width: number, height: number) => string;
+//# sourceMappingURL=render-aspect-ratio.d.ts.map

package/dist/editor/components/NewComposition/render-aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-aspect-ratio.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/render-aspect-ratio.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,WAAW,UAAW,MAAM,UAAU,MAAM,WAUxD,CAAC"}

package/dist/editor/components/NewComposition/render-aspect-ratio.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aspectRatio = void 0;
+function gcd_two_numbers(x, y) {
+    x = Math.abs(x);
+    y = Math.abs(y);
+    while (y) {
+        const t = y;
+        y = x % y;
+        x = t;
+    }
+    return x;
+}
+const aspectRatio = (width, height) => {
+    const commonDivisor = gcd_two_numbers(width, height);
+    const widthDivisor = width / commonDivisor;
+    const heightDivisor = height / commonDivisor;
+    if (widthDivisor < 100) {
+        return widthDivisor + ':' + heightDivisor;
+    }
+    return (widthDivisor / heightDivisor).toFixed(2);
+};
+exports.aspectRatio = aspectRatio;
+//# sourceMappingURL=render-aspect-ratio.js.map

package/dist/editor/components/NewComposition/render-aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-aspect-ratio.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/render-aspect-ratio.tsx"],"names":[],"mappings":";;;AAAA,SAAS,eAAe,CAAC,CAAS,EAAE,CAAS;IAC5C,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAChB,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAChB,OAAO,CAAC,EAAE;QACT,MAAM,CAAC,GAAG,CAAC,CAAC;QACZ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACV,CAAC,GAAG,CAAC,CAAC;KACN;IAED,OAAO,CAAC,CAAC;AACV,CAAC;AAEM,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,MAAc,EAAE,EAAE;IAC5D,MAAM,aAAa,GAAG,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,KAAK,GAAG,aAAa,CAAC;IAC3C,MAAM,aAAa,GAAG,MAAM,GAAG,aAAa,CAAC;IAE7C,IAAI,YAAY,GAAG,GAAG,EAAE;QACvB,OAAO,YAAY,GAAG,GAAG,GAAG,aAAa,CAAC;KAC1C;IAED,OAAO,CAAC,YAAY,GAAG,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClD,CAAC,CAAC;AAVW,QAAA,WAAW,eAUtB"}

package/dist/editor/components/PlayPause.js

@@ -16,13 +16,13 @@ const PlayPause = () => {
     const video = remotion_1.Internals.useVideo();
     player_1.PlayerInternals.usePlayback({ loop: true });
     const { playing, play, pause, frameBack, frameForward, isLastFrame, } = player_1.PlayerInternals.usePlayer();
-    const isStill = is_current_selected_still_1.useIsStill();
-    react_1.useEffect(() => {
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
+    (0, react_1.useEffect)(() => {
         if (isStill) {
             pause();
         }
     }, [isStill, pause]);
-    const onKeyPress = react_1.useCallback((e) => {
+    const onKeyPress = (0, react_1.useCallback)((e) => {
         if (!video) {
             return;
         }
@@ -44,13 +44,13 @@ const PlayPause = () => {
             e.preventDefault();
         }
     }, [frameBack, frameForward, pause, play, playing, video]);
-    const oneFrameBack = react_1.useCallback(() => {
+    const oneFrameBack = (0, react_1.useCallback)(() => {
         frameBack(1);
     }, [frameBack]);
-    const oneFrameForward = react_1.useCallback(() => {
+    const oneFrameForward = (0, react_1.useCallback)(() => {
         frameForward(1);
     }, [frameForward]);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         window.addEventListener('keydown', onKeyPress);
         return () => {
             window.removeEventListener('keydown', onKeyPress);
@@ -59,21 +59,19 @@ const PlayPause = () => {
     if (isStill) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(ControlButton_1.ControlButton, Object.assign({ "aria-label": "Step back one frame", disabled: frame === 0, onClick: oneFrameBack }, { children: jsx_runtime_1.jsx(step_back_1.StepBack, { style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, Object.assign({ "aria-label": "Step back one frame", disabled: frame === 0, onClick: oneFrameBack }, { children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: {
                         height: 16,
                         width: 16,
                         color: 'white',
-                    } }, void 0) }), void 0),
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, Object.assign({ "aria-label": playing ? 'Pause' : 'Play', disabled: !video, onClick: playing ? pause : play }, { children: playing ? (jsx_runtime_1.jsx(pause_1.Pause, { style: {
+                    } }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, Object.assign({ "aria-label": playing ? 'Pause' : 'Play', disabled: !video, onClick: playing ? pause : play }, { children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
                         height: 14,
                         width: 14,
                         color: 'white',
-                    } }, void 0)) : (jsx_runtime_1.jsx(play_1.Play, { style: {
+                    } }, void 0)) : ((0, jsx_runtime_1.jsx)(play_1.Play, { style: {
                         height: 14,
                         width: 14,
                         color: 'white',
-                    } }, void 0)) }), void 0),
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, Object.assign({ "aria-label": "Step forward one frame", disabled: isLastFrame, onClick: oneFrameForward }, { children: jsx_runtime_1.jsx(step_forward_1.StepForward, { style: {
+                    } }, void 0)) }), void 0), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, Object.assign({ "aria-label": "Step forward one frame", disabled: isLastFrame, onClick: oneFrameForward }, { children: (0, jsx_runtime_1.jsx)(step_forward_1.StepForward, { style: {
                         height: 16,
                         width: 16,
                         color: 'white',

package/dist/editor/components/PlayPause.js.map

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

package/dist/editor/components/Preview.js

@@ -21,24 +21,24 @@ exports.Container = styled_components_1.default.div `
 	height: ${(props) => props.height}px;
 	display: flex;
 	position: absolute;
-	background-color: ${(props) => checkerboard_background_1.checkerboardBackgroundColor(props.checkerboard)};
-	background-image: ${(props) => checkerboard_background_1.checkerboardBackgroundImage(props.checkerboard)};
-	background-size: ${checkerboard_background_1.getCheckerboardBackgroundSize(checkerboardSize)}; /* Must be a square */
-	background-position: ${checkerboard_background_1.getCheckerboardBackgroundPos(checkerboardSize)}; /* Must be half of one side of the square */
+	background-color: ${(props) => (0, checkerboard_background_1.checkerboardBackgroundColor)(props.checkerboard)};
+	background-image: ${(props) => (0, checkerboard_background_1.checkerboardBackgroundImage)(props.checkerboard)};
+	background-size: ${(0, checkerboard_background_1.getCheckerboardBackgroundSize)(checkerboardSize)}; /* Must be a square */
+	background-position: ${(0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize)}; /* Must be half of one side of the square */
 `;
 const Inner = ({ canvasSize }) => {
     var _a;
-    const { size: previewSize } = react_1.useContext(preview_size_1.PreviewSizeContext);
+    const { size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
     const video = remotion_1.Internals.useVideo();
-    const config = remotion_1.useVideoConfig();
-    const { checkerboard } = react_1.useContext(checkerboard_1.CheckerboardContext);
+    const config = (0, remotion_1.useVideoConfig)();
+    const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { centerX, centerY, yCorrection, xCorrection, scale, } = player_1.PlayerInternals.calculateScale({
         canvasSize,
         compositionHeight: config.height,
         compositionWidth: config.width,
         previewSize,
     });
-    const outer = react_1.useMemo(() => {
+    const outer = (0, react_1.useMemo)(() => {
         return {
             width: config.width * scale,
             height: config.height * scale,
@@ -51,22 +51,22 @@ const Inner = ({ canvasSize }) => {
         };
     }, [centerX, centerY, config.height, config.width, scale]);
     const Component = video ? video.component : null;
-    const inputProps = remotion_1.getInputProps();
-    return (jsx_runtime_1.jsx(react_1.Suspense, Object.assign({ fallback: jsx_runtime_1.jsx("div", { children: "loading..." }, void 0) }, { children: jsx_runtime_1.jsx("div", Object.assign({ style: outer }, { children: jsx_runtime_1.jsx(exports.Container, Object.assign({}, {
+    const inputProps = (0, remotion_1.getInputProps)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, Object.assign({ fallback: (0, jsx_runtime_1.jsx)("div", { children: "loading..." }, void 0) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: outer }, { children: (0, jsx_runtime_1.jsx)(exports.Container, Object.assign({}, {
                 checkerboard,
                 scale,
                 xCorrection,
                 yCorrection,
                 width: config.width,
                 height: config.height,
-            }, { children: Component ? (jsx_runtime_1.jsx(Component, Object.assign({}, ((_a = video === null || video === void 0 ? void 0 : video.props) !== null && _a !== void 0 ? _a : {}), inputProps), void 0)) : null }), void 0) }), void 0) }), void 0));
+            }, { children: Component ? ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, ((_a = video === null || video === void 0 ? void 0 : video.props) !== null && _a !== void 0 ? _a : {}), inputProps), void 0)) : null }), void 0) }), void 0) }), void 0));
 };
 const VideoPreview = ({ canvasSize }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     if (!config) {
         return null;
     }
-    return jsx_runtime_1.jsx(Inner, { canvasSize: canvasSize }, void 0);
+    return (0, jsx_runtime_1.jsx)(Inner, { canvasSize: canvasSize }, void 0);
 };
 exports.VideoPreview = VideoPreview;
 //# sourceMappingURL=Preview.js.map

package/dist/editor/components/Preview.js.map

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

package/dist/editor/components/PreviewToolbar.js

@@ -36,17 +36,7 @@ const Padding = styled_components_1.default.div `
 	width: ${timeline_layout_1.TIMELINE_PADDING}px;
 `;
 const PreviewToolbar = () => {
-    return (jsx_runtime_1.jsxs(Container, { children: [jsx_runtime_1.jsxs(SideContainer, { children: [jsx_runtime_1.jsx(Padding, {}, void 0),
-                    jsx_runtime_1.jsx(TimeValue_1.TimeValue, {}, void 0)] }, void 0),
-            jsx_runtime_1.jsx(Flex, {}, void 0),
-            jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}, void 0),
-            jsx_runtime_1.jsx(PlayPause_1.PlayPause, {}, void 0),
-            jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}, void 0),
-            jsx_runtime_1.jsx(RichTimelineToggle_1.RichTimelineToggle, {}, void 0),
-            jsx_runtime_1.jsx(Flex, {}, void 0),
-            jsx_runtime_1.jsxs(SideContainer, { children: [jsx_runtime_1.jsx(Flex, {}, void 0),
-                    jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, {}, void 0),
-                    jsx_runtime_1.jsx(Padding, {}, void 0)] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsxs)(SideContainer, { children: [(0, jsx_runtime_1.jsx)(Padding, {}, void 0), (0, jsx_runtime_1.jsx)(TimeValue_1.TimeValue, {}, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Flex, {}, void 0), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}, void 0), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, {}, void 0), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}, void 0), (0, jsx_runtime_1.jsx)(RichTimelineToggle_1.RichTimelineToggle, {}, void 0), (0, jsx_runtime_1.jsx)(Flex, {}, void 0), (0, jsx_runtime_1.jsxs)(SideContainer, { children: [(0, jsx_runtime_1.jsx)(Flex, {}, void 0), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, {}, void 0), (0, jsx_runtime_1.jsx)(Padding, {}, void 0)] }, void 0)] }, void 0));
 };
 exports.PreviewToolbar = PreviewToolbar;
 //# sourceMappingURL=PreviewToolbar.js.map

package/dist/editor/components/PreviewToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewToolbar.js","sourceRoot":"","sources":["../../../src/editor/components/PreviewToolbar.tsx"],"names":[],"mappings":";;;;;;;AACA,0EAAuC;AACvC,gEAA4D;AAC5D,yDAAoD;AACpD,6CAAwC;AACxC,2CAAsC;AACtC,6DAAwD;AACxD,iDAA4C;AAC5C,2CAAsC;AAEtC,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ3B,CAAC;AAEF,MAAM,aAAa,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;CAM/B,CAAC;AAEF,MAAM,IAAI,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAEtB,CAAC;AAEF,MAAM,OAAO,GAAG,2BAAM,CAAC,GAAG,CAAA;UAChB,kCAAgB;CACzB,CAAC;AAEK,MAAM,cAAc,GAAa,GAAG,EAAE;IAC5C,OAAO,CACN,mBAAC,SAAS,eACT,mBAAC,aAAa,eACb,kBAAC,OAAO,aAAG;oBACX,kBAAC,qBAAS,aAAG,YACE;YAChB,kBAAC,IAAI,aAAG;YACR,kBAAC,2BAAY,aAAG;YAChB,kBAAC,qBAAS,aAAG;YACb,kBAAC,mCAAgB,aAAG;YACpB,kBAAC,uCAAkB,aAAG;YACtB,kBAAC,IAAI,aAAG;YACR,mBAAC,aAAa,eACb,kBAAC,IAAI,aAAG;oBACR,kBAAC,uBAAU,aAAG;oBACd,kBAAC,OAAO,aAAG,YACI,YACL,CACZ,CAAC;AACH,CAAC,CAAC;AApBW,QAAA,cAAc,kBAoBzB"}
+{"version":3,"file":"PreviewToolbar.js","sourceRoot":"","sources":["../../../src/editor/components/PreviewToolbar.tsx"],"names":[],"mappings":";;;;;;;AACA,0EAAuC;AACvC,gEAA4D;AAC5D,yDAAoD;AACpD,6CAAwC;AACxC,2CAAsC;AACtC,6DAAwD;AACxD,iDAA4C;AAC5C,2CAAsC;AAEtC,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ3B,CAAC;AAEF,MAAM,aAAa,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;CAM/B,CAAC;AAEF,MAAM,IAAI,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAEtB,CAAC;AAEF,MAAM,OAAO,GAAG,2BAAM,CAAC,GAAG,CAAA;UAChB,kCAAgB;CACzB,CAAC;AAEK,MAAM,cAAc,GAAa,GAAG,EAAE;IAC5C,OAAO,CACN,wBAAC,SAAS,eACT,wBAAC,aAAa,eACb,uBAAC,OAAO,aAAG,EACX,uBAAC,qBAAS,aAAG,YACE,EAChB,uBAAC,IAAI,aAAG,EACR,uBAAC,2BAAY,aAAG,EAChB,uBAAC,qBAAS,aAAG,EACb,uBAAC,mCAAgB,aAAG,EACpB,uBAAC,uCAAkB,aAAG,EACtB,uBAAC,IAAI,aAAG,EACR,wBAAC,aAAa,eACb,uBAAC,IAAI,aAAG,EACR,uBAAC,uBAAU,aAAG,EACd,uBAAC,OAAO,aAAG,YACI,YACL,CACZ,CAAC;AACH,CAAC,CAAC;AApBW,QAAA,cAAc,kBAoBzB"}

package/dist/editor/components/RichTimelineToggle.js

@@ -9,18 +9,18 @@ const rich_timeline_1 = require("../state/rich-timeline");
 const ControlButton_1 = require("./ControlButton");
 const tooltip = 'Enable rich timeline. Go to remotion.dev/docs/timeline for more information.';
 const RichTimelineToggle = () => {
-    const { richTimeline, setRichTimeline } = react_1.useContext(rich_timeline_1.RichTimelineContext);
-    const isStill = is_current_selected_still_1.useIsStill();
-    const onClick = react_1.useCallback(() => {
+    const { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
+    const onClick = (0, react_1.useCallback)(() => {
         setRichTimeline((c) => {
-            rich_timeline_1.persistRichTimelineOption(!c);
+            (0, rich_timeline_1.persistRichTimelineOption)(!c);
             return !c;
         });
     }, [setRichTimeline]);
     if (isStill) {
         return null;
     }
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, Object.assign({ title: tooltip, "aria-label": tooltip, onClick: onClick }, { children: jsx_runtime_1.jsx(timeline_1.TimelineIcon, { style: {
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, Object.assign({ title: tooltip, "aria-label": tooltip, onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(timeline_1.TimelineIcon, { style: {
                 width: 16,
                 height: 16,
                 color: richTimeline ? 'var(--blue)' : 'white',