@remotion/studio 4.0.394 → 4.0.396

package/dist/esm/internals.mjs

@@ -29,7 +29,7 @@ import { Internals as Internals66 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
-import React175, { useCallback as useCallback135, useEffect as useEffect78, useMemo as useMemo135 } from "react";
+import React175, { useCallback as useCallback134, useEffect as useEffect78, useMemo as useMemo135 } from "react";
 import { Internals as Internals62 } from "remotion";
 
 // src/helpers/colors.ts
@@ -17967,6 +17967,10 @@ var TriggerWebRender = () => {
     if (!video?.id) {
       return null;
     }
+    const defaults = window.remotion_renderDefaults;
+    if (!defaults) {
+      throw new TypeError("Expected defaults");
+    }
     const frame2 = getCurrentFrame2();
     setSelectedModal({
       type: "web-render",
@@ -17974,7 +17978,8 @@ var TriggerWebRender = () => {
       compositionId: video.id,
       defaultProps: video.defaultProps,
       inFrameMark: inFrame,
-      outFrameMark: outFrame
+      outFrameMark: outFrame,
+      initialLogLevel: defaults.logLevel
     });
   }, [
     getCurrentFrame2,
@@ -20492,7 +20497,7 @@ var getTimelineSequenceLayout = ({
 // src/helpers/use-max-media-duration.ts
 import { getVideoMetadata as getVideoMetadata2 } from "@remotion/media-utils";
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/misc.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -20756,6 +20761,19 @@ var getUint24 = (view, byteOffset, littleEndian) => {
     return byte1 << 16 | byte2 << 8 | byte3;
   }
 };
+var setUint24 = (view, byteOffset, value, littleEndian) => {
+  value = value >>> 0;
+  value = value & 16777215;
+  if (littleEndian) {
+    view.setUint8(byteOffset, value & 255);
+    view.setUint8(byteOffset + 1, value >>> 8 & 255);
+    view.setUint8(byteOffset + 2, value >>> 16 & 255);
+  } else {
+    view.setUint8(byteOffset, value >>> 16 & 255);
+    view.setUint8(byteOffset + 1, value >>> 8 & 255);
+    view.setUint8(byteOffset + 2, value & 255);
+  }
+};
 var clamp = (value, min, max) => {
   return Math.max(min, Math.min(max, value));
 };
@@ -20909,7 +20927,7 @@ var isNumber = (x) => {
   return typeof x === "number" && !Number.isNaN(x);
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/metadata.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/metadata.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -20960,7 +20978,7 @@ var DEFAULT_TRACK_DISPOSITION = {
   visuallyImpaired: false
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/codec.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/codec.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -21234,7 +21252,7 @@ var parsePcmCodec = (codec) => {
   return { dataType, sampleSize, littleEndian, silentValue };
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/codec-data.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/codec-data.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -21337,6 +21355,45 @@ var removeEmulationPreventionBytes = (data) => {
   }
   return new Uint8Array(result);
 };
+var ANNEX_B_START_CODE = new Uint8Array([0, 0, 0, 1]);
+var concatNalUnitsInAnnexB = (nalUnits) => {
+  const totalLength = nalUnits.reduce((a, b) => a + ANNEX_B_START_CODE.byteLength + b.byteLength, 0);
+  const result = new Uint8Array(totalLength);
+  let offset = 0;
+  for (const nalUnit of nalUnits) {
+    result.set(ANNEX_B_START_CODE, offset);
+    offset += ANNEX_B_START_CODE.byteLength;
+    result.set(nalUnit, offset);
+    offset += nalUnit.byteLength;
+  }
+  return result;
+};
+var concatNalUnitsInLengthPrefixed = (nalUnits, lengthSize) => {
+  const totalLength = nalUnits.reduce((a, b) => a + lengthSize + b.byteLength, 0);
+  const result = new Uint8Array(totalLength);
+  let offset = 0;
+  for (const nalUnit of nalUnits) {
+    const dataView = new DataView(result.buffer, result.byteOffset, result.byteLength);
+    switch (lengthSize) {
+      case 1:
+        dataView.setUint8(offset, nalUnit.byteLength);
+        break;
+      case 2:
+        dataView.setUint16(offset, nalUnit.byteLength, false);
+        break;
+      case 3:
+        setUint24(dataView, offset, nalUnit.byteLength, false);
+        break;
+      case 4:
+        dataView.setUint32(offset, nalUnit.byteLength, false);
+        break;
+    }
+    offset += lengthSize;
+    result.set(nalUnit, offset);
+    offset += nalUnit.byteLength;
+  }
+  return result;
+};
 var extractAvcNalUnits = (packetData, decoderConfig) => {
   if (decoderConfig.description) {
     const bytes = toUint8Array(decoderConfig.description);
@@ -21347,6 +21404,16 @@ var extractAvcNalUnits = (packetData, decoderConfig) => {
     return findNalUnitsInAnnexB(packetData);
   }
 };
+var concatAvcNalUnits = (nalUnits, decoderConfig) => {
+  if (decoderConfig.description) {
+    const bytes = toUint8Array(decoderConfig.description);
+    const lengthSizeMinusOne = bytes[4] & 3;
+    const lengthSize = lengthSizeMinusOne + 1;
+    return concatNalUnitsInLengthPrefixed(nalUnits, lengthSize);
+  } else {
+    return concatNalUnitsInAnnexB(nalUnits);
+  }
+};
 var extractNalUnitTypeForAvc = (data) => {
   return data[0] & 31;
 };
@@ -22602,7 +22669,7 @@ var readVorbisComments = (bytes, metadataTags) => {
   }
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -22617,7 +22684,7 @@ class Demuxer {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/custom-coder.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/custom-coder.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -22628,7 +22695,7 @@ class Demuxer {
 var customVideoDecoders = [];
 var customAudioDecoders = [];
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/packet.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/packet.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -22760,7 +22827,7 @@ class EncodedPacket {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/sample.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/sample.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -23436,7 +23503,7 @@ var getPlaneConfigs = (format) => {
 };
 var AUDIO_SAMPLE_FORMATS = new Set(["f32", "f32-planar", "s16", "s16-planar", "s32", "s32-planar", "u8", "u8-planar"]);
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/media-sink.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/media-sink.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -24035,7 +24102,6 @@ class VideoDecoderWrapper extends DecoderWrapper {
       }
       this.raslSkipped = true;
     }
-    this.currentPacketIndex++;
     if (this.customDecoder) {
       this.customDecoderQueueSize++;
       this.customDecoderCallSerializer.call(() => this.customDecoder.decode(packet)).then(() => this.customDecoderQueueSize--);
@@ -24044,9 +24110,19 @@ class VideoDecoderWrapper extends DecoderWrapper {
       if (!isWebKit()) {
         insertSorted(this.inputTimestamps, packet.timestamp, (x) => x);
       }
+      if (isChromium() && this.currentPacketIndex === 0 && this.codec === "avc") {
+        const nalUnits = extractAvcNalUnits(packet.data, this.decoderConfig);
+        const filteredNalUnits = nalUnits.filter((x) => {
+          const type = extractNalUnitTypeForAvc(x);
+          return !(type >= 20 && type <= 31);
+        });
+        const newData = concatAvcNalUnits(filteredNalUnits, this.decoderConfig);
+        packet = new EncodedPacket(newData, packet.type, packet.timestamp, packet.duration);
+      }
       this.decoder.decode(packet.toEncodedVideoChunk());
       this.decodeAlphaData(packet);
     }
+    this.currentPacketIndex++;
   }
   decodeAlphaData(packet) {
     if (!packet.sideData.alpha || this.mergerCreationFailed) {
@@ -24381,7 +24457,7 @@ class VideoSampleSink extends BaseMediaSampleSink {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/input-track.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/input-track.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -24590,7 +24666,7 @@ class InputAudioTrack extends InputTrack {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-misc.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -24608,7 +24684,7 @@ var buildIsobmffMimeType = (info) => {
   return string;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-reader.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-reader.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -24684,7 +24760,7 @@ var readDataBox = (slice) => {
   }
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -26962,7 +27038,7 @@ var sampleTableIsEmpty = (sampleTable) => {
   return sampleTable.sampleSizes.length === 0;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/matroska/ebml.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/matroska/ebml.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -27277,7 +27353,7 @@ function assertDefinedSize(size4) {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/matroska/matroska-misc.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/matroska/matroska-misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -27295,7 +27371,7 @@ var buildMatroskaMimeType = (info) => {
   return string;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/matroska/matroska-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/matroska/matroska-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -29174,7 +29250,7 @@ class MatroskaAudioTrackBacking extends MatroskaTrackBacking {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/shared/mp3-misc.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/shared/mp3-misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -29416,7 +29492,7 @@ var decodeSynchsafe = (synchsafed) => {
   return unsynchsafed;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/id3.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/id3.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -30116,7 +30192,7 @@ class Id3V2Reader {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/mp3/mp3-reader.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/mp3/mp3-reader.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -30142,7 +30218,7 @@ var readNextFrameHeader = async (reader, startPos, until) => {
   return null;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/mp3/mp3-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/mp3/mp3-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -30407,7 +30483,7 @@ class Mp3AudioTrackBacking {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/ogg/ogg-misc.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/ogg/ogg-misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -30478,7 +30554,7 @@ var buildOggMimeType = (info) => {
   return string;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/ogg/ogg-reader.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/ogg/ogg-reader.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -30542,7 +30618,7 @@ var findNextPageHeader = (slice, until) => {
   return false;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/ogg/ogg-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/ogg/ogg-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -31202,7 +31278,7 @@ var findPreviousPacketEndPosition = (pageList, startPage, startSegmentIndex) =>
   return { page: previousPage, segmentIndex: previousPage.lacingValues.length - 1 };
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/wave/wave-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/wave/wave-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -31623,7 +31699,7 @@ class WaveAudioTrackBacking {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/adts/adts-reader.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/adts/adts-reader.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -31684,7 +31760,7 @@ var readFrameHeader2 = (slice) => {
   };
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/adts/adts-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/adts/adts-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -31905,7 +31981,7 @@ class AdtsAudioTrackBacking {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/flac/flac-misc.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/flac/flac-misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -32040,7 +32116,7 @@ var calculateCrc8 = (data) => {
   return crc;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/flac/flac-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/flac/flac-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -32464,7 +32540,7 @@ class FlacAudioTrackBacking {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/input-format.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/input-format.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -32786,7 +32862,7 @@ var ADTS = /* @__PURE__ */ new AdtsInputFormat;
 var FLAC = /* @__PURE__ */ new FlacInputFormat;
 var ALL_FORMATS = [MP4, QTFF, MATROSKA, WEBM, WAVE, OGG, FLAC, MP3, ADTS];
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/source.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/source.js
 var nodeAlias = (() => ({}));
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
@@ -32953,7 +33029,7 @@ class UrlSource extends Source {
           }
         }
         if (worker.aborted) {
-          break;
+          continue;
         }
         const { done, value } = readResult;
         if (done) {
@@ -32967,11 +33043,7 @@ class UrlSource extends Source {
         this.onread?.(worker.currentPos, worker.currentPos + value.length);
         this._orchestrator.supplyWorkerData(worker, value);
       }
-      if (worker.aborted) {
-        break;
-      }
     }
-    worker.running = false;
   }
   _getTotalLengthFromRangeResponse(response) {
     const contentRange = response.headers.get("Content-Range");
@@ -33324,7 +33396,7 @@ class ReadOrchestrator {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/input.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/input.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -33431,7 +33503,7 @@ class InputDisposedError extends Error {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/reader.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/reader.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -33649,7 +33721,7 @@ var readAscii = (slice, length) => {
   }
   return str;
 };
-// ../../node_modules/.bun/mediabunny@1.27.0/node_modules/mediabunny/dist/modules/src/index.js
+// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/index.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -39993,6 +40065,26 @@ var humanReadableCodec = (codec) => {
   throw new TypeError(`Got unexpected codec "${codec}"`);
 };
 
+// src/components/RenderModal/human-readable-loglevel.ts
+var humanReadableLogLevel = (logLevel) => {
+  if (logLevel === "trace") {
+    return "Trace";
+  }
+  if (logLevel === "verbose") {
+    return "Verbose";
+  }
+  if (logLevel === "info") {
+    return "Info";
+  }
+  if (logLevel === "warn") {
+    return "Warn";
+  }
+  if (logLevel === "error") {
+    return "Error";
+  }
+  throw new TypeError(`Got unexpected log level "${logLevel}"`);
+};
+
 // src/components/RenderModal/RenderModalBasic.tsx
 import { jsx as jsx250, jsxs as jsxs129 } from "react/jsx-runtime";
 var container56 = {
@@ -40069,9 +40161,21 @@ var RenderModalBasic = ({
   const onValueChange = useCallback123((e) => {
     setOutName(e.target.value);
   }, [setOutName]);
-  const onVerboseLoggingChanged = useCallback123((e) => {
-    setVerboseLogging(e.target.checked ? "verbose" : "info");
-  }, [setVerboseLogging]);
+  const logLevelOptions = useMemo125(() => {
+    return ["trace", "verbose", "info", "warn", "error"].map((level) => {
+      return {
+        label: humanReadableLogLevel(level),
+        onClick: () => setVerboseLogging(level),
+        leftItem: logLevel === level ? /* @__PURE__ */ jsx250(Checkmark, {}) : null,
+        id: level,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: "item",
+        value: level
+      };
+    });
+  }, [logLevel, setVerboseLogging]);
   return /* @__PURE__ */ jsxs129("div", {
     style: container56,
     children: [
@@ -40179,7 +40283,7 @@ var RenderModalBasic = ({
           /* @__PURE__ */ jsxs129("div", {
             style: label5,
             children: [
-              "Verbose logging ",
+              "Log Level ",
               /* @__PURE__ */ jsx250(Spacing, {
                 x: 0.5
               }),
@@ -40190,10 +40294,10 @@ var RenderModalBasic = ({
           }),
           /* @__PURE__ */ jsx250("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx250(Checkbox, {
-              checked: logLevel === "verbose",
-              onChange: onVerboseLoggingChanged,
-              name: "verbose-logging"
+            children: /* @__PURE__ */ jsx250(Combobox, {
+              values: logLevelOptions,
+              selectedId: logLevel,
+              title: "Log Level"
             })
           })
         ]
@@ -41915,7 +42019,7 @@ var RenderModalWithLoader = (props) => {
 // src/components/RenderModal/WebRenderModal.tsx
 import { getDefaultOutLocation as getDefaultOutLocation2 } from "@remotion/studio-shared";
 import { renderMediaOnWeb, renderStillOnWeb } from "@remotion/web-renderer";
-import { useCallback as useCallback131, useContext as useContext83, useMemo as useMemo132, useState as useState80 } from "react";
+import { useCallback as useCallback130, useContext as useContext83, useMemo as useMemo132, useState as useState80 } from "react";
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
 import { useCallback as useCallback128, useMemo as useMemo129 } from "react";
@@ -42057,7 +42161,7 @@ var WebRenderModalAdvanced = ({
 };
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
-import { useCallback as useCallback129, useMemo as useMemo130 } from "react";
+import { useMemo as useMemo130 } from "react";
 import { jsx as jsx258, jsxs as jsxs136, Fragment as Fragment44 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
@@ -42106,6 +42210,21 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [imageFormat, setStillFormat]);
+  const logLevelOptions = useMemo130(() => {
+    return ["trace", "verbose", "info", "warn", "error"].map((level) => {
+      return {
+        label: humanReadableLogLevel(level),
+        onClick: () => setLogLevel(level),
+        leftItem: logLevel === level ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
+        id: level,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: "item",
+        value: level
+      };
+    });
+  }, [logLevel, setLogLevel]);
   const containerOptions = useMemo130(() => {
     return [
       {
@@ -42191,9 +42310,6 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [codec, setCodec]);
-  const onVerboseLoggingChanged = useCallback129((e) => {
-    setLogLevel(e.target.checked ? "verbose" : "info");
-  }, [setLogLevel]);
   return /* @__PURE__ */ jsxs136("div", {
     style: tabContainer2,
     children: [
@@ -42309,7 +42425,7 @@ var WebRenderModalBasic = ({
           /* @__PURE__ */ jsxs136("div", {
             style: label5,
             children: [
-              "Verbose logging ",
+              "Log Level ",
               /* @__PURE__ */ jsx258(Spacing, {
                 x: 0.5
               }),
@@ -42320,10 +42436,10 @@ var WebRenderModalBasic = ({
           }),
           /* @__PURE__ */ jsx258("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx258(Checkbox, {
-              checked: logLevel === "verbose",
-              onChange: onVerboseLoggingChanged,
-              name: "verbose-logging"
+            children: /* @__PURE__ */ jsx258(Combobox, {
+              values: logLevelOptions,
+              selectedId: logLevel,
+              title: "Log Level"
             })
           })
         ]
@@ -42333,7 +42449,7 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
-import { useCallback as useCallback130, useMemo as useMemo131 } from "react";
+import { useCallback as useCallback129, useMemo as useMemo131 } from "react";
 import { jsx as jsx259, jsxs as jsxs137 } from "react/jsx-runtime";
 var tabContainer3 = {
   flex: 1
@@ -42406,7 +42522,7 @@ var WebRenderModalPicture = ({
       }
     ];
   }, [videoBitrate, setVideoBitrate]);
-  const onTransparentChanged = useCallback130((e) => {
+  const onTransparentChanged = useCallback129((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
   if (renderMode !== "video") {
@@ -42511,7 +42627,8 @@ var WebRenderModal = ({
   initialFrame,
   defaultProps,
   inFrameMark,
-  outFrameMark
+  outFrameMark,
+  initialLogLevel
 }) => {
   const context = useContext83(ResolvedCompositionContext);
   if (!context) {
@@ -42521,11 +42638,14 @@ var WebRenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const [renderMode, setRenderMode] = useState80("video");
+  const [isVideo] = useState80(() => {
+    return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
+  });
+  const [renderMode, setRenderMode] = useState80(isVideo ? "video" : "still");
   const [tab, setTab] = useState80("general");
   const [imageFormat, setImageFormat] = useState80("png");
   const [frame2, setFrame] = useState80(() => initialFrame);
-  const [logLevel, setLogLevel] = useState80("info");
+  const [logLevel, setLogLevel] = useState80(() => initialLogLevel);
   const [inputProps, setInputProps] = useState80(() => defaultProps);
   const [delayRenderTimeout, setDelayRenderTimeout] = useState80(30000);
   const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState80(null);
@@ -42560,28 +42680,28 @@ var WebRenderModal = ({
   const [initialOutName] = useState80(() => {
     return getDefaultOutLocation2({
       compositionName: resolvedComposition.id,
-      defaultExtension: container60,
+      defaultExtension: renderMode === "still" ? imageFormat : isVideo ? container60 : imageFormat,
       type: "asset",
       compositionDefaultOutName: resolvedComposition.defaultOutName,
       clientSideRender: true
     });
   });
   const [outName, setOutName] = useState80(() => initialOutName);
-  const setStillFormat = useCallback131((format) => {
+  const setStillFormat = useCallback130((format) => {
     setImageFormat(format);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + format;
       return newFileName;
     });
   }, []);
-  const setContainerFormat = useCallback131((newContainer) => {
+  const setContainerFormat = useCallback130((newContainer) => {
     setContainer(newContainer);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + newContainer;
       return newFileName;
     });
   }, []);
-  const onRenderModeChange = useCallback131((newMode) => {
+  const onRenderModeChange = useCallback130((newMode) => {
     setRenderMode(newMode);
     if (newMode === "video") {
       setOutName((prev) => {
@@ -42618,10 +42738,10 @@ var WebRenderModal = ({
     }
     return options;
   }, [renderMode, resolvedComposition.durationInFrames, onRenderModeChange]);
-  const onFrameSetDirectly = useCallback131((newFrame) => {
+  const onFrameSetDirectly = useCallback130((newFrame) => {
     setFrame(newFrame);
   }, [setFrame]);
-  const onFrameChanged = useCallback131((e) => {
+  const onFrameChanged = useCallback130((e) => {
     setFrame((q) => {
       const newFrame = parseFloat(e);
       if (Number.isNaN(newFrame)) {
@@ -42630,7 +42750,7 @@ var WebRenderModal = ({
       return newFrame;
     });
   }, [setFrame]);
-  const onOutNameChange = useCallback131((e) => {
+  const onOutNameChange = useCallback130((e) => {
     setOutName(e.target.value);
   }, []);
   const outnameValidation = useMemo132(() => {
@@ -42672,8 +42792,8 @@ var WebRenderModal = ({
       return { valid: false, error: err };
     }
   }, [outName, imageFormat, renderMode, container60]);
-  const onRenderStill = useCallback131(async () => {
-    const blob = await renderStillOnWeb({
+  const onRenderStill = useCallback130(async () => {
+    const { blob } = await renderStillOnWeb({
       composition: {
         component: unresolvedComposition.component,
         width: resolvedComposition.width,
@@ -42715,7 +42835,7 @@ var WebRenderModal = ({
     unresolvedComposition.calculateMetadata,
     resolvedComposition.id
   ]);
-  const onRenderVideo = useCallback131(async () => {
+  const onRenderVideo = useCallback130(async () => {
     setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
     const { getBlob } = await renderMediaOnWeb({
       composition: {
@@ -42775,7 +42895,7 @@ var WebRenderModal = ({
     resolvedComposition.id,
     unresolvedComposition.calculateMetadata
   ]);
-  const onRender = useCallback131(async () => {
+  const onRender = useCallback130(async () => {
     if (renderMode === "still") {
       await onRenderStill();
     } else {
@@ -42945,10 +43065,10 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback134, useMemo as useMemo134 } from "react";
+import { useCallback as useCallback133, useMemo as useMemo134 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback132, useEffect as useEffect77, useState as useState81 } from "react";
+import { useCallback as useCallback131, useEffect as useEffect77, useState as useState81 } from "react";
 import { jsx as jsx261, jsxs as jsxs139 } from "react/jsx-runtime";
 var iconStyle8 = {
   width: 16,
@@ -42979,7 +43099,7 @@ var labelStyle5 = {
 };
 var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
   const [copied, setCopied] = useState81(false);
-  const onClick = useCallback132(() => {
+  const onClick = useCallback131(() => {
     copyText(textToCopy).then(() => {
       setCopied(Date.now());
     }).catch((err) => {
@@ -43011,7 +43131,7 @@ var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback133, useMemo as useMemo133, useState as useState82 } from "react";
+import { useCallback as useCallback132, useMemo as useMemo133, useState as useState82 } from "react";
 import { jsx as jsx262 } from "react/jsx-runtime";
 var svgStyle3 = {
   width: "11px",
@@ -43028,7 +43148,7 @@ var buttonStyle8 = {
 var OpenIssueButton = ({ link: link3 }) => {
   const [hovered, setHovered] = useState82(false);
   const buttonTooltip = `Open GitHub issue in new Tab`;
-  const handleClick = useCallback133(() => {
+  const handleClick = useCallback132(() => {
     window.open(link3, "_blank");
   }, [link3]);
   const svgFillColor = useMemo133(() => {
@@ -43042,10 +43162,10 @@ var OpenIssueButton = ({ link: link3 }) => {
       d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
     })
   });
-  const onPointerEnter = useCallback133(() => {
+  const onPointerEnter = useCallback132(() => {
     setHovered(true);
   }, []);
-  const onPointerLeave = useCallback133(() => {
+  const onPointerLeave = useCallback132(() => {
     setHovered(false);
   }, []);
   return /* @__PURE__ */ jsx262("button", {
@@ -43132,7 +43252,7 @@ var UpdateModal = ({ info, knownBugs }) => {
     return knownBugs && knownBugs?.length > 0;
   }, [knownBugs]);
   const command = commands[info.packageManager];
-  const onClick = useCallback134(() => {
+  const onClick = useCallback133(() => {
     copyText(command).catch((err) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
@@ -43248,7 +43368,8 @@ var Modals = ({ readOnlyStudio }) => {
         compositionId: modalContextType.compositionId,
         defaultProps: modalContextType.defaultProps,
         inFrameMark: modalContextType.inFrameMark,
-        outFrameMark: modalContextType.outFrameMark
+        outFrameMark: modalContextType.outFrameMark,
+        initialLogLevel: modalContextType.initialLogLevel
       }),
       modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx265(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,
@@ -43351,7 +43472,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     };
   }, [readOnlyStudio]);
   const [canvasMounted, setCanvasMounted] = React175.useState(false);
-  const onMounted = useCallback135(() => {
+  const onMounted = useCallback134(() => {
     setCanvasMounted(true);
   }, []);
   const value = useMemo135(() => {
@@ -43407,7 +43528,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals21 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback136, useContext as useContext85, useMemo as useMemo136, useState as useState83 } from "react";
+import { useCallback as useCallback135, useContext as useContext85, useMemo as useMemo136, useState as useState83 } from "react";
 import { Internals as Internals63 } from "remotion";
 import { jsx as jsx267 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -43436,7 +43557,7 @@ var PreviewSizeProvider = ({ children }) => {
     };
   });
   const { editorZoomGestures } = useContext85(EditorZoomGesturesContext);
-  const setSize = useCallback136((newValue) => {
+  const setSize = useCallback135((newValue) => {
     setSizeState((prevState) => {
       const newVal = newValue(prevState);
       persistPreviewSizeOption(newVal);
@@ -43464,11 +43585,11 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback137, useMemo as useMemo137, useState as useState84 } from "react";
+import { useCallback as useCallback136, useMemo as useMemo137, useState as useState84 } from "react";
 import { jsx as jsx268 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState84(() => loadCheckerboardOption());
-  const setCheckerboard = useCallback137((newValue) => {
+  const setCheckerboard = useCallback136((newValue) => {
     setCheckerboardState((prevState) => {
       const newVal = newValue(prevState);
       persistCheckerboardOption(newVal);
@@ -43570,7 +43691,7 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback138, useMemo as useMemo141, useRef as useRef42, useState as useState88 } from "react";
+import { useCallback as useCallback137, useMemo as useMemo141, useRef as useRef42, useState as useState88 } from "react";
 import { jsx as jsx272 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState88(() => loadGuidesList());
@@ -43579,7 +43700,7 @@ var ShowGuidesProvider = ({ children }) => {
   const [editorShowGuides, setEditorShowGuidesState] = useState88(() => loadEditorShowGuidesOption());
   const shouldCreateGuideRef = useRef42(false);
   const shouldDeleteGuideRef = useRef42(false);
-  const setEditorShowGuides = useCallback138((newValue) => {
+  const setEditorShowGuides = useCallback137((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowGuidesOption(newVal);
@@ -43613,11 +43734,11 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback139, useMemo as useMemo142, useState as useState89 } from "react";
+import { useCallback as useCallback138, useMemo as useMemo142, useState as useState89 } from "react";
 import { jsx as jsx273 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState89(() => loadEditorShowRulersOption());
-  const setEditorShowRulers = useCallback139((newValue) => {
+  const setEditorShowRulers = useCallback138((newValue) => {
     setEditorShowRulersState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowRulersOption(newVal);
@@ -43637,11 +43758,11 @@ var ShowRulersProvider = ({ children }) => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback140, useMemo as useMemo143, useState as useState90 } from "react";
+import { useCallback as useCallback139, useMemo as useMemo143, useState as useState90 } from "react";
 import { jsx as jsx274 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState90(() => loadEditorZoomGesturesOption());
-  const setEditorZoomGestures = useCallback140((newValue) => {
+  const setEditorZoomGestures = useCallback139((newValue) => {
     setEditorZoomGesturesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorZoomGesturesOption(newVal);