@remotion/promo-pages 4.0.379 → 4.0.381

package/dist/template-modal-content.js

@@ -111,7 +111,7 @@ import { jsx as jsx15 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
   useContext as useContext25,
-  useEffect as useEffect13,
+  useEffect as useEffect12,
   useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo21,
   useRef as useRef12,
@@ -123,7 +123,6 @@ import React15, {
   createRef as createRef2,
   useCallback as useCallback7,
   useContext as useContext16,
-  useEffect as useEffect6,
   useMemo as useMemo15,
   useRef as useRef5,
   useState as useState11
@@ -131,12 +130,12 @@ import React15, {
 import { useMemo as useMemo14 } from "react";
 import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
 import { useRef as useRef6 } from "react";
-import { useContext as useContext19, useEffect as useEffect7, useMemo as useMemo16, useState as useState12 } from "react";
+import { useContext as useContext19, useEffect as useEffect6, useMemo as useMemo16, useState as useState12 } from "react";
 import { useContext as useContext18 } from "react";
 import {
   useCallback as useCallback10,
   useContext as useContext22,
-  useEffect as useEffect11,
+  useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef11
 } from "react";
@@ -145,7 +144,7 @@ import { useContext as useContext21, useMemo as useMemo18 } from "react";
 import React16, {
   useCallback as useCallback8,
   useContext as useContext20,
-  useEffect as useEffect8,
+  useEffect as useEffect7,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo17,
   useRef as useRef8,
@@ -153,15 +152,15 @@ import React16, {
 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import React17 from "react";
-import { useEffect as useEffect9, useState as useState14 } from "react";
-import { useEffect as useEffect10, useRef as useRef10 } from "react";
-import { useContext as useContext23, useEffect as useEffect12 } from "react";
+import { useEffect as useEffect8, useState as useState14 } from "react";
+import { useEffect as useEffect9, useRef as useRef10 } from "react";
+import { useContext as useContext23, useEffect as useEffect11 } from "react";
 import { createContext as createContext17, useContext as useContext24, useMemo as useMemo20 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
   useContext as useContext26,
-  useEffect as useEffect14,
+  useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo222,
@@ -169,9 +168,9 @@ import {
 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import { jsx as jsx20 } from "react/jsx-runtime";
-import { Suspense, useContext as useContext29, useEffect as useEffect16 } from "react";
+import { Suspense, useContext as useContext29, useEffect as useEffect15 } from "react";
 import { createPortal } from "react-dom";
-import { createContext as createContext18, useContext as useContext28, useEffect as useEffect15, useMemo as useMemo23 } from "react";
+import { createContext as createContext18, useContext as useContext28, useEffect as useEffect14, useMemo as useMemo23 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import { jsx as jsx222, jsxs as jsxs22 } from "react/jsx-runtime";
 import React21, { useMemo as useMemo24 } from "react";
@@ -198,7 +197,7 @@ import {
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import React26 from "react";
-import { useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo27, useState as useState18 } from "react";
 import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -207,7 +206,7 @@ import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
   useContext as useContext32,
-  useEffect as useEffect18,
+  useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo28,
   useState as useState19
@@ -216,13 +215,13 @@ import { jsx as jsx29 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef9,
   useContext as useContext33,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo29,
   useRef as useRef16,
   useState as useState20
 } from "react";
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import React32, { useMemo as useMemo30 } from "react";
@@ -237,7 +236,7 @@ import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as
 import {
   forwardRef as forwardRef11,
   useContext as useContext34,
-  useEffect as useEffect21,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle11,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo32,
@@ -756,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.379", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.381", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -3067,8 +3066,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
   }
-  const compositionManager = useContext16(CompositionManager);
-  const component = compositionManager.compositions.find((c) => compositionManager.canvasContent?.type === "composition" ? c.id === compositionManager.canvasContent.compositionId : null);
   const logLevel = useLogLevel();
   const audioContext = useSingletonAudioContext(logLevel, audioLatencyHint);
   const refs = useMemo15(() => {
@@ -3207,16 +3204,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
     updateAudio,
     audioContext
   ]);
-  const resetAudio = useCallback7(() => {
-    takenAudios.current = new Array(numberOfAudioTags).fill(false);
-    audios.current = [];
-    rerenderAudios();
-  }, [numberOfAudioTags, rerenderAudios]);
-  useEffect6(() => {
-    return () => {
-      resetAudio();
-    };
-  }, [component, resetAudio]);
   return /* @__PURE__ */ jsxs2(SharedAudioContext.Provider, {
     value,
     children: [
@@ -3524,7 +3511,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       });
     }).join(",");
   }, [duration, startsAt, volume, mediaVolume]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
@@ -3577,7 +3564,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     trimBefore: undefined,
     playbackRate
   });
-  useEffect7(() => {
+  useEffect6(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -3667,7 +3654,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  useEffect8(() => {
+  useEffect7(() => {
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3703,7 +3690,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState13(bufferManager.buffering.current);
-  useEffect8(() => {
+  useEffect7(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -3866,7 +3853,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState14(false);
-  useEffect9(() => {
+  useEffect8(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -3998,7 +3985,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef10(null);
-  useEffect10(() => {
+  useEffect9(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -4180,7 +4167,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect11(() => {
+  useEffect10(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -4225,7 +4212,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect11(() => {
+  useEffect10(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -4353,7 +4340,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect12(() => {
+  useEffect11(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -4546,7 +4533,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [audioRef]);
   const currentOnDurationCallback = useRef12(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect13(() => {
+  useEffect12(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -4613,7 +4600,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle7(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect14(() => {
+  useEffect13(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -4917,7 +4904,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect16(() => {
+  useEffect15(() => {
     const fallback = delayRender2("Waiting for Root component to unsuspend");
     return () => continueRender2(fallback);
   }, [continueRender2, delayRender2]);
@@ -4954,7 +4941,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
   const { folderName, parentName } = useContext29(FolderContext);
-  useEffect16(() => {
+  useEffect15(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -4993,7 +4980,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     registerComposition,
     unregisterComposition
   ]);
-  useEffect16(() => {
+  useEffect15(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -5001,7 +4988,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }));
   }, [defaultProps, id]);
   const resolved = useResolvedVideoConfig(id);
-  if (environment.isStudio && video && video.component === lazy) {
+  if (environment.isStudio && video && video.component === lazy && video.id === id) {
     const Comp = lazy;
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
@@ -5015,7 +5002,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       })
     }), portalNode());
   }
-  if (environment.isRendering && video && video.component === lazy) {
+  if (environment.isRendering && video && video.component === lazy && video.id === id) {
     const Comp = lazy;
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
@@ -5418,7 +5405,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  useEffect17(() => {
+  useEffect16(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -5553,7 +5540,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5713,7 +5700,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ref,
   onVideoFrame
 }) => {
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -5859,7 +5846,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     tag: "video",
     mountTime
   }));
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5890,7 +5877,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const currentOnDurationCallback = useRef16(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5907,7 +5894,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6485,7 +6472,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -6528,7 +6515,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle11(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -8595,7 +8582,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React7, { useEffect as useEffect22, useMemo as useMemo33, useState as useState21 } from "react";
+import React7, { useEffect as useEffect21, useMemo as useMemo33, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -12736,7 +12723,7 @@ var extrudeAndTransformElement = (options) => {
 init_esm();
 import { jsx as jsx37, Fragment } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs3 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef18 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef18 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
 import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 import React42 from "react";
@@ -12824,7 +12811,7 @@ var useHoverTransforms = (ref, disabled) => {
     isActive: false
   });
   const eventTarget = useMemo33(() => new EventTarget, []);
-  useEffect22(() => {
+  useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -12971,7 +12958,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
-  useEffect22(() => {
+  useEffect21(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -13092,7 +13079,7 @@ var Spinner = ({ size, duration }) => {
     };
   }, [size]);
   const pathsRef = useRef18([]);
-  useEffect23(() => {
+  useEffect22(() => {
     const animate = () => {
       const now = performance.now();
       for (let index = 0;index < lines; index++) {
@@ -19423,7 +19410,7 @@ function cn2(...inputs) {
 }
 
 // src/helpers/use-el-size.ts
-import { useCallback as useCallback26, useEffect as useEffect36, useMemo as useMemo41, useState as useState34 } from "react";
+import { useCallback as useCallback26, useEffect as useEffect35, useMemo as useMemo41, useState as useState34 } from "react";
 var useElementSize = (ref) => {
   const [size4, setSize] = useState34(null);
   const observer = useMemo41(() => {
@@ -19447,7 +19434,7 @@ var useElementSize = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect36(() => {
+  useEffect35(() => {
     updateSize();
     if (!observer) {
       return;
@@ -19527,16 +19514,16 @@ var CommandCopyButton = ({ copied, customSvg }) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef27, useEffect as useEffect38, useImperativeHandle as useImperativeHandle12, useRef as useRef33 } from "react";
+import { forwardRef as forwardRef27, useEffect as useEffect37, useImperativeHandle as useImperativeHandle12, useRef as useRef33 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef26, useCallback as useCallback27, useEffect as useEffect37, useRef as useRef32, useState as useState35 } from "react";
+import { forwardRef as forwardRef26, useCallback as useCallback27, useEffect as useEffect36, useRef as useRef32, useState as useState35 } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef32(null);
-  useEffect37(() => {
+  useEffect36(() => {
     refs.forEach((ref) => {
       if (!ref)
         return;
@@ -19565,12 +19552,12 @@ var VideoPlayerWithControls = forwardRef26(({ playbackId, poster, currentTime, o
       console.error("Error getting img dimensions", event);
     }
   }, [onLoaded, onSize]);
-  useEffect37(() => {
+  useEffect36(() => {
     const img = new Image;
     img.onload = (evt) => onImageLoad(evt);
     img.src = poster;
   }, [onImageLoad, poster]);
-  useEffect37(() => {
+  useEffect36(() => {
     const video = videoRef.current;
     const src = `https://stream.mux.com/${playbackId}.m3u8`;
     let hls;
@@ -19613,7 +19600,7 @@ var VideoPlayerWithControls = forwardRef26(({ playbackId, poster, currentTime, o
       }
     };
   }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect37(() => {
+  useEffect36(() => {
     const video = videoRef.current;
     if (currentTime && video) {
       video.currentTime = currentTime;
@@ -19640,7 +19627,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
   const videoRef = useRef33(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle12(ref, () => videoRef.current, []);
-  useEffect38(() => {
+  useEffect37(() => {
     let hls;
     if (videoRef.current) {
       const { current } = videoRef;