@remotion/media 4.0.470 → 4.0.471

package/dist/esm/index.mjs

@@ -4663,7 +4663,7 @@ 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,
@@ -4673,6 +4673,7 @@ import {
 
 // src/video/video-for-preview.tsx
 import {
+  useCallback,
   useContext as useContext4,
   useEffect as useEffect2,
   useLayoutEffect as useLayoutEffect3,
@@ -4772,7 +4773,8 @@ var VideoForPreviewAssertedShowing = ({
   objectFit: objectFitProp,
   _experimentalInitiallyDrawCachedFrame,
   effects,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  refForOutline
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4789,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);
@@ -5063,6 +5072,7 @@ var VideoForPreviewAssertedShowing = ({
   }, [objectFitProp, style]);
   if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
     return /* @__PURE__ */ jsx4(Html5Video, {
+      ref: fallbackVideoRef,
       src,
       style: actualStyle,
       className,
@@ -5083,7 +5093,7 @@ var VideoForPreviewAssertedShowing = ({
     return null;
   }
   return /* @__PURE__ */ jsx4("canvas", {
-    ref: canvasRef,
+    ref: canvasRefCallback,
     style: actualStyle,
     className: classNameValue
   });
@@ -5517,7 +5527,8 @@ var InnerVideo = ({
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
   effects,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  refForOutline
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5592,7 +5603,8 @@ var InnerVideo = ({
     controls,
     objectFit,
     effects,
-    _experimentalInitiallyDrawCachedFrame
+    _experimentalInitiallyDrawCachedFrame,
+    refForOutline
   });
 };
 var VideoInner = ({
@@ -5675,6 +5687,7 @@ var VideoInner = ({
     overrideId: controls?.overrideId ?? null
   });
   const memoizedEffectDefinitions = Internals20.useMemoizedEffectDefinitions(effects ?? []);
+  const refForOutline = React5.useRef(null);
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -5689,6 +5702,7 @@ var VideoInner = ({
     _experimentalControls: controls,
     _remotionInternalLoopDisplay: loopDisplay,
     _remotionInternalEffects: memoizedEffectDefinitions,
+    _remotionInternalRefForOutline: refForOutline,
     showInTimeline: showInTimeline ?? true,
     hidden,
     children: /* @__PURE__ */ jsx6(InnerVideo, {
@@ -5721,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.470",
+	"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.470",
+		"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.470",
+		"@remotion/eslint-config-internal": "4.0.471",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",