@remotion/cli 4.0.0-alpha.217 → 4.0.0-alpha10

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

@@ -1,26 +1,60 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRenderModalWarnings = void 0;
+exports.getRenderModalWarnings = exports.defaultTypeCanSaveState = void 0;
 const truthy_1 = require("../../../truthy");
-const getInputPropsWarning = ({ cliProps }) => {
-    if (Object.keys(cliProps).length > 0) {
+exports.defaultTypeCanSaveState = {
+    canUpdate: false,
+    reason: 'Loading...',
+    determined: false,
+};
+const getInputPropsWarning = ({ cliProps, propsEditType, }) => {
+    if (Object.keys(cliProps).length > 0 &&
+        propsEditType === 'default-props') {
         return 'The data that was passed using --props takes priority over the data you enter here.';
     }
     return null;
 };
-const getCannotSaveDefaultProps = ({ canSaveDefaultProps, }) => {
+const getCannotSaveDefaultProps = (canSaveDefaultProps) => {
     if (canSaveDefaultProps.canUpdate) {
         return null;
     }
     if (!canSaveDefaultProps.determined) {
         return null;
     }
-    return `Can't save default props: ${canSaveDefaultProps.reason}`;
+    return `Can't save default props: ${canSaveDefaultProps.reason}.`;
+};
+const customDateUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'There is a Date in the schema which was serialized. Note the custom syntax.';
+    }
+    return null;
+};
+const staticFileUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'There is a staticFile() in the schema which was serialized. Note the custom syntax.';
+    }
+    return null;
+};
+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, }) => {
+const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }) => {
     return [
-        getInputPropsWarning({ cliProps }),
-        getCannotSaveDefaultProps({ canSaveDefaultProps }),
+        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/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

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

@@ -21,6 +21,9 @@ exports.label = {
     lineHeight: '40px',
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
 };
 exports.rightRow = {
     display: 'flex',

package/dist/editor/components/RenderModal/out-name-checker.js

@@ -45,7 +45,7 @@ const isValidOutName = ({ outName, codec, audioCodec, renderMode, stillImageForm
     const hasInvalidChar = () => {
         return prefix.split('').some((char) => invalidCharacters.includes(char));
     };
-    if (renderMode === 'video') {
+    if (renderMode === 'video' || renderMode === 'audio') {
         client_1.BrowserSafeApis.validateOutputFilename({
             codec,
             audioCodec: audioCodec !== null && audioCodec !== void 0 ? audioCodec : null,
@@ -67,14 +67,4 @@ const isValidOutName = ({ outName, codec, audioCodec, renderMode, stillImageForm
         !isValidStillExtension(extension, stillImageFormat)) {
         throw new Error(`The extension ${extension} is not supported for still image format ${stillImageFormat}`);
     }
-    if (renderMode === 'audio') {
-        if (audioCodec === 'pcm-16') {
-            if (extension !== 'wav' && extension !== 'wave') {
-                throw new Error(`The extension ${extension} is not supported for audio codec ${audioCodec}`);
-            }
-        }
-        if (audioCodec !== extension) {
-            throw new Error(`The extension ${extension} is not supported for audio codec ${audioCodec}`);
-        }
-    }
 };

package/dist/editor/components/RenderQueue/RenderQueueItemCancelButton.js

@@ -15,8 +15,12 @@ const RenderQueueCancelButton = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 14,
+            color: 'currentColor',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" }) }) }));
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" }) }));
+    }, [icon]);
+    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.RenderQueueCancelButton = RenderQueueCancelButton;

package/dist/editor/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -15,8 +15,12 @@ const RenderQueueOpenInFinderItem = ({ job, }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,
+            color: 'currentColor',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M384 480h48c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224H144c-11.4 0-21.9 6-27.6 15.9L48 357.1V96c0-8.8 7.2-16 16-16H181.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8H416c8.8 0 16 7.2 16 16v32h48V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H87.7 384z" }) }) }));
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M384 480h48c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224H144c-11.4 0-21.9 6-27.6 15.9L48 357.1V96c0-8.8 7.2-16 16-16H181.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8H416c8.8 0 16 7.2 16 16v32h48V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H87.7 384z" }) }));
+    }, [icon]);
+    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.RenderQueueOpenInFinderItem = RenderQueueOpenInFinderItem;

package/dist/editor/components/RenderQueue/RenderQueueRemoveItem.js

@@ -26,8 +26,12 @@ const RenderQueueRemoveItem = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 16,
+            color: 'currentColor',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }) }));
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
+    }, [icon]);
+    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

package/dist/editor/components/RenderQueue/RenderQueueRepeat.js

@@ -15,8 +15,12 @@ const RenderQueueRepeatItem = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,
+            color: 'currentColor',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z" }) }) }));
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z" }) }));
+    }, [icon]);
+    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, renderAction: renderAction });
 };
 exports.RenderQueueRepeatItem = RenderQueueRepeatItem;

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -1,6 +1,7 @@
 import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 import type { RenderJob } from '../../../preview-server/render-queue/job';
 import type { RequiredChromiumOptions } from '../../../required-chromium-options';
+import type { EnumPath } from '../RenderModal/SchemaEditor/extract-enum-json-paths';
 export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }: {
     compositionId: string;
     outName: string;
@@ -12,7 +13,7 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     chromiumOptions: RequiredChromiumOptions;
     delayRenderTimeout: number;
     envVariables: Record<string, string>;
-    inputProps: unknown;
+    inputProps: Record<string, unknown>;
 }) => Promise<undefined>;
 export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }: {
     compositionId: string;
@@ -39,7 +40,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     disallowParallelEncoding: boolean;
     chromiumOptions: RequiredChromiumOptions;
     envVariables: Record<string, string>;
-    inputProps: unknown;
+    inputProps: Record<string, unknown>;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;
@@ -54,5 +55,5 @@ export declare const openInFileExplorer: ({ directory }: {
 }) => Promise<void>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../../preview-server/render-queue/job").CancelRenderResponse>;
-export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown) => Promise<void>;
+export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown, enumPaths: EnumPath[]) => Promise<import("../../../preview-server/render-queue/job").UpdateDefaultPropsResponse>;
 export declare const canUpdateDefaultProps: (compositionId: string) => Promise<import("../../../preview-server/render-queue/job").CanUpdateDefaultPropsResponse>;

package/dist/editor/components/RenderQueue/actions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
-const date_serialization_1 = require("../RenderModal/SchemaEditor/date-serialization");
+const input_props_serialization_1 = require("../RenderModal/SchemaEditor/input-props-serialization");
 const callApi = (endpoint, body) => {
     return new Promise((resolve, reject) => {
         fetch(endpoint, {
@@ -104,10 +104,15 @@ const cancelRenderJob = (job) => {
     });
 };
 exports.cancelRenderJob = cancelRenderJob;
-const updateDefaultProps = (compositionId, defaultProps) => {
+const updateDefaultProps = (compositionId, defaultProps, enumPaths) => {
     return callApi('/api/update-default-props', {
         compositionId,
-        defaultProps: (0, date_serialization_1.serializeJSONWithDate)(defaultProps, undefined),
+        defaultProps: (0, input_props_serialization_1.serializeJSONWithDate)({
+            data: defaultProps,
+            indent: undefined,
+            staticBase: window.remotion_staticBase,
+        }).serializedString,
+        enumPaths,
     });
 };
 exports.updateDefaultProps = updateDefaultProps;

package/dist/editor/components/RenderQueue/index.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const context_1 = require("./context");
 const RenderQueueItem_1 = require("./RenderQueueItem");
 const separatorStyle = {
@@ -25,9 +26,15 @@ const explainer = {
     justifyContent: 'center',
     alignItems: 'center',
     textAlign: 'center',
+    background: colors_1.BACKGROUND,
+};
+const renderQueue = {
+    background: colors_1.BACKGROUND,
+    flex: 1,
+    overflowY: 'auto',
 };
 const RenderQueue = () => {
-    const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const jobCount = jobs.length;
     if (connectionStatus === 'disconnected') {
@@ -36,7 +43,7 @@ const RenderQueue = () => {
     if (jobCount === 0) {
         return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "No renders in the queue." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { children: jobs.map((j, index) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
             return ((0, jsx_runtime_1.jsx)("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: (0, jsx_runtime_1.jsx)(RenderQueueItem_1.RenderQueueItem, { job: j }) }, j.id));
         }) }));
 };

package/dist/editor/components/RightPanel.js

@@ -4,7 +4,8 @@ exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = v
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const RenderModalData_1 = require("./RenderModal/RenderModalData");
+const colors_1 = require("../helpers/colors");
+const DataEditor_1 = require("./RenderModal/DataEditor");
 const RenderQueue_1 = require("./RenderQueue");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
@@ -16,16 +17,16 @@ const container = {
     flexDirection: 'column',
 };
 const PropsEditor = ({ composition }) => {
-    var _a;
     const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const setInputProps = (0, react_1.useCallback)((newProps) => {
         updateProps({
             id: composition.id,
             defaultProps: composition.defaultProps,
-            newProps: newProps,
+            newProps,
         });
     }, [composition.defaultProps, composition.id, updateProps]);
-    return ((0, jsx_runtime_1.jsx)(RenderModalData_1.RenderModalData, { composition: composition, inputProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps, setInputProps: setInputProps, compact: true, mayShowSaveButton: true }));
+    const actualProps = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {}; }, [composition.defaultProps, composition.id, props]);
+    return ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, compact: true, mayShowSaveButton: true, propsEditType: "default-props" }, composition.id));
 };
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = () => {
@@ -35,7 +36,9 @@ const getSelectedPanel = () => {
     }
     return 'input-props';
 };
-const tabsContainer = {};
+const tabsContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+};
 const persistSelectedPanel = (panel) => {
     localStorage.setItem(localStorageKey, panel);
 };

package/dist/editor/components/SidebarCollapserControls.js

@@ -7,35 +7,36 @@ const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-over
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
-const layout_1 = require("./layout");
 const TopPanel_1 = require("./TopPanel");
 const style = {
     width: 16,
     height: 16,
-    border: '1px solid white',
+    minWidth: 16,
+    border: '1px solid currentColor',
     borderRadius: 3,
+    color: 'currentColor',
     position: 'relative',
 };
 const SidebarCollapserControls = () => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const leftSidebarStatus = (0, TopPanel_1.useResponsiveSidebarStatus)();
-    const leftIcon = (0, react_1.useMemo)(() => {
+    const leftIcon = (0, react_1.useCallback)((color) => {
         return {
             width: '35%',
             height: '100%',
-            borderRight: '1px solid white',
-            background: leftSidebarStatus === 'expanded' ? 'white' : 'transparent',
+            borderRight: '1px solid ' + color,
+            background: leftSidebarStatus === 'expanded' ? color : 'transparent',
         };
     }, [leftSidebarStatus]);
-    const rightIcon = (0, react_1.useMemo)(() => {
+    const rightIcon = (0, react_1.useCallback)((color) => {
         return {
             width: '35%',
             height: '100%',
             right: 0,
             position: 'absolute',
-            borderLeft: '1px solid white',
-            background: sidebarCollapsedStateRight === 'expanded' ? 'white' : 'transparent',
+            borderLeft: '1px solid ' + color,
+            background: sidebarCollapsedStateRight === 'expanded' ? color : 'transparent',
         };
     }, [sidebarCollapsedStateRight]);
     const toggleLeft = (0, react_1.useCallback)(() => {
@@ -117,6 +118,18 @@ const SidebarCollapserControls = () => {
     const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
         ? 'Toggle Right Sidebar'
         : `Toggle Right Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+J)`;
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, children: (0, jsx_runtime_1.jsx)("div", { style: style, title: toggleLeftTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon }) }) }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, children: (0, jsx_runtime_1.jsx)("div", { style: style, title: toggleRightTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon }) }) })] }));
+    const colorStyle = (0, react_1.useCallback)((color) => {
+        return {
+            ...style,
+            color,
+        };
+    }, []);
+    const toggleLeftAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("div", { style: colorStyle(color), title: toggleLeftTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon(color) }) }));
+    }, [colorStyle, leftIcon, toggleLeftTooltip]);
+    const toggleRightAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("div", { style: colorStyle(color), title: toggleRightTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon(color) }) }));
+    }, [colorStyle, rightIcon, toggleRightTooltip]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })] }));
 };
 exports.SidebarCollapserControls = SidebarCollapserControls;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { AnyCompMetadata } from 'remotion';
+export declare const SidebarRenderButton: React.FC<{
+    composition: AnyCompMetadata;
+    visible: boolean;
+}>;

package/dist/editor/components/{RenderToolbarIcon.js → SidebarRenderButton.js}

@@ -1,74 +1,55 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderButton = void 0;
+exports.SidebarRenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_default_out_name_1 = require("../../get-default-out-name");
-const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
 const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
 const client_id_1 = require("../helpers/client-id");
-const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
-const layout_1 = require("./layout");
-const button = {
-    paddingLeft: 7,
-    paddingRight: 7,
-    paddingTop: 7,
-    paddingBottom: 7,
-};
-const label = {
-    fontSize: 14,
-};
-const RenderButton = () => {
+const InlineAction_1 = require("./InlineAction");
+const SidebarRenderButton = ({ composition, visible }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
-    const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
-    const tooltip = type === 'connected'
-        ? 'Export the current composition ' + shortcut
-        : 'Connect to the preview server to render';
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
-                height: 16,
+                height: 12,
             },
         };
     }, []);
-    const video = remotion_1.Internals.useVideo();
-    const frame = (0, remotion_1.useCurrentFrame)();
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const onClick = (0, react_1.useCallback)(() => {
-        var _a, _b, _c;
-        if (!video) {
-            return null;
-        }
-        const isVideo = video.durationInFrames > 1;
+    const isVideo = composition.durationInFrames > 1;
+    const onClick = (0, react_1.useCallback)((e) => {
+        var _a;
         const defaults = window.remotion_renderDefaults;
         if (!defaults) {
-            throw new TypeError('Expected defaults');
+            throw new Error('expected defaults');
         }
+        e.stopPropagation();
         const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
             defaultCodec: defaults.codec,
             isStill: !isVideo,
         });
         setSelectedModal({
             type: 'render',
-            compositionId: video.id,
-            initialFrame: frame,
-            initialStillImageFormat: defaults.stillImageFormat,
+            compositionId: composition.id,
+            initialFrame: 0,
             initialVideoImageFormat: defaults.videoImageFormat,
+            initialStillImageFormat: defaults.stillImageFormat,
+            initialJpegQuality: defaults.jpegQuality,
+            initialScale: defaults.scale,
+            initialVerbose: defaults.logLevel === 'verbose',
             initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
-                compositionName: video.id,
+                compositionName: composition.id,
                 defaultExtension: isVideo
                     ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec)
                     : defaults.stillImageFormat,
                 type: 'asset',
             }),
-            initialJpegQuality: defaults.jpegQuality,
-            initialScale: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1,
-            initialVerbose: defaults.logLevel === 'verbose',
             initialVideoCodecForAudioTab: initialAudioCodec,
             initialRenderType,
             initialVideoCodecForVideoTab: initialVideoCodec,
@@ -90,12 +71,17 @@ const RenderButton = () => {
             initialOpenGlRenderer: defaults.openGlRenderer,
             initialHeadless: defaults.headless,
             initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
-            defaultProps: (_c = props[video.id]) !== null && _c !== void 0 ? _c : video.defaultProps,
+            defaultProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps,
+            inFrameMark: null,
+            outFrameMark: null,
         });
-    }, [video, setSelectedModal, frame, props]);
-    if (!video) {
+    }, [composition.defaultProps, composition.id, isVideo, props, setSelectedModal]);
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return (0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
+    }, [iconStyle]);
+    if (!visible || connectionStatus !== 'connected') {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { id: "render-modal-button", title: tooltip, onClick: onClick, buttonContainerStyle: button, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("span", { style: label, children: "Render" })] }) }));
+    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
-exports.RenderButton = RenderButton;
+exports.SidebarRenderButton = SidebarRenderButton;

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

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

package/dist/editor/components/Spinner.js

@@ -0,0 +1,41 @@
+"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 Spinner = ({ size, duration }) => {
+    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} ${duration}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 * (duration / lines) - duration}s`,
+                        }, d: translated, fill: colors_1.LIGHT_TEXT }, index));
+                }) })] }));
+};
+exports.Spinner = Spinner;

package/dist/editor/components/Tabs/index.js

@@ -39,20 +39,18 @@ const Tab = ({ children, onClick, style, selected }) => {
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    const definiteStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...selectorButton,
-            backgroundColor: selected
-                ? 'transparent'
-                : hovered
-                    ? colors_1.CLEAR_HOVER
-                    : colors_1.INPUT_BACKGROUND,
-            color: selected ? 'white' : colors_1.LIGHT_TEXT,
-            borderTop: selected ? '2px solid var(--blue)' : '2px solid transparent',
-            boxShadow: selected ? 'none' : undefined,
-            ...style,
-        };
-    }, [hovered, selected, style]);
+    const definiteStyle = (0, react_1.useMemo)(() => ({
+        ...selectorButton,
+        backgroundColor: selected
+            ? colors_1.BACKGROUND
+            : hovered
+                ? colors_1.CLEAR_HOVER
+                : colors_1.INPUT_BACKGROUND,
+        color: selected ? 'white' : colors_1.LIGHT_TEXT,
+        borderTop: selected ? '2px solid ' + colors_1.BLUE : '2px solid transparent',
+        boxShadow: selected ? 'none' : undefined,
+        ...style,
+    }), [hovered, selected, style]);
     return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
 };
 exports.Tab = Tab;

package/dist/editor/components/Timeline/Timeline.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_ref_1 = require("../../state/timeline-ref");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
@@ -28,6 +29,7 @@ const container = {
     display: 'flex',
     height: 0,
     overflowY: 'auto',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const noop = () => undefined;
 const Timeline = () => {
@@ -84,7 +86,7 @@ const Timeline = () => {
         };
     }, [hasBeenCut, shown.length]);
     if (!videoConfig) {
-        return null;
+        return (0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset" });
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: "css-reset", children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { dispatchStateChange: dispatch, viewState: state, timeline: shown }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, fps: videoConfig.fps, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {})] }) })] }) }) }));
 };