@remotion/media 4.0.494 → 4.0.495

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

@@ -4,6 +4,7 @@ import { type MediaOnError } from '../on-error';
 import type { MediaRequestInit } from '../request-init';
 import type { FallbackHtml5AudioProps } from './props';
 type InnerAudioProps = {
+    readonly style: React.CSSProperties | null;
     readonly loop?: boolean;
     readonly src: string;
     readonly logLevel?: LogLevel;

package/dist/audio/audio.d.ts

@@ -21,4 +21,4 @@ export declare const Audio: React.ComponentType<{
     onError?: import("../on-error").MediaOnError | undefined;
     credentials?: RequestCredentials | undefined;
     requestInit?: import("..").MediaRequestInit | undefined;
-} & import("remotion").InteractiveBaseProps>;
+} & import("remotion").InteractiveBaseProps & Pick<import("remotion").InteractivePremountProps, "postmountFor" | "premountFor">>;

package/dist/audio/props.d.ts

@@ -1,4 +1,4 @@
-import type { InteractiveBaseProps, LogLevel, LoopVolumeCurveBehavior, VolumeProp } from 'remotion';
+import type { InteractiveBaseProps, InteractivePremountProps, LogLevel, LoopVolumeCurveBehavior, VolumeProp } from 'remotion';
 import type { MediaOnError } from '../on-error';
 import type { MediaRequestInit } from '../request-init';
 export type FallbackHtml5AudioProps = {
@@ -38,4 +38,4 @@ export type AudioProps = {
      */
     credentials?: RequestCredentials;
     requestInit?: MediaRequestInit;
-} & InteractiveBaseProps;
+} & InteractiveBaseProps & Pick<InteractivePremountProps, 'premountFor' | 'postmountFor'>;

package/dist/esm/index.mjs

@@ -39,6 +39,7 @@ var __callDispose = (stack, error, hasError) => {
 // src/audio/audio.tsx
 import { useMemo as useMemo3, useState as useState3 } from "react";
 import {
+  Freeze,
   Internals as Internals17,
   Interactive,
   Sequence,
@@ -2379,7 +2380,8 @@ var AudioForPreviewAssertedShowing = ({
   onError,
   credentials,
   requestInit,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  style
 }) => {
   const videoConfig = useUnsafeVideoConfig();
   const frame = useCurrentFrame();
@@ -2609,6 +2611,7 @@ var AudioForPreviewAssertedShowing = ({
       name,
       loop,
       showInTimeline,
+      style: style ?? undefined,
       stack: stack ?? undefined,
       toneFrequency,
       audioStreamIndex,
@@ -2639,7 +2642,8 @@ var AudioForPreview = ({
   onError,
   credentials,
   requestInit,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  style
 }) => {
   const preloadedSrc = usePreload(src);
   const defaultLogLevel = Internals7.useLogLevel();
@@ -2693,7 +2697,8 @@ var AudioForPreview = ({
     credentials,
     requestInit,
     fallbackHtml5AudioProps,
-    setMediaDurationInSeconds
+    setMediaDurationInSeconds,
+    style
   });
 };
 
@@ -4883,6 +4888,7 @@ var audioSchema = {
     keyframable: false
   },
   ...Internals17.baseSchema,
+  ...Internals17.premountSchema,
   volume: {
     type: "number",
     min: 0,
@@ -4913,6 +4919,9 @@ var AudioInner = (props) => {
     durationInFrames,
     freeze,
     hidden,
+    style,
+    premountFor,
+    postmountFor,
     ...otherProps
   } = props;
   const environment = useRemotionEnvironment2();
@@ -4955,6 +4964,24 @@ var AudioInner = (props) => {
     type: "audio",
     data: basicInfo
   }), [basicInfo]);
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = Internals17.usePremounting({
+    from: from ?? 0,
+    durationInFrames: basicInfo.duration,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: null,
+    styleWhilePostmounted: null,
+    hideWhilePremounted: "display-none"
+  });
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -4962,26 +4989,36 @@ var AudioInner = (props) => {
   if (sequenceDurationInFrames === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx3(Sequence, {
-    layout: "none",
-    from: from ?? 0,
-    durationInFrames: basicInfo.duration,
-    freeze,
-    _remotionInternalStack: stack,
-    _remotionInternalIsMedia: isMedia,
-    name: name ?? "<Audio>",
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/media/audio" : undefined,
-    controls,
-    _remotionInternalLoopDisplay: loopDisplay,
-    showInTimeline: showInTimeline ?? true,
-    hidden,
-    children: environment.isRendering ? /* @__PURE__ */ jsx3(AudioForRendering, {
-      ...otherProps
-    }) : /* @__PURE__ */ jsx3(AudioForPreview, {
-      name,
-      ...otherProps,
-      stack: stack ?? null,
-      setMediaDurationInSeconds
+  return /* @__PURE__ */ jsx3(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx3(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      durationInFrames: basicInfo.duration,
+      freeze,
+      _remotionInternalStack: stack,
+      _remotionInternalIsMedia: isMedia,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      name: name ?? "<Audio>",
+      _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/media/audio" : undefined,
+      controls,
+      _remotionInternalLoopDisplay: loopDisplay,
+      showInTimeline: showInTimeline ?? true,
+      hidden,
+      children: environment.isRendering ? /* @__PURE__ */ jsx3(AudioForRendering, {
+        ...otherProps,
+        style: premountingStyle ?? undefined
+      }) : /* @__PURE__ */ jsx3(AudioForPreview, {
+        name,
+        ...otherProps,
+        style: premountingStyle,
+        stack: stack ?? null,
+        setMediaDurationInSeconds
+      })
     })
   });
 };
@@ -4996,6 +5033,7 @@ var Audio = Interactive.withSchema({
 // src/video/video.tsx
 import React6, { useMemo as useMemo6, useState as useState6 } from "react";
 import {
+  Freeze as Freeze2,
   Internals as Internals22,
   Interactive as Interactive2,
   Sequence as Sequence2,
@@ -5854,6 +5892,8 @@ var videoSchema = {
     keyframable: false
   },
   ...Internals22.baseSchema,
+  ...Internals22.premountSchema,
+  ...Internals22.premountStyleSchema,
   volume: {
     type: "number",
     min: 0,
@@ -6024,6 +6064,10 @@ var VideoInner = ({
   from,
   freeze,
   hidden,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   ...props
 }) => {
   const fallbackLogLevel = Internals22.useLogLevel();
@@ -6079,57 +6123,83 @@ var VideoInner = ({
   });
   const memoizedEffectDefinitions = Internals22.useMemoizedEffectDefinitions(effects ?? []);
   const refForOutline = React6.useRef(null);
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = Internals22.usePremounting({
+    from: from ?? 0,
+    durationInFrames: videoSequenceDuration ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
   if (sequenceDurationInFrames === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx6(Sequence2, {
-    layout: "none",
-    from: from ?? 0,
-    durationInFrames: videoSequenceDuration,
-    freeze,
-    _remotionInternalStack: stack,
-    _remotionInternalIsMedia: isMedia,
-    name: name ?? "<Video>",
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/media/video" : undefined,
-    controls,
-    _remotionInternalLoopDisplay: loopDisplay,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    outlineRef: refForOutline,
-    showInTimeline: showInTimeline ?? true,
-    hidden,
-    children: /* @__PURE__ */ jsx6(InnerVideo, {
-      ...props,
-      audioStreamIndex: audioStreamIndex ?? 0,
-      className,
-      delayRenderRetries: delayRenderRetries ?? null,
-      delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
-      disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
-      fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {},
-      logLevel: logLevel ?? fallbackLogLevel,
-      loop: loop ?? false,
-      loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
-      muted: muted ?? false,
-      onVideoFrame,
-      playbackRate: playbackRate ?? 1,
-      showInTimeline: showInTimeline ?? true,
-      src,
-      style: style ?? {},
-      trimAfter,
-      trimBefore,
-      volume: volume ?? 1,
-      toneFrequency: toneFrequency ?? 1,
-      stack,
-      debugOverlay: debugOverlay ?? false,
-      headless: headless ?? false,
-      onError,
-      credentials,
-      requestInit,
+  return /* @__PURE__ */ jsx6(Freeze2, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx6(Sequence2, {
+      layout: "none",
+      from: from ?? 0,
+      durationInFrames: videoSequenceDuration,
+      freeze,
+      _remotionInternalStack: stack,
+      _remotionInternalIsMedia: isMedia,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      name: name ?? "<Video>",
+      _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/media/video" : undefined,
       controls,
-      objectFit: objectFit ?? "contain",
-      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
-      effects: memoizedEffects,
-      setMediaDurationInSeconds,
-      refForOutline
+      _remotionInternalLoopDisplay: loopDisplay,
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      outlineRef: refForOutline,
+      showInTimeline: showInTimeline ?? true,
+      hidden,
+      children: /* @__PURE__ */ jsx6(InnerVideo, {
+        ...props,
+        audioStreamIndex: audioStreamIndex ?? 0,
+        className,
+        delayRenderRetries: delayRenderRetries ?? null,
+        delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
+        disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
+        fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {},
+        logLevel: logLevel ?? fallbackLogLevel,
+        loop: loop ?? false,
+        loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
+        muted: muted ?? false,
+        onVideoFrame,
+        playbackRate: playbackRate ?? 1,
+        showInTimeline: showInTimeline ?? true,
+        src,
+        style: premountingStyle ?? {},
+        trimAfter,
+        trimBefore,
+        volume: volume ?? 1,
+        toneFrequency: toneFrequency ?? 1,
+        stack,
+        debugOverlay: debugOverlay ?? false,
+        headless: headless ?? false,
+        onError,
+        credentials,
+        requestInit,
+        controls,
+        objectFit: objectFit ?? "contain",
+        _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
+        effects: memoizedEffects,
+        setMediaDurationInSeconds,
+        refForOutline
+      })
     })
   });
 };

package/dist/index.d.ts

@@ -25,7 +25,7 @@ export declare const experimental_Audio: import("react").ComponentType<{
     onError?: import("./on-error").MediaOnError | undefined;
     credentials?: RequestCredentials | undefined;
     requestInit?: import("./request-init").MediaRequestInit | undefined;
-} & import("remotion").InteractiveBaseProps>;
+} & import("remotion").InteractiveBaseProps & Pick<import("remotion").InteractivePremountProps, "postmountFor" | "premountFor">>;
 /**
  * @deprecated Now just `Video`
  */
@@ -62,7 +62,7 @@ export declare const experimental_Video: import("react").ComponentType<{
     objectFit: import(".").VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
     effects: import("remotion").EffectsProp;
-}> & 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> & import("remotion").InteractiveBaseProps>;
+}> & 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> & import("remotion").InteractiveBaseProps & import("remotion").InteractivePremountProps>;
 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,5 +1,5 @@
 import type React from 'react';
-import type { EffectDefinitionAndStack, EffectsProp, InteractiveBaseProps, LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
+import type { EffectDefinitionAndStack, EffectsProp, InteractiveBaseProps, InteractivePremountProps, LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
 import type { MediaOnError } from '../on-error';
 import type { MediaRequestInit } from '../request-init';
 export type MediaErrorEvent = {
@@ -64,5 +64,5 @@ export type NativeVideoProps = Omit<React.HTMLAttributes<HTMLElement>, keyof Man
 export type InnerVideoProps = MandatoryVideoProps & OuterVideoProps & Omit<OptionalVideoProps, 'effects'> & NativeVideoProps & {
     effects: EffectDefinitionAndStack<unknown>[];
 };
-export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & NativeVideoProps & InteractiveBaseProps;
+export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & NativeVideoProps & InteractiveBaseProps & InteractivePremountProps;
 export {};

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;
-}> & 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> & import("remotion").InteractiveBaseProps>;
+}> & 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> & import("remotion").InteractiveBaseProps & import("remotion").InteractivePremountProps>;

package/package.json

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