@remotion/media 4.0.468 → 4.0.470

package/dist/esm/index.mjs

@@ -2060,14 +2060,14 @@ var useCommonEffects = ({
   }, [durationInFrames, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
   useLayoutEffect(() => {
     const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
+    if (!mediaPlayer) {
       return;
     }
     mediaPlayer.setIsPremounting(isPremounting);
   }, [isPremounting, mediaPlayerReady, mediaPlayerRef]);
   useLayoutEffect(() => {
     const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
+    if (!mediaPlayer) {
       return;
     }
     mediaPlayer.setIsPostmounting(isPostmounting);
@@ -4665,9 +4665,11 @@ Internals16.addSequenceStackTraces(Audio);
 // src/video/video.tsx
 import { useMemo as useMemo6, useState as useState6 } from "react";
 import {
+  Internals as Internals20,
+  Sequence as Sequence2,
+  useRemotionEnvironment as useRemotionEnvironment4,
   useVideoConfig as useVideoConfig5
 } from "remotion";
-import { Internals as Internals20, Sequence as Sequence2, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
 
 // src/video/video-for-preview.tsx
 import {
@@ -5161,7 +5163,8 @@ var VideoForRendering = ({
   onError,
   credentials,
   requestInit,
-  objectFit: objectFitProp
+  objectFit: objectFitProp,
+  effects
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
@@ -5186,6 +5189,7 @@ var VideoForRendering = ({
   const audioEnabled = Internals19.useAudioEnabled();
   const videoEnabled = Internals19.useVideoEnabled();
   const maxCacheSize = useMaxMediaCacheSize(logLevel);
+  const effectChainState = Internals19.useEffectChainState();
   const [error, setError] = useState5(null);
   if (error) {
     throw error;
@@ -5232,7 +5236,7 @@ var VideoForRendering = ({
       maxCacheSize,
       credentials,
       requestInit: initialRequestInit
-    }).then((result) => {
+    }).then(async (result) => {
       const handleError = (err, clientSideError, fallbackMessage, mediaDurationInSeconds) => {
         if (environment.isClientSideRendering) {
           cancelRender3(clientSideError);
@@ -5287,6 +5291,20 @@ var VideoForRendering = ({
           context.canvas.height = imageBitmap.height;
           context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
           context.drawImage(imageBitmap, 0, 0);
+          if (effects.length > 0) {
+            const completed = await Internals19.runEffectChain({
+              state: effectChainState.get(imageBitmap.width, imageBitmap.height),
+              source: context.canvas,
+              effects,
+              output: context.canvas,
+              width: imageBitmap.width,
+              height: imageBitmap.height
+            });
+            if (!completed) {
+              imageBitmap.close();
+              return;
+            }
+          }
         }
         imageBitmap.close();
       } else if (videoEnabled) {
@@ -5365,6 +5383,8 @@ var VideoForRendering = ({
     headless,
     onError,
     credentials,
+    effectChainState,
+    effects,
     initialRequestInit
   ]);
   warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
@@ -5541,7 +5561,8 @@ var InnerVideo = ({
       onError,
       credentials,
       requestInit,
-      objectFit
+      objectFit,
+      effects
     });
   }
   return /* @__PURE__ */ jsx6(VideoForPreview, {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
+import type { EffectDefinitionAndStack, LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
 import { type MediaOnError } from '../on-error';
 import type { MediaRequestInit } from '../request-init';
 import type { FallbackOffthreadVideoProps, VideoObjectFit } from './props';
@@ -28,6 +28,7 @@ type InnerVideoProps = {
     readonly credentials: RequestCredentials | undefined;
     readonly requestInit: MediaRequestInit | undefined;
     readonly objectFit: VideoObjectFit;
+    readonly effects: EffectDefinitionAndStack<unknown>[];
 };
 export declare const VideoForRendering: React.FC<InnerVideoProps>;
 export {};

package/package.json

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