@remotion/promo-pages 4.0.540 → 4.0.541

package/dist/Homepage.js

@@ -254,7 +254,7 @@ var videoSources = {
   "remotion.media": "media-default-2026-10-28-98858a945958.mp4"
 };
 var imageSources = {
-  SDK: "https://remotion.media/explore-remotion/sdk-code-centered-2026-10-28-3f656f8f25f7.png"
+  SDK: "https://remotion.media/explore-remotion/sdk-code-dark-plus-2026-11-04-785159157fed.png"
 };
 var ExploreSection = () => {
   const [hoveredTitle, setHoveredTitle] = useState2(null);
@@ -4055,8 +4055,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
         });
@@ -4789,7 +4790,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;
@@ -4799,12 +4800,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" ? useEffect3 : useLayoutEffect;
@@ -6212,9 +6220,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) {
@@ -6244,7 +6254,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;
@@ -10000,7 +10010,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;
   }
@@ -11752,6 +11762,7 @@ var setSequenceWrapperRef = (ref, wrapperRef, node) => {
     ref.current = node;
   }
 };
+var getSingleChildPropsFromRef = (childrenRef) => getSingleChildProps(childrenRef.current);
 var RegularSequenceContentRefForwardingFunction = ({
   timing,
   from = 0,
@@ -11772,6 +11783,7 @@ var RegularSequenceContentRefForwardingFunction = ({
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalSingleChildComponent: childComponentOverride,
+  _remotionInternalSingleChildren: authoredChildrenOverride,
   _remotionInternalDocumentationLink: documentationLink,
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
@@ -11822,6 +11834,7 @@ var RegularSequenceContentRefForwardingFunction = ({
     loopPeriod,
     loopIteration,
     contentVisible,
+    inheritedFrozenFrame,
     currentFrameRef
   } = timing;
   if (typeof contentDurationInFrames !== "number") {
@@ -11946,7 +11959,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;
@@ -11955,7 +11974,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;
@@ -11963,8 +11983,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]);
@@ -12026,7 +12045,8 @@ var RegularSequenceContentRefForwardingFunction = ({
           refForOutline: refForOutline ?? null,
           isInsideSeries,
           frozenFrame: registeredFrozenFrame,
-          singleChildComponent: singleChildComponent ?? null
+          singleChildComponent: singleChildComponent ?? null,
+          getSingleChildProps: getRegisteredSingleChildProps
         };
       }
       return {
@@ -12059,7 +12079,8 @@ var RegularSequenceContentRefForwardingFunction = ({
         isInsideSeries,
         frozenFrame: registeredFrozenFrame,
         frozenMediaFrame,
-        singleChildComponent: singleChildComponent ?? null
+        singleChildComponent: singleChildComponent ?? null,
+        getSingleChildProps: getRegisteredSingleChildProps
       };
     }
     return {
@@ -12089,7 +12110,8 @@ var RegularSequenceContentRefForwardingFunction = ({
       refForOutline: refForOutline ?? null,
       isInsideSeries,
       frozenFrame: registeredFrozenFrame,
-      singleChildComponent: singleChildComponent ?? null
+      singleChildComponent: singleChildComponent ?? null,
+      getSingleChildProps: getRegisteredSingleChildProps
     };
   }, [
     id,
@@ -12123,7 +12145,8 @@ var RegularSequenceContentRefForwardingFunction = ({
     startMediaFrom,
     mediaFrameAtSequenceZero,
     frozenMediaFrame,
-    singleChildComponent
+    singleChildComponent,
+    getRegisteredSingleChildProps
   ]);
   const getSequenceForRegistration = useMemo22(() => getSequenceRegistration.bind(null, sequenceForRegistration), [sequenceForRegistration]);
   const registration = useSequenceRegistration({
@@ -12287,6 +12310,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,
@@ -12295,6 +12319,7 @@ var RegularSequenceRefForwardingFunction = (props, ref) => {
     loopPeriod,
     loopIteration,
     contentVisible,
+    inheritedFrozenFrame,
     currentFrameRef
   }), [
     contentDurationInFrames,
@@ -12302,7 +12327,8 @@ var RegularSequenceRefForwardingFunction = (props, ref) => {
     actualDurationInFrames,
     loopPeriod,
     loopIteration,
-    contentVisible
+    contentVisible,
+    inheritedFrozenFrame
   ]);
   return /* @__PURE__ */ jsxs22(React27.Fragment, {
     children: [
@@ -12582,6 +12608,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,
@@ -13869,16 +13905,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,
@@ -14364,6 +14390,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();
@@ -14379,7 +14415,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
       registerRenderAsset({
         type: "artifact",
         id,
-        content: btoa(new TextDecoder("utf8").decode(content)),
+        content: encodeBinaryArtifact(content),
         filename,
         frame,
         contentType: "binary",
@@ -16160,9 +16196,7 @@ var getMediaSyncAction = (input) => {
     ended,
     desiredUnclampedTime,
     mediaTagTime,
-    mediaTagLastUpdate,
     rvcTime,
-    rvcLastUpdate,
     isVariableFpsVideo,
     acceptableTimeShift,
     lastSeekDueToShift,
@@ -16174,13 +16208,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",
@@ -16193,18 +16225,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";
@@ -16218,19 +16255,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,
@@ -16397,8 +16430,7 @@ var useRequestVideoCallbackTime = ({
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
-        time: current.currentTime,
-        lastUpdate: performance.now()
+        time: current.currentTime
       };
     } else {
       currentTime.current = null;
@@ -16428,8 +16460,7 @@ var useRequestVideoCallbackTime = ({
           }
         }
         currentTime.current = {
-          time: info.mediaTime,
-          lastUpdate: performance.now()
+          time: info.mediaTime
         };
         request();
       });
@@ -16560,7 +16591,7 @@ var useMediaPlayback = ({
     lastSeek,
     onVariableFpsVideoDetected
   });
-  const mediaTagCurrentTime = useCurrentTimeOfMediaTagWithUpdateTimeStamp(mediaRef);
+  const mediaTagCurrentTime = useCurrentTimeOfMediaTag(mediaRef);
   const desiredUnclampedTime = getMediaTime({
     frame,
     playbackRate: localPlaybackRate,
@@ -16641,9 +16672,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,
@@ -16655,7 +16684,8 @@ var useMediaPlayback = ({
       onlyWarnForMediaSeekingError,
       isPremounting,
       isPostmounting,
-      pauseWhenBuffering
+      pauseWhenBuffering,
+      mediaType
     });
     if (action.type === "none") {
       return;
@@ -17499,7 +17529,8 @@ var SolidInner = ({
   pixelDensity,
   overrideId,
   videoConfigValues,
-  reference
+  reference,
+  canvasProps
 }) => {
   const { delayRender, continueRender, cancelRender } = useDelayRender();
   const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
@@ -17587,6 +17618,7 @@ var SolidInner = ({
     };
   }, [height, style, width]);
   return /* @__PURE__ */ jsx31("canvas", {
+    ...canvasProps,
     ref: canvasRef,
     width: canvasWidth,
     height: canvasHeight,
@@ -17683,6 +17715,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,
@@ -20093,7 +20126,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;
@@ -36212,6 +36245,8 @@ var FreePricing = ({ termsHref, faqHref }) => {
                 children: [
                   /* @__PURE__ */ jsx74("a", {
                     href: termsHref,
+                    target: termsHref.startsWith("http") ? "_blank" : undefined,
+                    rel: "noopener noreferrer",
                     className: "underline underline-offset-4 text-inherit font-brand",
                     children: "Terms"
                   }),
@@ -36665,7 +36700,7 @@ var Pricing = ({
   faqHref = "/docs/license/faq",
   faqLabel = "License FAQ",
   licenseHref = "https://github.com/remotion-dev/remotion/blob/main/LICENSE.md",
-  termsHref = "/docs/terms",
+  termsHref = "https://www.remotion.dev/docs/terms",
   purchaseHref = "https://remotion.pro/dashboard"
 }) => {
   const faqLinkTarget = useMemo66(() => {