@remotion/media 4.0.391 → 4.0.392

package/dist/get-frames-since-keyframe.d.ts

@@ -0,0 +1,22 @@
+import type { EncodedPacket } from 'mediabunny';
+import { AudioSampleSink, EncodedPacketSink, VideoSampleSink } from 'mediabunny';
+export declare const getSinks: (src: string) => Promise<{
+    video: {
+        sampleSink: VideoSampleSink;
+        packetSink: EncodedPacketSink;
+    };
+    audio: {
+        sampleSink: AudioSampleSink;
+    } | null;
+    actualMatroskaTimestamps: {
+        observeTimestamp: (startTime: number) => void;
+        getRealTimestamp: (observedTimestamp: number) => number | null;
+    };
+    isMatroska: boolean;
+}>;
+export type GetSink = Awaited<ReturnType<typeof getSinks>>;
+export declare const getFramesSinceKeyframe: ({ packetSink, videoSampleSink, startPacket, }: {
+    packetSink: EncodedPacketSink;
+    videoSampleSink: VideoSampleSink;
+    startPacket: EncodedPacket;
+}) => Promise<any>;

package/dist/get-frames-since-keyframe.js

@@ -0,0 +1,41 @@
+import { ALL_FORMATS, AudioSampleSink, EncodedPacketSink, Input, MATROSKA, UrlSource, VideoSampleSink, } from 'mediabunny';
+import { makeKeyframeBank } from './keyframe-bank';
+import { rememberActualMatroskaTimestamps } from './remember-actual-matroska-timestamps';
+export const getSinks = async (src) => {
+    const input = new Input({
+        formats: ALL_FORMATS,
+        source: new UrlSource(src),
+    });
+    const format = await input.getFormat();
+    const videoTrack = await input.getPrimaryVideoTrack();
+    if (!videoTrack) {
+        throw new Error(`No video track found for ${src}`);
+    }
+    const audioTrack = await input.getPrimaryAudioTrack();
+    const isMatroska = format === MATROSKA;
+    return {
+        video: {
+            sampleSink: new VideoSampleSink(videoTrack),
+            packetSink: new EncodedPacketSink(videoTrack),
+        },
+        audio: audioTrack
+            ? {
+                sampleSink: new AudioSampleSink(audioTrack),
+            }
+            : null,
+        actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
+        isMatroska,
+    };
+};
+export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, startPacket, }) => {
+    const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
+        verifyKeyPackets: false,
+    });
+    const sampleIterator = videoSampleSink.samples(startPacket.timestamp, nextKeyPacket ? nextKeyPacket.timestamp : Infinity);
+    const keyframeBank = makeKeyframeBank({
+        startTimestampInSeconds: startPacket.timestamp,
+        endTimestampInSeconds: nextKeyPacket ? nextKeyPacket.timestamp : Infinity,
+        sampleIterator,
+    });
+    return keyframeBank;
+};

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/keyframe-bank.d.ts

@@ -0,0 +1,25 @@
+import type { VideoSample } from 'mediabunny';
+import type { LogLevel } from './log';
+export type KeyframeBank = {
+    startTimestampInSeconds: number;
+    endTimestampInSeconds: number;
+    getFrameFromTimestamp: (timestamp: number) => Promise<VideoSample | null>;
+    prepareForDeletion: () => Promise<void>;
+    deleteFramesBeforeTimestamp: ({ logLevel, src, timestampInSeconds, }: {
+        timestampInSeconds: number;
+        logLevel: LogLevel;
+        src: string;
+    }) => void;
+    hasTimestampInSecond: (timestamp: number) => Promise<boolean>;
+    addFrame: (frame: VideoSample) => void;
+    getOpenFrameCount: () => {
+        size: number;
+        timestamps: number[];
+    };
+    getLastUsed: () => number;
+};
+export declare const makeKeyframeBank: ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, }: {
+    startTimestampInSeconds: number;
+    endTimestampInSeconds: number;
+    sampleIterator: AsyncGenerator<VideoSample, void, unknown>;
+}) => KeyframeBank;

package/dist/keyframe-bank.js

@@ -0,0 +1,120 @@
+import { Log } from './log';
+// Round to only 4 digits, because WebM has a timescale of 1_000, e.g. framer.webm
+const roundTo4Digits = (timestamp) => {
+    return Math.round(timestamp * 1000) / 1000;
+};
+export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, }) => {
+    const frames = {};
+    const frameTimestamps = [];
+    let lastUsed = Date.now();
+    let alloctionSize = 0;
+    const hasDecodedEnoughForTimestamp = (timestamp) => {
+        const lastFrameTimestamp = frameTimestamps[frameTimestamps.length - 1];
+        if (!lastFrameTimestamp) {
+            return false;
+        }
+        const lastFrame = frames[lastFrameTimestamp];
+        // Don't decode more, will probably have to re-decode everything
+        if (!lastFrame) {
+            return true;
+        }
+        return (roundTo4Digits(lastFrame.timestamp + lastFrame.duration) >
+            roundTo4Digits(timestamp));
+    };
+    const addFrame = (frame) => {
+        frames[frame.timestamp] = frame;
+        frameTimestamps.push(frame.timestamp);
+        alloctionSize += frame.allocationSize();
+        lastUsed = Date.now();
+    };
+    const ensureEnoughFramesForTimestamp = async (timestamp) => {
+        while (!hasDecodedEnoughForTimestamp(timestamp)) {
+            const sample = await sampleIterator.next();
+            if (sample.value) {
+                addFrame(sample.value);
+            }
+            if (sample.done) {
+                break;
+            }
+        }
+        lastUsed = Date.now();
+    };
+    const getFrameFromTimestamp = async (timestampInSeconds) => {
+        lastUsed = Date.now();
+        if (timestampInSeconds < startTimestampInSeconds) {
+            return Promise.reject(new Error(`Timestamp is before start timestamp (requested: ${timestampInSeconds}sec, start: ${startTimestampInSeconds})`));
+        }
+        if (timestampInSeconds > endTimestampInSeconds) {
+            return Promise.reject(new Error(`Timestamp is after end timestamp (requested: ${timestampInSeconds}sec, end: ${endTimestampInSeconds})`));
+        }
+        await ensureEnoughFramesForTimestamp(timestampInSeconds);
+        for (let i = frameTimestamps.length - 1; i >= 0; i--) {
+            const sample = frames[frameTimestamps[i]];
+            if (!sample) {
+                return null;
+            }
+            if (roundTo4Digits(sample.timestamp) <= roundTo4Digits(timestampInSeconds)) {
+                return sample;
+            }
+        }
+        throw new Error('No frame found for timestamp ' + timestampInSeconds);
+    };
+    const hasTimestampInSecond = async (timestamp) => {
+        return (await getFrameFromTimestamp(timestamp)) !== null;
+    };
+    const prepareForDeletion = async () => {
+        // Cleanup frames that have been extracted that might not have been retrieved yet
+        const { value } = await sampleIterator.return();
+        if (value) {
+            value.close();
+        }
+        for (const frameTimestamp of frameTimestamps) {
+            if (!frames[frameTimestamp]) {
+                continue;
+            }
+            alloctionSize -= frames[frameTimestamp].allocationSize();
+            frames[frameTimestamp].close();
+            delete frames[frameTimestamp];
+        }
+        frameTimestamps.length = 0;
+    };
+    const deleteFramesBeforeTimestamp = ({ logLevel, src, timestampInSeconds, }) => {
+        for (const frameTimestamp of frameTimestamps) {
+            const isLast = frameTimestamp === frameTimestamps[frameTimestamps.length - 1];
+            // Don't delete the last frame, since it may be the last one in the video!
+            if (isLast) {
+                continue;
+            }
+            if (frameTimestamp < timestampInSeconds) {
+                if (!frames[frameTimestamp]) {
+                    continue;
+                }
+                alloctionSize -= frames[frameTimestamp].allocationSize();
+                frames[frameTimestamp].close();
+                delete frames[frameTimestamp];
+                Log.verbose(logLevel, `[Video] Deleted frame ${frameTimestamp} for src ${src}`);
+            }
+        }
+    };
+    const getOpenFrameCount = () => {
+        return {
+            size: alloctionSize,
+            timestamps: frameTimestamps,
+        };
+    };
+    const getLastUsed = () => {
+        return lastUsed;
+    };
+    const keyframeBank = {
+        startTimestampInSeconds,
+        endTimestampInSeconds,
+        getFrameFromTimestamp,
+        prepareForDeletion,
+        hasTimestampInSecond,
+        addFrame,
+        deleteFramesBeforeTimestamp,
+        getOpenFrameCount,
+        getLastUsed,
+    };
+    return keyframeBank;
+};

package/dist/keyframe-manager.d.ts

@@ -0,0 +1,23 @@
+import type { EncodedPacketSink, VideoSampleSink } from 'mediabunny';
+import { type KeyframeBank } from './keyframe-bank';
+import type { LogLevel } from './log';
+export declare const makeKeyframeManager: () => {
+    requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, }: {
+        timestamp: number;
+        packetSink: EncodedPacketSink;
+        videoSampleSink: VideoSampleSink;
+        src: string;
+        logLevel: LogLevel;
+    }) => Promise<KeyframeBank>;
+    addKeyframeBank: ({ src, bank, startTimestampInSeconds, }: {
+        src: string;
+        bank: Promise<KeyframeBank>;
+        startTimestampInSeconds: number;
+    }) => void;
+    getCacheStats: () => Promise<{
+        count: number;
+        totalSize: number;
+    }>;
+    clearAll: () => Promise<void>;
+};
+export type KeyframeManager = Awaited<ReturnType<typeof makeKeyframeManager>>;

package/dist/keyframe-manager.js

@@ -0,0 +1,170 @@
+import { getFramesSinceKeyframe } from './get-frames-since-keyframe';
+import { Log } from './log';
+const MAX_CACHE_SIZE = 1000 * 1000 * 1000; // 1GB
+export const makeKeyframeManager = () => {
+    // src => {[startTimestampInSeconds]: KeyframeBank
+    const sources = {};
+    const addKeyframeBank = ({ src, bank, startTimestampInSeconds, }) => {
+        sources[src] = sources[src] ?? {};
+        sources[src][startTimestampInSeconds] = bank;
+    };
+    const logCacheStats = async (logLevel) => {
+        let count = 0;
+        let totalSize = 0;
+        for (const src in sources) {
+            for (const bank in sources[src]) {
+                const v = await sources[src][bank];
+                const { size, timestamps } = v.getOpenFrameCount();
+                count += timestamps.length;
+                totalSize += size;
+                if (size === 0) {
+                    continue;
+                }
+                Log.verbose(logLevel, `[Video] Open frames for src ${src}: ${timestamps.join(', ')}}`);
+            }
+        }
+        Log.verbose(logLevel, `[Video] Cache stats: ${count} open frames, ${totalSize} bytes`);
+    };
+    const getCacheStats = async () => {
+        let count = 0;
+        let totalSize = 0;
+        for (const src in sources) {
+            for (const bank in sources[src]) {
+                const v = await sources[src][bank];
+                const { timestamps, size } = v.getOpenFrameCount();
+                count += timestamps.length;
+                totalSize += size;
+                if (size === 0) {
+                    continue;
+                }
+            }
+        }
+        return { count, totalSize };
+    };
+    const getTheKeyframeBankMostInThePast = async () => {
+        let mostInThePast = null;
+        let mostInThePastBank = null;
+        for (const src in sources) {
+            for (const b in sources[src]) {
+                const bank = await sources[src][b];
+                const lastUsed = bank.getLastUsed();
+                if (mostInThePast === null || lastUsed < mostInThePast) {
+                    mostInThePast = lastUsed;
+                    mostInThePastBank = { src, bank };
+                }
+            }
+        }
+        if (!mostInThePastBank) {
+            throw new Error('No keyframe bank found');
+        }
+        return mostInThePastBank;
+    };
+    const ensureToStayUnderMaxCacheSize = async (logLevel) => {
+        let cacheStats = await getCacheStats();
+        while (cacheStats.totalSize > MAX_CACHE_SIZE) {
+            const { bank: mostInThePastBank, src: mostInThePastSrc } = await getTheKeyframeBankMostInThePast();
+            if (mostInThePastBank) {
+                await mostInThePastBank.prepareForDeletion();
+                delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
+                Log.verbose(logLevel, `[Video] Deleted frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
+            }
+            cacheStats = await getCacheStats();
+        }
+    };
+    const clearKeyframeBanksBeforeTime = async ({ timestampInSeconds, src, logLevel, }) => {
+        // TODO: make it dependent on the fps and concurrency
+        const SAFE_BACK_WINDOW_IN_SECONDS = 1;
+        const threshold = timestampInSeconds - SAFE_BACK_WINDOW_IN_SECONDS;
+        if (!sources[src]) {
+            return;
+        }
+        const banks = Object.keys(sources[src]);
+        for (const startTimeInSeconds of banks) {
+            const bank = await sources[src][startTimeInSeconds];
+            const { endTimestampInSeconds, startTimestampInSeconds } = bank;
+            if (endTimestampInSeconds < threshold) {
+                await bank.prepareForDeletion();
+                Log.verbose(logLevel, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+                delete sources[src][startTimeInSeconds];
+            }
+            else {
+                bank.deleteFramesBeforeTimestamp({
+                    timestampInSeconds: threshold,
+                    logLevel,
+                    src,
+                });
+            }
+        }
+        await logCacheStats(logLevel);
+    };
+    const getKeyframeBankOrRefetch = async ({ packetSink, timestamp, videoSampleSink, src, logLevel, }) => {
+        const startPacket = await packetSink.getKeyPacket(timestamp, {
+            verifyKeyPackets: true,
+        });
+        if (!startPacket) {
+            throw new Error(`No key packet found for timestamp ${timestamp}`);
+        }
+        const startTimestampInSeconds = startPacket.timestamp;
+        const existingBank = sources[src]?.[startTimestampInSeconds];
+        // Bank does not yet exist, we need to fetch
+        if (!existingBank) {
+            const newKeyframeBank = getFramesSinceKeyframe({
+                packetSink,
+                videoSampleSink,
+                startPacket,
+            });
+            addKeyframeBank({ src, bank: newKeyframeBank, startTimestampInSeconds });
+            return newKeyframeBank;
+        }
+        // Bank exists and still has the frame we want
+        if (await (await existingBank).hasTimestampInSecond(timestamp)) {
+            return existingBank;
+        }
+        Log.verbose(logLevel, `[Video] Bank exists but frames have already been evicted!`);
+        // Bank exists but frames have already been evicted!
+        // First delete it entirely
+        await (await existingBank).prepareForDeletion();
+        delete sources[src][startTimestampInSeconds];
+        // Then refetch
+        const replacementKeybank = getFramesSinceKeyframe({
+            packetSink,
+            videoSampleSink,
+            startPacket,
+        });
+        addKeyframeBank({ src, bank: replacementKeybank, startTimestampInSeconds });
+        return replacementKeybank;
+    };
+    const requestKeyframeBank = async ({ packetSink, timestamp, videoSampleSink, src, logLevel, }) => {
+        await ensureToStayUnderMaxCacheSize(logLevel);
+        await clearKeyframeBanksBeforeTime({
+            timestampInSeconds: timestamp,
+            src,
+            logLevel,
+        });
+        const keyframeBank = await getKeyframeBankOrRefetch({
+            packetSink,
+            timestamp,
+            videoSampleSink,
+            src,
+            logLevel,
+        });
+        return keyframeBank;
+    };
+    const clearAll = async () => {
+        const srcs = Object.keys(sources);
+        for (const src of srcs) {
+            const banks = Object.keys(sources[src]);
+            for (const startTimeInSeconds of banks) {
+                const bank = await sources[src][startTimeInSeconds];
+                await bank.prepareForDeletion();
+                delete sources[src][startTimeInSeconds];
+            }
+        }
+    };
+    return {
+        requestKeyframeBank,
+        addKeyframeBank,
+        getCacheStats,
+        clearAll,
+    };
+};

package/dist/log.d.ts

@@ -0,0 +1,10 @@
+export declare const logLevels: readonly ["trace", "verbose", "info", "warn", "error"];
+export type LogLevel = (typeof logLevels)[number];
+export declare const isEqualOrBelowLogLevel: (currentLevel: LogLevel, level: LogLevel) => boolean;
+export declare const Log: {
+    trace: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
+    verbose: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
+    info: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
+    warn: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
+    error: (message?: any, ...optionalParams: any[]) => void;
+};

package/dist/log.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-console */
+export const logLevels = ['trace', 'verbose', 'info', 'warn', 'error'];
+const getNumberForLogLevel = (level) => {
+    return logLevels.indexOf(level);
+};
+export const isEqualOrBelowLogLevel = (currentLevel, level) => {
+    return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
+};
+export const Log = {
+    trace: (logLevel, ...args) => {
+        if (isEqualOrBelowLogLevel(logLevel, 'trace')) {
+            return console.log(...args);
+        }
+    },
+    verbose: (logLevel, ...args) => {
+        if (isEqualOrBelowLogLevel(logLevel, 'verbose')) {
+            return console.log(...args);
+        }
+    },
+    info: (logLevel, ...args) => {
+        if (isEqualOrBelowLogLevel(logLevel, 'info')) {
+            return console.log(...args);
+        }
+    },
+    warn: (logLevel, ...args) => {
+        if (isEqualOrBelowLogLevel(logLevel, 'warn')) {
+            return console.warn(...args);
+        }
+    },
+    error: (...args) => {
+        return console.error(...args);
+    },
+};

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

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

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

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

package/dist/new-video.d.ts

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

package/dist/new-video.js

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

package/dist/props.d.ts

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

package/dist/props.js

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

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

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