@remotion/studio 4.0.401 → 4.0.403

package/dist/esm/previewEntry.mjs

@@ -34,7 +34,7 @@ import { Internals as Internals65 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React177, { useCallback as useCallback135, useEffect as useEffect80, useMemo as useMemo136 } from "react";
+import React178, { useCallback as useCallback135, useEffect as useEffect82, useMemo as useMemo137 } from "react";
 import { Internals as Internals61 } from "remotion";
 
 // src/helpers/colors.ts
@@ -1899,7 +1899,8 @@ var MenuSubItem = ({
   subMenu,
   onQuitMenu,
   subMenuActivated,
-  setSubMenuActivated
+  setSubMenuActivated,
+  disabled
 }) => {
   const [hovered, setHovered] = useState10(false);
   const ref = useRef6(null);
@@ -1912,21 +1913,29 @@ var MenuSubItem = ({
   const style = useMemo14(() => {
     return {
       ...container4,
-      backgroundColor: selected ? CLEAR_HOVER : "transparent"
+      backgroundColor: selected && !disabled ? CLEAR_HOVER : "transparent",
+      opacity: disabled ? 0.5 : 1,
+      cursor: disabled ? "not-allowed" : "default"
     };
-  }, [selected]);
+  }, [selected, disabled]);
   const onPointerUp = useCallback8((e) => {
+    if (disabled) {
+      return;
+    }
     if (subMenu) {
       setSubMenuActivated("with-mouse");
       setHovered(true);
       return;
     }
     onActionChosen(id, e);
-  }, [id, onActionChosen, setSubMenuActivated, subMenu]);
+  }, [disabled, id, onActionChosen, setSubMenuActivated, subMenu]);
   const onPointerEnter = useCallback8(() => {
+    if (disabled) {
+      return;
+    }
     onItemSelected(id);
     setHovered(true);
-  }, [id, onItemSelected]);
+  }, [disabled, id, onItemSelected]);
   const onPointerLeave = useCallback8(() => {
     setHovered(false);
   }, []);
@@ -2045,6 +2054,9 @@ var MenuContent = ({
   const onItemSelected = useCallback9((id) => {
     setSelectedItem(id);
   }, []);
+  const isItemSelectable = useCallback9((v) => {
+    return v.type !== "divider" && !v.disabled;
+  }, []);
   const onArrowUp = useCallback9(() => {
     setSelectedItem((prevItem) => {
       if (prevItem === null) {
@@ -2054,31 +2066,31 @@ var MenuContent = ({
       if (topItemCanBeUnselected && index === 0 || prevItem === null) {
         return null;
       }
-      const previousItems = values.filter((v, i) => i < index && v.type !== "divider");
+      const previousItems = values.filter((v, i) => i < index && isItemSelectable(v));
       if (previousItems.length > 0) {
         return previousItems[previousItems.length - 1].id;
       }
-      const firstNonDivider = values.find((v) => v.type !== "divider");
-      if (firstNonDivider) {
-        return firstNonDivider.id;
+      const firstSelectable = values.find((v) => isItemSelectable(v));
+      if (firstSelectable) {
+        return firstSelectable.id;
       }
       throw new Error("could not find previous item");
     });
-  }, [topItemCanBeUnselected, values]);
+  }, [topItemCanBeUnselected, values, isItemSelectable]);
   const onArrowDown = useCallback9(() => {
     setSelectedItem((prevItem) => {
       const index = values.findIndex((val) => val.id === prevItem);
-      const nextItem = values.find((v, i) => i > index && v.type !== "divider");
+      const nextItem = values.find((v, i) => i > index && isItemSelectable(v));
       if (nextItem) {
         return nextItem.id;
       }
-      const lastNonDivider = values.slice().reverse().find((v) => v.type !== "divider");
-      if (lastNonDivider) {
-        return lastNonDivider.id;
+      const lastSelectable = values.slice().reverse().find((v) => isItemSelectable(v));
+      if (lastSelectable) {
+        return lastSelectable.id;
       }
       throw new Error("could not find next item");
     });
-  }, [values]);
+  }, [values, isItemSelectable]);
   const onEnter = useCallback9(() => {
     if (selectedItem === null) {
       return onHide();
@@ -2090,6 +2102,9 @@ var MenuContent = ({
     if (item.type === "divider") {
       throw new Error("cannot find divider");
     }
+    if (item.disabled) {
+      return;
+    }
     if (item.subMenu) {
       return setSubMenuActivated("without-mouse");
     }
@@ -2267,7 +2282,8 @@ var MenuContent = ({
         onQuitMenu: onHide,
         onNextMenu,
         subMenuActivated,
-        setSubMenuActivated
+        setSubMenuActivated,
+        disabled: item.disabled
       }, item.id);
     })
   });
@@ -42595,8 +42611,12 @@ 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 useContext82, useMemo as useMemo133, useState as useState82 } from "react";
+import {
+  getDefaultAudioCodecForContainer,
+  renderMediaOnWeb,
+  renderStillOnWeb
+} from "@remotion/web-renderer";
+import { useCallback as useCallback131, useContext as useContext82, useMemo as useMemo134, useState as useState84 } from "react";
 
 // src/icons/certificate.tsx
 import { jsx as jsx257 } from "react/jsx-runtime";
@@ -42610,6 +42630,90 @@ var CertificateIcon = (props) => /* @__PURE__ */ jsx257("svg", {
   })
 });
 
+// src/components/RenderModal/use-encodable-audio-codecs.ts
+import {
+  getEncodableAudioCodecs,
+  getSupportedAudioCodecsForContainer
+} from "@remotion/web-renderer";
+import { useEffect as useEffect79, useRef as useRef44, useState as useState82 } from "react";
+var useEncodableAudioCodecs = (container60) => {
+  const cacheRef = useRef44({});
+  const [codecsByContainer, setCodecsByContainer] = useState82(() => {
+    return {
+      [container60]: getSupportedAudioCodecsForContainer(container60)
+    };
+  });
+  useEffect79(() => {
+    const cached = cacheRef.current[container60];
+    if (cached) {
+      return;
+    }
+    const supported = getSupportedAudioCodecsForContainer(container60);
+    cacheRef.current[container60] = {
+      codecs: supported,
+      status: "fetching"
+    };
+    getEncodableAudioCodecs(container60).then((encodable) => {
+      cacheRef.current[container60] = {
+        codecs: encodable,
+        status: "done"
+      };
+      setCodecsByContainer((prev) => ({
+        ...prev,
+        [container60]: encodable
+      }));
+    }).catch(() => {
+      cacheRef.current[container60] = {
+        codecs: supported,
+        status: "done"
+      };
+    });
+  }, [container60]);
+  return codecsByContainer[container60] ?? getSupportedAudioCodecsForContainer(container60);
+};
+
+// src/components/RenderModal/use-encodable-video-codecs.ts
+import {
+  getEncodableVideoCodecs,
+  getSupportedVideoCodecsForContainer
+} from "@remotion/web-renderer";
+import { useEffect as useEffect80, useRef as useRef45, useState as useState83 } from "react";
+var useEncodableVideoCodecs = (container60) => {
+  const cacheRef = useRef45({});
+  const [codecsByContainer, setCodecsByContainer] = useState83(() => {
+    return {
+      [container60]: getSupportedVideoCodecsForContainer(container60)
+    };
+  });
+  useEffect80(() => {
+    const cached = cacheRef.current[container60];
+    if (cached) {
+      return;
+    }
+    const supported = getSupportedVideoCodecsForContainer(container60);
+    cacheRef.current[container60] = {
+      codecs: supported,
+      status: "fetching"
+    };
+    getEncodableVideoCodecs(container60).then((encodable) => {
+      cacheRef.current[container60] = {
+        codecs: encodable,
+        status: "done"
+      };
+      setCodecsByContainer((prev) => ({
+        ...prev,
+        [container60]: encodable
+      }));
+    }).catch(() => {
+      cacheRef.current[container60] = {
+        codecs: supported,
+        status: "done"
+      };
+    });
+  }, [container60]);
+  return codecsByContainer[container60] ?? getSupportedVideoCodecsForContainer(container60);
+};
+
 // src/components/RenderModal/WebRendererExperimentalBadge.tsx
 import { jsx as jsx258, jsxs as jsxs135 } from "react/jsx-runtime";
 var row8 = {
@@ -42813,26 +42917,165 @@ var WebRenderModalAdvanced = ({
 };
 
 // src/components/RenderModal/WebRenderModalAudio.tsx
+import { getSupportedAudioCodecsForContainer as getSupportedAudioCodecsForContainer2 } from "@remotion/web-renderer";
+import { useMemo as useMemo130 } from "react";
+
+// src/components/RenderModal/quality-options.tsx
 import { jsx as jsx260 } from "react/jsx-runtime";
+var QUALITY_OPTIONS = [
+  { value: "very-low", label: "Very Low" },
+  { value: "low", label: "Low" },
+  { value: "medium", label: "Medium" },
+  { value: "high", label: "High" },
+  { value: "very-high", label: "Very High" }
+];
+var getQualityOptions = (selectedQuality, setQuality) => {
+  return QUALITY_OPTIONS.map(({ value, label: label11 }) => ({
+    label: label11,
+    onClick: () => setQuality(value),
+    leftItem: selectedQuality === value ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
+    id: value,
+    keyHint: null,
+    quickSwitcherLabel: null,
+    subMenu: null,
+    type: "item",
+    value
+  }));
+};
+
+// src/components/RenderModal/WebRenderModalAudio.tsx
+import { jsx as jsx261, jsxs as jsxs137, Fragment as Fragment45 } from "react/jsx-runtime";
 var container60 = {
   flex: 1,
   overflowY: "auto"
 };
-var WebRenderModalAudio = ({ muted, setMuted }) => {
-  return /* @__PURE__ */ jsx260("div", {
+var fallbackNoticeStyle = {
+  backgroundColor: "rgba(59, 130, 246, 0.15)",
+  border: "1px solid rgba(59, 130, 246, 0.4)",
+  borderRadius: 4,
+  padding: "8px 12px",
+  marginLeft: 16,
+  marginRight: 16,
+  marginTop: 8,
+  fontSize: 13,
+  lineHeight: 1.4,
+  color: "#60a5fa"
+};
+var humanReadableWebAudioCodec = (audioCodec) => {
+  switch (audioCodec) {
+    case "aac":
+      return "AAC";
+    case "opus":
+      return "Opus";
+    default:
+      return audioCodec;
+  }
+};
+var WebRenderModalAudio = ({
+  muted,
+  setMuted,
+  audioCodec,
+  setAudioCodec,
+  audioBitrate,
+  setAudioBitrate,
+  container: videoContainer,
+  encodableCodecs,
+  effectiveAudioCodec
+}) => {
+  const containerSupported = useMemo130(() => getSupportedAudioCodecsForContainer2(videoContainer), [videoContainer]);
+  const audioCodecOptions = useMemo130(() => {
+    return containerSupported.map((codec) => {
+      const isEncodable = encodableCodecs.includes(codec);
+      return {
+        label: humanReadableWebAudioCodec(codec),
+        onClick: () => setAudioCodec(codec),
+        leftItem: audioCodec === codec ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
+        id: codec,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: "item",
+        value: codec,
+        disabled: !isEncodable
+      };
+    });
+  }, [containerSupported, encodableCodecs, audioCodec, setAudioCodec]);
+  const audioBitrateOptions = useMemo130(() => getQualityOptions(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
+  return /* @__PURE__ */ jsxs137("div", {
     style: container60,
     className: VERTICAL_SCROLLBAR_CLASSNAME,
-    children: /* @__PURE__ */ jsx260(MutedSetting, {
-      enforceAudioTrack: false,
-      muted,
-      setMuted
-    })
+    children: [
+      /* @__PURE__ */ jsx261(MutedSetting, {
+        enforceAudioTrack: false,
+        muted,
+        setMuted
+      }),
+      !muted ? /* @__PURE__ */ jsxs137(Fragment45, {
+        children: [
+          /* @__PURE__ */ jsx261(RenderModalHr, {}),
+          /* @__PURE__ */ jsxs137("div", {
+            style: optionRow,
+            children: [
+              /* @__PURE__ */ jsxs137("div", {
+                style: label5,
+                children: [
+                  "Audio Quality",
+                  /* @__PURE__ */ jsx261(Spacing, {
+                    x: 0.5
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx261("div", {
+                style: rightRow,
+                children: /* @__PURE__ */ jsx261(Combobox, {
+                  values: audioBitrateOptions,
+                  selectedId: audioBitrate,
+                  title: "Audio Quality"
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs137("div", {
+            style: optionRow,
+            children: [
+              /* @__PURE__ */ jsxs137("div", {
+                style: label5,
+                children: [
+                  "Audio Codec",
+                  /* @__PURE__ */ jsx261(Spacing, {
+                    x: 0.5
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx261("div", {
+                style: rightRow,
+                children: /* @__PURE__ */ jsx261(Combobox, {
+                  values: audioCodecOptions,
+                  selectedId: audioCodec,
+                  title: "Audio Codec"
+                })
+              })
+            ]
+          }),
+          effectiveAudioCodec !== audioCodec ? /* @__PURE__ */ jsxs137("div", {
+            style: fallbackNoticeStyle,
+            children: [
+              humanReadableWebAudioCodec(audioCodec),
+              " is not available in this browser. Using ",
+              humanReadableWebAudioCodec(effectiveAudioCodec),
+              " ",
+              "instead."
+            ]
+          }) : null
+        ]
+      }) : null
+    ]
   });
 };
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
-import { useMemo as useMemo130 } from "react";
-import { jsx as jsx261, jsxs as jsxs137, Fragment as Fragment45 } from "react/jsx-runtime";
+import { useMemo as useMemo131 } from "react";
+import { jsx as jsx262, jsxs as jsxs138, Fragment as Fragment46 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
 };
@@ -42846,8 +43089,9 @@ var WebRenderModalBasic = ({
   onFrameSetDirectly,
   container: container61,
   setContainerFormat,
-  codec,
   setCodec,
+  encodableVideoCodecs,
+  effectiveVideoCodec,
   startFrame,
   setStartFrame,
   endFrame,
@@ -42858,7 +43102,7 @@ var WebRenderModalBasic = ({
   logLevel,
   setLogLevel
 }) => {
-  const imageFormatOptions = useMemo130(() => {
+  const imageFormatOptions = useMemo131(() => {
     return [
       {
         label: "PNG",
@@ -42880,12 +43124,12 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [imageFormat, setStillFormat]);
-  const logLevelOptions = useMemo130(() => {
+  const logLevelOptions = useMemo131(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
         onClick: () => setLogLevel(level),
-        leftItem: logLevel === level ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
+        leftItem: logLevel === level ? /* @__PURE__ */ jsx262(Checkmark, {}) : null,
         id: level,
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42895,12 +43139,12 @@ var WebRenderModalBasic = ({
       };
     });
   }, [logLevel, setLogLevel]);
-  const containerOptions = useMemo130(() => {
+  const containerOptions = useMemo131(() => {
     return [
       {
         label: "MP4",
         onClick: () => setContainerFormat("mp4"),
-        leftItem: container61 === "mp4" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
+        leftItem: container61 === "mp4" ? /* @__PURE__ */ jsx262(Checkmark, {}) : null,
         id: "mp4",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42911,7 +43155,7 @@ var WebRenderModalBasic = ({
       {
         label: "WebM",
         onClick: () => setContainerFormat("webm"),
-        leftItem: container61 === "webm" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
+        leftItem: container61 === "webm" ? /* @__PURE__ */ jsx262(Checkmark, {}) : null,
         id: "webm",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42921,97 +43165,58 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [container61, setContainerFormat]);
-  const codecOptions = useMemo130(() => {
-    return [
-      {
-        label: "H.264",
-        onClick: () => setCodec("h264"),
-        leftItem: codec === "h264" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
-        id: "h264",
-        keyHint: null,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        type: "item",
-        value: "h264"
-      },
-      {
-        label: "H.265",
-        onClick: () => setCodec("h265"),
-        leftItem: codec === "h265" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
-        id: "h265",
-        keyHint: null,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        type: "item",
-        value: "h265"
-      },
-      {
-        label: "VP8",
-        onClick: () => setCodec("vp8"),
-        leftItem: codec === "vp8" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
-        id: "vp8",
-        keyHint: null,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        type: "item",
-        value: "vp8"
-      },
-      {
-        label: "VP9",
-        onClick: () => setCodec("vp9"),
-        leftItem: codec === "vp9" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
-        id: "vp9",
-        keyHint: null,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        type: "item",
-        value: "vp9"
-      },
-      {
-        label: "AV1",
-        onClick: () => setCodec("av1"),
-        leftItem: codec === "av1" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
-        id: "av1",
-        keyHint: null,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        type: "item",
-        value: "av1"
-      }
-    ];
-  }, [codec, setCodec]);
-  return /* @__PURE__ */ jsxs137("div", {
+  const codecLabels = useMemo131(() => ({
+    h264: "H.264",
+    h265: "H.265",
+    vp8: "VP8",
+    vp9: "VP9",
+    av1: "AV1"
+  }), []);
+  const codecOptions = useMemo131(() => {
+    return encodableVideoCodecs.map((c) => ({
+      label: codecLabels[c],
+      onClick: () => setCodec(c),
+      leftItem: effectiveVideoCodec === c ? /* @__PURE__ */ jsx262(Checkmark, {}) : null,
+      id: c,
+      keyHint: null,
+      quickSwitcherLabel: null,
+      subMenu: null,
+      type: "item",
+      value: c
+    }));
+  }, [encodableVideoCodecs, effectiveVideoCodec, setCodec, codecLabels]);
+  return /* @__PURE__ */ jsxs138("div", {
     style: tabContainer2,
     children: [
-      renderMode === "still" ? /* @__PURE__ */ jsxs137(Fragment45, {
+      renderMode === "still" ? /* @__PURE__ */ jsxs138(Fragment46, {
         children: [
-          /* @__PURE__ */ jsxs137("div", {
+          /* @__PURE__ */ jsxs138("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsx261("div", {
+              /* @__PURE__ */ jsx262("div", {
                 style: label5,
                 children: "Format"
               }),
-              /* @__PURE__ */ jsx261("div", {
+              /* @__PURE__ */ jsx262("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx261(SegmentedControl, {
+                children: /* @__PURE__ */ jsx262(SegmentedControl, {
                   items: imageFormatOptions,
                   needsWrapping: true
                 })
               })
             ]
           }),
-          resolvedComposition.durationInFrames > 1 ? /* @__PURE__ */ jsxs137("div", {
+          resolvedComposition.durationInFrames > 1 ? /* @__PURE__ */ jsxs138("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsx261("div", {
+              /* @__PURE__ */ jsx262("div", {
                 style: label5,
                 children: "Frame"
               }),
-              /* @__PURE__ */ jsx261("div", {
+              /* @__PURE__ */ jsx262("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx261(RightAlignInput, {
-                  children: /* @__PURE__ */ jsx261(InputDragger, {
+                children: /* @__PURE__ */ jsx262(RightAlignInput, {
+                  children: /* @__PURE__ */ jsx262(InputDragger, {
                     value: frame2,
                     onTextChange: onFrameChanged,
                     placeholder: `0-${resolvedComposition.durationInFrames - 1}`,
@@ -43028,18 +43233,18 @@ var WebRenderModalBasic = ({
             ]
           }) : null
         ]
-      }) : /* @__PURE__ */ jsxs137(Fragment45, {
+      }) : /* @__PURE__ */ jsxs138(Fragment46, {
         children: [
-          /* @__PURE__ */ jsxs137("div", {
+          /* @__PURE__ */ jsxs138("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsx261("div", {
+              /* @__PURE__ */ jsx262("div", {
                 style: label5,
                 children: "Container"
               }),
-              /* @__PURE__ */ jsx261("div", {
+              /* @__PURE__ */ jsx262("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx261(Combobox, {
+                children: /* @__PURE__ */ jsx262(Combobox, {
                   values: containerOptions,
                   selectedId: container61,
                   title: "Container"
@@ -43047,32 +43252,32 @@ var WebRenderModalBasic = ({
               })
             ]
           }),
-          /* @__PURE__ */ jsxs137("div", {
+          /* @__PURE__ */ jsxs138("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsxs137("div", {
+              /* @__PURE__ */ jsxs138("div", {
                 style: label5,
                 children: [
                   "Codec",
-                  /* @__PURE__ */ jsx261(Spacing, {
+                  /* @__PURE__ */ jsx262(Spacing, {
                     x: 0.5
                   }),
-                  /* @__PURE__ */ jsx261(OptionExplainerBubble, {
+                  /* @__PURE__ */ jsx262(OptionExplainerBubble, {
                     id: "videoCodecOption"
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx261("div", {
+              /* @__PURE__ */ jsx262("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx261(Combobox, {
+                children: /* @__PURE__ */ jsx262(Combobox, {
                   values: codecOptions,
-                  selectedId: codec,
+                  selectedId: effectiveVideoCodec,
                   title: "Codec"
                 })
               })
             ]
           }),
-          /* @__PURE__ */ jsx261(FrameRangeSetting, {
+          /* @__PURE__ */ jsx262(FrameRangeSetting, {
             durationInFrames: resolvedComposition.durationInFrames,
             startFrame: startFrame ?? 0,
             endFrame: endFrame ?? resolvedComposition.durationInFrames - 1,
@@ -43081,7 +43286,7 @@ var WebRenderModalBasic = ({
           })
         ]
       }),
-      /* @__PURE__ */ jsx261(RenderModalOutputName, {
+      /* @__PURE__ */ jsx262(RenderModalOutputName, {
         existence: false,
         inputStyle: input,
         outName,
@@ -43089,24 +43294,24 @@ var WebRenderModalBasic = ({
         validationMessage,
         label: "Download name"
       }),
-      /* @__PURE__ */ jsxs137("div", {
+      /* @__PURE__ */ jsxs138("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsxs137("div", {
+          /* @__PURE__ */ jsxs138("div", {
             style: label5,
             children: [
               "Log Level ",
-              /* @__PURE__ */ jsx261(Spacing, {
+              /* @__PURE__ */ jsx262(Spacing, {
                 x: 0.5
               }),
-              /* @__PURE__ */ jsx261(OptionExplainerBubble, {
+              /* @__PURE__ */ jsx262(OptionExplainerBubble, {
                 id: "logLevelOption"
               })
             ]
           }),
-          /* @__PURE__ */ jsx261("div", {
+          /* @__PURE__ */ jsx262("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx261(Combobox, {
+            children: /* @__PURE__ */ jsx262(Combobox, {
               values: logLevelOptions,
               selectedId: logLevel,
               title: "Log Level"
@@ -43119,8 +43324,8 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalLicense.tsx
-import { useCallback as useCallback129, useMemo as useMemo131 } from "react";
-import { jsx as jsx262, jsxs as jsxs138, Fragment as Fragment46 } from "react/jsx-runtime";
+import { useCallback as useCallback129, useMemo as useMemo132 } from "react";
+import { jsx as jsx263, jsxs as jsxs139, Fragment as Fragment47 } from "react/jsx-runtime";
 var row9 = {
   display: "flex",
   flexDirection: "row",
@@ -43234,21 +43439,21 @@ var WebRenderModalLicense = ({
   const onLicenseKeyChange = useCallback129((e) => {
     setLicenseKey(e.target.value);
   }, [setLicenseKey]);
-  const licenseValidation = useMemo131(() => {
+  const licenseValidation = useMemo132(() => {
     if (licenseKey === null || licenseKey === "free-license") {
       return { valid: true, message: null };
     }
     return validateLicenseKey(licenseKey);
   }, [licenseKey]);
-  return /* @__PURE__ */ jsxs138("div", {
+  return /* @__PURE__ */ jsxs139("div", {
     style: tabContainer3,
     children: [
-      /* @__PURE__ */ jsxs138("div", {
+      /* @__PURE__ */ jsxs139("div", {
         style: descriptionStyle,
         children: [
           "Remotion is free if you are an individual or company with a headcount of 3 or less. See",
           " ",
-          /* @__PURE__ */ jsx262("a", {
+          /* @__PURE__ */ jsx263("a", {
             style: descriptionLink,
             href: "https://remotion.dev/license",
             children: "LICENSE.md"
@@ -43256,18 +43461,18 @@ var WebRenderModalLicense = ({
           "."
         ]
       }),
-      /* @__PURE__ */ jsx262("div", {
+      /* @__PURE__ */ jsx263("div", {
         style: row9,
-        children: /* @__PURE__ */ jsxs138("div", {
+        children: /* @__PURE__ */ jsxs139("div", {
           style: justifyCenter,
           children: [
-            /* @__PURE__ */ jsx262(Checkbox, {
+            /* @__PURE__ */ jsx263(Checkbox, {
               checked: licenseKey === "free-license",
               onChange: onFreeLicenseChange,
               name: "free-license",
               rounded: true
             }),
-            /* @__PURE__ */ jsxs138("div", {
+            /* @__PURE__ */ jsxs139("div", {
               style: checkboxLabel,
               onClick: onFreeLicenseChange,
               children: [
@@ -43279,34 +43484,34 @@ var WebRenderModalLicense = ({
           ]
         })
       }),
-      licenseKey === "free-license" ? /* @__PURE__ */ jsxs138("div", {
+      licenseKey === "free-license" ? /* @__PURE__ */ jsxs139("div", {
         style: paddedDescriptionStyle,
         children: [
           "Enjoy Remotion! Add the following to",
           " ",
-          /* @__PURE__ */ jsx262("code", {
+          /* @__PURE__ */ jsx263("code", {
             style: codeStyle,
             children: "remotion.config.ts"
           }),
           " to persist this setting:",
-          /* @__PURE__ */ jsx262("div", {
+          /* @__PURE__ */ jsx263("div", {
             style: codeLine,
             children: "Config.setPublicLicenseKey('free-license');"
           })
         ]
       }) : null,
-      /* @__PURE__ */ jsx262("div", {
+      /* @__PURE__ */ jsx263("div", {
         style: row9,
-        children: /* @__PURE__ */ jsxs138("div", {
+        children: /* @__PURE__ */ jsxs139("div", {
           style: justifyCenter,
           children: [
-            /* @__PURE__ */ jsx262(Checkbox, {
+            /* @__PURE__ */ jsx263(Checkbox, {
               checked: licenseKey !== "free-license" && licenseKey !== null,
               onChange: onCompanyLicenseChange,
               name: "company-license",
               rounded: true
             }),
-            /* @__PURE__ */ jsx262("div", {
+            /* @__PURE__ */ jsx263("div", {
               style: checkboxLabel,
               onClick: onCompanyLicenseChange,
               children: "I have a Company License"
@@ -43314,12 +43519,12 @@ var WebRenderModalLicense = ({
           ]
         })
       }),
-      licenseKey !== "free-license" && licenseKey !== null ? /* @__PURE__ */ jsxs138("div", {
+      licenseKey !== "free-license" && licenseKey !== null ? /* @__PURE__ */ jsxs139("div", {
         style: paddedDescriptionStyle,
         children: [
           "Add your public license from",
           " ",
-          /* @__PURE__ */ jsx262("a", {
+          /* @__PURE__ */ jsx263("a", {
             href: "https://remotion.pro/dashboard",
             target: "_blank",
             style: descriptionLink,
@@ -43327,11 +43532,11 @@ var WebRenderModalLicense = ({
           }),
           " ",
           "key below.",
-          /* @__PURE__ */ jsx262(Spacing, {
+          /* @__PURE__ */ jsx263(Spacing, {
             y: 1,
             block: true
           }),
-          /* @__PURE__ */ jsx262(RemotionInput, {
+          /* @__PURE__ */ jsx263(RemotionInput, {
             value: licenseKey,
             onChange: onLicenseKeyChange,
             placeholder: "remotion.pro public license key (starts with rm_pub_)",
@@ -43340,33 +43545,33 @@ var WebRenderModalLicense = ({
             style: inputStyle2,
             autoFocus: true
           }),
-          licenseValidation.message ? /* @__PURE__ */ jsxs138(Fragment46, {
+          licenseValidation.message ? /* @__PURE__ */ jsxs139(Fragment47, {
             children: [
-              /* @__PURE__ */ jsx262(Spacing, {
+              /* @__PURE__ */ jsx263(Spacing, {
                 y: 1,
                 block: true
               }),
-              /* @__PURE__ */ jsx262(ValidationMessage, {
+              /* @__PURE__ */ jsx263(ValidationMessage, {
                 message: licenseValidation.message,
                 align: "flex-start",
                 type: "error"
               })
             ]
           }) : null,
-          licenseValidation.valid && licenseKey.length > 0 ? /* @__PURE__ */ jsxs138(Fragment46, {
+          licenseValidation.valid && licenseKey.length > 0 ? /* @__PURE__ */ jsxs139(Fragment47, {
             children: [
-              /* @__PURE__ */ jsx262(Spacing, {
+              /* @__PURE__ */ jsx263(Spacing, {
                 y: 1,
                 block: true
               }),
               "Add the following to",
               " ",
-              /* @__PURE__ */ jsx262("code", {
+              /* @__PURE__ */ jsx263("code", {
                 style: codeStyle,
                 children: "remotion.config.ts"
               }),
               " to persist this setting:",
-              /* @__PURE__ */ jsx262("div", {
+              /* @__PURE__ */ jsx263("div", {
                 style: codeLineSmall,
                 children: "Config.setPublicLicenseKey('" + licenseKey + "');"
               })
@@ -43374,12 +43579,12 @@ var WebRenderModalLicense = ({
           }) : null
         ]
       }) : null,
-      licenseKey === null ? /* @__PURE__ */ jsxs138("div", {
+      licenseKey === null ? /* @__PURE__ */ jsxs139("div", {
         style: descriptionStyle,
         children: [
           "If you are not eligible for the free license, you need to obtain a",
           " ",
-          /* @__PURE__ */ jsx262("a", {
+          /* @__PURE__ */ jsx263("a", {
             style: descriptionLink,
             target: "_blank",
             href: "https://remotion.pro/license",
@@ -43393,8 +43598,8 @@ var WebRenderModalLicense = ({
 };
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
-import { useCallback as useCallback130, useMemo as useMemo132 } from "react";
-import { jsx as jsx263, jsxs as jsxs139 } from "react/jsx-runtime";
+import { useCallback as useCallback130, useMemo as useMemo133 } from "react";
+import { jsx as jsx264, jsxs as jsxs140 } from "react/jsx-runtime";
 var tabContainer4 = {
   flex: 1
 };
@@ -43407,84 +43612,26 @@ var WebRenderModalPicture = ({
   transparent,
   setTransparent
 }) => {
-  const qualityOptions = useMemo132(() => {
-    return [
-      {
-        label: "Very Low",
-        onClick: () => setVideoBitrate("very-low"),
-        leftItem: videoBitrate === "very-low" ? /* @__PURE__ */ jsx263(Checkmark, {}) : null,
-        id: "very-low",
-        keyHint: null,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        type: "item",
-        value: "very-low"
-      },
-      {
-        label: "Low",
-        onClick: () => setVideoBitrate("low"),
-        leftItem: videoBitrate === "low" ? /* @__PURE__ */ jsx263(Checkmark, {}) : null,
-        id: "low",
-        keyHint: null,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        type: "item",
-        value: "low"
-      },
-      {
-        label: "Medium",
-        onClick: () => setVideoBitrate("medium"),
-        leftItem: videoBitrate === "medium" ? /* @__PURE__ */ jsx263(Checkmark, {}) : null,
-        id: "medium",
-        keyHint: null,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        type: "item",
-        value: "medium"
-      },
-      {
-        label: "High",
-        onClick: () => setVideoBitrate("high"),
-        leftItem: videoBitrate === "high" ? /* @__PURE__ */ jsx263(Checkmark, {}) : null,
-        id: "high",
-        keyHint: null,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        type: "item",
-        value: "high"
-      },
-      {
-        label: "Very High",
-        onClick: () => setVideoBitrate("very-high"),
-        leftItem: videoBitrate === "very-high" ? /* @__PURE__ */ jsx263(Checkmark, {}) : null,
-        id: "very-high",
-        keyHint: null,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        type: "item",
-        value: "very-high"
-      }
-    ];
-  }, [videoBitrate, setVideoBitrate]);
+  const qualityOptions = useMemo133(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
   const onTransparentChanged = useCallback130((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
   if (renderMode !== "video") {
     return null;
   }
-  return /* @__PURE__ */ jsxs139("div", {
+  return /* @__PURE__ */ jsxs140("div", {
     style: tabContainer4,
     children: [
-      /* @__PURE__ */ jsxs139("div", {
+      /* @__PURE__ */ jsxs140("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsx263("div", {
+          /* @__PURE__ */ jsx264("div", {
             style: label5,
             children: "Quality"
           }),
-          /* @__PURE__ */ jsx263("div", {
+          /* @__PURE__ */ jsx264("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx263(Combobox, {
+            children: /* @__PURE__ */ jsx264(Combobox, {
               values: qualityOptions,
               selectedId: videoBitrate,
               title: "Quality"
@@ -43492,7 +43639,7 @@ var WebRenderModalPicture = ({
           })
         ]
       }),
-      /* @__PURE__ */ jsx263(NumberSetting, {
+      /* @__PURE__ */ jsx264(NumberSetting, {
         name: "Keyframe Interval",
         formatter: (v) => `${v}s`,
         min: 1,
@@ -43501,16 +43648,16 @@ var WebRenderModalPicture = ({
         value: keyframeIntervalInSeconds,
         onValueChanged: setKeyframeIntervalInSeconds
       }),
-      /* @__PURE__ */ jsxs139("div", {
+      /* @__PURE__ */ jsxs140("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsx263("div", {
+          /* @__PURE__ */ jsx264("div", {
             style: label5,
             children: "Transparent"
           }),
-          /* @__PURE__ */ jsx263("div", {
+          /* @__PURE__ */ jsx264("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx263(Checkbox, {
+            children: /* @__PURE__ */ jsx264(Checkbox, {
               checked: transparent,
               onChange: onTransparentChanged,
               name: "transparent"
@@ -43523,7 +43670,7 @@ var WebRenderModalPicture = ({
 };
 
 // src/components/RenderModal/WebRenderModal.tsx
-import { jsx as jsx264, jsxs as jsxs140 } from "react/jsx-runtime";
+import { jsx as jsx265, jsxs as jsxs141 } from "react/jsx-runtime";
 var invalidCharacters2 = ["?", "*", "+", ":", "%"];
 var isValidStillExtension2 = (extension, stillImageFormat) => {
   if (stillImageFormat === "jpeg" && extension === "jpg") {
@@ -43583,48 +43730,64 @@ var WebRenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const [isVideo] = useState82(() => {
+  const [isVideo] = useState84(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
-  const [renderMode, setRenderMode] = useState82(isVideo ? "video" : "still");
-  const [tab, setTab] = useState82("general");
-  const [imageFormat, setImageFormat] = useState82("png");
-  const [frame2, setFrame] = useState82(() => initialFrame);
-  const [logLevel, setLogLevel] = useState82(() => initialLogLevel);
-  const [inputProps, setInputProps] = useState82(() => defaultProps);
-  const [delayRenderTimeout, setDelayRenderTimeout] = useState82(30000);
-  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState82(null);
-  const [saving, setSaving] = useState82(false);
-  const [codec, setCodec] = useState82("h264");
-  const [container61, setContainer] = useState82("mp4");
-  const [videoBitrate, setVideoBitrate] = useState82("high");
-  const [hardwareAcceleration, setHardwareAcceleration] = useState82("no-preference");
-  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState82(5);
-  const [startFrame, setStartFrame] = useState82(() => inFrameMark ?? null);
-  const [endFrame, setEndFrame] = useState82(() => outFrameMark ?? null);
-  const [renderProgress, setRenderProgress] = useState82(null);
-  const [transparent, setTransparent] = useState82(false);
-  const [muted, setMuted] = useState82(false);
-  const [licenseKey, setLicenseKey] = useState82(initialLicenseKey);
-  const finalEndFrame = useMemo133(() => {
+  const [renderMode, setRenderMode] = useState84(isVideo ? "video" : "still");
+  const [tab, setTab] = useState84("general");
+  const [imageFormat, setImageFormat] = useState84("png");
+  const [frame2, setFrame] = useState84(() => initialFrame);
+  const [logLevel, setLogLevel] = useState84(() => initialLogLevel);
+  const [inputProps, setInputProps] = useState84(() => defaultProps);
+  const [delayRenderTimeout, setDelayRenderTimeout] = useState84(30000);
+  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState84(null);
+  const [saving, setSaving] = useState84(false);
+  const [codec, setCodec] = useState84("h264");
+  const [container61, setContainer] = useState84("mp4");
+  const [audioCodec, setAudioCodec] = useState84("aac");
+  const [audioBitrate, setAudioBitrate] = useState84("medium");
+  const [videoBitrate, setVideoBitrate] = useState84("high");
+  const [hardwareAcceleration, setHardwareAcceleration] = useState84("no-preference");
+  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState84(5);
+  const [startFrame, setStartFrame] = useState84(() => inFrameMark ?? null);
+  const [endFrame, setEndFrame] = useState84(() => outFrameMark ?? null);
+  const [renderProgress, setRenderProgress] = useState84(null);
+  const [transparent, setTransparent] = useState84(false);
+  const [muted, setMuted] = useState84(false);
+  const [licenseKey, setLicenseKey] = useState84(initialLicenseKey);
+  const encodableAudioCodecs = useEncodableAudioCodecs(container61);
+  const encodableVideoCodecs = useEncodableVideoCodecs(container61);
+  const effectiveAudioCodec = useMemo134(() => {
+    if (encodableAudioCodecs.includes(audioCodec)) {
+      return audioCodec;
+    }
+    return encodableAudioCodecs[0] ?? audioCodec;
+  }, [audioCodec, encodableAudioCodecs]);
+  const effectiveVideoCodec = useMemo134(() => {
+    if (encodableVideoCodecs.includes(codec)) {
+      return codec;
+    }
+    return encodableVideoCodecs[0] ?? codec;
+  }, [codec, encodableVideoCodecs]);
+  const finalEndFrame = useMemo134(() => {
     if (endFrame === null) {
       return resolvedComposition.durationInFrames - 1;
     }
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrame));
   }, [endFrame, resolvedComposition.durationInFrames]);
-  const finalStartFrame = useMemo133(() => {
+  const finalStartFrame = useMemo134(() => {
     if (startFrame === null) {
       return 0;
     }
     return Math.max(0, Math.min(finalEndFrame, startFrame));
   }, [finalEndFrame, startFrame]);
-  const frameRange = useMemo133(() => {
+  const frameRange = useMemo134(() => {
     if (startFrame === null && endFrame === null) {
       return null;
     }
     return [finalStartFrame, finalEndFrame];
   }, [endFrame, finalEndFrame, finalStartFrame, startFrame]);
-  const [initialOutName] = useState82(() => {
+  const [initialOutName] = useState84(() => {
     return getDefaultOutLocation2({
       compositionName: resolvedComposition.id,
       defaultExtension: renderMode === "still" ? imageFormat : isVideo ? container61 : imageFormat,
@@ -43633,7 +43796,7 @@ var WebRenderModal = ({
       clientSideRender: true
     });
   });
-  const [outName, setOutName] = useState82(() => initialOutName);
+  const [outName, setOutName] = useState84(() => initialOutName);
   const setStillFormat = useCallback131((format) => {
     setImageFormat(format);
     setOutName((prev) => {
@@ -43643,6 +43806,7 @@ var WebRenderModal = ({
   }, []);
   const setContainerFormat = useCallback131((newContainer) => {
     setContainer(newContainer);
+    setAudioCodec(getDefaultAudioCodecForContainer(newContainer));
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + newContainer;
       return newFileName;
@@ -43655,14 +43819,14 @@ var WebRenderModal = ({
         const newFileName = getStringBeforeSuffix(prev) + "." + container61;
         return newFileName;
       });
-    } else {
+    } else if (newMode === "still") {
       setOutName((prev) => {
         const newFileName = getStringBeforeSuffix(prev) + "." + imageFormat;
         return newFileName;
       });
     }
   }, [container61, imageFormat]);
-  const renderTabOptions = useMemo133(() => {
+  const renderTabOptions = useMemo134(() => {
     const options = [
       {
         label: "Still",
@@ -43700,7 +43864,7 @@ var WebRenderModal = ({
   const onOutNameChange = useCallback131((e) => {
     setOutName(e.target.value);
   }, []);
-  const outnameValidation = useMemo133(() => {
+  const outnameValidation = useMemo134(() => {
     if (renderMode === "still") {
       return validateOutnameForStill({
         outName,
@@ -43801,7 +43965,9 @@ var WebRenderModal = ({
       delayRenderTimeoutInMilliseconds: delayRenderTimeout,
       mediaCacheSizeInBytes,
       logLevel,
-      videoCodec: codec,
+      videoCodec: effectiveVideoCodec,
+      audioCodec: effectiveAudioCodec,
+      audioBitrate,
       container: container61,
       videoBitrate,
       hardwareAcceleration,
@@ -43830,7 +43996,9 @@ var WebRenderModal = ({
     delayRenderTimeout,
     mediaCacheSizeInBytes,
     logLevel,
-    codec,
+    effectiveVideoCodec,
+    effectiveAudioCodec,
+    audioBitrate,
     container61,
     videoBitrate,
     hardwareAcceleration,
@@ -43855,30 +44023,30 @@ var WebRenderModal = ({
       await onRenderVideo();
     }
   }, [renderMode, onRenderStill, onRenderVideo]);
-  return /* @__PURE__ */ jsxs140("div", {
+  return /* @__PURE__ */ jsxs141("div", {
     style: outerModalStyle,
     children: [
-      /* @__PURE__ */ jsx264(ModalHeader, {
+      /* @__PURE__ */ jsx265(ModalHeader, {
         title: `Render ${resolvedComposition.id}`
       }),
-      /* @__PURE__ */ jsxs140("div", {
+      /* @__PURE__ */ jsxs141("div", {
         style: container59,
         children: [
-          /* @__PURE__ */ jsx264(SegmentedControl, {
+          /* @__PURE__ */ jsx265(SegmentedControl, {
             items: renderTabOptions,
             needsWrapping: false
           }),
-          /* @__PURE__ */ jsx264("div", {
+          /* @__PURE__ */ jsx265("div", {
             style: flexer
           }),
-          /* @__PURE__ */ jsxs140(Button, {
+          /* @__PURE__ */ jsxs141(Button, {
             autoFocus: true,
             onClick: onRender,
             style: buttonStyle7,
             disabled: !outnameValidation.valid,
             children: [
               renderProgress ? `Rendering... ${renderProgress.renderedFrames}/${finalEndFrame}` : `Render ${renderMode}`,
-              /* @__PURE__ */ jsx264(ShortcutHint, {
+              /* @__PURE__ */ jsx265(ShortcutHint, {
                 keyToPress: "↵",
                 cmdOrCtrl: true
               })
@@ -43886,94 +44054,94 @@ var WebRenderModal = ({
           })
         ]
       }),
-      /* @__PURE__ */ jsx264("div", {
+      /* @__PURE__ */ jsx265("div", {
         style: container59,
-        children: /* @__PURE__ */ jsx264(WebRendererExperimentalBadge, {})
+        children: /* @__PURE__ */ jsx265(WebRendererExperimentalBadge, {})
       }),
-      /* @__PURE__ */ jsxs140("div", {
+      /* @__PURE__ */ jsxs141("div", {
         style: horizontalLayout,
         children: [
-          /* @__PURE__ */ jsxs140("div", {
+          /* @__PURE__ */ jsxs141("div", {
             style: leftSidebar,
             children: [
-              /* @__PURE__ */ jsxs140(VerticalTab, {
+              /* @__PURE__ */ jsxs141(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "general",
                 onClick: () => setTab("general"),
                 children: [
-                  /* @__PURE__ */ jsx264("div", {
+                  /* @__PURE__ */ jsx265("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx264(FileIcon, {
+                    children: /* @__PURE__ */ jsx265(FileIcon, {
                       style: icon6
                     })
                   }),
                   "General"
                 ]
               }),
-              /* @__PURE__ */ jsxs140(VerticalTab, {
+              /* @__PURE__ */ jsxs141(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "data",
                 onClick: () => setTab("data"),
                 children: [
-                  /* @__PURE__ */ jsx264("div", {
+                  /* @__PURE__ */ jsx265("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx264(DataIcon, {
+                    children: /* @__PURE__ */ jsx265(DataIcon, {
                       style: icon6
                     })
                   }),
                   "Input Props"
                 ]
               }),
-              renderMode === "video" ? /* @__PURE__ */ jsxs140(VerticalTab, {
+              renderMode === "video" ? /* @__PURE__ */ jsxs141(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "picture",
                 onClick: () => setTab("picture"),
                 children: [
-                  /* @__PURE__ */ jsx264("div", {
+                  /* @__PURE__ */ jsx265("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx264(PicIcon, {
+                    children: /* @__PURE__ */ jsx265(PicIcon, {
                       style: icon6
                     })
                   }),
                   "Picture"
                 ]
               }) : null,
-              renderMode === "video" ? /* @__PURE__ */ jsxs140(VerticalTab, {
+              renderMode === "video" ? /* @__PURE__ */ jsxs141(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "audio",
                 onClick: () => setTab("audio"),
                 children: [
-                  /* @__PURE__ */ jsx264("div", {
+                  /* @__PURE__ */ jsx265("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx264(AudioIcon, {
+                    children: /* @__PURE__ */ jsx265(AudioIcon, {
                       style: icon6
                     })
                   }),
                   "Audio"
                 ]
               }) : null,
-              /* @__PURE__ */ jsxs140(VerticalTab, {
+              /* @__PURE__ */ jsxs141(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "advanced",
                 onClick: () => setTab("advanced"),
                 children: [
-                  /* @__PURE__ */ jsx264("div", {
+                  /* @__PURE__ */ jsx265("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx264(GearIcon, {
+                    children: /* @__PURE__ */ jsx265(GearIcon, {
                       style: icon6
                     })
                   }),
                   "Other"
                 ]
               }),
-              /* @__PURE__ */ jsxs140(VerticalTab, {
+              /* @__PURE__ */ jsxs141(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "license",
                 onClick: () => setTab("license"),
                 children: [
-                  /* @__PURE__ */ jsx264("div", {
+                  /* @__PURE__ */ jsx265("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx264(CertificateIcon, {
+                    children: /* @__PURE__ */ jsx265(CertificateIcon, {
                       style: icon6
                     })
                   }),
@@ -43982,10 +44150,10 @@ var WebRenderModal = ({
               })
             ]
           }),
-          /* @__PURE__ */ jsx264("div", {
+          /* @__PURE__ */ jsx265("div", {
             style: optionsPanel,
             className: VERTICAL_SCROLLBAR_CLASSNAME,
-            children: tab === "general" ? /* @__PURE__ */ jsx264(WebRenderModalBasic, {
+            children: tab === "general" ? /* @__PURE__ */ jsx265(WebRenderModalBasic, {
               renderMode,
               resolvedComposition,
               imageFormat,
@@ -43995,8 +44163,9 @@ var WebRenderModal = ({
               onFrameSetDirectly,
               container: container61,
               setContainerFormat,
-              codec,
               setCodec,
+              encodableVideoCodecs,
+              effectiveVideoCodec,
               startFrame: finalStartFrame,
               setStartFrame,
               endFrame: finalEndFrame,
@@ -44006,7 +44175,7 @@ var WebRenderModal = ({
               validationMessage: outnameValidation.valid ? null : outnameValidation.error.message,
               logLevel,
               setLogLevel
-            }) : tab === "data" ? /* @__PURE__ */ jsx264(DataEditor, {
+            }) : tab === "data" ? /* @__PURE__ */ jsx265(DataEditor, {
               defaultProps: inputProps,
               setDefaultProps: setInputProps,
               unresolvedComposition,
@@ -44015,7 +44184,7 @@ var WebRenderModal = ({
               saving,
               setSaving,
               readOnlyStudio: false
-            }) : tab === "picture" ? /* @__PURE__ */ jsx264(WebRenderModalPicture, {
+            }) : tab === "picture" ? /* @__PURE__ */ jsx265(WebRenderModalPicture, {
               renderMode,
               videoBitrate,
               setVideoBitrate,
@@ -44023,10 +44192,17 @@ var WebRenderModal = ({
               setKeyframeIntervalInSeconds,
               transparent,
               setTransparent
-            }) : tab === "audio" ? /* @__PURE__ */ jsx264(WebRenderModalAudio, {
+            }) : tab === "audio" ? /* @__PURE__ */ jsx265(WebRenderModalAudio, {
               muted,
-              setMuted
-            }) : tab === "advanced" ? /* @__PURE__ */ jsx264(WebRenderModalAdvanced, {
+              setMuted,
+              audioCodec,
+              setAudioCodec,
+              audioBitrate,
+              setAudioBitrate,
+              container: container61,
+              encodableCodecs: encodableAudioCodecs,
+              effectiveAudioCodec
+            }) : tab === "advanced" ? /* @__PURE__ */ jsx265(WebRenderModalAdvanced, {
               renderMode,
               delayRenderTimeout,
               setDelayRenderTimeout,
@@ -44034,7 +44210,7 @@ var WebRenderModal = ({
               setMediaCacheSizeInBytes,
               hardwareAcceleration,
               setHardwareAcceleration
-            }) : /* @__PURE__ */ jsx264(WebRenderModalLicense, {
+            }) : /* @__PURE__ */ jsx265(WebRenderModalLicense, {
               licenseKey,
               setLicenseKey,
               initialPublicLicenseKey: initialLicenseKey
@@ -44046,10 +44222,10 @@ var WebRenderModal = ({
   });
 };
 var WebRenderModalWithLoader = (props) => {
-  return /* @__PURE__ */ jsx264(DismissableModal, {
-    children: /* @__PURE__ */ jsx264(ResolveCompositionBeforeModal, {
+  return /* @__PURE__ */ jsx265(DismissableModal, {
+    children: /* @__PURE__ */ jsx265(ResolveCompositionBeforeModal, {
       compositionId: props.compositionId,
-      children: /* @__PURE__ */ jsx264(WebRenderModal, {
+      children: /* @__PURE__ */ jsx265(WebRenderModal, {
         ...props
       })
     })
@@ -44057,11 +44233,11 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback134, useMemo as useMemo135 } from "react";
+import { useCallback as useCallback134, useMemo as useMemo136 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback132, useEffect as useEffect79, useState as useState83 } from "react";
-import { jsx as jsx265, jsxs as jsxs141 } from "react/jsx-runtime";
+import { useCallback as useCallback132, useEffect as useEffect81, useState as useState85 } from "react";
+import { jsx as jsx266, jsxs as jsxs142 } from "react/jsx-runtime";
 var iconStyle8 = {
   width: 16,
   height: 16,
@@ -44071,7 +44247,7 @@ var buttonContainerStyle = {
   display: "flex",
   minWidth: "114px"
 };
-var copyIcon = /* @__PURE__ */ jsx265("svg", {
+var copyIcon = /* @__PURE__ */ jsx266("svg", {
   "aria-hidden": "true",
   focusable: "false",
   "data-prefix": "far",
@@ -44081,7 +44257,7 @@ var copyIcon = /* @__PURE__ */ jsx265("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 384 512",
   style: iconStyle8,
-  children: /* @__PURE__ */ jsx265("path", {
+  children: /* @__PURE__ */ jsx266("path", {
     fill: "currentColor",
     d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"
   })
@@ -44090,7 +44266,7 @@ var labelStyle5 = {
   fontSize: 14
 };
 var CopyButton = ({ textToCopy, label: label11, labelWhenCopied }) => {
-  const [copied, setCopied] = useState83(false);
+  const [copied, setCopied] = useState85(false);
   const onClick = useCallback132(() => {
     copyText(textToCopy).then(() => {
       setCopied(Date.now());
@@ -44098,23 +44274,23 @@ var CopyButton = ({ textToCopy, label: label11, labelWhenCopied }) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [textToCopy]);
-  useEffect79(() => {
+  useEffect81(() => {
     if (!copied) {
       return;
     }
     const to = setTimeout(() => setCopied(false), 2000);
     return () => clearTimeout(to);
   }, [copied]);
-  return /* @__PURE__ */ jsxs141(Button, {
+  return /* @__PURE__ */ jsxs142(Button, {
     onClick,
     buttonContainerStyle,
     children: [
       copyIcon,
-      /* @__PURE__ */ jsx265(Spacing, {
+      /* @__PURE__ */ jsx266(Spacing, {
         x: 1.5
       }),
       " ",
-      /* @__PURE__ */ jsx265("span", {
+      /* @__PURE__ */ jsx266("span", {
         style: labelStyle5,
         children: copied ? labelWhenCopied : label11
       })
@@ -44123,8 +44299,8 @@ var CopyButton = ({ textToCopy, label: label11, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback133, useMemo as useMemo134, useState as useState84 } from "react";
-import { jsx as jsx266 } from "react/jsx-runtime";
+import { useCallback as useCallback133, useMemo as useMemo135, useState as useState86 } from "react";
+import { jsx as jsx267 } from "react/jsx-runtime";
 var svgStyle3 = {
   width: "11px",
   height: "11px"
@@ -44138,18 +44314,18 @@ var buttonStyle8 = {
   alignItems: "center"
 };
 var OpenIssueButton = ({ link: link4 }) => {
-  const [hovered, setHovered] = useState84(false);
+  const [hovered, setHovered] = useState86(false);
   const buttonTooltip = `Open GitHub issue in new Tab`;
   const handleClick = useCallback133(() => {
     window.open(link4, "_blank");
   }, [link4]);
-  const svgFillColor = useMemo134(() => {
+  const svgFillColor = useMemo135(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
-  const openInEditorSvg = /* @__PURE__ */ jsx266("svg", {
+  const openInEditorSvg = /* @__PURE__ */ jsx267("svg", {
     viewBox: "0 0 512 512",
     style: svgStyle3,
-    children: /* @__PURE__ */ jsx266("path", {
+    children: /* @__PURE__ */ jsx267("path", {
       fill: svgFillColor,
       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"
     })
@@ -44160,7 +44336,7 @@ var OpenIssueButton = ({ link: link4 }) => {
   const onPointerLeave = useCallback133(() => {
     setHovered(false);
   }, []);
-  return /* @__PURE__ */ jsx266("button", {
+  return /* @__PURE__ */ jsx267("button", {
     title: buttonTooltip,
     type: "button",
     onPointerEnter,
@@ -44172,7 +44348,7 @@ var OpenIssueButton = ({ link: link4 }) => {
 };
 
 // src/components/KnownBugs.tsx
-import { jsx as jsx267, jsxs as jsxs142 } from "react/jsx-runtime";
+import { jsx as jsx268, jsxs as jsxs143 } from "react/jsx-runtime";
 var container61 = {
   display: "flex",
   flexDirection: "row",
@@ -44184,29 +44360,29 @@ var text4 = {
 };
 var KnownBugs = ({ bugs }) => {
   const bugElements = bugs.map((bug) => {
-    return /* @__PURE__ */ jsxs142("div", {
+    return /* @__PURE__ */ jsxs143("div", {
       style: container61,
       children: [
-        /* @__PURE__ */ jsxs142("div", {
+        /* @__PURE__ */ jsxs143("div", {
           style: text4,
           children: [
             "\uD83E\uDEB2 ",
             bug.title
           ]
         }),
-        /* @__PURE__ */ jsx267(OpenIssueButton, {
+        /* @__PURE__ */ jsx268(OpenIssueButton, {
           link: bug.link
         })
       ]
     }, bug.description + bug.link);
   });
-  return /* @__PURE__ */ jsx267("div", {
+  return /* @__PURE__ */ jsx268("div", {
     children: bugElements
   });
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { jsx as jsx268, jsxs as jsxs143, Fragment as Fragment47 } from "react/jsx-runtime";
+import { jsx as jsx269, jsxs as jsxs144, Fragment as Fragment48 } from "react/jsx-runtime";
 var container62 = {
   padding: 20,
   paddingTop: 0
@@ -44240,7 +44416,7 @@ var commands = {
   unknown: "npx remotion upgrade"
 };
 var UpdateModal = ({ info, knownBugs }) => {
-  const hasKnownBugs = useMemo135(() => {
+  const hasKnownBugs = useMemo136(() => {
     return knownBugs && knownBugs?.length > 0;
   }, [knownBugs]);
   const command = commands[info.packageManager];
@@ -44249,17 +44425,17 @@ var UpdateModal = ({ info, knownBugs }) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [command]);
-  return /* @__PURE__ */ jsxs143(DismissableModal, {
+  return /* @__PURE__ */ jsxs144(DismissableModal, {
     children: [
-      /* @__PURE__ */ jsx268(ModalHeader, {
+      /* @__PURE__ */ jsx269(ModalHeader, {
         title: "Update available"
       }),
-      /* @__PURE__ */ jsxs143("div", {
+      /* @__PURE__ */ jsxs144("div", {
         style: container62,
         children: [
-          hasKnownBugs ? /* @__PURE__ */ jsxs143(Fragment47, {
+          hasKnownBugs ? /* @__PURE__ */ jsxs144(Fragment48, {
             children: [
-              /* @__PURE__ */ jsxs143("div", {
+              /* @__PURE__ */ jsxs144("div", {
                 style: title7,
                 children: [
                   "The currently installed version ",
@@ -44267,42 +44443,42 @@ var UpdateModal = ({ info, knownBugs }) => {
                   " has the following known bugs:"
                 ]
               }),
-              /* @__PURE__ */ jsx268(KnownBugs, {
+              /* @__PURE__ */ jsx269(KnownBugs, {
                 bugs: knownBugs
               }),
-              /* @__PURE__ */ jsx268("div", {
+              /* @__PURE__ */ jsx269("div", {
                 style: { height: "20px" }
               }),
-              /* @__PURE__ */ jsx268("div", {
+              /* @__PURE__ */ jsx269("div", {
                 style: text5,
                 children: "To upgrade, run the following command:"
               })
             ]
-          }) : /* @__PURE__ */ jsx268("div", {
+          }) : /* @__PURE__ */ jsx269("div", {
             style: title7,
             children: "A new update for Remotion is available! Run the following command:"
           }),
-          /* @__PURE__ */ jsxs143(Row, {
+          /* @__PURE__ */ jsxs144(Row, {
             align: "center",
             children: [
-              /* @__PURE__ */ jsx268(Flex, {
-                children: /* @__PURE__ */ jsx268("pre", {
+              /* @__PURE__ */ jsx269(Flex, {
+                children: /* @__PURE__ */ jsx269("pre", {
                   onClick,
                   style: code,
                   children: command
                 })
               }),
-              /* @__PURE__ */ jsx268(Spacing, {
+              /* @__PURE__ */ jsx269(Spacing, {
                 x: 1
               }),
-              /* @__PURE__ */ jsx268(CopyButton, {
+              /* @__PURE__ */ jsx269(CopyButton, {
                 textToCopy: command,
                 label: "Copy",
                 labelWhenCopied: "Copied!"
               })
             ]
           }),
-          /* @__PURE__ */ jsxs143("div", {
+          /* @__PURE__ */ jsxs144("div", {
             style: text5,
             children: [
               "This will upgrade Remotion from ",
@@ -44313,12 +44489,12 @@ var UpdateModal = ({ info, knownBugs }) => {
               "."
             ]
           }),
-          /* @__PURE__ */ jsxs143("div", {
+          /* @__PURE__ */ jsxs144("div", {
             style: text5,
             children: [
               "Read the",
               " ",
-              /* @__PURE__ */ jsx268("a", {
+              /* @__PURE__ */ jsx269("a", {
                 style: link4,
                 target: "_blank",
                 href: "https://github.com/remotion-dev/remotion/releases",
@@ -44337,24 +44513,24 @@ var UpdateModal = ({ info, knownBugs }) => {
 };
 
 // src/components/Modals.tsx
-import { jsx as jsx269, jsxs as jsxs144, Fragment as Fragment48 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs145, Fragment as Fragment49 } from "react/jsx-runtime";
 var Modals = ({ readOnlyStudio }) => {
   const { selectedModal: modalContextType } = useContext83(ModalsContext);
   const canRender = useContext83(StudioServerConnectionCtx).previewServerState.type === "connected";
-  return /* @__PURE__ */ jsxs144(Fragment48, {
+  return /* @__PURE__ */ jsxs145(Fragment49, {
     children: [
-      modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx269(DuplicateComposition, {
+      modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx270(DuplicateComposition, {
         compositionType: modalContextType.compositionType,
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "delete-comp" && /* @__PURE__ */ jsx269(DeleteComposition, {
+      modalContextType && modalContextType.type === "delete-comp" && /* @__PURE__ */ jsx270(DeleteComposition, {
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "rename-comp" && /* @__PURE__ */ jsx269(RenameComposition, {
+      modalContextType && modalContextType.type === "rename-comp" && /* @__PURE__ */ jsx270(RenameComposition, {
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "input-props-override" && /* @__PURE__ */ jsx269(OverrideInputPropsModal, {}),
-      modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx269(WebRenderModalWithLoader, {
+      modalContextType && modalContextType.type === "input-props-override" && /* @__PURE__ */ jsx270(OverrideInputPropsModal, {}),
+      modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx270(WebRenderModalWithLoader, {
         type: "web-render",
         initialFrame: modalContextType.initialFrame,
         compositionId: modalContextType.compositionId,
@@ -44364,7 +44540,7 @@ var Modals = ({ readOnlyStudio }) => {
         initialLogLevel: modalContextType.initialLogLevel,
         initialLicenseKey: modalContextType.initialLicenseKey
       }),
-      modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx269(RenderModalWithLoader, {
+      modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx270(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,
         initialDarkMode: modalContextType.initialDarkMode,
         compositionId: modalContextType.compositionId,
@@ -44413,28 +44589,28 @@ var Modals = ({ readOnlyStudio }) => {
         initialChromeMode: modalContextType.initialChromeMode,
         renderDefaults: modalContextType.renderDefaults
       }),
-      modalContextType && canRender && modalContextType.type === "render-progress" && /* @__PURE__ */ jsx269(RenderStatusModal, {
+      modalContextType && canRender && modalContextType.type === "render-progress" && /* @__PURE__ */ jsx270(RenderStatusModal, {
         jobId: modalContextType.jobId
       }),
-      modalContextType && modalContextType.type === "update" && /* @__PURE__ */ jsx269(UpdateModal, {
+      modalContextType && modalContextType.type === "update" && /* @__PURE__ */ jsx270(UpdateModal, {
         info: modalContextType.info,
         knownBugs: modalContextType.knownBugs
       }),
-      modalContextType && modalContextType.type === "install-packages" && /* @__PURE__ */ jsx269(InstallPackageModal, {
+      modalContextType && modalContextType.type === "install-packages" && /* @__PURE__ */ jsx270(InstallPackageModal, {
         packageManager: modalContextType.packageManager
       }),
-      modalContextType && modalContextType.type === "quick-switcher" && /* @__PURE__ */ jsx269(QuickSwitcher_default, {
+      modalContextType && modalContextType.type === "quick-switcher" && /* @__PURE__ */ jsx270(QuickSwitcher_default, {
         readOnlyStudio,
         invocationTimestamp: modalContextType.invocationTimestamp,
         initialMode: modalContextType.mode
       }),
-      /* @__PURE__ */ jsx269(AskAiModal, {})
+      /* @__PURE__ */ jsx270(AskAiModal, {})
     ]
   });
 };
 
 // src/components/Editor.tsx
-import { jsx as jsx270, jsxs as jsxs145 } from "react/jsx-runtime";
+import { jsx as jsx271, jsxs as jsxs146 } from "react/jsx-runtime";
 var background2 = {
   backgroundColor: BACKGROUND,
   display: "flex",
@@ -44450,7 +44626,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: true
   });
-  useEffect80(() => {
+  useEffect82(() => {
     if (readOnlyStudio) {
       return;
     }
@@ -44464,11 +44640,11 @@ var Editor = ({ Root, readOnlyStudio }) => {
       window.removeEventListener("beforeunload", listenToChanges);
     };
   }, [readOnlyStudio]);
-  const [canvasMounted, setCanvasMounted] = React177.useState(false);
+  const [canvasMounted, setCanvasMounted] = React178.useState(false);
   const onMounted = useCallback135(() => {
     setCanvasMounted(true);
   }, []);
-  const value = useMemo136(() => {
+  const value = useMemo137(() => {
     if (!size4) {
       return null;
     }
@@ -44477,41 +44653,41 @@ var Editor = ({ Root, readOnlyStudio }) => {
       canvasSize: size4
     };
   }, [size4]);
-  const MemoRoot = useMemo136(() => {
-    return React177.memo(Root);
+  const MemoRoot = useMemo137(() => {
+    return React178.memo(Root);
   }, [Root]);
-  return /* @__PURE__ */ jsx270(HigherZIndex, {
+  return /* @__PURE__ */ jsx271(HigherZIndex, {
     onEscape: noop,
     onOutsideClick: noop,
-    children: /* @__PURE__ */ jsxs145(TimelineZoomContext, {
+    children: /* @__PURE__ */ jsxs146(TimelineZoomContext, {
       children: [
-        /* @__PURE__ */ jsx270(Internals61.CurrentScaleContext.Provider, {
+        /* @__PURE__ */ jsx271(Internals61.CurrentScaleContext.Provider, {
           value,
-          children: /* @__PURE__ */ jsxs145("div", {
+          children: /* @__PURE__ */ jsxs146("div", {
             style: background2,
             children: [
-              canvasMounted ? /* @__PURE__ */ jsx270(MemoRoot, {}) : null,
-              /* @__PURE__ */ jsxs145(Internals61.CanUseRemotionHooksProvider, {
+              canvasMounted ? /* @__PURE__ */ jsx271(MemoRoot, {}) : null,
+              /* @__PURE__ */ jsxs146(Internals61.CanUseRemotionHooksProvider, {
                 children: [
-                  /* @__PURE__ */ jsx270(EditorContent, {
+                  /* @__PURE__ */ jsx271(EditorContent, {
                     readOnlyStudio,
-                    children: /* @__PURE__ */ jsx270(TopPanel, {
+                    children: /* @__PURE__ */ jsx271(TopPanel, {
                       drawRef,
                       bufferStateDelayInMilliseconds: BUFFER_STATE_DELAY_IN_MILLISECONDS,
                       onMounted,
                       readOnlyStudio
                     })
                   }),
-                  /* @__PURE__ */ jsx270(GlobalKeybindings, {})
+                  /* @__PURE__ */ jsx271(GlobalKeybindings, {})
                 ]
               })
             ]
           })
         }),
-        /* @__PURE__ */ jsx270(Modals, {
+        /* @__PURE__ */ jsx271(Modals, {
           readOnlyStudio
         }),
-        /* @__PURE__ */ jsx270(NotificationCenter, {})
+        /* @__PURE__ */ jsx271(NotificationCenter, {})
       ]
     })
   });
@@ -44521,9 +44697,9 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback136, useContext as useContext84, useMemo as useMemo137, useState as useState85 } from "react";
+import { useCallback as useCallback136, useContext as useContext84, useMemo as useMemo138, useState as useState87 } from "react";
 import { Internals as Internals62 } from "remotion";
-import { jsx as jsx271 } from "react/jsx-runtime";
+import { jsx as jsx272 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
 var persistPreviewSizeOption = (option) => {
   localStorage.setItem(key5, JSON.stringify(option));
@@ -44542,8 +44718,8 @@ var loadPreviewSizeOption = () => {
   return JSON.parse(item2);
 };
 var PreviewSizeProvider = ({ children }) => {
-  const [size4, setSizeState] = useState85(() => loadPreviewSizeOption());
-  const [translation, setTranslation] = useState85(() => {
+  const [size4, setSizeState] = useState87(() => loadPreviewSizeOption());
+  const [translation, setTranslation] = useState87(() => {
     return {
       x: 0,
       y: 0
@@ -44557,7 +44733,7 @@ var PreviewSizeProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const previewSizeCtx = useMemo137(() => {
+  const previewSizeCtx = useMemo138(() => {
     return {
       size: editorZoomGestures ? size4 : {
         size: size4.size,
@@ -44571,17 +44747,17 @@ var PreviewSizeProvider = ({ children }) => {
       setTranslation
     };
   }, [editorZoomGestures, size4, setSize, translation]);
-  return /* @__PURE__ */ jsx271(Internals62.PreviewSizeContext.Provider, {
+  return /* @__PURE__ */ jsx272(Internals62.PreviewSizeContext.Provider, {
     value: previewSizeCtx,
     children
   });
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback137, useMemo as useMemo138, useState as useState86 } from "react";
-import { jsx as jsx272 } from "react/jsx-runtime";
+import { useCallback as useCallback137, useMemo as useMemo139, useState as useState88 } from "react";
+import { jsx as jsx273 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
-  const [checkerboard, setCheckerboardState] = useState86(() => loadCheckerboardOption());
+  const [checkerboard, setCheckerboardState] = useState88(() => loadCheckerboardOption());
   const setCheckerboard = useCallback137((newValue) => {
     setCheckerboardState((prevState) => {
       const newVal = newValue(prevState);
@@ -44589,40 +44765,40 @@ var CheckerboardProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const checkerboardCtx = useMemo138(() => {
+  const checkerboardCtx = useMemo139(() => {
     return {
       checkerboard,
       setCheckerboard
     };
   }, [checkerboard, setCheckerboard]);
-  return /* @__PURE__ */ jsx272(CheckerboardContext.Provider, {
+  return /* @__PURE__ */ jsx273(CheckerboardContext.Provider, {
     value: checkerboardCtx,
     children
   });
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo139, useState as useState87 } from "react";
+import { useMemo as useMemo140, useState as useState89 } from "react";
 import { Internals as Internals63 } from "remotion";
-import { jsx as jsx273 } from "react/jsx-runtime";
+import { jsx as jsx274 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
-  const [mediaMuted, setMediaMuted] = useState87(() => loadMuteOption());
-  const [mediaVolume, setMediaVolume] = useState87(1);
-  const mediaVolumeContextValue = useMemo139(() => {
+  const [mediaMuted, setMediaMuted] = useState89(() => loadMuteOption());
+  const [mediaVolume, setMediaVolume] = useState89(1);
+  const mediaVolumeContextValue = useMemo140(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeContextValue = useMemo139(() => {
+  const setMediaVolumeContextValue = useMemo140(() => {
     return {
       setMediaMuted,
       setMediaVolume
     };
   }, []);
-  return /* @__PURE__ */ jsx273(Internals63.MediaVolumeContext.Provider, {
+  return /* @__PURE__ */ jsx274(Internals63.MediaVolumeContext.Provider, {
     value: mediaVolumeContextValue,
-    children: /* @__PURE__ */ jsx273(Internals63.SetMediaVolumeContext.Provider, {
+    children: /* @__PURE__ */ jsx274(Internals63.SetMediaVolumeContext.Provider, {
       value: setMediaVolumeContextValue,
       children
     })
@@ -44630,24 +44806,24 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo140, useState as useState88 } from "react";
-import { jsx as jsx274 } from "react/jsx-runtime";
+import { useMemo as useMemo141, useState as useState90 } from "react";
+import { jsx as jsx275 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
-  const [modalContextType, setModalContextType] = useState88(null);
-  const modalsContext = useMemo140(() => {
+  const [modalContextType, setModalContextType] = useState90(null);
+  const modalsContext = useMemo141(() => {
     return {
       selectedModal: modalContextType,
       setSelectedModal: setModalContextType
     };
   }, [modalContextType]);
-  return /* @__PURE__ */ jsx274(ModalsContext.Provider, {
+  return /* @__PURE__ */ jsx275(ModalsContext.Provider, {
     value: modalsContext,
     children
   });
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect81, useMemo as useMemo141, useState as useState89 } from "react";
+import { useEffect as useEffect83, useMemo as useMemo142, useState as useState91 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -44663,20 +44839,20 @@ var loadMarks = () => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { jsx as jsx275 } from "react/jsx-runtime";
+import { jsx as jsx276 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
-  const [inAndOutFrames, setInAndOutFrames] = useState89(() => loadMarks());
-  const setTimelineInOutContextValue = useMemo141(() => {
+  const [inAndOutFrames, setInAndOutFrames] = useState91(() => loadMarks());
+  const setTimelineInOutContextValue = useMemo142(() => {
     return {
       setInAndOutFrames
     };
   }, []);
-  useEffect81(() => {
+  useEffect83(() => {
     persistMarks(inAndOutFrames);
   }, [inAndOutFrames]);
-  return /* @__PURE__ */ jsx275(TimelineInOutContext.Provider, {
+  return /* @__PURE__ */ jsx276(TimelineInOutContext.Provider, {
     value: inAndOutFrames,
-    children: /* @__PURE__ */ jsx275(SetTimelineInOutContext.Provider, {
+    children: /* @__PURE__ */ jsx276(SetTimelineInOutContext.Provider, {
       value: setTimelineInOutContextValue,
       children
     })
@@ -44684,15 +44860,15 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback138, useMemo as useMemo142, useRef as useRef44, useState as useState90 } from "react";
-import { jsx as jsx276 } from "react/jsx-runtime";
+import { useCallback as useCallback138, useMemo as useMemo143, useRef as useRef46, useState as useState92 } from "react";
+import { jsx as jsx277 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
-  const [guidesList, setGuidesList] = useState90(() => loadGuidesList());
-  const [selectedGuideId, setSelectedGuideId] = useState90(null);
-  const [hoveredGuideId, setHoveredGuideId] = useState90(null);
-  const [editorShowGuides, setEditorShowGuidesState] = useState90(() => loadEditorShowGuidesOption());
-  const shouldCreateGuideRef = useRef44(false);
-  const shouldDeleteGuideRef = useRef44(false);
+  const [guidesList, setGuidesList] = useState92(() => loadGuidesList());
+  const [selectedGuideId, setSelectedGuideId] = useState92(null);
+  const [hoveredGuideId, setHoveredGuideId] = useState92(null);
+  const [editorShowGuides, setEditorShowGuidesState] = useState92(() => loadEditorShowGuidesOption());
+  const shouldCreateGuideRef = useRef46(false);
+  const shouldDeleteGuideRef = useRef46(false);
   const setEditorShowGuides = useCallback138((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);
@@ -44700,7 +44876,7 @@ var ShowGuidesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowGuidesCtx = useMemo142(() => {
+  const editorShowGuidesCtx = useMemo143(() => {
     return {
       editorShowGuides,
       setEditorShowGuides,
@@ -44720,17 +44896,17 @@ var ShowGuidesProvider = ({ children }) => {
     selectedGuideId,
     hoveredGuideId
   ]);
-  return /* @__PURE__ */ jsx276(EditorShowGuidesContext.Provider, {
+  return /* @__PURE__ */ jsx277(EditorShowGuidesContext.Provider, {
     value: editorShowGuidesCtx,
     children
   });
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback139, useMemo as useMemo143, useState as useState91 } from "react";
-import { jsx as jsx277 } from "react/jsx-runtime";
+import { useCallback as useCallback139, useMemo as useMemo144, useState as useState93 } from "react";
+import { jsx as jsx278 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
-  const [editorShowRulers, setEditorShowRulersState] = useState91(() => loadEditorShowRulersOption());
+  const [editorShowRulers, setEditorShowRulersState] = useState93(() => loadEditorShowRulersOption());
   const setEditorShowRulers = useCallback139((newValue) => {
     setEditorShowRulersState((prevState) => {
       const newVal = newValue(prevState);
@@ -44738,23 +44914,23 @@ var ShowRulersProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowRulersCtx = useMemo143(() => {
+  const editorShowRulersCtx = useMemo144(() => {
     return {
       editorShowRulers,
       setEditorShowRulers
     };
   }, [editorShowRulers, setEditorShowRulers]);
-  return /* @__PURE__ */ jsx277(EditorShowRulersContext.Provider, {
+  return /* @__PURE__ */ jsx278(EditorShowRulersContext.Provider, {
     value: editorShowRulersCtx,
     children
   });
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback140, useMemo as useMemo144, useState as useState92 } from "react";
-import { jsx as jsx278 } from "react/jsx-runtime";
+import { useCallback as useCallback140, useMemo as useMemo145, useState as useState94 } from "react";
+import { jsx as jsx279 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
-  const [editorZoomGestures, setEditorZoomGesturesState] = useState92(() => loadEditorZoomGesturesOption());
+  const [editorZoomGestures, setEditorZoomGesturesState] = useState94(() => loadEditorZoomGesturesOption());
   const setEditorZoomGestures = useCallback140((newValue) => {
     setEditorZoomGesturesState((prevState) => {
       const newVal = newValue(prevState);
@@ -44762,40 +44938,40 @@ var ZoomGesturesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorZoomGesturesCtx = useMemo144(() => {
+  const editorZoomGesturesCtx = useMemo145(() => {
     return {
       editorZoomGestures,
       setEditorZoomGestures
     };
   }, [editorZoomGestures, setEditorZoomGestures]);
-  return /* @__PURE__ */ jsx278(EditorZoomGesturesContext.Provider, {
+  return /* @__PURE__ */ jsx279(EditorZoomGesturesContext.Provider, {
     value: editorZoomGesturesCtx,
     children
   });
 };
 
 // src/components/EditorContexts.tsx
-import { jsx as jsx279 } from "react/jsx-runtime";
+import { jsx as jsx280 } from "react/jsx-runtime";
 var EditorContexts = ({ children, readOnlyStudio }) => {
-  return /* @__PURE__ */ jsx279(ZodProvider, {
-    children: /* @__PURE__ */ jsx279(VisualControlsProvider, {
-      children: /* @__PURE__ */ jsx279(PreviewServerConnection, {
+  return /* @__PURE__ */ jsx280(ZodProvider, {
+    children: /* @__PURE__ */ jsx280(VisualControlsProvider, {
+      children: /* @__PURE__ */ jsx280(PreviewServerConnection, {
         readOnlyStudio,
-        children: /* @__PURE__ */ jsx279(RenderQueueContextProvider, {
-          children: /* @__PURE__ */ jsx279(KeybindingContextProvider, {
-            children: /* @__PURE__ */ jsx279(CheckerboardProvider, {
-              children: /* @__PURE__ */ jsx279(ZoomGesturesProvider, {
-                children: /* @__PURE__ */ jsx279(ShowRulersProvider, {
-                  children: /* @__PURE__ */ jsx279(ShowGuidesProvider, {
-                    children: /* @__PURE__ */ jsx279(PreviewSizeProvider, {
-                      children: /* @__PURE__ */ jsx279(ModalsProvider, {
-                        children: /* @__PURE__ */ jsx279(MediaVolumeProvider, {
-                          children: /* @__PURE__ */ jsx279(PlayerInternals20.PlayerEmitterProvider, {
+        children: /* @__PURE__ */ jsx280(RenderQueueContextProvider, {
+          children: /* @__PURE__ */ jsx280(KeybindingContextProvider, {
+            children: /* @__PURE__ */ jsx280(CheckerboardProvider, {
+              children: /* @__PURE__ */ jsx280(ZoomGesturesProvider, {
+                children: /* @__PURE__ */ jsx280(ShowRulersProvider, {
+                  children: /* @__PURE__ */ jsx280(ShowGuidesProvider, {
+                    children: /* @__PURE__ */ jsx280(PreviewSizeProvider, {
+                      children: /* @__PURE__ */ jsx280(ModalsProvider, {
+                        children: /* @__PURE__ */ jsx280(MediaVolumeProvider, {
+                          children: /* @__PURE__ */ jsx280(PlayerInternals20.PlayerEmitterProvider, {
                             currentPlaybackRate: null,
-                            children: /* @__PURE__ */ jsx279(SidebarContextProvider, {
-                              children: /* @__PURE__ */ jsx279(FolderContextProvider, {
-                                children: /* @__PURE__ */ jsx279(HighestZIndexProvider, {
-                                  children: /* @__PURE__ */ jsx279(SetTimelineInOutProvider, {
+                            children: /* @__PURE__ */ jsx280(SidebarContextProvider, {
+                              children: /* @__PURE__ */ jsx280(FolderContextProvider, {
+                                children: /* @__PURE__ */ jsx280(HighestZIndexProvider, {
+                                  children: /* @__PURE__ */ jsx280(SetTimelineInOutProvider, {
                                     children
                                   })
                                 })
@@ -44818,7 +44994,7 @@ var EditorContexts = ({ children, readOnlyStudio }) => {
 
 // src/components/Notifications/ServerDisconnected.tsx
 import { useContext as useContext85 } from "react";
-import { jsx as jsx280, jsxs as jsxs146 } from "react/jsx-runtime";
+import { jsx as jsx281, jsxs as jsxs147 } from "react/jsx-runtime";
 var container63 = {
   position: "fixed",
   justifyContent: "flex-end",
@@ -44863,26 +45039,26 @@ var ServerDisconnected = () => {
   }
   const base64Favicon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARiSURBVHgB7d1NThRBFAfw/2tGgru5gXMD8QZ4AmVjAi6kN0TiAm8gnkBcGARNumcx4E48Ae0JaE9gewLHlQSZelaNgyHGL/RVd1X3+y10RQL58+rVx1QBKKWUUkoppZRSSimllFJKKVUjQs32stEiJcktZiwxzKL9Fvqzb6S0/44JVBKbtwa9aj29U6JjagtkJzsYzBEyBi9d5utsQIULCcxvelgo03R5jBarJZCXw/17E+bt82r4Hy4gtuEQekUbK8h7IHvDV5vMZht+VAlRfmYw3EhXKrSA10Ce2X7RIzpGDVzlgM1wPb2bI2JeA9nN99/b/waoV+XCmTAex1g13gLZyUZrdjjJ0CAbTB5bMN4C2ctHxwxaRABiCsZLIG6KmxC/R2BiCCaBBwn4NgJk10B2GOWj3Wz/IQLlpUL28oOjyy4AG1AZppuhVYt4hWRZ1o8gDGc6rL4YHjxCQMQDOcNCEI38bxnmLTc9d30PARAPZAITZP/4A1ctx3bjcw0NEw8koeQ64tRnu25qeggTb+q2/BmRcyv9K7yw3MTOsmiFuLMOtICblJzS5+Mm+opoIBOgFYHMuL5yVHcoooFQuwJxag9FNJCIG/rv1BqKaCDfzshbqbZQxAJxK3SJI9qATUPJstdef0axQGJbof+jwRc6eQ2PxAIx4DZXx3duSrybv3oCTyR7yACdYR762sIXDKQbFfId4ZGPJi8YCA3QLf05YvF+IhYIEV1Dx9hNu8XdbLQFQV6OcDuFaFNyKiwWiJ19DNBN/VN8XoMQrRABDFqCEJ32CiBisT08rRAZAwjRQAKjgcgQO+rVQARMb3gJ0UAkML+DEA1EwAQkdkNMcnOx1Zcxf8V9ol7y88GSm4tdDKRy1xsgSIes/0BM4ndN5HZ7OzZkMePperqSQ5jkkFWhO6r76WrYJ4b2N+YTumF60QeeSG6/d2DI4rHvW1eCPaT9Q9YZw/sVOMlZVoUWM8zpg/Su97dVJGdZFVrKhbFR05MdYoFcwWmF1rF9kbG8UeP7KaI3qBp628QTHrueUccwdZHw/ZDWNHY7tU1u1B2GIxqIYSO2Dd0Ud79wnq/eaOpBgR4EMVDW/oijINu87d7U6hYaJBrInA0k0iu4bvVtZ1KrBRrm4Vr06GNkF3cO7RCVhvK4pmiFOISkjOStk1lVrBQIiPh5SAyN3fWKWeMuEBjxCmEkh3bVvokAzd5idL2iQqDEA1nASXmK+XFIfeTCo5gFAudllvo8G20TUeNVElMQ58QrxLHD1jbB3GumSnhsz7qHE9BhTEGc87aOm16KJHi7rfqj8yfI53E1j/l9eK8L651stJUQeXx/iuzU1QztZLGIsRp+xvtOh3Qo3/qCedumEC6qZetpJztwz7O6UAa4FNsP7ELTfXbWbskUdjgq9M9VCJoFcwvTlfyPDd9t3XNJjA+2IZcGpmxi+7tpjW3OupurJziZhtKWPzWhlFJKKaWUUkoppZRSSiml/uwrgZ/Bfwo/wccAAAAASUVORK5CYII=";
   fav.setAttribute("href", base64Favicon);
-  return /* @__PURE__ */ jsx280("div", {
+  return /* @__PURE__ */ jsx281("div", {
     style: container63,
     className: "css-reset",
-    children: /* @__PURE__ */ jsxs146("div", {
+    children: /* @__PURE__ */ jsxs147("div", {
       style: message,
       children: [
         "The studio server has disconnected. ",
-        /* @__PURE__ */ jsx280("br", {}),
-        window.remotion_studioServerCommand ? /* @__PURE__ */ jsxs146("span", {
+        /* @__PURE__ */ jsx281("br", {}),
+        window.remotion_studioServerCommand ? /* @__PURE__ */ jsxs147("span", {
           children: [
             "Run",
             " ",
-            /* @__PURE__ */ jsx280("code", {
+            /* @__PURE__ */ jsx281("code", {
               style: inlineCode,
               children: window.remotion_studioServerCommand
             }),
             " ",
             "to run it again."
           ]
-        }) : /* @__PURE__ */ jsx280("span", {
+        }) : /* @__PURE__ */ jsx281("span", {
           children: "Fast refresh will not work."
         })
       ]
@@ -45047,7 +45223,7 @@ var injectCSS = () => {
 };
 
 // src/Studio.tsx
-import { jsx as jsx281, jsxs as jsxs147 } from "react/jsx-runtime";
+import { jsx as jsx282, jsxs as jsxs148 } from "react/jsx-runtime";
 var getServerDisconnectedDomElement = () => {
   return document.getElementById("server-disconnected-overlay");
 };
@@ -45055,27 +45231,27 @@ var Studio = ({ rootComponent, readOnly }) => {
   useLayoutEffect2(() => {
     injectCSS();
   }, []);
-  return /* @__PURE__ */ jsx281(Internals65.CompositionManagerProvider, {
+  return /* @__PURE__ */ jsx282(Internals65.CompositionManagerProvider, {
     onlyRenderComposition: null,
     currentCompositionMetadata: null,
     initialCompositions: [],
     initialCanvasContent: null,
-    children: /* @__PURE__ */ jsx281(Internals65.RemotionRootContexts, {
+    children: /* @__PURE__ */ jsx282(Internals65.RemotionRootContexts, {
       frameState: null,
       audioEnabled: window.remotion_audioEnabled,
       videoEnabled: window.remotion_videoEnabled,
       logLevel: window.remotion_logLevel,
       numberOfAudioTags: window.remotion_numberOfAudioTags,
       audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
-      children: /* @__PURE__ */ jsx281(Internals65.ResolveCompositionConfigInStudio, {
-        children: /* @__PURE__ */ jsxs147(EditorContexts, {
+      children: /* @__PURE__ */ jsx282(Internals65.ResolveCompositionConfigInStudio, {
+        children: /* @__PURE__ */ jsxs148(EditorContexts, {
           readOnlyStudio: readOnly,
           children: [
-            /* @__PURE__ */ jsx281(Editor, {
+            /* @__PURE__ */ jsx282(Editor, {
               readOnlyStudio: readOnly,
               Root: rootComponent
             }),
-            readOnly ? null : createPortal(/* @__PURE__ */ jsx281(ServerDisconnected, {}), getServerDisconnectedDomElement())
+            readOnly ? null : createPortal(/* @__PURE__ */ jsx282(ServerDisconnected, {}), getServerDisconnectedDomElement())
           ]
         })
       })
@@ -45084,9 +45260,9 @@ var Studio = ({ rootComponent, readOnly }) => {
 };
 
 // src/components/NoRegisterRoot.tsx
-import { useEffect as useEffect82, useState as useState93 } from "react";
+import { useEffect as useEffect84, useState as useState95 } from "react";
 import { AbsoluteFill as AbsoluteFill6 } from "remotion";
-import { jsx as jsx282, jsxs as jsxs148 } from "react/jsx-runtime";
+import { jsx as jsx283, jsxs as jsxs149 } from "react/jsx-runtime";
 var label11 = {
   fontSize: 13,
   color: "white",
@@ -45105,8 +45281,8 @@ var link5 = {
   borderBottom: "1px solid"
 };
 var NoRegisterRoot = () => {
-  const [show, setShow] = useState93(() => false);
-  useEffect82(() => {
+  const [show, setShow] = useState95(() => false);
+  useEffect84(() => {
     const timeout = setTimeout(() => {
       setShow(true);
     }, 2000);
@@ -45117,19 +45293,19 @@ var NoRegisterRoot = () => {
   if (!show) {
     return null;
   }
-  return /* @__PURE__ */ jsxs148(AbsoluteFill6, {
+  return /* @__PURE__ */ jsxs149(AbsoluteFill6, {
     style: container64,
     children: [
-      /* @__PURE__ */ jsx282("div", {
+      /* @__PURE__ */ jsx283("div", {
         style: label11,
         children: "Waiting for registerRoot() to get called."
       }),
-      /* @__PURE__ */ jsxs148("div", {
+      /* @__PURE__ */ jsxs149("div", {
         style: label11,
         children: [
           "Learn more:",
           " ",
-          /* @__PURE__ */ jsx282("a", {
+          /* @__PURE__ */ jsx283("a", {
             target: "_blank",
             style: link5,
             href: "https://www.remotion.dev/docs/register-root",
@@ -45143,12 +45319,12 @@ var NoRegisterRoot = () => {
 
 // src/error-overlay/remotion-overlay/index.tsx
 import ReactDOM9 from "react-dom/client";
-import { jsx as jsx283 } from "react/jsx-runtime";
+import { jsx as jsx284 } from "react/jsx-runtime";
 var mountRemotionOverlay = () => {
   if (ReactDOM9.createRoot) {
-    ReactDOM9.createRoot(document.getElementById("remotion-error-overlay")).render(/* @__PURE__ */ jsx283(Overlay, {}));
+    ReactDOM9.createRoot(document.getElementById("remotion-error-overlay")).render(/* @__PURE__ */ jsx284(Overlay, {}));
   } else {
-    ReactDOM9.render(/* @__PURE__ */ jsx283(Overlay, {}), document.getElementById("remotion-error-overlay"));
+    ReactDOM9.render(/* @__PURE__ */ jsx284(Overlay, {}), document.getElementById("remotion-error-overlay"));
   }
 };
 
@@ -45453,7 +45629,7 @@ var enableHotMiddleware = () => {
 };
 
 // src/previewEntry.tsx
-import { jsx as jsx284 } from "react/jsx-runtime";
+import { jsx as jsx285 } from "react/jsx-runtime";
 Internals66.CSSUtils.injectCSS(Internals66.CSSUtils.makeDefaultPreviewCSS(null, "#1f2428"));
 var root = null;
 var getRootForElement = () => {
@@ -45473,10 +45649,10 @@ var renderToDOM = (content7) => {
   }
   getRootForElement().render(content7);
 };
-renderToDOM(/* @__PURE__ */ jsx284(NoRegisterRoot, {}));
+renderToDOM(/* @__PURE__ */ jsx285(NoRegisterRoot, {}));
 Internals66.waitForRoot((NewRoot) => {
   Internals66.enableSequenceStackTraces();
-  renderToDOM(/* @__PURE__ */ jsx284(Studio, {
+  renderToDOM(/* @__PURE__ */ jsx285(Studio, {
     readOnly: false,
     rootComponent: NewRoot
   }));