@remotion/studio 4.0.336 → 4.0.340

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/studio@4.0.336 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.340 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
-[77.02ms] Generated.
+[81.53ms] Generated.

package/dist/components/Timeline/TimelineSequence.js

@@ -27,7 +27,7 @@ const Inner = ({ s, windowWidth }) => {
     // 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
-    var _a, _b;
+    var _a, _b, _c;
     const video = remotion_1.Internals.useVideo();
     const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_a = video === null || video === void 0 ? void 0 : video.fps) !== null && _a !== void 0 ? _a : 30);
     if (!video) {
@@ -36,12 +36,16 @@ const Inner = ({ s, windowWidth }) => {
     const frame = (0, remotion_1.useCurrentFrame)();
     const relativeFrame = frame - s.from;
     const relativeFrameWithPremount = relativeFrame + ((_b = s.premountDisplay) !== null && _b !== void 0 ? _b : 0);
+    const relativeFrameWithPostmount = relativeFrame - s.duration;
     const roundedFrame = Math.round(relativeFrame * 100) / 100;
     const isInRange = relativeFrame >= 0 && relativeFrame < s.duration;
     const isPremounting = relativeFrameWithPremount >= 0 &&
         relativeFrameWithPremount < s.duration &&
         !isInRange;
-    const { marginLeft, width, premountWidth } = (0, react_1.useMemo)(() => {
+    const isPostmounting = relativeFrameWithPostmount >= 0 &&
+        relativeFrameWithPostmount < ((_c = s.postmountDisplay) !== null && _c !== void 0 ? _c : 0) &&
+        !isInRange;
+    const { marginLeft, width, premountWidth, postmountWidth } = (0, react_1.useMemo)(() => {
         return (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
             durationInFrames: s.loopDisplay
                 ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
@@ -52,6 +56,7 @@ const Inner = ({ s, windowWidth }) => {
             video,
             windowWidth,
             premountDisplay: s.premountDisplay,
+            postmountDisplay: s.postmountDisplay,
         });
     }, [maxMediaDuration, s, video, windowWidth]);
     const style = (0, react_1.useMemo)(() => {
@@ -86,13 +91,25 @@ const Inner = ({ s, windowWidth }) => {
 							rgba(255, 255, 255, ${isPremounting ? 0.5 : 0.2}) 4px
 						)`,
                     position: 'absolute',
+                } })) : null, postmountWidth ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                    width: postmountWidth,
+                    height: '100%',
+                    background: `repeating-linear-gradient(
+							-45deg,
+							transparent,
+							transparent 2px,
+							rgba(255, 255, 255, ${isPostmounting ? 0.5 : 0.2}) 2px,
+							rgba(255, 255, 255, ${isPostmounting ? 0.5 : 0.2}) 4px
+						)`,
+                    position: 'absolute',
+                    right: 0,
                 } })) : 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, playbackRate: s.playbackRate })) : null, s.type === 'video' ? ((0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration })) : 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 || isPremounting) ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                (isInRange || isPremounting || isPostmounting) ? ((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, { premounted: isPremounting, roundedFrame: roundedFrame }) })) : null] }, s.id));
+                }, children: (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }, s.id));
 };

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

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

package/dist/components/Timeline/TimelineSequenceFrame.js

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