@remotion/studio 4.0.423 → 4.0.424

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

@@ -1,16 +1,13 @@
-import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
-import type { HardwareAccelerationOption } from '@remotion/renderer/client';
-import type { CanUpdateDefaultPropsResponse, EnumPath, RecastCodemod, RenderJob, RequiredChromiumOptions, VisualControlChange } from '@remotion/studio-shared';
-import type { _InternalTypes } from 'remotion';
+import type { CanUpdateDefaultPropsResponse, EnumPath, RecastCodemod, RenderJob, VisualControlChange } from '@remotion/studio-shared';
 export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
-    imageFormat: StillImageFormat;
+    imageFormat: "jpeg" | "pdf" | "png" | "webp";
     jpegQuality: number;
     frame: number;
     scale: number;
-    logLevel: LogLevel;
-    chromiumOptions: RequiredChromiumOptions;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    chromiumOptions: Required<import("@remotion/renderer").ChromiumOptions>;
     delayRenderTimeout: number;
     envVariables: Record<string, string>;
     inputProps: Record<string, unknown>;
@@ -19,19 +16,19 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     multiProcessOnLinux: boolean;
     beepOnFinish: boolean;
     metadata: Record<string, string> | null;
-    chromeMode: ChromeMode;
+    chromeMode: "chrome-for-testing" | "headless-shell";
     mediaCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
 export declare const addSequenceRenderJob: ({ compositionId, outName, imageFormat, startFrame, endFrame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, concurrency, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, jpegQuality, disallowParallelEncoding, multiProcessOnLinux, beepOnFinish, repro, metadata, chromeMode, mediaCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
-    imageFormat: VideoImageFormat;
+    imageFormat: "jpeg" | "none" | "png";
     jpegQuality: number;
     startFrame: number;
     endFrame: number;
     scale: number;
-    logLevel: LogLevel;
-    chromiumOptions: RequiredChromiumOptions;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    chromiumOptions: Required<import("@remotion/renderer").ChromiumOptions>;
     concurrency: number;
     delayRenderTimeout: number;
     envVariables: Record<string, string>;
@@ -43,39 +40,39 @@ export declare const addSequenceRenderJob: ({ compositionId, outName, imageForma
     beepOnFinish: boolean;
     repro: boolean;
     metadata: Record<string, string> | null;
-    chromeMode: ChromeMode;
+    chromeMode: "chrome-for-testing" | "headless-shell";
     mediaCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
 export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
-    imageFormat: VideoImageFormat;
+    imageFormat: "jpeg" | "none" | "png";
     jpegQuality: number | null;
     scale: number;
-    logLevel: LogLevel;
-    codec: Codec;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
     concurrency: number;
     crf: number | null;
     startFrame: number;
     endFrame: number;
     muted: boolean;
     enforceAudioTrack: boolean;
-    proResProfile: _InternalTypes["ProResProfile"] | null;
-    x264Preset: X264Preset | null;
-    pixelFormat: PixelFormat;
+    proResProfile: "4444" | "4444-xq" | "hq" | "light" | "proxy" | "standard" | null;
+    x264Preset: "fast" | "faster" | "medium" | "placebo" | "slow" | "slower" | "superfast" | "ultrafast" | "veryfast" | "veryslow" | null;
+    pixelFormat: "yuv420p" | "yuv420p10le" | "yuv422p" | "yuv422p10le" | "yuv444p" | "yuv444p10le" | "yuva420p" | "yuva444p10le";
     audioBitrate: string | null;
     videoBitrate: string | null;
     everyNthFrame: number;
     numberOfGifLoops: number | null;
     delayRenderTimeout: number;
-    audioCodec: AudioCodec;
+    audioCodec: "aac" | "mp3" | "opus" | "pcm-16";
     disallowParallelEncoding: boolean;
-    chromiumOptions: RequiredChromiumOptions;
+    chromiumOptions: Required<import("@remotion/renderer").ChromiumOptions>;
     envVariables: Record<string, string>;
     inputProps: Record<string, unknown>;
     offthreadVideoCacheSizeInBytes: number | null;
     offthreadVideoThreads: number | null;
-    colorSpace: ColorSpace;
+    colorSpace: "bt2020-ncl" | "bt601" | "bt709" | "default";
     multiProcessOnLinux: boolean;
     encodingMaxRate: string | null;
     encodingBufferSize: string | null;
@@ -84,8 +81,8 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     forSeamlessAacConcatenation: boolean;
     separateAudioTo: string | null;
     metadata: Record<string, string> | null;
-    hardwareAcceleration: HardwareAccelerationOption;
-    chromeMode: ChromeMode;
+    hardwareAcceleration: "disable" | "if-possible" | "required";
+    chromeMode: "chrome-for-testing" | "headless-shell";
     mediaCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
@@ -102,7 +99,7 @@ export declare const openInFileExplorer: ({ directory }: {
 export declare const applyCodemod: ({ codemod, dryRun, signal, }: {
     codemod: RecastCodemod;
     dryRun: boolean;
-    signal: AbortController["signal"];
+    signal: AbortSignal;
 }) => Promise<import("@remotion/studio-shared").ApplyCodemodResponse>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("@remotion/studio-shared").CancelRenderResponse>;

package/dist/components/RenderQueue/client-side-render-types.d.ts

@@ -2,7 +2,6 @@ import type { CompletedClientRender } from '@remotion/studio-shared';
 import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type { LogLevel } from 'remotion';
 export type ClientRenderJobProgress = {
-    renderedFrames: number;
     encodedFrames: number;
     totalFrames: number;
 };

package/dist/components/RenderQueue/context.js

@@ -86,7 +86,7 @@ const RenderQueueContextProvider = ({ children }) => {
             ? {
                 ...job,
                 status: 'running',
-                progress: { renderedFrames: 0, encodedFrames: 0, totalFrames: 0 },
+                progress: { encodedFrames: 0, totalFrames: 0 },
             }
             : job));
         processJobCallbackRef.current(nextJob);
@@ -228,6 +228,6 @@ const RenderQueueContextProvider = ({ children }) => {
         cancelClientJob,
         setProcessJobCallback,
     ]);
-    return ((0, jsx_runtime_1.jsx)(exports.RenderQueueContext.Provider, { value: value, children: children }));
+    return (jsx_runtime_1.jsx(exports.RenderQueueContext.Provider, { value: value, children: children }));
 };
 exports.RenderQueueContextProvider = RenderQueueContextProvider;

package/dist/components/RenderQueue/index.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const show_browser_rendering_1 = require("../../helpers/show-browser-rendering");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const layout_1 = require("../layout");
 const RenderQueueItem_1 = require("./RenderQueueItem");
@@ -102,14 +103,18 @@ const RenderQueue = () => {
         }
         return -1;
     }, [canvasContent, jobs]);
-    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 (connectionStatus === 'disconnected' && !show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
+        return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
+                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "The studio server has disconnected." }), 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 (jsx_runtime_1.jsxs("div", { style: explainer, children: [
+                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "No renders in the queue." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
+            ] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: divRef, 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, { selected: selectedJob === index, job: j }) }, j.id));
+    return (jsx_runtime_1.jsx("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
+            return (jsx_runtime_1.jsx("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: jsx_runtime_1.jsx(RenderQueueItem_1.RenderQueueItem, { selected: selectedJob === index, job: j }) }, j.id));
         }) }));
 };
 exports.RenderQueue = RenderQueue;

package/dist/components/RendersTab.js

@@ -46,6 +46,8 @@ const RendersTab = ({ selected, onClick }) => {
             borderColor: colors_1.LIGHT_TEXT,
         };
     }, [failedJobs]);
-    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: isActuallySelected, 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] }) }));
+    return (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: isActuallySelected, onClick: onClick, children: jsx_runtime_1.jsxs("div", { style: row, children: ["Renders", jobCount > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx("div", { style: badgeStyle, children: jobCount })
+                    ] })) : null] }) }));
 };
 exports.RendersTab = RendersTab;

package/dist/components/ResetZoomButton.js

@@ -4,6 +4,6 @@ exports.ResetZoomButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("./Button");
 const ResetZoomButton = ({ onClick }) => {
-    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, children: "Reset zoom" });
+    return jsx_runtime_1.jsx(Button_1.Button, { onClick: onClick, children: "Reset zoom" });
 };
 exports.ResetZoomButton = ResetZoomButton;

package/dist/components/RunningCalculateMetadata.js

@@ -21,6 +21,10 @@ const container = {
     padding: 20,
 };
 const RunningCalculateMetadata = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 24, duration: 1 }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: exports.loaderLabel, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), "..."] })] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx(Spinner_1.Spinner, { size: 24, duration: 1 }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsxs("div", { style: exports.loaderLabel, children: ["Running ",
+                    jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }),
+                    "..."] })
+        ] }));
 };
 exports.RunningCalculateMetadata = RunningCalculateMetadata;

package/dist/components/SegmentedControl.js

@@ -40,8 +40,8 @@ const SegmentedControl = ({ items, needsWrapping }) => {
             ...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));
+    return (jsx_runtime_1.jsx("div", { style: controlStyle, children: items.map((i) => {
+            return (jsx_runtime_1.jsx(Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
         }) }));
 };
 exports.SegmentedControl = SegmentedControl;
@@ -61,5 +61,5 @@ const Item = ({ selected, onClick, children }) => {
             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 }));
+    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
 };

package/dist/components/SetTimelineInOutProvider.js

@@ -15,6 +15,6 @@ const SetTimelineInOutProvider = ({ children }) => {
     (0, react_1.useEffect)(() => {
         (0, marks_1.persistMarks)(inAndOutFrames);
     }, [inAndOutFrames]);
-    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 }) }));
+    return (jsx_runtime_1.jsx(in_out_1.TimelineInOutContext.Provider, { value: inAndOutFrames, children: jsx_runtime_1.jsx(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }));
 };
 exports.SetTimelineInOutProvider = SetTimelineInOutProvider;

package/dist/components/ShowGuidesProvider.js

@@ -38,6 +38,6 @@ const ShowGuidesProvider = ({ children }) => {
         selectedGuideId,
         hoveredGuideId,
     ]);
-    return ((0, jsx_runtime_1.jsx)(editor_guides_1.EditorShowGuidesContext.Provider, { value: editorShowGuidesCtx, children: children }));
+    return (jsx_runtime_1.jsx(editor_guides_1.EditorShowGuidesContext.Provider, { value: editorShowGuidesCtx, children: children }));
 };
 exports.ShowGuidesProvider = ShowGuidesProvider;

package/dist/components/ShowRulersProvider.js

@@ -19,6 +19,6 @@ const ShowRulersProvider = ({ children }) => {
             setEditorShowRulers,
         };
     }, [editorShowRulers, setEditorShowRulers]);
-    return ((0, jsx_runtime_1.jsx)(editor_rulers_1.EditorShowRulersContext.Provider, { value: editorShowRulersCtx, children: children }));
+    return (jsx_runtime_1.jsx(editor_rulers_1.EditorShowRulersContext.Provider, { value: editorShowRulersCtx, children: children }));
 };
 exports.ShowRulersProvider = ShowRulersProvider;

package/dist/components/SidebarCollapserControls.js

@@ -128,11 +128,13 @@ const SidebarCollapserControls = () => {
         };
     }, []);
     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) }) }));
+        return (jsx_runtime_1.jsx("div", { style: colorStyle(color), title: toggleLeftTooltip, children: 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) }) }));
+        return (jsx_runtime_1.jsx("div", { style: colorStyle(color), title: toggleRightTooltip, children: 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 })] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })
+        ] }));
 };
 exports.SidebarCollapserControls = SidebarCollapserControls;

package/dist/components/SidebarRenderButton.js

@@ -93,11 +93,11 @@ const SidebarRenderButton = ({ composition, visible }) => {
         setSidebarCollapsedState,
     ]);
     const renderAction = (0, react_1.useCallback)((color) => {
-        return (0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
+        return 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 });
+    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.SidebarRenderButton = SidebarRenderButton;

package/dist/components/SizeSelector.js

@@ -105,7 +105,7 @@ const SizeSelector = () => {
                 type: 'item',
                 value: newSize.size,
                 keyHint: newSize.size === 'auto' ? '0' : null,
-                leftItem: String(size.size) === String(newSize.size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                leftItem: String(size.size) === String(newSize.size) ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
             };
@@ -114,6 +114,6 @@ const SizeSelector = () => {
     if (!zoomable) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
+    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/Spinner.js

@@ -17,7 +17,8 @@ const Spinner = ({ size, duration }) => {
             height: size,
         };
     }, [size]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("style", { type: "text/css", children: `
 				@keyframes ${remotionSpinnerAnimation} {
           0% {
             opacity: 1;
@@ -30,12 +31,13 @@ const Spinner = ({ size, duration }) => {
         .${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: {
+			` }), jsx_runtime_1.jsx("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
+                    return (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/components/Splitter/SplitterContainer.js

@@ -46,6 +46,6 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         persistFlex,
         ref,
     ]);
-    return ((0, jsx_runtime_1.jsx)(SplitterContext_1.SplitterContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }));
+    return (jsx_runtime_1.jsx(SplitterContext_1.SplitterContext.Provider, { value: value, children: jsx_runtime_1.jsx("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }));
 };
 exports.SplitterContainer = SplitterContainer;

package/dist/components/Splitter/SplitterElement.js

@@ -27,6 +27,8 @@ const SplitterElement = ({ children, type, sticky }) => {
             backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], ['red', 'blue']),
         };
     }, [context.flexValue, type]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: style, children: children }), (0, jsx_runtime_1.jsx)("div", { style: stickStyle, children: sticky !== null && sticky !== void 0 ? sticky : null })] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { style: style, children: children }), jsx_runtime_1.jsx("div", { style: stickStyle, children: sticky !== null && sticky !== void 0 ? sticky : null })
+        ] }));
 };
 exports.SplitterElement = SplitterElement;

package/dist/components/Splitter/SplitterHandle.js

@@ -144,7 +144,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             window.removeEventListener('mouseup', onMouseUp);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: [
+    return (jsx_runtime_1.jsx("div", { ref: ref, className: [
             'remotion-splitter',
             context.orientation === 'horizontal'
                 ? 'remotion-splitter-horizontal'

package/dist/components/StaticFilePreview.js

@@ -4,11 +4,11 @@ exports.StaticFilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const get_static_files_1 = require("../api/get-static-files");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const FilePreview_1 = require("./FilePreview");
 const Preview_1 = require("./Preview");
+const use_static_files_1 = require("./use-static-files");
 const msgStyle = {
     fontSize: 13,
     color: 'white',
@@ -23,19 +23,19 @@ const errMsgStyle = {
 const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
     const fileType = (0, Preview_1.getPreviewFileType)(currentAsset);
     const staticFileSrc = (0, remotion_1.staticFile)(currentAsset);
-    const staticFiles = (0, get_static_files_1.getStaticFiles)();
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const exists = staticFiles.find((file) => file.name === currentAsset);
     if (connectionStatus === 'disconnected') {
-        return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "Studio server disconnected" });
+        return jsx_runtime_1.jsx("div", { style: errMsgStyle, children: "Studio server disconnected" });
     }
     if (!exists) {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: errMsgStyle, children: [currentAsset, " does not exist in your public folder."] }));
+        return (jsx_runtime_1.jsxs("div", { style: errMsgStyle, children: [currentAsset, " does not exist in your public folder."] }));
     }
     if (!currentAsset) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: `${staticFileSrc}?date=${assetMetadata && assetMetadata.type === 'found' ? assetMetadata.fetchedAt : 0}`, assetMetadata: assetMetadata }));
+    return (jsx_runtime_1.jsx(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: `${staticFileSrc}?date=${assetMetadata && assetMetadata.type === 'found' ? assetMetadata.fetchedAt : 0}`, assetMetadata: assetMetadata }));
 };
 exports.StaticFilePreview = StaticFilePreview;

package/dist/components/Tabs/index.js

@@ -16,7 +16,7 @@ const Tabs = ({ children, style }) => {
             ...style,
         };
     }, [style]);
-    return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
+    return jsx_runtime_1.jsx("div", { style: definiteStyle, children: children });
 };
 exports.Tabs = Tabs;
 const selectorButton = {
@@ -53,6 +53,6 @@ const Tab = ({ children, onClick, style, selected }) => {
         boxShadow: selected ? 'none' : undefined,
         ...style,
     }), [hovered, selected, style]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: definiteStyle, role: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+    return (jsx_runtime_1.jsx("div", { style: definiteStyle, role: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
 };
 exports.Tab = Tab;

package/dist/components/Tabs/vertical.js

@@ -38,6 +38,6 @@ const VerticalTab = ({ children, onClick, style, selected }) => {
             ...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 }));
+    return (jsx_runtime_1.jsx("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
 };
 exports.VerticalTab = VerticalTab;

package/dist/components/TextViewer.js

@@ -21,6 +21,6 @@ const TextViewer = ({ src }) => {
             setTxt(text);
         });
     }, [src]);
-    return (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [txt, " "] });
+    return jsx_runtime_1.jsxs("div", { style: textStyle, children: [txt, " "] });
 };
 exports.TextViewer = TextViewer;

package/dist/components/TimeValue.js

@@ -82,6 +82,8 @@ 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)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { ref: ref, value: frame, onTextChange: onTextChange, onValueChange: onValueChange, rightAlign: true, status: "ok", style: frameStyle })] }));
+    return (jsx_runtime_1.jsxs("div", { style: text, children: [
+            jsx_runtime_1.jsx("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, value: frame, onTextChange: onTextChange, onValueChange: onValueChange, rightAlign: true, status: "ok", style: frameStyle })
+        ] }));
 };
 exports.TimeValue = TimeValue;

package/dist/components/Timeline/LoopedIndicator.js

@@ -13,7 +13,7 @@ const width = {
 const icon = {
     height: 12,
 };
-const Icon = () => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: icon, children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_COLOR, d: "M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z" }) }));
+const Icon = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: icon, children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_COLOR, d: "M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z" }) }));
 const topLine = {
     top: 0,
     height: 2,
@@ -39,6 +39,8 @@ const bottomContainer = {
     alignItems: 'center',
 };
 const LoopedIndicator = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: width, children: [(0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: topContainer, children: (0, jsx_runtime_1.jsx)("div", { style: topLine }) }), (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: bottomContainer, children: (0, jsx_runtime_1.jsx)("div", { style: bottomLine }) }), (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: centerContainer, children: (0, jsx_runtime_1.jsx)(Icon, {}) })] }));
+    return (jsx_runtime_1.jsxs("div", { style: width, children: [
+            jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: topContainer, children: jsx_runtime_1.jsx("div", { style: topLine }) }), jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: bottomContainer, children: jsx_runtime_1.jsx("div", { style: bottomLine }) }), jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: centerContainer, children: jsx_runtime_1.jsx(Icon, {}) })
+        ] }));
 };
 exports.LoopedIndicator = LoopedIndicator;

package/dist/components/Timeline/LoopedTimelineIndicators.js

@@ -14,10 +14,11 @@ const row = {
 };
 const LoopedTimelineIndicator = ({ loops }) => {
     const leftOver = loops % 1;
-    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: row, children: [new Array(Math.floor(loops)).fill(true).map((_l, i) => {
-                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment
+    return (jsx_runtime_1.jsxs(remotion_1.AbsoluteFill, { style: row, children: [new Array(Math.floor(loops)).fill(true).map((_l, i) => {
+                return (jsx_runtime_1.jsxs(react_1.default.Fragment
                 // eslint-disable-next-line
-                , { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), i === loops - 1 ? null : (0, jsx_runtime_1.jsx)(LoopedIndicator_1.LoopedIndicator, {})] }, i));
-            }), leftOver > 0 ? (0, jsx_runtime_1.jsx)("div", { style: { flex: leftOver } }) : null] }));
+                , { children: [
+                        jsx_runtime_1.jsx(layout_1.Flex, {}), i === loops - 1 ? null : jsx_runtime_1.jsx(LoopedIndicator_1.LoopedIndicator, {})] }, i));
+            }), leftOver > 0 ? jsx_runtime_1.jsx("div", { style: { flex: leftOver } }) : null] }));
 };
 exports.LoopedTimelineIndicator = LoopedTimelineIndicator;

package/dist/components/Timeline/MaxTimelineTracks.js

@@ -20,6 +20,6 @@ const container = {
     paddingLeft: timeline_layout_1.TIMELINE_PADDING + 5,
 };
 const MaxTimelineTracksReached = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
 };
 exports.MaxTimelineTracksReached = MaxTimelineTracksReached;

package/dist/components/Timeline/Timeline.js

@@ -71,6 +71,10 @@ const Timeline = () => {
             overflowX: 'hidden',
         };
     }, [hasBeenCut, shown]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(TimelineWidthProvider_1.TimelineWidthProvider, { 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", sticky: (0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { 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", sticky: null, children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {})] }) })] }) }) }) }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(TimelineWidthProvider_1.TimelineWidthProvider, { children: jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
+                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                    jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                ] }) })
+                    ] }) }) }) }));
 };
 exports.Timeline = Timeline;

package/dist/components/Timeline/TimelineCollapseToggle.js

@@ -10,9 +10,9 @@ const container = {
     alignItems: 'center',
 };
 const Icon = ({ color, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: color }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: jsx_runtime_1.jsx("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: color }) }));
 };
 const TimelineCollapseToggle = ({ collapsed, color }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, { color: color }) }));
+    return (jsx_runtime_1.jsx("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: jsx_runtime_1.jsx(Icon, { color: color }) }));
 };
 exports.TimelineCollapseToggle = TimelineCollapseToggle;

package/dist/components/Timeline/TimelineDragHandler.js

@@ -58,11 +58,12 @@ const TimelineDragHandler = () => {
     if (!canvasContent || canvasContent.type !== 'composition') {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? (0, jsx_runtime_1.jsx)(Inner, {}) : null }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? jsx_runtime_1.jsx(Inner, {}) : null }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;
 const Inner = () => {
-    var _a, _b, _c;
+    var _a;
+    var _b, _c;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
@@ -456,5 +457,6 @@ const Inner = () => {
             },
         ];
     }, [setInAndOutFrames, videoConfig.id]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: inContextMenu, children: (0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: outContextMenu, children: (0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
+    return (jsx_runtime_1.jsxs("div", { style: style, onPointerDown: onPointerDown, children: [
+            jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
 };

package/dist/components/Timeline/TimelineInOutPointer.js

@@ -23,11 +23,11 @@ const TimelineInOutPointer = () => {
     if (!videoConfig || timelineWidth === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [inFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.inMarkerAreaRef, style: {
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [inFrame !== null && (jsx_runtime_1.jsx("div", { ref: exports.inMarkerAreaRef, style: {
                     ...areaHighlight,
                     left: 0,
                     width: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(inFrame, videoConfig.durationInFrames, timelineWidth),
-                } })), outFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.outMarkerAreaRef, style: {
+                } })), outFrame !== null && (jsx_runtime_1.jsx("div", { ref: exports.outMarkerAreaRef, style: {
                     ...areaHighlight,
                     left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(outFrame, videoConfig.durationInFrames, timelineWidth),
                     width: timelineWidth -

package/dist/components/Timeline/TimelineInOutPointerHandle.js

@@ -29,7 +29,7 @@ const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, typ
             transform: `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`,
         };
     }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
+    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
 };
 const TimelineInOutPointerHandle = ({ dragging, type, atFrame, }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
@@ -38,6 +38,6 @@ const TimelineInOutPointerHandle = ({ dragging, type, atFrame, }) => {
     if (timelineWidth === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(InnerTimelineInOutPointerHandle, { atFrame: atFrame, dragging: dragging, timelineWidth: timelineWidth, type: type }));
+    return (jsx_runtime_1.jsx(InnerTimelineInOutPointerHandle, { atFrame: atFrame, dragging: dragging, timelineWidth: timelineWidth, type: type }));
 };
 exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;