@remotion/promo-pages 4.0.504 → 4.0.506

package/dist/experts.js

@@ -972,7 +972,13 @@ import React13, { createContext as createContext14 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 import { useContext as useContext15, useMemo as useMemo13 } from "react";
 import { createContext as createContext15 } from "react";
-import React14, { forwardRef as forwardRef2, useContext as useContext17, useMemo as useMemo14, useState as useState4 } from "react";
+import React14, {
+  forwardRef as forwardRef2,
+  useContext as useContext17,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo14,
+  useState as useState4
+} from "react";
 import { useContext as useContext16, useRef as useRef5 } from "react";
 import { createContext as createContext16 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
@@ -982,7 +988,7 @@ import {
   forwardRef as forwardRef4,
   useEffect as useEffect5,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useRef as useRef10,
   useState as useState6
 } from "react";
@@ -991,12 +997,12 @@ import React17, { useCallback as useCallback8, useImperativeHandle, useMemo as u
 import { useEffect as useEffect4, useMemo as useMemo17, useRef as useRef8 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { useContext as useContext19, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useState as useState8 } from "react";
 import {
   createContext as createContext17,
   useCallback as useCallback9,
   useImperativeHandle as useImperativeHandle3,
-  useLayoutEffect as useLayoutEffect3,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo19,
   useRef as useRef11,
   useState as useState7
@@ -1020,7 +1026,7 @@ import React24, {
   useRef as useRef20,
   useState as useState14
 } from "react";
-import { useContext as useContext22, useLayoutEffect as useLayoutEffect5, useRef as useRef15 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect6, useRef as useRef15 } from "react";
 import React21, {
   createContext as createContext21,
   createRef as createRef2,
@@ -1040,7 +1046,7 @@ import {
   useCallback as useCallback13,
   useContext as useContext27,
   useEffect as useEffect12,
-  useLayoutEffect as useLayoutEffect7,
+  useLayoutEffect as useLayoutEffect8,
   useRef as useRef19
 } from "react";
 import { useCallback as useCallback12, useMemo as useMemo27, useRef as useRef17 } from "react";
@@ -1049,7 +1055,7 @@ import React22, {
   useCallback as useCallback11,
   useContext as useContext25,
   useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo25,
   useRef as useRef16,
   useState as useState12
@@ -1066,7 +1072,7 @@ import {
   useContext as useContext30,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
-  useLayoutEffect as useLayoutEffect8,
+  useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo30,
   useRef as useRef21
 } from "react";
@@ -1087,7 +1093,7 @@ import {
   forwardRef as forwardRef9,
   useCallback as useCallback17,
   useContext as useContext32,
-  useLayoutEffect as useLayoutEffect9,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo32,
   useRef as useRef23
 } from "react";
@@ -1097,7 +1103,7 @@ import {
   useCallback as useCallback18,
   useContext as useContext33,
   useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect10,
+  useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo33,
   useRef as useRef24,
   useState as useState16
@@ -1108,7 +1114,7 @@ import { jsx as jsx28 } from "react/jsx-runtime";
 import {
   useCallback as useCallback20,
   useContext as useContext34,
-  useLayoutEffect as useLayoutEffect11,
+  useLayoutEffect as useLayoutEffect12,
   useRef as useRef25,
   useState as useState18
 } from "react";
@@ -1138,7 +1144,7 @@ import {
   useCallback as useCallback23,
   useContext as useContext37,
   useEffect as useEffect17,
-  useLayoutEffect as useLayoutEffect12,
+  useLayoutEffect as useLayoutEffect13,
   useMemo as useMemo37,
   useState as useState20
 } from "react";
@@ -1171,7 +1177,7 @@ import {
   useContext as useContext39,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect13,
+  useLayoutEffect as useLayoutEffect14,
   useMemo as useMemo41,
   useRef as useRef29
 } from "react";
@@ -2364,7 +2370,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.504";
+var VERSION = "4.0.506";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2415,6 +2421,7 @@ var SetTimelineContext = createContext13({
   }
 });
 var TimelineContext = createContext13(null);
+var TimelineImperativeContext = createContext13(null);
 var PlaybackRateContext = createContext13(null);
 var AbsoluteTimeContext = createContext13(null);
 var TimelineContextProvider = ({ children, frameState }) => {
@@ -2424,6 +2431,8 @@ var TimelineContextProvider = ({ children, frameState }) => {
   const audioAndVideoTags = useRef3([]);
   const [_frame, setFrame] = useState2(() => getInitialFrameState());
   const frame = frameState ?? _frame;
+  const frameRef = useRef3(frame);
+  frameRef.current = frame;
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -2459,6 +2468,13 @@ var TimelineContextProvider = ({ children, frameState }) => {
       audioAndVideoTags
     };
   }, [frame, playing]);
+  const timelineImperativeContextValue = useMemo8(() => {
+    return {
+      frameRef,
+      imperativePlaying,
+      audioAndVideoTags
+    };
+  }, []);
   const playbackRateContextValue = useMemo8(() => {
     return {
       playbackRate,
@@ -2475,11 +2491,14 @@ var TimelineContextProvider = ({ children, frameState }) => {
     value: timelineContextValue,
     children: /* @__PURE__ */ jsx8(PlaybackRateContext.Provider, {
       value: playbackRateContextValue,
-      children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
-        value: timelineContextValue,
-        children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
-          value: setTimelineContextValue,
-          children
+      children: /* @__PURE__ */ jsx8(TimelineImperativeContext.Provider, {
+        value: timelineImperativeContextValue,
+        children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
+          value: timelineContextValue,
+          children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
+            value: setTimelineContextValue,
+            children
+          })
         })
       })
     })
@@ -5304,6 +5323,31 @@ var getFlatSchemaWithAllKeys = (schema) => {
   }
   return out;
 };
+var createRuntimeValueStore = (initialSnapshot) => {
+  let snapshot = initialSnapshot;
+  const listeners = new Set;
+  const store = {
+    getSnapshot: () => snapshot,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+  return {
+    store,
+    setSnapshot: (newSnapshot) => {
+      if (snapshot === newSnapshot) {
+        return;
+      }
+      snapshot = newSnapshot;
+      for (const listener of listeners) {
+        listener();
+      }
+    }
+  };
+};
 var findPropsToDelete = ({
   schema,
   key,
@@ -5605,16 +5649,21 @@ var withInteractivitySchema = ({
       props: cleanProps
     }));
     const currentRuntimeValueDotNotation = useMemo14(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
+    const [runtimeValueStore] = useState4(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
+    useLayoutEffect2(() => {
+      runtimeValueStore.setSnapshot(currentRuntimeValueDotNotation);
+    }, [currentRuntimeValueDotNotation, runtimeValueStore]);
     const controls = useMemo14(() => {
       return {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
+        runtimeValues: runtimeValueStore.store,
         overrideId,
         supportsEffects,
         componentIdentity,
         componentName
       };
-    }, [currentRuntimeValueDotNotation, overrideId]);
+    }, [currentRuntimeValueDotNotation, overrideId, runtimeValueStore.store]);
     setStackForControls(controls, internalStack);
     const { merged: valuesDotNotation, propsToDelete } = useMemo14(() => {
       return computeEffectiveSchemaValuesDotNotation({
@@ -5799,6 +5848,32 @@ var RegularSequenceRefForwardingFunction = ({
   const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
   const mediaFrameAtSequenceZero = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom : null;
   const frozenMediaFrame = isMedia && isMedia.type !== "image" && mediaFrameAtSequenceZero !== null ? registeredFrozenFrame === null ? null : mediaFrameAtSequenceZero + (loopDisplay ? registeredFrozenFrame % loopDisplay.durationInFrames : registeredFrozenFrame) * isMedia.data.playbackRate : null;
+  const controlsSchema = controls?.schema;
+  const controlsRuntimeValues = controls?.runtimeValues;
+  const controlsOverrideId = controls?.overrideId;
+  const controlsSupportsEffects = controls?.supportsEffects;
+  const controlsComponentIdentity = controls?.componentIdentity;
+  const controlsComponentName = controls?.componentName;
+  const registrationControls = useMemo15(() => {
+    if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined) {
+      return null;
+    }
+    return {
+      schema: controlsSchema,
+      runtimeValues: controlsRuntimeValues,
+      overrideId: controlsOverrideId,
+      supportsEffects: controlsSupportsEffects,
+      componentIdentity: controlsComponentIdentity,
+      componentName: controlsComponentName
+    };
+  }, [
+    controlsComponentIdentity,
+    controlsComponentName,
+    controlsOverrideId,
+    controlsRuntimeValues,
+    controlsSchema,
+    controlsSupportsEffects
+  ]);
   useEffect3(() => {
     if (!env.isStudio) {
       return;
@@ -5807,7 +5882,7 @@ var RegularSequenceRefForwardingFunction = ({
       if (isMedia.type === "image") {
         registerSequence({
           type: "image",
-          controls: controls ?? null,
+          controls: registrationControls,
           effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
@@ -5831,7 +5906,7 @@ var RegularSequenceRefForwardingFunction = ({
       } else {
         registerSequence({
           type: isMedia.type,
-          controls: controls ?? null,
+          controls: registrationControls,
           effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
@@ -5878,7 +5953,7 @@ var RegularSequenceRefForwardingFunction = ({
       getStack: () => stackRef.current,
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
-      controls: controls ?? null,
+      controls: registrationControls,
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
       isInsideSeries,
@@ -5906,7 +5981,7 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay,
     env.isStudio,
-    controls,
+    registrationControls,
     _remotionInternalEffects,
     isMedia,
     resolvedDocumentationLink,
@@ -6832,7 +6907,7 @@ var AnimatedImageContent = forwardRef4(({
       imageDecoder?.close();
     };
   }, [imageDecoder]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!imageDecoder) {
       return;
     }
@@ -7089,7 +7164,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a2) => a2.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (typeof window !== "undefined") {
       window.remotion_collectAssets = () => {
         const assets = renderAssetsRef.current;
@@ -7119,7 +7194,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
   const [id] = useState8(() => {
     return String(Math.random());
   });
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!env.isRendering) {
       return;
     }
@@ -8437,7 +8512,7 @@ var useVolume = ({
   }
   const { audioContext, gainNode: masterGainNode } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect5(() => {
+    useLayoutEffect6(() => {
       if (!audioContext) {
         return;
       }
@@ -8803,7 +8878,7 @@ var useBufferManager = (logLevel, mountTime) => {
     }
   }, [blocks]);
   if (typeof window !== "undefined") {
-    useLayoutEffect6(() => {
+    useLayoutEffect7(() => {
       if (rendering) {
         return;
       }
@@ -9437,7 +9512,7 @@ var useMediaPlayback = ({
     isPostmounting
   ]);
   const env = useRemotionEnvironment();
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
@@ -9915,7 +9990,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -10562,7 +10637,7 @@ var HtmlInCanvasContent = forwardRef9(({
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     const placeholder = canvas2dRef.current;
     if (!placeholder) {
       throw new Error("Canvas not found");
@@ -10594,7 +10669,7 @@ var HtmlInCanvasContent = forwardRef9(({
     usesDirectLayoutCanvas
   ]);
   const onPaintChangedRef = useRef23(false);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!onPaintChangedRef.current) {
       onPaintChangedRef.current = true;
       return;
@@ -10605,7 +10680,7 @@ var HtmlInCanvasContent = forwardRef9(({
     }
     canvas.requestPaint?.();
   }, [onPaint, memoizedEffects]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     const canvas = canvas2dRef.current;
     if (!canvas) {
       return;
@@ -10903,7 +10978,7 @@ var CanvasImageContent = forwardRef10(({
       ref.current = canvas;
     }
   }, [ref, refForOutline]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!pauseWhenLoading || !isLoadPending || isPremounting || isPostmounting) {
       return;
     }
@@ -10915,7 +10990,7 @@ var CanvasImageContent = forwardRef10(({
     isPremounting,
     pauseWhenLoading
   ]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
@@ -10977,7 +11052,7 @@ var CanvasImageContent = forwardRef10(({
     maxRetries,
     onError
   ]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
@@ -11305,7 +11380,7 @@ var ImgContent = ({
     } catch {}
   }, [cancelRender2, maxRetries, onError, retryIn]);
   if (typeof window !== "undefined") {
-    useLayoutEffect11(() => {
+    useLayoutEffect12(() => {
       if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
         return;
       }
@@ -11317,7 +11392,7 @@ var ImgContent = ({
       isPremounting,
       pauseWhenLoading
     ]);
-    useLayoutEffect11(() => {
+    useLayoutEffect12(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -11668,7 +11743,8 @@ var makeRemotionComponentIdentity = ({
 };
 var interactiveElementSchema = {
   ...baseSchema,
-  ...transformSchema
+  ...transformSchema,
+  ...cropSchema
 };
 var interactiveBackgroundElementSchema = {
   ...interactiveElementSchema,
@@ -11725,8 +11801,21 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       name,
       showInTimeline,
       controls,
+      cropLeft,
+      cropRight,
+      cropTop,
+      cropBottom,
+      style,
       ...props2
     } = propsWithControls;
+    const croppedStyle = useCropStyle({
+      cropLeft,
+      cropRight,
+      cropTop,
+      cropBottom,
+      style: style ?? null,
+      componentName: displayName
+    });
     const refForOutline = useRef26(null);
     const callbackRef = useCallback21((element) => {
       refForOutline.current = element;
@@ -11746,6 +11835,7 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       outlineRef: refForOutline,
       children: React31.createElement(tag, {
         ...props2,
+        style: croppedStyle ?? undefined,
         ref: callbackRef
       })
     });
@@ -12447,7 +12537,7 @@ var OffthreadVideoForRendering = ({
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState20(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -12982,6 +13072,7 @@ var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
   const compositionManagerCtx = React41.useContext(CompositionManager);
   const timelineContext = React41.useContext(TimelineContext);
+  const timelineImperativeContext = React41.useContext(TimelineImperativeContext);
   const setTimelineContext = React41.useContext(SetTimelineContext);
   const sequenceContext = React41.useContext(SequenceContext);
   const nonceContext = React41.useContext(NonceContext);
@@ -12997,6 +13088,7 @@ function useRemotionContexts() {
   return useMemo39(() => ({
     compositionManagerCtx,
     timelineContext,
+    timelineImperativeContext,
     setTimelineContext,
     sequenceContext,
     nonceContext,
@@ -13015,6 +13107,7 @@ function useRemotionContexts() {
     sequenceContext,
     setTimelineContext,
     timelineContext,
+    timelineImperativeContext,
     canUseRemotionHooksContext,
     preloadContext,
     resolveCompositionContext,
@@ -13048,15 +13141,18 @@ var RemotionContextProvider = (props2) => {
                     value: contexts.renderAssetManagerContext,
                     children: /* @__PURE__ */ jsx37(ResolveCompositionContext.Provider, {
                       value: contexts.resolveCompositionContext,
-                      children: /* @__PURE__ */ jsx37(TimelineContext.Provider, {
-                        value: contexts.timelineContext,
-                        children: /* @__PURE__ */ jsx37(SetTimelineContext.Provider, {
-                          value: contexts.setTimelineContext,
-                          children: /* @__PURE__ */ jsx37(SequenceContext.Provider, {
-                            value: contexts.sequenceContext,
-                            children: /* @__PURE__ */ jsx37(BufferingContextReact.Provider, {
-                              value: contexts.bufferManagerContext,
-                              children
+                      children: /* @__PURE__ */ jsx37(TimelineImperativeContext.Provider, {
+                        value: contexts.timelineImperativeContext,
+                        children: /* @__PURE__ */ jsx37(TimelineContext.Provider, {
+                          value: contexts.timelineContext,
+                          children: /* @__PURE__ */ jsx37(SetTimelineContext.Provider, {
+                            value: contexts.setTimelineContext,
+                            children: /* @__PURE__ */ jsx37(SequenceContext.Provider, {
+                              value: contexts.sequenceContext,
+                              children: /* @__PURE__ */ jsx37(BufferingContextReact.Provider, {
+                                value: contexts.bufferManagerContext,
+                                children
+                              })
                             })
                           })
                         })
@@ -13200,6 +13296,7 @@ var Internals = {
   TimelinePosition: exports_timeline_position_state,
   DelayRenderContextType,
   TimelineContext,
+  TimelineImperativeContext,
   PlaybackRateContext,
   AbsoluteTimeContext,
   RenderAssetManagerProvider,
@@ -13784,7 +13881,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect13(() => {
+    useLayoutEffect14(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }