@remotion/studio 4.0.336 → 4.0.340

package/dist/esm/internals.mjs

@@ -18816,7 +18816,8 @@ var calculateTimeline = ({
           nonce: 0,
           loopDisplay: undefined,
           stack: null,
-          premountDisplay: null
+          premountDisplay: null,
+          postmountDisplay: null
         },
         depth: 0,
         hash: "-"
@@ -20153,7 +20154,8 @@ var getTimelineSequenceLayout = ({
   startFromMedia,
   video,
   windowWidth,
-  premountDisplay
+  premountDisplay,
+  postmountDisplay
 }) => {
   const maxMediaSequenceDuration = (maxMediaDuration ?? Infinity) - startFromMedia;
   const lastFrame = (video.durationInFrames ?? 1) - 1;
@@ -20183,10 +20185,18 @@ var getTimelineSequenceLayout = ({
     spatialDuration: premountDisplay,
     windowWidth
   }) : null;
+  const postmountWidth = postmountDisplay ? getWidthOfTrack({
+    durationInFrames: postmountDisplay,
+    lastFrame,
+    nonNegativeMarginLeft,
+    spatialDuration: postmountDisplay,
+    windowWidth
+  }) : null;
   return {
     marginLeft: Math.max(marginLeft, 0) - (premountWidth ?? 0),
-    width: width + (premountWidth ?? 0),
-    premountWidth
+    width: width + (premountWidth ?? 0) + (postmountWidth ?? 0),
+    premountWidth,
+    postmountWidth
   };
 };
 
@@ -33164,7 +33174,7 @@ var innerParseMp3PacketHeader = (iterator) => {
     }
   }
   const audioVersionId = iterator.getBits(2);
-  if (audioVersionId !== 3 && audioVersionId !== 2) {
+  if (audioVersionId !== 3 && audioVersionId !== 2 && audioVersionId !== 0) {
     throw new Error("Expected MPEG Version 1 or 2");
   }
   const mpegVersion = audioVersionId === 3 ? 1 : 2;
@@ -37978,10 +37988,10 @@ var relativeFrameStyle = {
   color: "white",
   opacity: 0.5
 };
-var TimelineSequenceFrame = ({ roundedFrame, premounted }) => {
+var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
   return /* @__PURE__ */ jsx196("div", {
     style: relativeFrameStyle,
-    children: premounted ? "0 (Premounted)" : roundedFrame
+    children: premounted ? "0 (Premounted)" : postmounted !== null ? `${postmounted} (Postmounted)` : roundedFrame
   });
 };
 
@@ -38338,10 +38348,12 @@ var Inner4 = ({ s, windowWidth }) => {
   const frame2 = useCurrentFrame2();
   const relativeFrame = frame2 - s.from;
   const relativeFrameWithPremount = relativeFrame + (s.premountDisplay ?? 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: width2, premountWidth } = useMemo106(() => {
+  const isPostmounting = relativeFrameWithPostmount >= 0 && relativeFrameWithPostmount < (s.postmountDisplay ?? 0) && !isInRange;
+  const { marginLeft, width: width2, premountWidth, postmountWidth } = useMemo106(() => {
     return getTimelineSequenceLayout({
       durationInFrames: s.loopDisplay ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes : s.duration,
       startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
@@ -38349,7 +38361,8 @@ var Inner4 = ({ s, windowWidth }) => {
       maxMediaDuration,
       video,
       windowWidth,
-      premountDisplay: s.premountDisplay
+      premountDisplay: s.premountDisplay,
+      postmountDisplay: s.postmountDisplay
     });
   }, [maxMediaDuration, s, video, windowWidth]);
   const style11 = useMemo106(() => {
@@ -38387,6 +38400,21 @@ var Inner4 = ({ s, windowWidth }) => {
           position: "absolute"
         }
       }) : null,
+      postmountWidth ? /* @__PURE__ */ jsx198("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" ? /* @__PURE__ */ jsx198(AudioWaveform, {
         src: s.src,
         doesVolumeChange: s.doesVolumeChange,
@@ -38405,7 +38433,7 @@ var Inner4 = ({ s, windowWidth }) => {
       s.loopDisplay === undefined ? null : /* @__PURE__ */ jsx198(LoopedTimelineIndicator, {
         loops: s.loopDisplay.numberOfTimes
       }),
-      s.type !== "audio" && s.type !== "video" && s.loopDisplay === undefined && (isInRange || isPremounting) ? /* @__PURE__ */ jsx198("div", {
+      s.type !== "audio" && s.type !== "video" && s.loopDisplay === undefined && (isInRange || isPremounting || isPostmounting) ? /* @__PURE__ */ jsx198("div", {
         style: {
           paddingLeft: 5 + (premountWidth ?? 0),
           height: "100%",
@@ -38414,6 +38442,7 @@ var Inner4 = ({ s, windowWidth }) => {
         },
         children: /* @__PURE__ */ jsx198(TimelineSequenceFrame, {
           premounted: isPremounting,
+          postmounted: isPostmounting ? s.duration - 1 : null,
           roundedFrame
         })
       }) : null

package/dist/esm/previewEntry.mjs

@@ -19096,7 +19096,8 @@ var calculateTimeline = ({
           nonce: 0,
           loopDisplay: undefined,
           stack: null,
-          premountDisplay: null
+          premountDisplay: null,
+          postmountDisplay: null
         },
         depth: 0,
         hash: "-"
@@ -20433,7 +20434,8 @@ var getTimelineSequenceLayout = ({
   startFromMedia,
   video,
   windowWidth,
-  premountDisplay
+  premountDisplay,
+  postmountDisplay
 }) => {
   const maxMediaSequenceDuration = (maxMediaDuration ?? Infinity) - startFromMedia;
   const lastFrame = (video.durationInFrames ?? 1) - 1;
@@ -20463,10 +20465,18 @@ var getTimelineSequenceLayout = ({
     spatialDuration: premountDisplay,
     windowWidth
   }) : null;
+  const postmountWidth = postmountDisplay ? getWidthOfTrack({
+    durationInFrames: postmountDisplay,
+    lastFrame,
+    nonNegativeMarginLeft,
+    spatialDuration: postmountDisplay,
+    windowWidth
+  }) : null;
   return {
     marginLeft: Math.max(marginLeft, 0) - (premountWidth ?? 0),
-    width: width + (premountWidth ?? 0),
-    premountWidth
+    width: width + (premountWidth ?? 0) + (postmountWidth ?? 0),
+    premountWidth,
+    postmountWidth
   };
 };
 
@@ -33444,7 +33454,7 @@ var innerParseMp3PacketHeader = (iterator) => {
     }
   }
   const audioVersionId = iterator.getBits(2);
-  if (audioVersionId !== 3 && audioVersionId !== 2) {
+  if (audioVersionId !== 3 && audioVersionId !== 2 && audioVersionId !== 0) {
     throw new Error("Expected MPEG Version 1 or 2");
   }
   const mpegVersion = audioVersionId === 3 ? 1 : 2;
@@ -38258,10 +38268,10 @@ var relativeFrameStyle = {
   color: "white",
   opacity: 0.5
 };
-var TimelineSequenceFrame = ({ roundedFrame, premounted }) => {
+var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
   return /* @__PURE__ */ jsx197("div", {
     style: relativeFrameStyle,
-    children: premounted ? "0 (Premounted)" : roundedFrame
+    children: premounted ? "0 (Premounted)" : postmounted !== null ? `${postmounted} (Postmounted)` : roundedFrame
   });
 };
 
@@ -38618,10 +38628,12 @@ var Inner4 = ({ s, windowWidth }) => {
   const frame2 = useCurrentFrame2();
   const relativeFrame = frame2 - s.from;
   const relativeFrameWithPremount = relativeFrame + (s.premountDisplay ?? 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: width2, premountWidth } = useMemo106(() => {
+  const isPostmounting = relativeFrameWithPostmount >= 0 && relativeFrameWithPostmount < (s.postmountDisplay ?? 0) && !isInRange;
+  const { marginLeft, width: width2, premountWidth, postmountWidth } = useMemo106(() => {
     return getTimelineSequenceLayout({
       durationInFrames: s.loopDisplay ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes : s.duration,
       startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
@@ -38629,7 +38641,8 @@ var Inner4 = ({ s, windowWidth }) => {
       maxMediaDuration,
       video,
       windowWidth,
-      premountDisplay: s.premountDisplay
+      premountDisplay: s.premountDisplay,
+      postmountDisplay: s.postmountDisplay
     });
   }, [maxMediaDuration, s, video, windowWidth]);
   const style11 = useMemo106(() => {
@@ -38667,6 +38680,21 @@ var Inner4 = ({ s, windowWidth }) => {
           position: "absolute"
         }
       }) : null,
+      postmountWidth ? /* @__PURE__ */ jsx199("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" ? /* @__PURE__ */ jsx199(AudioWaveform, {
         src: s.src,
         doesVolumeChange: s.doesVolumeChange,
@@ -38685,7 +38713,7 @@ var Inner4 = ({ s, windowWidth }) => {
       s.loopDisplay === undefined ? null : /* @__PURE__ */ jsx199(LoopedTimelineIndicator, {
         loops: s.loopDisplay.numberOfTimes
       }),
-      s.type !== "audio" && s.type !== "video" && s.loopDisplay === undefined && (isInRange || isPremounting) ? /* @__PURE__ */ jsx199("div", {
+      s.type !== "audio" && s.type !== "video" && s.loopDisplay === undefined && (isInRange || isPremounting || isPostmounting) ? /* @__PURE__ */ jsx199("div", {
         style: {
           paddingLeft: 5 + (premountWidth ?? 0),
           height: "100%",
@@ -38694,6 +38722,7 @@ var Inner4 = ({ s, windowWidth }) => {
         },
         children: /* @__PURE__ */ jsx199(TimelineSequenceFrame, {
           premounted: isPremounting,
+          postmounted: isPostmounting ? s.duration - 1 : null,
           roundedFrame
         })
       }) : null

package/dist/esm/renderEntry.mjs

@@ -183,7 +183,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-f6a78x4r.js").then(({ StudioInternals }) => {
+    import("./chunk-v6g6sx6z.js").then(({ StudioInternals }) => {
       renderToDOM(/* @__PURE__ */ jsx(StudioInternals.Studio, {
         readOnly: true,
         rootComponent: Root

package/dist/helpers/calculate-timeline.js

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

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

@@ -1,6 +1,6 @@
 import type { VideoConfig } from 'remotion';
 export declare const SEQUENCE_BORDER_WIDTH = 1;
-export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, }: {
+export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }: {
     durationInFrames: number;
     startFrom: number;
     startFromMedia: number;
@@ -8,8 +8,10 @@ export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom,
     video: VideoConfig;
     windowWidth: number;
     premountDisplay: number | null;
+    postmountDisplay: number | null;
 }) => {
     marginLeft: number;
     width: number;
     premountWidth: number | null;
+    postmountWidth: 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, premountDisplay, }) => {
+const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
@@ -47,10 +47,20 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
             windowWidth,
         })
         : null;
+    const postmountWidth = postmountDisplay
+        ? getWidthOfTrack({
+            durationInFrames: postmountDisplay,
+            lastFrame,
+            nonNegativeMarginLeft,
+            spatialDuration: postmountDisplay,
+            windowWidth,
+        })
+        : null;
     return {
         marginLeft: Math.max(marginLeft, 0) - (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
-        width: width + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
+        width: width + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0) + (postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0),
         premountWidth,
+        postmountWidth,
     };
 };
 exports.getTimelineSequenceLayout = getTimelineSequenceLayout;

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.336",
+  "version": "4.0.340",
   "description": "APIs for interacting with the Remotion Studio",
   "main": "dist",
   "sideEffects": false,
@@ -23,21 +23,21 @@
     "source-map": "0.7.3",
     "open": "^8.4.2",
     "zod": "3.22.3",
-    "remotion": "4.0.336",
-    "@remotion/media-utils": "4.0.336",
-    "@remotion/media-parser": "4.0.336",
-    "@remotion/renderer": "4.0.336",
-    "@remotion/player": "4.0.336",
-    "@remotion/webcodecs": "4.0.336",
-    "@remotion/studio-shared": "4.0.336",
-    "@remotion/zod-types": "4.0.336"
+    "@remotion/media-utils": "4.0.340",
+    "@remotion/studio-shared": "4.0.340",
+    "@remotion/webcodecs": "4.0.340",
+    "@remotion/zod-types": "4.0.340",
+    "@remotion/player": "4.0.340",
+    "remotion": "4.0.340",
+    "@remotion/media-parser": "4.0.340",
+    "@remotion/renderer": "4.0.340"
   },
   "devDependencies": {
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "@types/semver": "^7.3.4",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.336"
+    "@remotion/eslint-config-internal": "4.0.340"
   },
   "publishConfig": {
     "access": "public"