@remotion/studio 4.0.139 → 4.0.140

package/.turbo/turbo-build.log

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

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

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
+}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

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/checkerboard-background.d.ts

@@ -1,4 +1,4 @@
 export declare const getCheckerboardBackgroundSize: (size: number) => string;
 export declare const getCheckerboardBackgroundPos: (size: number) => string;
-export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "black" | "white";
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "white" | "black";
 export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    " | undefined;

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)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.25)" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)";

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/studio",
-  "version": "4.0.139",
+  "version": "4.0.140",
   "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/player": "4.0.140",
+    "@remotion/renderer": "4.0.140",
+    "remotion": "4.0.140",
+    "@remotion/media-utils": "4.0.140",
+    "@remotion/studio-shared": "4.0.140"
   },
   "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.140"
   },
   "publishConfig": {
     "access": "public"