@remotion/cli 4.0.0-alpha7 → 4.0.0-alpha8

package/dist/editor/components/MenuBuildIndicator.js

@@ -3,12 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuBuildIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const layout_1 = require("./layout");
+const OpenEditorButton_1 = require("./OpenEditorButton");
+const Spinner_1 = require("./Spinner");
 const cwd = {
     fontSize: 13,
     opacity: 0.8,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const spinnerSize = 14;
+const spinner = {
+    position: 'relative',
+    width: spinnerSize,
+    marginTop: 4,
+};
+const noSpinner = {
+    position: 'relative',
+    width: spinnerSize,
 };
 const MenuBuildIndicator = () => {
     const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
+    const ctx = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const showButton = window.remotion_editorName && ctx.type === 'connected';
     (0, react_1.useEffect)(() => {
         window.remotion_isBuilding = () => {
             setIsBuilding(true);
@@ -21,6 +40,6 @@ const MenuBuildIndicator = () => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { style: cwd, title: window.remotion_cwd, children: isBuilding ? 'Building...' : window.remotion_projectName }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }) : null, isBuilding ? ((0, jsx_runtime_1.jsx)("div", { style: spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: spinnerSize }) })) : ((0, jsx_runtime_1.jsx)("div", { style: noSpinner })), showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? (0, jsx_runtime_1.jsx)(OpenEditorButton_1.OpenEditorButton, {}) : null] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/editor/components/Modals.js

@@ -16,7 +16,7 @@ const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = () => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type === 'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const OpenEditorButton: React.FC<{}>;

package/dist/editor/components/OpenEditorButton.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenEditorButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const svgStyle = {
+    width: '11px',
+    height: '11px',
+};
+const buttonStyle = {
+    border: 'none',
+    width: '25px',
+    height: '25px',
+};
+const OpenEditorButton = () => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const svgFillColor = (0, react_1.useMemo)(() => {
+        return hovered ? 'white' : colors_1.LIGHT_TEXT;
+    }, [hovered]);
+    const handleClick = async () => {
+        await (0, open_in_editor_1.openInEditor)({
+            originalFileName: `${window.remotion_cwd}`,
+            originalLineNumber: 1,
+            originalColumnNumber: 1,
+            originalFunctionName: null,
+            originalScriptCode: null,
+        })
+            .then((res) => res.json())
+            .then(({ success }) => {
+            if (!success) {
+                (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+            }
+        })
+            .catch((err) => {
+            console.error(err);
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+        });
+    };
+    const buttonTooltip = `Open in ${window.remotion_editorName}`;
+    const openInEditorSvg = ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: svgFillColor, d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" }) }));
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("button", { title: buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
+};
+exports.OpenEditorButton = OpenEditorButton;

package/dist/editor/components/RenderButton.js

@@ -11,6 +11,7 @@ const get_default_video_contexts_1 = require("../../preview-server/render-queue/
 const client_id_1 = require("../helpers/client-id");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_1 = require("../icons/render");
+const in_out_1 = require("../state/in-out");
 const modals_1 = require("../state/modals");
 const layout_1 = require("./layout");
 const button = {
@@ -23,6 +24,7 @@ const label = {
     fontSize: 14,
 };
 const RenderButton = () => {
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
     const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
@@ -93,8 +95,10 @@ const RenderButton = () => {
             initialHeadless: defaults.headless,
             initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
             defaultProps: (_c = props[video.id]) !== null && _c !== void 0 ? _c : video.defaultProps,
+            inFrameMark: inFrame,
+            outFrameMark: outFrame,
         });
-    }, [video, setSelectedModal, frame, props]);
+    }, [video, setSelectedModal, frame, props, inFrame, outFrame]);
     if (!video) {
         return null;
     }

package/dist/editor/components/RenderModal/CliCopyButton.js

@@ -17,6 +17,12 @@ const copiedStyle = {
     alignItems: 'center',
     justifyContent: 'center',
 };
+const buttonStyle = {
+    width: '30px',
+    height: '30px',
+    border: 'none',
+    cursor: 'pointer',
+};
 const CliCopyButton = ({ valueToCopy, }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const [hovered, setHovered] = (0, react_1.useState)(false);
@@ -42,12 +48,7 @@ const CliCopyButton = ({ valueToCopy, }) => {
         const to = setTimeout(() => handleClear(), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return copied ? ((0, jsx_runtime_1.jsx)("span", { style: copiedStyle, children: checkSvg })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: {
-            width: '30px',
-            height: '30px',
-            border: 'none',
-            cursor: 'pointer',
-        }, onClick: () => {
+    return copied ? ((0, jsx_runtime_1.jsx)("span", { style: copiedStyle, children: checkSvg })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: () => {
             navigator.clipboard.writeText(valueToCopy);
             setCopied(true);
         }, children: clipboardIcon }));

package/dist/editor/components/RenderModal/OptionExplainer.js

@@ -28,6 +28,7 @@ const link = {
     maxWidth: 200,
     color: '#0b84f3',
     wordWrap: 'break-word',
+    textDecoration: 'none',
 };
 const infoRow = {
     ...padding,

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

@@ -32,4 +32,6 @@ export declare const RenderModal: React.FC<{
     initialIgnoreCertificateErrors: boolean;
     initialHeadless: boolean;
     defaultProps: unknown;
+    inFrameMark: number | null;
+    outFrameMark: number | null;
 }>;

package/dist/editor/components/RenderModal/RenderModal.js

@@ -108,7 +108,7 @@ const outer = {
     height: (0, ModalContainer_1.getMaxModalHeight)(640),
     overflow: 'hidden',
 };
-const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialAudioCodec, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, defaultProps, }) => {
+const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialAudioCodec, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, defaultProps, inFrameMark, outFrameMark, }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
@@ -145,8 +145,8 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         };
     }, [headless, disableWebSecurity, ignoreCertificateErrors, openGlOption]);
     const [outName, setOutName] = (0, react_1.useState)(() => initialOutName);
-    const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => null);
-    const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => null);
+    const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => outFrameMark !== null && outFrameMark !== void 0 ? outFrameMark : null);
+    const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => inFrameMark !== null && inFrameMark !== void 0 ? inFrameMark : null);
     const [proResProfileSetting, setProResProfile] = (0, react_1.useState)(() => initialProResProfile);
     const [pixelFormat, setPixelFormat] = (0, react_1.useState)(() => initialPixelFormat);
     const [preferredQualityControlType, setQualityControl] = (0, react_1.useState)(() => initialVideoBitrate === null ? 'crf' : 'bitrate');

package/dist/editor/components/RenderModal/RenderModalData.js

@@ -27,11 +27,11 @@ exports.RenderModalData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const colors_1 = require("../../helpers/colors");
-const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
 const layout_1 = require("../layout");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
 const SegmentedControl_1 = require("../SegmentedControl");
@@ -113,10 +113,8 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
         });
     }, [inJSONEditor, inputProps]);
     const cliProps = (0, remotion_1.getInputProps)();
-    const [canSaveDefaultProps, setCanSaveDefaultProps] = (0, react_1.useState)({
-        canUpdate: false,
-        reason: 'Loading...',
-        determined: false,
+    const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = (0, react_1.useState)({
+        [composition.id]: get_render_modal_warnings_1.defaultTypeCanSaveState,
     });
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     const schema = (0, react_1.useMemo)(() => {
@@ -147,30 +145,44 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return val(prevVal);
         });
     }, []);
+    const canSaveDefaultProps = (0, react_1.useMemo)(() => {
+        return canSaveDefaultPropsObjectState[composition.id]
+            ? canSaveDefaultPropsObjectState[composition.id]
+            : get_render_modal_warnings_1.defaultTypeCanSaveState;
+    }, [canSaveDefaultPropsObjectState, composition.id]);
     const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
     const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
     (0, react_1.useEffect)(() => {
         (0, actions_1.canUpdateDefaultProps)(composition.id)
             .then((can) => {
             if (can.canUpdate) {
-                setCanSaveDefaultProps({
-                    canUpdate: true,
-                });
+                setCanSaveDefaultProps((prevState) => ({
+                    ...prevState,
+                    [composition.id]: {
+                        canUpdate: true,
+                    },
+                }));
             }
             else {
-                setCanSaveDefaultProps({
-                    canUpdate: false,
-                    reason: can.reason,
-                    determined: true,
-                });
+                setCanSaveDefaultProps((prevState) => ({
+                    ...prevState,
+                    [composition.id]: {
+                        canUpdate: false,
+                        reason: can.reason,
+                        determined: true,
+                    },
+                }));
             }
         })
             .catch((err) => {
-            setCanSaveDefaultProps({
-                canUpdate: false,
-                reason: err.message,
-                determined: true,
-            });
+            setCanSaveDefaultProps((prevState) => ({
+                ...prevState,
+                [composition.id]: {
+                    canUpdate: false,
+                    reason: err.message,
+                    determined: true,
+                },
+            }));
         });
     }, [composition.id]);
     const modeItems = (0, react_1.useMemo)(() => {
@@ -227,10 +239,12 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             customFileUsed: serializedJSON ? serializedJSON.customFileUsed : false,
             inJSONEditor,
             propsEditType,
+            jsMapUsed: serializedJSON ? serializedJSON.mapUsed : false,
+            jsSetUsed: serializedJSON ? serializedJSON.setUsed : false,
         });
     }, [
-        canSaveDefaultProps,
         cliProps,
+        canSaveDefaultProps,
         inJSONEditor,
         propsEditType,
         serializedJSON,

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.d.ts

@@ -2,6 +2,8 @@ export declare type SerializedJSONWithCustomFields = {
     serializedString: string;
     customDateUsed: boolean;
     customFileUsed: boolean;
+    mapUsed: boolean;
+    setUsed: boolean;
 };
 export declare const FILE_TOKEN = "remotion-file:";
 export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.js

@@ -6,19 +6,29 @@ exports.FILE_TOKEN = 'remotion-file:';
 const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
     let customDateUsed = false;
     let customFileUsed = false;
+    let mapUsed = false;
+    let setUsed = false;
     const serializedString = JSON.stringify(data, function (key, value) {
         const item = this[key];
         if (item instanceof Date) {
             customDateUsed = true;
             return `${DATE_TOKEN}${item.toISOString()}`;
         }
+        if (item instanceof Map) {
+            mapUsed = true;
+            return value;
+        }
+        if (item instanceof Set) {
+            setUsed = true;
+            return value;
+        }
         if (typeof item === 'string' && item.startsWith(staticBase)) {
             customFileUsed = true;
             return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
         }
         return value;
     }, indent);
-    return { serializedString, customDateUsed, customFileUsed };
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
 };
 exports.serializeJSONWithDate = serializeJSONWithDate;
 const deserializeJSONWithCustomFields = (data) => {

package/dist/editor/components/RenderModal/get-render-modal-warnings.d.ts

@@ -6,11 +6,14 @@ export declare type TypeCanSaveState = {
     reason: string;
     determined: boolean;
 };
-export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, inJSONEditor, propsEditType, }: {
+export declare const defaultTypeCanSaveState: TypeCanSaveState;
+export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }: {
     cliProps: unknown;
     canSaveDefaultProps: TypeCanSaveState;
     isCustomDateUsed: boolean;
     customFileUsed: boolean;
+    jsMapUsed: boolean;
+    jsSetUsed: boolean;
     inJSONEditor: boolean;
     propsEditType: PropsEditType;
 }) => string[];

package/dist/editor/components/RenderModal/get-render-modal-warnings.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRenderModalWarnings = void 0;
+exports.getRenderModalWarnings = exports.defaultTypeCanSaveState = void 0;
 const truthy_1 = require("../../../truthy");
+exports.defaultTypeCanSaveState = {
+    canUpdate: false,
+    reason: 'Loading...',
+    determined: false,
+};
 const getInputPropsWarning = ({ cliProps, propsEditType, }) => {
     if (Object.keys(cliProps).length > 0 &&
         propsEditType === 'default-props') {
@@ -30,12 +35,26 @@ const staticFileUsed = (used, inJSONEditor) => {
     }
     return null;
 };
-const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, inJSONEditor, propsEditType, }) => {
+const mapUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'A `Map` was used in the schema which can not be serialized to JSON.';
+    }
+    return null;
+};
+const setUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'A `Set` was used in the schema which can not be serialized to JSON.';
+    }
+    return null;
+};
+const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }) => {
     return [
         getInputPropsWarning({ cliProps, propsEditType }),
         getCannotSaveDefaultProps(canSaveDefaultProps),
         customDateUsed(isCustomDateUsed, inJSONEditor),
         staticFileUsed(customFileUsed, inJSONEditor),
+        mapUsed(jsMapUsed, inJSONEditor),
+        setUsed(jsSetUsed, inJSONEditor),
     ].filter(truthy_1.truthy);
 };
 exports.getRenderModalWarnings = getRenderModalWarnings;

package/dist/editor/components/SidebarRenderButton.js

@@ -72,6 +72,8 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialHeadless: defaults.headless,
             initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
             defaultProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps,
+            inFrameMark: null,
+            outFrameMark: null,
         });
     }, [composition.defaultProps, composition.id, isVideo, props, setSelectedModal]);
     const renderAction = (0, react_1.useCallback)((color) => {

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Spinner: React.FC<{
+    size: number;
+}>;

package/dist/editor/components/Spinner.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const viewBox = 100;
+const lines = 6;
+const className = '__remotion_spinner_line';
+const remotionSpinnerAnimation = '__remotion_spinner_animation';
+// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
+const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
+const totalDuration = 0.5;
+const Spinner = ({ size }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            width: size,
+            height: size,
+        };
+    }, [size]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `
+				@keyframes ${remotionSpinnerAnimation} {
+          0% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0.15;
+          }
+        }
+        
+        .${className} {
+            animation: ${remotionSpinnerAnimation} ${totalDuration}s linear infinite;
+        }        
+			` }), (0, jsx_runtime_1.jsx)("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
+                    return ((0, jsx_runtime_1.jsx)("path", { className: className, style: {
+                            rotate: `${(index * Math.PI * 2) / lines}rad`,
+                            transformOrigin: 'center center',
+                            animationDelay: `${index * (totalDuration / lines) - totalDuration}s`,
+                        }, d: translated, fill: colors_1.LIGHT_TEXT }, index));
+                }) })] }));
+};
+exports.Spinner = Spinner;

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

@@ -36,6 +36,8 @@ export declare type RenderModalState = {
     minConcurrency: number;
     maxConcurrency: number;
     defaultProps: unknown;
+    inFrameMark: number | null;
+    outFrameMark: number | null;
 };
 export declare type ModalState = {
     type: 'new-comp';

package/dist/preview-server/render-queue/make-retry-payload.js

@@ -45,6 +45,8 @@ const makeRetryPayload = (job) => {
             initialHeadless: job.chromiumOptions.headless,
             initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
             defaultProps: job.inputProps,
+            inFrameMark: null,
+            outFrameMark: null,
         };
     }
     if (job.type === 'video') {
@@ -84,6 +86,8 @@ const makeRetryPayload = (job) => {
             initialHeadless: job.chromiumOptions.headless,
             initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
             defaultProps: job.inputProps,
+            inFrameMark: job.startFrame,
+            outFrameMark: job.endFrame,
         };
     }
     throw new Error(`Job ${JSON.stringify(job)} Not implemented`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.0-alpha7",
+  "version": "4.0.0-alpha8",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -28,16 +28,16 @@
   "author": "Jonny Burger <jonny@remotion.dev>",
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@remotion/bundler": "4.0.0-alpha7",
-    "@remotion/media-utils": "4.0.0-alpha7",
-    "@remotion/player": "4.0.0-alpha7",
-    "@remotion/renderer": "4.0.0-alpha7",
+    "@remotion/bundler": "4.0.0-alpha8",
+    "@remotion/media-utils": "4.0.0-alpha8",
+    "@remotion/player": "4.0.0-alpha8",
+    "@remotion/renderer": "4.0.0-alpha8",
     "dotenv": "9.0.2",
     "memfs": "3.4.3",
     "minimist": "1.2.6",
     "open": "^8.4.2",
     "prompts": "2.4.1",
-    "remotion": "4.0.0-alpha7",
+    "remotion": "4.0.0-alpha8",
     "semver": "7.3.5",
     "source-map": "0.6.1"
   },
@@ -56,7 +56,7 @@
     "@types/semver": "^7.3.4",
     "@typescript-eslint/eslint-plugin": "5.18.0",
     "@typescript-eslint/parser": "5.18.0",
-    "@remotion/zod-types": "4.0.0-alpha7",
+    "@remotion/zod-types": "4.0.0-alpha8",
     "eslint": "8.25.0",
     "eslint-plugin-10x": "1.5.2",
     "eslint-plugin-react": "7.29.4",