@remotion/media 4.0.440 → 4.0.442

package/dist/esm/index.mjs

@@ -2136,6 +2136,7 @@ var AudioForPreviewAssertedShowing = ({
   const initialGlobalPlaybackRate = useRef(globalPlaybackRate);
   const initialPlaybackRate = useRef(playbackRate);
   const initialMuted = useRef(effectiveMuted);
+  const initialDurationInFrames = useRef(videoConfig.durationInFrames);
   const initialSequenceOffset = useRef(sequenceOffset);
   useCommonEffects({
     mediaPlayerRef,
@@ -2186,7 +2187,7 @@ var AudioForPreviewAssertedShowing = ({
         isPostmounting: initialIsPostmounting.current,
         isPremounting: initialIsPremounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
-        durationInFrames: videoConfig.durationInFrames,
+        durationInFrames: initialDurationInFrames.current,
         onVideoFrameCallback: null,
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
@@ -2282,7 +2283,6 @@ var AudioForPreviewAssertedShowing = ({
     debugAudioScheduling,
     buffer,
     onError,
-    videoConfig.durationInFrames,
     credentials
   ]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
@@ -4491,7 +4491,7 @@ var Audio = Internals19.wrapInSchema(AudioInner, audioSchema);
 Internals19.addSequenceStackTraces(Audio);
 
 // src/video/video.tsx
-import { Internals as Internals22, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
+import { Internals as Internals23, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
 
 // src/video/video-for-preview.tsx
 import {
@@ -4504,11 +4504,33 @@ import {
 } from "react";
 import {
   Html5Video,
-  Internals as Internals20,
+  Internals as Internals21,
   useBufferState as useBufferState2,
   useCurrentFrame as useCurrentFrame4,
   useVideoConfig as useVideoConfig3
 } from "remotion";
+
+// src/video/warn-object-fit-css.ts
+import { Internals as Internals20 } from "remotion";
+var OBJECT_FIT_CLASS_PATTERN = /\bobject-(contain|cover|fill|none|scale-down)\b/;
+var warnedStyle = false;
+var warnedClassName = false;
+var warnAboutObjectFitInStyleOrClassName = ({
+  style,
+  className,
+  logLevel
+}) => {
+  if (!warnedStyle && style?.objectFit) {
+    warnedStyle = true;
+    Internals20.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of the `style` prop.");
+  }
+  if (!warnedClassName && className && OBJECT_FIT_CLASS_PATTERN.test(className)) {
+    warnedClassName = true;
+    Internals20.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of `object-*` CSS class names.");
+  }
+};
+
+// src/video/video-for-preview.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var {
   useUnsafeVideoConfig: useUnsafeVideoConfig2,
@@ -4522,7 +4544,7 @@ var {
   usePreload: usePreload2,
   SequenceContext: SequenceContext2,
   SequenceVisibilityToggleContext
-} = Internals20;
+} = Internals21;
 var VideoForPreviewAssertedShowing = ({
   src: unpreloadedSrc,
   style,
@@ -4547,7 +4569,8 @@ var VideoForPreviewAssertedShowing = ({
   headless,
   onError,
   credentials,
-  controls
+  controls,
+  objectFit: objectFitProp
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4560,7 +4583,7 @@ var VideoForPreviewAssertedShowing = ({
   const [mediaPlayerReady, setMediaPlayerReady] = useState4(false);
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState4(false);
   const [playing] = Timeline2.usePlayingState();
-  const timelineContext = Internals20.useTimelineContext();
+  const timelineContext = Internals21.useTimelineContext();
   const globalPlaybackRate = timelineContext.playbackRate;
   const sharedAudioContext = useContext5(SharedAudioContext2);
   const buffer = useBufferState2();
@@ -4610,18 +4633,19 @@ var VideoForPreviewAssertedShowing = ({
   const currentTimeRef = useRef2(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
-  const buffering = useContext5(Internals20.BufferingContextReact);
+  const buffering = useContext5(Internals21.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
-  const isPlayerBuffering = Internals20.useIsPlayerBuffering(buffering);
+  const isPlayerBuffering = Internals21.useIsPlayerBuffering(buffering);
   const initialPlaying = useRef2(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef2(isPremounting);
   const initialIsPostmounting = useRef2(isPostmounting);
   const initialGlobalPlaybackRate = useRef2(globalPlaybackRate);
   const initialPlaybackRate = useRef2(playbackRate);
   const initialMuted = useRef2(effectiveMuted);
+  const initialDurationInFrames = useRef2(videoConfig.durationInFrames);
   const initialSequenceOffset = useRef2(sequenceOffset);
   useEffect3(() => {
     if (!sharedAudioContext)
@@ -4647,7 +4671,7 @@ var VideoForPreviewAssertedShowing = ({
         isPremounting: initialIsPremounting.current,
         isPostmounting: initialIsPostmounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
-        durationInFrames: videoConfig.durationInFrames,
+        durationInFrames: initialDurationInFrames.current,
         onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
@@ -4669,7 +4693,7 @@ var VideoForPreviewAssertedShowing = ({
           if (action === "fail") {
             throw errorToUse;
           }
-          Internals20.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+          Internals21.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
           setShouldFallbackToNativeVideo(true);
         };
         if (result.type === "unknown-container-format") {
@@ -4703,7 +4727,7 @@ var VideoForPreviewAssertedShowing = ({
         if (action === "fail") {
           throw errorToUse;
         }
-        Internals20.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", errorToUse);
+        Internals21.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", errorToUse);
         setShouldFallbackToNativeVideo(true);
       });
     } catch (error) {
@@ -4717,12 +4741,12 @@ var VideoForPreviewAssertedShowing = ({
       if (action === "fail") {
         throw errorToUse;
       }
-      Internals20.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", errorToUse);
+      Internals21.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", errorToUse);
       setShouldFallbackToNativeVideo(true);
     }
     return () => {
       if (mediaPlayerRef.current) {
-        Internals20.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
+        Internals21.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -4741,11 +4765,11 @@ var VideoForPreviewAssertedShowing = ({
     sharedAudioContext,
     videoConfig.fps,
     onError,
-    videoConfig.durationInFrames,
     credentials
   ]);
+  warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
   const classNameValue = useMemo4(() => {
-    return [Internals20.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals20.truthy).join(" ");
+    return [Internals21.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals21.truthy).join(" ");
   }, [className]);
   useCommonEffects({
     mediaPlayerRef,
@@ -4789,9 +4813,10 @@ var VideoForPreviewAssertedShowing = ({
   const actualStyle = useMemo4(() => {
     return {
       ...style,
-      opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
+      opacity: isSequenceHidden ? 0 : style?.opacity ?? 1,
+      objectFit: objectFitProp
     };
-  }, [isSequenceHidden, style]);
+  }, [isSequenceHidden, objectFitProp, style]);
   if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
     return /* @__PURE__ */ jsx4(Html5Video, {
       src,
@@ -4862,7 +4887,7 @@ import {
   useState as useState5
 } from "react";
 import {
-  Internals as Internals21,
+  Internals as Internals22,
   Loop,
   random as random2,
   useCurrentFrame as useCurrentFrame5,
@@ -4894,17 +4919,18 @@ var VideoForRendering = ({
   trimBeforeValue,
   headless,
   onError,
-  credentials
+  credentials,
+  objectFit: objectFitProp
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
   }
   const frame = useCurrentFrame5();
-  const absoluteFrame = Internals21.useTimelinePosition();
+  const absoluteFrame = Internals22.useTimelinePosition();
   const { fps } = useVideoConfig4();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext6(Internals21.RenderAssetManager);
-  const startsAt = Internals21.useMediaStartsAt();
-  const sequenceContext = useContext6(Internals21.SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext6(Internals22.RenderAssetManager);
+  const startsAt = Internals22.useMediaStartsAt();
+  const sequenceContext = useContext6(Internals22.SequenceContext);
   const id = useMemo5(() => `media-video-${random2(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -4915,8 +4941,8 @@ var VideoForRendering = ({
   const { delayRender, continueRender, cancelRender: cancelRender3 } = useDelayRender2();
   const canvasRef = useRef3(null);
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
-  const audioEnabled = Internals21.useAudioEnabled();
-  const videoEnabled = Internals21.useVideoEnabled();
+  const audioEnabled = Internals22.useAudioEnabled();
+  const videoEnabled = Internals22.useVideoEnabled();
   const maxCacheSize = useMaxMediaCacheSize(logLevel);
   const [error, setError] = useState5(null);
   if (error) {
@@ -4981,7 +5007,7 @@ var VideoForRendering = ({
           return;
         }
         if (window.remotion_isMainTab) {
-          Internals21.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+          Internals22.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
         }
         setReplaceWithOffthreadVideo({
           durationInSeconds: mediaDurationInSeconds
@@ -5036,12 +5062,12 @@ var VideoForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals21.evaluateVolume({
+      const volume = Internals22.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals21.warnAboutTooHighVolume(volume);
+      Internals22.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -5097,11 +5123,18 @@ var VideoForRendering = ({
     onError,
     credentials
   ]);
+  warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
   const classNameValue = useMemo5(() => {
-    return [Internals21.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals21.truthy).join(" ");
+    return [Internals22.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals22.truthy).join(" ");
   }, [className]);
+  const styleWithObjectFit = useMemo5(() => {
+    return {
+      ...style,
+      objectFit: objectFitProp
+    };
+  }, [objectFitProp, style]);
   if (replaceWithOffthreadVideo) {
-    const fallback = /* @__PURE__ */ jsx5(Internals21.InnerOffthreadVideo, {
+    const fallback = /* @__PURE__ */ jsx5(Internals22.InnerOffthreadVideo, {
       src,
       playbackRate: playbackRate ?? 1,
       muted: muted ?? false,
@@ -5109,7 +5142,7 @@ var VideoForRendering = ({
       loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
       delayRenderRetries: delayRenderRetries ?? undefined,
       delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
-      style,
+      style: styleWithObjectFit,
       allowAmplificationDuringRender: true,
       transparent: fallbackOffthreadVideoProps?.transparent ?? true,
       toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true,
@@ -5141,7 +5174,7 @@ var VideoForRendering = ({
       }
       return /* @__PURE__ */ jsx5(Loop, {
         layout: "none",
-        durationInFrames: Internals21.calculateMediaDuration({
+        durationInFrames: Internals22.calculateMediaDuration({
           trimAfter: trimAfterValue,
           mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
           playbackRate,
@@ -5157,14 +5190,14 @@ var VideoForRendering = ({
   }
   return /* @__PURE__ */ jsx5("canvas", {
     ref: canvasRef,
-    style,
+    style: styleWithObjectFit,
     className: classNameValue
   });
 };
 
 // src/video/video.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals22;
+var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals23;
 var videoSchema = {
   volume: {
     type: "number",
@@ -5238,7 +5271,8 @@ var InnerVideo = ({
   headless,
   onError,
   credentials,
-  controls
+  controls,
+  objectFit
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5281,7 +5315,8 @@ var InnerVideo = ({
       trimBeforeValue,
       headless,
       onError,
-      credentials
+      credentials,
+      objectFit
     });
   }
   return /* @__PURE__ */ jsx6(VideoForPreview, {
@@ -5308,7 +5343,8 @@ var InnerVideo = ({
     headless: headless ?? false,
     onError,
     credentials,
-    controls
+    controls,
+    objectFit
   });
 };
 var VideoInner = ({
@@ -5338,9 +5374,10 @@ var VideoInner = ({
   headless,
   onError,
   credentials,
-  controls
+  controls,
+  objectFit
 }) => {
-  const fallbackLogLevel = Internals22.useLogLevel();
+  const fallbackLogLevel = Internals23.useLogLevel();
   return /* @__PURE__ */ jsx6(InnerVideo, {
     audioStreamIndex: audioStreamIndex ?? 0,
     className,
@@ -5368,11 +5405,12 @@ var VideoInner = ({
     headless: headless ?? false,
     onError,
     credentials,
-    controls
+    controls,
+    objectFit: objectFit ?? "contain"
   });
 };
-var Video = Internals22.wrapInSchema(VideoInner, videoSchema);
-Internals22.addSequenceStackTraces(Video);
+var Video = Internals23.wrapInSchema(VideoInner, videoSchema);
+Internals23.addSequenceStackTraces(Video);
 
 // src/index.ts
 var experimental_Audio = Audio;

package/dist/index.d.ts

@@ -38,9 +38,10 @@ export declare const experimental_Video: import("react").ComponentType<{
     headless: boolean;
     onError: import("./on-error").MediaOnError | undefined;
     credentials: RequestCredentials | undefined;
+    objectFit: import(".").VideoObjectFit;
 }>>;
 export { AudioForPreview } from './audio/audio-for-preview';
 export { AudioProps, FallbackHtml5AudioProps } from './audio/props';
 export { MediaErrorAction } from './on-error';
-export { FallbackOffthreadVideoProps, VideoProps } from './video/props';
+export { FallbackOffthreadVideoProps, VideoObjectFit, VideoProps, } from './video/props';
 export { Audio, Video };

package/dist/video/props.d.ts

@@ -3,6 +3,7 @@ import type { MediaOnError } from '../on-error';
 export type MediaErrorEvent = {
     error: Error;
 };
+export type VideoObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 export type FallbackOffthreadVideoProps = {
     acceptableTimeShiftInSeconds?: number;
     transparent?: boolean;
@@ -49,6 +50,7 @@ type OptionalVideoProps = {
     headless: boolean;
     onError: MediaOnError | undefined;
     credentials: RequestCredentials | undefined;
+    objectFit: VideoObjectFit;
 };
 export type InnerVideoProps = MandatoryVideoProps & OuterVideoProps & OptionalVideoProps;
 export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { LogLevel, LoopVolumeCurveBehavior, SequenceControls, VolumeProp } from 'remotion';
 import { type MediaOnError } from '../on-error';
-import type { FallbackOffthreadVideoProps } from './props';
+import type { FallbackOffthreadVideoProps, VideoObjectFit } from './props';
 type VideoForPreviewProps = {
     readonly src: string;
     readonly style: React.CSSProperties | undefined;
@@ -26,6 +26,7 @@ type VideoForPreviewProps = {
     readonly headless: boolean;
     readonly onError: MediaOnError | undefined;
     readonly credentials: RequestCredentials | undefined;
+    readonly objectFit: VideoObjectFit;
 };
 export declare const VideoForPreview: React.FC<VideoForPreviewProps & {
     readonly controls: SequenceControls | undefined;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
 import { type MediaOnError } from '../on-error';
-import type { FallbackOffthreadVideoProps } from './props';
+import type { FallbackOffthreadVideoProps, VideoObjectFit } from './props';
 type InnerVideoProps = {
     readonly className: string | undefined;
     readonly loop: boolean;
@@ -26,6 +26,7 @@ type InnerVideoProps = {
     readonly headless: boolean;
     readonly onError: MediaOnError | undefined;
     readonly credentials: RequestCredentials | undefined;
+    readonly objectFit: VideoObjectFit;
 };
 export declare const VideoForRendering: React.FC<InnerVideoProps>;
 export {};

package/dist/video/video.d.ts

@@ -30,4 +30,5 @@ export declare const Video: React.ComponentType<{
     headless: boolean;
     onError: import("../on-error").MediaOnError | undefined;
     credentials: RequestCredentials | undefined;
+    objectFit: import("./props").VideoObjectFit;
 }>>;

package/dist/video/warn-object-fit-css.d.ts

@@ -0,0 +1,5 @@
+export declare const warnAboutObjectFitInStyleOrClassName: ({ style, className, logLevel, }: {
+    style: import("react").CSSProperties | undefined;
+    className: string | undefined;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+}) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.440",
+	"version": "4.0.442",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -23,7 +23,7 @@
 	},
 	"dependencies": {
 		"mediabunny": "1.39.2",
-		"remotion": "4.0.440",
+		"remotion": "4.0.442",
 		"zod": "4.3.6"
 	},
 	"peerDependencies": {
@@ -31,7 +31,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.440",
+		"@remotion/eslint-config-internal": "4.0.442",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",