@remotion/media 4.0.471 → 4.0.473

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 React5, { 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,
@@ -4774,7 +4782,8 @@ var VideoForPreviewAssertedShowing = ({
   _experimentalInitiallyDrawCachedFrame,
   effects,
   setMediaDurationInSeconds,
-  refForOutline
+  refForOutline,
+  ...props
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4867,8 +4876,8 @@ var VideoForPreviewAssertedShowing = ({
     if (!_experimentalInitiallyDrawCachedFrame) {
       return;
     }
-    const canvas = canvasRef.current;
     return () => {
+      const canvas = canvasRef.current;
       if (!canvas || !hasDrawnRealFrameRef.current || isPremountingRef.current) {
         return;
       }
@@ -5072,6 +5081,7 @@ var VideoForPreviewAssertedShowing = ({
   }, [objectFitProp, style]);
   if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
     return /* @__PURE__ */ jsx4(Html5Video, {
+      ...props,
       ref: fallbackVideoRef,
       src,
       style: actualStyle,
@@ -5093,6 +5103,7 @@ var VideoForPreviewAssertedShowing = ({
     return null;
   }
   return /* @__PURE__ */ jsx4("canvas", {
+    ...props,
     ref: canvasRefCallback,
     style: actualStyle,
     className: classNameValue
@@ -5174,7 +5185,8 @@ var VideoForRendering = ({
   credentials,
   requestInit,
   objectFit: objectFitProp,
-  effects
+  effects,
+  ...props
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
@@ -5409,6 +5421,7 @@ var VideoForRendering = ({
   }, [objectFitProp, style]);
   if (replaceWithOffthreadVideo) {
     const fallback = /* @__PURE__ */ jsx5(Internals19.InnerOffthreadVideo, {
+      ...props,
       src,
       playbackRate: playbackRate ?? 1,
       muted: muted ?? false,
@@ -5464,6 +5477,7 @@ var VideoForRendering = ({
     return null;
   }
   return /* @__PURE__ */ jsx5("canvas", {
+    ...props,
     ref: canvasRef,
     style: styleWithObjectFit,
     className: classNameValue
@@ -5480,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",
@@ -5528,7 +5545,8 @@ var InnerVideo = ({
   _experimentalInitiallyDrawCachedFrame,
   effects,
   setMediaDurationInSeconds,
-  refForOutline
+  refForOutline,
+  ...props
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5549,6 +5567,7 @@ var InnerVideo = ({
   validateMediaProps2({ playbackRate, volume }, "Video");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx6(VideoForRendering, {
+      ...props,
       audioStreamIndex: audioStreamIndex ?? 0,
       className,
       delayRenderRetries: delayRenderRetries ?? null,
@@ -5577,6 +5596,7 @@ var InnerVideo = ({
     });
   }
   return /* @__PURE__ */ jsx6(VideoForPreview, {
+    ...props,
     setMediaDurationInSeconds,
     audioStreamIndex: audioStreamIndex ?? 0,
     className,
@@ -5640,7 +5660,8 @@ var VideoInner = ({
   effects,
   durationInFrames,
   from,
-  hidden
+  hidden,
+  ...props
 }) => {
   const fallbackLogLevel = Internals20.useLogLevel();
   const [mediaVolume] = Internals20.useMediaVolumeState();
@@ -5687,7 +5708,7 @@ var VideoInner = ({
     overrideId: controls?.overrideId ?? null
   });
   const memoizedEffectDefinitions = Internals20.useMemoizedEffectDefinitions(effects ?? []);
-  const refForOutline = React5.useRef(null);
+  const refForOutline = React6.useRef(null);
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -5706,6 +5727,7 @@ var VideoInner = ({
     showInTimeline: showInTimeline ?? true,
     hidden,
     children: /* @__PURE__ */ jsx6(InnerVideo, {
+      ...props,
       audioStreamIndex: audioStreamIndex ?? 0,
       className,
       delayRenderRetries: delayRenderRetries ?? null,
@@ -5740,7 +5762,11 @@ var VideoInner = ({
     })
   });
 };
-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;

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