remotion 4.0.492 → 4.0.494

package/dist/cjs/HtmlInCanvas.js

@@ -12,7 +12,6 @@ const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
-const use_video_config_js_1 = require("./use-video-config.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 // Memoize the support check across the session — neither the platform
 // capability nor the chrome://flags toggle can change between calls.
@@ -357,8 +356,6 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, durationInFrames, name, ...sequenceProps }, ref) => {
-    const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
-    const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
     const setCanvasRef = (0, react_1.useCallback)((node) => {
@@ -370,7 +367,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
             ref.current = node;
         }
     }, [ref]);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 exports.htmlInCanvasSchema = {

package/dist/cjs/ResolveCompositionConfig.d.ts

@@ -1,4 +1,5 @@
 import type { AnyComposition } from './CompositionManager.js';
+import type { VideoConfigMetadataSource } from './resolve-video-config.js';
 import type { VideoConfig } from './video-config.js';
 type ResolveCompositionConfigContect = Record<string, VideoConfigState | undefined>;
 export declare const ResolveCompositionContext: import("react").Context<ResolveCompositionConfigContect | null>;
@@ -12,9 +13,11 @@ type VideoConfigState = {
 } | {
     type: 'success';
     result: VideoConfig;
+    metadataSource: VideoConfigMetadataSource | null;
 } | {
     type: 'success-and-refreshing';
     result: VideoConfig;
+    metadataSource: VideoConfigMetadataSource | null;
 } | {
     type: 'error';
     error: Error;

package/dist/cjs/ResolveCompositionConfig.js

@@ -35,6 +35,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         if (currentCompositionMetadata) {
             return {
                 type: 'success',
+                metadataSource: null,
                 result: {
                     ...currentCompositionMetadata,
                     id: composition.id,
@@ -52,6 +53,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
             (0, validate_dimensions_js_1.validateDimension)(composition.height, 'height', `in <Composition id="${composition.id}">`);
             return {
                 type: 'success',
+                metadataSource: null,
                 result: {
                     width: composition.width,
                     height: composition.height,

package/dist/cjs/Sequence.js

@@ -363,7 +363,7 @@ const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
         var _a;
         return {
             ...passedStyle,
-            opacity: premountingActive || postmountingActive ? 0 : 1,
+            opacity: premountingActive || postmountingActive ? 0 : passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.opacity,
             pointerEvents: premountingActive || postmountingActive
                 ? 'none'
                 : ((_a = passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.pointerEvents) !== null && _a !== void 0 ? _a : undefined),

package/dist/cjs/animated-image/AnimatedImage.js

@@ -14,6 +14,7 @@ const use_video_config_js_1 = require("../use-video-config.js");
 const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 const canvas_1 = require("./canvas");
 const decode_image_js_1 = require("./decode-image.js");
+const get_current_time_js_1 = require("./get-current-time.js");
 const request_init_1 = require("./request-init");
 const resolve_image_source_1 = require("./resolve-image-source");
 const animatedImageSchema = {
@@ -55,7 +56,7 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
     const [decodeHandle] = (0, react_1.useState)(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
-    const currentTime = frame / playbackRate / fps;
+    const currentTime = (0, get_current_time_js_1.getCurrentTime)({ frame, playbackRate, fps });
     const currentTimeRef = (0, react_1.useRef)(currentTime);
     currentTimeRef.current = currentTime;
     const requestInitKey = (0, request_init_1.serializeRequestInit)(requestInit);
@@ -168,8 +169,6 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
 const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
-    const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
-    const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
     const actualRef = (0, react_1.useRef)(null);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     (0, react_1.useImperativeHandle)(ref, () => {
@@ -190,7 +189,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         requestInit,
         ...canvasProps,
     };
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
 };
 exports.AnimatedImage = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: AnimatedImageInner,

package/dist/cjs/animated-image/get-current-time.d.ts

@@ -0,0 +1,5 @@
+export declare const getCurrentTime: ({ frame, playbackRate, fps, }: {
+    frame: number;
+    playbackRate: number;
+    fps: number;
+}) => number;

package/dist/cjs/animated-image/get-current-time.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentTime = void 0;
+const getCurrentTime = ({ frame, playbackRate, fps, }) => {
+    return (frame * playbackRate) / fps;
+};
+exports.getCurrentTime = getCurrentTime;

package/dist/cjs/internals.d.ts

@@ -612,7 +612,7 @@ export declare const Internals: {
     readonly EditorPropsContext: import("react").Context<import("./EditorProps.js").EditorPropsContextType>;
     readonly usePreload: (src: string) => string;
     readonly NonceContext: import("react").Context<import("./nonce.js").TNonceContext>;
-    readonly resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, inputProps: originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: {
+    readonly resolveVideoConfig: (params: {
         compositionId: string;
         compositionWidth: number | null;
         compositionHeight: number | null;
@@ -640,15 +640,34 @@ export declare const Internals: {
         type: "error";
         error: Error;
     };
+    readonly resolveVideoConfigWithMetadataOrCatch: (params: {
+        compositionId: string;
+        compositionWidth: number | null;
+        compositionHeight: number | null;
+        compositionFps: number | null;
+        compositionDurationInFrames: number | null;
+        calculateMetadata: import("./Composition.js").CalculateMetadataFunction<Record<string, unknown>> | null;
+        signal: AbortSignal;
+        defaultProps: Record<string, unknown>;
+        inputProps: Record<string, unknown>;
+    }) => {
+        type: "success";
+        result: Promise<import("./resolve-video-config.js").VideoConfigWithMetadata> | import("./resolve-video-config.js").VideoConfigWithMetadata;
+    } | {
+        type: "error";
+        error: Error;
+    };
     readonly ResolveCompositionContext: import("react").Context<{
         [x: string]: ({
             type: "loading";
         } | {
             type: "success";
             result: import("./video-config.js").VideoConfig;
+            metadataSource: import("./resolve-video-config.js").VideoConfigMetadataSource | null;
         } | {
             type: "success-and-refreshing";
             result: import("./video-config.js").VideoConfig;
+            metadataSource: import("./resolve-video-config.js").VideoConfigMetadataSource | null;
         } | {
             type: "error";
             error: Error;
@@ -659,9 +678,11 @@ export declare const Internals: {
     } | {
         type: "success";
         result: import("./video-config.js").VideoConfig;
+        metadataSource: import("./resolve-video-config.js").VideoConfigMetadataSource | null;
     } | {
         type: "success-and-refreshing";
         result: import("./video-config.js").VideoConfig;
+        metadataSource: import("./resolve-video-config.js").VideoConfigMetadataSource | null;
     } | {
         type: "error";
         error: Error;

package/dist/cjs/internals.js

@@ -195,6 +195,7 @@ exports.Internals = {
     NonceContext: nonce_js_1.NonceContext,
     resolveVideoConfig: resolve_video_config_js_1.resolveVideoConfig,
     resolveVideoConfigOrCatch: resolve_video_config_js_1.resolveVideoConfigOrCatch,
+    resolveVideoConfigWithMetadataOrCatch: resolve_video_config_js_1.resolveVideoConfigWithMetadataOrCatch,
     ResolveCompositionContext: ResolveCompositionConfig_js_1.ResolveCompositionContext,
     useResolvedVideoConfig: ResolveCompositionConfig_js_1.useResolvedVideoConfig,
     resolveCompositionsRef: ResolveCompositionConfig_js_1.resolveCompositionsRef,

package/dist/cjs/resolve-video-config.d.ts

@@ -13,7 +13,25 @@ type ResolveVideoConfigParams = {
     defaultProps: Record<string, unknown>;
     inputProps: Record<string, unknown>;
 };
-export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, inputProps: originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: ResolveVideoConfigParams) => Promise<VideoConfig> | VideoConfig;
+export type VideoConfigMetadataSource = {
+    readonly durationInFrames: 'calculate-metadata' | 'composition';
+    readonly fps: 'calculate-metadata' | 'composition';
+    readonly height: 'calculate-metadata' | 'composition';
+    readonly width: 'calculate-metadata' | 'composition';
+};
+export type VideoConfigWithMetadata = {
+    readonly metadataSource: VideoConfigMetadataSource;
+    readonly videoConfig: VideoConfig;
+};
+export declare const resolveVideoConfigWithMetadata: ({ calculateMetadata, signal, defaultProps, inputProps: originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: ResolveVideoConfigParams) => Promise<VideoConfigWithMetadata> | VideoConfigWithMetadata;
+export declare const resolveVideoConfig: (params: ResolveVideoConfigParams) => Promise<VideoConfig> | VideoConfig;
+export declare const resolveVideoConfigWithMetadataOrCatch: (params: ResolveVideoConfigParams) => {
+    type: "success";
+    result: Promise<VideoConfigWithMetadata> | VideoConfigWithMetadata;
+} | {
+    type: "error";
+    error: Error;
+};
 export declare const resolveVideoConfigOrCatch: (params: ResolveVideoConfigParams) => {
     type: "success";
     result: Promise<VideoConfig> | VideoConfig;

package/dist/cjs/resolve-video-config.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveVideoConfigOrCatch = exports.resolveVideoConfig = void 0;
+exports.resolveVideoConfigOrCatch = exports.resolveVideoConfigWithMetadataOrCatch = exports.resolveVideoConfig = exports.resolveVideoConfigWithMetadata = void 0;
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const validate_default_codec_js_1 = require("./validation/validate-default-codec.js");
@@ -42,8 +42,40 @@ const validateCalculated = ({ calculated, compositionId, compositionFps, composi
         defaultSampleRate,
     };
 };
-const resolveVideoConfig = ({ calculateMetadata, signal, defaultProps, inputProps: originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }) => {
+const makeVideoConfigWithMetadata = ({ calculated, compositionDurationInFrames, compositionFps, compositionHeight, compositionId, compositionWidth, defaultProps, originalProps, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
+    const data = validateCalculated({
+        calculated,
+        compositionDurationInFrames,
+        compositionFps,
+        compositionHeight,
+        compositionWidth,
+        compositionId,
+    });
+    return {
+        metadataSource: {
+            durationInFrames: (calculated === null || calculated === void 0 ? void 0 : calculated.durationInFrames) === undefined
+                ? 'composition'
+                : 'calculate-metadata',
+            fps: (calculated === null || calculated === void 0 ? void 0 : calculated.fps) === undefined ? 'composition' : 'calculate-metadata',
+            height: (calculated === null || calculated === void 0 ? void 0 : calculated.height) === undefined ? 'composition' : 'calculate-metadata',
+            width: (calculated === null || calculated === void 0 ? void 0 : calculated.width) === undefined ? 'composition' : 'calculate-metadata',
+        },
+        videoConfig: {
+            ...data,
+            id: compositionId,
+            defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}),
+            props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((_a = calculated === null || calculated === void 0 ? void 0 : calculated.props) !== null && _a !== void 0 ? _a : originalProps),
+            defaultCodec: (_b = data.defaultCodec) !== null && _b !== void 0 ? _b : null,
+            defaultOutName: (_c = data.defaultOutName) !== null && _c !== void 0 ? _c : null,
+            defaultVideoImageFormat: (_d = data.defaultVideoImageFormat) !== null && _d !== void 0 ? _d : null,
+            defaultPixelFormat: (_e = data.defaultPixelFormat) !== null && _e !== void 0 ? _e : null,
+            defaultProResProfile: (_f = data.defaultProResProfile) !== null && _f !== void 0 ? _f : null,
+            defaultSampleRate: (_g = data.defaultSampleRate) !== null && _g !== void 0 ? _g : null,
+        },
+    };
+};
+const resolveVideoConfigWithMetadata = ({ calculateMetadata, signal, defaultProps, inputProps: originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }) => {
     const calculatedProm = calculateMetadata
         ? calculateMetadata({
             defaultProps,
@@ -57,68 +89,53 @@ const resolveVideoConfig = ({ calculateMetadata, signal, defaultProps, inputProp
         typeof calculatedProm === 'object' &&
         'then' in calculatedProm) {
         return calculatedProm.then((c) => {
-            var _a;
-            const { height, width, durationInFrames, fps, defaultCodec, defaultOutName, defaultVideoImageFormat, defaultPixelFormat, defaultProResProfile, defaultSampleRate, } = validateCalculated({
+            return makeVideoConfigWithMetadata({
                 calculated: c,
                 compositionDurationInFrames,
                 compositionFps,
                 compositionHeight,
                 compositionWidth,
                 compositionId,
+                defaultProps,
+                originalProps,
             });
-            return {
-                width,
-                height,
-                fps,
-                durationInFrames,
-                id: compositionId,
-                defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps),
-                props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((_a = c.props) !== null && _a !== void 0 ? _a : originalProps),
-                defaultCodec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : null,
-                defaultOutName: defaultOutName !== null && defaultOutName !== void 0 ? defaultOutName : null,
-                defaultVideoImageFormat: defaultVideoImageFormat !== null && defaultVideoImageFormat !== void 0 ? defaultVideoImageFormat : null,
-                defaultPixelFormat: defaultPixelFormat !== null && defaultPixelFormat !== void 0 ? defaultPixelFormat : null,
-                defaultProResProfile: defaultProResProfile !== null && defaultProResProfile !== void 0 ? defaultProResProfile : null,
-                defaultSampleRate: defaultSampleRate !== null && defaultSampleRate !== void 0 ? defaultSampleRate : null,
-            };
         });
     }
-    const data = validateCalculated({
+    return makeVideoConfigWithMetadata({
         calculated: calculatedProm,
         compositionDurationInFrames,
         compositionFps,
         compositionHeight,
         compositionWidth,
         compositionId,
+        defaultProps,
+        originalProps,
     });
-    if (calculatedProm === null) {
+};
+exports.resolveVideoConfigWithMetadata = resolveVideoConfigWithMetadata;
+const resolveVideoConfig = (params) => {
+    const resolved = (0, exports.resolveVideoConfigWithMetadata)(params);
+    if (typeof resolved === 'object' && 'then' in resolved) {
+        return resolved.then(({ videoConfig }) => videoConfig);
+    }
+    return resolved.videoConfig;
+};
+exports.resolveVideoConfig = resolveVideoConfig;
+const resolveVideoConfigWithMetadataOrCatch = (params) => {
+    try {
         return {
-            ...data,
-            id: compositionId,
-            defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}),
-            props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(originalProps),
-            defaultCodec: null,
-            defaultOutName: null,
-            defaultVideoImageFormat: null,
-            defaultPixelFormat: null,
-            defaultProResProfile: null,
-            defaultSampleRate: null,
+            type: 'success',
+            result: (0, exports.resolveVideoConfigWithMetadata)(params),
+        };
+    }
+    catch (err) {
+        return {
+            type: 'error',
+            error: err,
         };
     }
-    return {
-        ...data,
-        id: compositionId,
-        defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}),
-        props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((_a = calculatedProm.props) !== null && _a !== void 0 ? _a : originalProps),
-        defaultCodec: (_b = calculatedProm.defaultCodec) !== null && _b !== void 0 ? _b : null,
-        defaultOutName: (_c = calculatedProm.defaultOutName) !== null && _c !== void 0 ? _c : null,
-        defaultVideoImageFormat: (_d = calculatedProm.defaultVideoImageFormat) !== null && _d !== void 0 ? _d : null,
-        defaultPixelFormat: (_e = calculatedProm.defaultPixelFormat) !== null && _e !== void 0 ? _e : null,
-        defaultProResProfile: (_f = calculatedProm.defaultProResProfile) !== null && _f !== void 0 ? _f : null,
-        defaultSampleRate: (_g = calculatedProm.defaultSampleRate) !== null && _g !== void 0 ? _g : null,
-    };
 };
-exports.resolveVideoConfig = resolveVideoConfig;
+exports.resolveVideoConfigWithMetadataOrCatch = resolveVideoConfigWithMetadataOrCatch;
 const resolveVideoConfigOrCatch = (params) => {
     try {
         const promiseOrReturnValue = (0, exports.resolveVideoConfig)(params);

package/dist/cjs/use-schema.d.ts

@@ -25,6 +25,12 @@ export type VideoConfigNumericExpression = {
     multiplicand: number;
     factorPosition: 'left' | 'right';
     value: number;
+} | {
+    type: 'video-config-subtraction';
+    identifier: string;
+    minuend: number;
+    subtrahend: number;
+    value: number;
 };
 export type CanUpdateSequencePropStatusLinearEasing = {
     type: 'linear';

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.492";
+export declare const VERSION = "4.0.494";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.492';
+exports.VERSION = '4.0.494';

package/dist/cjs/wrap-remotion-context.d.ts

@@ -15,9 +15,11 @@ export declare function useRemotionContexts(): {
         } | {
             type: "success";
             result: import("./video-config.js").VideoConfig;
+            metadataSource: import("./resolve-video-config.js").VideoConfigMetadataSource | null;
         } | {
             type: "success-and-refreshing";
             result: import("./video-config.js").VideoConfig;
+            metadataSource: import("./resolve-video-config.js").VideoConfigMetadataSource | null;
         } | {
             type: "error";
             error: Error;

package/dist/esm/index.mjs

@@ -729,6 +729,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
     if (currentCompositionMetadata) {
       return {
         type: "success",
+        metadataSource: null,
         result: {
           ...currentCompositionMetadata,
           id: composition.id,
@@ -746,6 +747,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
       validateDimension(composition.height, "height", `in <Composition id="${composition.id}">`);
       return {
         type: "success",
+        metadataSource: null,
         result: {
           width: composition.width,
           height: composition.height,
@@ -1308,7 +1310,7 @@ var getSingleChildComponent = (children) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.492";
+var VERSION = "4.0.494";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -4793,7 +4795,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   const style = useMemo14(() => {
     return {
       ...passedStyle,
-      opacity: premountingActive || postmountingActive ? 0 : 1,
+      opacity: premountingActive || postmountingActive ? 0 : passedStyle?.opacity,
       pointerEvents: premountingActive || postmountingActive ? "none" : passedStyle?.pointerEvents ?? undefined,
       ...premountingActive ? styleWhilePremounted : {},
       ...postmountingActive ? styleWhilePostmounted : {}
@@ -5403,6 +5405,15 @@ var decodeImage = async ({
   };
 };
 
+// src/animated-image/get-current-time.ts
+var getCurrentTime = ({
+  frame,
+  playbackRate,
+  fps
+}) => {
+  return frame * playbackRate / fps;
+};
+
 // src/animated-image/request-init.ts
 var serializeRequestInit = (requestInit) => {
   if (!requestInit) {
@@ -5476,7 +5487,7 @@ var AnimatedImageContent = forwardRef4(({
   const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
-  const currentTime = frame / playbackRate / fps;
+  const currentTime = getCurrentTime({ frame, playbackRate, fps });
   const currentTimeRef = useRef9(currentTime);
   currentTimeRef.current = currentTime;
   const requestInitKey = serializeRequestInit(requestInit);
@@ -5604,8 +5615,6 @@ var AnimatedImageInner = ({
   ref,
   ...sequenceProps
 }) => {
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
   const actualRef = useRef9(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   useImperativeHandle2(ref, () => {
@@ -5628,7 +5637,7 @@ var AnimatedImageInner = ({
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
-    durationInFrames: resolvedDuration,
+    durationInFrames,
     name: "<AnimatedImage>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
     controls,
@@ -9466,8 +9475,6 @@ var HtmlInCanvasInner = forwardRef9(({
   name,
   ...sequenceProps
 }, ref) => {
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const actualRef = useRef22(null);
   const setCanvasRef = useCallback16((node) => {
@@ -9479,7 +9486,7 @@ var HtmlInCanvasInner = forwardRef9(({
     }
   }, [ref]);
   return /* @__PURE__ */ jsx25(Sequence, {
-    durationInFrames: resolvedDuration,
+    durationInFrames,
     name: name ?? "<HtmlInCanvas>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas",
     controls,
@@ -10876,7 +10883,46 @@ var validateCalculated = ({
     defaultSampleRate
   };
 };
-var resolveVideoConfig = ({
+var makeVideoConfigWithMetadata = ({
+  calculated,
+  compositionDurationInFrames,
+  compositionFps,
+  compositionHeight,
+  compositionId,
+  compositionWidth,
+  defaultProps,
+  originalProps
+}) => {
+  const data = validateCalculated({
+    calculated,
+    compositionDurationInFrames,
+    compositionFps,
+    compositionHeight,
+    compositionWidth,
+    compositionId
+  });
+  return {
+    metadataSource: {
+      durationInFrames: calculated?.durationInFrames === undefined ? "composition" : "calculate-metadata",
+      fps: calculated?.fps === undefined ? "composition" : "calculate-metadata",
+      height: calculated?.height === undefined ? "composition" : "calculate-metadata",
+      width: calculated?.width === undefined ? "composition" : "calculate-metadata"
+    },
+    videoConfig: {
+      ...data,
+      id: compositionId,
+      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
+      props: serializeThenDeserializeInStudio(calculated?.props ?? originalProps),
+      defaultCodec: data.defaultCodec ?? null,
+      defaultOutName: data.defaultOutName ?? null,
+      defaultVideoImageFormat: data.defaultVideoImageFormat ?? null,
+      defaultPixelFormat: data.defaultPixelFormat ?? null,
+      defaultProResProfile: data.defaultProResProfile ?? null,
+      defaultSampleRate: data.defaultSampleRate ?? null
+    }
+  };
+};
+var resolveVideoConfigWithMetadata = ({
   calculateMetadata,
   signal,
   defaultProps,
@@ -10896,76 +10942,48 @@ var resolveVideoConfig = ({
   }) : null;
   if (calculatedProm !== null && typeof calculatedProm === "object" && "then" in calculatedProm) {
     return calculatedProm.then((c2) => {
-      const {
-        height,
-        width,
-        durationInFrames,
-        fps,
-        defaultCodec,
-        defaultOutName,
-        defaultVideoImageFormat,
-        defaultPixelFormat,
-        defaultProResProfile,
-        defaultSampleRate
-      } = validateCalculated({
+      return makeVideoConfigWithMetadata({
         calculated: c2,
         compositionDurationInFrames,
         compositionFps,
         compositionHeight,
         compositionWidth,
-        compositionId
+        compositionId,
+        defaultProps,
+        originalProps
       });
-      return {
-        width,
-        height,
-        fps,
-        durationInFrames,
-        id: compositionId,
-        defaultProps: serializeThenDeserializeInStudio(defaultProps),
-        props: serializeThenDeserializeInStudio(c2.props ?? originalProps),
-        defaultCodec: defaultCodec ?? null,
-        defaultOutName: defaultOutName ?? null,
-        defaultVideoImageFormat: defaultVideoImageFormat ?? null,
-        defaultPixelFormat: defaultPixelFormat ?? null,
-        defaultProResProfile: defaultProResProfile ?? null,
-        defaultSampleRate: defaultSampleRate ?? null
-      };
     });
   }
-  const data = validateCalculated({
+  return makeVideoConfigWithMetadata({
     calculated: calculatedProm,
     compositionDurationInFrames,
     compositionFps,
     compositionHeight,
     compositionWidth,
-    compositionId
+    compositionId,
+    defaultProps,
+    originalProps
   });
-  if (calculatedProm === null) {
+};
+var resolveVideoConfig = (params) => {
+  const resolved = resolveVideoConfigWithMetadata(params);
+  if (typeof resolved === "object" && "then" in resolved) {
+    return resolved.then(({ videoConfig }) => videoConfig);
+  }
+  return resolved.videoConfig;
+};
+var resolveVideoConfigWithMetadataOrCatch = (params) => {
+  try {
     return {
-      ...data,
-      id: compositionId,
-      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
-      props: serializeThenDeserializeInStudio(originalProps),
-      defaultCodec: null,
-      defaultOutName: null,
-      defaultVideoImageFormat: null,
-      defaultPixelFormat: null,
-      defaultProResProfile: null,
-      defaultSampleRate: null
+      type: "success",
+      result: resolveVideoConfigWithMetadata(params)
+    };
+  } catch (err) {
+    return {
+      type: "error",
+      error: err
     };
   }
-  return {
-    ...data,
-    id: compositionId,
-    defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
-    props: serializeThenDeserializeInStudio(calculatedProm.props ?? originalProps),
-    defaultCodec: calculatedProm.defaultCodec ?? null,
-    defaultOutName: calculatedProm.defaultOutName ?? null,
-    defaultVideoImageFormat: calculatedProm.defaultVideoImageFormat ?? null,
-    defaultPixelFormat: calculatedProm.defaultPixelFormat ?? null,
-    defaultProResProfile: calculatedProm.defaultProResProfile ?? null,
-    defaultSampleRate: calculatedProm.defaultSampleRate ?? null
-  };
 };
 var resolveVideoConfigOrCatch = (params) => {
   try {
@@ -11991,6 +12009,7 @@ var Internals = {
   NonceContext,
   resolveVideoConfig,
   resolveVideoConfigOrCatch,
+  resolveVideoConfigWithMetadataOrCatch,
   ResolveCompositionContext,
   useResolvedVideoConfig,
   resolveCompositionsRef,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.492";
+var VERSION = "4.0.494";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.492",
+	"version": "4.0.494",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.492",
+		"@remotion/eslint-config-internal": "4.0.494",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},