@remotion/media 4.0.356 → 4.0.358

package/dist/video-extraction/extract-frame-via-broadcast-channel.js

@@ -15,16 +15,20 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
                     includeVideo: data.includeVideo,
                     loop: data.loop,
                     audioStreamIndex: data.audioStreamIndex,
+                    trimAfter: data.trimAfter,
+                    trimBefore: data.trimBefore,
+                    fps: data.fps,
                 });
-                if (result === 'cannot-decode') {
+                if (result.type === 'cannot-decode') {
                     const cannotDecodeResponse = {
                         type: 'response-cannot-decode',
                         id: data.id,
+                        durationInSeconds: result.durationInSeconds,
                     };
                     window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
                     return;
                 }
-                if (result === 'network-error') {
+                if (result.type === 'network-error') {
                     const networkErrorResponse = {
                         type: 'response-network-error',
                         id: data.id,
@@ -32,7 +36,7 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
                     window.remotion_broadcastChannel.postMessage(networkErrorResponse);
                     return;
                 }
-                if (result === 'unknown-container-format') {
+                if (result.type === 'unknown-container-format') {
                     const unknownContainerFormatResponse = {
                         type: 'response-unknown-container-format',
                         id: data.id,
@@ -72,7 +76,7 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
         }
     });
 }
-export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, }) => {
+export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, }) => {
     if (isClientSideRendering || window.remotion_isMainTab) {
         return extractFrameAndAudio({
             logLevel,
@@ -84,6 +88,9 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
             includeVideo,
             loop,
             audioStreamIndex,
+            trimAfter,
+            trimBefore,
+            fps,
         });
     }
     const requestId = crypto.randomUUID();
@@ -98,6 +105,7 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
             }
             if (data.type === 'response-success') {
                 resolve({
+                    type: 'success',
                     frame: data.frame ? data.frame : null,
                     audio: data.audio ? data.audio : null,
                     durationInSeconds: data.durationInSeconds
@@ -113,17 +121,20 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
                 return;
             }
             if (data.type === 'response-cannot-decode') {
-                resolve('cannot-decode');
+                resolve({
+                    type: 'cannot-decode',
+                    durationInSeconds: data.durationInSeconds,
+                });
                 window.remotion_broadcastChannel.removeEventListener('message', onMessage);
                 return;
             }
             if (data.type === 'response-network-error') {
-                resolve('network-error');
+                resolve({ type: 'network-error' });
                 window.remotion_broadcastChannel.removeEventListener('message', onMessage);
                 return;
             }
             if (data.type === 'response-unknown-container-format') {
-                resolve('unknown-container-format');
+                resolve({ type: 'unknown-container-format' });
                 window.remotion_broadcastChannel.removeEventListener('message', onMessage);
                 return;
             }
@@ -143,6 +154,9 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
         includeVideo,
         loop,
         audioStreamIndex,
+        trimAfter,
+        trimBefore,
+        fps,
     };
     window.remotion_broadcastChannel.postMessage(request);
     let timeoutId;

package/dist/video-extraction/extract-frame.d.ts

@@ -1,8 +1,26 @@
 import type { VideoSample } from 'mediabunny';
 import { type LogLevel } from 'remotion';
-export declare const extractFrame: ({ src, timeInSeconds: unloopedTimeinSeconds, logLevel, loop, }: {
+type ExtractFrameResult = {
+    type: 'success';
+    frame: VideoSample | null;
+    durationInSeconds: number | null;
+} | {
+    type: 'cannot-decode';
+    durationInSeconds: number | null;
+} | {
+    type: 'unknown-container-format';
+};
+type ExtractFrameParams = {
     src: string;
     timeInSeconds: number;
     logLevel: LogLevel;
     loop: boolean;
-}) => Promise<VideoSample | "cannot-decode" | "unknown-container-format" | null>;
+    trimAfter: number | undefined;
+    trimBefore: number | undefined;
+    playbackRate: number;
+    fps: number;
+};
+declare const extractFrameInternal: ({ src, timeInSeconds: unloopedTimeInSeconds, logLevel, loop, trimAfter, trimBefore, playbackRate, fps, }: ExtractFrameParams) => Promise<ExtractFrameResult>;
+type ExtractFrameReturnType = Awaited<ReturnType<typeof extractFrameInternal>>;
+export declare const extractFrame: (params: ExtractFrameParams) => Promise<ExtractFrameReturnType>;
+export {};

package/dist/video-extraction/extract-frame.js

@@ -1,20 +1,40 @@
 import { keyframeManager } from '../caches';
-import { getSinkWeak } from '../get-sink-weak';
-export const extractFrame = async ({ src, timeInSeconds: unloopedTimeinSeconds, logLevel, loop, }) => {
-    const sink = await getSinkWeak(src, logLevel);
+import { getSink } from '../get-sink';
+import { getTimeInSeconds } from '../get-time-in-seconds';
+const extractFrameInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds, logLevel, loop, trimAfter, trimBefore, playbackRate, fps, }) => {
+    const sink = await getSink(src, logLevel);
     const video = await sink.getVideo();
     if (video === 'no-video-track') {
         throw new Error(`No video track found for ${src}`);
     }
     if (video === 'cannot-decode') {
-        return 'cannot-decode';
+        return { type: 'cannot-decode', durationInSeconds: await sink.getDuration() };
     }
     if (video === 'unknown-container-format') {
-        return 'unknown-container-format';
+        return { type: 'unknown-container-format' };
+    }
+    let mediaDurationInSeconds = null;
+    if (loop) {
+        mediaDurationInSeconds = await sink.getDuration();
+    }
+    const timeInSeconds = getTimeInSeconds({
+        loop,
+        mediaDurationInSeconds,
+        unloopedTimeInSeconds,
+        src,
+        trimAfter,
+        playbackRate,
+        trimBefore,
+        fps,
+        ifNoMediaDuration: 'fail',
+    });
+    if (timeInSeconds === null) {
+        return {
+            type: 'success',
+            frame: null,
+            durationInSeconds: await sink.getDuration(),
+        };
     }
-    const timeInSeconds = loop
-        ? unloopedTimeinSeconds % (await sink.getDuration())
-        : unloopedTimeinSeconds;
     const keyframeBank = await keyframeManager.requestKeyframeBank({
         packetSink: video.packetSink,
         videoSampleSink: video.sampleSink,
@@ -22,6 +42,18 @@ export const extractFrame = async ({ src, timeInSeconds: unloopedTimeinSeconds,
         src,
         logLevel,
     });
+    if (!keyframeBank) {
+        return {
+            type: 'success',
+            frame: null,
+            durationInSeconds: await sink.getDuration(),
+        };
+    }
     const frame = await keyframeBank.getFrameFromTimestamp(timeInSeconds);
-    return frame;
+    return { type: 'success', frame, durationInSeconds: await sink.getDuration() };
+};
+let queue = Promise.resolve(undefined);
+export const extractFrame = (params) => {
+    queue = queue.then(() => extractFrameInternal(params));
+    return queue;
 };

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

@@ -1,5 +1,6 @@
 import type { EncodedPacket } from 'mediabunny';
 import { AudioSampleSink, EncodedPacketSink, VideoSampleSink } from 'mediabunny';
+import type { LogLevel } from 'remotion';
 type VideoSinks = {
     sampleSink: VideoSampleSink;
     packetSink: EncodedPacketSink;
@@ -9,7 +10,7 @@ type AudioSinks = {
 };
 export type AudioSinkResult = AudioSinks | 'no-audio-track' | 'cannot-decode-audio' | 'unknown-container-format';
 export type VideoSinkResult = VideoSinks | 'no-video-track' | 'cannot-decode' | 'unknown-container-format';
-export declare const getSinks: (src: string) => Promise<WeakRef<{
+export declare const getSinks: (src: string) => Promise<{
     getVideo: () => Promise<VideoSinkResult>;
     getAudio: (index: number) => Promise<AudioSinkResult>;
     actualMatroskaTimestamps: {
@@ -18,11 +19,12 @@ export declare const getSinks: (src: string) => Promise<WeakRef<{
     };
     isMatroska: boolean;
     getDuration: () => Promise<number>;
-}>>;
+}>;
 export type GetSink = Awaited<ReturnType<typeof getSinks>>;
-export declare const getFramesSinceKeyframe: ({ packetSink, videoSampleSink, startPacket, }: {
+export declare const getFramesSinceKeyframe: ({ packetSink, videoSampleSink, startPacket, logLevel, }: {
     packetSink: EncodedPacketSink;
     videoSampleSink: VideoSampleSink;
     startPacket: EncodedPacket;
+    logLevel: LogLevel;
 }) => Promise<import("./keyframe-bank").KeyframeBank>;
 export {};

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

@@ -72,15 +72,17 @@ export const getSinks = async (src) => {
         audioSinksPromise[index] = getAudioSinks(index);
         return audioSinksPromise[index];
     };
-    return new WeakRef({
+    return {
         getVideo: () => getVideoSinksPromise(),
         getAudio: (index) => getAudioSinksPromise(index),
         actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
         isMatroska,
-        getDuration: () => input.computeDuration(),
-    });
+        getDuration: () => {
+            return input.computeDuration();
+        },
+    };
 };
-export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, startPacket, }) => {
+export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, startPacket, logLevel, }) => {
     const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
         verifyKeyPackets: true,
     });
@@ -89,6 +91,7 @@ export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, star
         startTimestampInSeconds: startPacket.timestamp,
         endTimestampInSeconds: nextKeyPacket ? nextKeyPacket.timestamp : Infinity,
         sampleIterator,
+        logLevel,
     });
     return keyframeBank;
 };

package/dist/video-extraction/keyframe-bank.d.ts

@@ -4,7 +4,7 @@ export type KeyframeBank = {
     startTimestampInSeconds: number;
     endTimestampInSeconds: number;
     getFrameFromTimestamp: (timestamp: number) => Promise<VideoSample | null>;
-    prepareForDeletion: () => Promise<void>;
+    prepareForDeletion: (logLevel: LogLevel) => void;
     deleteFramesBeforeTimestamp: ({ logLevel, src, timestampInSeconds, }: {
         timestampInSeconds: number;
         logLevel: LogLevel;
@@ -18,8 +18,9 @@ export type KeyframeBank = {
     };
     getLastUsed: () => number;
 };
-export declare const makeKeyframeBank: ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, }: {
+export declare const makeKeyframeBank: ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, logLevel: parentLogLevel, }: {
     startTimestampInSeconds: number;
     endTimestampInSeconds: number;
     sampleIterator: AsyncGenerator<VideoSample, void, unknown>;
+    logLevel: LogLevel;
 }) => KeyframeBank;

package/dist/video-extraction/keyframe-bank.js

@@ -1,9 +1,11 @@
 import { Internals } from 'remotion';
+import { renderTimestampRange } from '../render-timestamp-range';
 // 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, }) => {
+export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, logLevel: parentLogLevel, }) => {
+    Internals.Log.verbose({ logLevel: parentLogLevel, tag: '@remotion/media' }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
     const frames = {};
     const frameTimestamps = [];
     let lastUsed = Date.now();
@@ -19,7 +21,7 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
             return true;
         }
         return (roundTo4Digits(lastFrame.timestamp + lastFrame.duration) >
-            roundTo4Digits(timestamp));
+            roundTo4Digits(timestamp) + 0.001);
     };
     const addFrame = (frame) => {
         frames[frame.timestamp] = frame;
@@ -53,7 +55,11 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
             if (!sample) {
                 return null;
             }
-            if (roundTo4Digits(sample.timestamp) <= roundTo4Digits(timestampInSeconds)) {
+            if (roundTo4Digits(sample.timestamp) <=
+                roundTo4Digits(timestampInSeconds) ||
+                // Match 0.3333333333 to 0.33355555
+                // this does not satisfy the previous condition, since one rounds up and one rounds down
+                Math.abs(sample.timestamp - timestampInSeconds) <= 0.001) {
                 return sample;
             }
         }
@@ -62,12 +68,15 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
     const hasTimestampInSecond = async (timestamp) => {
         return (await getFrameFromTimestamp(timestamp)) !== null;
     };
-    const prepareForDeletion = async () => {
+    const prepareForDeletion = (logLevel) => {
+        Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Preparing for deletion of keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
         // Cleanup frames that have been extracted that might not have been retrieved yet
-        const { value } = await sampleIterator.return();
-        if (value) {
-            value.close();
-        }
+        sampleIterator.return().then((result) => {
+            if (result.value) {
+                result.value.close();
+            }
+            return null;
+        });
         for (const frameTimestamp of frameTimestamps) {
             if (!frames[frameTimestamp]) {
                 continue;
@@ -79,7 +88,8 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
         frameTimestamps.length = 0;
     };
     const deleteFramesBeforeTimestamp = ({ logLevel, src, timestampInSeconds, }) => {
-        for (const frameTimestamp of frameTimestamps) {
+        const deletedTimestamps = [];
+        for (const frameTimestamp of frameTimestamps.slice()) {
             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) {
@@ -93,9 +103,12 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
                 frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
                 frames[frameTimestamp].close();
                 delete frames[frameTimestamp];
-                Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Deleted frame ${frameTimestamp} for src ${src}`);
+                deletedTimestamps.push(frameTimestamp);
             }
         }
+        if (deletedTimestamps.length > 0) {
+            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? '' : 's'} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
+        }
     };
     const getOpenFrameCount = () => {
         return {
@@ -106,11 +119,18 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
     const getLastUsed = () => {
         return lastUsed;
     };
+    let queue = Promise.resolve(undefined);
     const keyframeBank = {
         startTimestampInSeconds,
         endTimestampInSeconds,
-        getFrameFromTimestamp,
-        prepareForDeletion,
+        getFrameFromTimestamp: (timestamp) => {
+            queue = queue.then(() => getFrameFromTimestamp(timestamp));
+            return queue;
+        },
+        prepareForDeletion: (logLevel) => {
+            queue = queue.then(() => prepareForDeletion(logLevel));
+            return queue;
+        },
         hasTimestampInSecond,
         addFrame,
         deleteFramesBeforeTimestamp,

package/dist/video-extraction/keyframe-manager.d.ts

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

package/dist/video-extraction/keyframe-manager.js

@@ -1,5 +1,6 @@
 import { Internals } from 'remotion';
 import { getMaxVideoCacheSize, getTotalCacheStats, SAFE_BACK_WINDOW_IN_SECONDS, } from '../caches';
+import { renderTimestampRange } from '../render-timestamp-range';
 import { getFramesSinceKeyframe } from './get-frames-since-keyframe';
 export const makeKeyframeManager = () => {
     // src => {[startTimestampInSeconds]: KeyframeBank
@@ -20,7 +21,7 @@ export const makeKeyframeManager = () => {
                 if (size === 0) {
                     continue;
                 }
-                Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Open frames for src ${src}: ${timestamps.join(', ')}`);
+                Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
             }
         }
         Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
@@ -62,7 +63,7 @@ export const makeKeyframeManager = () => {
     const deleteOldestKeyframeBank = async (logLevel) => {
         const { bank: mostInThePastBank, src: mostInThePastSrc } = await getTheKeyframeBankMostInThePast();
         if (mostInThePastBank) {
-            await mostInThePastBank.prepareForDeletion();
+            await mostInThePastBank.prepareForDeletion(logLevel);
             delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
             Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Deleted frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
         }
@@ -85,7 +86,7 @@ export const makeKeyframeManager = () => {
             const bank = await sources[src][startTimeInSeconds];
             const { endTimestampInSeconds, startTimestampInSeconds } = bank;
             if (endTimestampInSeconds < threshold) {
-                await bank.prepareForDeletion();
+                await bank.prepareForDeletion(logLevel);
                 Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
                 delete sources[src][startTimeInSeconds];
             }
@@ -104,7 +105,10 @@ export const makeKeyframeManager = () => {
             verifyKeyPackets: true,
         });
         if (!startPacket) {
-            throw new Error(`No key packet found for timestamp ${timestamp}`);
+            // e.g. https://discord.com/channels/809501355504959528/809501355504959531/1424400511070765086
+            // The video has an offset and the first frame is at time 0.033sec
+            // we shall not crash here but handle it gracefully
+            return null;
         }
         const startTimestampInSeconds = startPacket.timestamp;
         const existingBank = sources[src]?.[startTimestampInSeconds];
@@ -114,6 +118,7 @@ export const makeKeyframeManager = () => {
                 packetSink,
                 videoSampleSink,
                 startPacket,
+                logLevel,
             });
             addKeyframeBank({ src, bank: newKeyframeBank, startTimestampInSeconds });
             return newKeyframeBank;
@@ -122,16 +127,17 @@ export const makeKeyframeManager = () => {
         if (await (await existingBank).hasTimestampInSecond(timestamp)) {
             return existingBank;
         }
-        Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Keyframe bank exists but frames have already been evicted!`);
+        Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
         // Bank exists but frames have already been evicted!
         // First delete it entirely
-        await (await existingBank).prepareForDeletion();
+        await (await existingBank).prepareForDeletion(logLevel);
         delete sources[src][startTimestampInSeconds];
         // Then refetch
         const replacementKeybank = getFramesSinceKeyframe({
             packetSink,
             videoSampleSink,
             startPacket,
+            logLevel,
         });
         addKeyframeBank({ src, bank: replacementKeybank, startTimestampInSeconds });
         return replacementKeybank;
@@ -152,20 +158,29 @@ export const makeKeyframeManager = () => {
         });
         return keyframeBank;
     };
-    const clearAll = async () => {
+    const clearAll = async (logLevel) => {
         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();
+                bank.prepareForDeletion(logLevel);
                 delete sources[src][startTimeInSeconds];
             }
         }
     };
+    let queue = Promise.resolve(undefined);
     return {
-        requestKeyframeBank,
-        addKeyframeBank,
+        requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, }) => {
+            queue = queue.then(() => requestKeyframeBank({
+                packetSink,
+                timestamp,
+                videoSampleSink,
+                src,
+                logLevel,
+            }));
+            return queue;
+        },
         getCacheStats,
         clearAll,
     };

package/package.json

@@ -1,55 +1,55 @@
 {
-  "name": "@remotion/media",
-  "version": "4.0.356",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "module": "dist/esm/index.mjs",
-  "repository": {
-    "url": "https://github.com/remotion-dev/remotion/tree/main/packages/media"
-  },
-  "sideEffects": false,
-  "author": "Jonny Burger <jonny@remotion.dev>, Hunain Ahmed <junaidhunain6@gmail.com>",
-  "bugs": {
-    "url": "https://github.com/remotion-dev/remotion/issues"
-  },
-  "dependencies": {
-    "mediabunny": "1.21.0",
-    "webdriverio": "9.19.2",
-    "remotion": "4.0.356"
-  },
-  "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
-  "devDependencies": {
-    "@vitest/browser": "^3.2.4",
-    "eslint": "9.19.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "vitest": "3.2.4",
-    "@remotion/eslint-config-internal": "4.0.356"
-  },
-  "keywords": [],
-  "publishConfig": {
-    "access": "public"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
-      "module": "./dist/esm/index.mjs",
-      "import": "./dist/esm/index.mjs"
-    },
-    "./package.json": "./package.json"
-  },
-  "description": "Experimental WebCodecs-based media tags",
-  "homepage": "https://remotion.dev/docs/media",
-  "scripts": {
-    "if-node-18+": "node -e \"const [maj]=process.versions.node.split('.').map(Number); process.exit(maj>=18?0:1)\"",
-    "formatting": "prettier --experimental-cli src --check",
-    "lint": "eslint src",
-    "watch": "tsc -w",
-    "test": "node src/test/execute.mjs",
-    "make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
-  }
-}
+	"name": "@remotion/media",
+	"version": "4.0.358",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"module": "dist/esm/index.mjs",
+	"repository": {
+		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/media"
+	},
+	"sideEffects": false,
+	"author": "Jonny Burger <jonny@remotion.dev>, Hunain Ahmed <junaidhunain6@gmail.com>",
+	"bugs": {
+		"url": "https://github.com/remotion-dev/remotion/issues"
+	},
+	"scripts": {
+		"if-node-18+": "node -e \"const [maj]=process.versions.node.split('.').map(Number); process.exit(maj>=18?0:1)\"",
+		"formatting": "prettier --experimental-cli src --check",
+		"lint": "eslint src",
+		"watch": "tsc -w",
+		"test": "node src/test/execute.mjs",
+		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
+	},
+	"dependencies": {
+		"mediabunny": "1.23.0",
+		"remotion": "4.0.357",
+		"webdriverio": "9.19.2"
+	},
+	"peerDependencies": {
+		"react": ">=16.8.0",
+		"react-dom": ">=16.8.0"
+	},
+	"devDependencies": {
+		"@remotion/eslint-config-internal": "4.0.357",
+		"@vitest/browser": "^3.2.4",
+		"eslint": "9.19.0",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
+		"vitest": "3.2.4"
+	},
+	"keywords": [],
+	"publishConfig": {
+		"access": "public"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"require": "./dist/index.js",
+			"module": "./dist/esm/index.mjs",
+			"import": "./dist/esm/index.mjs"
+		},
+		"./package.json": "./package.json"
+	},
+	"description": "Experimental WebCodecs-based media tags",
+	"homepage": "https://remotion.dev/docs/media"
+}