@remotion/promo-pages 4.0.540 → 4.0.541

package/dist/design.js

@@ -3578,8 +3578,9 @@ var cutPath = (d, length) => {
       if (summedUpLength + instructionAndInfo.length > length) {
         const remainingLength = length - summedUpLength;
         const progress = remainingLength / instructionAndInfo.length;
+        const { instruction } = instructionAndInfo;
         const cut = cutInstruction({
-          instruction: instructionAndInfo.instruction,
+          instruction: instruction.type === "Z" ? { type: "L", x: segment.startPoint.x, y: segment.startPoint.y } : instruction,
           lastPoint: instructionAndInfo.startPoint,
           progress
         });
@@ -4312,7 +4313,7 @@ var setComponentIdentityResolver = (resolver) => {
 var resolveComponentIdentity = (component) => {
   return componentIdentityResolver?.(component) ?? component;
 };
-var getSingleChildComponent = (children) => {
+var getSingleChildElement = (children) => {
   const mountedChildren = React4.Children.toArray(children);
   if (mountedChildren.length !== 1) {
     return null;
@@ -4322,12 +4323,19 @@ var getSingleChildComponent = (children) => {
     return null;
   }
   if (child.type === IsNotInsideSeriesProvider) {
-    return getSingleChildComponent(child.props.children);
+    return getSingleChildElement(child.props.children);
   }
   if (typeof child.type !== "function" && typeof child.type !== "object") {
     return null;
   }
-  return resolveComponentIdentity(child.type);
+  return child;
+};
+var getSingleChildComponent = (children) => {
+  const child = getSingleChildElement(children);
+  return child === null ? null : resolveComponentIdentity(child.type);
+};
+var getSingleChildProps = (children) => {
+  return getSingleChildElement(children)?.props ?? null;
 };
 var CompositionRegistryFallbackContext = createContext5(null);
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
@@ -5735,9 +5743,11 @@ var makeOriginalSourceStack = ({
   fileName,
   lineNumber,
   columnNumber
-}) => {
-  return `Error
+}, compiledSourceHash = null) => {
+  const location = `Error
     at remotionOriginalSource (${ORIGINAL_SOURCE_STACK_PREFIX}${encodeURIComponent(fileName)}:${lineNumber}:${columnNumber})`;
+  return compiledSourceHash === null ? location : `${location}
+    at remotionCompiledSource (remotion-source-sha256:${compiledSourceHash})`;
 };
 var parseOriginalSourceStack = (stack) => {
   if (!stack) {
@@ -5767,7 +5777,7 @@ var setStackForControls = (controls, stack) => {
 var getStackForControls = (controls) => {
   return stacksByControls.get(controls) ?? null;
 };
-var VERSION = "4.0.540";
+var VERSION = "4.0.541";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -9523,7 +9533,7 @@ function hslToRgb(h, s, l) {
   return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
 }
 function parse255(str) {
-  const int = Number.parseInt(str, 10);
+  const int = Math.round(Number.parseFloat(str));
   if (int < 0) {
     return 0;
   }
@@ -11275,6 +11285,7 @@ var setSequenceWrapperRef = (ref, wrapperRef, node) => {
     ref.current = node;
   }
 };
+var getSingleChildPropsFromRef = (childrenRef) => getSingleChildProps(childrenRef.current);
 var RegularSequenceContentRefForwardingFunction = ({
   timing,
   from = 0,
@@ -11295,6 +11306,7 @@ var RegularSequenceContentRefForwardingFunction = ({
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalSingleChildComponent: childComponentOverride,
+  _remotionInternalSingleChildren: authoredChildrenOverride,
   _remotionInternalDocumentationLink: documentationLink,
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
@@ -11345,6 +11357,7 @@ var RegularSequenceContentRefForwardingFunction = ({
     loopPeriod,
     loopIteration,
     contentVisible,
+    inheritedFrozenFrame,
     currentFrameRef
   } = timing;
   if (typeof contentDurationInFrames !== "number") {
@@ -11469,7 +11482,13 @@ var RegularSequenceContentRefForwardingFunction = ({
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
   const isInsideSeries = useContext28(IsInsideSeriesContext);
-  const singleChildComponent = useMemo22(() => childComponentOverride === undefined ? getSingleChildComponent(children) : childComponentOverride, [children, childComponentOverride]);
+  const authoredChildren = authoredChildrenOverride === undefined ? children : authoredChildrenOverride;
+  const singleChildComponent = useMemo22(() => childComponentOverride === undefined ? getSingleChildComponent(authoredChildren) : childComponentOverride, [authoredChildren, childComponentOverride]);
+  const childrenRef = useRef8(authoredChildren);
+  useLayoutEffect9(() => {
+    childrenRef.current = authoredChildren;
+  }, [authoredChildren]);
+  const getRegisteredSingleChildProps = useMemo22(() => childComponentOverride === undefined ? getSingleChildPropsFromRef.bind(null, childrenRef) : null, [childComponentOverride]);
   const registrationStack = controls ? getStackForControls(controls) ?? stack ?? null : stack ?? null;
   const getStack = useMemo22(() => getSequenceStack.bind(null, registrationStack), [registrationStack]);
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
@@ -11478,7 +11497,8 @@ var RegularSequenceContentRefForwardingFunction = ({
   const parentCumulatedNegativeFrom = parentSequence?.cumulatedNegativeFrom ?? 0;
   const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
   const mediaFrameAtSequenceZero = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom : null;
-  const frozenMediaFrame = isMedia && isMedia.type !== "image" && mediaFrameAtSequenceZero !== null ? registeredFrozenFrame === null ? null : mediaFrameAtSequenceZero + (resolvedLoopDisplay ? registeredFrozenFrame % resolvedLoopDisplay.durationInFrames : registeredFrozenFrame) * isMedia.data.playbackRate : null;
+  const mediaFreezeFrame = registeredFrozenFrame ?? (contentVisible && !parentDormant && !premounting && !postmounting ? inheritedFrozenFrame : null);
+  const frozenMediaFrame = isMedia && isMedia.type !== "image" && mediaFrameAtSequenceZero !== null && mediaFreezeFrame !== null ? mediaFrameAtSequenceZero + (resolvedLoopDisplay ? mediaFreezeFrame % resolvedLoopDisplay.durationInFrames : mediaFreezeFrame) * isMedia.data.playbackRate : null;
   const controlsSchema = controls?.schema;
   const controlsRuntimeValues = controls?.runtimeValues;
   const controlsOverrideId = controls?.overrideId;
@@ -11486,8 +11506,7 @@ var RegularSequenceContentRefForwardingFunction = ({
   const controlsComponentIdentity = controls?.componentIdentity;
   const controlsComponentName = controls?.componentName;
   const controlsVideoConfigValues = controls?.videoConfigValues;
-  const isInsideNonPremountFreeze = useIsInsideNonPremountFreeze();
-  const canInferDuration = (controlsComponentIdentity === "dev.remotion.remotion.Series" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries") && !loop && registeredFrozenFrame === null && !isInsideNonPremountFreeze && !hidden;
+  const canInferDuration = (controlsComponentIdentity === "dev.remotion.remotion.Series" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries") && !loop && registeredFrozenFrame === null && inheritedFrozenFrame === null && !hidden;
   const autoDuration = canInferDuration && durationInFrames === undefined;
   const isSeriesChild = controlsComponentIdentity === "dev.remotion.remotion.Series.Sequence" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Sequence" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Transition" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Overlay";
   const effectRuntimeValues = useMemo22(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
@@ -11549,7 +11568,8 @@ var RegularSequenceContentRefForwardingFunction = ({
           refForOutline: refForOutline ?? null,
           isInsideSeries,
           frozenFrame: registeredFrozenFrame,
-          singleChildComponent: singleChildComponent ?? null
+          singleChildComponent: singleChildComponent ?? null,
+          getSingleChildProps: getRegisteredSingleChildProps
         };
       }
       return {
@@ -11582,7 +11602,8 @@ var RegularSequenceContentRefForwardingFunction = ({
         isInsideSeries,
         frozenFrame: registeredFrozenFrame,
         frozenMediaFrame,
-        singleChildComponent: singleChildComponent ?? null
+        singleChildComponent: singleChildComponent ?? null,
+        getSingleChildProps: getRegisteredSingleChildProps
       };
     }
     return {
@@ -11612,7 +11633,8 @@ var RegularSequenceContentRefForwardingFunction = ({
       refForOutline: refForOutline ?? null,
       isInsideSeries,
       frozenFrame: registeredFrozenFrame,
-      singleChildComponent: singleChildComponent ?? null
+      singleChildComponent: singleChildComponent ?? null,
+      getSingleChildProps: getRegisteredSingleChildProps
     };
   }, [
     id,
@@ -11646,7 +11668,8 @@ var RegularSequenceContentRefForwardingFunction = ({
     startMediaFrom,
     mediaFrameAtSequenceZero,
     frozenMediaFrame,
-    singleChildComponent
+    singleChildComponent,
+    getRegisteredSingleChildProps
   ]);
   const getSequenceForRegistration = useMemo22(() => getSequenceRegistration.bind(null, sequenceForRegistration), [sequenceForRegistration]);
   const registration = useSequenceRegistration({
@@ -11810,6 +11833,7 @@ var RegularSequenceRefForwardingFunction = (props, ref) => {
   const loopOffset = loopPeriod === null ? 0 : loopIteration * loopPeriod;
   const currentSequenceStart = cumulatedFrom + (from + loopOffset - trimBefore / playbackRate) / parentPlaybackRate;
   const currentFrame = typeof freeze === "number" ? freeze : (absoluteFrame - currentSequenceStart) * (parentPlaybackRate * playbackRate);
+  const inheritedFrozenFrame = useIsInsideNonPremountFreeze() ? currentFrame : null;
   const currentFrameRef = useRef8(currentFrame);
   const timing = useMemo22(() => ({
     contentDurationInFrames,
@@ -11818,6 +11842,7 @@ var RegularSequenceRefForwardingFunction = (props, ref) => {
     loopPeriod,
     loopIteration,
     contentVisible,
+    inheritedFrozenFrame,
     currentFrameRef
   }), [
     contentDurationInFrames,
@@ -11825,7 +11850,8 @@ var RegularSequenceRefForwardingFunction = (props, ref) => {
     actualDurationInFrames,
     loopPeriod,
     loopIteration,
-    contentVisible
+    contentVisible,
+    inheritedFrozenFrame
   ]);
   return /* @__PURE__ */ jsxs2(React27.Fragment, {
     children: [
@@ -12105,6 +12131,16 @@ var AbsoluteFill = withInteractivitySchema({
   supportsEffects: false
 });
 addSequenceStackTraces(AbsoluteFill);
+var getCanvasPropsFromSequenceProps = (props) => {
+  const canvasProps = {};
+  const mutableCanvasProps = canvasProps;
+  for (const key in props) {
+    if (Object.prototype.hasOwnProperty.call(props, key) && (key.startsWith("data-") || key.startsWith("aria-"))) {
+      mutableCanvasProps[key] = props[key];
+    }
+  }
+  return canvasProps;
+};
 var useCropStyle = ({
   cropLeft,
   cropRight,
@@ -13392,16 +13428,6 @@ var animatedImageSchema = {
   ...borderSchema2,
   ...borderRadiusSchema2
 };
-var getCanvasPropsFromSequenceProps = (props) => {
-  const canvasProps = {};
-  const mutableCanvasProps = canvasProps;
-  for (const key in props) {
-    if (Object.prototype.hasOwnProperty.call(props, key) && (key.startsWith("data-") || key.startsWith("aria-"))) {
-      mutableCanvasProps[key] = props[key];
-    }
-  }
-  return canvasProps;
-};
 var AnimatedImageContent = forwardRef4(({
   src,
   width,
@@ -13887,6 +13913,16 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   });
 };
 var ArtifactThumbnail = Symbol("Thumbnail");
+var encodeBinaryArtifact = (bytes) => {
+  if ("toBase64" in bytes && typeof bytes.toBase64 === "function") {
+    return bytes.toBase64();
+  }
+  let binary = "";
+  for (let offset = 0;offset < bytes.length; offset += 32768) {
+    binary += String.fromCharCode(...bytes.subarray(offset, offset + 32768));
+  }
+  return btoa(binary);
+};
 var Artifact = ({ filename, content, downloadBehavior }) => {
   const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   const env = useRemotionEnvironment();
@@ -13902,7 +13938,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
       registerRenderAsset({
         type: "artifact",
         id,
-        content: btoa(new TextDecoder("utf8").decode(content)),
+        content: encodeBinaryArtifact(content),
         filename,
         frame,
         contentType: "binary",
@@ -15683,9 +15719,7 @@ var getMediaSyncAction = (input) => {
     ended,
     desiredUnclampedTime,
     mediaTagTime,
-    mediaTagLastUpdate,
     rvcTime,
-    rvcLastUpdate,
     isVariableFpsVideo,
     acceptableTimeShift,
     lastSeekDueToShift,
@@ -15697,13 +15731,11 @@ var getMediaSyncAction = (input) => {
     onlyWarnForMediaSeekingError,
     isPremounting,
     isPostmounting,
-    pauseWhenBuffering
+    pauseWhenBuffering,
+    mediaType
   } = input;
   const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration) ? Math.min(duration, desiredUnclampedTime) : desiredUnclampedTime;
-  const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
-  const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
-  const mostRecentTimeshift = rvcLastUpdate && rvcTime > mediaTagLastUpdate ? timeShiftRvcTag : timeShiftMediaTag;
-  const timeShift = timeShiftRvcTag && !isVariableFpsVideo ? mostRecentTimeshift : timeShiftMediaTag;
+  const timeShift = Math.abs(shouldBeTime - mediaTagTime);
   if (timeShift > acceptableTimeShift && lastSeekDueToShift !== shouldBeTime) {
     return {
       type: "seek-due-to-shift",
@@ -15716,18 +15748,23 @@ var getMediaSyncAction = (input) => {
   }
   const seekThreshold = playing ? 0.15 : 0.01;
   const makesSenseToSeek = Math.abs(currentTime - shouldBeTime) > seekThreshold;
+  const audioLead = currentTime - shouldBeTime;
+  const holdAudioUntilTimelineCatchesUp = mediaType === "audio" && playing && playbackRate > 0 && makesSenseToSeek && audioLead > 0 && audioLead <= acceptableTimeShift;
   const isSomethingElseBuffering = playerBuffering && !mediaTagBufferingOrStalled;
   if (!playing || isSomethingElseBuffering) {
     return {
       type: "seek-if-not-playing",
       shouldBeTime,
-      why: makesSenseToSeek ? `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})` : null
+      why: makesSenseToSeek && !holdAudioUntilTimelineCatchesUp ? `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})` : null
     };
   }
   if (!playing || playerBuffering) {
     return { type: "none" };
   }
   const pausedCondition = paused && !ended;
+  if (pausedCondition && holdAudioUntilTimelineCatchesUp) {
+    return { type: "none" };
+  }
   const firstFrameCondition = absoluteFrame === 0;
   if (pausedCondition || firstFrameCondition) {
     const reason = pausedCondition ? "media tag is paused" : "absolute frame is 0";
@@ -15741,19 +15778,15 @@ var getMediaSyncAction = (input) => {
   }
   return { type: "none" };
 };
-var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React35.useRef({
-    time: mediaRef.current?.currentTime ?? 0,
-    lastUpdate: performance.now()
+var useCurrentTimeOfMediaTag = (mediaRef) => {
+  const currentTime = React35.useRef({
+    time: mediaRef.current?.currentTime ?? 0
   });
   const nowCurrentTime = mediaRef.current?.currentTime ?? null;
   if (nowCurrentTime !== null) {
-    if (lastUpdate.current.time !== nowCurrentTime) {
-      lastUpdate.current.time = nowCurrentTime;
-      lastUpdate.current.lastUpdate = performance.now();
-    }
+    currentTime.current.time = nowCurrentTime;
   }
-  return lastUpdate;
+  return currentTime;
 };
 var seek = ({
   mediaRef,
@@ -15920,8 +15953,7 @@ var useRequestVideoCallbackTime = ({
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
-        time: current.currentTime,
-        lastUpdate: performance.now()
+        time: current.currentTime
       };
     } else {
       currentTime.current = null;
@@ -15951,8 +15983,7 @@ var useRequestVideoCallbackTime = ({
           }
         }
         currentTime.current = {
-          time: info.mediaTime,
-          lastUpdate: performance.now()
+          time: info.mediaTime
         };
         request();
       });
@@ -16083,7 +16114,7 @@ var useMediaPlayback = ({
     lastSeek,
     onVariableFpsVideoDetected
   });
-  const mediaTagCurrentTime = useCurrentTimeOfMediaTagWithUpdateTimeStamp(mediaRef);
+  const mediaTagCurrentTime = useCurrentTimeOfMediaTag(mediaRef);
   const desiredUnclampedTime = getMediaTime({
     frame,
     playbackRate: localPlaybackRate,
@@ -16164,9 +16195,7 @@ var useMediaPlayback = ({
       ended: current.ended,
       desiredUnclampedTime,
       mediaTagTime: mediaTagCurrentTime.current.time,
-      mediaTagLastUpdate: mediaTagCurrentTime.current.lastUpdate,
       rvcTime: rvcCurrentTime.current?.time ?? null,
-      rvcLastUpdate: rvcCurrentTime.current?.lastUpdate ?? null,
       isVariableFpsVideo: Boolean(isVariableFpsVideoMap.current[src]),
       acceptableTimeShift: acceptableTimeShiftButLessThanDuration,
       lastSeekDueToShift: lastSeekDueToShift.current,
@@ -16178,7 +16207,8 @@ var useMediaPlayback = ({
       onlyWarnForMediaSeekingError,
       isPremounting,
       isPostmounting,
-      pauseWhenBuffering
+      pauseWhenBuffering,
+      mediaType
     });
     if (action.type === "none") {
       return;
@@ -17022,7 +17052,8 @@ var SolidInner = ({
   pixelDensity,
   overrideId,
   videoConfigValues,
-  reference
+  reference,
+  canvasProps
 }) => {
   const { delayRender, continueRender, cancelRender } = useDelayRender();
   const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
@@ -17110,6 +17141,7 @@ var SolidInner = ({
     };
   }, [height, style, width]);
   return /* @__PURE__ */ jsx31("canvas", {
+    ...canvasProps,
     ref: canvasRef,
     width: canvasWidth,
     height: canvasHeight,
@@ -17206,6 +17238,7 @@ var SolidOuter = forwardRef8(({
       _remotionInternalIsPostmounting: postmountingActive,
       children: /* @__PURE__ */ jsx31(SequenceContent, {
         children: /* @__PURE__ */ jsx31(SolidInner, {
+          canvasProps: getCanvasPropsFromSequenceProps(props),
           reference: actualRef,
           videoConfigValues: controls?.videoConfigValues ?? null,
           overrideId: controls?.overrideId ?? null,
@@ -19616,7 +19649,7 @@ var createElementSourceProxy = (api, sourceArgumentIndex, getSourceFileName) =>
               fileName: getSourceFileName(source.fileName),
               lineNumber: source.lineNumber,
               columnNumber: source.columnNumber - 1
-            });
+            }, typeof source.__remotionCompiledSourceHash === "string" ? source.__remotionCompiledSourceHash : null);
           } else {
             const { stackTraceLimit } = Error;
             const canLimitStack = typeof stackTraceLimit === "number" && stackTraceLimit > 2 && Object.getOwnPropertyDescriptor(Error, "stackTraceLimit")?.writable;