@remotion/media 4.0.469 → 4.0.471

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);
@@ -4663,14 +4663,17 @@ var Audio = Internals16.wrapInSchema(AudioInner, audioSchema);
 Internals16.addSequenceStackTraces(Audio);
 
 // src/video/video.tsx
-import { useMemo as useMemo6, useState as useState6 } from "react";
+import React5, { 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 {
+  useCallback,
   useContext as useContext4,
   useEffect as useEffect2,
   useLayoutEffect as useLayoutEffect3,
@@ -4770,7 +4773,8 @@ var VideoForPreviewAssertedShowing = ({
   objectFit: objectFitProp,
   _experimentalInitiallyDrawCachedFrame,
   effects,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  refForOutline
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4787,6 +4791,13 @@ var VideoForPreviewAssertedShowing = ({
   const { playbackRate: globalPlaybackRate } = Internals18.usePlaybackRate();
   const sharedAudioContext = useContext4(SharedAudioContext2);
   const buffer = useBufferState2();
+  const canvasRefCallback = useCallback((canvas) => {
+    canvasRef.current = canvas;
+    refForOutline.current = canvas;
+  }, [refForOutline]);
+  const fallbackVideoRef = useCallback((video) => {
+    refForOutline.current = video;
+  }, [refForOutline]);
   const [mediaMuted] = useMediaMutedState2();
   const [mediaVolume] = useMediaVolumeState2();
   const volumePropFrame = useFrameForVolumeProp2(loopVolumeCurveBehavior);
@@ -5061,6 +5072,7 @@ var VideoForPreviewAssertedShowing = ({
   }, [objectFitProp, style]);
   if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
     return /* @__PURE__ */ jsx4(Html5Video, {
+      ref: fallbackVideoRef,
       src,
       style: actualStyle,
       className,
@@ -5081,7 +5093,7 @@ var VideoForPreviewAssertedShowing = ({
     return null;
   }
   return /* @__PURE__ */ jsx4("canvas", {
-    ref: canvasRef,
+    ref: canvasRefCallback,
     style: actualStyle,
     className: classNameValue
   });
@@ -5161,7 +5173,8 @@ var VideoForRendering = ({
   onError,
   credentials,
   requestInit,
-  objectFit: objectFitProp
+  objectFit: objectFitProp,
+  effects
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
@@ -5186,6 +5199,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 +5246,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 +5301,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 +5393,8 @@ var VideoForRendering = ({
     headless,
     onError,
     credentials,
+    effectChainState,
+    effects,
     initialRequestInit
   ]);
   warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
@@ -5497,7 +5527,8 @@ var InnerVideo = ({
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
   effects,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  refForOutline
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5541,7 +5572,8 @@ var InnerVideo = ({
       onError,
       credentials,
       requestInit,
-      objectFit
+      objectFit,
+      effects
     });
   }
   return /* @__PURE__ */ jsx6(VideoForPreview, {
@@ -5571,7 +5603,8 @@ var InnerVideo = ({
     controls,
     objectFit,
     effects,
-    _experimentalInitiallyDrawCachedFrame
+    _experimentalInitiallyDrawCachedFrame,
+    refForOutline
   });
 };
 var VideoInner = ({
@@ -5654,6 +5687,7 @@ var VideoInner = ({
     overrideId: controls?.overrideId ?? null
   });
   const memoizedEffectDefinitions = Internals20.useMemoizedEffectDefinitions(effects ?? []);
+  const refForOutline = React5.useRef(null);
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -5668,6 +5702,7 @@ var VideoInner = ({
     _experimentalControls: controls,
     _remotionInternalLoopDisplay: loopDisplay,
     _remotionInternalEffects: memoizedEffectDefinitions,
+    _remotionInternalRefForOutline: refForOutline,
     showInTimeline: showInTimeline ?? true,
     hidden,
     children: /* @__PURE__ */ jsx6(InnerVideo, {
@@ -5700,7 +5735,8 @@ var VideoInner = ({
       objectFit: objectFit ?? "contain",
       _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
       effects: memoizedEffects,
-      setMediaDurationInSeconds
+      setMediaDurationInSeconds,
+      refForOutline
     })
   });
 };

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

@@ -30,6 +30,7 @@ type VideoForPreviewProps = {
     readonly setMediaDurationInSeconds: (durationInSeconds: number) => void;
     readonly _experimentalInitiallyDrawCachedFrame: boolean;
     readonly effects: EffectDefinitionAndStack<unknown>[];
+    readonly refForOutline: React.RefObject<HTMLElement | null>;
 };
 export declare const VideoForPreview: React.FC<VideoForPreviewProps & {
     readonly controls: SequenceControls | undefined;

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.469",
+	"version": "4.0.471",
 	"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.469",
+		"remotion": "4.0.471",
 		"zod": "4.3.6"
 	},
 	"peerDependencies": {
@@ -31,7 +31,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.469",
+		"@remotion/eslint-config-internal": "4.0.471",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",