@remotion/studio 4.0.447 → 4.0.449

package/dist/esm/previewEntry.mjs

@@ -692,7 +692,7 @@ var CalculateMetadataErrorExplainer = () => {
   return /* @__PURE__ */ jsxs5("div", {
     style,
     children: [
-      "This error occured while calling",
+      "This error occurred while calling",
       " ",
       /* @__PURE__ */ jsx9("code", {
         style: inlineCodeSnippet,
@@ -2420,7 +2420,7 @@ var getErrorRecord = async (error) => {
   };
 };
 var crashWithFrames = (crash) => (error) => {
-  const didHookOrderChange = error.message.startsWith("Rendered fewer hooks") || error.message.startsWith("Rendered more hooks");
+  const didHookOrderChange = error.message.startsWith("Rendered fewer hooks") || error.message.startsWith("Rendered more hooks") || error.message.startsWith("Should have a queue");
   const key = "remotion.lastCrashBecauseOfHooks";
   const previousCrashWasBecauseOfHooks = window.localStorage.getItem(key);
   const justRefreshedBecauseOfHooks = previousCrashWasBecauseOfHooks ? Date.now() - Number(previousCrashWasBecauseOfHooks) < 5000 : false;
@@ -2740,7 +2740,7 @@ import { Internals as Internals70 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React189, { useCallback as useCallback150, useMemo as useMemo150, useState as useState100 } from "react";
+import React189, { useCallback as useCallback150, useMemo as useMemo151, useState as useState100 } from "react";
 import { Internals as Internals65 } from "remotion";
 
 // src/helpers/noop.ts
@@ -5361,6 +5361,7 @@ var SidebarRenderButton = ({ composition, visible }) => {
       renderTypeOfLastRender: null,
       defaulMetadata: defaults.metadata,
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: defaults.chromeMode,
       initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -6184,7 +6185,8 @@ var addVideoRenderJob = ({
   metadata,
   hardwareAcceleration,
   chromeMode,
-  mediaCacheSizeInBytes
+  mediaCacheSizeInBytes,
+  sampleRate
 }) => {
   return callApi("/api/render", {
     compositionId,
@@ -6231,7 +6233,8 @@ var addVideoRenderJob = ({
     metadata,
     hardwareAcceleration,
     chromeMode,
-    mediaCacheSizeInBytes
+    mediaCacheSizeInBytes,
+    sampleRate
   });
 };
 var unsubscribeFromFileExistenceWatcher = ({
@@ -17516,6 +17519,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "still",
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -17569,6 +17573,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "sequence",
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -17622,6 +17627,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "video",
       initialHardwareAcceleration: job.hardwareAcceleration,
+      initialSampleRate: job.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -19477,6 +19483,7 @@ var RenderButton = ({
       renderTypeOfLastRender: null,
       defaulMetadata: defaults.metadata,
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: defaults.chromeMode,
       initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
       renderDefaults: defaults
@@ -28436,7 +28443,7 @@ import {
   useCallback as useCallback142,
   useContext as useContext94,
   useEffect as useEffect84,
-  useMemo as useMemo142,
+  useMemo as useMemo143,
   useReducer as useReducer2,
   useRef as useRef49,
   useState as useState93
@@ -28586,6 +28593,7 @@ var makeReadOnlyStudioRenderCommand = ({
   beepOnFinish,
   repro,
   metadata,
+  sampleRate,
   envVariables,
   inputProps
 }) => {
@@ -28673,6 +28681,9 @@ var makeReadOnlyStudioRenderCommand = ({
       if (audioCodec !== defaultAudioCodec) {
         addFlagWithValue(flags, getRenderMediaFlag("audioCodec"), audioCodec);
       }
+      addValueFlagsIfChanged(flags, [
+        renderMediaValueFlag("sampleRate", sampleRate, renderDefaults.sampleRate)
+      ]);
     }
     addTrueBooleanFlagsIfChanged(flags, [
       renderMediaBooleanFlag("disallowParallelEncoding", disallowParallelEncoding, false),
@@ -30345,7 +30356,7 @@ var RenderModalAdvanced = ({
 
 // src/components/RenderModal/RenderModalAudio.tsx
 import { BrowserSafeApis as BrowserSafeApis8 } from "@remotion/renderer/client";
-import { useCallback as useCallback135 } from "react";
+import { useCallback as useCallback135, useMemo as useMemo138 } from "react";
 
 // src/components/RenderModal/EnforceAudioTrackSetting.tsx
 import { useCallback as useCallback132 } from "react";
@@ -30640,6 +30651,7 @@ var container56 = {
   flex: 1,
   overflowY: "auto"
 };
+var commonSampleRates = [8000, 16000, 22050, 44100, 48000, 96000];
 var RenderModalAudio = ({
   muted,
   setMuted,
@@ -30657,7 +30669,9 @@ var RenderModalAudio = ({
   setForSeamlessAacConcatenation,
   separateAudioTo,
   setSeparateAudioTo,
-  outName
+  outName,
+  sampleRate,
+  setSampleRate
 }) => {
   const onShouldHaveTargetAudioBitrateChanged = useCallback135((e) => {
     setShouldHaveCustomTargetAudioBitrate(e.target.checked);
@@ -30668,6 +30682,20 @@ var RenderModalAudio = ({
   const onSeamlessAacConcatenationChanges = useCallback135((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__ */ jsx266(Checkmark, {}) : null,
+      id: String(rate),
+      keyHint: null,
+      quickSwitcherLabel: null,
+      subMenu: null,
+      type: "item",
+      value: String(rate)
+    }));
+  }, [sampleRate, setSampleRate]);
   const audioCodecOptions = useCallback135((currentCodec) => {
     return BrowserSafeApis8.supportedAudioCodecs[currentCodec].map((audioCodecOption) => {
       return {
@@ -30808,6 +30836,31 @@ var RenderModalAudio = ({
             })
           })
         ]
+      }) : null,
+      renderMode !== "still" && !muted ? /* @__PURE__ */ jsxs136("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsxs136("div", {
+            style: label6,
+            children: [
+              "Sample Rate ",
+              /* @__PURE__ */ jsx266(Spacing, {
+                x: 0.5
+              }),
+              /* @__PURE__ */ jsx266(OptionExplainerBubble, {
+                id: "sampleRateOption"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx266("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx266(Combobox, {
+              values: sampleRateOptions,
+              selectedId: String(sampleRate),
+              title: "Sample Rate"
+            })
+          })
+        ]
       }) : null
     ]
   });
@@ -30816,7 +30869,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 useCallback138, useMemo as useMemo139 } from "react";
+import { useCallback as useCallback138, useMemo as useMemo140 } from "react";
 
 // src/helpers/prores-labels.ts
 var labelProResProfile = (profile) => {
@@ -30845,7 +30898,7 @@ var labelProResProfile = (profile) => {
 import { useCallback as useCallback137 } from "react";
 
 // src/components/RenderModal/MultiRangeSlider.tsx
-import { useCallback as useCallback136, useMemo as useMemo138 } from "react";
+import { useCallback as useCallback136, useMemo as useMemo139 } from "react";
 import { jsx as jsx267, jsxs as jsxs137 } from "react/jsx-runtime";
 var container57 = {
   borderColor: "black",
@@ -30875,7 +30928,7 @@ var MultiRangeSlider = ({
   onRightThumbDrag
 }) => {
   const getPercent = useCallback136((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 {
@@ -31082,7 +31135,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) => {
@@ -31100,7 +31153,7 @@ var RenderModalBasic = ({
       };
     });
   }, [renderMode, setCodec, codec]);
-  const proResProfileOptions = useMemo139(() => {
+  const proResProfileOptions = useMemo140(() => {
     return BrowserSafeApis9.proResProfileOptions.map((option) => {
       return {
         label: labelProResProfile(option),
@@ -31132,7 +31185,7 @@ var RenderModalBasic = ({
   const onValueChange = useCallback138((e) => {
     setOutName(e.target.value);
   }, [setOutName]);
-  const logLevelOptions = useMemo139(() => {
+  const logLevelOptions = useMemo140(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -31386,7 +31439,7 @@ var RenderModalGif = ({
 
 // src/components/RenderModal/RenderModalPicture.tsx
 import { BrowserSafeApis as BrowserSafeApis10 } from "@remotion/renderer/client";
-import { useCallback as useCallback141, useMemo as useMemo141 } from "react";
+import { useCallback as useCallback141, useMemo as useMemo142 } from "react";
 
 // src/components/RenderModal/JpegQualitySetting.tsx
 import { jsx as jsx272 } from "react/jsx-runtime";
@@ -31405,7 +31458,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 jsx273, jsxs as jsxs142, Fragment as Fragment46 } from "react/jsx-runtime";
 var MIN_SCALE = 0.1;
 var MAX_SCALE = 10;
@@ -31419,7 +31472,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}`;
@@ -31488,7 +31541,7 @@ var RenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const colorSpaceOptions = useMemo141(() => {
+  const colorSpaceOptions = useMemo142(() => {
     return BrowserSafeApis10.validColorSpaces.map((option) => {
       return {
         label: option,
@@ -31504,7 +31557,7 @@ var RenderModalPicture = ({
       };
     });
   }, [colorSpace, setColorSpace]);
-  const qualityControlOptions = useMemo141(() => {
+  const qualityControlOptions = useMemo142(() => {
     return qualityControlModes.map((option) => {
       return {
         label: option === "crf" ? "CRF" : "Bitrate",
@@ -31826,6 +31879,7 @@ var RenderModal = ({
   initialForSeamlessAacConcatenation,
   renderTypeOfLastRender,
   initialHardwareAcceleration,
+  initialSampleRate,
   defaultMetadata,
   initialChromeMode,
   renderDefaults
@@ -31883,6 +31937,7 @@ var RenderModal = ({
   const [repro, setRepro] = useState93(() => initialRepro);
   const [enforceAudioTrackState, setEnforceAudioTrackState] = useState93(() => initialEnforceAudioTrack);
   const [forSeamlessAacConcatenation, setForSeamlessAacConcatenation] = useState93(() => initialForSeamlessAacConcatenation);
+  const [sampleRate, setSampleRate] = useState93(() => initialSampleRate);
   const [renderMode, setRenderModeState] = useState93(initialRenderType);
   const [jpegQuality, setJpegQuality] = useState93(() => initialJpegQuality);
   const [scale, setScale] = useState93(() => initialScale);
@@ -31897,7 +31952,7 @@ var RenderModal = ({
   const [openGlOption, setOpenGlOption] = useState93(() => initialGl ?? "default");
   const [colorSpace, setColorSpace] = useState93(() => initialColorSpace);
   const [userAgent, setUserAgent] = useState93(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
-  const chromiumOptions = useMemo142(() => {
+  const chromiumOptions = useMemo143(() => {
     return {
       headless,
       disableWebSecurity,
@@ -31939,19 +31994,19 @@ var RenderModal = ({
   const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState93(initialOffthreadVideoCacheSizeInBytes);
   const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState93(initialMediaCacheSizeInBytes);
   const [offthreadVideoThreads, setOffthreadVideoThreads] = useState93(() => 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;
     }
@@ -31959,10 +32014,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";
@@ -31986,7 +32041,7 @@ var RenderModal = ({
     supportsCrf,
     supportsVideoBitrate
   ]);
-  const videoBitrate = useMemo142(() => {
+  const videoBitrate = useMemo143(() => {
     if (qualityControlType === "bitrate") {
       return customTargetVideoBitrate;
     }
@@ -31998,13 +32053,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;
     }
@@ -32013,13 +32068,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;
     }
@@ -32030,19 +32085,19 @@ var RenderModal = ({
     _setInputProps(updater);
   }, []);
   const [metadata] = useState93(() => 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]);
@@ -32163,17 +32218,17 @@ var RenderModal = ({
     mediaCacheSizeInBytes
   ]);
   const [everyNthFrameSetting, setEveryNthFrameSetting] = useState93(() => 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;
     }
@@ -32224,7 +32279,8 @@ var RenderModal = ({
       hardwareAcceleration,
       chromeMode,
       offthreadVideoThreads,
-      mediaCacheSizeInBytes
+      mediaCacheSizeInBytes,
+      sampleRate
     }).then(() => {
       dispatchIfMounted({ type: "succeed" });
       setSelectedModal(null);
@@ -32276,7 +32332,8 @@ var RenderModal = ({
     hardwareAcceleration,
     chromeMode,
     offthreadVideoThreads,
-    mediaCacheSizeInBytes
+    mediaCacheSizeInBytes,
+    sampleRate
   ]);
   const onClickSequence = useCallback142(() => {
     setSidebarCollapsedState({ left: null, right: "expanded" });
@@ -32344,7 +32401,7 @@ var RenderModal = ({
       isMounted.current = false;
     };
   }, []);
-  const imageFormatOptions = useMemo142(() => {
+  const imageFormatOptions = useMemo143(() => {
     if (renderMode === "still") {
       return [
         {
@@ -32440,7 +32497,7 @@ var RenderModal = ({
     stillImageFormat,
     videoCodecForVideoTab
   ]);
-  const renderTabOptions = useMemo142(() => {
+  const renderTabOptions = useMemo143(() => {
     if (resolvedComposition?.durationInFrames < 2) {
       return [
         {
@@ -32498,7 +32555,7 @@ var RenderModal = ({
   });
   const { tab, setTab, shownTabs } = useRenderModalSections(renderMode, codec);
   const { registerKeybinding } = useKeybinding();
-  const readOnlyRenderCommand = useMemo142(() => {
+  const readOnlyRenderCommand = useMemo143(() => {
     if (!readOnlyStudio) {
       return null;
     }
@@ -32554,6 +32611,7 @@ var RenderModal = ({
       beepOnFinish,
       repro,
       metadata,
+      sampleRate,
       envVariables: envVariablesArrayToObject(envVariables),
       inputProps
     });
@@ -32603,6 +32661,7 @@ var RenderModal = ({
     resolvedComposition.durationInFrames,
     resolvedComposition.id,
     scale,
+    sampleRate,
     separateAudioTo,
     sequenceImageFormat,
     startFrame,
@@ -32669,7 +32728,7 @@ var RenderModal = ({
       enter.unregister();
     };
   }, [registerKeybinding, renderDisabled, trigger]);
-  const pixelFormatOptions = useMemo142(() => {
+  const pixelFormatOptions = useMemo143(() => {
     return availablePixelFormats.map((option) => {
       return {
         label: option,
@@ -32879,7 +32938,9 @@ var RenderModal = ({
               setForSeamlessAacConcatenation,
               separateAudioTo,
               setSeparateAudioTo,
-              outName
+              outName,
+              sampleRate,
+              setSampleRate
             }) : tab === "gif" ? /* @__PURE__ */ jsx275(RenderModalGif, {
               everyNthFrame,
               limitNumberOfGifLoops,
@@ -32966,7 +33027,7 @@ import {
   getDefaultVideoCodecForContainer,
   isAudioOnlyContainer
 } from "@remotion/web-renderer";
-import { useCallback as useCallback146, useContext as useContext95, useMemo as useMemo147, useState as useState97 } from "react";
+import { useCallback as useCallback146, useContext as useContext95, useMemo as useMemo148, useState as useState97 } from "react";
 
 // src/icons/certificate.tsx
 import { jsx as jsx276 } from "react/jsx-runtime";
@@ -33128,7 +33189,7 @@ var WebRendererExperimentalBadge = () => {
 };
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
-import { useCallback as useCallback143, useMemo as useMemo143 } from "react";
+import { useCallback as useCallback143, useMemo as useMemo144 } from "react";
 import { jsx as jsx278, jsxs as jsxs146 } from "react/jsx-runtime";
 var tabContainer = {
   flex: 1
@@ -33166,7 +33227,7 @@ var WebRenderModalAdvanced = ({
       return cb;
     });
   }, [setMediaCacheSizeInBytes]);
-  const hardwareAccelerationOptions = useMemo143(() => {
+  const hardwareAccelerationOptions = useMemo144(() => {
     return [
       {
         label: "No Preference",
@@ -33298,7 +33359,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 jsx279 } from "react/jsx-runtime";
@@ -33371,8 +33432,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 {
@@ -33389,7 +33450,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;
@@ -33466,7 +33527,7 @@ var WebRenderModalAudio = ({
 };
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
-import { useMemo as useMemo145 } from "react";
+import { useMemo as useMemo146 } from "react";
 import { jsx as jsx281, jsxs as jsxs148, Fragment as Fragment49 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
@@ -33520,7 +33581,7 @@ var WebRenderModalBasic = ({
   logLevel,
   setLogLevel
 }) => {
-  const imageFormatOptions = useMemo145(() => {
+  const imageFormatOptions = useMemo146(() => {
     return [
       {
         label: "PNG",
@@ -33542,7 +33603,7 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [imageFormat, setStillFormat]);
-  const logLevelOptions = useMemo145(() => {
+  const logLevelOptions = useMemo146(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -33557,7 +33618,7 @@ var WebRenderModalBasic = ({
       };
     });
   }, [logLevel, setLogLevel]);
-  const containerOptions = useMemo145(() => {
+  const containerOptions = useMemo146(() => {
     const containers = renderMode === "audio" ? audioContainers : videoContainers;
     return containers.map((c) => ({
       label: containerLabels[c],
@@ -33571,7 +33632,7 @@ var WebRenderModalBasic = ({
       value: c
     }));
   }, [container62, setContainerFormat, renderMode]);
-  const codecOptions = useMemo145(() => {
+  const codecOptions = useMemo146(() => {
     return encodableVideoCodecs.map((c) => ({
       label: codecLabels[c],
       onClick: () => setCodec(c),
@@ -34161,7 +34222,7 @@ var WebRenderModalLicense = ({
 };
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
-import { useCallback as useCallback145, useMemo as useMemo146 } from "react";
+import { useCallback as useCallback145, useMemo as useMemo147 } from "react";
 import { jsx as jsx285, jsxs as jsxs151, Fragment as Fragment51 } from "react/jsx-runtime";
 var tabContainer4 = {
   flex: 1
@@ -34179,7 +34240,7 @@ var WebRenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const qualityOptions = useMemo146(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
+  const qualityOptions = useMemo147(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
   const onTransparentChanged = useCallback145((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
@@ -34352,25 +34413,25 @@ var WebRenderModal = ({
   const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState97(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container62);
   const encodableVideoCodecs = useEncodableVideoCodecs(container62);
-  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;
     }
@@ -34435,7 +34496,7 @@ var WebRenderModal = ({
       setTab((prev) => prev === "audio" ? "general" : prev);
     }
   }, [container62, imageFormat, updateOutNameExtension]);
-  const renderTabOptions = useMemo147(() => {
+  const renderTabOptions = useMemo148(() => {
     const options = [
       {
         label: "Still",
@@ -34481,7 +34542,7 @@ var WebRenderModal = ({
   const onOutNameChange = useCallback146((e) => {
     setOutName(e.target.value);
   }, []);
-  const outnameValidation = useMemo147(() => {
+  const outnameValidation = useMemo148(() => {
     if (renderMode === "still") {
       return validateOutnameForStill({
         outName,
@@ -34829,7 +34890,7 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback149, useMemo as useMemo149 } from "react";
+import { useCallback as useCallback149, useMemo as useMemo150 } from "react";
 
 // src/components/CopyButton.tsx
 import { useCallback as useCallback147, useEffect as useEffect88, useState as useState98 } from "react";
@@ -34895,7 +34956,7 @@ var CopyButton = ({ textToCopy, label: label13, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback148, useMemo as useMemo148, useState as useState99 } from "react";
+import { useCallback as useCallback148, useMemo as useMemo149, useState as useState99 } from "react";
 import { jsx as jsx288 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: "11px",
@@ -34915,7 +34976,7 @@ var OpenIssueButton = ({ link: link5 }) => {
   const handleClick = useCallback148(() => {
     window.open(link5, "_blank");
   }, [link5]);
-  const svgFillColor = useMemo148(() => {
+  const svgFillColor = useMemo149(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
   const openInEditorSvg = /* @__PURE__ */ jsx288("svg", {
@@ -35012,7 +35073,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];
@@ -35176,6 +35237,7 @@ var Modals = ({ readOnlyStudio }) => {
         renderTypeOfLastRender: modalContextType.renderTypeOfLastRender,
         defaultMetadata: modalContextType.defaulMetadata,
         initialHardwareAcceleration: modalContextType.initialHardwareAcceleration,
+        initialSampleRate: modalContextType.initialSampleRate,
         initialChromeMode: modalContextType.initialChromeMode,
         renderDefaults: modalContextType.renderDefaults
       }) : null,
@@ -35220,7 +35282,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
   const onMounted = useCallback150(() => {
     setCanvasMounted(true);
   }, []);
-  const value = useMemo150(() => {
+  const value = useMemo151(() => {
     if (!size4) {
       return null;
     }
@@ -35229,15 +35291,15 @@ var Editor = ({ Root, readOnlyStudio }) => {
       canvasSize: size4
     };
   }, [size4]);
-  const MemoRoot = useMemo150(() => {
+  const MemoRoot = useMemo151(() => {
     return React189.memo(Root);
   }, [Root]);
   const [renderError, setRenderError] = useState100(null);
   const clearError = useCallback150(() => {
     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__ */ jsx292(HigherZIndex, {
     onEscape: noop,
     onOutsideClick: noop,
@@ -35288,7 +35350,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback151, useContext as useContext97, useMemo as useMemo151, useState as useState101 } from "react";
+import { useCallback as useCallback151, useContext as useContext97, useMemo as useMemo152, useState as useState101 } from "react";
 import { Internals as Internals66 } from "remotion";
 import { jsx as jsx293 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -35324,7 +35386,7 @@ var PreviewSizeProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const previewSizeCtx = useMemo151(() => {
+  const previewSizeCtx = useMemo152(() => {
     return {
       size: editorZoomGestures ? size4 : {
         size: size4.size,
@@ -35345,7 +35407,7 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback152, useMemo as useMemo152, useState as useState102 } from "react";
+import { useCallback as useCallback152, useMemo as useMemo153, useState as useState102 } from "react";
 import { jsx as jsx294 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState102(() => loadCheckerboardOption());
@@ -35356,7 +35418,7 @@ var CheckerboardProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const checkerboardCtx = useMemo152(() => {
+  const checkerboardCtx = useMemo153(() => {
     return {
       checkerboard,
       setCheckerboard
@@ -35369,19 +35431,19 @@ var CheckerboardProvider = ({ children }) => {
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo153, useState as useState103 } from "react";
+import { useMemo as useMemo154, useState as useState103 } from "react";
 import { Internals as Internals67 } from "remotion";
 import { jsx as jsx295 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
   const [mediaMuted, setMediaMuted] = useState103(() => loadMuteOption());
   const [mediaVolume, setMediaVolume] = useState103(1);
-  const mediaVolumeContextValue = useMemo153(() => {
+  const mediaVolumeContextValue = useMemo154(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeContextValue = useMemo153(() => {
+  const setMediaVolumeContextValue = useMemo154(() => {
     return {
       setMediaMuted,
       setMediaVolume
@@ -35397,11 +35459,11 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo154, useState as useState104 } from "react";
+import { useMemo as useMemo155, useState as useState104 } from "react";
 import { jsx as jsx296 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
   const [modalContextType, setModalContextType] = useState104(null);
-  const modalsContext = useMemo154(() => {
+  const modalsContext = useMemo155(() => {
     return {
       selectedModal: modalContextType,
       setSelectedModal: setModalContextType
@@ -35414,7 +35476,7 @@ var ModalsProvider = ({ children }) => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect89, useMemo as useMemo155, useState as useState105 } from "react";
+import { useEffect as useEffect89, useMemo as useMemo156, useState as useState105 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -35433,7 +35495,7 @@ var loadMarks = () => {
 import { jsx as jsx297 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
   const [inAndOutFrames, setInAndOutFrames] = useState105(() => loadMarks());
-  const setTimelineInOutContextValue = useMemo155(() => {
+  const setTimelineInOutContextValue = useMemo156(() => {
     return {
       setInAndOutFrames
     };
@@ -35451,7 +35513,7 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback153, useMemo as useMemo156, useRef as useRef52, useState as useState106 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo157, useRef as useRef52, useState as useState106 } from "react";
 import { jsx as jsx298 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState106(() => loadGuidesList());
@@ -35467,7 +35529,7 @@ var ShowGuidesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowGuidesCtx = useMemo156(() => {
+  const editorShowGuidesCtx = useMemo157(() => {
     return {
       editorShowGuides,
       setEditorShowGuides,
@@ -35494,7 +35556,7 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback154, useMemo as useMemo157, useState as useState107 } from "react";
+import { useCallback as useCallback154, useMemo as useMemo158, useState as useState107 } from "react";
 import { jsx as jsx299 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState107(() => loadEditorShowRulersOption());
@@ -35505,7 +35567,7 @@ var ShowRulersProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowRulersCtx = useMemo157(() => {
+  const editorShowRulersCtx = useMemo158(() => {
     return {
       editorShowRulers,
       setEditorShowRulers
@@ -35537,7 +35599,7 @@ var VisualControlsUndoSync = () => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback155, useMemo as useMemo158, useState as useState108 } from "react";
+import { useCallback as useCallback155, useMemo as useMemo159, useState as useState108 } from "react";
 import { jsx as jsx300 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState108(() => loadEditorZoomGesturesOption());
@@ -35548,7 +35610,7 @@ var ZoomGesturesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorZoomGesturesCtx = useMemo158(() => {
+  const editorZoomGesturesCtx = useMemo159(() => {
     return {
       editorZoomGestures,
       setEditorZoomGestures
@@ -35685,7 +35747,7 @@ var ServerDisconnected = () => {
 };
 
 // src/FastRefreshProvider.tsx
-import { useCallback as useCallback156, useEffect as useEffect91, useMemo as useMemo159, useState as useState109 } from "react";
+import { useCallback as useCallback156, useEffect as useEffect91, useMemo as useMemo160, useState as useState109 } from "react";
 import { jsx as jsx303 } from "react/jsx-runtime";
 var FastRefreshProvider = ({ children }) => {
   const [fastRefreshes, setFastRefreshes] = useState109(0);
@@ -35704,7 +35766,7 @@ var FastRefreshProvider = ({ children }) => {
       }
     }
   }, []);
-  const value = useMemo159(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
+  const value = useMemo160(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
   return /* @__PURE__ */ jsx303(FastRefreshContext.Provider, {
     value,
     children
@@ -35879,7 +35941,7 @@ import {
   useContext as useContext100,
   useEffect as useEffect92,
   useImperativeHandle as useImperativeHandle15,
-  useMemo as useMemo160,
+  useMemo as useMemo161,
   useState as useState110
 } from "react";
 import { getInputProps as getInputProps2, Internals as Internals69 } from "remotion";
@@ -35889,20 +35951,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] = useState110({});
-  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);
@@ -36039,13 +36101,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 ?? {}
@@ -36114,7 +36176,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     renderModalComposition,
     renderModalProps
   ]);
-  const resolvedConfigsIncludingStaticOnes = useMemo160(() => {
+  const resolvedConfigsIncludingStaticOnes = useMemo161(() => {
     const staticComps = compositions.filter((c) => {
       return c.calculateMetadata === null;
     });