@remotion/media 4.0.403 → 4.0.404

package/dist/media-player.js

@@ -1,445 +0,0 @@
-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.getAudioPlaybackTime();
-            const delayWithoutPlaybackRate = mediaTimestamp - currentTime;
-            const delay = delayWithoutPlaybackRate / (this.playbackRate * this.globalPlaybackRate);
-            if (!this.sharedAudioContext) {
-                throw new Error('Shared audio context not found');
-            }
-            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 ?? null,
-                    audioContextState: this.sharedAudioContext?.state ?? null,
-                    audioSyncAnchor: this.audioSyncAnchor,
-                    audioIteratorManager: this.audioIteratorManager,
-                    playing: this.playing,
-                    videoIteratorManager: this.videoIteratorManager,
-                });
-            }
-        };
-        this.canvas = canvas ?? null;
-        this.src = src;
-        this.logLevel = 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.sharedAudioContext) {
-                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 shouldSeekAudio = this.audioIteratorManager &&
-            this.sharedAudioContext &&
-            this.getAudioPlaybackTime() !== newTime;
-        await Promise.all([
-            this.videoIteratorManager?.seek({
-                newTime,
-                nonce,
-            }),
-            shouldSeekAudio
-                ? this.audioIteratorManager?.seek({
-                    newTime,
-                    nonce,
-                    fps: this.fps,
-                    playbackRate: this.playbackRate * this.globalPlaybackRate,
-                    getIsPlaying: () => this.playing,
-                    scheduleAudioNode: this.scheduleAudioNode,
-                    bufferState: this.bufferState,
-                })
-                : 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,
-        });
-        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 &&
-            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;
-    }
-    updateAudioTimeAfterPlaybackRateChange() {
-        if (!this.audioIteratorManager) {
-            return;
-        }
-        if (!this.sharedAudioContext) {
-            return;
-        }
-        this.setPlaybackTime(this.getAudioPlaybackTime(), 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.updateAudioTimeAfterPlaybackRateChange();
-    }
-    setGlobalPlaybackRate(rate) {
-        this.globalPlaybackRate = rate;
-        this.updateAudioTimeAfterPlaybackRateChange();
-    }
-    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();
-    }
-    getAudioPlaybackTime() {
-        if (!this.sharedAudioContext) {
-            throw new Error('Shared audio context not found');
-        }
-        return calculatePlaybackTime({
-            audioSyncAnchor: this.audioSyncAnchor,
-            currentTime: this.sharedAudioContext.currentTime,
-            playbackRate: this.playbackRate * this.globalPlaybackRate,
-        });
-    }
-    setPlaybackTime(time, playbackRate) {
-        if (!this.sharedAudioContext) {
-            return;
-        }
-        this.audioSyncAnchor =
-            this.sharedAudioContext.currentTime - time / playbackRate;
-    }
-    setVideoFrameCallback(callback) {
-        this.onVideoFrameCallback = callback;
-    }
-}

package/dist/nonce-manager.js

@@ -1,13 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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.js

@@ -1,103 +0,0 @@
-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

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