@remotion/media 4.0.351 → 4.0.353

package/dist/esm/index.mjs

@@ -1,8 +1,8 @@
 // src/audio/audio.tsx
 import { useCallback as useCallback2, useContext as useContext5 } from "react";
 import {
-  cancelRender as cancelRender2,
-  Internals as Internals2,
+  cancelRender as cancelRender3,
+  Internals as Internals6,
   Sequence,
   useRemotionEnvironment as useRemotionEnvironment3
 } from "remotion";
@@ -44,46 +44,18 @@ var SharedAudioContext = createContext2(null);
 // src/audio/audio-for-rendering.tsx
 import { useContext as useContext4, useLayoutEffect, useMemo as useMemo3, useState as useState3 } from "react";
 import {
-  cancelRender,
-  Internals,
+  cancelRender as cancelRender2,
+  Internals as Internals5,
   useCurrentFrame,
   useDelayRender,
   useRemotionEnvironment as useRemotionEnvironment2
 } from "remotion";
 
-// src/log.ts
-var logLevels = ["trace", "verbose", "info", "warn", "error"];
-var getNumberForLogLevel = (level) => {
-  return logLevels.indexOf(level);
-};
-var isEqualOrBelowLogLevel = (currentLevel, level) => {
-  return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
-};
-var Log2 = {
-  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);
-  }
-};
+// src/caches.ts
+import { cancelRender, Internals as Internals4 } from "remotion";
+
+// src/audio-extraction/audio-iterator.ts
+import { Internals } from "remotion";
 
 // src/audio-extraction/audio-cache.ts
 var makeAudioCache = () => {
@@ -97,6 +69,10 @@ var makeAudioCache = () => {
     for (const timestamp of timestamps) {
       const endTimestamp = timestamp + samples[timestamp].duration;
       if (endTimestamp < threshold) {
+        const isLast = timestamp === timestamps[timestamps.length - 1];
+        if (isLast) {
+          continue;
+        }
         samples[timestamp].close();
         delete samples[timestamp];
         timestamps.splice(timestamps.indexOf(timestamp), 1);
@@ -182,8 +158,9 @@ var makeAudioIterator = ({
     }
     const samples = cache.getSamples(timestamp, durationInSeconds);
     while (true) {
-      cache.clearBeforeThreshold(timestamp - SAFE_BACK_WINDOW_IN_SECONDS);
       const sample = await getNextSample();
+      const deleteBefore = fullDuration === null ? timestamp : Math.min(timestamp, fullDuration);
+      cache.clearBeforeThreshold(deleteBefore - SAFE_BACK_WINDOW_IN_SECONDS);
       if (sample === null) {
         break;
       }
@@ -198,7 +175,7 @@ var makeAudioIterator = ({
     return samples;
   };
   const logOpenFrames = (logLevel) => {
-    Log2.verbose(logLevel, "[Audio] Open samples for src", src, cache.getOpenTimestamps().map((t) => t.toFixed(3)).join(", "));
+    Internals.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, cache.getOpenTimestamps().map((t) => t.toFixed(3)).join(", "));
   };
   const getCacheStats = () => {
     return {
@@ -285,9 +262,11 @@ var makeAudioManager = () => {
     timeInSeconds,
     audioSampleSink,
     isMatroska,
-    actualMatroskaTimestamps
+    actualMatroskaTimestamps,
+    logLevel
   }) => {
-    while ((await getTotalCacheStats()).totalSize > MAX_CACHE_SIZE) {
+    const maxCacheSize = getMaxVideoCacheSize(logLevel);
+    while ((await getTotalCacheStats()).totalSize > maxCacheSize) {
       await deleteOldestIterator();
     }
     for (const iterator of iterators) {
@@ -333,6 +312,9 @@ var makeAudioManager = () => {
   };
 };
 
+// src/video-extraction/keyframe-manager.ts
+import { Internals as Internals3 } from "remotion";
+
 // ../../node_modules/.pnpm/mediabunny@1.17.0/node_modules/mediabunny/dist/modules/src/misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
@@ -13270,6 +13252,7 @@ class Input {
  */
 
 // src/video-extraction/keyframe-bank.ts
+import { Internals as Internals2 } from "remotion";
 var roundTo4Digits = (timestamp) => {
   return Math.round(timestamp * 1000) / 1000;
 };
@@ -13281,7 +13264,7 @@ var makeKeyframeBank = ({
   const frames = {};
   const frameTimestamps = [];
   let lastUsed = Date.now();
-  let alloctionSize = 0;
+  let allocationSize = 0;
   const hasDecodedEnoughForTimestamp = (timestamp) => {
     const lastFrameTimestamp = frameTimestamps[frameTimestamps.length - 1];
     if (!lastFrameTimestamp) {
@@ -13296,7 +13279,7 @@ var makeKeyframeBank = ({
   const addFrame = (frame) => {
     frames[frame.timestamp] = frame;
     frameTimestamps.push(frame.timestamp);
-    alloctionSize += frame.allocationSize();
+    allocationSize += frame.allocationSize();
     lastUsed = Date.now();
   };
   const ensureEnoughFramesForTimestamp = async (timestamp) => {
@@ -13343,7 +13326,7 @@ var makeKeyframeBank = ({
       if (!frames[frameTimestamp]) {
         continue;
       }
-      alloctionSize -= frames[frameTimestamp].allocationSize();
+      allocationSize -= frames[frameTimestamp].allocationSize();
       frames[frameTimestamp].close();
       delete frames[frameTimestamp];
     }
@@ -13363,17 +13346,17 @@ var makeKeyframeBank = ({
         if (!frames[frameTimestamp]) {
           continue;
         }
-        alloctionSize -= frames[frameTimestamp].allocationSize();
+        allocationSize -= frames[frameTimestamp].allocationSize();
         frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
         frames[frameTimestamp].close();
         delete frames[frameTimestamp];
-        Log2.verbose(logLevel, `[Video] Deleted frame ${frameTimestamp} for src ${src}`);
+        Internals2.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted frame ${frameTimestamp} for src ${src}`);
       }
     }
   };
   const getOpenFrameCount = () => {
     return {
-      size: alloctionSize,
+      size: allocationSize,
       timestamps: frameTimestamps
     };
   };
@@ -13447,7 +13430,7 @@ var getFramesSinceKeyframe = async ({
   startPacket
 }) => {
   const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
-    verifyKeyPackets: false
+    verifyKeyPackets: true
   });
   const sampleIterator = videoSampleSink.samples(startPacket.timestamp, nextKeyPacket ? nextKeyPacket.timestamp : Infinity);
   const keyframeBank = makeKeyframeBank({
@@ -13481,10 +13464,10 @@ var makeKeyframeManager = () => {
         if (size === 0) {
           continue;
         }
-        Log2.verbose(logLevel, `[Video] Open frames for src ${src}: ${timestamps.join(", ")}`);
+        Internals3.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${timestamps.join(", ")}`);
       }
     }
-    Log2.verbose(logLevel, `[Video] Cache stats: ${count} open frames, ${totalSize} bytes`);
+    Internals3.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
   };
   const getCacheStats = async () => {
     let count = 0;
@@ -13525,12 +13508,13 @@ var makeKeyframeManager = () => {
     if (mostInThePastBank) {
       await mostInThePastBank.prepareForDeletion();
       delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
-      Log2.verbose(logLevel, `[Video] Deleted frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
+      Internals3.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
     }
   };
   const ensureToStayUnderMaxCacheSize = async (logLevel) => {
     let cacheStats = await getTotalCacheStats();
-    while (cacheStats.totalSize > MAX_CACHE_SIZE) {
+    const maxCacheSize = getMaxVideoCacheSize(logLevel);
+    while (cacheStats.totalSize > maxCacheSize) {
       await deleteOldestKeyframeBank(logLevel);
       cacheStats = await getTotalCacheStats();
     }
@@ -13550,7 +13534,7 @@ var makeKeyframeManager = () => {
       const { endTimestampInSeconds, startTimestampInSeconds } = bank;
       if (endTimestampInSeconds < threshold) {
         await bank.prepareForDeletion();
-        Log2.verbose(logLevel, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+        Internals3.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
         delete sources[src][startTimeInSeconds];
       } else {
         bank.deleteFramesBeforeTimestamp({
@@ -13589,7 +13573,7 @@ var makeKeyframeManager = () => {
     if (await (await existingBank).hasTimestampInSecond(timestamp)) {
       return existingBank;
     }
-    Log2.verbose(logLevel, `[Video] Bank exists but frames have already been evicted!`);
+    Internals3.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frames have already been evicted!`);
     await (await existingBank).prepareForDeletion();
     delete sources[src][startTimestampInSeconds];
     const replacementKeybank = getFramesSinceKeyframe({
@@ -13642,7 +13626,6 @@ var makeKeyframeManager = () => {
 };
 
 // src/caches.ts
-var MAX_CACHE_SIZE = 1000 * 1000 * 1000;
 var SAFE_BACK_WINDOW_IN_SECONDS = 1;
 var keyframeManager = makeKeyframeManager();
 var audioManager = makeAudioManager();
@@ -13654,6 +13637,40 @@ var getTotalCacheStats = async () => {
     totalSize: keyframeManagerCacheStats.totalSize + audioManagerCacheStats.totalSize
   };
 };
+var getUncachedMaxCacheSize = (logLevel) => {
+  if (window.remotion_mediaCacheSizeInBytes !== undefined && window.remotion_mediaCacheSizeInBytes !== null) {
+    if (window.remotion_mediaCacheSizeInBytes < 240 * 1024 * 1024) {
+      cancelRender(new Error(`The minimum value for the "mediaCacheSizeInBytes" prop is 240MB (${240 * 1024 * 1024}), got: ${window.remotion_mediaCacheSizeInBytes}`));
+    }
+    if (window.remotion_mediaCacheSizeInBytes > 20000 * 1024 * 1024) {
+      cancelRender(new Error(`The maximum value for the "mediaCacheSizeInBytes" prop is 20GB (${20000 * 1024 * 1024}), got: ${window.remotion_mediaCacheSizeInBytes}`));
+    }
+    Internals4.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
+    return window.remotion_mediaCacheSizeInBytes;
+  }
+  if (window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
+    const value = window.remotion_initialMemoryAvailable / 2;
+    if (value < 240 * 1024 * 1024) {
+      Internals4.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 240MB (which is more than half of the available system memory!)`);
+      return 240 * 1024 * 1024;
+    }
+    if (value > 20000 * 1024 * 1024) {
+      Internals4.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
+      return 20000 * 1024 * 1024;
+    }
+    Internals4.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on available memory (50% of available memory): ${(value / 1024 / 1024).toFixed(1)} MB`);
+    return value;
+  }
+  return 1000 * 1000 * 1000;
+};
+var cachedMaxCacheSize = null;
+var getMaxVideoCacheSize = (logLevel) => {
+  if (cachedMaxCacheSize !== null) {
+    return cachedMaxCacheSize;
+  }
+  cachedMaxCacheSize = getUncachedMaxCacheSize(logLevel);
+  return cachedMaxCacheSize;
+};
 
 // src/convert-audiodata/combine-audiodata.ts
 var combineAudioDataAndClosePrevious = (audioDataArray) => {
@@ -13752,8 +13769,9 @@ var resampleAudioData = ({
       const c = getSourceValues(start, end, 2);
       const sl = getSourceValues(start, end, 3);
       const sr = getSourceValues(start, end, 4);
-      const l2 = l + Math.sqrt(1 / 2) * (c + sl);
-      const r2 = r + Math.sqrt(1 / 2) * (c + sr);
+      const sq = Math.sqrt(1 / 2);
+      const l2 = l + sq * (c + sl);
+      const r2 = r + sq * (c + sr);
       destination[newFrameIndex * 2 + 0] = l2;
       destination[newFrameIndex * 2 + 1] = r2;
     } else {
@@ -13872,7 +13890,8 @@ var extractAudio = async ({
     timeInSeconds,
     audioSampleSink: audio.sampleSink,
     isMatroska,
-    actualMatroskaTimestamps
+    actualMatroskaTimestamps,
+    logLevel
   });
   const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
   audioManager.logOpenFrames(logLevel);
@@ -14074,11 +14093,11 @@ var AudioForRendering = ({
   logLevel = window.remotion_logLevel,
   loop
 }) => {
-  const absoluteFrame = Internals.useTimelinePosition();
-  const videoConfig = Internals.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext4(Internals.RenderAssetManager);
+  const absoluteFrame = Internals5.useTimelinePosition();
+  const videoConfig = Internals5.useUnsafeVideoConfig();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext4(Internals5.RenderAssetManager);
   const frame = useCurrentFrame();
-  const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
+  const volumePropsFrame = Internals5.useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const environment = useRemotionEnvironment2();
   const [id] = useState3(() => `${Math.random()}`.replace("0.", ""));
   if (!videoConfig) {
@@ -14087,12 +14106,12 @@ var AudioForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <Audio>.");
   }
-  const volume = Internals.evaluateVolume({
+  const volume = Internals5.evaluateVolume({
     volume: volumeProp,
     frame: volumePropsFrame,
     mediaVolume: 1
   });
-  Internals.warnAboutTooHighVolume(volume);
+  Internals5.warnAboutTooHighVolume(volume);
   const shouldRenderAudio = useMemo3(() => {
     if (!window.remotion_audioEnabled) {
       return false;
@@ -14140,7 +14159,7 @@ var AudioForRendering = ({
       }
       continueRender(newHandle);
     }).catch((error) => {
-      cancelRender(error);
+      cancelRender2(error);
     });
     return () => {
       continueRender(newHandle);
@@ -14175,7 +14194,7 @@ var {
   resolveTrimProps,
   validateMediaProps,
   AudioForPreview
-} = Internals2;
+} = Internals6;
 var Audio = (props) => {
   const audioContext = useContext5(SharedAudioContext);
   const {
@@ -14216,7 +14235,7 @@ var Audio = (props) => {
         onRemotionError(new Error(errMessage));
         return;
       }
-      cancelRender2(new Error(errMessage));
+      cancelRender3(new Error(errMessage));
     } else {
       onRemotionError?.(new Error(errMessage));
       console.warn(errMessage);
@@ -14262,7 +14281,7 @@ var Audio = (props) => {
 };
 // src/video/video.tsx
 import { useCallback as useCallback3 } from "react";
-import { Internals as Internals4, Sequence as Sequence2, useRemotionEnvironment as useRemotionEnvironment5 } from "remotion";
+import { Internals as Internals8, Sequence as Sequence2, useRemotionEnvironment as useRemotionEnvironment5 } from "remotion";
 
 // src/video/video-for-rendering.tsx
 import {
@@ -14273,11 +14292,12 @@ import {
   useState as useState4
 } from "react";
 import {
-  cancelRender as cancelRender3,
-  Internals as Internals3,
+  cancelRender as cancelRender4,
+  Internals as Internals7,
   useCurrentFrame as useCurrentFrame2,
   useDelayRender as useDelayRender2,
-  useRemotionEnvironment as useRemotionEnvironment4
+  useRemotionEnvironment as useRemotionEnvironment4,
+  useVideoConfig
 } from "remotion";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var VideoForRendering = ({
@@ -14291,28 +14311,26 @@ var VideoForRendering = ({
   onVideoFrame,
   logLevel = window.remotion_logLevel,
   loop,
-  style
+  style,
+  className
 }) => {
-  const absoluteFrame = Internals3.useTimelinePosition();
-  const videoConfig = Internals3.useUnsafeVideoConfig();
+  const absoluteFrame = Internals7.useTimelinePosition();
+  const { fps } = useVideoConfig();
   const canvasRef = useRef2(null);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext6(Internals3.RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext6(Internals7.RenderAssetManager);
   const frame = useCurrentFrame2();
-  const volumePropsFrame = Internals3.useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
+  const volumePropsFrame = Internals7.useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const environment = useRemotionEnvironment4();
   const [id] = useState4(() => `${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 = Internals3.evaluateVolume({
+  const volume = Internals7.evaluateVolume({
     volume: volumeProp,
     frame: volumePropsFrame,
     mediaVolume: 1
   });
-  Internals3.warnAboutTooHighVolume(volume);
+  Internals7.warnAboutTooHighVolume(volume);
   const shouldRenderAudio = useMemo4(() => {
     if (!window.remotion_audioEnabled) {
       return false;
@@ -14325,7 +14343,6 @@ var VideoForRendering = ({
     }
     return true;
   }, [muted, volume]);
-  const { fps } = videoConfig;
   const { delayRender, continueRender } = useDelayRender2();
   useLayoutEffect2(() => {
     if (!canvasRef.current) {
@@ -14351,10 +14368,17 @@ var VideoForRendering = ({
     }).then(({ frame: imageBitmap, audio }) => {
       if (imageBitmap) {
         onVideoFrame?.(imageBitmap);
-        canvasRef.current?.getContext("2d")?.drawImage(imageBitmap, 0, 0);
+        const context = canvasRef.current?.getContext("2d");
+        if (!context) {
+          return;
+        }
+        context.canvas.width = imageBitmap instanceof ImageBitmap ? imageBitmap.width : imageBitmap.displayWidth;
+        context.canvas.height = imageBitmap instanceof ImageBitmap ? imageBitmap.height : imageBitmap.displayHeight;
+        context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
+        context.drawImage(imageBitmap, 0, 0);
         imageBitmap.close();
       } else if (window.remotion_videoEnabled) {
-        cancelRender3(new Error("No video frame found"));
+        cancelRender4(new Error("No video frame found"));
       }
       if (audio) {
         registerRenderAsset({
@@ -14370,7 +14394,7 @@ var VideoForRendering = ({
       }
       continueRender(newHandle);
     }).catch((error) => {
-      cancelRender3(error);
+      cancelRender4(error);
     });
     return () => {
       continueRender(newHandle);
@@ -14396,11 +14420,13 @@ var VideoForRendering = ({
     volume,
     loop
   ]);
+  const classNameValue = useMemo4(() => {
+    return [Internals7.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals7.truthy).join(" ");
+  }, [className]);
   return /* @__PURE__ */ jsx3("canvas", {
     ref: canvasRef,
     style,
-    width: videoConfig.width,
-    height: videoConfig.height
+    className: classNameValue
   });
 };
 
@@ -14411,7 +14437,7 @@ var {
   resolveTrimProps: resolveTrimProps2,
   validateMediaProps: validateMediaProps2,
   VideoForPreview
-} = Internals4;
+} = Internals8;
 var Video = (props) => {
   const {
     trimBefore,

package/dist/video/props.d.ts

@@ -1,6 +1,7 @@
 import type { LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
 export type VideoProps = {
     src: string;
+    className?: string;
     trimBefore?: number;
     trimAfter?: number;
     volume?: VolumeProp;

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

@@ -1,21 +1,18 @@
 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 { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
 import { extractFrameViaBroadcastChannel } from '../video-extraction/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, loop, style, }) => {
+onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) => {
     const absoluteFrame = Internals.useTimelinePosition();
-    const videoConfig = Internals.useUnsafeVideoConfig();
+    const { fps } = useVideoConfig();
     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>.');
     }
@@ -37,7 +34,6 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, }) => {
         }
         return true;
     }, [muted, volume]);
-    const { fps } = videoConfig;
     const { delayRender, continueRender } = useDelayRender();
     useLayoutEffect(() => {
         if (!canvasRef.current) {
@@ -64,7 +60,20 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, }) => {
             .then(({ frame: imageBitmap, audio }) => {
             if (imageBitmap) {
                 onVideoFrame?.(imageBitmap);
-                canvasRef.current?.getContext('2d')?.drawImage(imageBitmap, 0, 0);
+                const context = canvasRef.current?.getContext('2d');
+                if (!context) {
+                    return;
+                }
+                context.canvas.width =
+                    imageBitmap instanceof ImageBitmap
+                        ? imageBitmap.width
+                        : imageBitmap.displayWidth;
+                context.canvas.height =
+                    imageBitmap instanceof ImageBitmap
+                        ? imageBitmap.height
+                        : imageBitmap.displayHeight;
+                context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
+                context.drawImage(imageBitmap, 0, 0);
                 imageBitmap.close();
             }
             else if (window.remotion_videoEnabled) {
@@ -111,5 +120,10 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, }) => {
         volume,
         loop,
     ]);
-    return (_jsx("canvas", { ref: canvasRef, style: style, width: videoConfig.width, height: videoConfig.height }));
+    const classNameValue = useMemo(() => {
+        return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
+            .filter(Internals.truthy)
+            .join(' ');
+    }, [className]);
+    return _jsx("canvas", { ref: canvasRef, style: style, className: classNameValue });
 };

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

@@ -1,5 +1,5 @@
+import { type LogLevel } from 'remotion';
 import type { PcmS16AudioData } from '../convert-audiodata/convert-audiodata';
-import type { LogLevel } from '../log';
 export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, logLevel, durationInSeconds, includeAudio, includeVideo, isClientSideRendering, volume, loop, }: {
     src: string;
     timeInSeconds: number;

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

@@ -1,4 +1,4 @@
-import type { LogLevel } from '../log';
+import { type LogLevel } from 'remotion';
 import { type GetSink } from './get-frames-since-keyframe';
 export declare const sinkPromises: Record<string, Promise<GetSink>>;
 export declare const extractFrame: ({ src, timeInSeconds: unloopedTimeinSeconds, logLevel, loop, }: {

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

@@ -30,7 +30,7 @@ export const getSinks = async (src) => {
 };
 export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, startPacket, }) => {
     const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
-        verifyKeyPackets: false,
+        verifyKeyPackets: true,
     });
     const sampleIterator = videoSampleSink.samples(startPacket.timestamp, nextKeyPacket ? nextKeyPacket.timestamp : Infinity);
     const keyframeBank = makeKeyframeBank({

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

@@ -1,5 +1,5 @@
 import type { VideoSample } from 'mediabunny';
-import type { LogLevel } from '../log';
+import { type LogLevel } from 'remotion';
 export type KeyframeBank = {
     startTimestampInSeconds: number;
     endTimestampInSeconds: number;

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

@@ -1,4 +1,4 @@
-import { Log } from '../log';
+import { Internals } from 'remotion';
 // 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;
@@ -7,7 +7,7 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
     const frames = {};
     const frameTimestamps = [];
     let lastUsed = Date.now();
-    let alloctionSize = 0;
+    let allocationSize = 0;
     const hasDecodedEnoughForTimestamp = (timestamp) => {
         const lastFrameTimestamp = frameTimestamps[frameTimestamps.length - 1];
         if (!lastFrameTimestamp) {
@@ -24,7 +24,7 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
     const addFrame = (frame) => {
         frames[frame.timestamp] = frame;
         frameTimestamps.push(frame.timestamp);
-        alloctionSize += frame.allocationSize();
+        allocationSize += frame.allocationSize();
         lastUsed = Date.now();
     };
     const ensureEnoughFramesForTimestamp = async (timestamp) => {
@@ -72,7 +72,7 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
             if (!frames[frameTimestamp]) {
                 continue;
             }
-            alloctionSize -= frames[frameTimestamp].allocationSize();
+            allocationSize -= frames[frameTimestamp].allocationSize();
             frames[frameTimestamp].close();
             delete frames[frameTimestamp];
         }
@@ -89,17 +89,17 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
                 if (!frames[frameTimestamp]) {
                     continue;
                 }
-                alloctionSize -= frames[frameTimestamp].allocationSize();
+                allocationSize -= frames[frameTimestamp].allocationSize();
                 frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
                 frames[frameTimestamp].close();
                 delete frames[frameTimestamp];
-                Log.verbose(logLevel, `[Video] Deleted frame ${frameTimestamp} for src ${src}`);
+                Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Deleted frame ${frameTimestamp} for src ${src}`);
             }
         }
     };
     const getOpenFrameCount = () => {
         return {
-            size: alloctionSize,
+            size: allocationSize,
             timestamps: frameTimestamps,
         };
     };

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

@@ -1,5 +1,5 @@
 import type { EncodedPacketSink, VideoSampleSink } from 'mediabunny';
-import type { LogLevel } from '../log';
+import { type LogLevel } from 'remotion';
 import { type KeyframeBank } from './keyframe-bank';
 export declare const makeKeyframeManager: () => {
     requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, }: {