@remotion/studio 4.0.395 → 4.0.396

package/dist/esm/{chunk-jzq8t233.js → chunk-khjn7st6.js}

@@ -10,7 +10,7 @@ import { Internals as Internals66 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
-import React175, { useCallback as useCallback135, useEffect as useEffect78, useMemo as useMemo135 } from "react";
+import React175, { useCallback as useCallback134, useEffect as useEffect78, useMemo as useMemo135 } from "react";
 import { Internals as Internals62 } from "remotion";
 
 // src/helpers/colors.ts
@@ -17948,6 +17948,10 @@ var TriggerWebRender = () => {
     if (!video?.id) {
       return null;
     }
+    const defaults = window.remotion_renderDefaults;
+    if (!defaults) {
+      throw new TypeError("Expected defaults");
+    }
     const frame2 = getCurrentFrame2();
     setSelectedModal({
       type: "web-render",
@@ -17955,7 +17959,8 @@ var TriggerWebRender = () => {
       compositionId: video.id,
       defaultProps: video.defaultProps,
       inFrameMark: inFrame,
-      outFrameMark: outFrame
+      outFrameMark: outFrame,
+      initialLogLevel: defaults.logLevel
     });
   }, [
     getCurrentFrame2,
@@ -40041,6 +40046,26 @@ var humanReadableCodec = (codec) => {
   throw new TypeError(`Got unexpected codec "${codec}"`);
 };
 
+// src/components/RenderModal/human-readable-loglevel.ts
+var humanReadableLogLevel = (logLevel) => {
+  if (logLevel === "trace") {
+    return "Trace";
+  }
+  if (logLevel === "verbose") {
+    return "Verbose";
+  }
+  if (logLevel === "info") {
+    return "Info";
+  }
+  if (logLevel === "warn") {
+    return "Warn";
+  }
+  if (logLevel === "error") {
+    return "Error";
+  }
+  throw new TypeError(`Got unexpected log level "${logLevel}"`);
+};
+
 // src/components/RenderModal/RenderModalBasic.tsx
 import { jsx as jsx250, jsxs as jsxs129 } from "react/jsx-runtime";
 var container56 = {
@@ -40117,9 +40142,21 @@ var RenderModalBasic = ({
   const onValueChange = useCallback123((e) => {
     setOutName(e.target.value);
   }, [setOutName]);
-  const onVerboseLoggingChanged = useCallback123((e) => {
-    setVerboseLogging(e.target.checked ? "verbose" : "info");
-  }, [setVerboseLogging]);
+  const logLevelOptions = useMemo125(() => {
+    return ["trace", "verbose", "info", "warn", "error"].map((level) => {
+      return {
+        label: humanReadableLogLevel(level),
+        onClick: () => setVerboseLogging(level),
+        leftItem: logLevel === level ? /* @__PURE__ */ jsx250(Checkmark, {}) : null,
+        id: level,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: "item",
+        value: level
+      };
+    });
+  }, [logLevel, setVerboseLogging]);
   return /* @__PURE__ */ jsxs129("div", {
     style: container56,
     children: [
@@ -40227,7 +40264,7 @@ var RenderModalBasic = ({
           /* @__PURE__ */ jsxs129("div", {
             style: label5,
             children: [
-              "Verbose logging ",
+              "Log Level ",
               /* @__PURE__ */ jsx250(Spacing, {
                 x: 0.5
               }),
@@ -40238,10 +40275,10 @@ var RenderModalBasic = ({
           }),
           /* @__PURE__ */ jsx250("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx250(Checkbox, {
-              checked: logLevel === "verbose",
-              onChange: onVerboseLoggingChanged,
-              name: "verbose-logging"
+            children: /* @__PURE__ */ jsx250(Combobox, {
+              values: logLevelOptions,
+              selectedId: logLevel,
+              title: "Log Level"
             })
           })
         ]
@@ -41963,7 +42000,7 @@ var RenderModalWithLoader = (props) => {
 // src/components/RenderModal/WebRenderModal.tsx
 import { getDefaultOutLocation as getDefaultOutLocation2 } from "@remotion/studio-shared";
 import { renderMediaOnWeb, renderStillOnWeb } from "@remotion/web-renderer";
-import { useCallback as useCallback131, useContext as useContext83, useMemo as useMemo132, useState as useState80 } from "react";
+import { useCallback as useCallback130, useContext as useContext83, useMemo as useMemo132, useState as useState80 } from "react";
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
 import { useCallback as useCallback128, useMemo as useMemo129 } from "react";
@@ -42105,7 +42142,7 @@ var WebRenderModalAdvanced = ({
 };
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
-import { useCallback as useCallback129, useMemo as useMemo130 } from "react";
+import { useMemo as useMemo130 } from "react";
 import { jsx as jsx258, jsxs as jsxs136, Fragment as Fragment44 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
@@ -42154,6 +42191,21 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [imageFormat, setStillFormat]);
+  const logLevelOptions = useMemo130(() => {
+    return ["trace", "verbose", "info", "warn", "error"].map((level) => {
+      return {
+        label: humanReadableLogLevel(level),
+        onClick: () => setLogLevel(level),
+        leftItem: logLevel === level ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
+        id: level,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: "item",
+        value: level
+      };
+    });
+  }, [logLevel, setLogLevel]);
   const containerOptions = useMemo130(() => {
     return [
       {
@@ -42239,9 +42291,6 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [codec, setCodec]);
-  const onVerboseLoggingChanged = useCallback129((e) => {
-    setLogLevel(e.target.checked ? "verbose" : "info");
-  }, [setLogLevel]);
   return /* @__PURE__ */ jsxs136("div", {
     style: tabContainer2,
     children: [
@@ -42357,7 +42406,7 @@ var WebRenderModalBasic = ({
           /* @__PURE__ */ jsxs136("div", {
             style: label5,
             children: [
-              "Verbose logging ",
+              "Log Level ",
               /* @__PURE__ */ jsx258(Spacing, {
                 x: 0.5
               }),
@@ -42368,10 +42417,10 @@ var WebRenderModalBasic = ({
           }),
           /* @__PURE__ */ jsx258("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx258(Checkbox, {
-              checked: logLevel === "verbose",
-              onChange: onVerboseLoggingChanged,
-              name: "verbose-logging"
+            children: /* @__PURE__ */ jsx258(Combobox, {
+              values: logLevelOptions,
+              selectedId: logLevel,
+              title: "Log Level"
             })
           })
         ]
@@ -42381,7 +42430,7 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
-import { useCallback as useCallback130, useMemo as useMemo131 } from "react";
+import { useCallback as useCallback129, useMemo as useMemo131 } from "react";
 import { jsx as jsx259, jsxs as jsxs137 } from "react/jsx-runtime";
 var tabContainer3 = {
   flex: 1
@@ -42454,7 +42503,7 @@ var WebRenderModalPicture = ({
       }
     ];
   }, [videoBitrate, setVideoBitrate]);
-  const onTransparentChanged = useCallback130((e) => {
+  const onTransparentChanged = useCallback129((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
   if (renderMode !== "video") {
@@ -42559,7 +42608,8 @@ var WebRenderModal = ({
   initialFrame,
   defaultProps,
   inFrameMark,
-  outFrameMark
+  outFrameMark,
+  initialLogLevel
 }) => {
   const context = useContext83(ResolvedCompositionContext);
   if (!context) {
@@ -42569,11 +42619,14 @@ var WebRenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const [renderMode, setRenderMode] = useState80("video");
+  const [isVideo] = useState80(() => {
+    return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
+  });
+  const [renderMode, setRenderMode] = useState80(isVideo ? "video" : "still");
   const [tab, setTab] = useState80("general");
   const [imageFormat, setImageFormat] = useState80("png");
   const [frame2, setFrame] = useState80(() => initialFrame);
-  const [logLevel, setLogLevel] = useState80("info");
+  const [logLevel, setLogLevel] = useState80(() => initialLogLevel);
   const [inputProps, setInputProps] = useState80(() => defaultProps);
   const [delayRenderTimeout, setDelayRenderTimeout] = useState80(30000);
   const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState80(null);
@@ -42608,28 +42661,28 @@ var WebRenderModal = ({
   const [initialOutName] = useState80(() => {
     return getDefaultOutLocation2({
       compositionName: resolvedComposition.id,
-      defaultExtension: container60,
+      defaultExtension: renderMode === "still" ? imageFormat : isVideo ? container60 : imageFormat,
       type: "asset",
       compositionDefaultOutName: resolvedComposition.defaultOutName,
       clientSideRender: true
     });
   });
   const [outName, setOutName] = useState80(() => initialOutName);
-  const setStillFormat = useCallback131((format) => {
+  const setStillFormat = useCallback130((format) => {
     setImageFormat(format);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + format;
       return newFileName;
     });
   }, []);
-  const setContainerFormat = useCallback131((newContainer) => {
+  const setContainerFormat = useCallback130((newContainer) => {
     setContainer(newContainer);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + newContainer;
       return newFileName;
     });
   }, []);
-  const onRenderModeChange = useCallback131((newMode) => {
+  const onRenderModeChange = useCallback130((newMode) => {
     setRenderMode(newMode);
     if (newMode === "video") {
       setOutName((prev) => {
@@ -42666,10 +42719,10 @@ var WebRenderModal = ({
     }
     return options;
   }, [renderMode, resolvedComposition.durationInFrames, onRenderModeChange]);
-  const onFrameSetDirectly = useCallback131((newFrame) => {
+  const onFrameSetDirectly = useCallback130((newFrame) => {
     setFrame(newFrame);
   }, [setFrame]);
-  const onFrameChanged = useCallback131((e) => {
+  const onFrameChanged = useCallback130((e) => {
     setFrame((q) => {
       const newFrame = parseFloat(e);
       if (Number.isNaN(newFrame)) {
@@ -42678,7 +42731,7 @@ var WebRenderModal = ({
       return newFrame;
     });
   }, [setFrame]);
-  const onOutNameChange = useCallback131((e) => {
+  const onOutNameChange = useCallback130((e) => {
     setOutName(e.target.value);
   }, []);
   const outnameValidation = useMemo132(() => {
@@ -42720,8 +42773,8 @@ var WebRenderModal = ({
       return { valid: false, error: err };
     }
   }, [outName, imageFormat, renderMode, container60]);
-  const onRenderStill = useCallback131(async () => {
-    const blob = await renderStillOnWeb({
+  const onRenderStill = useCallback130(async () => {
+    const { blob } = await renderStillOnWeb({
       composition: {
         component: unresolvedComposition.component,
         width: resolvedComposition.width,
@@ -42763,7 +42816,7 @@ var WebRenderModal = ({
     unresolvedComposition.calculateMetadata,
     resolvedComposition.id
   ]);
-  const onRenderVideo = useCallback131(async () => {
+  const onRenderVideo = useCallback130(async () => {
     setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
     const { getBlob } = await renderMediaOnWeb({
       composition: {
@@ -42823,7 +42876,7 @@ var WebRenderModal = ({
     resolvedComposition.id,
     unresolvedComposition.calculateMetadata
   ]);
-  const onRender = useCallback131(async () => {
+  const onRender = useCallback130(async () => {
     if (renderMode === "still") {
       await onRenderStill();
     } else {
@@ -42993,10 +43046,10 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback134, useMemo as useMemo134 } from "react";
+import { useCallback as useCallback133, useMemo as useMemo134 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback132, useEffect as useEffect77, useState as useState81 } from "react";
+import { useCallback as useCallback131, useEffect as useEffect77, useState as useState81 } from "react";
 import { jsx as jsx261, jsxs as jsxs139 } from "react/jsx-runtime";
 var iconStyle8 = {
   width: 16,
@@ -43027,7 +43080,7 @@ var labelStyle5 = {
 };
 var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
   const [copied, setCopied] = useState81(false);
-  const onClick = useCallback132(() => {
+  const onClick = useCallback131(() => {
     copyText(textToCopy).then(() => {
       setCopied(Date.now());
     }).catch((err) => {
@@ -43059,7 +43112,7 @@ var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback133, useMemo as useMemo133, useState as useState82 } from "react";
+import { useCallback as useCallback132, useMemo as useMemo133, useState as useState82 } from "react";
 import { jsx as jsx262 } from "react/jsx-runtime";
 var svgStyle3 = {
   width: "11px",
@@ -43076,7 +43129,7 @@ var buttonStyle8 = {
 var OpenIssueButton = ({ link: link3 }) => {
   const [hovered, setHovered] = useState82(false);
   const buttonTooltip = `Open GitHub issue in new Tab`;
-  const handleClick = useCallback133(() => {
+  const handleClick = useCallback132(() => {
     window.open(link3, "_blank");
   }, [link3]);
   const svgFillColor = useMemo133(() => {
@@ -43090,10 +43143,10 @@ var OpenIssueButton = ({ link: link3 }) => {
       d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
     })
   });
-  const onPointerEnter = useCallback133(() => {
+  const onPointerEnter = useCallback132(() => {
     setHovered(true);
   }, []);
-  const onPointerLeave = useCallback133(() => {
+  const onPointerLeave = useCallback132(() => {
     setHovered(false);
   }, []);
   return /* @__PURE__ */ jsx262("button", {
@@ -43180,7 +43233,7 @@ var UpdateModal = ({ info, knownBugs }) => {
     return knownBugs && knownBugs?.length > 0;
   }, [knownBugs]);
   const command = commands[info.packageManager];
-  const onClick = useCallback134(() => {
+  const onClick = useCallback133(() => {
     copyText(command).catch((err) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
@@ -43296,7 +43349,8 @@ var Modals = ({ readOnlyStudio }) => {
         compositionId: modalContextType.compositionId,
         defaultProps: modalContextType.defaultProps,
         inFrameMark: modalContextType.inFrameMark,
-        outFrameMark: modalContextType.outFrameMark
+        outFrameMark: modalContextType.outFrameMark,
+        initialLogLevel: modalContextType.initialLogLevel
       }),
       modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx265(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,
@@ -43399,7 +43453,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     };
   }, [readOnlyStudio]);
   const [canvasMounted, setCanvasMounted] = React175.useState(false);
-  const onMounted = useCallback135(() => {
+  const onMounted = useCallback134(() => {
     setCanvasMounted(true);
   }, []);
   const value = useMemo135(() => {
@@ -43455,7 +43509,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals21 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback136, useContext as useContext85, useMemo as useMemo136, useState as useState83 } from "react";
+import { useCallback as useCallback135, useContext as useContext85, useMemo as useMemo136, useState as useState83 } from "react";
 import { Internals as Internals63 } from "remotion";
 import { jsx as jsx267 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -43484,7 +43538,7 @@ var PreviewSizeProvider = ({ children }) => {
     };
   });
   const { editorZoomGestures } = useContext85(EditorZoomGesturesContext);
-  const setSize = useCallback136((newValue) => {
+  const setSize = useCallback135((newValue) => {
     setSizeState((prevState) => {
       const newVal = newValue(prevState);
       persistPreviewSizeOption(newVal);
@@ -43512,11 +43566,11 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback137, useMemo as useMemo137, useState as useState84 } from "react";
+import { useCallback as useCallback136, useMemo as useMemo137, useState as useState84 } from "react";
 import { jsx as jsx268 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState84(() => loadCheckerboardOption());
-  const setCheckerboard = useCallback137((newValue) => {
+  const setCheckerboard = useCallback136((newValue) => {
     setCheckerboardState((prevState) => {
       const newVal = newValue(prevState);
       persistCheckerboardOption(newVal);
@@ -43618,7 +43672,7 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback138, useMemo as useMemo141, useRef as useRef42, useState as useState88 } from "react";
+import { useCallback as useCallback137, useMemo as useMemo141, useRef as useRef42, useState as useState88 } from "react";
 import { jsx as jsx272 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState88(() => loadGuidesList());
@@ -43627,7 +43681,7 @@ var ShowGuidesProvider = ({ children }) => {
   const [editorShowGuides, setEditorShowGuidesState] = useState88(() => loadEditorShowGuidesOption());
   const shouldCreateGuideRef = useRef42(false);
   const shouldDeleteGuideRef = useRef42(false);
-  const setEditorShowGuides = useCallback138((newValue) => {
+  const setEditorShowGuides = useCallback137((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowGuidesOption(newVal);
@@ -43661,11 +43715,11 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback139, useMemo as useMemo142, useState as useState89 } from "react";
+import { useCallback as useCallback138, useMemo as useMemo142, useState as useState89 } from "react";
 import { jsx as jsx273 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState89(() => loadEditorShowRulersOption());
-  const setEditorShowRulers = useCallback139((newValue) => {
+  const setEditorShowRulers = useCallback138((newValue) => {
     setEditorShowRulersState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowRulersOption(newVal);
@@ -43685,11 +43739,11 @@ var ShowRulersProvider = ({ children }) => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback140, useMemo as useMemo143, useState as useState90 } from "react";
+import { useCallback as useCallback139, useMemo as useMemo143, useState as useState90 } from "react";
 import { jsx as jsx274 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState90(() => loadEditorZoomGesturesOption());
-  const setEditorZoomGestures = useCallback140((newValue) => {
+  const setEditorZoomGestures = useCallback139((newValue) => {
     setEditorZoomGesturesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorZoomGesturesOption(newVal);