@remotion/studio 4.0.447 → 4.0.448

package/dist/esm/internals.mjs

@@ -29,7 +29,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
@@ -3131,6 +3131,7 @@ var SidebarRenderButton = ({ composition, visible }) => {
       renderTypeOfLastRender: null,
       defaulMetadata: defaults.metadata,
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: defaults.chromeMode,
       initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -3954,7 +3955,8 @@ var addVideoRenderJob = ({
   metadata,
   hardwareAcceleration,
   chromeMode,
-  mediaCacheSizeInBytes
+  mediaCacheSizeInBytes,
+  sampleRate
 }) => {
   return callApi("/api/render", {
     compositionId,
@@ -4001,7 +4003,8 @@ var addVideoRenderJob = ({
     metadata,
     hardwareAcceleration,
     chromeMode,
-    mediaCacheSizeInBytes
+    mediaCacheSizeInBytes,
+    sampleRate
   });
 };
 var unsubscribeFromFileExistenceWatcher = ({
@@ -16924,6 +16927,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "still",
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -16977,6 +16981,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "sequence",
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -17030,6 +17035,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "video",
       initialHardwareAcceleration: job.hardwareAcceleration,
+      initialSampleRate: job.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -18885,6 +18891,7 @@ var RenderButton = ({
       renderTypeOfLastRender: null,
       defaulMetadata: defaults.metadata,
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: defaults.chromeMode,
       initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
       renderDefaults: defaults
@@ -27844,7 +27851,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
@@ -27994,6 +28001,7 @@ var makeReadOnlyStudioRenderCommand = ({
   beepOnFinish,
   repro,
   metadata,
+  sampleRate,
   envVariables,
   inputProps
 }) => {
@@ -28081,6 +28089,9 @@ var makeReadOnlyStudioRenderCommand = ({
       if (audioCodec !== defaultAudioCodec) {
         addFlagWithValue(flags, getRenderMediaFlag("audioCodec"), audioCodec);
       }
+      addValueFlagsIfChanged(flags, [
+        renderMediaValueFlag("sampleRate", sampleRate, renderDefaults.sampleRate)
+      ]);
     }
     addTrueBooleanFlagsIfChanged(flags, [
       renderMediaBooleanFlag("disallowParallelEncoding", disallowParallelEncoding, false),
@@ -29753,7 +29764,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";
@@ -30048,6 +30059,7 @@ var container55 = {
   flex: 1,
   overflowY: "auto"
 };
+var commonSampleRates = [8000, 16000, 22050, 44100, 48000, 96000];
 var RenderModalAudio = ({
   muted,
   setMuted,
@@ -30065,7 +30077,9 @@ var RenderModalAudio = ({
   setForSeamlessAacConcatenation,
   separateAudioTo,
   setSeparateAudioTo,
-  outName
+  outName,
+  sampleRate,
+  setSampleRate
 }) => {
   const onShouldHaveTargetAudioBitrateChanged = useCallback134((e) => {
     setShouldHaveCustomTargetAudioBitrate(e.target.checked);
@@ -30076,6 +30090,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 {
@@ -30216,6 +30244,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
     ]
   });
@@ -30224,7 +30277,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) => {
@@ -30253,7 +30306,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",
@@ -30283,7 +30336,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 {
@@ -30490,7 +30543,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) => {
@@ -30508,7 +30561,7 @@ var RenderModalBasic = ({
       };
     });
   }, [renderMode, setCodec, codec]);
-  const proResProfileOptions = useMemo139(() => {
+  const proResProfileOptions = useMemo140(() => {
     return BrowserSafeApis9.proResProfileOptions.map((option) => {
       return {
         label: labelProResProfile(option),
@@ -30540,7 +30593,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),
@@ -30794,7 +30847,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";
@@ -30813,7 +30866,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;
@@ -30827,7 +30880,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}`;
@@ -30896,7 +30949,7 @@ var RenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const colorSpaceOptions = useMemo141(() => {
+  const colorSpaceOptions = useMemo142(() => {
     return BrowserSafeApis10.validColorSpaces.map((option) => {
       return {
         label: option,
@@ -30912,7 +30965,7 @@ var RenderModalPicture = ({
       };
     });
   }, [colorSpace, setColorSpace]);
-  const qualityControlOptions = useMemo141(() => {
+  const qualityControlOptions = useMemo142(() => {
     return qualityControlModes.map((option) => {
       return {
         label: option === "crf" ? "CRF" : "Bitrate",
@@ -31234,6 +31287,7 @@ var RenderModal = ({
   initialForSeamlessAacConcatenation,
   renderTypeOfLastRender,
   initialHardwareAcceleration,
+  initialSampleRate,
   defaultMetadata,
   initialChromeMode,
   renderDefaults
@@ -31291,6 +31345,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);
@@ -31305,7 +31360,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,
@@ -31347,19 +31402,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;
     }
@@ -31367,10 +31422,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";
@@ -31394,7 +31449,7 @@ var RenderModal = ({
     supportsCrf,
     supportsVideoBitrate
   ]);
-  const videoBitrate = useMemo142(() => {
+  const videoBitrate = useMemo143(() => {
     if (qualityControlType === "bitrate") {
       return customTargetVideoBitrate;
     }
@@ -31406,13 +31461,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;
     }
@@ -31421,13 +31476,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;
     }
@@ -31438,19 +31493,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]);
@@ -31571,17 +31626,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;
     }
@@ -31632,7 +31687,8 @@ var RenderModal = ({
       hardwareAcceleration,
       chromeMode,
       offthreadVideoThreads,
-      mediaCacheSizeInBytes
+      mediaCacheSizeInBytes,
+      sampleRate
     }).then(() => {
       dispatchIfMounted({ type: "succeed" });
       setSelectedModal(null);
@@ -31684,7 +31740,8 @@ var RenderModal = ({
     hardwareAcceleration,
     chromeMode,
     offthreadVideoThreads,
-    mediaCacheSizeInBytes
+    mediaCacheSizeInBytes,
+    sampleRate
   ]);
   const onClickSequence = useCallback141(() => {
     setSidebarCollapsedState({ left: null, right: "expanded" });
@@ -31752,7 +31809,7 @@ var RenderModal = ({
       isMounted.current = false;
     };
   }, []);
-  const imageFormatOptions = useMemo142(() => {
+  const imageFormatOptions = useMemo143(() => {
     if (renderMode === "still") {
       return [
         {
@@ -31848,7 +31905,7 @@ var RenderModal = ({
     stillImageFormat,
     videoCodecForVideoTab
   ]);
-  const renderTabOptions = useMemo142(() => {
+  const renderTabOptions = useMemo143(() => {
     if (resolvedComposition?.durationInFrames < 2) {
       return [
         {
@@ -31906,7 +31963,7 @@ var RenderModal = ({
   });
   const { tab, setTab, shownTabs } = useRenderModalSections(renderMode, codec);
   const { registerKeybinding } = useKeybinding();
-  const readOnlyRenderCommand = useMemo142(() => {
+  const readOnlyRenderCommand = useMemo143(() => {
     if (!readOnlyStudio) {
       return null;
     }
@@ -31962,6 +32019,7 @@ var RenderModal = ({
       beepOnFinish,
       repro,
       metadata,
+      sampleRate,
       envVariables: envVariablesArrayToObject(envVariables),
       inputProps
     });
@@ -32011,6 +32069,7 @@ var RenderModal = ({
     resolvedComposition.durationInFrames,
     resolvedComposition.id,
     scale,
+    sampleRate,
     separateAudioTo,
     sequenceImageFormat,
     startFrame,
@@ -32077,7 +32136,7 @@ var RenderModal = ({
       enter.unregister();
     };
   }, [registerKeybinding, renderDisabled, trigger]);
-  const pixelFormatOptions = useMemo142(() => {
+  const pixelFormatOptions = useMemo143(() => {
     return availablePixelFormats.map((option) => {
       return {
         label: option,
@@ -32287,7 +32346,9 @@ var RenderModal = ({
               setForSeamlessAacConcatenation,
               separateAudioTo,
               setSeparateAudioTo,
-              outName
+              outName,
+              sampleRate,
+              setSampleRate
             }) : tab === "gif" ? /* @__PURE__ */ jsx272(RenderModalGif, {
               everyNthFrame,
               limitNumberOfGifLoops,
@@ -32374,7 +32435,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";
@@ -32536,7 +32597,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
@@ -32574,7 +32635,7 @@ var WebRenderModalAdvanced = ({
       return cb;
     });
   }, [setMediaCacheSizeInBytes]);
-  const hardwareAccelerationOptions = useMemo143(() => {
+  const hardwareAccelerationOptions = useMemo144(() => {
     return [
       {
         label: "No Preference",
@@ -32706,7 +32767,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";
@@ -32779,8 +32840,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 {
@@ -32797,7 +32858,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;
@@ -32874,7 +32935,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
@@ -32928,7 +32989,7 @@ var WebRenderModalBasic = ({
   logLevel,
   setLogLevel
 }) => {
-  const imageFormatOptions = useMemo145(() => {
+  const imageFormatOptions = useMemo146(() => {
     return [
       {
         label: "PNG",
@@ -32950,7 +33011,7 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [imageFormat, setStillFormat]);
-  const logLevelOptions = useMemo145(() => {
+  const logLevelOptions = useMemo146(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -32965,7 +33026,7 @@ var WebRenderModalBasic = ({
       };
     });
   }, [logLevel, setLogLevel]);
-  const containerOptions = useMemo145(() => {
+  const containerOptions = useMemo146(() => {
     const containers = renderMode === "audio" ? audioContainers : videoContainers;
     return containers.map((c) => ({
       label: containerLabels[c],
@@ -32979,7 +33040,7 @@ var WebRenderModalBasic = ({
       value: c
     }));
   }, [container61, setContainerFormat, renderMode]);
-  const codecOptions = useMemo145(() => {
+  const codecOptions = useMemo146(() => {
     return encodableVideoCodecs.map((c) => ({
       label: codecLabels[c],
       onClick: () => setCodec(c),
@@ -33569,7 +33630,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
@@ -33587,7 +33648,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]);
@@ -33760,25 +33821,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;
     }
@@ -33843,7 +33904,7 @@ var WebRenderModal = ({
       setTab((prev) => prev === "audio" ? "general" : prev);
     }
   }, [container61, imageFormat, updateOutNameExtension]);
-  const renderTabOptions = useMemo147(() => {
+  const renderTabOptions = useMemo148(() => {
     const options = [
       {
         label: "Still",
@@ -33889,7 +33950,7 @@ var WebRenderModal = ({
   const onOutNameChange = useCallback145((e) => {
     setOutName(e.target.value);
   }, []);
-  const outnameValidation = useMemo147(() => {
+  const outnameValidation = useMemo148(() => {
     if (renderMode === "still") {
       return validateOutnameForStill({
         outName,
@@ -34237,7 +34298,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";
@@ -34303,7 +34364,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",
@@ -34323,7 +34384,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", {
@@ -34420,7 +34481,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];
@@ -34584,6 +34645,7 @@ var Modals = ({ readOnlyStudio }) => {
         renderTypeOfLastRender: modalContextType.renderTypeOfLastRender,
         defaultMetadata: modalContextType.defaulMetadata,
         initialHardwareAcceleration: modalContextType.initialHardwareAcceleration,
+        initialSampleRate: modalContextType.initialSampleRate,
         initialChromeMode: modalContextType.initialChromeMode,
         renderDefaults: modalContextType.renderDefaults
       }) : null,
@@ -34628,7 +34690,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
   const onMounted = useCallback149(() => {
     setCanvasMounted(true);
   }, []);
-  const value = useMemo150(() => {
+  const value = useMemo151(() => {
     if (!size4) {
       return null;
     }
@@ -34637,15 +34699,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,
@@ -34696,7 +34758,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";
@@ -34732,7 +34794,7 @@ var PreviewSizeProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const previewSizeCtx = useMemo151(() => {
+  const previewSizeCtx = useMemo152(() => {
     return {
       size: editorZoomGestures ? size4 : {
         size: size4.size,
@@ -34753,7 +34815,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());
@@ -34764,7 +34826,7 @@ var CheckerboardProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const checkerboardCtx = useMemo152(() => {
+  const checkerboardCtx = useMemo153(() => {
     return {
       checkerboard,
       setCheckerboard
@@ -34777,19 +34839,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
@@ -34805,11 +34867,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
@@ -34822,7 +34884,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`;
@@ -34841,7 +34903,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
     };
@@ -34859,7 +34921,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());
@@ -34875,7 +34937,7 @@ var ShowGuidesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowGuidesCtx = useMemo156(() => {
+  const editorShowGuidesCtx = useMemo157(() => {
     return {
       editorShowGuides,
       setEditorShowGuides,
@@ -34902,7 +34964,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());
@@ -34913,7 +34975,7 @@ var ShowRulersProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowRulersCtx = useMemo157(() => {
+  const editorShowRulersCtx = useMemo158(() => {
     return {
       editorShowRulers,
       setEditorShowRulers
@@ -34945,7 +35007,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());
@@ -34956,7 +35018,7 @@ var ZoomGesturesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorZoomGesturesCtx = useMemo158(() => {
+  const editorZoomGesturesCtx = useMemo159(() => {
     return {
       editorZoomGestures,
       setEditorZoomGestures
@@ -35093,7 +35155,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);
@@ -35112,7 +35174,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
@@ -35287,7 +35349,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";
@@ -35297,20 +35359,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);
@@ -35447,13 +35509,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 ?? {}
@@ -35522,7 +35584,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     renderModalComposition,
     renderModalProps
   ]);
-  const resolvedConfigsIncludingStaticOnes = useMemo160(() => {
+  const resolvedConfigsIncludingStaticOnes = useMemo161(() => {
     const staticComps = compositions.filter((c) => {
       return c.calculateMetadata === null;
     });