@remotion/media 4.0.498 → 4.0.500

package/dist/esm/index.mjs

@@ -5956,7 +5956,12 @@ var VideoForRendering = ({
 
 // src/video/video.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals22;
+var {
+  validateMediaTrimProps,
+  resolveTrimProps,
+  validateMediaProps: validateMediaProps2,
+  useCropStyle
+} = Internals22;
 var videoSchema = {
   src: {
     type: "asset",
@@ -5988,7 +5993,8 @@ var videoSchema = {
   loop: { type: "boolean", default: false, description: "Loop" },
   ...Internals22.transformSchema,
   ...Interactive2.backgroundSchema,
-  ...Interactive2.borderSchema
+  ...Interactive2.borderSchema,
+  ...Interactive2.cropSchema
 };
 var InnerVideo = ({
   src,
@@ -6142,6 +6148,10 @@ var VideoInner = ({
   postmountFor,
   styleWhilePremounted,
   styleWhilePostmounted,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   ...props
 }) => {
   const fallbackLogLevel = Internals22.useLogLevel();
@@ -6215,6 +6225,14 @@ var VideoInner = ({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: "<Video />"
+  });
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -6256,7 +6274,7 @@ var VideoInner = ({
         playbackRate: playbackRate ?? 1,
         showInTimeline: showInTimeline ?? true,
         src,
-        style: premountingStyle ?? {},
+        style: croppedStyle ?? {},
         trimAfter,
         trimBefore,
         volume: volume ?? 1,

package/dist/index.d.ts

@@ -62,7 +62,7 @@ export declare const experimental_Video: import("react").ComponentType<{
     objectFit: import(".").VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
     effects: import("remotion").EffectsProp;
-}> & Omit<import("react").HTMLAttributes<HTMLElement>, "_experimentalInitiallyDrawCachedFrame" | "audioStreamIndex" | "className" | "credentials" | "debugOverlay" | "delayRenderRetries" | "delayRenderTimeoutInMilliseconds" | "disallowFallbackToOffthreadVideo" | "effects" | "fallbackOffthreadVideoProps" | "headless" | "logLevel" | "loop" | "loopVolumeCurveBehavior" | "muted" | "objectFit" | "onError" | "onVideoFrame" | "playbackRate" | "requestInit" | "showInTimeline" | "src" | "stack" | "style" | "toneFrequency" | "trimAfter" | "trimBefore" | "volume"> & Record<`data-${string}`, string | undefined> & import("remotion").InteractiveBaseProps & import("remotion").InteractivePremountProps>;
+}> & Omit<import("react").HTMLAttributes<HTMLElement>, "_experimentalInitiallyDrawCachedFrame" | "audioStreamIndex" | "className" | "credentials" | "debugOverlay" | "delayRenderRetries" | "delayRenderTimeoutInMilliseconds" | "disallowFallbackToOffthreadVideo" | "effects" | "fallbackOffthreadVideoProps" | "headless" | "logLevel" | "loop" | "loopVolumeCurveBehavior" | "muted" | "objectFit" | "onError" | "onVideoFrame" | "playbackRate" | "requestInit" | "showInTimeline" | "src" | "stack" | "style" | "toneFrequency" | "trimAfter" | "trimBefore" | "volume"> & Record<`data-${string}`, string | undefined> & import("remotion").InteractiveBaseProps & import("remotion").InteractiveCropProps & import("remotion").InteractivePremountProps>;
 export { AudioForPreview } from './audio/audio-for-preview';
 export { AudioProps, FallbackHtml5AudioProps } from './audio/props';
 export { MediaErrorAction } from './on-error';

package/dist/video/props.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { EffectDefinitionAndStack, EffectsProp, InteractiveBaseProps, InteractivePremountProps, LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
+import type { EffectDefinitionAndStack, EffectsProp, InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps, LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
 import type { MediaOnError } from '../on-error';
 import type { MediaRequestInit } from '../request-init';
 export type MediaErrorEvent = {
@@ -64,5 +64,5 @@ export type NativeVideoProps = Omit<React.HTMLAttributes<HTMLElement>, keyof Man
 export type InnerVideoProps = MandatoryVideoProps & OuterVideoProps & Omit<OptionalVideoProps, 'effects'> & NativeVideoProps & {
     effects: EffectDefinitionAndStack<unknown>[];
 };
-export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & NativeVideoProps & InteractiveBaseProps & InteractivePremountProps;
+export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & NativeVideoProps & InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps;
 export {};

package/dist/video/video.d.ts

@@ -34,4 +34,4 @@ export declare const Video: React.ComponentType<{
     objectFit: import("./props").VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
     effects: import("remotion").EffectsProp;
-}> & Omit<React.HTMLAttributes<HTMLElement>, "_experimentalInitiallyDrawCachedFrame" | "audioStreamIndex" | "className" | "credentials" | "debugOverlay" | "delayRenderRetries" | "delayRenderTimeoutInMilliseconds" | "disallowFallbackToOffthreadVideo" | "effects" | "fallbackOffthreadVideoProps" | "headless" | "logLevel" | "loop" | "loopVolumeCurveBehavior" | "muted" | "objectFit" | "onError" | "onVideoFrame" | "playbackRate" | "requestInit" | "showInTimeline" | "src" | "stack" | "style" | "toneFrequency" | "trimAfter" | "trimBefore" | "volume"> & Record<`data-${string}`, string | undefined> & import("remotion").InteractiveBaseProps & import("remotion").InteractivePremountProps>;
+}> & Omit<React.HTMLAttributes<HTMLElement>, "_experimentalInitiallyDrawCachedFrame" | "audioStreamIndex" | "className" | "credentials" | "debugOverlay" | "delayRenderRetries" | "delayRenderTimeoutInMilliseconds" | "disallowFallbackToOffthreadVideo" | "effects" | "fallbackOffthreadVideoProps" | "headless" | "logLevel" | "loop" | "loopVolumeCurveBehavior" | "muted" | "objectFit" | "onError" | "onVideoFrame" | "playbackRate" | "requestInit" | "showInTimeline" | "src" | "stack" | "style" | "toneFrequency" | "trimAfter" | "trimBefore" | "volume"> & Record<`data-${string}`, string | undefined> & import("remotion").InteractiveBaseProps & import("remotion").InteractiveCropProps & import("remotion").InteractivePremountProps>;

package/package.json

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