@remotion/studio 4.0.458 → 4.0.460

package/dist/components/Timeline/use-timeline-height.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineHeight = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const useTimelineHeight = ({ shown, hasBeenCut, }) => {
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { getDragOverrides, getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
+    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
+        previewServerState.type === 'connected';
+    return (0, react_1.useMemo)(() => {
+        const tracksHeight = shown.reduce((acc, track) => {
+            const isExpanded = visualModeEnabled &&
+                track.nodePathInfo !== null &&
+                getIsExpanded(track.nodePathInfo);
+            const layerHeight = (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
+                timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM;
+            const expandedHeight = isExpanded && track.nodePathInfo
+                ? (0, timeline_layout_1.getExpandedTrackHeight)({
+                    sequence: track.sequence,
+                    nodePathInfo: track.nodePathInfo,
+                    getIsExpanded,
+                    getDragOverrides,
+                    getCodeValues,
+                }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
+                : 0;
+            return acc + layerHeight + expandedHeight;
+        }, 0);
+        return (tracksHeight +
+            timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
+            (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
+            TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT);
+    }, [
+        shown,
+        hasBeenCut,
+        visualModeEnabled,
+        getIsExpanded,
+        getDragOverrides,
+        getCodeValues,
+    ]);
+};
+exports.useTimelineHeight = useTimelineHeight;

package/dist/components/draw-peaks.js

@@ -10,6 +10,13 @@ const drawBars = (canvas, peaks, color, volume, width) => {
     }
     const { height } = canvas;
     const w = canvas.width;
+    // Skip drawing when the target canvas has not been laid out yet.
+    // `createImageData(0, h)` / `(w, 0)` throws a DOMException, which
+    // surfaces in Studio's console for compositions with many audio
+    // sequences — some segments are 0 px wide at certain zoom levels.
+    if (w === 0 || height === 0) {
+        return;
+    }
     ctx.clearRect(0, 0, w, height);
     if (volume === 0)
         return;

package/dist/esm/audio-waveform-worker.mjs

@@ -1,3 +1,9 @@
+// src/audio-waveform-worker.ts
+import {
+  getLoopDisplayWidth,
+  shouldTileLoopDisplay
+} from "@remotion/timeline-utils";
+
 // src/components/parse-color.ts
 var colorCache = new Map;
 var parseColor = (color) => {
@@ -22,6 +28,9 @@ var drawBars = (canvas, peaks, color, volume, width) => {
   }
   const { height } = canvas;
   const w = canvas.width;
+  if (w === 0 || height === 0) {
+    return;
+  }
   ctx.clearRect(0, 0, w, height);
   if (volume === 0)
     return;
@@ -225,20 +234,6 @@ async function loadWaveformPeaks(url, signal, options) {
   }
 }
 
-// src/components/looped-media-timeline.ts
-var shouldTileLoopDisplay = (loopDisplay) => {
-  return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
-};
-var getLoopDisplayWidth = ({
-  visualizationWidth,
-  loopDisplay
-}) => {
-  if (!shouldTileLoopDisplay(loopDisplay)) {
-    return visualizationWidth;
-  }
-  return visualizationWidth / loopDisplay.numberOfTimes;
-};
-
 // src/components/slice-waveform-peaks.ts
 var sliceWaveformPeaks = ({
   durationInFrames,