@remotion/promo-pages 4.0.434 → 4.0.436

package/dist/Homepage.js

@@ -547,29 +547,80 @@ var experts = [
     x: null,
     github: "sambowenhughes",
     linkedin: "in/sambowenhughes/",
-    email: "sambowenhughes@icloud.com",
-    videocall: "https://calendly.com/hello-reactvideoeditor/30min",
+    email: "sam@reactvideoeditor.com",
+    videocall: "https://calendly.com/reactvideoeditor/30min",
     since: new Date("2025-06-03").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
-        "Full-stack engineer with 10+ years experience. I built",
-        " ",
-        /* @__PURE__ */ jsx("a", {
-          target: "_blank",
-          href: "https://reactvideoeditor.com?utm_source=remotion",
-          children: "React Video Editor"
+        /* @__PURE__ */ jsxs("p", {
+          children: [
+            "Experienced engineer with 10+ years building advanced software products. Creator of",
+            " ",
+            /* @__PURE__ */ jsx("a", {
+              target: "_blank",
+              href: "https://reactvideoeditor.com",
+              children: "React Video Editor"
+            }),
+            "and",
+            " ",
+            /* @__PURE__ */ jsx("a", {
+              target: "_blank",
+              href: "https://clippkit.com",
+              children: "Clippkit"
+            }),
+            "."
+          ]
         }),
-        " ",
-        "and",
-        " ",
-        /* @__PURE__ */ jsx("a", {
-          target: "_blank",
-          href: "https://clippkit.com?utm_source=remotion",
-          children: "Clippkit"
+        /* @__PURE__ */ jsxs("p", {
+          children: [
+            "I work with companies building products with",
+            " ",
+            /* @__PURE__ */ jsx("strong", {
+              children: "Remotion at their core"
+            }),
+            ". Custom video editors, automated video generation tools, and scalable rendering pipelines."
+          ]
         }),
-        ".",
-        /* @__PURE__ */ jsx("br", {}),
-        "I can help with anything Remotion-related, or just be a reliable engineering partner if you need someone who moves fast and builds things right – SaaS, design, backend, whatever's needed."
+        /* @__PURE__ */ jsxs("ul", {
+          children: [
+            /* @__PURE__ */ jsxs("li", {
+              children: [
+                /* @__PURE__ */ jsx("strong", {
+                  children: "Custom video editors"
+                }),
+                " built with Remotion"
+              ]
+            }),
+            /* @__PURE__ */ jsxs("li", {
+              children: [
+                /* @__PURE__ */ jsx("strong", {
+                  children: "Automated video generation"
+                }),
+                " systems"
+              ]
+            }),
+            /* @__PURE__ */ jsxs("li", {
+              children: [
+                /* @__PURE__ */ jsx("strong", {
+                  children: "Rendering infrastructure"
+                }),
+                " and media pipelines"
+              ]
+            }),
+            /* @__PURE__ */ jsx("li", {
+              children: /* @__PURE__ */ jsx("strong", {
+                children: "UI/UX and full-stack product development"
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("p", {
+          children: [
+            "If you",
+            "'",
+            "re building software around video, or just need a reliable engineering partner who moves fast and builds things right, feel free to reach out."
+          ]
+        })
       ]
     })
   },
@@ -952,7 +1003,7 @@ var useIsPlayer = () => {
 function truthy(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.434";
+var VERSION = "4.0.436";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -23181,7 +23232,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "38k",
+            content: "39k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -26553,7 +26604,7 @@ var PlayerUI = ({
           throw new TypeError(`setVolume() got a number that is NaN. Volume must be between 0 and 1.`);
         }
         if (vol < 0 || vol > 1) {
-          throw new TypeError(`setVolume() got a number that is out of range. Must be between 0 and 1, got ${typeof vol}`);
+          throw new TypeError(`setVolume() got a number that is out of range. Must be between 0 and 1, got ${vol}`);
         }
         setMediaVolume(vol);
       },
@@ -28408,7 +28459,12 @@ var setGlobalTimeAnchor = ({
   }
   audioSyncAnchor.value = newAnchor;
 };
-var makeAudioIterator = (startFromSecond, maximumTimestamp, cache2, debugAudioScheduling) => {
+var makeAudioIterator = ({
+  startFromSecond,
+  maximumTimestamp,
+  cache: cache2,
+  debugAudioScheduling
+}) => {
   let destroyed = false;
   const iterator = cache2.makeIteratorOrUsePrewarmed(startFromSecond, maximumTimestamp);
   const queuedAudioNodes = [];
@@ -28418,15 +28474,15 @@ var makeAudioIterator = (startFromSecond, maximumTimestamp, cache2, debugAudioSc
   const cleanupAudioQueue = (audioContext) => {
     for (const node of queuedAudioNodes) {
       try {
-        const currentlyHearing = audioContext.getOutputTimestamp().contextTime;
-        const nodeEndTime = node.scheduledTime + node.buffer.duration / node.playbackRate;
-        const isAlreadyPlaying = node.scheduledTime - ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT < audioContext.currentTime;
-        const shouldKeep = isAlreadyPlaying;
-        if (shouldKeep) {
+        const isAlreadyPlaying = node.scheduledTime - ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT < audioContext.audioContext.currentTime;
+        const wasScheduledForThisAnchor = node.scheduledAtAnchor === audioContext.audioSyncAnchor.value;
+        if (isAlreadyPlaying && wasScheduledForThisAnchor) {
           continue;
         }
         if (debugAudioScheduling) {
-          Internals.Log.info({ logLevel: "trace", tag: "audio-scheduling" }, `Stopping node ${node.timestamp.toFixed(3)}, currently hearing = ${currentlyHearing.toFixed(3)} currentTime = ${audioContext.currentTime.toFixed(3)} nodeEndTime = ${nodeEndTime.toFixed(3)} scheduledTime = ${node.scheduledTime.toFixed(3)}`);
+          const currentlyHearing = audioContext.audioContext.getOutputTimestamp().contextTime;
+          const nodeEndTime = node.scheduledTime + node.buffer.duration / node.playbackRate;
+          Internals.Log.info({ logLevel: "trace", tag: "audio-scheduling" }, `Stopping node ${node.timestamp.toFixed(3)}, currently hearing = ${currentlyHearing.toFixed(3)} currentTime = ${audioContext.audioContext.currentTime.toFixed(3)} nodeEndTime = ${nodeEndTime.toFixed(3)} scheduledTime = ${node.scheduledTime.toFixed(3)}`);
         }
         node.node.stop();
       } catch {}
@@ -28587,14 +28643,16 @@ var makeAudioIterator = (startFromSecond, maximumTimestamp, cache2, debugAudioSc
       timestamp,
       buffer,
       scheduledTime,
-      playbackRate
+      playbackRate,
+      scheduledAtAnchor
     }) => {
       queuedAudioNodes.push({
         node,
         timestamp,
         buffer,
         scheduledTime,
-        playbackRate
+        playbackRate,
+        scheduledAtAnchor
       });
     },
     removeQueuedAudioNode: (node) => {
@@ -28833,8 +28891,8 @@ var audioIteratorManager = ({
 }) => {
   let muted = initialMuted;
   let currentVolume = 1;
-  const gainNode = sharedAudioContext.createGain();
-  gainNode.connect(sharedAudioContext.destination);
+  const gainNode = sharedAudioContext.audioContext.createGain();
+  gainNode.connect(sharedAudioContext.audioContext.destination);
   const audioSink = new AudioBufferSink(audioTrack);
   const prewarmedAudioIteratorCache = makePrewarmedAudioIteratorCache(audioSink);
   let audioBufferIterator = null;
@@ -28850,13 +28908,13 @@ var audioIteratorManager = ({
     if (!audioBufferIterator) {
       throw new Error("Audio buffer iterator not found");
     }
-    if (sharedAudioContext.state !== "running") {
+    if (sharedAudioContext.audioContext.state !== "running") {
       throw new Error("Tried to schedule node while audio context is not running");
     }
     if (muted) {
       return;
     }
-    const node = sharedAudioContext.createBufferSource();
+    const node = sharedAudioContext.audioContext.createBufferSource();
     node.buffer = buffer;
     node.playbackRate.value = playbackRate;
     node.connect(gainNode);
@@ -28874,7 +28932,8 @@ var audioIteratorManager = ({
       timestamp: mediaTimestamp,
       buffer,
       scheduledTime: started.scheduledTime,
-      playbackRate
+      playbackRate,
+      scheduledAtAnchor: sharedAudioContext.audioSyncAnchor.value
     });
     node.onended = () => {
       setTimeout(() => {
@@ -28921,7 +28980,7 @@ var audioIteratorManager = ({
     if (buffer.timestamp >= endTime) {
       return;
     }
-    if (getIsPlaying() && sharedAudioContext.state === "running" && (sharedAudioContext.getOutputTimestamp().contextTime ?? 0) > 0) {
+    if (getIsPlaying() && sharedAudioContext.audioContext.state === "running" && (sharedAudioContext.audioContext.getOutputTimestamp().contextTime ?? 0) > 0) {
       resumeScheduledAudioChunks({
         playbackRate,
         scheduleAudioNode,
@@ -28961,7 +29020,12 @@ var audioIteratorManager = ({
       audioBufferIterator?.destroy(sharedAudioContext);
       const delayHandle = __using(__stack, delayPlaybackHandleIfNotPremounting(), 0);
       currentDelayHandle = delayHandle;
-      const iterator = makeAudioIterator(startFromSecond, getEndTime(), prewarmedAudioIteratorCache, debugAudioScheduling);
+      const iterator = makeAudioIterator({
+        startFromSecond,
+        maximumTimestamp: getEndTime(),
+        cache: prewarmedAudioIteratorCache,
+        debugAudioScheduling
+      });
       audioIteratorsCreated++;
       audioBufferIterator = iterator;
       try {
@@ -29045,7 +29109,7 @@ var audioIteratorManager = ({
     }
     const queuedPeriod = audioBufferIterator.getQueuedPeriod();
     const queuedPeriodMinusLatency = queuedPeriod ? {
-      from: queuedPeriod.from - ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT - sharedAudioContext.baseLatency - sharedAudioContext.outputLatency,
+      from: queuedPeriod.from - ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT - sharedAudioContext.audioContext.baseLatency - sharedAudioContext.audioContext.outputLatency,
       until: queuedPeriod.until
     } : null;
     const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, queuedPeriodMinusLatency);
@@ -29608,7 +29672,7 @@ class MediaPlayer {
           this.audioIteratorManager = audioIteratorManager({
             audioTrack,
             delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
-            sharedAudioContext: this.sharedAudioContext.audioContext,
+            sharedAudioContext: this.sharedAudioContext,
             getIsLooping: () => this.loop,
             getEndTime: () => this.getEndTime(),
             getStartTime: () => this.getStartTime(),
@@ -34721,7 +34785,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.434";
+var VERSION2 = "4.0.436";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -38406,6 +38470,7 @@ var createWebFsTarget = async () => {
   const close = () => writable.close();
   return { stream, getBlob, close };
 };
+var MAX_RECENT_FRAME_TIMINGS = 150;
 var internalRenderMediaOnWeb = async ({
   composition,
   inputProps,
@@ -38541,6 +38606,10 @@ var internalRenderMediaOnWeb = async ({
         }) : null, 0);
         const totalFrames = realFrameRange[1] - realFrameRange[0] + 1;
         const durationInSeconds = totalFrames / resolved.fps;
+        const renderStart = Date.now();
+        let doneIn = null;
+        let renderEstimatedTime = 0;
+        const recentFrameTimings = [];
         if (videoSampleSource) {
           outputWithCleanup.output.addVideoTrack(videoSampleSource.videoSampleSource, {
             maximumPacketCount: Math.ceil(totalFrames * 1.33)
@@ -38560,10 +38629,21 @@ var internalRenderMediaOnWeb = async ({
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
+        let timeOfLastFrame = Date.now();
         const progress = {
           renderedFrames: 0,
           encodedFrames: 0
         };
+        const getProgressPayload = () => {
+          const overallProgress = Math.round((70 * progress.renderedFrames + 30 * progress.encodedFrames) / totalFrames) / 100;
+          return {
+            renderedFrames: progress.renderedFrames,
+            encodedFrames: progress.encodedFrames,
+            doneIn,
+            renderEstimatedTime,
+            progress: overallProgress
+          };
+        };
         for (let frame = realFrameRange[0];frame <= realFrameRange[1]; frame++) {
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
@@ -38617,8 +38697,19 @@ var internalRenderMediaOnWeb = async ({
               });
             }
           }
+          const now = Date.now();
+          const timeToRenderInMilliseconds = now - timeOfLastFrame;
+          timeOfLastFrame = now;
           progress.renderedFrames++;
-          throttledOnProgress?.({ ...progress });
+          recentFrameTimings.push(timeToRenderInMilliseconds);
+          if (recentFrameTimings.length > MAX_RECENT_FRAME_TIMINGS) {
+            recentFrameTimings.shift();
+          }
+          const recentTimingsSum = recentFrameTimings.reduce((sum, time) => sum + time, 0);
+          const newAverage = recentTimingsSum / recentFrameTimings.length;
+          const remainingFrames = totalFrames - progress.renderedFrames;
+          renderEstimatedTime = Math.round(remainingFrames * newAverage);
+          throttledOnProgress?.(getProgressPayload());
           const audioCombineStart = performance.now();
           const assets = collectAssets.current.collectAssets();
           if (onArtifact) {
@@ -38645,12 +38736,15 @@ var internalRenderMediaOnWeb = async ({
           await Promise.all(encodingPromises);
           internalState.addAddSampleTime(performance.now() - addSampleStart);
           progress.encodedFrames++;
-          throttledOnProgress?.({ ...progress });
+          if (progress.encodedFrames === totalFrames) {
+            doneIn = Date.now() - renderStart;
+          }
+          throttledOnProgress?.(getProgressPayload());
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
         }
-        onProgress?.({ ...progress });
+        onProgress?.(getProgressPayload());
         videoSampleSource?.videoSampleSource.close();
         audioSampleSource?.audioSampleSource.close();
         await outputWithCleanup.output.finalize();
@@ -38977,10 +39071,10 @@ var RenderButton = ({ renderData, onError, playerRef }) => {
         muted: typeof AudioEncoder === "undefined",
         scale: 1,
         inputProps,
-        onProgress: ({ renderedFrames }) => {
+        onProgress: ({ progress }) => {
           setState({
             type: "progress",
-            progress: renderedFrames / durationInFrames
+            progress
           });
         }
       });
@@ -41042,6 +41136,7 @@ var listOfRemotionPackages = [
   "@remotion/astro-example",
   "@remotion/babel-loader",
   "@remotion/bugs",
+  "@remotion/brand",
   "@remotion/bundler",
   "@remotion/cli",
   "@remotion/cloudrun",
@@ -41120,6 +41215,7 @@ var listOfRemotionPackages = [
   "@remotion/web-renderer",
   "@remotion/design",
   "@remotion/light-leaks",
+  "@remotion/starburst",
   "@remotion/vercel",
   "@remotion/sfx"
 ];
@@ -41293,7 +41389,7 @@ var FEATURED_TEMPLATES = [
     shortName: "Prompt to Motion Graphics SaaS Starter Kit",
     org: "remotion-dev",
     repoName: "template-prompt-to-motion-graphics-saas",
-    description: "SaaS template for AI-powered code generation with Remotion",
+    description: "SaaS template for AI-powered animation generation",
     longerDescription: 'A SaaS template for "Prompt to Motion Graphics" products. Generates Remotion code, streams it to the frontend, and compiles and previews it in the browser. See the <a href="/docs/ai/ai-saas-template">documentation page</a> for more details.',
     promoBanner: {
       width: 2880,
@@ -42334,7 +42430,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx161("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "38k"
+        children: "39k"
       })
     ]
   });