@remotion/promo-pages 4.0.484 → 4.0.486

package/dist/experts.js

@@ -1091,8 +1091,8 @@ import {
   forwardRef as forwardRef10,
   useCallback as useCallback17,
   useContext as useContext32,
-  useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle7,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo31,
   useRef as useRef23,
   useState as useState16
@@ -1100,7 +1100,7 @@ import {
 import { jsx as jsx26 } from "react/jsx-runtime";
 import { forwardRef as forwardRef11, useCallback as useCallback18, useState as useState17 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
+import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect11, useRef as useRef24 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -1126,8 +1126,8 @@ import { useCallback as useCallback24 } from "react";
 import {
   useCallback as useCallback22,
   useContext as useContext36,
-  useEffect as useEffect18,
-  useLayoutEffect as useLayoutEffect11,
+  useEffect as useEffect17,
+  useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo35,
   useState as useState19
 } from "react";
@@ -1136,13 +1136,13 @@ import React37, {
   forwardRef as forwardRef13,
   useCallback as useCallback23,
   useContext as useContext37,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
   useRef as useRef27,
   useState as useState20
 } from "react";
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React39, { useMemo as useMemo37 } from "react";
@@ -1159,9 +1159,9 @@ import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as
 import {
   forwardRef as forwardRef15,
   useContext as useContext38,
-  useEffect as useEffect21,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect12,
+  useLayoutEffect as useLayoutEffect13,
   useMemo as useMemo39,
   useRef as useRef28
 } from "react";
@@ -2335,7 +2335,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.484";
+var VERSION = "4.0.486";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2741,6 +2741,12 @@ var textSchema = {
     default: undefined,
     description: "Color"
   },
+  "style.fontFamily": {
+    type: "font-family",
+    default: undefined,
+    description: "Font family",
+    keyframable: false
+  },
   "style.fontSize": {
     type: "number",
     default: undefined,
@@ -2806,6 +2812,14 @@ var textSchema = {
     hiddenFromList: false
   }
 };
+var textContentSchema = {
+  children: {
+    type: "text-content",
+    default: "",
+    description: "Text",
+    keyframable: false
+  }
+};
 var premountSchema = {
   premountFor: {
     type: "number",
@@ -5173,10 +5187,21 @@ var getNestedValue = (obj, key) => {
   }
   return current;
 };
-var readValuesFromProps = (props, keys) => {
+var getRuntimeValueForSchemaKey = ({
+  flatSchema,
+  key,
+  props
+}) => {
+  const value = getNestedValue(props, key);
+  if (flatSchema[key]?.type === "text-content" && typeof value !== "string") {
+    return;
+  }
+  return value;
+};
+var readValuesFromProps = (props, keys, flatSchema) => {
   const out = {};
   for (const key of keys) {
-    out[key] = getNestedValue(props, key);
+    out[key] = flatSchema ? getRuntimeValueForSchemaKey({ flatSchema, key, props }) : getNestedValue(props, key);
   }
   return out;
 };
@@ -5184,6 +5209,7 @@ var selectActiveKeys = (schema, values) => {
   return Object.keys(flattenActiveSchema(schema, (key) => values[key]));
 };
 var mergeValues = ({
+  flatSchema,
   props,
   valuesDotNotation,
   schemaKeys,
@@ -5192,6 +5218,9 @@ var mergeValues = ({
   const merged = { ...props };
   for (const key of schemaKeys) {
     const value = valuesDotNotation[key];
+    if (flatSchema[key]?.type === "text-content" && value === undefined) {
+      continue;
+    }
     const parts = key.split(".");
     if (parts.length === 1) {
       merged[key] = value;
@@ -5209,7 +5238,8 @@ var mergeValues = ({
     }
     current[parts[parts.length - 1]] = value;
   }
-  deleteNestedKey(merged, propsToDelete);
+  const propsToDeleteWithoutTextContent = new Set([...propsToDelete].filter((key) => !(flatSchema[key]?.type === "text-content" && valuesDotNotation[key] === undefined)));
+  deleteNestedKey(merged, propsToDeleteWithoutTextContent);
   return merged;
 };
 var stackToOverrideMap = {};
@@ -5256,8 +5286,12 @@ var withInteractivitySchema = ({
       return newOverrideId;
     });
     const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
-    const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
-    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
+    const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
+      flatSchema,
+      key,
+      props
+    }));
+    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys, flatSchema), runtimeValues);
     const controls = useMemo13(() => {
       return {
         schema: schemaWithSequenceName,
@@ -5285,6 +5319,7 @@ var withInteractivitySchema = ({
     ]);
     const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
+      flatSchema,
       props,
       valuesDotNotation,
       schemaKeys: activeKeys,
@@ -7908,7 +7943,7 @@ var getTimelineDuration = ({
     trimAfter
   });
   if (parentSequenceDurationInFrames !== null) {
-    const cappedDuration = Math.min(parentSequenceDurationInFrames * playbackRate, mediaDuration);
+    const cappedDuration = Math.min(parentSequenceDurationInFrames, mediaDuration);
     return Number(cappedDuration.toFixed(10));
   }
   return mediaDuration;
@@ -10042,6 +10077,18 @@ var loadImage = ({
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
+var waitForNextFrame = ({
+  onFrame
+}) => {
+  if (typeof requestAnimationFrame === "undefined") {
+    onFrame();
+    return () => {
+      return;
+    };
+  }
+  const frame = requestAnimationFrame(onFrame);
+  return () => cancelAnimationFrame(frame);
+};
 var CanvasImageContent = forwardRef10(({
   src,
   width,
@@ -10071,6 +10118,17 @@ var CanvasImageContent = forwardRef10(({
     overrideId: controls?.overrideId ?? null
   });
   const sequenceContext = useContext32(SequenceContext);
+  const pendingLoadDelayRef = useRef23(null);
+  const continuePendingLoadDelay = useCallback17(() => {
+    const pending = pendingLoadDelayRef.current;
+    if (!pending || pending.continued) {
+      return;
+    }
+    pending.continued = true;
+    pending.unblock();
+    continueRender2(pending.handle);
+    pendingLoadDelayRef.current = null;
+  }, [continueRender2]);
   const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
       return null;
@@ -10088,7 +10146,7 @@ var CanvasImageContent = forwardRef10(({
       ref.current = canvas;
     }
   }, [ref, refForOutline]);
-  useEffect17(() => {
+  useLayoutEffect10(() => {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
@@ -10100,17 +10158,13 @@ var CanvasImageContent = forwardRef10(({
     };
     const controller = new AbortController;
     let cancelled = false;
-    let continued = false;
     let errorCount = 0;
     let timeoutId = null;
     setLoadedImage(null);
-    const continueRenderOnce = () => {
-      if (continued) {
-        return;
-      }
-      continued = true;
-      unblock();
-      continueRender2(handle);
+    pendingLoadDelayRef.current = {
+      handle,
+      unblock,
+      continued: false
     };
     const attemptLoad = () => {
       loadImage({ src: actualSrc, signal: controller.signal }).then((image) => {
@@ -10118,13 +10172,9 @@ var CanvasImageContent = forwardRef10(({
           return;
         }
         setLoadedImage(image);
-      }).then(() => {
-        if (!cancelled) {
-          continueRenderOnce();
-        }
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continueRenderOnce();
+          continuePendingLoadDelay();
           return;
         }
         errorCount++;
@@ -10138,7 +10188,7 @@ var CanvasImageContent = forwardRef10(({
           }, backoff);
         } else if (onError) {
           onError(err);
-          continueRenderOnce();
+          continuePendingLoadDelay();
         } else {
           cancelRender2(err);
         }
@@ -10151,12 +10201,12 @@ var CanvasImageContent = forwardRef10(({
         clearTimeout(timeoutId);
       }
       controller.abort();
-      continueRenderOnce();
+      continuePendingLoadDelay();
     };
   }, [
     actualSrc,
     cancelRender2,
-    continueRender2,
+    continuePendingLoadDelay,
     delayPlayback,
     delayRender2,
     delayRenderRetries,
@@ -10167,13 +10217,16 @@ var CanvasImageContent = forwardRef10(({
     sequenceContext?.postmounting,
     sequenceContext?.premounting
   ]);
-  useEffect17(() => {
+  useLayoutEffect10(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
     const handle = delayRender2(`Applying effects to <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`);
     let cancelled = false;
     let continued = false;
+    let cancelWaitForNextFrame = () => {
+      return;
+    };
     const continueRenderOnce = () => {
       if (continued) {
         return;
@@ -10208,7 +10261,15 @@ var CanvasImageContent = forwardRef10(({
       height: canvasHeight
     }).then((completed) => {
       if (completed && !cancelled) {
-        continueRenderOnce();
+        cancelWaitForNextFrame = waitForNextFrame({
+          onFrame: () => {
+            if (cancelled) {
+              return;
+            }
+            continueRenderOnce();
+            continuePendingLoadDelay();
+          }
+        });
       }
     }).catch((err) => {
       if (cancelled) {
@@ -10217,12 +10278,14 @@ var CanvasImageContent = forwardRef10(({
       if (onError) {
         onError(err);
         continueRenderOnce();
+        continuePendingLoadDelay();
       } else {
         cancelRender2(err);
       }
     });
     return () => {
       cancelled = true;
+      cancelWaitForNextFrame();
       continueRenderOnce();
     };
   }, [
@@ -10230,6 +10293,7 @@ var CanvasImageContent = forwardRef10(({
     cancelRender2,
     chainState,
     continueRender2,
+    continuePendingLoadDelay,
     delayRender2,
     fit,
     height,
@@ -10439,7 +10503,7 @@ var ImgContent = ({
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
-    useLayoutEffect10(() => {
+    useLayoutEffect11(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -10706,7 +10770,8 @@ addSequenceStackTraces(Img);
 var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema,
-  ...textSchema
+  ...textSchema,
+  ...textContentSchema
 };
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
@@ -11334,7 +11399,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -11391,7 +11456,7 @@ var OffthreadVideoForRendering = ({
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -11495,7 +11560,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -11670,7 +11735,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -11713,7 +11778,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef27(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -11730,7 +11795,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -12511,7 +12576,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -12555,7 +12620,7 @@ var VideoForRenderingForwardFunction = ({
     return videoRef.current;
   }, []);
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect21(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -12645,7 +12710,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect12(() => {
+    useLayoutEffect13(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }