@remotion/media 4.0.470 → 4.0.472

package/dist/esm/index.mjs

@@ -37,12 +37,13 @@ var __callDispose = (stack, error, hasError) => {
 };
 
 // src/audio/audio.tsx
-import { useState as useState3 } from "react";
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo3, useState as useState3 } from "react";
 import {
+  Internals as Internals16,
+  Sequence,
+  useRemotionEnvironment as useRemotionEnvironment2,
   useVideoConfig as useVideoConfig2
 } from "remotion";
-import { Internals as Internals16, Sequence, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
 
 // src/show-in-timeline.ts
 import { Internals } from "remotion";
@@ -4567,14 +4568,17 @@ var audioSchema = {
     max: 20,
     step: 0.01,
     default: 1,
-    description: "Volume"
+    description: "Volume",
+    hiddenFromList: false
   },
   playbackRate: {
     type: "number",
     min: 0.1,
     step: 0.01,
     default: 1,
-    description: "Playback Rate"
+    description: "Playback Rate",
+    hiddenFromList: false,
+    keyframable: false
   },
   loop: { type: "boolean", default: false, description: "Loop" },
   hidden: Internals16.hiddenField
@@ -4659,11 +4663,15 @@ var AudioInner = (props) => {
     })
   });
 };
-var Audio = Internals16.wrapInSchema(AudioInner, audioSchema);
+var Audio = Internals16.wrapInSchema({
+  Component: AudioInner,
+  schema: audioSchema,
+  supportsEffects: false
+});
 Internals16.addSequenceStackTraces(Audio);
 
 // src/video/video.tsx
-import { useMemo as useMemo6, useState as useState6 } from "react";
+import React6, { useMemo as useMemo6, useState as useState6 } from "react";
 import {
   Internals as Internals20,
   Sequence as Sequence2,
@@ -4673,6 +4681,7 @@ import {
 
 // src/video/video-for-preview.tsx
 import {
+  useCallback,
   useContext as useContext4,
   useEffect as useEffect2,
   useLayoutEffect as useLayoutEffect3,
@@ -4772,7 +4781,9 @@ var VideoForPreviewAssertedShowing = ({
   objectFit: objectFitProp,
   _experimentalInitiallyDrawCachedFrame,
   effects,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  refForOutline,
+  ...props
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4789,6 +4800,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);
@@ -4858,8 +4876,8 @@ var VideoForPreviewAssertedShowing = ({
     if (!_experimentalInitiallyDrawCachedFrame) {
       return;
     }
-    const canvas = canvasRef.current;
     return () => {
+      const canvas = canvasRef.current;
       if (!canvas || !hasDrawnRealFrameRef.current || isPremountingRef.current) {
         return;
       }
@@ -5063,6 +5081,8 @@ var VideoForPreviewAssertedShowing = ({
   }, [objectFitProp, style]);
   if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
     return /* @__PURE__ */ jsx4(Html5Video, {
+      ...props,
+      ref: fallbackVideoRef,
       src,
       style: actualStyle,
       className,
@@ -5083,7 +5103,8 @@ var VideoForPreviewAssertedShowing = ({
     return null;
   }
   return /* @__PURE__ */ jsx4("canvas", {
-    ref: canvasRef,
+    ...props,
+    ref: canvasRefCallback,
     style: actualStyle,
     className: classNameValue
   });
@@ -5164,7 +5185,8 @@ var VideoForRendering = ({
   credentials,
   requestInit,
   objectFit: objectFitProp,
-  effects
+  effects,
+  ...props
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
@@ -5399,6 +5421,7 @@ var VideoForRendering = ({
   }, [objectFitProp, style]);
   if (replaceWithOffthreadVideo) {
     const fallback = /* @__PURE__ */ jsx5(Internals19.InnerOffthreadVideo, {
+      ...props,
       src,
       playbackRate: playbackRate ?? 1,
       muted: muted ?? false,
@@ -5454,6 +5477,7 @@ var VideoForRendering = ({
     return null;
   }
   return /* @__PURE__ */ jsx5("canvas", {
+    ...props,
     ref: canvasRef,
     style: styleWithObjectFit,
     className: classNameValue
@@ -5470,14 +5494,17 @@ var videoSchema = {
     max: 20,
     step: 0.01,
     default: 1,
-    description: "Volume"
+    description: "Volume",
+    hiddenFromList: false
   },
   playbackRate: {
     type: "number",
     min: 0.1,
     step: 0.01,
     default: 1,
-    description: "Playback Rate"
+    description: "Playback Rate",
+    hiddenFromList: false,
+    keyframable: false
   },
   hidden: {
     type: "boolean",
@@ -5517,7 +5544,9 @@ var InnerVideo = ({
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
   effects,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  refForOutline,
+  ...props
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5538,6 +5567,7 @@ var InnerVideo = ({
   validateMediaProps2({ playbackRate, volume }, "Video");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx6(VideoForRendering, {
+      ...props,
       audioStreamIndex: audioStreamIndex ?? 0,
       className,
       delayRenderRetries: delayRenderRetries ?? null,
@@ -5566,6 +5596,7 @@ var InnerVideo = ({
     });
   }
   return /* @__PURE__ */ jsx6(VideoForPreview, {
+    ...props,
     setMediaDurationInSeconds,
     audioStreamIndex: audioStreamIndex ?? 0,
     className,
@@ -5592,7 +5623,8 @@ var InnerVideo = ({
     controls,
     objectFit,
     effects,
-    _experimentalInitiallyDrawCachedFrame
+    _experimentalInitiallyDrawCachedFrame,
+    refForOutline
   });
 };
 var VideoInner = ({
@@ -5628,7 +5660,8 @@ var VideoInner = ({
   effects,
   durationInFrames,
   from,
-  hidden
+  hidden,
+  ...props
 }) => {
   const fallbackLogLevel = Internals20.useLogLevel();
   const [mediaVolume] = Internals20.useMediaVolumeState();
@@ -5675,6 +5708,7 @@ var VideoInner = ({
     overrideId: controls?.overrideId ?? null
   });
   const memoizedEffectDefinitions = Internals20.useMemoizedEffectDefinitions(effects ?? []);
+  const refForOutline = React6.useRef(null);
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -5689,9 +5723,11 @@ var VideoInner = ({
     _experimentalControls: controls,
     _remotionInternalLoopDisplay: loopDisplay,
     _remotionInternalEffects: memoizedEffectDefinitions,
+    _remotionInternalRefForOutline: refForOutline,
     showInTimeline: showInTimeline ?? true,
     hidden,
     children: /* @__PURE__ */ jsx6(InnerVideo, {
+      ...props,
       audioStreamIndex: audioStreamIndex ?? 0,
       className,
       delayRenderRetries: delayRenderRetries ?? null,
@@ -5721,11 +5757,16 @@ var VideoInner = ({
       objectFit: objectFit ?? "contain",
       _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
       effects: memoizedEffects,
-      setMediaDurationInSeconds
+      setMediaDurationInSeconds,
+      refForOutline
     })
   });
 };
-var Video = Internals20.wrapInSchema(VideoInner, videoSchema);
+var Video = Internals20.wrapInSchema({
+  Component: VideoInner,
+  schema: videoSchema,
+  supportsEffects: true
+});
 Internals20.addSequenceStackTraces(Video);
 
 // src/index.ts

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;
-}> & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name">>;
+}> & 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> & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name">>;
 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,3 +1,4 @@
+import type React from 'react';
 import type { EffectDefinitionAndStack, EffectsProp, LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, SequenceProps, VolumeProp } from 'remotion';
 import type { MediaOnError } from '../on-error';
 import type { MediaRequestInit } from '../request-init';
@@ -59,8 +60,9 @@ type OptionalVideoProps = {
     _experimentalInitiallyDrawCachedFrame: boolean;
     effects: EffectsProp;
 };
-export type InnerVideoProps = MandatoryVideoProps & OuterVideoProps & Omit<OptionalVideoProps, 'effects'> & {
+export type NativeVideoProps = Omit<React.HTMLAttributes<HTMLElement>, keyof MandatoryVideoProps | keyof OuterVideoProps | keyof OptionalVideoProps | 'onError'> & Record<`data-${string}`, string | undefined>;
+export type InnerVideoProps = MandatoryVideoProps & OuterVideoProps & Omit<OptionalVideoProps, 'effects'> & NativeVideoProps & {
     effects: EffectDefinitionAndStack<unknown>[];
 };
-export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & Pick<SequenceProps, 'durationInFrames' | 'from' | 'name' | 'hidden'>;
+export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & NativeVideoProps & Pick<SequenceProps, 'durationInFrames' | 'from' | 'name' | 'hidden'>;
 export {};

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

@@ -2,8 +2,8 @@ import React from 'react';
 import type { EffectDefinitionAndStack, LogLevel, LoopVolumeCurveBehavior, SequenceControls, VolumeProp } from 'remotion';
 import { type MediaOnError } from '../on-error';
 import type { MediaRequestInit } from '../request-init';
-import type { FallbackOffthreadVideoProps, VideoObjectFit } from './props';
-type VideoForPreviewProps = {
+import type { FallbackOffthreadVideoProps, NativeVideoProps, VideoObjectFit } from './props';
+type VideoForPreviewProps = NativeVideoProps & {
     readonly src: string;
     readonly style: React.CSSProperties | undefined;
     readonly playbackRate: number;
@@ -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

@@ -2,8 +2,8 @@ import React from 'react';
 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';
-type InnerVideoProps = {
+import type { FallbackOffthreadVideoProps, NativeVideoProps, VideoObjectFit } from './props';
+type InnerVideoProps = NativeVideoProps & {
     readonly className: string | undefined;
     readonly loop: boolean;
     readonly src: string;

package/dist/video/video.d.ts

@@ -32,4 +32,4 @@ export declare const Video: React.ComponentType<{
     objectFit: import("./props").VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
     effects: import("remotion").EffectsProp;
-}> & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name">>;
+}> & 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> & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name">>;

package/package.json

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