@remotion/media 4.0.356 → 4.0.358

package/dist/extract-frame-and-audio.d.ts

@@ -1,6 +1,6 @@
 import type { LogLevel } from 'remotion';
-import type { PcmS16AudioData } from './convert-audiodata/convert-audiodata';
-export declare const extractFrameAndAudio: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, audioStreamIndex, }: {
+import type { ExtractFrameViaBroadcastChannelResult } from './video-extraction/extract-frame-via-broadcast-channel';
+export declare const extractFrameAndAudio: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, audioStreamIndex, trimAfter, trimBefore, fps, }: {
     src: string;
     timeInSeconds: number;
     logLevel: LogLevel;
@@ -10,8 +10,7 @@ export declare const extractFrameAndAudio: ({ src, timeInSeconds, logLevel, dura
     includeVideo: boolean;
     loop: boolean;
     audioStreamIndex: number;
-}) => Promise<{
-    frame: VideoFrame | null;
-    audio: PcmS16AudioData | null;
-    durationInSeconds: number | null;
-} | "cannot-decode" | "unknown-container-format" | "network-error">;
+    trimAfter: number | undefined;
+    trimBefore: number | undefined;
+    fps: number;
+}) => Promise<ExtractFrameViaBroadcastChannelResult>;

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

@@ -1,6 +1,7 @@
 import { extractAudio } from './audio-extraction/extract-audio';
+import { isNetworkError } from './is-network-error';
 import { extractFrame } from './video-extraction/extract-frame';
-export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, audioStreamIndex, }) => {
+export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, audioStreamIndex, trimAfter, trimBefore, fps, }) => {
     try {
         const [frame, audio] = await Promise.all([
             includeVideo
@@ -9,6 +10,10 @@ export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durat
                     timeInSeconds,
                     logLevel,
                     loop,
+                    trimAfter,
+                    playbackRate,
+                    trimBefore,
+                    fps,
                 })
                 : null,
             includeAudio
@@ -20,43 +25,47 @@ export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durat
                     loop,
                     playbackRate,
                     audioStreamIndex,
+                    trimAfter,
+                    fps,
+                    trimBefore,
                 })
                 : null,
         ]);
-        if (frame === 'cannot-decode') {
-            return 'cannot-decode';
+        if (frame?.type === 'cannot-decode') {
+            return {
+                type: 'cannot-decode',
+                durationInSeconds: frame.durationInSeconds,
+            };
         }
-        if (frame === 'unknown-container-format') {
-            return 'unknown-container-format';
+        if (frame?.type === 'unknown-container-format') {
+            return { type: 'unknown-container-format' };
         }
         if (audio === 'unknown-container-format') {
             if (frame !== null) {
-                frame?.close();
+                frame?.frame?.close();
             }
-            return 'unknown-container-format';
+            return { type: 'unknown-container-format' };
         }
         if (audio === 'cannot-decode') {
-            if (frame !== null) {
-                frame?.close();
+            if (frame?.type === 'success' && frame.frame !== null) {
+                frame?.frame.close();
             }
-            return 'cannot-decode';
+            return {
+                type: 'cannot-decode',
+                durationInSeconds: frame?.type === 'success' ? frame.durationInSeconds : null,
+            };
         }
         return {
-            frame: frame?.toVideoFrame() ?? null,
+            type: 'success',
+            frame: frame?.frame?.toVideoFrame() ?? null,
             audio: audio?.data ?? null,
             durationInSeconds: audio?.durationInSeconds ?? null,
         };
     }
     catch (err) {
         const error = err;
-        if (
-        // Chrome
-        error.message.includes('Failed to fetch') ||
-            // Safari
-            error.message.includes('Load failed') ||
-            // Firefox
-            error.message.includes('NetworkError when attempting to fetch resource')) {
-            return 'network-error';
+        if (isNetworkError(error)) {
+            return { type: 'network-error' };
         }
         throw err;
     }

package/dist/{get-sink-weak.d.ts → get-sink.d.ts}

@@ -1,7 +1,7 @@
 import type { LogLevel } from 'remotion';
 import type { GetSink } from './video-extraction/get-frames-since-keyframe';
 export declare const sinkPromises: Record<string, Promise<GetSink>>;
-export declare const getSinkWeak: (src: string, logLevel: LogLevel) => Promise<{
+export declare const getSink: (src: string, logLevel: LogLevel) => Promise<{
     getVideo: () => Promise<import("./video-extraction/get-frames-since-keyframe").VideoSinkResult>;
     getAudio: (index: number) => Promise<import("./video-extraction/get-frames-since-keyframe").AudioSinkResult>;
     actualMatroskaTimestamps: {

package/dist/get-sink.js

@@ -0,0 +1,15 @@
+import { Internals } from 'remotion';
+import { getSinks } from './video-extraction/get-frames-since-keyframe';
+export const sinkPromises = {};
+export const getSink = (src, logLevel) => {
+    let promise = sinkPromises[src];
+    if (!promise) {
+        Internals.Log.verbose({
+            logLevel,
+            tag: '@remotion/media',
+        }, `Sink for ${src} was not found, creating new sink`);
+        promise = getSinks(src);
+        sinkPromises[src] = promise;
+    }
+    return promise;
+};

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

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

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

@@ -0,0 +1,25 @@
+import { Internals } from 'remotion';
+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.calculateMediaDuration({
+            trimAfter,
+            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 && !loop) {
+        const time = (trimAfter - (trimBefore ?? 0)) / fps;
+        if (timeInSeconds >= time) {
+            return null;
+        }
+    }
+    return timeInSeconds + (trimBefore ?? 0) / fps;
+};

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export declare const experimental_Audio: import("react").FC<import(".").AudioPro
  * @deprecated Now just `Video`
  */
 export declare const experimental_Video: import("react").FC<import(".").VideoProps>;
+export { AudioForPreview } from './audio/audio-for-preview';
 export { AudioProps, FallbackHtml5AudioProps } from './audio/props';
 export { VideoProps } from './video/props';
 export { Audio, Video };

package/dist/index.js

@@ -8,4 +8,5 @@ export const experimental_Audio = Audio;
  * @deprecated Now just `Video`
  */
 export const experimental_Video = Video;
+export { AudioForPreview } from './audio/audio-for-preview';
 export { Audio, Video };

package/dist/is-network-error.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Utility to check if error is network error
+ * @param error
+ * @returns
+ */
+export declare function isNetworkError(error: Error): boolean;

package/dist/is-network-error.js

@@ -0,0 +1,17 @@
+/**
+ * Utility to check if error is network error
+ * @param error
+ * @returns
+ */
+export function isNetworkError(error) {
+    if (
+    // Chrome
+    error.message.includes('Failed to fetch') ||
+        // Safari
+        error.message.includes('Load failed') ||
+        // Firefox
+        error.message.includes('NetworkError when attempting to fetch resource')) {
+        return true;
+    }
+    return false;
+}

package/dist/render-timestamp-range.d.ts

@@ -0,0 +1 @@
+export declare const renderTimestampRange: (timestamps: number[]) => string;

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.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

@@ -1,11 +1,24 @@
 import type { LogLevel } from 'remotion';
 export declare const SEEK_THRESHOLD = 0.05;
+export type MediaPlayerInitResult = {
+    type: 'success';
+    durationInSeconds: number;
+} | {
+    type: 'unknown-container-format';
+} | {
+    type: 'cannot-decode';
+} | {
+    type: 'network-error';
+} | {
+    type: 'no-tracks';
+};
 export declare class MediaPlayer {
     private canvas;
     private context;
     private src;
     private logLevel;
     private playbackRate;
+    private audioStreamIndex;
     private canvasSink;
     private videoFrameIterator;
     private nextFrame;
@@ -13,12 +26,18 @@ export declare class MediaPlayer {
     private audioBufferIterator;
     private queuedAudioNodes;
     private gainNode;
+    private currentVolume;
     private sharedAudioContext;
     private audioSyncAnchor;
     private playing;
     private muted;
+    private loop;
+    private fps;
+    private trimBefore;
+    private trimAfter;
     private animationFrameId;
     private videoAsyncId;
+    private audioAsyncId;
     private initialized;
     private totalDuration;
     private isBuffering;
@@ -27,17 +46,24 @@ export declare class MediaPlayer {
     private audioIteratorStarted;
     private readonly HEALTHY_BUFER_THRESHOLD_SECONDS;
     private onVideoFrameCallback?;
-    constructor({ canvas, src, logLevel, sharedAudioContext, }: {
-        canvas: HTMLCanvasElement;
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, audioStreamIndex, fps, }: {
+        canvas: HTMLCanvasElement | null;
         src: string;
         logLevel: LogLevel;
         sharedAudioContext: AudioContext;
+        loop: boolean;
+        trimBefore: number | undefined;
+        trimAfter: number | undefined;
+        playbackRate: number;
+        audioStreamIndex: number;
+        fps: number;
     });
     private input;
     private isReady;
     private hasAudio;
     private isCurrentlyBuffering;
-    initialize(startTime?: number): Promise<void>;
+    initialize(startTimeUnresolved: number): Promise<MediaPlayerInitResult>;
+    private clearCanvas;
     private cleanupAudioQueue;
     private cleanAudioIteratorAndNodes;
     seekTo(time: number): Promise<void>;
@@ -45,13 +71,14 @@ export declare class MediaPlayer {
     pause(): void;
     setMuted(muted: boolean): void;
     setVolume(volume: number): void;
-    setPlaybackRate(rate: number): Promise<void>;
+    setPlaybackRate(rate: number): void;
+    setFps(fps: number): void;
+    setLoop(loop: boolean): void;
     dispose(): void;
     private getPlaybackTime;
-    private getAdjustedTimestamp;
     private scheduleAudioChunk;
-    onBufferingChange(callback: (isBuffering: boolean) => void): void;
-    onVideoFrame(callback: (frame: CanvasImageSource) => void): void;
+    onBufferingChange(callback: (isBuffering: boolean) => void): () => void;
+    onVideoFrame(callback: (frame: CanvasImageSource) => void): () => void;
     private canRenderVideo;
     private startRenderLoop;
     private stopRenderLoop;