@remotion/promo-pages 4.0.492 → 4.0.494

package/dist/template-modal-content.js

@@ -5052,6 +5052,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
     if (currentCompositionMetadata) {
       return {
         type: "success",
+        metadataSource: null,
         result: {
           ...currentCompositionMetadata,
           id: composition.id,
@@ -5069,6 +5070,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,
@@ -5587,7 +5589,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.492";
+var VERSION = "4.0.494";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -8952,7 +8954,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 : {}
@@ -9530,6 +9532,13 @@ var decodeImage = async ({
     frameCount: selectedTrack.frameCount
   };
 };
+var getCurrentTime = ({
+  frame,
+  playbackRate,
+  fps
+}) => {
+  return frame * playbackRate / fps;
+};
 var serializeRequestInit = (requestInit) => {
   if (!requestInit) {
     return null;
@@ -9597,7 +9606,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);
@@ -9725,8 +9734,6 @@ var AnimatedImageInner = ({
   ref,
   ...sequenceProps
 }) => {
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
   const actualRef = useRef9(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   useImperativeHandle2(ref, () => {
@@ -9749,7 +9756,7 @@ var AnimatedImageInner = ({
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
-    durationInFrames: resolvedDuration,
+    durationInFrames,
     name: "<AnimatedImage>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
     controls,
@@ -13377,8 +13384,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) => {
@@ -13390,7 +13395,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,
@@ -14673,7 +14678,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,
@@ -14693,76 +14737,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 {
@@ -15642,6 +15658,7 @@ var Internals = {
   NonceContext,
   resolveVideoConfig,
   resolveVideoConfigOrCatch,
+  resolveVideoConfigWithMetadataOrCatch,
   ResolveCompositionContext,
   useResolvedVideoConfig,
   resolveCompositionsRef,

package/dist/templates.js

@@ -5052,6 +5052,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
     if (currentCompositionMetadata) {
       return {
         type: "success",
+        metadataSource: null,
         result: {
           ...currentCompositionMetadata,
           id: composition.id,
@@ -5069,6 +5070,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,
@@ -5587,7 +5589,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.492";
+var VERSION = "4.0.494";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -8952,7 +8954,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 : {}
@@ -9530,6 +9532,13 @@ var decodeImage = async ({
     frameCount: selectedTrack.frameCount
   };
 };
+var getCurrentTime = ({
+  frame,
+  playbackRate,
+  fps
+}) => {
+  return frame * playbackRate / fps;
+};
 var serializeRequestInit = (requestInit) => {
   if (!requestInit) {
     return null;
@@ -9597,7 +9606,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);
@@ -9725,8 +9734,6 @@ var AnimatedImageInner = ({
   ref,
   ...sequenceProps
 }) => {
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
   const actualRef = useRef9(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   useImperativeHandle2(ref, () => {
@@ -9749,7 +9756,7 @@ var AnimatedImageInner = ({
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
-    durationInFrames: resolvedDuration,
+    durationInFrames,
     name: "<AnimatedImage>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
     controls,
@@ -13377,8 +13384,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) => {
@@ -13390,7 +13395,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,
@@ -14673,7 +14678,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,
@@ -14693,76 +14737,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 {
@@ -15642,6 +15658,7 @@ var Internals = {
   NonceContext,
   resolveVideoConfig,
   resolveVideoConfigOrCatch,
+  resolveVideoConfigWithMetadataOrCatch,
   ResolveCompositionContext,
   useResolvedVideoConfig,
   resolveCompositionsRef,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.492",
+	"version": "4.0.494",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -11,19 +11,19 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@remotion/animated-emoji": "4.0.492",
-		"@remotion/design": "4.0.492",
-		"@remotion/web-renderer": "4.0.492",
-		"@remotion/lottie": "4.0.492",
-		"@remotion/paths": "4.0.492",
-		"@remotion/player": "4.0.492",
-		"@remotion/shapes": "4.0.492",
-		"@remotion/media": "4.0.492",
-		"@remotion/svg-3d-engine": "4.0.492",
-		"create-video": "4.0.492",
+		"@remotion/animated-emoji": "4.0.494",
+		"@remotion/design": "4.0.494",
+		"@remotion/web-renderer": "4.0.494",
+		"@remotion/lottie": "4.0.494",
+		"@remotion/paths": "4.0.494",
+		"@remotion/player": "4.0.494",
+		"@remotion/shapes": "4.0.494",
+		"@remotion/media": "4.0.494",
+		"@remotion/svg-3d-engine": "4.0.494",
+		"create-video": "4.0.494",
 		"hls.js": "1.5.19",
 		"polished": "4.3.1",
-		"remotion": "4.0.492",
+		"remotion": "4.0.494",
 		"zod": "4.3.6",
 		"@mux/upchunk": "3.5.0",
 		"@vidstack/react": "1.12.13",
@@ -34,7 +34,7 @@
 		"@mediabunny/mp3-encoder": "1.50.8"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.492",
+		"@remotion/eslint-config-internal": "4.0.494",
 		"@eslint/eslintrc": "3.1.0",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",