@remotion/media 4.0.429 → 4.0.430

package/dist/media-player.js

@@ -0,0 +1,431 @@
+import { ALL_FORMATS, Input, UrlSource } from 'mediabunny';
+import { Internals } from 'remotion';
+import { audioIteratorManager, } from './audio-iterator-manager';
+import { calculatePlaybackTime } from './calculate-playbacktime';
+import { drawPreviewOverlay } from './debug-overlay/preview-overlay';
+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, playing, }) {
+        this.audioIteratorManager = null;
+        this.videoIteratorManager = null;
+        // this is the time difference between Web Audio timeline
+        // and media file timeline
+        this.audioSyncAnchor = 0;
+        this.playing = false;
+        this.loop = false;
+        this.debugOverlay = false;
+        this.onVideoFrameCallback = null;
+        this.initializationPromise = null;
+        this.seekPromiseChain = Promise.resolve();
+        this.delayPlaybackHandleIfNotPremounting = () => {
+            if (this.isPremounting || this.isPostmounting) {
+                return {
+                    unblock: () => { },
+                };
+            }
+            return this.bufferState.delayPlayback();
+        };
+        this.scheduleAudioNode = (node, mediaTimestamp) => {
+            const currentTime = this.getPlaybackTime();
+            const delayWithoutPlaybackRate = mediaTimestamp - currentTime;
+            const delay = delayWithoutPlaybackRate / (this.playbackRate * this.globalPlaybackRate);
+            if (delay >= 0) {
+                node.start(this.sharedAudioContext.currentTime + delay);
+            }
+            else {
+                node.start(this.sharedAudioContext.currentTime, -delay);
+            }
+        };
+        this.drawDebugOverlay = () => {
+            if (!this.debugOverlay)
+                return;
+            if (this.context && this.canvas) {
+                drawPreviewOverlay({
+                    context: this.context,
+                    audioTime: this.sharedAudioContext.currentTime,
+                    audioContextState: this.sharedAudioContext.state,
+                    audioSyncAnchor: this.audioSyncAnchor,
+                    audioIteratorManager: this.audioIteratorManager,
+                    playing: this.playing,
+                    videoIteratorManager: this.videoIteratorManager,
+                });
+            }
+        };
+        this.canvas = canvas ?? null;
+        this.src = src;
+        this.logLevel = logLevel ?? window.remotion_logLevel;
+        this.sharedAudioContext = sharedAudioContext;
+        this.playbackRate = playbackRate;
+        this.globalPlaybackRate = globalPlaybackRate;
+        this.loop = loop;
+        this.trimBefore = trimBefore;
+        this.trimAfter = trimAfter;
+        this.audioStreamIndex = audioStreamIndex ?? 0;
+        this.fps = fps;
+        this.debugOverlay = debugOverlay;
+        this.bufferState = bufferState;
+        this.isPremounting = isPremounting;
+        this.isPostmounting = isPostmounting;
+        this.nonceManager = makeNonceManager();
+        this.onVideoFrameCallback = onVideoFrameCallback;
+        this.playing = playing;
+        this.input = new Input({
+            source: new UrlSource(this.src),
+            formats: ALL_FORMATS,
+        });
+        if (canvas) {
+            const context = canvas.getContext('2d', {
+                alpha: true,
+                desynchronized: true,
+            });
+            if (!context) {
+                throw new Error('Could not get 2D context from canvas');
+            }
+            this.context = context;
+        }
+        else {
+            this.context = null;
+        }
+    }
+    isDisposalError() {
+        return this.input.disposed === true;
+    }
+    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' };
+            }
+            try {
+                await this.input.getFormat();
+            }
+            catch (error) {
+                if (this.isDisposalError()) {
+                    return { type: 'disposed' };
+                }
+                const err = error;
+                if (isNetworkError(err)) {
+                    throw error;
+                }
+                Internals.Log.error({ logLevel: this.logLevel, tag: '@remotion/media' }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
+                return { type: 'unknown-container-format' };
+            }
+            const [durationInSeconds, videoTrack, audioTracks] = await Promise.all([
+                this.input.computeDuration(),
+                this.input.getPrimaryVideoTrack(),
+                this.input.getAudioTracks(),
+            ]);
+            if (this.input.disposed) {
+                return { type: 'disposed' };
+            }
+            this.totalDuration = durationInSeconds;
+            const audioTrack = audioTracks[this.audioStreamIndex] ?? null;
+            if (!videoTrack && !audioTrack) {
+                return { type: 'no-tracks' };
+            }
+            if (videoTrack) {
+                const canDecode = await videoTrack.canDecode();
+                if (!canDecode) {
+                    return { type: 'cannot-decode' };
+                }
+                if (this.input.disposed) {
+                    return { type: 'disposed' };
+                }
+                this.videoIteratorManager = videoIteratorManager({
+                    videoTrack,
+                    delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
+                    context: this.context,
+                    canvas: this.canvas,
+                    getOnVideoFrameCallback: () => this.onVideoFrameCallback,
+                    logLevel: this.logLevel,
+                    drawDebugOverlay: this.drawDebugOverlay,
+                    getEndTime: () => this.getEndTime(),
+                    getStartTime: () => this.getStartTime(),
+                    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,
+            });
+            if (startTime === null) {
+                throw new Error(`should have asserted that the time is not null`);
+            }
+            this.setPlaybackTime(startTime, this.playbackRate * this.globalPlaybackRate);
+            if (audioTrack) {
+                this.audioIteratorManager = audioIteratorManager({
+                    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 {
+                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()) {
+                    return { type: 'disposed' };
+                }
+                Internals.Log.error({ logLevel: this.logLevel, tag: '@remotion/media' }, '[MediaPlayer] Failed to start audio and video iterators', error);
+            }
+            return { type: 'success', durationInSeconds };
+        }
+        catch (error) {
+            const err = error;
+            if (isNetworkError(err)) {
+                Internals.Log.error({ logLevel: this.logLevel, tag: '@remotion/media' }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
+                return { type: 'network-error' };
+            }
+            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({
+            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,
+        });
+        if (newTime === null) {
+            throw new Error(`should have asserted that the time is not null`);
+        }
+        const nonce = this.nonceManager.createAsyncOperation();
+        await this.seekPromiseChain;
+        this.seekPromiseChain = this.seekToDoNotCallDirectly(newTime, nonce);
+        await this.seekPromiseChain;
+    }
+    async seekToDoNotCallDirectly(newTime, nonce) {
+        if (nonce.isStale()) {
+            return;
+        }
+        const currentPlaybackTime = this.getPlaybackTime();
+        if (currentPlaybackTime === newTime) {
+            return;
+        }
+        await Promise.all([
+            this.videoIteratorManager?.seek({
+                newTime,
+                nonce,
+            }),
+            this.audioIteratorManager?.seek({
+                newTime,
+                nonce,
+                fps: this.fps,
+                playbackRate: this.playbackRate * this.globalPlaybackRate,
+                getIsPlaying: () => this.playing,
+                scheduleAudioNode: this.scheduleAudioNode,
+                bufferState: this.bufferState,
+            }),
+        ]);
+    }
+    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,
+        });
+        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;
+        if (this.audioIteratorManager) {
+            this.audioIteratorManager.resumeScheduledAudioChunks({
+                playbackRate: this.playbackRate * this.globalPlaybackRate,
+                scheduleAudioNode: this.scheduleAudioNode,
+            });
+        }
+        if (this.sharedAudioContext.state === 'suspended') {
+            await this.sharedAudioContext.resume();
+        }
+        this.drawDebugOverlay();
+    }
+    pause() {
+        if (!this.playing) {
+            return;
+        }
+        this.playing = false;
+        this.audioIteratorManager?.pausePlayback();
+        this.drawDebugOverlay();
+    }
+    setMuted(muted) {
+        this.audioIteratorManager?.setMuted(muted);
+    }
+    setVolume(volume) {
+        if (!this.audioIteratorManager) {
+            return;
+        }
+        this.audioIteratorManager.setVolume(volume);
+    }
+    updateAfterTrimChange(unloopedTimeInSeconds) {
+        if (!this.audioIteratorManager && !this.videoIteratorManager) {
+            return;
+        }
+        const newMediaTime = getTimeInSeconds({
+            unloopedTimeInSeconds,
+            playbackRate: this.playbackRate,
+            loop: this.loop,
+            trimBefore: this.trimBefore,
+            trimAfter: this.trimAfter,
+            mediaDurationInSeconds: this.totalDuration ?? null,
+            fps: this.fps,
+            ifNoMediaDuration: 'infinity',
+            src: this.src,
+        });
+        if (newMediaTime !== null) {
+            this.setPlaybackTime(newMediaTime, this.playbackRate * this.globalPlaybackRate);
+        }
+        // audio iterator will be re-created on next play/seek
+        // video iterator doesn't need to be re-created
+        this.audioIteratorManager?.destroyIterator();
+    }
+    setTrimBefore(trimBefore, unloopedTimeInSeconds) {
+        if (this.trimBefore !== trimBefore) {
+            this.trimBefore = trimBefore;
+            this.updateAfterTrimChange(unloopedTimeInSeconds);
+        }
+    }
+    setTrimAfter(trimAfter, unloopedTimeInSeconds) {
+        if (this.trimAfter !== trimAfter) {
+            this.trimAfter = trimAfter;
+            this.updateAfterTrimChange(unloopedTimeInSeconds);
+        }
+    }
+    setDebugOverlay(debugOverlay) {
+        this.debugOverlay = debugOverlay;
+    }
+    updateAfterPlaybackRateChange() {
+        if (!this.audioIteratorManager) {
+            return;
+        }
+        this.setPlaybackTime(this.getPlaybackTime(), this.playbackRate * this.globalPlaybackRate);
+        const iterator = this.audioIteratorManager.getAudioBufferIterator();
+        if (!iterator) {
+            return;
+        }
+        iterator.moveQueuedChunksToPauseQueue();
+        if (this.playing) {
+            this.audioIteratorManager.resumeScheduledAudioChunks({
+                playbackRate: this.playbackRate * this.globalPlaybackRate,
+                scheduleAudioNode: this.scheduleAudioNode,
+            });
+        }
+    }
+    setPlaybackRate(rate) {
+        this.playbackRate = rate;
+        this.updateAfterPlaybackRateChange();
+    }
+    setGlobalPlaybackRate(rate) {
+        this.globalPlaybackRate = rate;
+        this.updateAfterPlaybackRateChange();
+    }
+    setFps(fps) {
+        this.fps = fps;
+    }
+    setIsPremounting(isPremounting) {
+        this.isPremounting = isPremounting;
+    }
+    setIsPostmounting(isPostmounting) {
+        this.isPostmounting = isPostmounting;
+    }
+    setLoop(loop) {
+        this.loop = loop;
+    }
+    async dispose() {
+        if (this.initializationPromise) {
+            try {
+                // wait for the init to finished
+                // otherwise we might get errors like:
+                // Error: Response stream reader stopped unexpectedly before all requested data was read. from UrlSource
+                await this.initializationPromise;
+            }
+            catch {
+                // Ignore initialization errors during disposal
+            }
+        }
+        // Mark all async operations as stale
+        this.nonceManager.createAsyncOperation();
+        this.videoIteratorManager?.destroy();
+        this.audioIteratorManager?.destroyIterator();
+        this.input.dispose();
+    }
+    getPlaybackTime() {
+        return calculatePlaybackTime({
+            audioSyncAnchor: this.audioSyncAnchor,
+            currentTime: this.sharedAudioContext.currentTime,
+            playbackRate: this.playbackRate * this.globalPlaybackRate,
+        });
+    }
+    setPlaybackTime(time, playbackRate) {
+        this.audioSyncAnchor =
+            this.sharedAudioContext.currentTime - time / playbackRate;
+    }
+    setVideoFrameCallback(callback) {
+        this.onVideoFrameCallback = callback;
+    }
+}

package/dist/nonce-manager.js

@@ -0,0 +1,13 @@
+export const makeNonceManager = () => {
+    let nonce = 0;
+    const createAsyncOperation = () => {
+        nonce++;
+        const currentNonce = nonce;
+        return {
+            isStale: () => nonce !== currentNonce,
+        };
+    };
+    return {
+        createAsyncOperation,
+    };
+};

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/render-timestamp-range.js

@@ -0,0 +1,9 @@
+export const renderTimestampRange = (timestamps) => {
+    if (timestamps.length === 0) {
+        return '(none)';
+    }
+    if (timestamps.length === 1) {
+        return timestamps[0].toFixed(3);
+    }
+    return `${timestamps[0].toFixed(3)}...${timestamps[timestamps.length - 1].toFixed(3)}`;
+};

package/dist/show-in-timeline.js

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { Internals, useVideoConfig } from 'remotion';
+export const useLoopDisplay = ({ loop, mediaDurationInSeconds, playbackRate, trimAfter, trimBefore, }) => {
+    const { durationInFrames: compDuration, fps } = useVideoConfig();
+    const loopDisplay = useMemo(() => {
+        if (!loop || !mediaDurationInSeconds) {
+            return undefined;
+        }
+        const durationInFrames = Internals.calculateMediaDuration({
+            mediaDurationInFrames: mediaDurationInSeconds * fps,
+            playbackRate,
+            trimAfter,
+            trimBefore,
+        });
+        const maxTimes = compDuration / durationInFrames;
+        return {
+            numberOfTimes: maxTimes,
+            startOffset: 0,
+            durationInFrames,
+        };
+    }, [
+        compDuration,
+        fps,
+        loop,
+        mediaDurationInSeconds,
+        playbackRate,
+        trimAfter,
+        trimBefore,
+    ]);
+    return loopDisplay;
+};

package/dist/use-media-in-timeline.d.ts

@@ -14,7 +14,7 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType,
     loopDisplay: LoopDisplay | undefined;
     trimBefore: number | undefined;
     trimAfter: number | undefined;
-    controls: SequenceControls | null;
+    controls: SequenceControls | undefined;
 }) => {
     id: string;
 };

package/dist/use-media-in-timeline.js

@@ -0,0 +1,103 @@
+import { useContext, useEffect, useState } from 'react';
+import { Internals, useCurrentFrame } from 'remotion';
+export const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, trimBefore, trimAfter, }) => {
+    const parentSequence = useContext(Internals.SequenceContext);
+    const startsAt = Internals.useMediaStartsAt();
+    const { registerSequence, unregisterSequence } = useContext(Internals.SequenceManager);
+    const [sequenceId] = useState(() => String(Math.random()));
+    const [mediaId] = useState(() => String(Math.random()));
+    const frame = useCurrentFrame();
+    const { volumes, duration, doesVolumeChange, nonce, rootId, isStudio, finalDisplayName, } = Internals.useBasicMediaInTimeline({
+        volume,
+        mediaVolume,
+        mediaType,
+        src,
+        displayName,
+        trimBefore,
+        trimAfter,
+        playbackRate,
+    });
+    useEffect(() => {
+        if (!src) {
+            throw new Error('No src passed');
+        }
+        if (!isStudio && window.process?.env?.NODE_ENV !== 'test') {
+            return;
+        }
+        if (!showInTimeline) {
+            return;
+        }
+        const loopIteration = loopDisplay
+            ? Math.floor(frame / loopDisplay.durationInFrames)
+            : 0;
+        if (loopDisplay) {
+            registerSequence({
+                type: 'sequence',
+                premountDisplay,
+                postmountDisplay,
+                parent: parentSequence?.id ?? null,
+                displayName: finalDisplayName,
+                rootId,
+                showInTimeline: true,
+                nonce,
+                loopDisplay,
+                stack,
+                from: 0,
+                duration,
+                id: sequenceId,
+            });
+        }
+        registerSequence({
+            type: mediaType,
+            src,
+            id: mediaId,
+            duration: loopDisplay?.durationInFrames ?? duration,
+            from: loopDisplay ? loopIteration * loopDisplay.durationInFrames : 0,
+            parent: loopDisplay ? sequenceId : (parentSequence?.id ?? null),
+            displayName: finalDisplayName,
+            rootId,
+            volume: volumes,
+            showInTimeline: true,
+            nonce,
+            startMediaFrom: 0 - startsAt,
+            doesVolumeChange,
+            loopDisplay: undefined,
+            playbackRate,
+            stack,
+            premountDisplay: null,
+            postmountDisplay: null,
+        });
+        return () => {
+            if (loopDisplay) {
+                unregisterSequence(sequenceId);
+            }
+            unregisterSequence(mediaId);
+        };
+    }, [
+        doesVolumeChange,
+        duration,
+        finalDisplayName,
+        isStudio,
+        loopDisplay,
+        mediaId,
+        mediaType,
+        nonce,
+        parentSequence?.id,
+        playbackRate,
+        postmountDisplay,
+        premountDisplay,
+        registerSequence,
+        rootId,
+        sequenceId,
+        showInTimeline,
+        src,
+        stack,
+        startsAt,
+        unregisterSequence,
+        volumes,
+        frame,
+    ]);
+    return {
+        id: mediaId,
+    };
+};

package/dist/video/props.js

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