@remotion/studio 4.0.139 → 4.0.141

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.138 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.140 build /Users/jonathanburger/remotion/packages/studio
 > tsc -d
 

package/dist/components/CompositionSelectorItem.js

@@ -99,6 +99,9 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                         setSelectedModal({
                             type: 'duplicate-comp',
                             compositionId: item.composition.id,
+                            compositionType: item.composition.durationInFrames === 1
+                                ? 'still'
+                                : 'composition',
                         });
                     },
                     quickSwitcherLabel: null,

package/dist/components/Modals.js

@@ -19,7 +19,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

package/dist/components/NewComposition/DuplicateComposition.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+export type CompType = 'composition' | 'still';
 export declare const DuplicateComposition: React.FC<{
     readonly compositionId: string;
+    readonly compositionType: CompType;
 }>;

package/dist/components/NewComposition/DuplicateComposition.js

@@ -26,13 +26,13 @@ const content = {
 const comboBoxStyle = {
     width: 190,
 };
-const DuplicateCompositionLoaded = () => {
+const DuplicateCompositionLoaded = ({ initialType }) => {
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Resolved composition context');
     }
     const { resolved, unresolved } = context;
-    const initialCompType = resolved.result.durationInFrames === 1 ? 'still' : 'composition';
+    const [initialCompType] = (0, react_1.useState)(initialType);
     const hadDimensionsDefined = unresolved.width && unresolved.height;
     const hadFpsDefined = unresolved.fps !== undefined;
     const hadDurationDefined = unresolved.durationInFrames !== undefined;
@@ -174,7 +174,7 @@ const DuplicateCompositionLoaded = () => {
                             // not the other way around
                             (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ID" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] }) })] }), hadDimensionsDefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] })] })) : null, type === 'composition' && hadDurationDefined ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "FPS" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: { ...content, borderTop: '1px solid black' }, children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', succeessNotifcation: `Duplicated ${unresolved.id}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, valid: valid }) })] })] }));
 };
-const DuplicateComposition = ({ compositionId }) => {
-    return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: compositionId, children: (0, jsx_runtime_1.jsx)(DuplicateCompositionLoaded, {}) }) }));
+const DuplicateComposition = ({ compositionId, compositionType }) => {
+    return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: compositionId, children: (0, jsx_runtime_1.jsx)(DuplicateCompositionLoaded, { initialType: compositionType }) }) }));
 };
 exports.DuplicateComposition = DuplicateComposition;

package/dist/components/Splitter/SplitterContainer.js

@@ -10,6 +10,7 @@ const containerRow = {
     flexDirection: 'row',
     flex: 1,
     height: '100%',
+    width: '100%',
 };
 exports.containerColumn = {
     display: 'flex',

package/dist/components/Timeline/TimelineSequence.js

@@ -23,6 +23,7 @@ const TimelineSequence = ({ s }) => {
 };
 exports.TimelineSequence = TimelineSequence;
 const Inner = ({ s, windowWidth }) => {
+    var _a;
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
@@ -33,9 +34,13 @@ const Inner = ({ s, windowWidth }) => {
     }
     const frame = (0, remotion_1.useCurrentFrame)();
     const relativeFrame = frame - s.from;
+    const relativeFrameWithPremount = relativeFrame + ((_a = s.premountDisplay) !== null && _a !== void 0 ? _a : 0);
     const roundedFrame = Math.round(relativeFrame * 100) / 100;
     const isInRange = relativeFrame >= 0 && relativeFrame < s.duration;
-    const { marginLeft, width } = (0, react_1.useMemo)(() => {
+    const isPremounting = relativeFrameWithPremount >= 0 &&
+        relativeFrameWithPremount < s.duration &&
+        !isInRange;
+    const { marginLeft, width, premountWidth } = (0, react_1.useMemo)(() => {
         return (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
             durationInFrames: s.loopDisplay
                 ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
@@ -45,6 +50,7 @@ const Inner = ({ s, windowWidth }) => {
             maxMediaDuration,
             video,
             windowWidth,
+            premountDisplay: s.premountDisplay,
         });
     }, [maxMediaDuration, s, video, windowWidth]);
     const style = (0, react_1.useMemo)(() => {
@@ -65,13 +71,24 @@ const Inner = ({ s, windowWidth }) => {
             opacity: isInRange ? 1 : 0.5,
         };
     }, [isInRange, marginLeft, s.type, width]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.loopDisplay === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [premountWidth ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                    width: premountWidth,
+                    height: '100%',
+                    background: `repeating-linear-gradient(
+							-45deg,
+							transparent,
+							transparent 2px,
+							rgba(255, 255, 255, ${isPremounting ? 0.5 : 0.2}) 2px,
+							rgba(255, 255, 255, ${isPremounting ? 0.5 : 0.2}) 4px
+						)`,
+                    position: 'absolute',
+                } })) : null, s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.loopDisplay === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
                 s.type !== 'video' &&
                 s.loopDisplay === undefined &&
-                isInRange ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                    paddingLeft: 5,
+                (isInRange || isPremounting) ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                    paddingLeft: 5 + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
                     height: '100%',
                     display: 'flex',
                     alignItems: 'center',
-                }, children: (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { roundedFrame: roundedFrame }) })) : null] }, s.id));
+                }, children: (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, roundedFrame: roundedFrame }) })) : null] }, s.id));
 };

package/dist/components/Timeline/TimelineSequenceFrame.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const TimelineSequenceFrame: React.FC<{
     roundedFrame: number;
+    premounted: boolean;
 }>;

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -8,7 +8,7 @@ const relativeFrameStyle = {
     color: 'white',
     opacity: 0.5,
 };
-const TimelineSequenceFrame = ({ roundedFrame }) => {
-    return (0, jsx_runtime_1.jsx)("div", { style: relativeFrameStyle, children: roundedFrame });
+const TimelineSequenceFrame = ({ roundedFrame, premounted }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: relativeFrameStyle, children: premounted ? '0 (Premounted)' : roundedFrame }));
 };
 exports.TimelineSequenceFrame = TimelineSequenceFrame;

package/dist/helpers/calculate-timeline.js

@@ -22,6 +22,7 @@ const calculateTimeline = ({ sequences, sequenceDuration, }) => {
                     nonce: 0,
                     loopDisplay: undefined,
                     stack: null,
+                    premountDisplay: null,
                 },
                 depth: 0,
                 hash: '-',

package/dist/helpers/colors.d.ts

@@ -23,4 +23,4 @@ export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
+}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";

package/dist/helpers/get-timeline-sequence-layout.d.ts

@@ -1,13 +1,15 @@
 import type { VideoConfig } from 'remotion';
 export declare const SEQUENCE_BORDER_WIDTH = 1;
-export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }: {
+export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, }: {
     durationInFrames: number;
     startFrom: number;
     startFromMedia: number;
     maxMediaDuration: number | null;
     video: VideoConfig;
     windowWidth: number;
+    premountDisplay: number | null;
 }) => {
     marginLeft: number;
     width: number;
+    premountWidth: number | null;
 };

package/dist/helpers/get-timeline-sequence-layout.js

@@ -10,7 +10,7 @@ const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDura
         : (spatialDuration / lastFrame) * fullWidth;
     return base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft;
 };
-const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }) => {
+const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
@@ -31,15 +31,26 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
         : (startFromWithOffset / lastFrame) *
             (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
     const nonNegativeMarginLeft = Math.min(marginLeft, 0);
-    return {
-        marginLeft: Math.round(Math.max(marginLeft, 0)),
-        width: Math.floor(getWidthOfTrack({
-            durationInFrames,
+    const width = Math.floor(getWidthOfTrack({
+        durationInFrames,
+        lastFrame,
+        nonNegativeMarginLeft,
+        spatialDuration,
+        windowWidth,
+    }));
+    const premountWidth = premountDisplay
+        ? Math.floor(getWidthOfTrack({
+            durationInFrames: premountDisplay,
             lastFrame,
             nonNegativeMarginLeft,
-            spatialDuration,
+            spatialDuration: premountDisplay,
             windowWidth,
-        })),
+        }))
+        : null;
+    return {
+        marginLeft: Math.round(Math.max(marginLeft, 0)) - (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
+        width: width + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
+        premountWidth,
     };
 };
 exports.getTimelineSequenceLayout = getTimelineSequenceLayout;

package/dist/state/modals.d.ts

@@ -1,5 +1,6 @@
 import type { AudioCodec, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type React from 'react';
+import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 import type { Bug, UpdateInfo } from '../components/UpdateCheck';
@@ -49,6 +50,7 @@ export type RenderModalState = {
 export type ModalState = {
     type: 'duplicate-comp';
     compositionId: string;
+    compositionType: CompType;
 } | {
     type: 'delete-comp';
     compositionId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/studio",
-  "version": "4.0.139",
+  "version": "4.0.141",
   "description": "Remotion Editor",
   "main": "dist",
   "sideEffects": false,
@@ -18,11 +18,11 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "remotion": "4.0.139",
-    "@remotion/media-utils": "4.0.139",
-    "@remotion/renderer": "4.0.139",
-    "@remotion/player": "4.0.139",
-    "@remotion/studio-shared": "4.0.139"
+    "remotion": "4.0.141",
+    "@remotion/player": "4.0.141",
+    "@remotion/studio-shared": "4.0.141",
+    "@remotion/media-utils": "4.0.141",
+    "@remotion/renderer": "4.0.141"
   },
   "devDependencies": {
     "react": "18.2.0",
@@ -40,7 +40,7 @@
     "prettier-plugin-organize-imports": "3.2.4",
     "vitest": "0.31.1",
     "zod": "^3.22.3",
-    "@remotion/zod-types": "4.0.139"
+    "@remotion/zod-types": "4.0.141"
   },
   "publishConfig": {
     "access": "public"