@remotion/cli 3.3.83 → 3.3.84

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

@@ -38,6 +38,6 @@ const ZodStringEditor = ({ jsonPath, value, setValue, showSaveButton, defaultVal
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, rightAlign: false }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
 };
 exports.ZodStringEditor = ZodStringEditor;

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

@@ -10,8 +10,10 @@ const ZodDateEditor_1 = require("./ZodDateEditor");
 const ZodEffectEditor_1 = require("./ZodEffectEditor");
 const ZodEnumEditor_1 = require("./ZodEnumEditor");
 const ZodNonEditableValue_1 = require("./ZodNonEditableValue");
+const ZodNullableEditor_1 = require("./ZodNullableEditor");
 const ZodNumberEditor_1 = require("./ZodNumberEditor");
 const ZodObjectEditor_1 = require("./ZodObjectEditor");
+const ZodOptionalEditor_1 = require("./ZodOptionalEditor");
 const ZodStringEditor_1 = require("./ZodStringEditor");
 const ZodUnionEditor_1 = require("./ZodUnionEditor");
 const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, onSave, showSaveButton, onRemove, }) => {
@@ -64,6 +66,12 @@ const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, o
     if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodUnion) {
         return ((0, jsx_runtime_1.jsx)(ZodUnionEditor_1.ZodUnionEditor, { schema: schema, showSaveButton: showSaveButton, jsonPath: jsonPath, compact: compact, value: value, defaultValue: defaultValue, setValue: setValue, onSave: onSave, onRemove: onRemove }));
     }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodOptional) {
+        return ((0, jsx_runtime_1.jsx)(ZodOptionalEditor_1.ZodOptionalEditor, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodNullable) {
+        return ((0, jsx_runtime_1.jsx)(ZodNullableEditor_1.ZodNullableEditor, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema }));
+    }
     return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: `${typeName} (not editable)` }));
 };
 exports.ZodSwitch = ZodSwitch;

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

@@ -31,7 +31,6 @@ exports.rightRow = {
 };
 exports.input = {
     minWidth: 250,
-    textAlign: 'right',
 };
 exports.fieldsetLabel = {
     color: colors_1.LIGHT_TEXT,

package/dist/editor/components/RenderModal/out-name-checker.d.ts

@@ -1,6 +1,5 @@
 import type { AudioCodec, Codec, StillImageFormat } from '@remotion/renderer';
 import type { RenderType } from './RenderModalAdvanced';
-export declare const invalidCharacters: string[];
 export declare const validateOutnameGui: ({ outName, codec, audioCodec, renderMode, stillImageFormat, }: {
     outName: string;
     codec: Codec;

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateOutnameGui = exports.invalidCharacters = void 0;
+exports.validateOutnameGui = void 0;
 const client_1 = require("@remotion/renderer/client");
-exports.invalidCharacters = ['?', '*', '+', ':', '%'];
+const invalidCharacters = ['?', '*', '+', ':', '%'];
 const isValidStillExtension = (extension, stillImageFormat) => {
     if (stillImageFormat === 'jpeg' && extension === 'jpg') {
         return true;
@@ -43,7 +43,7 @@ const isValidOutName = ({ outName, codec, audioCodec, renderMode, stillImageForm
         return false;
     };
     const hasInvalidChar = () => {
-        return prefix.split('').some((char) => exports.invalidCharacters.includes(char));
+        return prefix.split('').some((char) => invalidCharacters.includes(char));
     };
     if (renderMode === 'video') {
         client_1.BrowserSafeApis.validateOutputFilename({

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

@@ -1,8 +1,6 @@
 import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
-import type { ApiRoutes } from '../../../preview-server/api-types';
 import type { RenderJob } from '../../../preview-server/render-queue/job';
 import type { RequiredChromiumOptions } from '../../../required-chromium-options';
-export declare const callApi: <Endpoint extends keyof ApiRoutes>(endpoint: Endpoint, body: ApiRoutes[Endpoint]["Request"]) => Promise<ApiRoutes[Endpoint]["Response"]>;
 export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }: {
     compositionId: string;
     outName: string;

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

@@ -1,6 +1,6 @@
 "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 = exports.callApi = void 0;
+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 callApi = (endpoint, body) => {
     return new Promise((resolve, reject) => {
@@ -25,9 +25,8 @@ const callApi = (endpoint, body) => {
         });
     });
 };
-exports.callApi = callApi;
 const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }) => {
-    return (0, exports.callApi)('/api/render', {
+    return callApi('/api/render', {
         compositionId,
         type: 'still',
         outName,
@@ -44,7 +43,7 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
 };
 exports.addStillRenderJob = addStillRenderJob;
 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, }) => {
-    return (0, exports.callApi)('/api/render', {
+    return callApi('/api/render', {
         compositionId,
         type: 'video',
         outName,
@@ -75,11 +74,11 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
 };
 exports.addVideoRenderJob = addVideoRenderJob;
 const unsubscribeFromFileExistenceWatcher = ({ file, clientId, }) => {
-    return (0, exports.callApi)('/api/unsubscribe-from-file-existence', { file, clientId });
+    return callApi('/api/unsubscribe-from-file-existence', { file, clientId });
 };
 exports.unsubscribeFromFileExistenceWatcher = unsubscribeFromFileExistenceWatcher;
 const subscribeToFileExistenceWatcher = async ({ file, clientId, }) => {
-    const { exists } = await (0, exports.callApi)('/api/subscribe-to-file-existence', {
+    const { exists } = await callApi('/api/subscribe-to-file-existence', {
         file,
         clientId,
     });
@@ -90,30 +89,30 @@ const openInFileExplorer = ({ directory }) => {
     const body = {
         directory,
     };
-    return (0, exports.callApi)('/api/open-in-file-explorer', body);
+    return callApi('/api/open-in-file-explorer', body);
 };
 exports.openInFileExplorer = openInFileExplorer;
 const removeRenderJob = (job) => {
-    return (0, exports.callApi)('/api/remove-render', {
+    return callApi('/api/remove-render', {
         jobId: job.id,
     });
 };
 exports.removeRenderJob = removeRenderJob;
 const cancelRenderJob = (job) => {
-    return (0, exports.callApi)('/api/cancel', {
+    return callApi('/api/cancel', {
         jobId: job.id,
     });
 };
 exports.cancelRenderJob = cancelRenderJob;
 const updateDefaultProps = (compositionId, defaultProps) => {
-    return (0, exports.callApi)('/api/update-default-props', {
+    return callApi('/api/update-default-props', {
         compositionId,
         defaultProps: (0, date_serialization_1.serializeJSONWithDate)(defaultProps, undefined),
     });
 };
 exports.updateDefaultProps = updateDefaultProps;
 const canUpdateDefaultProps = (compositionId) => {
-    return (0, exports.callApi)('/api/can-update-default-props', {
+    return callApi('/api/can-update-default-props', {
         compositionId,
     });
 };

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

@@ -3,15 +3,39 @@ 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 context_1 = require("./context");
 const RenderQueueItem_1 = require("./RenderQueueItem");
 const separatorStyle = {
     borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
 };
-// TODO: Handle state where preview server is disconnected
+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',
+};
 const RenderQueue = () => {
+    const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).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 preview 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", { 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/RenderToolbarIcon.js

@@ -2,29 +2,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = 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 ControlButton_1 = require("./ControlButton");
+const layout_1 = require("./layout");
+const button = {
+    paddingLeft: 7,
+    paddingRight: 7,
+    paddingTop: 7,
+    paddingBottom: 7,
+};
+const label = {
+    fontSize: 14,
+};
 const RenderButton = () => {
     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: 18,
+                height: 16,
             },
         };
     }, []);
-    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 video = remotion_1.Internals.useVideo();
     const frame = (0, remotion_1.useCurrentFrame)();
     const onClick = (0, react_1.useCallback)(() => {
@@ -49,7 +60,9 @@ const RenderButton = () => {
             initialVideoImageFormat: defaults.videoImageFormat,
             initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
                 compositionName: video.id,
-                defaultExtension: isVideo ? 'mp4' : 'png',
+                defaultExtension: isVideo
+                    ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec)
+                    : defaults.stillImageFormat,
                 type: 'asset',
             }),
             initialJpegQuality: defaults.jpegQuality,
@@ -81,6 +94,6 @@ const RenderButton = () => {
     if (!video) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { id: "render-modal-button", disabled: type !== 'connected', title: tooltip, "aria-label": tooltip, onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }) }));
+    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" })] }) }));
 };
 exports.RenderButton = RenderButton;

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

@@ -1,4 +1,3 @@
-import type { PropsWithChildren } from 'react';
 import React from 'react';
 export declare type SegmentedControlItem = {
     label: React.ReactNode;
@@ -10,7 +9,3 @@ export declare const SegmentedControl: React.FC<{
     items: SegmentedControlItem[];
     needsWrapping: boolean;
 }>;
-export declare const Item: React.FC<PropsWithChildren<{
-    selected: boolean;
-    onClick: () => void;
-}>>;

package/dist/editor/components/SegmentedControl.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Item = exports.SegmentedControl = void 0;
+exports.SegmentedControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
@@ -38,7 +38,7 @@ const SegmentedControl = ({ items, needsWrapping }) => {
         };
     }, [needsWrapping]);
     return ((0, jsx_runtime_1.jsx)("div", { style: controlStyle, children: items.map((i) => {
-            return ((0, jsx_runtime_1.jsx)(exports.Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
+            return ((0, jsx_runtime_1.jsx)(Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
         }) }));
 };
 exports.SegmentedControl = SegmentedControl;
@@ -60,4 +60,3 @@ const Item = ({ selected, onClick, children }) => {
     }, [hovered, selected]);
     return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
 };
-exports.Item = Item;

package/dist/editor/components/Splitter/SplitterElement.js

@@ -14,6 +14,7 @@ const SplitterElement = ({ children, type }) => {
             display: 'flex',
             position: 'relative',
             overflow: 'hidden',
+            flexDirection: 'column',
         };
     }, [context.flexValue, type]);
     return (0, jsx_runtime_1.jsx)("div", { style: style, children: children });

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

@@ -3,7 +3,6 @@ export declare const Tabs: React.FC<{
     children: React.ReactNode;
     style?: React.CSSProperties;
 }>;
-export declare const selectorButton: React.CSSProperties;
 export declare const Tab: React.FC<{
     children: React.ReactNode;
     onClick: React.MouseEventHandler<HTMLButtonElement>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tab = exports.selectorButton = exports.Tabs = void 0;
+exports.Tab = exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
@@ -19,7 +19,7 @@ const Tabs = ({ children, style }) => {
     return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
 };
 exports.Tabs = Tabs;
-exports.selectorButton = {
+const selectorButton = {
     border: 'none',
     flex: 1,
     padding: 8,
@@ -41,7 +41,7 @@ const Tab = ({ children, onClick, style, selected }) => {
     }, []);
     const definiteStyle = (0, react_1.useMemo)(() => {
         return {
-            ...exports.selectorButton,
+            ...selectorButton,
             backgroundColor: selected
                 ? 'transparent'
                 : hovered

package/dist/editor/components/Tabs/vertical.d.ts

@@ -1,9 +1,4 @@
 import React from 'react';
-export declare const VerticalTabs: React.FC<{
-    children: React.ReactNode;
-    style?: React.CSSProperties;
-}>;
-export declare const selectorButton: React.CSSProperties;
 export declare const VerticalTab: React.FC<{
     children: React.ReactNode;
     onClick: React.MouseEventHandler<HTMLButtonElement>;

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

@@ -1,25 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalTab = exports.selectorButton = exports.VerticalTabs = void 0;
+exports.VerticalTab = 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 tabsContainer = {
-    display: 'flex',
-    flexDirection: 'row',
-};
-const VerticalTabs = ({ children, style }) => {
-    const definiteStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...tabsContainer,
-            ...style,
-        };
-    }, [style]);
-    return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
-};
-exports.VerticalTabs = VerticalTabs;
-exports.selectorButton = {
+const selectorButton = {
     border: 'none',
     flex: 1,
     padding: 8,
@@ -41,7 +27,7 @@ const VerticalTab = ({ children, onClick, style, selected }) => {
     }, []);
     const definiteStyle = (0, react_1.useMemo)(() => {
         return {
-            ...exports.selectorButton,
+            ...selectorButton,
             backgroundColor: selected
                 ? colors_1.SELECTED_BACKGROUND
                 : hovered

package/dist/editor/components/TimeValue.js

@@ -18,14 +18,13 @@ const text = {
 const time = {
     display: 'inline-block',
     fontSize: 18,
+    lineHeight: 1,
 };
 const frameStyle = {
     color: '#ccc',
     fontSize: 10,
     fontWeight: 500,
-};
-const spacer = {
-    width: layout_1.SPACING_UNIT,
+    lineHeight: 1,
 };
 const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
@@ -37,6 +36,6 @@ const TimeValue = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: text, children: [(0, jsx_runtime_1.jsx)("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), ' ', (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: frameStyle, children: [frame, " ", (0, jsx_runtime_1.jsxs)("span", { style: frameStyle, children: ["(", config.fps, " fps)"] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: text, children: [(0, jsx_runtime_1.jsx)("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: frameStyle, children: [frame, " ", (0, jsx_runtime_1.jsxs)("span", { style: frameStyle, children: ["(", config.fps, " fps)"] })] })] }));
 };
 exports.TimeValue = TimeValue;

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

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
 const TimelineCollapseToggle_1 = require("./TimelineCollapseToggle");
 const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
 const HOOK_WIDTH = 7;
@@ -16,6 +17,9 @@ const TIMELINE_COLLAPSER_MARGIN_RIGHT = 10;
 exports.TOTAL_TIMELINE_LAYER_LEFT_PADDING = TIMELINE_COLLAPSER_WIDTH + TIMELINE_COLLAPSER_MARGIN_RIGHT + timeline_layout_1.TIMELINE_PADDING;
 const textStyle = {
     fontSize: 13,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
 };
 const outer = {
     height: timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2,
@@ -43,14 +47,17 @@ const hook = {
 };
 const space = {
     width: SPACING,
+    flexShrink: 0,
 };
 const smallSpace = {
     width: SPACING * 0.5,
+    flexShrink: 0,
 };
 const collapser = {
     width: TIMELINE_COLLAPSER_WIDTH,
     userSelect: 'none',
     marginRight: TIMELINE_COLLAPSER_MARGIN_RIGHT,
+    flexShrink: 0,
 };
 const collapserButton = {
     ...collapser,
@@ -71,6 +78,7 @@ const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispa
     const padder = (0, react_1.useMemo)(() => {
         return {
             width: leftOffset * nestedDepth,
+            flexShrink: 0,
         };
     }, [leftOffset, nestedDepth]);
     const toggleCollapse = (0, react_1.useCallback)(() => {
@@ -90,6 +98,6 @@ const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispa
     const text = sequence.displayName.length > 80
         ? sequence.displayName.slice(0, 80) + '...'
         : sequence.displayName;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { title: text || 'Untitled', style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/preview-server/api-types.d.ts

@@ -8,10 +8,6 @@ export declare type ApiHandler<ReqData, ResData> = (params: {
     request: IncomingMessage;
     response: ServerResponse;
 }) => Promise<ResData>;
-export declare type ApiRoute<ReqData, ResData> = {
-    handler: ApiHandler<ReqData, ResData>;
-    endpoint: string;
-};
 declare type ReqAndRes<A, B> = {
     Request: A;
     Response: B;

package/dist/preview-server/render-queue/job.d.ts

@@ -1,7 +1,7 @@
 import type { AudioCodec, Codec, makeCancelSignal, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 import type { AggregateRenderProgress } from '../../progress-types';
 import type { RequiredChromiumOptions } from '../../required-chromium-options';
-export declare type BaseRenderProgress = {
+declare type BaseRenderProgress = {
     message: string;
     value: number;
 };

package/dist/preview-server/render-queue/queue.d.ts

@@ -1,13 +1,5 @@
-import type { JobProgressCallback, RenderJob, RenderJobWithCleanup } from './job';
+import type { RenderJob, RenderJobWithCleanup } from './job';
 export declare const getRenderQueue: () => RenderJob[];
-export declare const notifyClientsOfJobUpdate: () => void;
-export declare const processJob: ({ job, remotionRoot, entryPoint, onProgress, addCleanupCallback, }: {
-    job: RenderJob;
-    remotionRoot: string;
-    entryPoint: string;
-    onProgress: JobProgressCallback;
-    addCleanupCallback: (cb: () => void) => void;
-}) => Promise<void>;
 export declare const addJob: ({ job, entryPoint, remotionRoot, }: {
     job: RenderJobWithCleanup;
     entryPoint: string;
@@ -15,7 +7,3 @@ export declare const addJob: ({ job, entryPoint, remotionRoot, }: {
 }) => void;
 export declare const removeJob: (jobId: string) => void;
 export declare const cancelJob: (jobId: string) => void;
-export declare const processJobIfPossible: ({ remotionRoot, entryPoint, }: {
-    remotionRoot: string;
-    entryPoint: string;
-}) => Promise<void>;

package/dist/preview-server/render-queue/queue.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.processJobIfPossible = exports.cancelJob = exports.removeJob = exports.addJob = exports.processJob = exports.notifyClientsOfJobUpdate = exports.getRenderQueue = void 0;
+exports.cancelJob = exports.removeJob = exports.addJob = exports.getRenderQueue = void 0;
 const path_1 = __importDefault(require("path"));
 const chalk_1 = require("../../chalk");
 const file_watcher_1 = require("../../file-watcher");
@@ -21,7 +21,7 @@ const updateJob = (id, updater) => {
         }
         return j;
     });
-    (0, exports.notifyClientsOfJobUpdate)();
+    notifyClientsOfJobUpdate();
 };
 const getRenderQueue = () => {
     return jobQueue.map((j) => {
@@ -38,7 +38,6 @@ const notifyClientsOfJobUpdate = () => {
         });
     });
 };
-exports.notifyClientsOfJobUpdate = notifyClientsOfJobUpdate;
 const processJob = async ({ job, remotionRoot, entryPoint, onProgress, addCleanupCallback, }) => {
     if (job.type === 'still') {
         await (0, process_still_1.processStill)({
@@ -62,11 +61,10 @@ const processJob = async ({ job, remotionRoot, entryPoint, onProgress, addCleanu
     }
     throw new Error(`Unknown job ${JSON.stringify(job)}`);
 };
-exports.processJob = processJob;
 const addJob = ({ job, entryPoint, remotionRoot, }) => {
     jobQueue.push(job);
-    (0, exports.processJobIfPossible)({ entryPoint, remotionRoot });
-    (0, exports.notifyClientsOfJobUpdate)();
+    processJobIfPossible({ entryPoint, remotionRoot });
+    notifyClientsOfJobUpdate();
 };
 exports.addJob = addJob;
 const removeJob = (jobId) => {
@@ -79,7 +77,7 @@ const removeJob = (jobId) => {
         }
         return true;
     });
-    (0, exports.notifyClientsOfJobUpdate)();
+    notifyClientsOfJobUpdate();
 };
 exports.removeJob = removeJob;
 const cancelJob = (jobId) => {
@@ -118,7 +116,7 @@ const processJobIfPossible = async ({ remotionRoot, entryPoint, }) => {
         const startTime = Date.now();
         log_1.Log.info(chalk_1.chalk.gray('╭─ Starting render '));
         let lastProgress = null;
-        await (0, exports.processJob)({
+        await processJob({
             job: nextJob,
             entryPoint,
             remotionRoot,
@@ -205,4 +203,3 @@ const processJobIfPossible = async ({ remotionRoot, entryPoint, }) => {
         await Promise.all(jobCleanups.map((c) => c()));
     }
 };
-exports.processJobIfPossible = processJobIfPossible;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "3.3.83",
+  "version": "3.3.84",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -16,16 +16,16 @@
   "author": "Jonny Burger <jonny@remotion.dev>",
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@remotion/bundler": "3.3.83",
-    "@remotion/media-utils": "3.3.83",
-    "@remotion/player": "3.3.83",
-    "@remotion/renderer": "3.3.83",
+    "@remotion/bundler": "3.3.84",
+    "@remotion/media-utils": "3.3.84",
+    "@remotion/player": "3.3.84",
+    "@remotion/renderer": "3.3.84",
     "dotenv": "9.0.2",
     "memfs": "3.4.3",
     "minimist": "1.2.6",
     "open": "^8.4.2",
     "prompts": "2.4.1",
-    "remotion": "3.3.83",
+    "remotion": "3.3.84",
     "semver": "7.3.5",
     "source-map": "0.6.1"
   },