@remotion/studio 4.0.409 → 4.0.410

package/dist/esm/previewEntry.mjs

@@ -34,7 +34,7 @@ import { Internals as Internals66 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React178, { useCallback as useCallback136, useEffect as useEffect85, useMemo as useMemo136 } from "react";
+import React178, { useCallback as useCallback136, useEffect as useEffect84, useMemo as useMemo136 } from "react";
 import { Internals as Internals62 } from "remotion";
 
 // src/helpers/colors.ts
@@ -3270,7 +3270,7 @@ var writeStaticFile = async ({
   if (window.remotion_isReadOnlyStudio) {
     throw new Error("writeStaticFile() is not available in read-only Studio");
   }
-  const url = new URL("/api/add-asset", window.location.origin);
+  const url = new URL(`${window.remotion_staticBase}/api/add-asset`, window.location.origin);
   if (filePath.includes("\\")) {
     return Promise.reject(new Error("File path cannot contain backslashes"));
   }
@@ -7549,10 +7549,10 @@ var MenuBuildIndicator = () => {
 };
 
 // src/components/SidebarCollapserControls.tsx
-import { useCallback as useCallback92, useContext as useContext59, useEffect as useEffect62 } from "react";
+import { useCallback as useCallback92, useContext as useContext59, useEffect as useEffect61 } from "react";
 
 // src/components/TopPanel.tsx
-import { useCallback as useCallback91, useContext as useContext58, useEffect as useEffect61, useMemo as useMemo96 } from "react";
+import { useCallback as useCallback91, useContext as useContext58, useEffect as useEffect60, useMemo as useMemo96 } from "react";
 
 // src/helpers/use-breakpoint.ts
 import { useEffect as useEffect25, useState as useState30 } from "react";
@@ -17608,7 +17608,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { useContext as useContext55, useEffect as useEffect59, useRef as useRef32, useState as useState61 } from "react";
+import { useContext as useContext55, useEffect as useEffect58, useRef as useRef32, useState as useState61 } from "react";
 import { Internals as Internals45 } from "remotion";
 
 // src/helpers/should-show-render-button.ts
@@ -18425,14 +18425,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
 
 // src/components/RenderButton.tsx
 import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
-import {
-  useCallback as useCallback89,
-  useContext as useContext53,
-  useEffect as useEffect58,
-  useMemo as useMemo93,
-  useRef as useRef31,
-  useState as useState60
-} from "react";
+import { useCallback as useCallback89, useContext as useContext53, useMemo as useMemo93, useRef as useRef31, useState as useState60 } from "react";
 import ReactDOM8 from "react-dom";
 import { Internals as Internals43 } from "remotion";
 import { jsx as jsx175, jsxs as jsxs81, Fragment as Fragment23 } from "react/jsx-runtime";
@@ -18514,6 +18507,34 @@ var RenderButton = ({
     shouldApplyCssTransforms: true
   });
   const refresh = size4?.refresh;
+  const onPointerDown = useCallback89(() => {
+    setDropdownOpened((o) => {
+      if (!o) {
+        refresh?.();
+      }
+      return !o;
+    });
+  }, [refresh]);
+  const onClickDropdown = useCallback89((e) => {
+    e.stopPropagation();
+    const isKeyboardInitiated = e.detail === 0;
+    if (!isKeyboardInitiated) {
+      return;
+    }
+    setDropdownOpened((o) => {
+      if (!o) {
+        refresh?.();
+        window.addEventListener("pointerup", (evt) => {
+          if (!isMenuItem(evt.target)) {
+            setDropdownOpened(false);
+          }
+        }, {
+          once: true
+        });
+      }
+      return !o;
+    });
+  }, [refresh]);
   const connectionStatus = useContext53(StudioServerConnectionCtx).previewServerState.type;
   const shortcut = areKeyboardShortcutsDisabled() ? "" : "(R)";
   const tooltip = connectionStatus === "connected" ? "Export the current composition " + shortcut : "Connect to the Studio server to render";
@@ -18654,46 +18675,6 @@ var RenderButton = ({
       }
     ];
   }, [handleRenderTypeChange]);
-  useEffect58(() => {
-    const { current } = dropdownRef;
-    if (!current) {
-      return;
-    }
-    const onPointerDown = () => {
-      return setDropdownOpened((o) => {
-        if (!o) {
-          refresh?.();
-        }
-        return !o;
-      });
-    };
-    const onClickDropdown = (e) => {
-      e.stopPropagation();
-      const isKeyboardInitiated = e.detail === 0;
-      if (!isKeyboardInitiated) {
-        return;
-      }
-      return setDropdownOpened((o) => {
-        if (!o) {
-          refresh?.();
-          window.addEventListener("pointerup", (evt) => {
-            if (!isMenuItem(evt.target)) {
-              setDropdownOpened(false);
-            }
-          }, {
-            once: true
-          });
-        }
-        return !o;
-      });
-    };
-    current.addEventListener("pointerdown", onPointerDown);
-    current.addEventListener("click", onClickDropdown);
-    return () => {
-      current.removeEventListener("pointerdown", onPointerDown);
-      current.removeEventListener("click", onClickDropdown);
-    };
-  }, [refresh]);
   const spaceToBottom = useMemo93(() => {
     const margin2 = 10;
     if (size4 && dropdownOpened) {
@@ -18761,7 +18742,6 @@ var RenderButton = ({
       /* @__PURE__ */ jsx175("button", {
         style: { display: "none" },
         id: "render-modal-button-client",
-        disabled: connectionStatus !== "connected" && renderType === "server-render",
         onClick: openClientRenderModal,
         type: "button"
       }),
@@ -18805,6 +18785,8 @@ var RenderButton = ({
                 style: dropdownTriggerStyle,
                 disabled: connectionStatus !== "connected",
                 className: MENU_INITIATOR_CLASSNAME,
+                onPointerDown,
+                onClick: onClickDropdown,
                 children: /* @__PURE__ */ jsx175(CaretDown, {})
               })
             ]
@@ -19007,7 +18989,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
   const [loop, setLoop] = useState61(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
   const isMobileLayout = useMobileLayout();
-  useEffect59(() => {
+  useEffect58(() => {
     if (isMobileLayout && previewToolbarRef.current) {
       const updateScrollableIndicatorProps = (target) => {
         const boundingBox = target.getBoundingClientRect();
@@ -19287,7 +19269,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useContext as useContext57, useEffect as useEffect60, useRef as useRef34, useState as useState63 } from "react";
+import { useContext as useContext57, useEffect as useEffect59, useRef as useRef34, useState as useState63 } from "react";
 import { jsx as jsx181 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -19303,7 +19285,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
   }
   const [lastPointerUp, setLastPointerUp] = useState63(() => Date.now());
   const ref = useRef34(null);
-  useEffect60(() => {
+  useEffect59(() => {
     if (context.isDragging.current) {
       return;
     }
@@ -19386,7 +19368,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
       }
     };
   }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
-  useEffect60(() => {
+  useEffect59(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -19473,7 +19455,7 @@ var TopPanel = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelay
     }
     return "expanded";
   }, [sidebarCollapsedStateRight]);
-  useEffect61(() => {
+  useEffect60(() => {
     onMounted();
   }, [onMounted]);
   const canvasContainerStyle = useMemo96(() => ({
@@ -19643,7 +19625,7 @@ var SidebarCollapserControls = () => {
     toggleLeft,
     toggleRight
   ]);
-  useEffect62(() => {
+  useEffect61(() => {
     const left3 = keybindings.registerKeybinding({
       event: "keydown",
       key: "b",
@@ -19721,7 +19703,7 @@ var SidebarCollapserControls = () => {
 import {
   useCallback as useCallback93,
   useContext as useContext60,
-  useEffect as useEffect63,
+  useEffect as useEffect62,
   useMemo as useMemo97,
   useState as useState64
 } from "react";
@@ -19773,7 +19755,7 @@ var UpdateCheck = () => {
     });
     return controller;
   }, []);
-  useEffect63(() => {
+  useEffect62(() => {
     const abortUpdate = checkForUpdates();
     const abortBugs = checkForBugs();
     return () => {
@@ -20138,7 +20120,7 @@ import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
   useCallback as useCallback95,
   useContext as useContext63,
-  useEffect as useEffect64,
+  useEffect as useEffect63,
   useMemo as useMemo100,
   useRef as useRef35,
   useState as useState66
@@ -20569,7 +20551,7 @@ var Inner2 = () => {
     videoConfig,
     width
   ]);
-  useEffect64(() => {
+  useEffect63(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -20580,7 +20562,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpScrubbing);
     };
   }, [dragging.dragging, onPointerMoveScrubbing, onPointerUpScrubbing]);
-  useEffect64(() => {
+  useEffect63(() => {
     if (inOutDragging.dragging === false) {
       return;
     }
@@ -20756,7 +20738,7 @@ import { SOURCE_MAP_ENDPOINT } from "@remotion/studio-shared";
 import {
   useCallback as useCallback97,
   useContext as useContext64,
-  useEffect as useEffect65,
+  useEffect as useEffect64,
   useMemo as useMemo101,
   useState as useState67
 } from "react";
@@ -20845,7 +20827,7 @@ var TimelineStack = ({ isCompact, sequence }) => {
       window.open(getGitRefUrl(window.remotion_gitSource, originalLocation), "_blank");
     }
   }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
-  useEffect65(() => {
+  useEffect64(() => {
     if (!sequence.stack) {
       return;
     }
@@ -20993,14 +20975,14 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext66, useEffect as useEffect67, useMemo as useMemo103, useRef as useRef37 } from "react";
+import { useContext as useContext66, useEffect as useEffect66, useMemo as useMemo103, useRef as useRef37 } from "react";
 import { Internals as Internals50 } from "remotion";
 
 // src/components/TimeValue.tsx
 import { PlayerInternals as PlayerInternals17 } from "@remotion/player";
 import {
   useCallback as useCallback99,
-  useEffect as useEffect66,
+  useEffect as useEffect65,
   useImperativeHandle as useImperativeHandle14,
   useRef as useRef36
 } from "react";
@@ -21053,7 +21035,7 @@ var TimeValue = () => {
     pause,
     toggle
   }), [seek, play, pause, toggle]);
-  useEffect66(() => {
+  useEffect65(() => {
     const gKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "g",
@@ -21166,7 +21148,7 @@ var TimelineTimeIndicators = () => {
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
   const ref = useRef37(null);
-  useEffect67(() => {
+  useEffect66(() => {
     const currentRef = ref.current;
     if (!currentRef) {
       return;
@@ -21273,7 +21255,7 @@ var TimelineList = ({ timeline }) => {
 };
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
-import { useContext as useContext67, useEffect as useEffect68 } from "react";
+import { useContext as useContext67, useEffect as useEffect67 } from "react";
 import { Internals as Internals51 } from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
@@ -21291,7 +21273,7 @@ var TimelinePlayCursorSyncer = () => {
     setCurrentFps(video.fps);
   }
   const playing = timelineContext.playing ?? false;
-  useEffect68(() => {
+  useEffect67(() => {
     if (!video) {
       return;
     }
@@ -21304,7 +21286,7 @@ var TimelinePlayCursorSyncer = () => {
       frame: timelinePosition
     });
   }, [playing, timelineContext, timelinePosition, video]);
-  useEffect68(() => {
+  useEffect67(() => {
     const { current } = scrollableRef;
     if (!current) {
       return;
@@ -36307,7 +36289,7 @@ var readAscii = (slice, length) => {
  */
 
 // src/helpers/use-max-media-duration.ts
-import { useEffect as useEffect69, useState as useState68 } from "react";
+import { useEffect as useEffect68, useState as useState68 } from "react";
 var cache = new Map;
 var getSrc = (s) => {
   if (s.type === "video") {
@@ -36321,7 +36303,7 @@ var getSrc = (s) => {
 var useMaxMediaDuration = (s, fps) => {
   const src = getSrc(s);
   const [maxMediaDuration, setMaxMediaDuration] = useState68(src ? cache.get(src) ?? null : Infinity);
-  useEffect69(() => {
+  useEffect68(() => {
     if (!src) {
       return;
     }
@@ -36351,7 +36333,7 @@ var useMaxMediaDuration = (s, fps) => {
 
 // src/components/AudioWaveform.tsx
 import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
-import { useEffect as useEffect70, useMemo as useMemo106, useRef as useRef39, useState as useState69 } from "react";
+import { useEffect as useEffect69, useMemo as useMemo106, useRef as useRef39, useState as useState69 } from "react";
 import { Internals as Internals52 } from "remotion";
 
 // src/components/AudioWaveformBar.tsx
@@ -36416,14 +36398,14 @@ var AudioWaveform = ({
     throw new Error("Expected video config");
   }
   const canvas = useRef39(null);
-  useEffect70(() => {
+  useEffect69(() => {
     const { current } = mountState;
     current.isMounted = true;
     return () => {
       current.isMounted = false;
     };
   }, []);
-  useEffect70(() => {
+  useEffect69(() => {
     if (!canvas.current) {
       return;
     }
@@ -36450,7 +36432,7 @@ var AudioWaveform = ({
     context.strokeStyle = LIGHT_TRANSPARENT;
     context.stroke();
   }, [visualizationWidth, metadata, startFrom, volume, doesVolumeChange]);
-  useEffect70(() => {
+  useEffect69(() => {
     setError(null);
     getAudioData(src).then((data) => {
       if (mountState.current.isMounted) {
@@ -36625,7 +36607,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect71, useRef as useRef40, useState as useState70 } from "react";
+import { useEffect as useEffect70, useRef as useRef40, useState as useState70 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -36943,12 +36925,12 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
   const ref = useRef40(null);
   const [error, setError] = useState70(null);
   const aspectRatio = useRef40(getAspectRatioFromCache(src));
-  useEffect71(() => {
+  useEffect70(() => {
     return () => {
       clearFramesForSrc(src);
     };
   }, [src]);
-  useEffect71(() => {
+  useEffect70(() => {
     if (error) {
       return;
     }
@@ -37401,13 +37383,13 @@ var EditorContent = ({ readOnlyStudio, children }) => {
 };
 
 // src/components/GlobalKeybindings.tsx
-import { useContext as useContext71, useEffect as useEffect72 } from "react";
+import { useContext as useContext71, useEffect as useEffect71 } from "react";
 var GlobalKeybindings = () => {
   const keybindings = useKeybinding();
   const { setSelectedModal } = useContext71(ModalsContext);
   const { setCheckerboard } = useContext71(CheckerboardContext);
   const { navigateToNextComposition, navigateToPreviousComposition } = useCompositionNavigation();
-  useEffect72(() => {
+  useEffect71(() => {
     const nKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "n",
@@ -37512,8 +37494,13 @@ var GlobalKeybindings = () => {
 import { useContext as useContext85 } from "react";
 
 // src/components/InstallPackage.tsx
-import { apiDocs, descriptions, installableMap } from "@remotion/studio-shared";
-import React145, { useCallback as useCallback101, useContext as useContext73, useEffect as useEffect73 } from "react";
+import {
+  apiDocs,
+  descriptions,
+  extraPackages,
+  installableMap
+} from "@remotion/studio-shared";
+import React145, { useCallback as useCallback101, useContext as useContext73, useEffect as useEffect72 } from "react";
 import { VERSION as VERSION2 } from "remotion";
 
 // src/api/install-package.ts
@@ -37647,7 +37634,7 @@ var InstallPackageModal = ({ packageManager }) => {
   const canSelectPackages = state.type === "idle" && ctx.type === "connected";
   const disabled = !(canSelectPackages || state.type === "done") || selectedPackages.length === 0;
   const { registerKeybinding } = useKeybinding();
-  useEffect73(() => {
+  useEffect72(() => {
     if (disabled) {
       return;
     }
@@ -37692,42 +37679,72 @@ var InstallPackageModal = ({ packageManager }) => {
             selectedPackages.length === 1 ? "" : "s",
             ". Check your terminal for progress."
           ]
-        }) : /* @__PURE__ */ jsx210("div", {
+        }) : /* @__PURE__ */ jsxs103("div", {
           style: text2,
-          children: Object.entries(installableMap).filter(([, install]) => install).map(([pkgShort]) => {
-            const pkg = pkgShort === "core" ? "remotion" : `@remotion/${pkgShort}`;
-            const isInstalled = window.remotion_installedPackages?.includes(pkg) ?? false;
-            const link = apiDocs[pkgShort];
-            const description = descriptions[pkgShort];
-            if (!link) {
-              throw new Error("No link for " + pkg);
-            }
-            if (!description) {
-              throw new Error("No description for " + pkg);
-            }
-            return /* @__PURE__ */ jsxs103(Row, {
-              align: "center",
-              children: [
-                /* @__PURE__ */ jsx210(Checkbox, {
-                  checked: map[pkg],
-                  name: pkg,
-                  onChange: () => {
-                    setMap((prev) => ({ ...prev, [pkg]: !prev[pkg] }));
-                  },
-                  disabled: !canSelectPackages || isInstalled
-                }),
-                /* @__PURE__ */ jsx210(Spacing, {
-                  x: 1.5
-                }),
-                /* @__PURE__ */ jsx210(InstallablePackageComp, {
-                  description,
-                  isInstalled,
-                  link,
-                  pkg
-                })
-              ]
-            }, pkg);
-          })
+          children: [
+            Object.entries(installableMap).filter(([, install]) => install).map(([pkgShort]) => {
+              const pkg = pkgShort === "core" ? "remotion" : `@remotion/${pkgShort}`;
+              const isInstalled = window.remotion_installedPackages?.includes(pkg) ?? false;
+              const link = apiDocs[pkgShort];
+              const description = descriptions[pkgShort];
+              if (!link) {
+                throw new Error("No link for " + pkg);
+              }
+              if (!description) {
+                throw new Error("No description for " + pkg);
+              }
+              return /* @__PURE__ */ jsxs103(Row, {
+                align: "center",
+                children: [
+                  /* @__PURE__ */ jsx210(Checkbox, {
+                    checked: map[pkg],
+                    name: pkg,
+                    onChange: () => {
+                      setMap((prev) => ({ ...prev, [pkg]: !prev[pkg] }));
+                    },
+                    disabled: !canSelectPackages || isInstalled
+                  }),
+                  /* @__PURE__ */ jsx210(Spacing, {
+                    x: 1.5
+                  }),
+                  /* @__PURE__ */ jsx210(InstallablePackageComp, {
+                    description,
+                    isInstalled,
+                    link,
+                    pkg
+                  })
+                ]
+              }, pkg);
+            }),
+            extraPackages.map((extraPkg) => {
+              const isInstalled = window.remotion_installedPackages?.includes(extraPkg.name) ?? false;
+              return /* @__PURE__ */ jsxs103(Row, {
+                align: "center",
+                children: [
+                  /* @__PURE__ */ jsx210(Checkbox, {
+                    checked: map[extraPkg.name],
+                    name: extraPkg.name,
+                    onChange: () => {
+                      setMap((prev) => ({
+                        ...prev,
+                        [extraPkg.name]: !prev[extraPkg.name]
+                      }));
+                    },
+                    disabled: !canSelectPackages || isInstalled
+                  }),
+                  /* @__PURE__ */ jsx210(Spacing, {
+                    x: 1.5
+                  }),
+                  /* @__PURE__ */ jsx210(InstallablePackageComp, {
+                    description: extraPkg.description,
+                    isInstalled,
+                    link: extraPkg.docsUrl,
+                    pkg: `${extraPkg.name}@${extraPkg.version}`
+                  })
+                ]
+              }, extraPkg.name);
+            })
+          ]
         })
       }),
       /* @__PURE__ */ jsx210(ModalFooterContainer, {
@@ -37771,7 +37788,7 @@ var InstallPackageModal = ({ packageManager }) => {
 import { useCallback as useCallback103, useContext as useContext76, useMemo as useMemo112 } from "react";
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
-import React146, { useContext as useContext74, useEffect as useEffect74, useMemo as useMemo111 } from "react";
+import React146, { useContext as useContext74, useEffect as useEffect73, useMemo as useMemo111 } from "react";
 import { Internals as Internals56 } from "remotion";
 import { jsx as jsx211, jsxs as jsxs104 } from "react/jsx-runtime";
 var loaderContainer2 = {
@@ -37795,7 +37812,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
   const resolved = Internals56.useResolvedVideoConfig(compositionId);
   const unresolvedContext = useContext74(Internals56.CompositionManager);
   const unresolved = unresolvedContext.compositions.find((c) => compositionId === c.id);
-  useEffect74(() => {
+  useEffect73(() => {
     const { current } = Internals56.resolveCompositionsRef;
     if (!current) {
       throw new Error("No ref to trigger composition calc");
@@ -37853,7 +37870,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 };
 
 // src/components/NewComposition/CodemodFooter.tsx
-import { useCallback as useCallback102, useContext as useContext75, useEffect as useEffect75, useState as useState71 } from "react";
+import { useCallback as useCallback102, useContext as useContext75, useEffect as useEffect74, useState as useState71 } from "react";
 
 // src/components/NewComposition/DiffPreview.tsx
 import { jsx as jsx212, jsxs as jsxs105 } from "react/jsx-runtime";
@@ -37918,7 +37935,7 @@ var CodemodFooter = ({
     type: "loading"
   });
   const [projectInfo, setProjectInfo] = useState71(null);
-  useEffect75(() => {
+  useEffect74(() => {
     const controller = new AbortController;
     getProjectInfo(controller.signal).then((info) => {
       setProjectInfo(info.projectInfo);
@@ -37964,7 +37981,7 @@ var CodemodFooter = ({
       });
     }
   }, [codemod]);
-  useEffect75(() => {
+  useEffect74(() => {
     const abortController = new AbortController;
     let aborted = false;
     getCanApplyCodemod(abortController.signal).then(() => {
@@ -37982,7 +37999,7 @@ var CodemodFooter = ({
   }, [codemodStatus, getCanApplyCodemod, setSelectedModal]);
   const disabled = !valid || submitting || projectInfo === null || codemodStatus.type !== "success";
   const { registerKeybinding } = useKeybinding();
-  useEffect75(() => {
+  useEffect74(() => {
     if (disabled) {
       return;
     }
@@ -38804,7 +38821,7 @@ var OverrideInputPropsModal = () => {
 import {
   useCallback as useCallback108,
   useContext as useContext80,
-  useEffect as useEffect77,
+  useEffect as useEffect76,
   useMemo as useMemo117,
   useRef as useRef42,
   useState as useState76
@@ -39604,7 +39621,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect76, useMemo as useMemo116, useRef as useRef41, useState as useState75 } from "react";
+import { useEffect as useEffect75, useMemo as useMemo116, useRef as useRef41, useState as useState75 } from "react";
 import { jsx as jsx222, jsxs as jsxs114, Fragment as Fragment35 } from "react/jsx-runtime";
 var container49 = {
   paddingLeft: 16,
@@ -39636,7 +39653,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
   const [hovered, setIsHovered] = useState75(false);
   const ref = useRef41(null);
   const keybindings = useKeybinding();
-  useEffect76(() => {
+  useEffect75(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -39650,7 +39667,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       current.removeEventListener("mouseleave", onMouseLeave);
     };
   }, []);
-  useEffect76(() => {
+  useEffect75(() => {
     if (!selected) {
       return;
     }
@@ -39667,7 +39684,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       binding.unregister();
     };
   }, [keybindings, result.onSelected, selected]);
-  useEffect76(() => {
+  useEffect75(() => {
     if (selected) {
       ref.current?.scrollIntoView({
         block: "nearest",
@@ -39881,7 +39898,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       selectedIndex: 0
     };
   });
-  useEffect77(() => {
+  useEffect76(() => {
     setState({
       query: mapModeToQuery(initialMode),
       selectedIndex: 0
@@ -39955,7 +39972,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       };
     });
   }, []);
-  useEffect77(() => {
+  useEffect76(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowUp",
       callback: onArrowUp,
@@ -39969,7 +39986,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       binding.unregister();
     };
   }, [keybindings, onArrowDown, onArrowUp]);
-  useEffect77(() => {
+  useEffect76(() => {
     if (mode !== "docs") {
       return;
     }
@@ -39994,7 +40011,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       cancelled = true;
     };
   }, [actualQuery, mode]);
-  useEffect77(() => {
+  useEffect76(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowDown",
       callback: onArrowDown,
@@ -40648,7 +40665,7 @@ import { getDefaultOutLocation } from "@remotion/studio-shared";
 import {
   useCallback as useCallback128,
   useContext as useContext83,
-  useEffect as useEffect80,
+  useEffect as useEffect79,
   useMemo as useMemo128,
   useReducer as useReducer2,
   useRef as useRef44,
@@ -40818,7 +40835,7 @@ import { useCallback as useCallback113 } from "react";
 import { BrowserSafeApis } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
-import { useCallback as useCallback112, useEffect as useEffect78, useMemo as useMemo121, useState as useState79 } from "react";
+import { useCallback as useCallback112, useEffect as useEffect77, useMemo as useMemo121, useState as useState79 } from "react";
 import { jsx as jsx235 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: 16,
@@ -40869,7 +40886,7 @@ var CliCopyButton = ({
   const onPointerLeave = useCallback112(() => {
     setHovered(false);
   }, []);
-  useEffect78(() => {
+  useEffect77(() => {
     if (!copied) {
       return;
     }
@@ -42191,14 +42208,14 @@ import { BrowserSafeApis as BrowserSafeApis4 } from "@remotion/renderer/client";
 import { useCallback as useCallback120, useMemo as useMemo123 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext82, useEffect as useEffect79, useRef as useRef43, useState as useState81 } from "react";
+import { useContext as useContext82, useEffect as useEffect78, useRef as useRef43, useState as useState81 } from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState81(false);
   const { previewServerState: state, subscribeToEvent } = useContext82(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
   const currentOutName = useRef43("");
   currentOutName.current = outName;
-  useEffect79(() => {
+  useEffect78(() => {
     if (!clientId) {
       return;
     }
@@ -42214,7 +42231,7 @@ var useFileExistence = (outName) => {
       unsubscribeFromFileExistenceWatcher({ file: outName, clientId });
     };
   }, [clientId, outName]);
-  useEffect79(() => {
+  useEffect78(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-deleted") {
         return;
@@ -42231,7 +42248,7 @@ var useFileExistence = (outName) => {
       unsub();
     };
   }, [outName, subscribeToEvent]);
-  useEffect79(() => {
+  useEffect78(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-undeleted") {
         return;
@@ -44283,7 +44300,7 @@ var RenderModal = ({
     offthreadVideoThreads,
     mediaCacheSizeInBytes
   ]);
-  useEffect80(() => {
+  useEffect79(() => {
     return () => {
       isMounted.current = false;
     };
@@ -44452,7 +44469,7 @@ var RenderModal = ({
       onClickVideo();
     }
   }, [renderMode, onClickStill, onClickSequence, onClickVideo]);
-  useEffect80(() => {
+  useEffect79(() => {
     if (renderDisabled) {
       return;
     }
@@ -44780,7 +44797,7 @@ import {
   getEncodableAudioCodecs,
   getSupportedAudioCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect81, useRef as useRef45, useState as useState83 } from "react";
+import { useEffect as useEffect80, useRef as useRef45, useState as useState83 } from "react";
 var useEncodableAudioCodecs = (container60) => {
   const cacheRef = useRef45({});
   const [codecsByContainer, setCodecsByContainer] = useState83(() => {
@@ -44788,7 +44805,7 @@ var useEncodableAudioCodecs = (container60) => {
       [container60]: getSupportedAudioCodecsForContainer(container60)
     };
   });
-  useEffect81(() => {
+  useEffect80(() => {
     const cached = cacheRef.current[container60];
     if (cached) {
       return;
@@ -44822,7 +44839,7 @@ import {
   getEncodableVideoCodecs,
   getSupportedVideoCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect82, useRef as useRef46, useState as useState84 } from "react";
+import { useEffect as useEffect81, useRef as useRef46, useState as useState84 } from "react";
 var useEncodableVideoCodecs = (container60) => {
   const cacheRef = useRef46({});
   const [codecsByContainer, setCodecsByContainer] = useState84(() => {
@@ -44830,7 +44847,7 @@ var useEncodableVideoCodecs = (container60) => {
       [container60]: getSupportedVideoCodecsForContainer(container60)
     };
   });
-  useEffect82(() => {
+  useEffect81(() => {
     const cached = cacheRef.current[container60];
     if (cached) {
       return;
@@ -45469,7 +45486,7 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalLicense.tsx
-import { useCallback as useCallback130, useEffect as useEffect83, useState as useState85 } from "react";
+import { useCallback as useCallback130, useEffect as useEffect82, useState as useState85 } from "react";
 
 // src/icons/check-circle-filled.tsx
 import { jsx as jsx265 } from "react/jsx-runtime";
@@ -45691,7 +45708,7 @@ var WebRenderModalLicense = ({
 }) => {
   const [licenseValidation, setLicenseValidation] = useState85({ valid: true, message: null, details: null });
   const [isLoading, setIsLoading] = useState85(false);
-  useEffect83(() => {
+  useEffect82(() => {
     if (licenseKey === null || licenseKey === "free-license") {
       return setLicenseValidation({
         valid: true,
@@ -46525,7 +46542,7 @@ var WebRenderModalWithLoader = (props) => {
 import { useCallback as useCallback135, useMemo as useMemo135 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback133, useEffect as useEffect84, useState as useState87 } from "react";
+import { useCallback as useCallback133, useEffect as useEffect83, useState as useState87 } from "react";
 import { jsx as jsx270, jsxs as jsxs145 } from "react/jsx-runtime";
 var iconStyle8 = {
   width: 16,
@@ -46563,7 +46580,7 @@ var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [textToCopy]);
-  useEffect84(() => {
+  useEffect83(() => {
     if (!copied) {
       return;
     }
@@ -46915,7 +46932,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: true
   });
-  useEffect85(() => {
+  useEffect84(() => {
     if (readOnlyStudio) {
       return;
     }
@@ -47113,7 +47130,7 @@ var ModalsProvider = ({ children }) => {
 
 // src/components/RenderQueue/ClientRenderQueueProcessor.tsx
 import { renderMediaOnWeb, renderStillOnWeb } from "@remotion/web-renderer";
-import { useCallback as useCallback139, useContext as useContext87, useEffect as useEffect86 } from "react";
+import { useCallback as useCallback139, useContext as useContext87, useEffect as useEffect85 } from "react";
 var downloadBlob = (blob, filename) => {
   const url = URL.createObjectURL(blob);
   const a = document.createElement("a");
@@ -47249,7 +47266,7 @@ var ClientRenderQueueProcessor = () => {
     markClientJobFailed,
     markClientJobCancelled
   ]);
-  useEffect86(() => {
+  useEffect85(() => {
     setProcessJobCallback(processJob);
     return () => setProcessJobCallback(null);
   }, [processJob, setProcessJobCallback]);
@@ -47257,7 +47274,7 @@ var ClientRenderQueueProcessor = () => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect87, useMemo as useMemo141, useState as useState93 } from "react";
+import { useEffect as useEffect86, useMemo as useMemo141, useState as useState93 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -47281,7 +47298,7 @@ var SetTimelineInOutProvider = ({ children }) => {
       setInAndOutFrames
     };
   }, []);
-  useEffect87(() => {
+  useEffect86(() => {
     persistMarks(inAndOutFrames);
   }, [inAndOutFrames]);
   return /* @__PURE__ */ jsx280(TimelineInOutContext.Provider, {
@@ -47697,7 +47714,7 @@ var Studio = ({ rootComponent, readOnly }) => {
 };
 
 // src/components/NoRegisterRoot.tsx
-import { useEffect as useEffect88, useState as useState97 } from "react";
+import { useEffect as useEffect87, useState as useState97 } from "react";
 import { AbsoluteFill as AbsoluteFill6 } from "remotion";
 import { jsx as jsx287, jsxs as jsxs153 } from "react/jsx-runtime";
 var label12 = {
@@ -47719,7 +47736,7 @@ var link5 = {
 };
 var NoRegisterRoot = () => {
   const [show, setShow] = useState97(() => false);
-  useEffect88(() => {
+  useEffect87(() => {
     const timeout = setTimeout(() => {
       setShow(true);
     }, 2000);