@remotion/media 4.0.357 → 4.0.361

package/dist/extract-frame-and-audio.js

@@ -40,6 +40,12 @@ export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durat
         if (frame?.type === 'unknown-container-format') {
             return { type: 'unknown-container-format' };
         }
+        if (frame?.type === 'cannot-decode-alpha') {
+            return {
+                type: 'cannot-decode-alpha',
+                durationInSeconds: frame.durationInSeconds,
+            };
+        }
         if (audio === 'unknown-container-format') {
             if (frame !== null) {
                 frame?.frame?.close();

package/dist/get-time-in-seconds.d.ts

@@ -1,4 +1,4 @@
-export declare const getTimeInSeconds: ({ loop, mediaDurationInSeconds, unloopedTimeInSeconds, src, trimAfter, trimBefore, fps, playbackRate, }: {
+export declare const getTimeInSeconds: ({ loop, mediaDurationInSeconds, unloopedTimeInSeconds, src, trimAfter, trimBefore, fps, playbackRate, ifNoMediaDuration, }: {
     loop: boolean;
     mediaDurationInSeconds: number | null;
     unloopedTimeInSeconds: number;
@@ -7,4 +7,5 @@ export declare const getTimeInSeconds: ({ loop, mediaDurationInSeconds, unlooped
     trimBefore: number | undefined;
     playbackRate: number;
     fps: number;
+    ifNoMediaDuration: "fail" | "infinity";
 }) => number | null;

package/dist/get-time-in-seconds.js

@@ -1,24 +1,24 @@
 import { Internals } from 'remotion';
-export const getTimeInSeconds = ({ loop, mediaDurationInSeconds, unloopedTimeInSeconds, src, trimAfter, trimBefore, fps, playbackRate, }) => {
-    if (mediaDurationInSeconds === null && loop) {
+export const getTimeInSeconds = ({ loop, mediaDurationInSeconds, unloopedTimeInSeconds, src, trimAfter, trimBefore, fps, playbackRate, ifNoMediaDuration, }) => {
+    if (mediaDurationInSeconds === null && loop && ifNoMediaDuration === 'fail') {
         throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
     }
     const loopDuration = loop
-        ? Internals.calculateLoopDuration({
+        ? Internals.calculateMediaDuration({
             trimAfter,
-            mediaDurationInFrames: mediaDurationInSeconds * fps,
+            mediaDurationInFrames: mediaDurationInSeconds
+                ? mediaDurationInSeconds * fps
+                : Infinity,
             // Playback rate was already specified before
             playbackRate: 1,
             trimBefore,
         }) / fps
         : Infinity;
     const timeInSeconds = (unloopedTimeInSeconds * playbackRate) % loopDuration;
-    if ((trimAfter ?? null) !== null) {
-        if (!loop) {
-            const time = (trimAfter - (trimBefore ?? 0)) / fps;
-            if (timeInSeconds >= time) {
-                return null;
-            }
+    if ((trimAfter ?? null) !== null && !loop) {
+        const time = (trimAfter - (trimBefore ?? 0)) / fps;
+        if (timeInSeconds >= time) {
+            return null;
         }
     }
     return timeInSeconds + (trimBefore ?? 0) / fps;

package/dist/show-in-timeline.d.ts

@@ -0,0 +1,8 @@
+import type { _InternalTypes } from 'remotion';
+export declare const useLoopDisplay: ({ loop, mediaDurationInSeconds, playbackRate, trimAfter, trimBefore, }: {
+    loop: boolean;
+    mediaDurationInSeconds: number | null;
+    trimAfter: number | undefined;
+    trimBefore: number | undefined;
+    playbackRate: number;
+}) => _InternalTypes["LoopDisplay"] | undefined;

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

@@ -0,0 +1,19 @@
+import type { _InternalTypes } from 'remotion';
+import { type VolumeProp } from 'remotion';
+export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, trimBefore, trimAfter, }: {
+    volume: VolumeProp | undefined;
+    mediaVolume: number;
+    src: string | undefined;
+    mediaType: "audio" | "video";
+    playbackRate: number;
+    displayName: string | null;
+    stack: string | null;
+    showInTimeline: boolean;
+    premountDisplay: number | null;
+    postmountDisplay: number | null;
+    loopDisplay: _InternalTypes["LoopDisplay"] | undefined;
+    trimBefore: number | undefined;
+    trimAfter: number | 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/media-player.d.ts

@@ -2,6 +2,7 @@ import type { LogLevel } from 'remotion';
 export declare const SEEK_THRESHOLD = 0.05;
 export type MediaPlayerInitResult = {
     type: 'success';
+    durationInSeconds: number;
 } | {
     type: 'unknown-container-format';
 } | {
@@ -25,13 +26,15 @@ export declare class MediaPlayer {
     private audioBufferIterator;
     private queuedAudioNodes;
     private gainNode;
+    private currentVolume;
     private sharedAudioContext;
     private audioSyncAnchor;
     private playing;
     private muted;
     private loop;
-    private trimBeforeSeconds;
-    private trimAfterSeconds;
+    private fps;
+    private trimBefore;
+    private trimAfter;
     private animationFrameId;
     private videoAsyncId;
     private audioAsyncId;
@@ -43,22 +46,24 @@ export declare class MediaPlayer {
     private audioIteratorStarted;
     private readonly HEALTHY_BUFER_THRESHOLD_SECONDS;
     private onVideoFrameCallback?;
-    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBeforeSeconds, trimAfterSeconds, playbackRate, audioStreamIndex, }: {
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, audioStreamIndex, fps, }: {
         canvas: HTMLCanvasElement | null;
         src: string;
         logLevel: LogLevel;
         sharedAudioContext: AudioContext;
         loop: boolean;
-        trimBeforeSeconds: number | undefined;
-        trimAfterSeconds: number | undefined;
+        trimBefore: number | undefined;
+        trimAfter: number | undefined;
         playbackRate: number;
         audioStreamIndex: number;
+        fps: number;
     });
     private input;
     private isReady;
     private hasAudio;
     private isCurrentlyBuffering;
     initialize(startTimeUnresolved: number): Promise<MediaPlayerInitResult>;
+    private clearCanvas;
     private cleanupAudioQueue;
     private cleanAudioIteratorAndNodes;
     seekTo(time: number): Promise<void>;
@@ -67,6 +72,7 @@ export declare class MediaPlayer {
     setMuted(muted: boolean): void;
     setVolume(volume: number): void;
     setPlaybackRate(rate: number): void;
+    setFps(fps: number): void;
     setLoop(loop: boolean): void;
     dispose(): void;
     private getPlaybackTime;

package/dist/video/media-player.js

@@ -1,12 +1,12 @@
 import { ALL_FORMATS, AudioBufferSink, CanvasSink, Input, UrlSource, } from 'mediabunny';
 import { Internals } from 'remotion';
+import { getTimeInSeconds } from '../get-time-in-seconds';
 import { isNetworkError } from '../is-network-error';
-import { resolvePlaybackTime } from './resolve-playback-time';
 import { sleep, withTimeout } from './timeout-utils';
 export const SEEK_THRESHOLD = 0.05;
 const AUDIO_BUFFER_TOLERANCE_THRESHOLD = 0.1;
 export class MediaPlayer {
-    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBeforeSeconds, trimAfterSeconds, playbackRate, audioStreamIndex, }) {
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, audioStreamIndex, fps, }) {
         this.canvasSink = null;
         this.videoFrameIterator = null;
         this.nextFrame = null;
@@ -14,7 +14,9 @@ export class MediaPlayer {
         this.audioBufferIterator = null;
         this.queuedAudioNodes = new Set();
         this.gainNode = null;
-        // audioDelay = mediaTimestamp + audioSyncAnchor - sharedAudioContext.currentTime
+        this.currentVolume = 1;
+        // this is the time difference between Web Audio timeline
+        // and media file timeline
         this.audioSyncAnchor = 0;
         this.playing = false;
         this.muted = false;
@@ -100,7 +102,11 @@ export class MediaPlayer {
                     if (!newNextFrame) {
                         break;
                     }
-                    if (newNextFrame.timestamp <= this.getPlaybackTime()) {
+                    const playbackTime = this.getPlaybackTime();
+                    if (playbackTime === null) {
+                        continue;
+                    }
+                    if (newNextFrame.timestamp <= playbackTime) {
                         continue;
                     }
                     else {
@@ -144,7 +150,7 @@ export class MediaPlayer {
                     totalBufferDuration += duration;
                     this.audioBufferHealth = Math.max(0, totalBufferDuration / this.playbackRate);
                     this.maybeResumeFromBuffering(totalBufferDuration / this.playbackRate);
-                    if (this.playing && !this.muted) {
+                    if (this.playing) {
                         if (isFirstBuffer) {
                             this.audioSyncAnchor =
                                 this.sharedAudioContext.currentTime - timestamp;
@@ -157,10 +163,16 @@ export class MediaPlayer {
                         }
                         this.scheduleAudioChunk(buffer, timestamp);
                     }
-                    if (timestamp - this.getPlaybackTime() >= 1) {
+                    const playbackTime = this.getPlaybackTime();
+                    if (playbackTime === null) {
+                        continue;
+                    }
+                    if (timestamp - playbackTime >= 1) {
                         await new Promise((resolve) => {
                             const check = () => {
-                                if (timestamp - this.getPlaybackTime() < 1) {
+                                const currentPlaybackTime = this.getPlaybackTime();
+                                if (currentPlaybackTime !== null &&
+                                    timestamp - currentPlaybackTime < 1) {
                                     resolve();
                                 }
                                 else {
@@ -182,12 +194,13 @@ export class MediaPlayer {
         this.sharedAudioContext = sharedAudioContext;
         this.playbackRate = playbackRate;
         this.loop = loop;
-        this.trimBeforeSeconds = trimBeforeSeconds;
-        this.trimAfterSeconds = trimAfterSeconds;
+        this.trimBefore = trimBefore;
+        this.trimAfter = trimAfter;
         this.audioStreamIndex = audioStreamIndex ?? 0;
+        this.fps = fps;
         if (canvas) {
             const context = canvas.getContext('2d', {
-                alpha: false,
+                alpha: true,
                 desynchronized: true,
             });
             if (!context) {
@@ -227,12 +240,12 @@ export class MediaPlayer {
                 Internals.Log.error({ logLevel: this.logLevel, tag: '@remotion/media' }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
                 return { type: 'unknown-container-format' };
             }
-            const [duration, videoTrack, audioTracks] = await Promise.all([
+            const [durationInSeconds, videoTrack, audioTracks] = await Promise.all([
                 input.computeDuration(),
                 input.getPrimaryVideoTrack(),
                 input.getAudioTracks(),
             ]);
-            this.totalDuration = duration;
+            this.totalDuration = durationInSeconds;
             const audioTrack = audioTracks[this.audioStreamIndex] ?? null;
             if (!videoTrack && !audioTrack) {
                 return { type: 'no-tracks' };
@@ -245,6 +258,7 @@ export class MediaPlayer {
                 this.canvasSink = new CanvasSink(videoTrack, {
                     poolSize: 2,
                     fit: 'contain',
+                    alpha: true,
                 });
                 this.canvas.width = videoTrack.displayWidth;
                 this.canvas.height = videoTrack.displayHeight;
@@ -254,14 +268,21 @@ export class MediaPlayer {
                 this.gainNode = this.sharedAudioContext.createGain();
                 this.gainNode.connect(this.sharedAudioContext.destination);
             }
-            const startTime = resolvePlaybackTime({
-                absolutePlaybackTimeInSeconds: startTimeUnresolved,
+            const startTime = getTimeInSeconds({
+                unloopedTimeInSeconds: startTimeUnresolved,
                 playbackRate: this.playbackRate,
                 loop: this.loop,
-                trimBeforeInSeconds: this.trimBeforeSeconds,
-                trimAfterInSeconds: this.trimAfterSeconds,
+                trimBefore: this.trimBefore,
+                trimAfter: this.trimAfter,
                 mediaDurationInSeconds: this.totalDuration,
+                fps: this.fps,
+                ifNoMediaDuration: 'infinity',
+                src: this.src,
             });
+            if (startTime === null) {
+                this.clearCanvas();
+                return { type: 'success', durationInSeconds: this.totalDuration };
+            }
             if (this.sharedAudioContext) {
                 this.audioSyncAnchor = this.sharedAudioContext.currentTime - startTime;
             }
@@ -271,7 +292,7 @@ export class MediaPlayer {
                 this.startVideoIterator(startTime),
             ]);
             this.startRenderLoop();
-            return { type: 'success' };
+            return { type: 'success', durationInSeconds };
         }
         catch (error) {
             const err = error;
@@ -283,6 +304,11 @@ export class MediaPlayer {
             throw error;
         }
     }
+    clearCanvas() {
+        if (this.context && this.canvas) {
+            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        }
+    }
     cleanupAudioQueue() {
         for (const node of this.queuedAudioNodes) {
             node.stop();
@@ -299,16 +325,25 @@ export class MediaPlayer {
     async seekTo(time) {
         if (!this.isReady())
             return;
-        const newTime = resolvePlaybackTime({
-            absolutePlaybackTimeInSeconds: time,
+        const newTime = getTimeInSeconds({
+            unloopedTimeInSeconds: time,
             playbackRate: this.playbackRate,
             loop: this.loop,
-            trimBeforeInSeconds: this.trimBeforeSeconds,
-            trimAfterInSeconds: this.trimAfterSeconds,
-            mediaDurationInSeconds: this.totalDuration,
+            trimBefore: this.trimBefore,
+            trimAfter: this.trimAfter,
+            mediaDurationInSeconds: this.totalDuration ?? null,
+            fps: this.fps,
+            ifNoMediaDuration: 'infinity',
+            src: this.src,
         });
+        if (newTime === null) {
+            this.clearCanvas();
+            await this.cleanAudioIteratorAndNodes();
+            return;
+        }
         const currentPlaybackTime = this.getPlaybackTime();
-        const isSignificantSeek = Math.abs(newTime - currentPlaybackTime) > SEEK_THRESHOLD;
+        const isSignificantSeek = currentPlaybackTime === null ||
+            Math.abs(newTime - currentPlaybackTime) > SEEK_THRESHOLD;
         if (isSignificantSeek) {
             this.nextFrame = null;
             this.audioSyncAnchor = this.sharedAudioContext.currentTime - newTime;
@@ -342,8 +377,8 @@ export class MediaPlayer {
     }
     setMuted(muted) {
         this.muted = muted;
-        if (muted) {
-            this.cleanupAudioQueue();
+        if (this.gainNode) {
+            this.gainNode.gain.value = muted ? 0 : this.currentVolume;
         }
     }
     setVolume(volume) {
@@ -351,11 +386,17 @@ export class MediaPlayer {
             return;
         }
         const appliedVolume = Math.max(0, volume);
-        this.gainNode.gain.value = appliedVolume;
+        this.currentVolume = appliedVolume;
+        if (!this.muted) {
+            this.gainNode.gain.value = appliedVolume;
+        }
     }
     setPlaybackRate(rate) {
         this.playbackRate = rate;
     }
+    setFps(fps) {
+        this.fps = fps;
+    }
     setLoop(loop) {
         this.loop = loop;
     }
@@ -367,15 +408,7 @@ export class MediaPlayer {
         this.videoAsyncId++;
     }
     getPlaybackTime() {
-        const absoluteTime = this.sharedAudioContext.currentTime - this.audioSyncAnchor;
-        return resolvePlaybackTime({
-            absolutePlaybackTimeInSeconds: absoluteTime,
-            playbackRate: this.playbackRate,
-            loop: this.loop,
-            trimBeforeInSeconds: this.trimBeforeSeconds,
-            trimAfterInSeconds: this.trimAfterSeconds,
-            mediaDurationInSeconds: this.totalDuration,
-        });
+        return this.sharedAudioContext.currentTime - this.audioSyncAnchor;
     }
     scheduleAudioChunk(buffer, mediaTimestamp) {
         const targetTime = mediaTimestamp + this.audioSyncAnchor;
@@ -430,13 +463,18 @@ export class MediaPlayer {
         }
     }
     shouldRenderFrame() {
+        const playbackTime = this.getPlaybackTime();
+        if (playbackTime === null) {
+            return false;
+        }
         return (!this.isBuffering &&
             this.canRenderVideo() &&
             this.nextFrame !== null &&
-            this.nextFrame.timestamp <= this.getPlaybackTime());
+            this.nextFrame.timestamp <= playbackTime);
     }
     drawCurrentFrame() {
         if (this.context && this.nextFrame) {
+            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
             this.context.drawImage(this.nextFrame.canvas, 0, 0);
         }
         if (this.onVideoFrameCallback && this.canvas) {

package/dist/video/video-for-preview.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
-import type { LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
+import type { LogLevel, LoopVolumeCurveBehavior, VolumeProp } from 'remotion';
 import type { FallbackOffthreadVideoProps } from './props';
-type InnerVideoProps = {
-    readonly className: string | undefined;
-    readonly loop: boolean;
+type NewVideoForPreviewProps = {
     readonly src: string;
+    readonly style: React.CSSProperties | undefined;
+    readonly playbackRate: number;
     readonly logLevel: LogLevel;
+    readonly className: string | undefined;
     readonly muted: boolean;
-    readonly name: string | undefined;
     readonly volume: VolumeProp;
     readonly loopVolumeCurveBehavior: LoopVolumeCurveBehavior;
-    readonly onVideoFrame: OnVideoFrame | undefined;
-    readonly playbackRate: number;
-    readonly style: React.CSSProperties;
+    readonly onVideoFrame: undefined | ((frame: CanvasImageSource) => void);
     readonly showInTimeline: boolean;
+    readonly loop: boolean;
+    readonly name: string | undefined;
     readonly trimAfter: number | undefined;
     readonly trimBefore: number | undefined;
     readonly stack: string | null;
@@ -21,5 +21,5 @@ type InnerVideoProps = {
     readonly fallbackOffthreadVideoProps: FallbackOffthreadVideoProps;
     readonly audioStreamIndex: number;
 };
-export declare const VideoForPreview: React.FC<InnerVideoProps>;
+export declare const VideoForPreview: React.FC<NewVideoForPreviewProps>;
 export {};