@remotion/media 4.0.428 → 4.0.430

package/dist/esm/index.mjs

@@ -243,13 +243,13 @@ var makeAudioIterator = (startFromSecond, cache) => {
     queuedAudioNodes.length = 0;
     return nodes;
   };
-  const addChunkForAfterResuming = (buffer, timestamp) => {
-    audioChunksForAfterResuming.push({ buffer, timestamp });
+  const addChunkForAfterResuming = (buffer, timestamp, maxDuration) => {
+    audioChunksForAfterResuming.push({ buffer, timestamp, maxDuration });
   };
   const moveQueuedChunksToPauseQueue = () => {
     const toQueue = removeAndReturnAllQueuedAudioNodes();
     for (const chunk of toQueue) {
-      addChunkForAfterResuming(chunk.buffer, chunk.timestamp);
+      addChunkForAfterResuming(chunk.buffer, chunk.timestamp, chunk.maxDuration);
     }
   };
   const getNumberOfChunksAfterResuming = () => {
@@ -274,8 +274,8 @@ var makeAudioIterator = (startFromSecond, cache) => {
     isDestroyed: () => {
       return destroyed;
     },
-    addQueuedAudioNode: (node, timestamp, buffer) => {
-      queuedAudioNodes.push({ node, timestamp, buffer });
+    addQueuedAudioNode: (node, timestamp, buffer, maxDuration) => {
+      queuedAudioNodes.push({ node, timestamp, buffer, maxDuration });
     },
     removeQueuedAudioNode: (node) => {
       const index = queuedAudioNodes.findIndex((n) => n.node === node);
@@ -388,7 +388,6 @@ var audioIteratorManager = ({
   getIsLooping,
   getEndTime,
   getStartTime,
-  updatePlaybackTime,
   initialMuted,
   drawDebugOverlay
 }) => {
@@ -405,7 +404,8 @@ var audioIteratorManager = ({
     buffer,
     mediaTimestamp,
     playbackRate,
-    scheduleAudioNode
+    scheduleAudioNode,
+    maxDuration
   }) => {
     if (!audioBufferIterator) {
       throw new Error("Audio buffer iterator not found");
@@ -417,9 +417,9 @@ var audioIteratorManager = ({
     node.buffer = buffer;
     node.playbackRate.value = playbackRate;
     node.connect(gainNode);
-    scheduleAudioNode(node, mediaTimestamp);
+    scheduleAudioNode(node, mediaTimestamp, maxDuration);
     const iterator = audioBufferIterator;
-    iterator.addQueuedAudioNode(node, mediaTimestamp, buffer);
+    iterator.addQueuedAudioNode(node, mediaTimestamp, buffer, maxDuration);
     node.onended = () => {
       setTimeout(() => {
         iterator.removeQueuedAudioNode(node);
@@ -435,18 +435,24 @@ var audioIteratorManager = ({
     if (muted) {
       return;
     }
+    const endTime = getEndTime();
+    if (buffer.timestamp >= endTime) {
+      return;
+    }
+    const maxDuration = buffer.timestamp + buffer.duration > endTime ? endTime - buffer.timestamp : null;
     if (getIsPlaying()) {
       scheduleAudioChunk({
         buffer: buffer.buffer,
         mediaTimestamp: buffer.timestamp,
         playbackRate,
-        scheduleAudioNode
+        scheduleAudioNode,
+        maxDuration
       });
     } else {
       if (!audioBufferIterator) {
         throw new Error("Audio buffer iterator not found");
       }
-      audioBufferIterator.addChunkForAfterResuming(buffer.buffer, buffer.timestamp);
+      audioBufferIterator.addChunkForAfterResuming(buffer.buffer, buffer.timestamp, maxDuration);
     }
     drawDebugOverlay();
   };
@@ -462,7 +468,6 @@ var audioIteratorManager = ({
       if (muted) {
         return;
       }
-      updatePlaybackTime(startFromSecond);
       audioBufferIterator?.destroy();
       const delayHandle = __using(__stack, delayPlaybackHandleIfNotPremounting(), 0);
       currentDelayHandle = delayHandle;
@@ -497,7 +502,7 @@ var audioIteratorManager = ({
               scheduleAudioNode
             });
           }
-        }, startFromSecond + MAX_BUFFER_AHEAD_SECONDS);
+        }, Math.min(startFromSecond + MAX_BUFFER_AHEAD_SECONDS, getEndTime()));
       } catch (e) {
         if (e instanceof InputDisposedError) {
           return;
@@ -583,7 +588,7 @@ var audioIteratorManager = ({
           scheduleAudioNode
         });
       }
-    }, newTime + MAX_BUFFER_AHEAD_SECONDS);
+    }, Math.min(newTime + MAX_BUFFER_AHEAD_SECONDS, getEndTime()));
   };
   const resumeScheduledAudioChunks = ({
     playbackRate,
@@ -600,7 +605,8 @@ var audioIteratorManager = ({
         buffer: chunk.buffer,
         mediaTimestamp: chunk.timestamp,
         playbackRate,
-        scheduleAudioNode
+        scheduleAudioNode,
+        maxDuration: chunk.maxDuration
       });
     }
   };
@@ -975,6 +981,7 @@ class MediaPlayer {
   fps;
   trimBefore;
   trimAfter;
+  durationInFrames;
   totalDuration;
   debugOverlay = false;
   nonceManager;
@@ -1000,6 +1007,7 @@ class MediaPlayer {
     bufferState,
     isPremounting,
     isPostmounting,
+    durationInFrames,
     onVideoFrameCallback,
     playing
   }) {
@@ -1018,6 +1026,7 @@ class MediaPlayer {
     this.bufferState = bufferState;
     this.isPremounting = isPremounting;
     this.isPostmounting = isPostmounting;
+    this.durationInFrames = durationInFrames;
     this.nonceManager = makeNonceManager();
     this.onVideoFrameCallback = onVideoFrameCallback;
     this.playing = playing;
@@ -1052,7 +1061,7 @@ class MediaPlayer {
     return (this.trimBefore ?? 0) / this.fps;
   }
   getEndTime() {
-    return calculateEndTime({
+    const mediaEndTime = calculateEndTime({
       mediaDurationInSeconds: this.totalDuration,
       ifNoMediaDuration: "fail",
       src: this.src,
@@ -1060,6 +1069,11 @@ class MediaPlayer {
       trimBefore: this.trimBefore,
       fps: this.fps
     });
+    if (this.loop) {
+      return mediaEndTime;
+    }
+    const sequenceEndMediaTime = this.durationInFrames / this.fps * this.playbackRate + (this.trimBefore ?? 0) / this.fps;
+    return Math.min(mediaEndTime, sequenceEndMediaTime);
   }
   async _initialize(startTimeUnresolved, initialMuted) {
     let __stack = [];
@@ -1116,21 +1130,11 @@ class MediaPlayer {
             getIsLooping: () => this.loop
           });
         }
-        const startTime = getTimeInSeconds({
-          unloopedTimeInSeconds: startTimeUnresolved,
-          playbackRate: this.playbackRate,
-          loop: this.loop,
-          trimBefore: this.trimBefore,
-          trimAfter: this.trimAfter,
-          mediaDurationInSeconds: this.totalDuration,
-          fps: this.fps,
-          ifNoMediaDuration: "infinity",
-          src: this.src
-        });
+        const startTime = this.getTrimmedTime(startTimeUnresolved);
         if (startTime === null) {
           throw new Error(`should have asserted that the time is not null`);
         }
-        this.setPlaybackTime(startTime, this.playbackRate * this.globalPlaybackRate);
+        this.setAudioPlaybackTime(startTime);
         if (audioTrack && this.sharedAudioContext) {
           const canDecode = await audioTrack.canDecode();
           if (!canDecode) {
@@ -1146,7 +1150,6 @@ class MediaPlayer {
             getIsLooping: () => this.loop,
             getEndTime: () => this.getEndTime(),
             getStartTime: () => this.getStartTime(),
-            updatePlaybackTime: (time) => this.setPlaybackTime(time, this.playbackRate * this.globalPlaybackRate),
             initialMuted,
             drawDebugOverlay: this.drawDebugOverlay
           });
@@ -1192,17 +1195,7 @@ class MediaPlayer {
     await this.seekPromiseChain;
   };
   async seekTo(time) {
-    const newTime = getTimeInSeconds({
-      unloopedTimeInSeconds: time,
-      playbackRate: this.playbackRate,
-      loop: this.loop,
-      trimBefore: this.trimBefore,
-      trimAfter: this.trimAfter,
-      mediaDurationInSeconds: this.totalDuration ?? null,
-      fps: this.fps,
-      ifNoMediaDuration: "infinity",
-      src: this.src
-    });
+    const newTime = this.getTrimmedTime(time);
     if (newTime === null) {
       throw new Error(`should have asserted that the time is not null`);
     }
@@ -1213,6 +1206,9 @@ class MediaPlayer {
       return;
     }
     const shouldSeekAudio = this.audioIteratorManager && this.sharedAudioContext && this.getAudioPlaybackTime() !== newTime;
+    if (shouldSeekAudio) {
+      this.setAudioPlaybackTime(newTime);
+    }
     await Promise.all([
       this.videoIteratorManager?.seek({
         newTime,
@@ -1227,26 +1223,12 @@ class MediaPlayer {
       }) : null
     ]);
   }
-  async play(time) {
-    if (this.playing) {
-      return;
-    }
-    const newTime = getTimeInSeconds({
-      unloopedTimeInSeconds: time,
-      playbackRate: this.playbackRate,
-      loop: this.loop,
-      trimBefore: this.trimBefore,
-      trimAfter: this.trimAfter,
-      mediaDurationInSeconds: this.totalDuration ?? null,
-      fps: this.fps,
-      ifNoMediaDuration: "infinity",
-      src: this.src
-    });
+  async playAudio(time) {
+    const newTime = this.getTrimmedTime(time);
     if (newTime === null) {
       throw new Error(`should have asserted that the time is not null`);
     }
-    this.setPlaybackTime(newTime, this.playbackRate * this.globalPlaybackRate);
-    this.playing = true;
+    this.setAudioPlaybackTime(newTime);
     if (this.audioIteratorManager) {
       this.audioIteratorManager.resumeScheduledAudioChunks({
         playbackRate: this.playbackRate * this.globalPlaybackRate,
@@ -1256,6 +1238,13 @@ class MediaPlayer {
     if (this.sharedAudioContext && this.sharedAudioContext.state === "suspended") {
       await this.sharedAudioContext.resume();
     }
+  }
+  async play(time) {
+    if (this.playing) {
+      return;
+    }
+    this.playing = true;
+    await this.playAudio(time);
     this.drawDebugOverlay();
   }
   delayPlaybackHandleIfNotPremounting = () => {
@@ -1290,11 +1279,8 @@ class MediaPlayer {
     }
     this.audioIteratorManager.setVolume(volume);
   }
-  async updateAfterTrimChange(unloopedTimeInSeconds) {
-    if (!this.audioIteratorManager && !this.videoIteratorManager) {
-      return;
-    }
-    const newMediaTime = getTimeInSeconds({
+  getTrimmedTime(unloopedTimeInSeconds) {
+    return getTimeInSeconds({
       unloopedTimeInSeconds,
       playbackRate: this.playbackRate,
       loop: this.loop,
@@ -1305,9 +1291,15 @@ class MediaPlayer {
       ifNoMediaDuration: "infinity",
       src: this.src
     });
+  }
+  async updateAfterTrimChange(unloopedTimeInSeconds) {
+    if (!this.audioIteratorManager && !this.videoIteratorManager) {
+      return;
+    }
+    const newMediaTime = this.getTrimmedTime(unloopedTimeInSeconds);
     this.audioIteratorManager?.destroyIterator();
     if (newMediaTime !== null) {
-      this.setPlaybackTime(newMediaTime, this.playbackRate * this.globalPlaybackRate);
+      this.setAudioPlaybackTime(newMediaTime);
       if (!this.playing && this.videoIteratorManager) {
         await this.seekToWithQueue(newMediaTime);
       }
@@ -1328,14 +1320,14 @@ class MediaPlayer {
   setDebugOverlay(debugOverlay) {
     this.debugOverlay = debugOverlay;
   }
-  updateAudioTimeAfterPlaybackRateChange() {
+  updateAudioTimeAfterPlaybackRateChange(mediaTimeBeforeChange) {
     if (!this.audioIteratorManager) {
       return;
     }
     if (!this.sharedAudioContext) {
       return;
     }
-    this.setPlaybackTime(this.getAudioPlaybackTime(), this.playbackRate * this.globalPlaybackRate);
+    this.setAudioPlaybackTime(mediaTimeBeforeChange);
     const iterator = this.audioIteratorManager.getAudioBufferIterator();
     if (!iterator) {
       return;
@@ -1348,13 +1340,19 @@ class MediaPlayer {
       });
     }
   }
-  setPlaybackRate(rate) {
+  async setPlaybackRate(rate, unloopedTimeInSeconds) {
+    const previousRate = this.playbackRate;
+    const mediaTime = this.sharedAudioContext ? this.getAudioPlaybackTime() : 0;
     this.playbackRate = rate;
-    this.updateAudioTimeAfterPlaybackRateChange();
+    this.updateAudioTimeAfterPlaybackRateChange(mediaTime);
+    if (previousRate !== rate) {
+      await this.seekTo(unloopedTimeInSeconds);
+    }
   }
   setGlobalPlaybackRate(rate) {
+    const mediaTime = this.sharedAudioContext ? this.getAudioPlaybackTime() : 0;
     this.globalPlaybackRate = rate;
-    this.updateAudioTimeAfterPlaybackRateChange();
+    this.updateAudioTimeAfterPlaybackRateChange(mediaTime);
   }
   setFps(fps) {
     this.fps = fps;
@@ -1368,6 +1366,9 @@ class MediaPlayer {
   setLoop(loop) {
     this.loop = loop;
   }
+  setDurationInFrames(durationInFrames) {
+    this.durationInFrames = durationInFrames;
+  }
   async dispose() {
     if (this.initializationPromise) {
       try {
@@ -1379,7 +1380,7 @@ class MediaPlayer {
     this.audioIteratorManager?.destroyIterator();
     this.input.dispose();
   }
-  scheduleAudioNode = (node, mediaTimestamp) => {
+  scheduleAudioNode = (node, mediaTimestamp, maxDuration) => {
     const currentTime = this.getAudioPlaybackTime();
     const delayWithoutPlaybackRate = mediaTimestamp - currentTime;
     const delay = delayWithoutPlaybackRate / (this.playbackRate * this.globalPlaybackRate);
@@ -1387,9 +1388,10 @@ class MediaPlayer {
       throw new Error("Shared audio context not found");
     }
     if (delay >= 0) {
-      node.start(this.sharedAudioContext.currentTime + delay);
+      node.start(this.sharedAudioContext.currentTime + delay, 0, maxDuration ?? undefined);
     } else {
-      node.start(this.sharedAudioContext.currentTime, -delayWithoutPlaybackRate);
+      const offset = -delayWithoutPlaybackRate;
+      node.start(this.sharedAudioContext.currentTime, offset, maxDuration !== null ? maxDuration - offset : undefined);
     }
   };
   getAudioPlaybackTime() {
@@ -1402,11 +1404,17 @@ class MediaPlayer {
       playbackRate: this.playbackRate * this.globalPlaybackRate
     });
   }
-  setPlaybackTime(time, playbackRate) {
+  setAudioPlaybackTime(time) {
     if (!this.sharedAudioContext) {
       return;
     }
-    this.audioSyncAnchor = this.sharedAudioContext.currentTime - time / playbackRate;
+    const playbackRate = this.playbackRate * this.globalPlaybackRate;
+    const newAnchor = this.sharedAudioContext.currentTime - time / playbackRate;
+    const shift = Math.abs(newAnchor - this.audioSyncAnchor) * playbackRate;
+    if (shift < 0.05) {
+      return;
+    }
+    this.audioSyncAnchor = newAnchor;
   }
   setVideoFrameCallback(callback) {
     this.onVideoFrameCallback = callback;
@@ -1505,7 +1513,8 @@ var useMediaInTimeline = ({
   postmountDisplay,
   loopDisplay,
   trimBefore,
-  trimAfter
+  trimAfter,
+  controls
 }) => {
   const parentSequence = useContext(Internals5.SequenceContext);
   const startsAt = Internals5.useMediaStartsAt();
@@ -1556,7 +1565,8 @@ var useMediaInTimeline = ({
         stack,
         from: 0,
         duration,
-        id: sequenceId
+        id: sequenceId,
+        controls: null
       });
     }
     registerSequence({
@@ -1577,7 +1587,8 @@ var useMediaInTimeline = ({
       playbackRate,
       stack,
       premountDisplay: null,
-      postmountDisplay: null
+      postmountDisplay: null,
+      controls: controls ?? null
     });
     return () => {
       if (loopDisplay) {
@@ -1586,6 +1597,7 @@ var useMediaInTimeline = ({
       unregisterSequence(mediaId);
     };
   }, [
+    controls,
     doesVolumeChange,
     duration,
     finalDisplayName,
@@ -1646,7 +1658,8 @@ var AudioForPreviewAssertedShowing = ({
   toneFrequency,
   audioStreamIndex,
   fallbackHtml5AudioProps,
-  onError
+  onError,
+  controls
 }) => {
   const videoConfig = useUnsafeVideoConfig();
   const frame = useCurrentFrame2();
@@ -1703,7 +1716,8 @@ var AudioForPreviewAssertedShowing = ({
     postmountDisplay: parentSequence?.postmountDisplay ?? null,
     loopDisplay,
     trimAfter,
-    trimBefore
+    trimBefore,
+    controls
   });
   const bufferingContext = useContext2(Internals6.BufferingContextReact);
   if (!bufferingContext) {
@@ -1739,6 +1753,7 @@ var AudioForPreviewAssertedShowing = ({
         isPostmounting: initialIsPostmounting.current,
         isPremounting: initialIsPremounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
+        durationInFrames: videoConfig.durationInFrames,
         onVideoFrameCallback: null,
         playing: initialPlaying.current
       });
@@ -1831,7 +1846,8 @@ var AudioForPreviewAssertedShowing = ({
     audioStreamIndex,
     disallowFallbackToHtml5Audio,
     buffer,
-    onError
+    onError,
+    videoConfig.durationInFrames
   ]);
   useLayoutEffect(() => {
     const audioPlayer = mediaPlayerRef.current;
@@ -1875,7 +1891,7 @@ var AudioForPreviewAssertedShowing = ({
     if (!audioPlayer || !mediaPlayerReady) {
       return;
     }
-    audioPlayer.setPlaybackRate(playbackRate);
+    audioPlayer.setPlaybackRate(playbackRate, currentTimeRef.current);
   }, [playbackRate, mediaPlayerReady]);
   useLayoutEffect(() => {
     const audioPlayer = mediaPlayerRef.current;
@@ -1898,6 +1914,13 @@ var AudioForPreviewAssertedShowing = ({
     }
     mediaPlayer.setLoop(loop);
   }, [loop, mediaPlayerReady]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setDurationInFrames(videoConfig.durationInFrames);
+  }, [videoConfig.durationInFrames, mediaPlayerReady]);
   useLayoutEffect(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
@@ -1941,17 +1964,36 @@ var AudioForPreviewAssertedShowing = ({
   }
   return null;
 };
+var audioSchema = {
+  volume: {
+    type: "number",
+    min: 0,
+    max: 20,
+    step: 0.01,
+    default: 1,
+    description: "Volume"
+  },
+  playbackRate: {
+    type: "number",
+    min: 0,
+    step: 0.01,
+    default: 1,
+    description: "Playback Rate"
+  },
+  trimBefore: { type: "number", min: 0, default: 0 },
+  trimAfter: { type: "number", min: 0, default: 0 }
+};
 var AudioForPreview = ({
   loop,
   src,
   logLevel,
   muted,
   name,
-  volume,
+  volume: volumeProp,
   loopVolumeCurveBehavior,
-  playbackRate,
-  trimAfter,
-  trimBefore,
+  playbackRate: playbackRateProp,
+  trimAfter: trimAfterProp,
+  trimBefore: trimBeforeProp,
   showInTimeline,
   stack,
   disallowFallbackToHtml5Audio,
@@ -1960,6 +2002,24 @@ var AudioForPreview = ({
   fallbackHtml5AudioProps,
   onError
 }) => {
+  const schemaInput = useMemo2(() => {
+    if (typeof volumeProp !== "number") {
+      return null;
+    }
+    return {
+      volume: volumeProp,
+      playbackRate: playbackRateProp,
+      trimBefore: trimBeforeProp,
+      trimAfter: trimAfterProp,
+      loop: loop ?? false
+    };
+  }, [volumeProp, playbackRateProp, trimBeforeProp, trimAfterProp, loop]);
+  const { controls, values } = Internals6.useSchema(schemaInput ? audioSchema : null, schemaInput);
+  const volume = schemaInput !== null ? values.volume : volumeProp;
+  const playbackRate = schemaInput !== null ? values.playbackRate : playbackRateProp;
+  const trimBefore = schemaInput !== null ? values.trimBefore : trimBeforeProp;
+  const trimAfter = schemaInput !== null ? values.trimAfter : trimAfterProp;
+  const effectiveLoop = schemaInput !== null ? values.loop : loop ?? false;
   const preloadedSrc = usePreload(src);
   const defaultLogLevel = Internals6.useLogLevel();
   const frame = useCurrentFrame2();
@@ -1969,7 +2029,7 @@ var AudioForPreview = ({
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
       playbackRate: playbackRate ?? 1,
-      loop: loop ?? false,
+      loop: effectiveLoop,
       trimBefore,
       trimAfter,
       mediaDurationInSeconds: Infinity,
@@ -1979,7 +2039,7 @@ var AudioForPreview = ({
     }) !== null;
   }, [
     currentTime,
-    loop,
+    effectiveLoop,
     playbackRate,
     src,
     trimAfter,
@@ -1997,7 +2057,7 @@ var AudioForPreview = ({
     muted: muted ?? false,
     volume: volume ?? 1,
     loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
-    loop: loop ?? false,
+    loop: effectiveLoop,
     trimAfter,
     trimBefore,
     name,
@@ -2006,7 +2066,8 @@ var AudioForPreview = ({
     disallowFallbackToHtml5Audio: disallowFallbackToHtml5Audio ?? false,
     toneFrequency,
     onError,
-    fallbackHtml5AudioProps
+    fallbackHtml5AudioProps,
+    controls
   });
 };
 
@@ -4138,7 +4199,8 @@ var VideoForPreviewAssertedShowing = ({
   audioStreamIndex,
   debugOverlay,
   headless,
-  onError
+  onError,
+  controls
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4169,6 +4231,8 @@ var VideoForPreviewAssertedShowing = ({
   const parentSequence = useContext4(SequenceContext2);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
+  const { premountFramesRemaining, playing: playingWhilePremounting } = useContext4(Internals16.PremountContext);
+  const isNextFrameGoingToPlay = playingWhilePremounting && premountFramesRemaining > 0 && premountFramesRemaining <= 1.000000001;
   const loopDisplay = useLoopDisplay({
     loop,
     mediaDurationInSeconds,
@@ -4189,7 +4253,8 @@ var VideoForPreviewAssertedShowing = ({
     loopDisplay,
     mediaVolume,
     trimAfter,
-    trimBefore
+    trimBefore,
+    controls
   });
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (!videoConfig) {
@@ -4231,6 +4296,7 @@ var VideoForPreviewAssertedShowing = ({
         isPremounting: initialIsPremounting.current,
         isPostmounting: initialIsPostmounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
+        durationInFrames: videoConfig.durationInFrames,
         onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
         playing: initialPlaying.current
       });
@@ -4320,7 +4386,8 @@ var VideoForPreviewAssertedShowing = ({
     preloadedSrc,
     sharedAudioContext,
     videoConfig.fps,
-    onError
+    onError,
+    videoConfig.durationInFrames
   ]);
   const classNameValue = useMemo4(() => {
     return [Internals16.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals16.truthy).join(" ");
@@ -4329,12 +4396,32 @@ var VideoForPreviewAssertedShowing = ({
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
       return;
-    if (playing && !isPlayerBuffering) {
+    if (isNextFrameGoingToPlay) {
+      const currentTimeUntilZero = premountFramesRemaining / videoConfig.fps / globalPlaybackRate;
+      mediaPlayer.playAudio(currentTimeRef.current - currentTimeUntilZero);
+    }
+  }, [
+    isNextFrameGoingToPlay,
+    premountFramesRemaining,
+    videoConfig.fps,
+    globalPlaybackRate
+  ]);
+  useEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer)
+      return;
+    if (playing && !isPlayerBuffering && !isNextFrameGoingToPlay) {
       mediaPlayer.play(currentTimeRef.current);
     } else {
       mediaPlayer.pause();
     }
-  }, [isPlayerBuffering, playing, logLevel, mediaPlayerReady]);
+  }, [
+    isPlayerBuffering,
+    playing,
+    logLevel,
+    mediaPlayerReady,
+    isNextFrameGoingToPlay
+  ]);
   useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
@@ -4374,7 +4461,7 @@ var VideoForPreviewAssertedShowing = ({
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
-    mediaPlayer.setPlaybackRate(playbackRate);
+    mediaPlayer.setPlaybackRate(playbackRate, currentTimeRef.current);
   }, [playbackRate, mediaPlayerReady]);
   useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
@@ -4390,6 +4477,13 @@ var VideoForPreviewAssertedShowing = ({
     }
     mediaPlayer.setLoop(loop);
   }, [loop, mediaPlayerReady]);
+  useLayoutEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setDurationInFrames(videoConfig.durationInFrames);
+  }, [videoConfig.durationInFrames, mediaPlayerReady]);
   useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
@@ -4460,17 +4554,60 @@ var VideoForPreviewAssertedShowing = ({
     className: classNameValue
   });
 };
+var videoSchema = {
+  volume: {
+    type: "number",
+    min: 0,
+    max: 20,
+    step: 0.01,
+    default: 1,
+    description: "Volume"
+  },
+  playbackRate: {
+    type: "number",
+    min: 0,
+    step: 0.01,
+    default: 1,
+    description: "Playback Rate"
+  },
+  trimBefore: { type: "number", min: 0, default: 0 },
+  trimAfter: { type: "number", min: 0, default: 0 }
+};
 var VideoForPreview = (props) => {
+  const schemaInput = useMemo4(() => {
+    if (typeof props.volume !== "number") {
+      return null;
+    }
+    return {
+      volume: props.volume,
+      playbackRate: props.playbackRate,
+      trimBefore: props.trimBefore,
+      trimAfter: props.trimAfter,
+      loop: props.loop
+    };
+  }, [
+    props.volume,
+    props.playbackRate,
+    props.trimBefore,
+    props.trimAfter,
+    props.loop
+  ]);
+  const { controls, values } = Internals16.useSchema(schemaInput ? videoSchema : null, schemaInput);
+  const volume = schemaInput !== null ? values.volume : props.volume;
+  const playbackRate = schemaInput !== null ? values.playbackRate : props.playbackRate;
+  const trimBefore = schemaInput !== null ? values.trimBefore : props.trimBefore;
+  const trimAfter = schemaInput !== null ? values.trimAfter : props.trimAfter;
+  const effectiveLoop = schemaInput !== null ? values.loop : props.loop;
   const frame = useCurrentFrame4();
   const videoConfig = useVideoConfig3();
   const currentTime = frame / videoConfig.fps;
   const showShow = useMemo4(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
-      playbackRate: props.playbackRate,
-      loop: props.loop,
-      trimBefore: props.trimBefore,
-      trimAfter: props.trimAfter,
+      playbackRate,
+      loop: effectiveLoop,
+      trimBefore,
+      trimAfter,
       mediaDurationInSeconds: Infinity,
       fps: videoConfig.fps,
       ifNoMediaDuration: "infinity",
@@ -4478,18 +4615,24 @@ var VideoForPreview = (props) => {
     }) !== null;
   }, [
     currentTime,
-    props.loop,
-    props.playbackRate,
+    effectiveLoop,
+    playbackRate,
     props.src,
-    props.trimAfter,
-    props.trimBefore,
+    trimAfter,
+    trimBefore,
     videoConfig.fps
   ]);
   if (!showShow) {
     return null;
   }
   return /* @__PURE__ */ jsx4(VideoForPreviewAssertedShowing, {
-    ...props
+    ...props,
+    volume,
+    playbackRate,
+    loop: effectiveLoop,
+    trimBefore,
+    trimAfter,
+    controls
   });
 };