@remotion/promo-pages 4.0.492 → 4.0.494

package/dist/Homepage.js

@@ -1822,6 +1822,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
     if (currentCompositionMetadata) {
       return {
         type: "success",
+        metadataSource: null,
         result: {
           ...currentCompositionMetadata,
           id: composition.id,
@@ -1839,6 +1840,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,
@@ -2357,7 +2359,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.492";
+var VERSION = "4.0.494";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -5722,7 +5724,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 : {}
@@ -6300,6 +6302,13 @@ var decodeImage = async ({
     frameCount: selectedTrack.frameCount
   };
 };
+var getCurrentTime = ({
+  frame,
+  playbackRate,
+  fps
+}) => {
+  return frame * playbackRate / fps;
+};
 var serializeRequestInit = (requestInit) => {
   if (!requestInit) {
     return null;
@@ -6367,7 +6376,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);
@@ -6495,8 +6504,6 @@ var AnimatedImageInner = ({
   ref,
   ...sequenceProps
 }) => {
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
   const actualRef = useRef9(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   useImperativeHandle2(ref, () => {
@@ -6519,7 +6526,7 @@ var AnimatedImageInner = ({
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
-    durationInFrames: resolvedDuration,
+    durationInFrames,
     name: "<AnimatedImage>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
     controls,
@@ -10147,8 +10154,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) => {
@@ -10160,7 +10165,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,
@@ -11443,7 +11448,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,
@@ -11463,76 +11507,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 {
@@ -12412,6 +12428,7 @@ var Internals = {
   NonceContext,
   resolveVideoConfig,
   resolveVideoConfigOrCatch,
+  resolveVideoConfigWithMetadataOrCatch,
   ResolveCompositionContext,
   useResolvedVideoConfig,
   resolveCompositionsRef,
@@ -40922,7 +40939,7 @@ var getVideoSequenceDuration = ({
 };
 var PRORES_DOCS_URL = "https://www.remotion.dev/docs/videos/prores";
 var proresDecoderNotEnabledMessage = (src) => {
-  return `Cannot decode "${src}": it is encoded with Apple ProRes, which WebCodecs does not support natively. ` + `ProRes decoding is not enabled by default. Register the ProRes decoder by calling ` + `registerProresDecoder() from "@mediabunny/prores" in your entry point, before registerRoot(). ` + `See ${PRORES_DOCS_URL}. ` + `(This is required to decode a ProRes source for both preview and rendering — it is unrelated to exporting a video as ProRes.)`;
+  return `Cannot decode "${src}": it is encoded with Apple ProRes, which WebCodecs does not support natively. ` + `ProRes decoding is not enabled by default. Register the ProRes decoder by calling ` + `registerProresDecoder() from "@mediabunny/prores" in your entry point, before registerRoot(). ` + `See ${PRORES_DOCS_URL}.`;
 };
 
 class ProResDecoderNotEnabledError extends Error {
@@ -43294,7 +43311,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.492";
+var VERSION2 = "4.0.494";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";

package/dist/design.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,