@remotion/media 4.0.390 → 4.0.392

package/dist/media-player.js

@@ -3,12 +3,12 @@ import { Internals } from 'remotion';
 import { audioIteratorManager, } from './audio-iterator-manager';
 import { calculatePlaybackTime } from './calculate-playbacktime';
 import { drawPreviewOverlay } from './debug-overlay/preview-overlay';
-import { getTimeInSeconds } from './get-time-in-seconds';
+import { calculateEndTime, getTimeInSeconds } from './get-time-in-seconds';
 import { isNetworkError } from './is-type-of-error';
 import { makeNonceManager } from './nonce-manager';
 import { videoIteratorManager } from './video-iterator-manager';
 export class MediaPlayer {
-    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, onVideoFrameCallback, }) {
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, onVideoFrameCallback, playing, }) {
         this.audioIteratorManager = null;
         this.videoIteratorManager = null;
         // this is the time difference between Web Audio timeline
@@ -71,6 +71,7 @@ export class MediaPlayer {
         this.isPostmounting = isPostmounting;
         this.nonceManager = makeNonceManager();
         this.onVideoFrameCallback = onVideoFrameCallback;
+        this.playing = playing;
         this.input = new Input({
             source: new UrlSource(this.src),
             formats: ALL_FORMATS,
@@ -95,9 +96,24 @@ export class MediaPlayer {
     initialize(startTimeUnresolved) {
         const promise = this._initialize(startTimeUnresolved);
         this.initializationPromise = promise;
+        this.seekPromiseChain = promise;
         return promise;
     }
+    getStartTime() {
+        return (this.trimBefore ?? 0) / this.fps;
+    }
+    getEndTime() {
+        return calculateEndTime({
+            mediaDurationInSeconds: this.totalDuration,
+            ifNoMediaDuration: 'fail',
+            src: this.src,
+            trimAfter: this.trimAfter,
+            trimBefore: this.trimBefore,
+            fps: this.fps,
+        });
+    }
     async _initialize(startTimeUnresolved) {
+        const delayHandle = this.delayPlaybackHandleIfNotPremounting();
         try {
             if (this.input.disposed) {
                 return { type: 'disposed' };
@@ -145,6 +161,9 @@ export class MediaPlayer {
                     getOnVideoFrameCallback: () => this.onVideoFrameCallback,
                     logLevel: this.logLevel,
                     drawDebugOverlay: this.drawDebugOverlay,
+                    getEndTime: () => this.getEndTime(),
+                    getStartTime: () => this.getStartTime(),
+                    getIsLooping: () => this.loop,
                 });
             }
             const startTime = getTimeInSeconds({
@@ -167,21 +186,28 @@ export class MediaPlayer {
                     audioTrack,
                     delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
                     sharedAudioContext: this.sharedAudioContext,
+                    getIsLooping: () => this.loop,
+                    getEndTime: () => this.getEndTime(),
+                    getStartTime: () => this.getStartTime(),
+                    updatePlaybackTime: (time) => this.setPlaybackTime(time, this.playbackRate * this.globalPlaybackRate),
                 });
             }
             const nonce = this.nonceManager.createAsyncOperation();
             try {
-                // intentionally not awaited
-                if (this.audioIteratorManager) {
-                    this.audioIteratorManager.startAudioIterator({
-                        nonce,
-                        playbackRate: this.playbackRate * this.globalPlaybackRate,
-                        startFromSecond: startTime,
-                        getIsPlaying: () => this.playing,
-                        scheduleAudioNode: this.scheduleAudioNode,
-                    });
-                }
-                await this.videoIteratorManager?.startVideoIterator(startTime, nonce);
+                await Promise.all([
+                    this.audioIteratorManager
+                        ? this.audioIteratorManager.startAudioIterator({
+                            nonce,
+                            playbackRate: this.playbackRate * this.globalPlaybackRate,
+                            startFromSecond: startTime,
+                            getIsPlaying: () => this.playing,
+                            scheduleAudioNode: this.scheduleAudioNode,
+                        })
+                        : Promise.resolve(),
+                    this.videoIteratorManager
+                        ? this.videoIteratorManager.startVideoIterator(startTime, nonce)
+                        : Promise.resolve(),
+                ]);
             }
             catch (error) {
                 if (this.isDisposalError()) {
@@ -200,6 +226,9 @@ export class MediaPlayer {
             Internals.Log.error({ logLevel: this.logLevel, tag: '@remotion/media' }, '[MediaPlayer] Failed to initialize', error);
             throw error;
         }
+        finally {
+            delayHandle.unblock();
+        }
     }
     async seekTo(time) {
         const newTime = getTimeInSeconds({
@@ -246,6 +275,9 @@ export class MediaPlayer {
         ]);
     }
     async play(time) {
+        if (this.playing) {
+            return;
+        }
         const newTime = getTimeInSeconds({
             unloopedTimeInSeconds: time,
             playbackRate: this.playbackRate,
@@ -274,6 +306,9 @@ export class MediaPlayer {
         this.drawDebugOverlay();
     }
     pause() {
+        if (!this.playing) {
+            return;
+        }
         this.playing = false;
         this.audioIteratorManager?.pausePlayback();
         this.drawDebugOverlay();
@@ -310,12 +345,16 @@ export class MediaPlayer {
         this.audioIteratorManager?.destroyIterator();
     }
     setTrimBefore(trimBefore, unloopedTimeInSeconds) {
-        this.trimBefore = trimBefore;
-        this.updateAfterTrimChange(unloopedTimeInSeconds);
+        if (this.trimBefore !== trimBefore) {
+            this.trimBefore = trimBefore;
+            this.updateAfterTrimChange(unloopedTimeInSeconds);
+        }
     }
     setTrimAfter(trimAfter, unloopedTimeInSeconds) {
-        this.trimAfter = trimAfter;
-        this.updateAfterTrimChange(unloopedTimeInSeconds);
+        if (this.trimAfter !== trimAfter) {
+            this.trimAfter = trimAfter;
+            this.updateAfterTrimChange(unloopedTimeInSeconds);
+        }
     }
     setDebugOverlay(debugOverlay) {
         this.debugOverlay = debugOverlay;

package/dist/new-video-for-rendering.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { VideoProps } from './props';
+export declare const VideoForRendering: React.FC<VideoProps>;

package/dist/new-video-for-rendering.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
+import { extractFrameViaBroadcastChannel } from './extract-frame-via-broadcast-channel';
+export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, 
+// call when a frame of the video, i.e. frame drawn on canvas
+onVideoFrame, logLevel = window.remotion_logLevel, }) => {
+    const absoluteFrame = Internals.useTimelinePosition();
+    const videoConfig = Internals.useUnsafeVideoConfig();
+    const canvasRef = useRef(null);
+    const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
+    const frame = useCurrentFrame();
+    const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
+    const environment = useRemotionEnvironment();
+    const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
+    if (!src) {
+        throw new TypeError('No `src` was passed to <Video>.');
+    }
+    const volume = Internals.evaluateVolume({
+        volume: volumeProp,
+        frame: volumePropsFrame,
+        mediaVolume: 1,
+    });
+    Internals.warnAboutTooHighVolume(volume);
+    const shouldRenderAudio = useMemo(() => {
+        if (!window.remotion_audioEnabled) {
+            return false;
+        }
+        if (muted) {
+            return false;
+        }
+        if (volume <= 0) {
+            return false;
+        }
+        return true;
+    }, [muted, volume]);
+    const { fps } = videoConfig;
+    const { delayRender, continueRender } = useDelayRender();
+    useLayoutEffect(() => {
+        if (!canvasRef.current) {
+            return;
+        }
+        const actualFps = playbackRate ? fps / playbackRate : fps;
+        const timestamp = frame / actualFps;
+        const durationInSeconds = 1 / actualFps;
+        const newHandle = delayRender(`Extracting frame number ${frame}`, {
+            retries: delayRenderRetries ?? undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
+        });
+        extractFrameViaBroadcastChannel({
+            src,
+            timeInSeconds: timestamp,
+            durationInSeconds,
+            logLevel: logLevel ?? 'info',
+            shouldRenderAudio,
+            isClientSideRendering: environment.isClientSideRendering,
+        })
+            .then(({ frame: imageBitmap, audio }) => {
+            if (!imageBitmap) {
+                cancelRender(new Error('No video frame found'));
+            }
+            onVideoFrame?.(imageBitmap);
+            canvasRef.current?.getContext('2d')?.drawImage(imageBitmap, 0, 0);
+            imageBitmap.close();
+            if (audio) {
+                registerRenderAsset({
+                    type: 'inline-audio',
+                    id,
+                    audio: Array.from(audio.data),
+                    sampleRate: audio.sampleRate,
+                    numberOfChannels: audio.numberOfChannels,
+                    frame: absoluteFrame,
+                    timestamp: audio.timestamp,
+                    duration: (audio.numberOfFrames / audio.sampleRate) * 1000000,
+                });
+            }
+            continueRender(newHandle);
+        })
+            .catch((error) => {
+            cancelRender(error);
+        });
+        return () => {
+            continueRender(newHandle);
+            unregisterRenderAsset(id);
+        };
+    }, [
+        absoluteFrame,
+        continueRender,
+        delayRender,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        environment.isClientSideRendering,
+        fps,
+        frame,
+        id,
+        logLevel,
+        onVideoFrame,
+        playbackRate,
+        registerRenderAsset,
+        shouldRenderAudio,
+        src,
+        unregisterRenderAsset,
+    ]);
+    return (_jsx("canvas", { ref: canvasRef, width: videoConfig.width, height: videoConfig.height }));
+};

package/dist/new-video.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { VideoProps } from './props';
+export declare const Video: React.FC<VideoProps>;

package/dist/new-video.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Internals, Sequence, useRemotionEnvironment } from 'remotion';
+import { VideoForRendering } from './new-video-for-rendering';
+const { validateMediaTrimProps, resolveTrimProps, validateMediaProps, VideoForPreview, } = Internals;
+export const Video = (props) => {
+    // Should only destruct `startFrom` and `endAt` from props,
+    // rest gets drilled down
+    const { trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, ...otherProps } = props;
+    const environment = useRemotionEnvironment();
+    const onDuration = useCallback(() => undefined, []);
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    validateMediaTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        trimBefore,
+        trimAfter,
+    });
+    const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        trimBefore,
+        trimAfter,
+    });
+    if (typeof trimBeforeValue !== 'undefined' ||
+        typeof trimAfterValue !== 'undefined') {
+        return (_jsx(Sequence, { layout: "none", from: 0 - (trimBeforeValue ?? 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: _jsx(Video, { pauseWhenBuffering: pauseWhenBuffering ?? false, ...otherProps }) }));
+    }
+    validateMediaProps(props, 'Video');
+    if (environment.isRendering) {
+        return _jsx(VideoForRendering, { ...otherProps });
+    }
+    const { onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
+    return (_jsx(VideoForPreview, { _remotionInternalStack: stack ?? null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering ?? false, showInTimeline: showInTimeline ?? true, onAutoPlayError: onAutoPlayError ?? undefined, onVideoFrame: onVideoFrame ?? null, crossOrigin: crossOrigin, ...propsForPreview }));
+};

package/dist/prewarm-iterator-for-looping.d.ts

@@ -0,0 +1,17 @@
+import type { AudioBufferSink, CanvasSink, WrappedAudioBuffer, WrappedCanvas } from 'mediabunny';
+export declare const makePrewarmedVideoIteratorCache: (videoSink: CanvasSink) => {
+    prewarmIteratorForLooping: ({ timeToSeek }: {
+        timeToSeek: number;
+    }) => void;
+    makeIteratorOrUsePrewarmed: (timeToSeek: number) => AsyncGenerator<WrappedCanvas, void, unknown>;
+    destroy: () => void;
+};
+export type PrewarmedVideoIteratorCache = ReturnType<typeof makePrewarmedVideoIteratorCache>;
+export declare const makePrewarmedAudioIteratorCache: (audioSink: AudioBufferSink) => {
+    prewarmIteratorForLooping: ({ timeToSeek }: {
+        timeToSeek: number;
+    }) => void;
+    makeIteratorOrUsePrewarmed: (timeToSeek: number) => AsyncGenerator<WrappedAudioBuffer, void, unknown>;
+    destroy: () => void;
+};
+export type PrewarmedAudioIteratorCache = ReturnType<typeof makePrewarmedAudioIteratorCache>;

package/dist/prewarm-iterator-for-looping.js

@@ -0,0 +1,56 @@
+export const makePrewarmedVideoIteratorCache = (videoSink) => {
+    const prewarmedVideoIterators = new Map();
+    const prewarmIteratorForLooping = ({ timeToSeek }) => {
+        if (!prewarmedVideoIterators.has(timeToSeek)) {
+            prewarmedVideoIterators.set(timeToSeek, videoSink.canvases(timeToSeek));
+        }
+    };
+    const makeIteratorOrUsePrewarmed = (timeToSeek) => {
+        const prewarmedIterator = prewarmedVideoIterators.get(timeToSeek);
+        if (prewarmedIterator) {
+            prewarmedVideoIterators.delete(timeToSeek);
+            return prewarmedIterator;
+        }
+        const iterator = videoSink.canvases(timeToSeek);
+        return iterator;
+    };
+    const destroy = () => {
+        for (const iterator of prewarmedVideoIterators.values()) {
+            iterator.return();
+        }
+        prewarmedVideoIterators.clear();
+    };
+    return {
+        prewarmIteratorForLooping,
+        makeIteratorOrUsePrewarmed,
+        destroy,
+    };
+};
+export const makePrewarmedAudioIteratorCache = (audioSink) => {
+    const prewarmedAudioIterators = new Map();
+    const prewarmIteratorForLooping = ({ timeToSeek }) => {
+        if (!prewarmedAudioIterators.has(timeToSeek)) {
+            prewarmedAudioIterators.set(timeToSeek, audioSink.buffers(timeToSeek));
+        }
+    };
+    const makeIteratorOrUsePrewarmed = (timeToSeek) => {
+        const prewarmedIterator = prewarmedAudioIterators.get(timeToSeek);
+        if (prewarmedIterator) {
+            prewarmedAudioIterators.delete(timeToSeek);
+            return prewarmedIterator;
+        }
+        const iterator = audioSink.buffers(timeToSeek);
+        return iterator;
+    };
+    const destroy = () => {
+        for (const iterator of prewarmedAudioIterators.values()) {
+            iterator.return();
+        }
+        prewarmedAudioIterators.clear();
+    };
+    return {
+        prewarmIteratorForLooping,
+        makeIteratorOrUsePrewarmed,
+        destroy,
+    };
+};

package/dist/props.d.ts

@@ -0,0 +1,29 @@
+import type { LoopVolumeCurveBehavior, VolumeProp } from 'remotion';
+import type { LogLevel } from './log';
+export type AudioProps = {
+    src: string;
+    trimBefore?: number;
+    trimAfter?: number;
+    volume?: VolumeProp;
+    loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
+    name?: string;
+    pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
+    onAutoPlayError?: null | (() => void);
+    playbackRate?: number;
+    muted?: boolean;
+    delayRenderRetries?: number;
+    delayRenderTimeoutInMilliseconds?: number;
+    crossOrigin?: '' | 'anonymous' | 'use-credentials';
+    style?: React.CSSProperties;
+    onError?: (err: Error) => void;
+    useWebAudioApi?: boolean;
+    acceptableTimeShiftInSeconds?: number;
+    /**
+     * @deprecated For internal use only
+     */
+    stack?: string;
+    logLevel?: LogLevel;
+    loop?: boolean;
+    _remotionInternalNativeLoopPassed?: boolean;
+};

package/dist/props.js

@@ -0,0 +1 @@
+export {};

package/dist/remember-actual-matroska-timestamps.d.ts

@@ -0,0 +1,4 @@
+export declare const rememberActualMatroskaTimestamps: (isMatroska: boolean) => {
+    observeTimestamp: (startTime: number) => void;
+    getRealTimestamp: (observedTimestamp: number) => number | null;
+};

package/dist/remember-actual-matroska-timestamps.js

@@ -0,0 +1,19 @@
+export const rememberActualMatroskaTimestamps = (isMatroska) => {
+    const observations = [];
+    const observeTimestamp = (startTime) => {
+        if (!isMatroska) {
+            return;
+        }
+        observations.push(startTime);
+    };
+    const getRealTimestamp = (observedTimestamp) => {
+        if (!isMatroska) {
+            return observedTimestamp;
+        }
+        return (observations.find((observation) => Math.abs(observedTimestamp - observation) < 0.001) ?? null);
+    };
+    return {
+        observeTimestamp,
+        getRealTimestamp,
+    };
+};

package/dist/serialize-videoframe.js

@@ -0,0 +1 @@
+"use strict";

package/dist/video/media-player.d.ts

@@ -0,0 +1,62 @@
+import type { LogLevel } from 'remotion';
+export declare const SEEK_THRESHOLD = 0.05;
+export declare class MediaPlayer {
+    private canvas;
+    private context;
+    private src;
+    private logLevel;
+    private canvasSink;
+    private videoFrameIterator;
+    private nextFrame;
+    private audioSink;
+    private audioBufferIterator;
+    private queuedAudioNodes;
+    private gainNode;
+    private sharedAudioContext;
+    private audioSyncAnchor;
+    private playing;
+    private animationFrameId;
+    private videoAsyncId;
+    private initialized;
+    private totalDuration;
+    private isBuffering;
+    private onBufferingChangeCallback?;
+    private audioBufferHealth;
+    private audioIteratorStarted;
+    private readonly HEALTHY_BUFER_THRESHOLD_SECONDS;
+    constructor({ canvas, src, logLevel, sharedAudioContext, }: {
+        canvas: HTMLCanvasElement;
+        src: string;
+        logLevel: LogLevel;
+        sharedAudioContext: AudioContext;
+    });
+    private input;
+    private isReady;
+    private hasAudio;
+    private isCurrentlyBuffering;
+    initialize(startTime?: number): Promise<void>;
+    private cleanupAudioQueue;
+    private cleanAudioIteratorAndNodes;
+    seekTo(time: number): Promise<void>;
+    play(): Promise<void>;
+    pause(): void;
+    dispose(): void;
+    private getPlaybackTime;
+    private scheduleAudioChunk;
+    onBufferingChange(callback: (isBuffering: boolean) => void): void;
+    private canRenderVideo;
+    private startRenderLoop;
+    private stopRenderLoop;
+    private render;
+    private shouldRenderFrame;
+    private drawCurrentFrame;
+    private startAudioIterator;
+    private startVideoIterator;
+    private updateNextFrame;
+    private bufferingStartedAtMs;
+    private minBufferingTimeoutMs;
+    private setBufferingState;
+    private maybeResumeFromBuffering;
+    private maybeForceResumeFromBuffering;
+    private runAudioIterator;
+}