@remotion/studio 4.0.394 → 4.0.396

package/dist/esm/previewEntry.mjs

@@ -34,7 +34,7 @@ import { Internals as Internals66 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
-import React176, { useCallback as useCallback136, useEffect as useEffect78, useMemo as useMemo135 } from "react";
+import React176, { useCallback as useCallback135, useEffect as useEffect78, useMemo as useMemo135 } from "react";
 import { Internals as Internals62 } from "remotion";
 
 // src/helpers/colors.ts
@@ -18247,6 +18247,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",
@@ -18254,7 +18258,8 @@ var TriggerWebRender = () => {
       compositionId: video.id,
       defaultProps: video.defaultProps,
       inFrameMark: inFrame,
-      outFrameMark: outFrame
+      outFrameMark: outFrame,
+      initialLogLevel: defaults.logLevel
     });
   }, [
     getCurrentFrame2,
@@ -20772,7 +20777,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
  *
@@ -21036,6 +21041,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));
 };
@@ -21189,7 +21207,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
  *
@@ -21240,7 +21258,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
  *
@@ -21514,7 +21532,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
  *
@@ -21617,6 +21635,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);
@@ -21627,6 +21684,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;
 };
@@ -22882,7 +22949,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
  *
@@ -22897,7 +22964,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
  *
@@ -22908,7 +22975,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
  *
@@ -23040,7 +23107,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
  *
@@ -23716,7 +23783,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
  *
@@ -24315,7 +24382,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--);
@@ -24324,9 +24390,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) {
@@ -24661,7 +24737,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
  *
@@ -24870,7 +24946,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
  *
@@ -24888,7 +24964,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
  *
@@ -24964,7 +25040,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
  *
@@ -27242,7 +27318,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
  *
@@ -27557,7 +27633,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
  *
@@ -27575,7 +27651,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
  *
@@ -29454,7 +29530,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
  *
@@ -29696,7 +29772,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
  *
@@ -30396,7 +30472,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
  *
@@ -30422,7 +30498,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
  *
@@ -30687,7 +30763,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
  *
@@ -30758,7 +30834,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
  *
@@ -30822,7 +30898,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
  *
@@ -31482,7 +31558,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
  *
@@ -31903,7 +31979,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
  *
@@ -31964,7 +32040,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
  *
@@ -32185,7 +32261,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
  *
@@ -32320,7 +32396,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
  *
@@ -32744,7 +32820,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
  *
@@ -33066,7 +33142,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
@@ -33233,7 +33309,7 @@ class UrlSource extends Source {
           }
         }
         if (worker.aborted) {
-          break;
+          continue;
         }
         const { done, value } = readResult;
         if (done) {
@@ -33247,11 +33323,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");
@@ -33604,7 +33676,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
  *
@@ -33711,7 +33783,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
  *
@@ -33929,7 +34001,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
  *
@@ -40273,6 +40345,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 jsx251, jsxs as jsxs129 } from "react/jsx-runtime";
 var container56 = {
@@ -40349,9 +40441,21 @@ var RenderModalBasic = ({
   const onValueChange = useCallback124((e) => {
     setOutName(e.target.value);
   }, [setOutName]);
-  const onVerboseLoggingChanged = useCallback124((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__ */ jsx251(Checkmark, {}) : null,
+        id: level,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: "item",
+        value: level
+      };
+    });
+  }, [logLevel, setVerboseLogging]);
   return /* @__PURE__ */ jsxs129("div", {
     style: container56,
     children: [
@@ -40459,7 +40563,7 @@ var RenderModalBasic = ({
           /* @__PURE__ */ jsxs129("div", {
             style: label5,
             children: [
-              "Verbose logging ",
+              "Log Level ",
               /* @__PURE__ */ jsx251(Spacing, {
                 x: 0.5
               }),
@@ -40470,10 +40574,10 @@ var RenderModalBasic = ({
           }),
           /* @__PURE__ */ jsx251("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx251(Checkbox, {
-              checked: logLevel === "verbose",
-              onChange: onVerboseLoggingChanged,
-              name: "verbose-logging"
+            children: /* @__PURE__ */ jsx251(Combobox, {
+              values: logLevelOptions,
+              selectedId: logLevel,
+              title: "Log Level"
             })
           })
         ]
@@ -42195,7 +42299,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 useCallback132, useContext as useContext83, useMemo as useMemo132, useState as useState81 } from "react";
+import { useCallback as useCallback131, useContext as useContext83, useMemo as useMemo132, useState as useState81 } from "react";
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
 import { useCallback as useCallback129, useMemo as useMemo129 } from "react";
@@ -42337,7 +42441,7 @@ var WebRenderModalAdvanced = ({
 };
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
-import { useCallback as useCallback130, useMemo as useMemo130 } from "react";
+import { useMemo as useMemo130 } from "react";
 import { jsx as jsx259, jsxs as jsxs136, Fragment as Fragment44 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
@@ -42386,6 +42490,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__ */ jsx259(Checkmark, {}) : null,
+        id: level,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: "item",
+        value: level
+      };
+    });
+  }, [logLevel, setLogLevel]);
   const containerOptions = useMemo130(() => {
     return [
       {
@@ -42471,9 +42590,6 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [codec, setCodec]);
-  const onVerboseLoggingChanged = useCallback130((e) => {
-    setLogLevel(e.target.checked ? "verbose" : "info");
-  }, [setLogLevel]);
   return /* @__PURE__ */ jsxs136("div", {
     style: tabContainer2,
     children: [
@@ -42589,7 +42705,7 @@ var WebRenderModalBasic = ({
           /* @__PURE__ */ jsxs136("div", {
             style: label5,
             children: [
-              "Verbose logging ",
+              "Log Level ",
               /* @__PURE__ */ jsx259(Spacing, {
                 x: 0.5
               }),
@@ -42600,10 +42716,10 @@ var WebRenderModalBasic = ({
           }),
           /* @__PURE__ */ jsx259("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx259(Checkbox, {
-              checked: logLevel === "verbose",
-              onChange: onVerboseLoggingChanged,
-              name: "verbose-logging"
+            children: /* @__PURE__ */ jsx259(Combobox, {
+              values: logLevelOptions,
+              selectedId: logLevel,
+              title: "Log Level"
             })
           })
         ]
@@ -42613,7 +42729,7 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
-import { useCallback as useCallback131, useMemo as useMemo131 } from "react";
+import { useCallback as useCallback130, useMemo as useMemo131 } from "react";
 import { jsx as jsx260, jsxs as jsxs137 } from "react/jsx-runtime";
 var tabContainer3 = {
   flex: 1
@@ -42686,7 +42802,7 @@ var WebRenderModalPicture = ({
       }
     ];
   }, [videoBitrate, setVideoBitrate]);
-  const onTransparentChanged = useCallback131((e) => {
+  const onTransparentChanged = useCallback130((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
   if (renderMode !== "video") {
@@ -42791,7 +42907,8 @@ var WebRenderModal = ({
   initialFrame,
   defaultProps,
   inFrameMark,
-  outFrameMark
+  outFrameMark,
+  initialLogLevel
 }) => {
   const context = useContext83(ResolvedCompositionContext);
   if (!context) {
@@ -42801,11 +42918,14 @@ var WebRenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const [renderMode, setRenderMode] = useState81("video");
+  const [isVideo] = useState81(() => {
+    return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
+  });
+  const [renderMode, setRenderMode] = useState81(isVideo ? "video" : "still");
   const [tab, setTab] = useState81("general");
   const [imageFormat, setImageFormat] = useState81("png");
   const [frame2, setFrame] = useState81(() => initialFrame);
-  const [logLevel, setLogLevel] = useState81("info");
+  const [logLevel, setLogLevel] = useState81(() => initialLogLevel);
   const [inputProps, setInputProps] = useState81(() => defaultProps);
   const [delayRenderTimeout, setDelayRenderTimeout] = useState81(30000);
   const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState81(null);
@@ -42840,28 +42960,28 @@ var WebRenderModal = ({
   const [initialOutName] = useState81(() => {
     return getDefaultOutLocation2({
       compositionName: resolvedComposition.id,
-      defaultExtension: container60,
+      defaultExtension: renderMode === "still" ? imageFormat : isVideo ? container60 : imageFormat,
       type: "asset",
       compositionDefaultOutName: resolvedComposition.defaultOutName,
       clientSideRender: true
     });
   });
   const [outName, setOutName] = useState81(() => initialOutName);
-  const setStillFormat = useCallback132((format) => {
+  const setStillFormat = useCallback131((format) => {
     setImageFormat(format);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + format;
       return newFileName;
     });
   }, []);
-  const setContainerFormat = useCallback132((newContainer) => {
+  const setContainerFormat = useCallback131((newContainer) => {
     setContainer(newContainer);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + newContainer;
       return newFileName;
     });
   }, []);
-  const onRenderModeChange = useCallback132((newMode) => {
+  const onRenderModeChange = useCallback131((newMode) => {
     setRenderMode(newMode);
     if (newMode === "video") {
       setOutName((prev) => {
@@ -42898,10 +43018,10 @@ var WebRenderModal = ({
     }
     return options;
   }, [renderMode, resolvedComposition.durationInFrames, onRenderModeChange]);
-  const onFrameSetDirectly = useCallback132((newFrame) => {
+  const onFrameSetDirectly = useCallback131((newFrame) => {
     setFrame(newFrame);
   }, [setFrame]);
-  const onFrameChanged = useCallback132((e) => {
+  const onFrameChanged = useCallback131((e) => {
     setFrame((q) => {
       const newFrame = parseFloat(e);
       if (Number.isNaN(newFrame)) {
@@ -42910,7 +43030,7 @@ var WebRenderModal = ({
       return newFrame;
     });
   }, [setFrame]);
-  const onOutNameChange = useCallback132((e) => {
+  const onOutNameChange = useCallback131((e) => {
     setOutName(e.target.value);
   }, []);
   const outnameValidation = useMemo132(() => {
@@ -42952,8 +43072,8 @@ var WebRenderModal = ({
       return { valid: false, error: err };
     }
   }, [outName, imageFormat, renderMode, container60]);
-  const onRenderStill = useCallback132(async () => {
-    const blob = await renderStillOnWeb({
+  const onRenderStill = useCallback131(async () => {
+    const { blob } = await renderStillOnWeb({
       composition: {
         component: unresolvedComposition.component,
         width: resolvedComposition.width,
@@ -42995,7 +43115,7 @@ var WebRenderModal = ({
     unresolvedComposition.calculateMetadata,
     resolvedComposition.id
   ]);
-  const onRenderVideo = useCallback132(async () => {
+  const onRenderVideo = useCallback131(async () => {
     setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
     const { getBlob } = await renderMediaOnWeb({
       composition: {
@@ -43055,7 +43175,7 @@ var WebRenderModal = ({
     resolvedComposition.id,
     unresolvedComposition.calculateMetadata
   ]);
-  const onRender = useCallback132(async () => {
+  const onRender = useCallback131(async () => {
     if (renderMode === "still") {
       await onRenderStill();
     } else {
@@ -43225,10 +43345,10 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback135, useMemo as useMemo134 } from "react";
+import { useCallback as useCallback134, useMemo as useMemo134 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback133, useEffect as useEffect77, useState as useState82 } from "react";
+import { useCallback as useCallback132, useEffect as useEffect77, useState as useState82 } from "react";
 import { jsx as jsx262, jsxs as jsxs139 } from "react/jsx-runtime";
 var iconStyle8 = {
   width: 16,
@@ -43259,7 +43379,7 @@ var labelStyle5 = {
 };
 var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
   const [copied, setCopied] = useState82(false);
-  const onClick = useCallback133(() => {
+  const onClick = useCallback132(() => {
     copyText(textToCopy).then(() => {
       setCopied(Date.now());
     }).catch((err) => {
@@ -43291,7 +43411,7 @@ var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback134, useMemo as useMemo133, useState as useState83 } from "react";
+import { useCallback as useCallback133, useMemo as useMemo133, useState as useState83 } from "react";
 import { jsx as jsx263 } from "react/jsx-runtime";
 var svgStyle3 = {
   width: "11px",
@@ -43308,7 +43428,7 @@ var buttonStyle8 = {
 var OpenIssueButton = ({ link: link3 }) => {
   const [hovered, setHovered] = useState83(false);
   const buttonTooltip = `Open GitHub issue in new Tab`;
-  const handleClick = useCallback134(() => {
+  const handleClick = useCallback133(() => {
     window.open(link3, "_blank");
   }, [link3]);
   const svgFillColor = useMemo133(() => {
@@ -43322,10 +43442,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 = useCallback134(() => {
+  const onPointerEnter = useCallback133(() => {
     setHovered(true);
   }, []);
-  const onPointerLeave = useCallback134(() => {
+  const onPointerLeave = useCallback133(() => {
     setHovered(false);
   }, []);
   return /* @__PURE__ */ jsx263("button", {
@@ -43412,7 +43532,7 @@ var UpdateModal = ({ info, knownBugs }) => {
     return knownBugs && knownBugs?.length > 0;
   }, [knownBugs]);
   const command = commands[info.packageManager];
-  const onClick = useCallback135(() => {
+  const onClick = useCallback134(() => {
     copyText(command).catch((err) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
@@ -43528,7 +43648,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__ */ jsx266(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,
@@ -43631,7 +43752,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     };
   }, [readOnlyStudio]);
   const [canvasMounted, setCanvasMounted] = React176.useState(false);
-  const onMounted = useCallback136(() => {
+  const onMounted = useCallback135(() => {
     setCanvasMounted(true);
   }, []);
   const value = useMemo135(() => {
@@ -43687,7 +43808,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals21 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback137, useContext as useContext85, useMemo as useMemo136, useState as useState84 } from "react";
+import { useCallback as useCallback136, useContext as useContext85, useMemo as useMemo136, useState as useState84 } from "react";
 import { Internals as Internals63 } from "remotion";
 import { jsx as jsx268 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -43716,7 +43837,7 @@ var PreviewSizeProvider = ({ children }) => {
     };
   });
   const { editorZoomGestures } = useContext85(EditorZoomGesturesContext);
-  const setSize = useCallback137((newValue) => {
+  const setSize = useCallback136((newValue) => {
     setSizeState((prevState) => {
       const newVal = newValue(prevState);
       persistPreviewSizeOption(newVal);
@@ -43744,11 +43865,11 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback138, useMemo as useMemo137, useState as useState85 } from "react";
+import { useCallback as useCallback137, useMemo as useMemo137, useState as useState85 } from "react";
 import { jsx as jsx269 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState85(() => loadCheckerboardOption());
-  const setCheckerboard = useCallback138((newValue) => {
+  const setCheckerboard = useCallback137((newValue) => {
     setCheckerboardState((prevState) => {
       const newVal = newValue(prevState);
       persistCheckerboardOption(newVal);
@@ -43850,7 +43971,7 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback139, useMemo as useMemo141, useRef as useRef42, useState as useState89 } from "react";
+import { useCallback as useCallback138, useMemo as useMemo141, useRef as useRef42, useState as useState89 } from "react";
 import { jsx as jsx273 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState89(() => loadGuidesList());
@@ -43859,7 +43980,7 @@ var ShowGuidesProvider = ({ children }) => {
   const [editorShowGuides, setEditorShowGuidesState] = useState89(() => loadEditorShowGuidesOption());
   const shouldCreateGuideRef = useRef42(false);
   const shouldDeleteGuideRef = useRef42(false);
-  const setEditorShowGuides = useCallback139((newValue) => {
+  const setEditorShowGuides = useCallback138((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowGuidesOption(newVal);
@@ -43893,11 +44014,11 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback140, useMemo as useMemo142, useState as useState90 } from "react";
+import { useCallback as useCallback139, useMemo as useMemo142, useState as useState90 } from "react";
 import { jsx as jsx274 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState90(() => loadEditorShowRulersOption());
-  const setEditorShowRulers = useCallback140((newValue) => {
+  const setEditorShowRulers = useCallback139((newValue) => {
     setEditorShowRulersState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowRulersOption(newVal);
@@ -43917,11 +44038,11 @@ var ShowRulersProvider = ({ children }) => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback141, useMemo as useMemo143, useState as useState91 } from "react";
+import { useCallback as useCallback140, useMemo as useMemo143, useState as useState91 } from "react";
 import { jsx as jsx275 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState91(() => loadEditorZoomGesturesOption());
-  const setEditorZoomGestures = useCallback141((newValue) => {
+  const setEditorZoomGestures = useCallback140((newValue) => {
     setEditorZoomGesturesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorZoomGesturesOption(newVal);