@remotion/studio 4.0.395 → 4.0.396

package/dist/esm/previewEntry.mjs

@@ -34,7 +34,7 @@ import { Internals as Internals66 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
-import React176, { useCallback as useCallback136, useEffect as useEffect78, useMemo as useMemo135 } from "react";
+import React176, { useCallback as useCallback135, useEffect as useEffect78, useMemo as useMemo135 } from "react";
 import { Internals as Internals62 } from "remotion";
 
 // src/helpers/colors.ts
@@ -18247,6 +18247,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",
@@ -18254,7 +18258,8 @@ var TriggerWebRender = () => {
       compositionId: video.id,
       defaultProps: video.defaultProps,
       inFrameMark: inFrame,
-      outFrameMark: outFrame
+      outFrameMark: outFrame,
+      initialLogLevel: defaults.logLevel
     });
   }, [
     getCurrentFrame2,
@@ -40340,6 +40345,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 jsx251, jsxs as jsxs129 } from "react/jsx-runtime";
 var container56 = {
@@ -40416,9 +40441,21 @@ var RenderModalBasic = ({
   const onValueChange = useCallback124((e) => {
     setOutName(e.target.value);
   }, [setOutName]);
-  const onVerboseLoggingChanged = useCallback124((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__ */ jsx251(Checkmark, {}) : null,
+        id: level,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: "item",
+        value: level
+      };
+    });
+  }, [logLevel, setVerboseLogging]);
   return /* @__PURE__ */ jsxs129("div", {
     style: container56,
     children: [
@@ -40526,7 +40563,7 @@ var RenderModalBasic = ({
           /* @__PURE__ */ jsxs129("div", {
             style: label5,
             children: [
-              "Verbose logging ",
+              "Log Level ",
               /* @__PURE__ */ jsx251(Spacing, {
                 x: 0.5
               }),
@@ -40537,10 +40574,10 @@ var RenderModalBasic = ({
           }),
           /* @__PURE__ */ jsx251("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx251(Checkbox, {
-              checked: logLevel === "verbose",
-              onChange: onVerboseLoggingChanged,
-              name: "verbose-logging"
+            children: /* @__PURE__ */ jsx251(Combobox, {
+              values: logLevelOptions,
+              selectedId: logLevel,
+              title: "Log Level"
             })
           })
         ]
@@ -42262,7 +42299,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 useCallback132, useContext as useContext83, useMemo as useMemo132, useState as useState81 } from "react";
+import { useCallback as useCallback131, useContext as useContext83, useMemo as useMemo132, useState as useState81 } from "react";
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
 import { useCallback as useCallback129, useMemo as useMemo129 } from "react";
@@ -42404,7 +42441,7 @@ var WebRenderModalAdvanced = ({
 };
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
-import { useCallback as useCallback130, useMemo as useMemo130 } from "react";
+import { useMemo as useMemo130 } from "react";
 import { jsx as jsx259, jsxs as jsxs136, Fragment as Fragment44 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
@@ -42453,6 +42490,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__ */ jsx259(Checkmark, {}) : null,
+        id: level,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: "item",
+        value: level
+      };
+    });
+  }, [logLevel, setLogLevel]);
   const containerOptions = useMemo130(() => {
     return [
       {
@@ -42538,9 +42590,6 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [codec, setCodec]);
-  const onVerboseLoggingChanged = useCallback130((e) => {
-    setLogLevel(e.target.checked ? "verbose" : "info");
-  }, [setLogLevel]);
   return /* @__PURE__ */ jsxs136("div", {
     style: tabContainer2,
     children: [
@@ -42656,7 +42705,7 @@ var WebRenderModalBasic = ({
           /* @__PURE__ */ jsxs136("div", {
             style: label5,
             children: [
-              "Verbose logging ",
+              "Log Level ",
               /* @__PURE__ */ jsx259(Spacing, {
                 x: 0.5
               }),
@@ -42667,10 +42716,10 @@ var WebRenderModalBasic = ({
           }),
           /* @__PURE__ */ jsx259("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx259(Checkbox, {
-              checked: logLevel === "verbose",
-              onChange: onVerboseLoggingChanged,
-              name: "verbose-logging"
+            children: /* @__PURE__ */ jsx259(Combobox, {
+              values: logLevelOptions,
+              selectedId: logLevel,
+              title: "Log Level"
             })
           })
         ]
@@ -42680,7 +42729,7 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
-import { useCallback as useCallback131, useMemo as useMemo131 } from "react";
+import { useCallback as useCallback130, useMemo as useMemo131 } from "react";
 import { jsx as jsx260, jsxs as jsxs137 } from "react/jsx-runtime";
 var tabContainer3 = {
   flex: 1
@@ -42753,7 +42802,7 @@ var WebRenderModalPicture = ({
       }
     ];
   }, [videoBitrate, setVideoBitrate]);
-  const onTransparentChanged = useCallback131((e) => {
+  const onTransparentChanged = useCallback130((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
   if (renderMode !== "video") {
@@ -42858,7 +42907,8 @@ var WebRenderModal = ({
   initialFrame,
   defaultProps,
   inFrameMark,
-  outFrameMark
+  outFrameMark,
+  initialLogLevel
 }) => {
   const context = useContext83(ResolvedCompositionContext);
   if (!context) {
@@ -42868,11 +42918,14 @@ var WebRenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const [renderMode, setRenderMode] = useState81("video");
+  const [isVideo] = useState81(() => {
+    return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
+  });
+  const [renderMode, setRenderMode] = useState81(isVideo ? "video" : "still");
   const [tab, setTab] = useState81("general");
   const [imageFormat, setImageFormat] = useState81("png");
   const [frame2, setFrame] = useState81(() => initialFrame);
-  const [logLevel, setLogLevel] = useState81("info");
+  const [logLevel, setLogLevel] = useState81(() => initialLogLevel);
   const [inputProps, setInputProps] = useState81(() => defaultProps);
   const [delayRenderTimeout, setDelayRenderTimeout] = useState81(30000);
   const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState81(null);
@@ -42907,28 +42960,28 @@ var WebRenderModal = ({
   const [initialOutName] = useState81(() => {
     return getDefaultOutLocation2({
       compositionName: resolvedComposition.id,
-      defaultExtension: container60,
+      defaultExtension: renderMode === "still" ? imageFormat : isVideo ? container60 : imageFormat,
       type: "asset",
       compositionDefaultOutName: resolvedComposition.defaultOutName,
       clientSideRender: true
     });
   });
   const [outName, setOutName] = useState81(() => initialOutName);
-  const setStillFormat = useCallback132((format) => {
+  const setStillFormat = useCallback131((format) => {
     setImageFormat(format);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + format;
       return newFileName;
     });
   }, []);
-  const setContainerFormat = useCallback132((newContainer) => {
+  const setContainerFormat = useCallback131((newContainer) => {
     setContainer(newContainer);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + newContainer;
       return newFileName;
     });
   }, []);
-  const onRenderModeChange = useCallback132((newMode) => {
+  const onRenderModeChange = useCallback131((newMode) => {
     setRenderMode(newMode);
     if (newMode === "video") {
       setOutName((prev) => {
@@ -42965,10 +43018,10 @@ var WebRenderModal = ({
     }
     return options;
   }, [renderMode, resolvedComposition.durationInFrames, onRenderModeChange]);
-  const onFrameSetDirectly = useCallback132((newFrame) => {
+  const onFrameSetDirectly = useCallback131((newFrame) => {
     setFrame(newFrame);
   }, [setFrame]);
-  const onFrameChanged = useCallback132((e) => {
+  const onFrameChanged = useCallback131((e) => {
     setFrame((q) => {
       const newFrame = parseFloat(e);
       if (Number.isNaN(newFrame)) {
@@ -42977,7 +43030,7 @@ var WebRenderModal = ({
       return newFrame;
     });
   }, [setFrame]);
-  const onOutNameChange = useCallback132((e) => {
+  const onOutNameChange = useCallback131((e) => {
     setOutName(e.target.value);
   }, []);
   const outnameValidation = useMemo132(() => {
@@ -43019,8 +43072,8 @@ var WebRenderModal = ({
       return { valid: false, error: err };
     }
   }, [outName, imageFormat, renderMode, container60]);
-  const onRenderStill = useCallback132(async () => {
-    const blob = await renderStillOnWeb({
+  const onRenderStill = useCallback131(async () => {
+    const { blob } = await renderStillOnWeb({
       composition: {
         component: unresolvedComposition.component,
         width: resolvedComposition.width,
@@ -43062,7 +43115,7 @@ var WebRenderModal = ({
     unresolvedComposition.calculateMetadata,
     resolvedComposition.id
   ]);
-  const onRenderVideo = useCallback132(async () => {
+  const onRenderVideo = useCallback131(async () => {
     setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
     const { getBlob } = await renderMediaOnWeb({
       composition: {
@@ -43122,7 +43175,7 @@ var WebRenderModal = ({
     resolvedComposition.id,
     unresolvedComposition.calculateMetadata
   ]);
-  const onRender = useCallback132(async () => {
+  const onRender = useCallback131(async () => {
     if (renderMode === "still") {
       await onRenderStill();
     } else {
@@ -43292,10 +43345,10 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback135, useMemo as useMemo134 } from "react";
+import { useCallback as useCallback134, useMemo as useMemo134 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback133, useEffect as useEffect77, useState as useState82 } from "react";
+import { useCallback as useCallback132, useEffect as useEffect77, useState as useState82 } from "react";
 import { jsx as jsx262, jsxs as jsxs139 } from "react/jsx-runtime";
 var iconStyle8 = {
   width: 16,
@@ -43326,7 +43379,7 @@ var labelStyle5 = {
 };
 var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
   const [copied, setCopied] = useState82(false);
-  const onClick = useCallback133(() => {
+  const onClick = useCallback132(() => {
     copyText(textToCopy).then(() => {
       setCopied(Date.now());
     }).catch((err) => {
@@ -43358,7 +43411,7 @@ var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback134, useMemo as useMemo133, useState as useState83 } from "react";
+import { useCallback as useCallback133, useMemo as useMemo133, useState as useState83 } from "react";
 import { jsx as jsx263 } from "react/jsx-runtime";
 var svgStyle3 = {
   width: "11px",
@@ -43375,7 +43428,7 @@ var buttonStyle8 = {
 var OpenIssueButton = ({ link: link3 }) => {
   const [hovered, setHovered] = useState83(false);
   const buttonTooltip = `Open GitHub issue in new Tab`;
-  const handleClick = useCallback134(() => {
+  const handleClick = useCallback133(() => {
     window.open(link3, "_blank");
   }, [link3]);
   const svgFillColor = useMemo133(() => {
@@ -43389,10 +43442,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 = useCallback134(() => {
+  const onPointerEnter = useCallback133(() => {
     setHovered(true);
   }, []);
-  const onPointerLeave = useCallback134(() => {
+  const onPointerLeave = useCallback133(() => {
     setHovered(false);
   }, []);
   return /* @__PURE__ */ jsx263("button", {
@@ -43479,7 +43532,7 @@ var UpdateModal = ({ info, knownBugs }) => {
     return knownBugs && knownBugs?.length > 0;
   }, [knownBugs]);
   const command = commands[info.packageManager];
-  const onClick = useCallback135(() => {
+  const onClick = useCallback134(() => {
     copyText(command).catch((err) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
@@ -43595,7 +43648,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__ */ jsx266(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,
@@ -43698,7 +43752,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     };
   }, [readOnlyStudio]);
   const [canvasMounted, setCanvasMounted] = React176.useState(false);
-  const onMounted = useCallback136(() => {
+  const onMounted = useCallback135(() => {
     setCanvasMounted(true);
   }, []);
   const value = useMemo135(() => {
@@ -43754,7 +43808,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals21 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback137, useContext as useContext85, useMemo as useMemo136, useState as useState84 } from "react";
+import { useCallback as useCallback136, useContext as useContext85, useMemo as useMemo136, useState as useState84 } from "react";
 import { Internals as Internals63 } from "remotion";
 import { jsx as jsx268 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -43783,7 +43837,7 @@ var PreviewSizeProvider = ({ children }) => {
     };
   });
   const { editorZoomGestures } = useContext85(EditorZoomGesturesContext);
-  const setSize = useCallback137((newValue) => {
+  const setSize = useCallback136((newValue) => {
     setSizeState((prevState) => {
       const newVal = newValue(prevState);
       persistPreviewSizeOption(newVal);
@@ -43811,11 +43865,11 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback138, useMemo as useMemo137, useState as useState85 } from "react";
+import { useCallback as useCallback137, useMemo as useMemo137, useState as useState85 } from "react";
 import { jsx as jsx269 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState85(() => loadCheckerboardOption());
-  const setCheckerboard = useCallback138((newValue) => {
+  const setCheckerboard = useCallback137((newValue) => {
     setCheckerboardState((prevState) => {
       const newVal = newValue(prevState);
       persistCheckerboardOption(newVal);
@@ -43917,7 +43971,7 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback139, useMemo as useMemo141, useRef as useRef42, useState as useState89 } from "react";
+import { useCallback as useCallback138, useMemo as useMemo141, useRef as useRef42, useState as useState89 } from "react";
 import { jsx as jsx273 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState89(() => loadGuidesList());
@@ -43926,7 +43980,7 @@ var ShowGuidesProvider = ({ children }) => {
   const [editorShowGuides, setEditorShowGuidesState] = useState89(() => loadEditorShowGuidesOption());
   const shouldCreateGuideRef = useRef42(false);
   const shouldDeleteGuideRef = useRef42(false);
-  const setEditorShowGuides = useCallback139((newValue) => {
+  const setEditorShowGuides = useCallback138((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowGuidesOption(newVal);
@@ -43960,11 +44014,11 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback140, useMemo as useMemo142, useState as useState90 } from "react";
+import { useCallback as useCallback139, useMemo as useMemo142, useState as useState90 } from "react";
 import { jsx as jsx274 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState90(() => loadEditorShowRulersOption());
-  const setEditorShowRulers = useCallback140((newValue) => {
+  const setEditorShowRulers = useCallback139((newValue) => {
     setEditorShowRulersState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowRulersOption(newVal);
@@ -43984,11 +44038,11 @@ var ShowRulersProvider = ({ children }) => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback141, useMemo as useMemo143, useState as useState91 } from "react";
+import { useCallback as useCallback140, useMemo as useMemo143, useState as useState91 } from "react";
 import { jsx as jsx275 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState91(() => loadEditorZoomGesturesOption());
-  const setEditorZoomGestures = useCallback141((newValue) => {
+  const setEditorZoomGestures = useCallback140((newValue) => {
     setEditorZoomGesturesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorZoomGesturesOption(newVal);

package/dist/esm/renderEntry.mjs

@@ -206,7 +206,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-jzq8t233.js").then(({ StudioInternals }) => {
+    import("./chunk-khjn7st6.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/state/modals.d.ts

@@ -14,6 +14,7 @@ export type WebRenderModalState = {
     defaultProps: Record<string, unknown>;
     inFrameMark: number | null;
     outFrameMark: number | null;
+    initialLogLevel: LogLevel;
 };
 export type RenderModalState = {
     type: 'server-render';

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.395",
+	"version": "4.0.396",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -25,13 +25,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.395",
-		"@remotion/player": "4.0.395",
-		"@remotion/media-utils": "4.0.395",
-		"@remotion/renderer": "4.0.395",
-		"@remotion/web-renderer": "4.0.395",
-		"@remotion/studio-shared": "4.0.395",
-		"@remotion/zod-types": "4.0.395",
+		"remotion": "4.0.396",
+		"@remotion/player": "4.0.396",
+		"@remotion/media-utils": "4.0.396",
+		"@remotion/renderer": "4.0.396",
+		"@remotion/web-renderer": "4.0.396",
+		"@remotion/studio-shared": "4.0.396",
+		"@remotion/zod-types": "4.0.396",
 		"mediabunny": "1.27.2",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -42,7 +42,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.395",
+		"@remotion/eslint-config-internal": "4.0.396",
 		"eslint": "9.19.0"
 	},
 	"publishConfig": {