@remotion/cli 4.0.0-webhook.27 → 4.1.0-alpha1

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RenderQueue: React.FC;

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 = {
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+};
+const errorExplanation = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+};
+const explainer = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    padding: '0 12px',
+    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.StudioServerConnectionCtx).type;
+    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const jobCount = jobs.length;
+    if (connectionStatus === 'disconnected') {
+        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: "The studio server has disconnected." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+    }
+    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", { 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));
+        }) }));
+};
+exports.RenderQueue = RenderQueue;

package/dist/editor/components/RenderQueue/item-style.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const renderQueueItemSubtitleStyle: React.CSSProperties;

package/dist/editor/components/RenderQueue/item-style.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderQueueItemSubtitleStyle = void 0;
+const colors_1 = require("../../helpers/colors");
+const layout_1 = require("../layout");
+exports.renderQueueItemSubtitleStyle = {
+    fontSize: 13,
+    color: colors_1.LIGHT_TEXT,
+    appearance: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    lineHeight: 1.2,
+    textAlign: 'left',
+    whiteSpace: 'nowrap',
+    marginRight: layout_1.SPACING_UNIT,
+    overflowX: 'hidden',
+    // size smaller than viewport causes actual ellipse
+    maxWidth: 500,
+    textOverflow: 'ellipsis',
+};

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

@@ -0,0 +1,6 @@
+import type { MouseEventHandler } from 'react';
+import React from 'react';
+export declare const RendersTab: React.FC<{
+    selected: boolean;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}>;

package/dist/editor/components/RendersTab.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RendersTab = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const layout_1 = require("./layout");
+const context_1 = require("./RenderQueue/context");
+const Tabs_1 = require("./Tabs");
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 14,
+    color: 'inherit',
+    alignItems: 'center',
+    flex: 1,
+};
+const badge = {
+    height: 16,
+    width: 16,
+    borderRadius: 3,
+    fontSize: 10,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const RendersTab = ({ selected, onClick }) => {
+    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const failedJobs = jobs.filter((j) => j.status === 'failed').length;
+    const jobCount = jobs.length;
+    const badgeStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...badge,
+            backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : 'transparent',
+            color: failedJobs > 0 ? 'white' : colors_1.LIGHT_TEXT,
+            borderWidth: failedJobs > 0 ? 0 : 1,
+            borderStyle: 'solid',
+            borderColor: colors_1.LIGHT_TEXT,
+        };
+    }, [failedJobs]);
+    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
+};
+exports.RendersTab = RendersTab;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type SidebarPanel = 'input-props' | 'renders';
+export declare const persistSelectedPanel: (panel: SidebarPanel) => void;
+export declare const rightSidebarTabs: React.RefObject<{
+    selectRendersPanel: () => void;
+}>;
+export declare const RightPanel: React.FC<{}>;
+export {};

package/dist/editor/components/RightPanel.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const DataEditor_1 = require("./RenderModal/DataEditor");
+const RenderQueue_1 = require("./RenderQueue");
+const RendersTab_1 = require("./RendersTab");
+const Tabs_1 = require("./Tabs");
+const container = {
+    height: '100%',
+    width: '100%',
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+};
+const PropsEditor = ({ composition }) => {
+    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,
+        });
+    }, [composition.defaultProps, composition.id, updateProps]);
+    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, mayShowSaveButton: true, propsEditType: "default-props" }, composition.id));
+};
+const localStorageKey = 'remotion.sidebarPanel';
+const getSelectedPanel = () => {
+    const panel = localStorage.getItem(localStorageKey);
+    if (panel === 'renders') {
+        return 'renders';
+    }
+    return 'input-props';
+};
+const tabsContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+};
+const persistSelectedPanel = (panel) => {
+    localStorage.setItem(localStorageKey, panel);
+};
+exports.persistSelectedPanel = persistSelectedPanel;
+exports.rightSidebarTabs = (0, react_1.createRef)();
+const RightPanel = () => {
+    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
+    const onCompositionsSelected = (0, react_1.useCallback)(() => {
+        setPanel('input-props');
+        (0, exports.persistSelectedPanel)('input-props');
+    }, []);
+    const onRendersSelected = (0, react_1.useCallback)(() => {
+        setPanel('renders');
+        (0, exports.persistSelectedPanel)('renders');
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.rightSidebarTabs, () => {
+        return {
+            selectRendersPanel: () => {
+                setPanel('renders');
+                (0, exports.persistSelectedPanel)('renders');
+            },
+        };
+    }, []);
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const composition = (0, react_1.useMemo)(() => {
+        for (const comp of compositions) {
+            if (comp.id === currentComposition) {
+                return comp;
+            }
+        }
+        return null;
+    }, [compositions, currentComposition]);
+    if (composition === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, children: "Props" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(PropsEditor, { composition: composition }))] }));
+};
+exports.RightPanel = RightPanel;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export type SegmentedControlItem = {
+    label: React.ReactNode;
+    onClick: () => void;
+    key: string;
+    selected: boolean;
+};
+export declare const SegmentedControl: React.FC<{
+    items: SegmentedControlItem[];
+    needsWrapping: boolean;
+}>;

package/dist/editor/components/SegmentedControl.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    overflow: 'hidden',
+    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    flexWrap: 'wrap',
+    maxWidth: '295px',
+    justifyContent: 'flex-end',
+};
+const item = {
+    display: 'flex',
+    fontSize: 15,
+    padding: '4px 12px',
+    cursor: 'pointer',
+    appearance: 'none',
+    border: 'none',
+    flex: 1,
+    justifyContent: 'center',
+};
+const SegmentedControl = ({ items, needsWrapping }) => {
+    const controlStyle = (0, react_1.useMemo)(() => {
+        if (needsWrapping) {
+            return {
+                ...container,
+                flexWrap: 'wrap',
+                maxWidth: '248px',
+                justifyContent: 'flex-end',
+                marginBottom: '8px',
+            };
+        }
+        return {
+            ...container,
+        };
+    }, [needsWrapping]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: controlStyle, children: items.map((i) => {
+            return ((0, jsx_runtime_1.jsx)(Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
+        }) }));
+};
+exports.SegmentedControl = SegmentedControl;
+const Item = ({ selected, onClick, children }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const itemStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...item,
+            backgroundColor: selected ? colors_1.INPUT_BACKGROUND : 'transparent',
+            color: selected ? 'white' : hovered ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered, selected]);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SetTimelineInOutProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/SetTimelineInOutProvider.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SetTimelineInOutProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const in_out_1 = require("../state/in-out");
+const SetTimelineInOutProvider = ({ children }) => {
+    const [inAndOutFrames, setInAndOutFrames] = (0, react_1.useState)({
+        inFrame: null,
+        outFrame: null,
+    });
+    const setTimelineInOutContextValue = (0, react_1.useMemo)(() => {
+        return {
+            setInAndOutFrames,
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: inAndOutFrames, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }));
+};
+exports.SetTimelineInOutProvider = SetTimelineInOutProvider;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SidebarCollapserControls: React.FC<{}>;

package/dist/editor/components/SidebarCollapserControls.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarCollapserControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const sidebar_1 = require("../state/sidebar");
+const InlineAction_1 = require("./InlineAction");
+const TopPanel_1 = require("./TopPanel");
+const style = {
+    width: 16,
+    height: 16,
+    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.useCallback)((color) => {
+        return {
+            width: '35%',
+            height: '100%',
+            borderRight: '1px solid ' + color,
+            background: leftSidebarStatus === 'expanded' ? color : 'transparent',
+        };
+    }, [leftSidebarStatus]);
+    const rightIcon = (0, react_1.useCallback)((color) => {
+        return {
+            width: '35%',
+            height: '100%',
+            right: 0,
+            position: 'absolute',
+            borderLeft: '1px solid ' + color,
+            background: sidebarCollapsedStateRight === 'expanded' ? color : 'transparent',
+        };
+    }, [sidebarCollapsedStateRight]);
+    const toggleLeft = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({
+            left: (s) => {
+                if (s === 'responsive') {
+                    return leftSidebarStatus === 'collapsed' ? 'expanded' : 'collapsed';
+                }
+                return s === 'collapsed' ? 'expanded' : 'collapsed';
+            },
+            right: null,
+        });
+    }, [leftSidebarStatus, setSidebarCollapsedState]);
+    const toggleRight = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({
+            right: (s) => (s === 'collapsed' ? 'expanded' : 'collapsed'),
+            left: null,
+        });
+    }, [setSidebarCollapsedState]);
+    const toggleBoth = (0, react_1.useCallback)(() => {
+        if (sidebarCollapsedStateRight === leftSidebarStatus) {
+            setSidebarCollapsedState({
+                left: (s) => {
+                    if (s === 'responsive') {
+                        return leftSidebarStatus === 'collapsed' ? 'expanded' : 'collapsed';
+                    }
+                    return s === 'collapsed' ? 'expanded' : 'collapsed';
+                },
+                right: (s) => (s === 'collapsed' ? 'expanded' : 'collapsed'),
+            });
+        }
+        else if (sidebarCollapsedStateRight === 'expanded') {
+            toggleRight();
+        }
+        else if (leftSidebarStatus === 'expanded') {
+            toggleLeft();
+        }
+    }, [
+        leftSidebarStatus,
+        setSidebarCollapsedState,
+        sidebarCollapsedStateRight,
+        toggleLeft,
+        toggleRight,
+    ]);
+    (0, react_1.useEffect)(() => {
+        const left = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'b',
+            commandCtrlKey: true,
+            callback: toggleLeft,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        const right = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'j',
+            commandCtrlKey: true,
+            callback: toggleRight,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        const zen = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'g',
+            commandCtrlKey: true,
+            callback: toggleBoth,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        return () => {
+            left.unregister();
+            right.unregister();
+            zen.unregister();
+        };
+    }, [keybindings, toggleBoth, toggleLeft, toggleRight]);
+    const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Toggle Left Sidebar'
+        : `Toggle Left Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+B)`;
+    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Toggle Right Sidebar'
+        : `Toggle Right Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+J)`;
+    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/SidebarRenderButton.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
+const client_id_1 = require("../helpers/client-id");
+const render_1 = require("../icons/render");
+const modals_1 = require("../state/modals");
+const InlineAction_1 = require("./InlineAction");
+const SidebarRenderButton = ({ composition, visible }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const iconStyle = (0, react_1.useMemo)(() => {
+        return {
+            style: {
+                height: 12,
+            },
+        };
+    }, []);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const isVideo = composition.durationInFrames > 1;
+    const onClick = (0, react_1.useCallback)((e) => {
+        var _a;
+        const defaults = window.remotion_renderDefaults;
+        if (!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: 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: composition.id,
+                defaultExtension: isVideo
+                    ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec)
+                    : defaults.stillImageFormat,
+                type: 'asset',
+            }),
+            initialVideoCodecForAudioTab: initialAudioCodec,
+            initialRenderType,
+            initialVideoCodecForVideoTab: initialVideoCodec,
+            initialConcurrency: defaults.concurrency,
+            maxConcurrency: defaults.maxConcurrency,
+            minConcurrency: defaults.minConcurrency,
+            initialMuted: defaults.muted,
+            initialEnforceAudioTrack: defaults.enforceAudioTrack,
+            initialProResProfile: defaults.proResProfile,
+            initialPixelFormat: defaults.pixelFormat,
+            initialAudioBitrate: defaults.audioBitrate,
+            initialVideoBitrate: defaults.videoBitrate,
+            initialEveryNthFrame: defaults.everyNthFrame,
+            initialNumberOfGifLoops: defaults.numberOfGifLoops,
+            initialDelayRenderTimeout: defaults.delayRenderTimeout,
+            initialAudioCodec: defaults.audioCodec,
+            initialEnvVariables: window.process.env,
+            initialDisableWebSecurity: defaults.disableWebSecurity,
+            initialOpenGlRenderer: defaults.openGlRenderer,
+            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) => {
+        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)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+};
+exports.SidebarRenderButton = SidebarRenderButton;

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

@@ -1,6 +1,5 @@
 import type { PreviewSize } from '@remotion/player';
 import React from 'react';
-export declare const commonPreviewSizes: PreviewSize[];
 export declare const getPreviewSizeLabel: (previewSize: PreviewSize) => string;
 export declare const getUniqueSizes: (size: PreviewSize) => PreviewSize[];
 export declare const SizeSelector: React.FC;

package/dist/editor/components/SizeSelector.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = exports.commonPreviewSizes = void 0;
+exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkmark_1 = require("../icons/Checkmark");
 const preview_size_1 = require("../state/preview-size");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
-exports.commonPreviewSizes = [
+const commonPreviewSizes = [
     {
         size: 'auto',
         translation: {
@@ -47,7 +47,7 @@ exports.getPreviewSizeLabel = getPreviewSizeLabel;
 const accessibilityLabel = 'Preview Size';
 const comboStyle = { width: 80 };
 const getUniqueSizes = (size) => {
-    const customPreviewSizes = [size, ...exports.commonPreviewSizes];
+    const customPreviewSizes = [size, ...commonPreviewSizes];
     const uniqueSizes = [];
     customPreviewSizes.forEach((p) => {
         if (!uniqueSizes.find((s) => s.size === p.size)) {
@@ -84,9 +84,10 @@ const SizeSelector = () => {
                 },
                 type: 'item',
                 value: newSize.size,
-                keyHint: newSize.size === 1 ? '0' : null,
+                keyHint: newSize.size === 'auto' ? '0' : null,
                 leftItem: String(size.size) === String(newSize.size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
+                quickSwitcherLabel: null,
             };
         });
     }, [setSize, size]);

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;