@remotion/studio 4.0.447 → 4.0.448

package/dist/esm/{chunk-ase93hmz.js → chunk-9s6mbe6g.js}

@@ -10,7 +10,7 @@ import { Internals as Internals70 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React187, { useCallback as useCallback149, useMemo as useMemo150, useState as useState98 } from "react";
+import React187, { useCallback as useCallback149, useMemo as useMemo151, useState as useState98 } from "react";
 import { Internals as Internals65 } from "remotion";
 
 // src/helpers/colors.ts
@@ -3112,6 +3112,7 @@ var SidebarRenderButton = ({ composition, visible }) => {
       renderTypeOfLastRender: null,
       defaulMetadata: defaults.metadata,
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: defaults.chromeMode,
       initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -3935,7 +3936,8 @@ var addVideoRenderJob = ({
   metadata,
   hardwareAcceleration,
   chromeMode,
-  mediaCacheSizeInBytes
+  mediaCacheSizeInBytes,
+  sampleRate
 }) => {
   return callApi("/api/render", {
     compositionId,
@@ -3982,7 +3984,8 @@ var addVideoRenderJob = ({
     metadata,
     hardwareAcceleration,
     chromeMode,
-    mediaCacheSizeInBytes
+    mediaCacheSizeInBytes,
+    sampleRate
   });
 };
 var unsubscribeFromFileExistenceWatcher = ({
@@ -16905,6 +16908,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "still",
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -16958,6 +16962,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "sequence",
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -17011,6 +17016,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "video",
       initialHardwareAcceleration: job.hardwareAcceleration,
+      initialSampleRate: job.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -18866,6 +18872,7 @@ var RenderButton = ({
       renderTypeOfLastRender: null,
       defaulMetadata: defaults.metadata,
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: defaults.chromeMode,
       initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
       renderDefaults: defaults
@@ -27825,7 +27832,7 @@ import {
   useCallback as useCallback141,
   useContext as useContext94,
   useEffect as useEffect83,
-  useMemo as useMemo142,
+  useMemo as useMemo143,
   useReducer as useReducer2,
   useRef as useRef49,
   useState as useState91
@@ -27975,6 +27982,7 @@ var makeReadOnlyStudioRenderCommand = ({
   beepOnFinish,
   repro,
   metadata,
+  sampleRate,
   envVariables,
   inputProps
 }) => {
@@ -28062,6 +28070,9 @@ var makeReadOnlyStudioRenderCommand = ({
       if (audioCodec !== defaultAudioCodec) {
         addFlagWithValue(flags, getRenderMediaFlag("audioCodec"), audioCodec);
       }
+      addValueFlagsIfChanged(flags, [
+        renderMediaValueFlag("sampleRate", sampleRate, renderDefaults.sampleRate)
+      ]);
     }
     addTrueBooleanFlagsIfChanged(flags, [
       renderMediaBooleanFlag("disallowParallelEncoding", disallowParallelEncoding, false),
@@ -29734,7 +29745,7 @@ var RenderModalAdvanced = ({
 
 // src/components/RenderModal/RenderModalAudio.tsx
 import { BrowserSafeApis as BrowserSafeApis8 } from "@remotion/renderer/client";
-import { useCallback as useCallback134 } from "react";
+import { useCallback as useCallback134, useMemo as useMemo138 } from "react";
 
 // src/components/RenderModal/EnforceAudioTrackSetting.tsx
 import { useCallback as useCallback131 } from "react";
@@ -30029,6 +30040,7 @@ var container55 = {
   flex: 1,
   overflowY: "auto"
 };
+var commonSampleRates = [8000, 16000, 22050, 44100, 48000, 96000];
 var RenderModalAudio = ({
   muted,
   setMuted,
@@ -30046,7 +30058,9 @@ var RenderModalAudio = ({
   setForSeamlessAacConcatenation,
   separateAudioTo,
   setSeparateAudioTo,
-  outName
+  outName,
+  sampleRate,
+  setSampleRate
 }) => {
   const onShouldHaveTargetAudioBitrateChanged = useCallback134((e) => {
     setShouldHaveCustomTargetAudioBitrate(e.target.checked);
@@ -30057,6 +30071,20 @@ var RenderModalAudio = ({
   const onSeamlessAacConcatenationChanges = useCallback134((e) => {
     setForSeamlessAacConcatenation(e.target.checked);
   }, [setForSeamlessAacConcatenation]);
+  const sampleRateOptions = useMemo138(() => {
+    return commonSampleRates.map((rate) => ({
+      label: rate === 48000 ? `${rate} Hz (default)` : `${rate} Hz`,
+      onClick: () => setSampleRate(rate),
+      key: String(rate),
+      leftItem: sampleRate === rate ? /* @__PURE__ */ jsx263(Checkmark, {}) : null,
+      id: String(rate),
+      keyHint: null,
+      quickSwitcherLabel: null,
+      subMenu: null,
+      type: "item",
+      value: String(rate)
+    }));
+  }, [sampleRate, setSampleRate]);
   const audioCodecOptions = useCallback134((currentCodec) => {
     return BrowserSafeApis8.supportedAudioCodecs[currentCodec].map((audioCodecOption) => {
       return {
@@ -30197,6 +30225,31 @@ var RenderModalAudio = ({
             })
           })
         ]
+      }) : null,
+      renderMode !== "still" && !muted ? /* @__PURE__ */ jsxs135("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsxs135("div", {
+            style: label5,
+            children: [
+              "Sample Rate ",
+              /* @__PURE__ */ jsx263(Spacing, {
+                x: 0.5
+              }),
+              /* @__PURE__ */ jsx263(OptionExplainerBubble, {
+                id: "sampleRateOption"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx263("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx263(Combobox, {
+              values: sampleRateOptions,
+              selectedId: String(sampleRate),
+              title: "Sample Rate"
+            })
+          })
+        ]
       }) : null
     ]
   });
@@ -30205,7 +30258,7 @@ var RenderModalAudio = ({
 // src/components/RenderModal/RenderModalBasic.tsx
 import { BrowserSafeApis as BrowserSafeApis9 } from "@remotion/renderer/client";
 import { NoReactAPIs as NoReactAPIs2 } from "@remotion/renderer/pure";
-import { useCallback as useCallback137, useMemo as useMemo139 } from "react";
+import { useCallback as useCallback137, useMemo as useMemo140 } from "react";
 
 // src/helpers/prores-labels.ts
 var labelProResProfile = (profile) => {
@@ -30234,7 +30287,7 @@ var labelProResProfile = (profile) => {
 import { useCallback as useCallback136 } from "react";
 
 // src/components/RenderModal/MultiRangeSlider.tsx
-import { useCallback as useCallback135, useMemo as useMemo138 } from "react";
+import { useCallback as useCallback135, useMemo as useMemo139 } from "react";
 import { jsx as jsx264, jsxs as jsxs136 } from "react/jsx-runtime";
 var container56 = {
   borderColor: "black",
@@ -30264,7 +30317,7 @@ var MultiRangeSlider = ({
   onRightThumbDrag
 }) => {
   const getPercent = useCallback135((value) => Math.round((value - min) / (max - min) * 100), [min, max]);
-  const rangeStyle = useMemo138(() => {
+  const rangeStyle = useMemo139(() => {
     const minPercent = getPercent(start);
     const maxPercent = getPercent(end);
     return {
@@ -30471,7 +30524,7 @@ var RenderModalBasic = ({
   showOutputName
 }) => {
   const existence = useFileExistence(outName);
-  const videoCodecOptions = useMemo139(() => {
+  const videoCodecOptions = useMemo140(() => {
     return BrowserSafeApis9.validCodecs.filter((c) => {
       return NoReactAPIs2.isAudioCodec(c) === (renderMode === "audio");
     }).map((codecOption) => {
@@ -30489,7 +30542,7 @@ var RenderModalBasic = ({
       };
     });
   }, [renderMode, setCodec, codec]);
-  const proResProfileOptions = useMemo139(() => {
+  const proResProfileOptions = useMemo140(() => {
     return BrowserSafeApis9.proResProfileOptions.map((option) => {
       return {
         label: labelProResProfile(option),
@@ -30521,7 +30574,7 @@ var RenderModalBasic = ({
   const onValueChange = useCallback137((e) => {
     setOutName(e.target.value);
   }, [setOutName]);
-  const logLevelOptions = useMemo139(() => {
+  const logLevelOptions = useMemo140(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -30775,7 +30828,7 @@ var RenderModalGif = ({
 
 // src/components/RenderModal/RenderModalPicture.tsx
 import { BrowserSafeApis as BrowserSafeApis10 } from "@remotion/renderer/client";
-import { useCallback as useCallback140, useMemo as useMemo141 } from "react";
+import { useCallback as useCallback140, useMemo as useMemo142 } from "react";
 
 // src/components/RenderModal/JpegQualitySetting.tsx
 import { jsx as jsx269 } from "react/jsx-runtime";
@@ -30794,7 +30847,7 @@ var JpegQualitySetting = ({ jpegQuality, setJpegQuality }) => {
 };
 
 // src/components/RenderModal/ScaleSetting.tsx
-import { useMemo as useMemo140 } from "react";
+import { useMemo as useMemo141 } from "react";
 import { jsx as jsx270, jsxs as jsxs141, Fragment as Fragment46 } from "react/jsx-runtime";
 var MIN_SCALE = 0.1;
 var MAX_SCALE = 10;
@@ -30808,7 +30861,7 @@ var outputDimensionsStyle = {
   marginTop: -10
 };
 var ScaleSetting = ({ scale, setScale, compositionWidth, compositionHeight }) => {
-  const outputDimensions = useMemo140(() => {
+  const outputDimensions = useMemo141(() => {
     const outputWidth = Math.round(compositionWidth * scale);
     const outputHeight = Math.round(compositionHeight * scale);
     return `${outputWidth}×${outputHeight}`;
@@ -30877,7 +30930,7 @@ var RenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const colorSpaceOptions = useMemo141(() => {
+  const colorSpaceOptions = useMemo142(() => {
     return BrowserSafeApis10.validColorSpaces.map((option) => {
       return {
         label: option,
@@ -30893,7 +30946,7 @@ var RenderModalPicture = ({
       };
     });
   }, [colorSpace, setColorSpace]);
-  const qualityControlOptions = useMemo141(() => {
+  const qualityControlOptions = useMemo142(() => {
     return qualityControlModes.map((option) => {
       return {
         label: option === "crf" ? "CRF" : "Bitrate",
@@ -31215,6 +31268,7 @@ var RenderModal = ({
   initialForSeamlessAacConcatenation,
   renderTypeOfLastRender,
   initialHardwareAcceleration,
+  initialSampleRate,
   defaultMetadata,
   initialChromeMode,
   renderDefaults
@@ -31272,6 +31326,7 @@ var RenderModal = ({
   const [repro, setRepro] = useState91(() => initialRepro);
   const [enforceAudioTrackState, setEnforceAudioTrackState] = useState91(() => initialEnforceAudioTrack);
   const [forSeamlessAacConcatenation, setForSeamlessAacConcatenation] = useState91(() => initialForSeamlessAacConcatenation);
+  const [sampleRate, setSampleRate] = useState91(() => initialSampleRate);
   const [renderMode, setRenderModeState] = useState91(initialRenderType);
   const [jpegQuality, setJpegQuality] = useState91(() => initialJpegQuality);
   const [scale, setScale] = useState91(() => initialScale);
@@ -31286,7 +31341,7 @@ var RenderModal = ({
   const [openGlOption, setOpenGlOption] = useState91(() => initialGl ?? "default");
   const [colorSpace, setColorSpace] = useState91(() => initialColorSpace);
   const [userAgent, setUserAgent] = useState91(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
-  const chromiumOptions = useMemo142(() => {
+  const chromiumOptions = useMemo143(() => {
     return {
       headless,
       disableWebSecurity,
@@ -31328,19 +31383,19 @@ var RenderModal = ({
   const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState91(initialOffthreadVideoCacheSizeInBytes);
   const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState91(initialMediaCacheSizeInBytes);
   const [offthreadVideoThreads, setOffthreadVideoThreads] = useState91(() => initialOffthreadVideoThreads);
-  const codec = useMemo142(() => {
+  const codec = useMemo143(() => {
     if (renderMode === "audio") {
       return videoCodecForAudioTab;
     }
     return videoCodecForVideoTab;
   }, [videoCodecForAudioTab, renderMode, videoCodecForVideoTab]);
-  const numberOfGifLoops = useMemo142(() => {
+  const numberOfGifLoops = useMemo143(() => {
     if (codec === "gif" && limitNumberOfGifLoops) {
       return numberOfGifLoopsSetting;
     }
     return null;
   }, [codec, limitNumberOfGifLoops, numberOfGifLoopsSetting]);
-  const audioBitrate = useMemo142(() => {
+  const audioBitrate = useMemo143(() => {
     if (shouldHaveCustomTargetAudioBitrate) {
       return customTargetAudioBitrate;
     }
@@ -31348,10 +31403,10 @@ var RenderModal = ({
   }, [customTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate]);
   const supportsCrf = BrowserSafeApis11.codecSupportsCrf(codec);
   const supportsVideoBitrate = BrowserSafeApis11.codecSupportsVideoBitrate(codec);
-  const supportsBothQualityControls = useMemo142(() => {
+  const supportsBothQualityControls = useMemo143(() => {
     return supportsCrf && supportsVideoBitrate && hardwareAcceleration !== "if-possible" && hardwareAcceleration !== "required";
   }, [hardwareAcceleration, supportsCrf, supportsVideoBitrate]);
-  const qualityControlType = useMemo142(() => {
+  const qualityControlType = useMemo143(() => {
     if (hardwareAcceleration === "if-possible" || hardwareAcceleration === "required") {
       if (supportsVideoBitrate) {
         return "bitrate";
@@ -31375,7 +31430,7 @@ var RenderModal = ({
     supportsCrf,
     supportsVideoBitrate
   ]);
-  const videoBitrate = useMemo142(() => {
+  const videoBitrate = useMemo143(() => {
     if (qualityControlType === "bitrate") {
       return customTargetVideoBitrate;
     }
@@ -31387,13 +31442,13 @@ var RenderModal = ({
       return;
     dispatch(payload);
   }, []);
-  const muted = useMemo142(() => {
+  const muted = useMemo143(() => {
     if (renderMode === "video") {
       return mutedState;
     }
     return false;
   }, [mutedState, renderMode]);
-  const enforceAudioTrack = useMemo142(() => {
+  const enforceAudioTrack = useMemo143(() => {
     if (renderMode === "video") {
       return enforceAudioTrackState;
     }
@@ -31402,13 +31457,13 @@ var RenderModal = ({
     }
     return false;
   }, [enforceAudioTrackState, renderMode]);
-  const proResProfile = useMemo142(() => {
+  const proResProfile = useMemo143(() => {
     if (renderMode === "video" && codec === "prores") {
       return proResProfileSetting;
     }
     return null;
   }, [codec, proResProfileSetting, renderMode]);
-  const x264Preset = useMemo142(() => {
+  const x264Preset = useMemo143(() => {
     if (renderMode === "video" && codec === "h264") {
       return x264PresetSetting;
     }
@@ -31419,19 +31474,19 @@ var RenderModal = ({
     _setInputProps(updater);
   }, []);
   const [metadata] = useState91(() => defaultMetadata);
-  const endFrame = useMemo142(() => {
+  const endFrame = useMemo143(() => {
     if (endFrameOrNull === null) {
       return resolvedComposition.durationInFrames - 1;
     }
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrameOrNull));
   }, [resolvedComposition.durationInFrames, endFrameOrNull]);
-  const startFrame = useMemo142(() => {
+  const startFrame = useMemo143(() => {
     if (startFrameOrNull === null) {
       return 0;
     }
     return Math.max(0, Math.min(endFrame - 1, startFrameOrNull));
   }, [endFrame, startFrameOrNull]);
-  const frame2 = useMemo142(() => {
+  const frame2 = useMemo143(() => {
     const parsed = Math.floor(unclampedFrame);
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, parsed));
   }, [resolvedComposition.durationInFrames, unclampedFrame]);
@@ -31552,17 +31607,17 @@ var RenderModal = ({
     mediaCacheSizeInBytes
   ]);
   const [everyNthFrameSetting, setEveryNthFrameSetting] = useState91(() => initialEveryNthFrame);
-  const everyNthFrame = useMemo142(() => {
+  const everyNthFrame = useMemo143(() => {
     if (codec === "gif") {
       return everyNthFrameSetting;
     }
     return 1;
   }, [codec, everyNthFrameSetting]);
   const audioCodec = deriveFinalAudioCodec(codec, userSelectedAudioCodec);
-  const availablePixelFormats = useMemo142(() => {
+  const availablePixelFormats = useMemo143(() => {
     return BrowserSafeApis11.validPixelFormatsForCodec(codec);
   }, [codec]);
-  const pixelFormat = useMemo142(() => {
+  const pixelFormat = useMemo143(() => {
     if (availablePixelFormats.includes(userPreferredPixelFormat)) {
       return userPreferredPixelFormat;
     }
@@ -31613,7 +31668,8 @@ var RenderModal = ({
       hardwareAcceleration,
       chromeMode,
       offthreadVideoThreads,
-      mediaCacheSizeInBytes
+      mediaCacheSizeInBytes,
+      sampleRate
     }).then(() => {
       dispatchIfMounted({ type: "succeed" });
       setSelectedModal(null);
@@ -31665,7 +31721,8 @@ var RenderModal = ({
     hardwareAcceleration,
     chromeMode,
     offthreadVideoThreads,
-    mediaCacheSizeInBytes
+    mediaCacheSizeInBytes,
+    sampleRate
   ]);
   const onClickSequence = useCallback141(() => {
     setSidebarCollapsedState({ left: null, right: "expanded" });
@@ -31733,7 +31790,7 @@ var RenderModal = ({
       isMounted.current = false;
     };
   }, []);
-  const imageFormatOptions = useMemo142(() => {
+  const imageFormatOptions = useMemo143(() => {
     if (renderMode === "still") {
       return [
         {
@@ -31829,7 +31886,7 @@ var RenderModal = ({
     stillImageFormat,
     videoCodecForVideoTab
   ]);
-  const renderTabOptions = useMemo142(() => {
+  const renderTabOptions = useMemo143(() => {
     if (resolvedComposition?.durationInFrames < 2) {
       return [
         {
@@ -31887,7 +31944,7 @@ var RenderModal = ({
   });
   const { tab, setTab, shownTabs } = useRenderModalSections(renderMode, codec);
   const { registerKeybinding } = useKeybinding();
-  const readOnlyRenderCommand = useMemo142(() => {
+  const readOnlyRenderCommand = useMemo143(() => {
     if (!readOnlyStudio) {
       return null;
     }
@@ -31943,6 +32000,7 @@ var RenderModal = ({
       beepOnFinish,
       repro,
       metadata,
+      sampleRate,
       envVariables: envVariablesArrayToObject(envVariables),
       inputProps
     });
@@ -31992,6 +32050,7 @@ var RenderModal = ({
     resolvedComposition.durationInFrames,
     resolvedComposition.id,
     scale,
+    sampleRate,
     separateAudioTo,
     sequenceImageFormat,
     startFrame,
@@ -32058,7 +32117,7 @@ var RenderModal = ({
       enter.unregister();
     };
   }, [registerKeybinding, renderDisabled, trigger]);
-  const pixelFormatOptions = useMemo142(() => {
+  const pixelFormatOptions = useMemo143(() => {
     return availablePixelFormats.map((option) => {
       return {
         label: option,
@@ -32268,7 +32327,9 @@ var RenderModal = ({
               setForSeamlessAacConcatenation,
               separateAudioTo,
               setSeparateAudioTo,
-              outName
+              outName,
+              sampleRate,
+              setSampleRate
             }) : tab === "gif" ? /* @__PURE__ */ jsx272(RenderModalGif, {
               everyNthFrame,
               limitNumberOfGifLoops,
@@ -32355,7 +32416,7 @@ import {
   getDefaultVideoCodecForContainer,
   isAudioOnlyContainer
 } from "@remotion/web-renderer";
-import { useCallback as useCallback145, useContext as useContext95, useMemo as useMemo147, useState as useState95 } from "react";
+import { useCallback as useCallback145, useContext as useContext95, useMemo as useMemo148, useState as useState95 } from "react";
 
 // src/icons/certificate.tsx
 import { jsx as jsx273 } from "react/jsx-runtime";
@@ -32517,7 +32578,7 @@ var WebRendererExperimentalBadge = () => {
 };
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
-import { useCallback as useCallback142, useMemo as useMemo143 } from "react";
+import { useCallback as useCallback142, useMemo as useMemo144 } from "react";
 import { jsx as jsx275, jsxs as jsxs145 } from "react/jsx-runtime";
 var tabContainer = {
   flex: 1
@@ -32555,7 +32616,7 @@ var WebRenderModalAdvanced = ({
       return cb;
     });
   }, [setMediaCacheSizeInBytes]);
-  const hardwareAccelerationOptions = useMemo143(() => {
+  const hardwareAccelerationOptions = useMemo144(() => {
     return [
       {
         label: "No Preference",
@@ -32687,7 +32748,7 @@ var WebRenderModalAdvanced = ({
 
 // src/components/RenderModal/WebRenderModalAudio.tsx
 import { getSupportedAudioCodecsForContainer as getSupportedAudioCodecsForContainer2 } from "@remotion/web-renderer";
-import { useMemo as useMemo144 } from "react";
+import { useMemo as useMemo145 } from "react";
 
 // src/components/RenderModal/quality-options.tsx
 import { jsx as jsx276 } from "react/jsx-runtime";
@@ -32760,8 +32821,8 @@ var WebRenderModalAudio = ({
   encodableCodecs,
   effectiveAudioCodec
 }) => {
-  const containerSupported = useMemo144(() => getSupportedAudioCodecsForContainer2(videoContainer), [videoContainer]);
-  const audioCodecOptions = useMemo144(() => {
+  const containerSupported = useMemo145(() => getSupportedAudioCodecsForContainer2(videoContainer), [videoContainer]);
+  const audioCodecOptions = useMemo145(() => {
     return containerSupported.map((codec) => {
       const isEncodable = encodableCodecs.includes(codec);
       return {
@@ -32778,7 +32839,7 @@ var WebRenderModalAudio = ({
       };
     });
   }, [containerSupported, encodableCodecs, audioCodec, setAudioCodec]);
-  const audioBitrateOptions = useMemo144(() => getQualityOptions(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
+  const audioBitrateOptions = useMemo145(() => getQualityOptions(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
   const isAudioOnly = renderMode === "audio";
   const showAudioSettings = isAudioOnly || !muted;
   const showAudioCodecSetting = !isAudioOnly || containerSupported.length > 1;
@@ -32855,7 +32916,7 @@ var WebRenderModalAudio = ({
 };
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
-import { useMemo as useMemo145 } from "react";
+import { useMemo as useMemo146 } from "react";
 import { jsx as jsx278, jsxs as jsxs147, Fragment as Fragment49 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
@@ -32909,7 +32970,7 @@ var WebRenderModalBasic = ({
   logLevel,
   setLogLevel
 }) => {
-  const imageFormatOptions = useMemo145(() => {
+  const imageFormatOptions = useMemo146(() => {
     return [
       {
         label: "PNG",
@@ -32931,7 +32992,7 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [imageFormat, setStillFormat]);
-  const logLevelOptions = useMemo145(() => {
+  const logLevelOptions = useMemo146(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -32946,7 +33007,7 @@ var WebRenderModalBasic = ({
       };
     });
   }, [logLevel, setLogLevel]);
-  const containerOptions = useMemo145(() => {
+  const containerOptions = useMemo146(() => {
     const containers = renderMode === "audio" ? audioContainers : videoContainers;
     return containers.map((c) => ({
       label: containerLabels[c],
@@ -32960,7 +33021,7 @@ var WebRenderModalBasic = ({
       value: c
     }));
   }, [container61, setContainerFormat, renderMode]);
-  const codecOptions = useMemo145(() => {
+  const codecOptions = useMemo146(() => {
     return encodableVideoCodecs.map((c) => ({
       label: codecLabels[c],
       onClick: () => setCodec(c),
@@ -33550,7 +33611,7 @@ var WebRenderModalLicense = ({
 };
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
-import { useCallback as useCallback144, useMemo as useMemo146 } from "react";
+import { useCallback as useCallback144, useMemo as useMemo147 } from "react";
 import { jsx as jsx282, jsxs as jsxs150, Fragment as Fragment51 } from "react/jsx-runtime";
 var tabContainer4 = {
   flex: 1
@@ -33568,7 +33629,7 @@ var WebRenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const qualityOptions = useMemo146(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
+  const qualityOptions = useMemo147(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
   const onTransparentChanged = useCallback144((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
@@ -33741,25 +33802,25 @@ var WebRenderModal = ({
   const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState95(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container61);
   const encodableVideoCodecs = useEncodableVideoCodecs(container61);
-  const effectiveAudioCodec = useMemo147(() => {
+  const effectiveAudioCodec = useMemo148(() => {
     if (encodableAudioCodecs.includes(audioCodec)) {
       return audioCodec;
     }
     return encodableAudioCodecs[0] ?? audioCodec;
   }, [audioCodec, encodableAudioCodecs]);
-  const effectiveVideoCodec = useMemo147(() => {
+  const effectiveVideoCodec = useMemo148(() => {
     if (encodableVideoCodecs.includes(codec)) {
       return codec;
     }
     return encodableVideoCodecs[0] ?? codec;
   }, [codec, encodableVideoCodecs]);
-  const finalEndFrame = useMemo147(() => {
+  const finalEndFrame = useMemo148(() => {
     if (endFrame === null) {
       return resolvedComposition.durationInFrames - 1;
     }
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrame));
   }, [endFrame, resolvedComposition.durationInFrames]);
-  const finalStartFrame = useMemo147(() => {
+  const finalStartFrame = useMemo148(() => {
     if (startFrame === null) {
       return 0;
     }
@@ -33824,7 +33885,7 @@ var WebRenderModal = ({
       setTab((prev) => prev === "audio" ? "general" : prev);
     }
   }, [container61, imageFormat, updateOutNameExtension]);
-  const renderTabOptions = useMemo147(() => {
+  const renderTabOptions = useMemo148(() => {
     const options = [
       {
         label: "Still",
@@ -33870,7 +33931,7 @@ var WebRenderModal = ({
   const onOutNameChange = useCallback145((e) => {
     setOutName(e.target.value);
   }, []);
-  const outnameValidation = useMemo147(() => {
+  const outnameValidation = useMemo148(() => {
     if (renderMode === "still") {
       return validateOutnameForStill({
         outName,
@@ -34218,7 +34279,7 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback148, useMemo as useMemo149 } from "react";
+import { useCallback as useCallback148, useMemo as useMemo150 } from "react";
 
 // src/components/CopyButton.tsx
 import { useCallback as useCallback146, useEffect as useEffect87, useState as useState96 } from "react";
@@ -34284,7 +34345,7 @@ var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback147, useMemo as useMemo148, useState as useState97 } from "react";
+import { useCallback as useCallback147, useMemo as useMemo149, useState as useState97 } from "react";
 import { jsx as jsx285 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: "11px",
@@ -34304,7 +34365,7 @@ var OpenIssueButton = ({ link: link4 }) => {
   const handleClick = useCallback147(() => {
     window.open(link4, "_blank");
   }, [link4]);
-  const svgFillColor = useMemo148(() => {
+  const svgFillColor = useMemo149(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
   const openInEditorSvg = /* @__PURE__ */ jsx285("svg", {
@@ -34401,7 +34462,7 @@ var commands = {
   unknown: "npx remotion upgrade"
 };
 var UpdateModal = ({ info, knownBugs }) => {
-  const hasKnownBugs = useMemo149(() => {
+  const hasKnownBugs = useMemo150(() => {
     return knownBugs && knownBugs?.length > 0;
   }, [knownBugs]);
   const command = commands[info.packageManager];
@@ -34565,6 +34626,7 @@ var Modals = ({ readOnlyStudio }) => {
         renderTypeOfLastRender: modalContextType.renderTypeOfLastRender,
         defaultMetadata: modalContextType.defaulMetadata,
         initialHardwareAcceleration: modalContextType.initialHardwareAcceleration,
+        initialSampleRate: modalContextType.initialSampleRate,
         initialChromeMode: modalContextType.initialChromeMode,
         renderDefaults: modalContextType.renderDefaults
       }) : null,
@@ -34609,7 +34671,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
   const onMounted = useCallback149(() => {
     setCanvasMounted(true);
   }, []);
-  const value = useMemo150(() => {
+  const value = useMemo151(() => {
     if (!size4) {
       return null;
     }
@@ -34618,15 +34680,15 @@ var Editor = ({ Root, readOnlyStudio }) => {
       canvasSize: size4
     };
   }, [size4]);
-  const MemoRoot = useMemo150(() => {
+  const MemoRoot = useMemo151(() => {
     return React187.memo(Root);
   }, [Root]);
   const [renderError, setRenderError] = useState98(null);
   const clearError = useCallback149(() => {
     setRenderError(null);
   }, []);
-  const compositionRenderErrorContextValue = useMemo150(() => ({ setError: setRenderError, clearError }), [clearError]);
-  const renderErrorContextValue = useMemo150(() => ({ error: renderError }), [renderError]);
+  const compositionRenderErrorContextValue = useMemo151(() => ({ setError: setRenderError, clearError }), [clearError]);
+  const renderErrorContextValue = useMemo151(() => ({ error: renderError }), [renderError]);
   return /* @__PURE__ */ jsx289(HigherZIndex, {
     onEscape: noop,
     onOutsideClick: noop,
@@ -34677,7 +34739,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback150, useContext as useContext97, useMemo as useMemo151, useState as useState99 } from "react";
+import { useCallback as useCallback150, useContext as useContext97, useMemo as useMemo152, useState as useState99 } from "react";
 import { Internals as Internals66 } from "remotion";
 import { jsx as jsx290 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -34713,7 +34775,7 @@ var PreviewSizeProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const previewSizeCtx = useMemo151(() => {
+  const previewSizeCtx = useMemo152(() => {
     return {
       size: editorZoomGestures ? size4 : {
         size: size4.size,
@@ -34734,7 +34796,7 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback151, useMemo as useMemo152, useState as useState100 } from "react";
+import { useCallback as useCallback151, useMemo as useMemo153, useState as useState100 } from "react";
 import { jsx as jsx291 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState100(() => loadCheckerboardOption());
@@ -34745,7 +34807,7 @@ var CheckerboardProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const checkerboardCtx = useMemo152(() => {
+  const checkerboardCtx = useMemo153(() => {
     return {
       checkerboard,
       setCheckerboard
@@ -34758,19 +34820,19 @@ var CheckerboardProvider = ({ children }) => {
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo153, useState as useState101 } from "react";
+import { useMemo as useMemo154, useState as useState101 } from "react";
 import { Internals as Internals67 } from "remotion";
 import { jsx as jsx292 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
   const [mediaMuted, setMediaMuted] = useState101(() => loadMuteOption());
   const [mediaVolume, setMediaVolume] = useState101(1);
-  const mediaVolumeContextValue = useMemo153(() => {
+  const mediaVolumeContextValue = useMemo154(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeContextValue = useMemo153(() => {
+  const setMediaVolumeContextValue = useMemo154(() => {
     return {
       setMediaMuted,
       setMediaVolume
@@ -34786,11 +34848,11 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo154, useState as useState102 } from "react";
+import { useMemo as useMemo155, useState as useState102 } from "react";
 import { jsx as jsx293 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
   const [modalContextType, setModalContextType] = useState102(null);
-  const modalsContext = useMemo154(() => {
+  const modalsContext = useMemo155(() => {
     return {
       selectedModal: modalContextType,
       setSelectedModal: setModalContextType
@@ -34803,7 +34865,7 @@ var ModalsProvider = ({ children }) => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect88, useMemo as useMemo155, useState as useState103 } from "react";
+import { useEffect as useEffect88, useMemo as useMemo156, useState as useState103 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -34822,7 +34884,7 @@ var loadMarks = () => {
 import { jsx as jsx294 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
   const [inAndOutFrames, setInAndOutFrames] = useState103(() => loadMarks());
-  const setTimelineInOutContextValue = useMemo155(() => {
+  const setTimelineInOutContextValue = useMemo156(() => {
     return {
       setInAndOutFrames
     };
@@ -34840,7 +34902,7 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback152, useMemo as useMemo156, useRef as useRef52, useState as useState104 } from "react";
+import { useCallback as useCallback152, useMemo as useMemo157, useRef as useRef52, useState as useState104 } from "react";
 import { jsx as jsx295 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState104(() => loadGuidesList());
@@ -34856,7 +34918,7 @@ var ShowGuidesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowGuidesCtx = useMemo156(() => {
+  const editorShowGuidesCtx = useMemo157(() => {
     return {
       editorShowGuides,
       setEditorShowGuides,
@@ -34883,7 +34945,7 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback153, useMemo as useMemo157, useState as useState105 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo158, useState as useState105 } from "react";
 import { jsx as jsx296 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState105(() => loadEditorShowRulersOption());
@@ -34894,7 +34956,7 @@ var ShowRulersProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowRulersCtx = useMemo157(() => {
+  const editorShowRulersCtx = useMemo158(() => {
     return {
       editorShowRulers,
       setEditorShowRulers
@@ -34926,7 +34988,7 @@ var VisualControlsUndoSync = () => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback154, useMemo as useMemo158, useState as useState106 } from "react";
+import { useCallback as useCallback154, useMemo as useMemo159, useState as useState106 } from "react";
 import { jsx as jsx297 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState106(() => loadEditorZoomGesturesOption());
@@ -34937,7 +34999,7 @@ var ZoomGesturesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorZoomGesturesCtx = useMemo158(() => {
+  const editorZoomGesturesCtx = useMemo159(() => {
     return {
       editorZoomGestures,
       setEditorZoomGestures
@@ -35074,7 +35136,7 @@ var ServerDisconnected = () => {
 };
 
 // src/FastRefreshProvider.tsx
-import { useCallback as useCallback155, useEffect as useEffect90, useMemo as useMemo159, useState as useState107 } from "react";
+import { useCallback as useCallback155, useEffect as useEffect90, useMemo as useMemo160, useState as useState107 } from "react";
 import { jsx as jsx300 } from "react/jsx-runtime";
 var FastRefreshProvider = ({ children }) => {
   const [fastRefreshes, setFastRefreshes] = useState107(0);
@@ -35093,7 +35155,7 @@ var FastRefreshProvider = ({ children }) => {
       }
     }
   }, []);
-  const value = useMemo159(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
+  const value = useMemo160(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
   return /* @__PURE__ */ jsx300(FastRefreshContext.Provider, {
     value,
     children
@@ -35268,7 +35330,7 @@ import {
   useContext as useContext100,
   useEffect as useEffect91,
   useImperativeHandle as useImperativeHandle14,
-  useMemo as useMemo160,
+  useMemo as useMemo161,
   useState as useState108
 } from "react";
 import { getInputProps as getInputProps2, Internals as Internals69 } from "remotion";
@@ -35278,20 +35340,20 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
   const { compositions, canvasContent, currentCompositionMetadata } = useContext100(Internals69.CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext100(FastRefreshContext);
   if (manualRefreshes) {}
-  const selectedComposition = useMemo160(() => {
+  const selectedComposition = useMemo161(() => {
     return compositions.find((c) => canvasContent && canvasContent.type === "composition" && canvasContent.compositionId === c.id);
   }, [canvasContent, compositions]);
   const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
   const { props: allEditorProps } = useContext100(Internals69.EditorPropsContext);
   const env = Internals69.getRemotionEnvironment();
-  const inputProps = useMemo160(() => {
+  const inputProps = useMemo161(() => {
     return typeof window === "undefined" || env.isPlayer ? {} : getInputProps2() ?? {};
   }, [env.isPlayer]);
   const [resolvedConfigs, setResolvedConfigs] = useState108({});
-  const selectedEditorProps = useMemo160(() => {
+  const selectedEditorProps = useMemo161(() => {
     return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
   }, [allEditorProps, selectedComposition]);
-  const renderModalProps = useMemo160(() => {
+  const renderModalProps = useMemo161(() => {
     return renderModalComposition ? allEditorProps[renderModalComposition.id] ?? {} : {};
   }, [allEditorProps, renderModalComposition]);
   const hasResolution = Boolean(currentCompositionMetadata);
@@ -35428,13 +35490,13 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     inputProps
   ]);
   const isTheSame = selectedComposition?.id === renderModalComposition?.id;
-  const currentDefaultProps = useMemo160(() => {
+  const currentDefaultProps = useMemo161(() => {
     return {
       ...selectedComposition?.defaultProps ?? {},
       ...selectedEditorProps ?? {}
     };
   }, [selectedComposition?.defaultProps, selectedEditorProps]);
-  const originalProps = useMemo160(() => {
+  const originalProps = useMemo161(() => {
     return {
       ...currentDefaultProps,
       ...inputProps ?? {}
@@ -35503,7 +35565,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     renderModalComposition,
     renderModalProps
   ]);
-  const resolvedConfigsIncludingStaticOnes = useMemo160(() => {
+  const resolvedConfigsIncludingStaticOnes = useMemo161(() => {
     const staticComps = compositions.filter((c) => {
       return c.calculateMetadata === null;
     });