@remotion/promo-pages 4.0.438 → 4.0.440

package/dist/design.js

@@ -1375,7 +1375,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React4, { useEffect as useEffect18, useMemo as useMemo36, useState as useState19 } from "react";
+import React4, { useEffect as useEffect18, useMemo as useMemo36, useState as useState20 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -5744,12 +5744,7 @@ import { jsx as jsx32 } from "react/jsx-runtime";
 import { useContext as useContext6, useMemo as useMemo5 } from "react";
 import { createContext as createContext7 } from "react";
 import { createContext as createContext9, createRef, useContext as useContext5, useMemo as useMemo4 } from "react";
-import React5, {
-  createContext as createContext8,
-  useCallback as useCallback2,
-  useImperativeHandle,
-  useMemo as useMemo3
-} from "react";
+import React5, { createContext as createContext8, useCallback as useCallback2, useMemo as useMemo3 } from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
 import { useContext as useContext8 } from "react";
 import { createContext as createContext10 } from "react";
@@ -5765,19 +5760,19 @@ import { jsx as jsx82 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef3,
   useEffect as useEffect2,
-  useImperativeHandle as useImperativeHandle3,
+  useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef5,
   useState as useState5
 } from "react";
-import React10, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle2, useRef as useRef4 } from "react";
+import React10, { useCallback as useCallback5, useImperativeHandle, useRef as useRef4 } from "react";
 import { jsx as jsx92 } from "react/jsx-runtime";
 import { jsx as jsx102 } from "react/jsx-runtime";
 import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useState as useState7 } from "react";
 import {
   createContext as createContext13,
   useCallback as useCallback6,
-  useImperativeHandle as useImperativeHandle4,
+  useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo12,
   useRef as useRef6,
@@ -5796,7 +5791,7 @@ import React17, {
   forwardRef as forwardRef4,
   useContext as useContext24,
   useEffect as useEffect10,
-  useImperativeHandle as useImperativeHandle5,
+  useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo222,
   useRef as useRef14,
   useState as useState13
@@ -5845,7 +5840,7 @@ import {
   forwardRef as forwardRef5,
   useContext as useContext25,
   useEffect as useEffect11,
-  useImperativeHandle as useImperativeHandle6,
+  useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo23,
   useRef as useRef15
@@ -5865,19 +5860,20 @@ import {
   forwardRef as forwardRef8,
   useCallback as useCallback13,
   useContext as useContext29,
-  useImperativeHandle as useImperativeHandle7,
+  useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
-  useRef as useRef17
+  useRef as useRef17,
+  useState as useState15
 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
 import React24 from "react";
 import {
   useCallback as useCallback14,
-  useImperativeHandle as useImperativeHandle8,
+  useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo26,
   useRef as useRef18,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import React25 from "react";
@@ -5887,7 +5883,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React27 from "react";
 import React28, { createContext as createContext21 } from "react";
-import { useContext as useContext31, useMemo as useMemo29, useState as useState16 } from "react";
+import { useContext as useContext31, useMemo as useMemo29, useState as useState17 } from "react";
 import { useContext as useContext32 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
@@ -5896,17 +5892,17 @@ import {
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo30,
-  useState as useState17
+  useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import React30, {
   forwardRef as forwardRef9,
   useContext as useContext34,
   useEffect as useEffect16,
-  useImperativeHandle as useImperativeHandle9,
+  useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo31,
   useRef as useRef19,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { useEffect as useEffect15 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -5925,7 +5921,7 @@ import {
   forwardRef as forwardRef12,
   useContext as useContext35,
   useEffect as useEffect17,
-  useImperativeHandle as useImperativeHandle10,
+  useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo35,
   useRef as useRef20
@@ -5977,7 +5973,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.438";
+var VERSION = "4.0.440";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -6498,9 +6494,6 @@ var CompositionSetters = createContext7({
   setCanvasContent: () => {
     return;
   },
-  updateCompositionDefaultProps: () => {
-    return;
-  },
   onlyRenderComposition: null
 });
 var getKey = () => {
@@ -6620,12 +6613,8 @@ var EditorPropsContext = createContext8({
   props: {},
   updateProps: () => {
     throw new Error("Not implemented");
-  },
-  resetUnsaved: () => {
-    throw new Error("Not implemented");
   }
 });
-var editorPropsProviderRef = React5.createRef();
 var timeValueRef = React5.createRef();
 var EditorPropsProvider = ({ children }) => {
   const [props, setProps] = React5.useState({});
@@ -6641,25 +6630,9 @@ var EditorPropsProvider = ({ children }) => {
       };
     });
   }, []);
-  const resetUnsaved = useCallback2((compositionId) => {
-    setProps((prev) => {
-      if (prev[compositionId]) {
-        const newProps = { ...prev };
-        delete newProps[compositionId];
-        return newProps;
-      }
-      return prev;
-    });
-  }, []);
-  useImperativeHandle(editorPropsProviderRef, () => {
-    return {
-      getProps: () => props,
-      setProps
-    };
-  }, [props]);
   const ctx = useMemo3(() => {
-    return { props, updateProps, resetUnsaved };
-  }, [props, resetUnsaved, updateProps]);
+    return { props, updateProps };
+  }, [props, updateProps]);
   return /* @__PURE__ */ jsx42(EditorPropsContext.Provider, {
     value: ctx,
     children
@@ -6722,7 +6695,6 @@ var resolveCompositionsRef = createRef();
 var needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
 };
-var PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
 var useResolvedVideoConfig = (preferredCompositionId) => {
   const context = useContext5(ResolveCompositionContext);
   const { props: allEditorProps } = useContext5(EditorPropsContext);
@@ -7493,7 +7465,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
       height: canvasHeight
     }));
   }, [fit, height, width]);
-  useImperativeHandle2(ref, () => {
+  useImperativeHandle(ref, () => {
     return {
       draw,
       getCanvas: () => {
@@ -7692,7 +7664,7 @@ var AnimatedImage = forwardRef3(({
   const currentTimeRef = useRef5(currentTime);
   currentTimeRef.current = currentTime;
   const ref = useRef5(null);
-  useImperativeHandle3(canvasRef, () => {
+  useImperativeHandle2(canvasRef, () => {
     const c = ref.current?.getCanvas();
     if (!c) {
       throw new Error("Canvas ref is not set");
@@ -7818,7 +7790,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
     setRenderAssets(renderAssetsRef.current);
   }, []);
   if (collectAssets) {
-    useImperativeHandle4(collectAssets, () => {
+    useImperativeHandle3(collectAssets, () => {
       return {
         collectAssets: () => {
           const assets = renderAssetsRef.current;
@@ -9092,6 +9064,76 @@ var useBasicMediaInTimeline = ({
     finalDisplayName: displayName ?? getAssetDisplayName(src)
   };
 };
+var useImageInTimeline = ({
+  src,
+  displayName,
+  id,
+  stack,
+  showInTimeline,
+  premountDisplay,
+  postmountDisplay,
+  loopDisplay
+}) => {
+  const parentSequence = useContext19(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
+  const { duration, nonce, rootId, isStudio, finalDisplayName } = useBasicMediaInTimeline({
+    volume: undefined,
+    mediaVolume: 0,
+    mediaType: "image",
+    src,
+    displayName,
+    trimAfter: undefined,
+    trimBefore: undefined,
+    playbackRate: 1
+  });
+  useEffect4(() => {
+    if (!src) {
+      throw new Error("No src passed");
+    }
+    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
+      return;
+    }
+    if (!showInTimeline) {
+      return;
+    }
+    registerSequence({
+      type: "image",
+      src,
+      id,
+      duration,
+      from: 0,
+      parent: parentSequence?.id ?? null,
+      displayName: finalDisplayName,
+      rootId,
+      showInTimeline: true,
+      nonce: nonce.get(),
+      loopDisplay,
+      stack,
+      premountDisplay,
+      postmountDisplay,
+      controls: null
+    });
+    return () => {
+      unregisterSequence(id);
+    };
+  }, [
+    duration,
+    id,
+    parentSequence,
+    src,
+    registerSequence,
+    unregisterSequence,
+    nonce,
+    stack,
+    showInTimeline,
+    premountDisplay,
+    postmountDisplay,
+    isStudio,
+    loopDisplay,
+    rootId,
+    finalDisplayName
+  ]);
+};
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -10249,7 +10291,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
       });
     };
   }, [cleanupOnMediaTagUnmount]);
-  useImperativeHandle5(ref, () => {
+  useImperativeHandle4(ref, () => {
     return audioRef.current;
   }, [audioRef]);
   const currentOnDurationCallback = useRef14(onDuration);
@@ -10320,7 +10362,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useImperativeHandle6(ref, () => {
+  useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
   useEffect11(() => {
@@ -10749,13 +10791,6 @@ var InnerComposition = ({
     registerComposition,
     unregisterComposition
   ]);
-  useEffect13(() => {
-    window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
-      detail: {
-        resetUnsaved: id
-      }
-    }));
-  }, [defaultProps, id]);
   const resolved = useResolvedVideoConfig(id);
   if (environment.isStudio && video && video.component === lazy && video.id === id) {
     const Comp = lazy;
@@ -10843,12 +10878,16 @@ var ImgRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   onImageFrame,
   crossOrigin,
+  showInTimeline,
+  name,
+  stack,
   ...props2
 }, ref) => {
   const imageRef = useRef17(null);
   const errors = useRef17({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext29(SequenceContext);
+  const [timelineId] = useState15(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -10856,9 +10895,19 @@ var ImgRefForwarding = ({
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  useImperativeHandle7(ref, () => {
+  useImperativeHandle6(ref, () => {
     return imageRef.current;
   }, []);
+  useImageInTimeline({
+    src,
+    displayName: name ?? null,
+    id: timelineId,
+    stack: stack ?? null,
+    showInTimeline: showInTimeline ?? true,
+    premountDisplay: sequenceContext?.premountDisplay ?? null,
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
+    loopDisplay: undefined
+  });
   const actualSrc = usePreload(src);
   const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
@@ -10981,6 +11030,7 @@ var ImgRefForwarding = ({
   });
 };
 var Img = forwardRef8(ImgRefForwarding);
+addSequenceStackTraces(Img);
 var compositionsRef = React24.createRef();
 var CompositionManagerProvider = ({
   children,
@@ -10989,9 +11039,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState15([]);
-  const [canvasContent, setCanvasContent] = useState15(initialCanvasContent);
-  const [compositions, setCompositions] = useState15(initialCompositions);
+  const [folders, setFolders] = useState16([]);
+  const [canvasContent, setCanvasContent] = useState16(initialCanvasContent);
+  const [compositions, setCompositions] = useState16(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
@@ -11030,25 +11080,11 @@ var CompositionManagerProvider = ({
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
   }, []);
-  useImperativeHandle8(compositionsRef, () => {
+  useImperativeHandle7(compositionsRef, () => {
     return {
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const updateCompositionDefaultProps = useCallback14((id, newDefaultProps) => {
-    setCompositions((comps) => {
-      const updated = comps.map((c2) => {
-        if (c2.id === id) {
-          return {
-            ...c2,
-            defaultProps: newDefaultProps
-          };
-        }
-        return c2;
-      });
-      return updated;
-    });
-  }, []);
   const compositionManagerSetters = useMemo26(() => {
     return {
       registerComposition,
@@ -11056,7 +11092,6 @@ var CompositionManagerProvider = ({
       registerFolder,
       unregisterFolder,
       setCanvasContent,
-      updateCompositionDefaultProps,
       onlyRenderComposition
     };
   }, [
@@ -11064,7 +11099,6 @@ var CompositionManagerProvider = ({
     registerFolder,
     unregisterComposition,
     unregisterFolder,
-    updateCompositionDefaultProps,
     onlyRenderComposition
   ]);
   const compositionManagerContextValue = useMemo26(() => {
@@ -11271,6 +11305,7 @@ var validCodecs = [
   "h265",
   "vp8",
   "vp9",
+  "av1",
   "mp3",
   "aac",
   "wav",
@@ -11494,7 +11529,7 @@ var useSchema = (schema, currentValue) => {
   if (earlyReturn) {
     return earlyReturn;
   }
-  const [overrideId] = useState16(() => String(Math.random()));
+  const [overrideId] = useState17(() => String(Math.random()));
   const {
     visualModeEnabled,
     dragOverrides: overrides,
@@ -11523,7 +11558,7 @@ var useSchema = (schema, currentValue) => {
     const overrideValues = overrides[overrideId] ?? {};
     const propStatus = codeValues[overrideId];
     const currentValueKeys = Object.keys(currentValue);
-    const keysToUpdate = new Set(currentValueKeys).values();
+    const keysToUpdate = [...new Set(currentValueKeys)];
     const merged = {};
     for (const key of keysToUpdate) {
       const codeValueStatus = propStatus?.[key] ?? null;
@@ -11664,7 +11699,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState17(null);
+  const [imageSrc, setImageSrc] = useState18(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
@@ -11853,7 +11888,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState18(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -11916,10 +11951,10 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     duration,
     fps
   });
-  useImperativeHandle9(ref, () => {
+  useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState18(() => playbackLogging({
+  useState19(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -12389,8 +12424,6 @@ var Internals = {
   CurrentScaleContext,
   PreviewSizeContext,
   calculateScale,
-  editorPropsProviderRef,
-  PROPS_UPDATED_EXTERNALLY,
   validateRenderAsset,
   Log,
   LogLevelContext,
@@ -13074,7 +13107,7 @@ var VideoForRenderingForwardFunction = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  useImperativeHandle10(ref, () => {
+  useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
   useEffect17(() => {
@@ -13598,7 +13631,7 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState19(getAngle(ref.current, lastCoordinates));
+  const [angle, setAngle] = useState20(getAngle(ref.current, lastCoordinates));
   useEffect18(() => {
     const element = ref.current;
     if (!element) {
@@ -19904,10 +19937,10 @@ var Triangle2 = (props) => {
 };
 
 // src/components/design.tsx
-import { useCallback as useCallback31, useState as useState39 } from "react";
+import { useCallback as useCallback31, useState as useState40 } from "react";
 
 // src/components/ManageTeamMembers.tsx
-import React51, { useCallback as useCallback30, useState as useState38 } from "react";
+import React51, { useCallback as useCallback30, useState as useState39 } from "react";
 import { jsx as jsx38, jsxs as jsxs6, Fragment as Fragment8 } from "react/jsx-runtime";
 function generateId() {
   return Math.random().toString(36).substr(2, 9);
@@ -19951,7 +19984,7 @@ var Row = ({ value, onChange, onDelete, disableDelete }) => {
   });
 };
 var ManageTeamMembers = () => {
-  const [members, setMembers] = useState38(initialMembers);
+  const [members, setMembers] = useState39(initialMembers);
   const displayedMembers = [...members, { id: "NEW", name: "" }];
   const updateMember = useCallback30((idx, value) => {
     if (idx === members.length) {
@@ -19965,7 +19998,7 @@ var ManageTeamMembers = () => {
   const deleteMember = useCallback30((idx) => {
     setMembers((prev) => prev.filter((_, i) => i !== idx));
   }, []);
-  const [loading, setLoading] = useState38(false);
+  const [loading, setLoading] = useState39(false);
   const save = useCallback30(() => {
     setLoading(true);
     setTimeout(() => {
@@ -20021,10 +20054,10 @@ var Explainer = ({ children }) => {
   });
 };
 var DesignPage = () => {
-  const [count4, setCount] = useState39(10);
-  const [active, setActive] = useState39(false);
-  const [submitButtonActive, setSubmitButtonActive] = useState39(true);
-  const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState39(true);
+  const [count4, setCount] = useState40(10);
+  const [active, setActive] = useState40(false);
+  const [submitButtonActive, setSubmitButtonActive] = useState40(true);
+  const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState40(true);
   const onClick = useCallback31(() => {
     setSubmitButtonActive(false);
     setTimeout(() => {
@@ -20037,7 +20070,7 @@ var DesignPage = () => {
       setSubmitButtonPrimaryActive(true);
     }, 1000);
   }, []);
-  const [saving, setSaving] = useState39(false);
+  const [saving, setSaving] = useState40(false);
   const save = useCallback31(() => {
     setSaving(true);
     setTimeout(() => {