@remotion/studio 4.0.460 → 4.0.461

package/dist/esm/renderEntry.mjs

@@ -166,7 +166,6 @@ var renderContent = (Root) => {
         logLevel: window.remotion_logLevel ?? "info",
         numberOfAudioTags: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "playback",
-        visualModeEnabled: false,
         children: /* @__PURE__ */ jsxs(Internals.RenderAssetManagerProvider, {
           collectAssets: null,
           children: [
@@ -193,7 +192,6 @@ var renderContent = (Root) => {
         logLevel: window.remotion_logLevel ?? "info",
         numberOfAudioTags: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "playback",
-        visualModeEnabled: false,
         children: /* @__PURE__ */ jsx(Internals.RenderAssetManagerProvider, {
           collectAssets: null,
           children: /* @__PURE__ */ jsx(Root, {})
@@ -209,14 +207,13 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-nrgs0ad5.js").then(({ StudioInternals }) => {
+    import("./chunk-yzh34sp0.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";
       renderToDOM(/* @__PURE__ */ jsx(StudioInternals.Studio, {
         readOnly: true,
-        rootComponent: Root,
-        visualModeEnabled: false
+        rootComponent: Root
       }));
     }).catch((err) => {
       renderToDOM(/* @__PURE__ */ jsxs("div", {

package/dist/helpers/calculate-timeline.js

@@ -58,7 +58,9 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
             hash: actualHash,
             cascadedStart,
             cascadedDuration: sequence.duration,
-            nodePathInfo: nodePath ? { nodePath, index: 0 } : null,
+            nodePathInfo: nodePath
+                ? { nodePath, index: 0, numberOfSequencesWithThisNodePath: 0 }
+                : null,
         });
     }
     const uniqueTracks = [];
@@ -78,17 +80,37 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
         return sortKeyA.localeCompare(sortKeyB);
     });
     const nodePathIndexCounters = new Map();
-    return sortedTracks.map((track) => {
+    return sortedTracks
+        .map((track) => {
         var _a;
         if (track.nodePathInfo === null) {
             return track;
         }
-        const key = JSON.stringify(track.nodePathInfo.nodePath);
+        const key = track.nodePathInfo.nodePath.join('.');
         const index = (_a = nodePathIndexCounters.get(key)) !== null && _a !== void 0 ? _a : 0;
         nodePathIndexCounters.set(key, index + 1);
         return {
             ...track,
-            nodePathInfo: { nodePath: track.nodePathInfo.nodePath, index },
+            nodePathInfo: {
+                nodePath: track.nodePathInfo.nodePath,
+                index,
+                numberOfSequencesWithThisNodePath: 0,
+            },
+        };
+    })
+        .map((track) => {
+        var _a;
+        if (track.nodePathInfo === null) {
+            return track;
+        }
+        const key = track.nodePathInfo.nodePath.join('.');
+        return {
+            ...track,
+            nodePathInfo: {
+                nodePath: track.nodePathInfo.nodePath,
+                index: track.nodePathInfo.index,
+                numberOfSequencesWithThisNodePath: (_a = nodePathIndexCounters.get(key)) !== null && _a !== void 0 ? _a : 0,
+            },
         };
     });
 };

package/dist/helpers/get-timeline-sequence-sort-key.d.ts

@@ -2,6 +2,7 @@ import type { SequenceNodePath, TSequence } from 'remotion';
 export type SequenceNodePathInfo = {
     nodePath: SequenceNodePath;
     index: number;
+    numberOfSequencesWithThisNodePath: number;
 };
 type Track = {
     sequence: TSequence;

package/dist/helpers/timeline-layout.d.ts

@@ -11,6 +11,8 @@ export declare const TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 export declare const TREE_GROUP_ROW_HEIGHT = 22;
 export declare const EXPANDED_SECTION_PADDING_LEFT = 28;
 export declare const EXPANDED_SECTION_PADDING_RIGHT = 10;
+export type TimelineFieldOnSave = (value: unknown) => Promise<void>;
+export type TimelineFieldOnDragValueChange = (value: unknown) => void;
 export type EffectSchemaFieldLabel = {
     key: string;
     description: string | undefined;
@@ -43,11 +45,10 @@ export declare const flattenVisibleTreeNodes: ({ nodes, getIsExpanded, depth, }:
     depth?: number | undefined;
 }) => FlatTreeRow[];
 export declare const getTreeRowHeight: (node: TimelineTreeNode) => number;
-export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues, }: {
+export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExpanded, getCodeValues, }: {
     sequence: TSequence;
     nodePathInfo: SequenceNodePathInfo;
     getIsExpanded: GetIsExpanded;
-    getDragOverrides: GetDragOverrides;
     getCodeValues: GetCodeValues;
 }) => number;
 export declare const TIMELINE_LAYER_HEIGHT_VIDEO = 75;

package/dist/helpers/timeline-layout.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineLayerHeight = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.getEffectSchemaLabels = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.EXPANDED_SECTION_PADDING_LEFT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.getFieldsToShow = exports.UNSUPPORTED_FIELD_ROW_HEIGHT = exports.SCHEMA_FIELD_ROW_HEIGHT = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const no_react_1 = require("remotion/no-react");
 const studio_shared_2 = require("@remotion/studio-shared");
 Object.defineProperty(exports, "SCHEMA_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return studio_shared_2.SCHEMA_FIELD_ROW_HEIGHT; } });
 Object.defineProperty(exports, "UNSUPPORTED_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return studio_shared_2.UNSUPPORTED_FIELD_ROW_HEIGHT; } });
@@ -17,10 +18,17 @@ const getEffectSchemaLabels = (effect) => {
     if (!effect.definition.schema) {
         return [];
     }
-    return Object.entries(effect.definition.schema).map(([key, fieldSchema]) => ({
-        key,
-        description: fieldSchema.description,
-    }));
+    return Object.entries(effect.definition.schema)
+        .map(([key, fieldSchema]) => {
+        if (fieldSchema.type === 'hidden') {
+            return null;
+        }
+        return {
+            key,
+            description: fieldSchema.description,
+        };
+    })
+        .filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getEffectSchemaLabels = getEffectSchemaLabels;
 const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getCodeValues, }) => {
@@ -30,13 +38,21 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getCodeVa
     if (sequence.effects.length > 0) {
         roots.push({
             kind: 'group',
-            nodePathInfo: { nodePath: [...nodePath, 'effects'], index },
+            nodePathInfo: {
+                nodePath: [...nodePath, 'effects'],
+                index,
+                numberOfSequencesWithThisNodePath: 0,
+            },
             label: 'Effects',
             children: sequence.effects.map((effect, i) => {
                 const effectNodePath = [...nodePath, 'effects', i];
                 return {
                     kind: 'group',
-                    nodePathInfo: { nodePath: effectNodePath, index },
+                    nodePathInfo: {
+                        nodePath: effectNodePath,
+                        index,
+                        numberOfSequencesWithThisNodePath: 0,
+                    },
                     label: effect.definition.label,
                     children: (0, exports.getEffectSchemaLabels)(effect).map((label) => {
                         var _a;
@@ -45,6 +61,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getCodeVa
                             nodePathInfo: {
                                 nodePath: [...effectNodePath, label.key],
                                 index,
+                                numberOfSequencesWithThisNodePath: 0,
                             },
                             label: (_a = label.description) !== null && _a !== void 0 ? _a : label.key,
                             field: null,
@@ -65,7 +82,11 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getCodeVa
         for (const f of controlFields) {
             roots.push({
                 kind: 'field',
-                nodePathInfo: { nodePath: [...nodePath, 'controls', f.key], index },
+                nodePathInfo: {
+                    nodePath: [...nodePath, 'controls', f.key],
+                    index,
+                    numberOfSequencesWithThisNodePath: 0,
+                },
                 label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
                 field: f,
             });
@@ -96,11 +117,12 @@ const getTreeRowHeight = (node) => {
     return exports.TREE_GROUP_ROW_HEIGHT;
 };
 exports.getTreeRowHeight = getTreeRowHeight;
-const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues, }) => {
+const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, getCodeValues, }) => {
     const tree = (0, exports.buildTimelineTree)({
         sequence,
         nodePathInfo,
-        getDragOverrides,
+        // We assume that no drag overrides can change the timeline layout
+        getDragOverrides: () => ({}),
         getCodeValues,
     });
     const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded });

package/dist/internals.d.ts

@@ -2,6 +2,5 @@ export declare const StudioInternals: {
     Studio: import("react").FC<{
         readonly rootComponent: import("react").FC<{}>;
         readonly readOnly: boolean;
-        readonly visualModeEnabled: boolean;
     }>;
 };

package/dist/previewEntry.js

@@ -44,5 +44,5 @@ const renderToDOM = (content) => {
 };
 renderToDOM(jsx_runtime_1.jsx(NoRegisterRoot_1.NoRegisterRoot, {}));
 remotion_1.Internals.waitForRoot((NewRoot) => {
-    renderToDOM(jsx_runtime_1.jsx(Studio_1.Studio, { readOnly: false, rootComponent: NewRoot, visualModeEnabled: Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) }));
+    renderToDOM(jsx_runtime_1.jsx(Studio_1.Studio, { readOnly: false, rootComponent: NewRoot }));
 });

package/dist/renderEntry.js

@@ -186,13 +186,13 @@ const renderContent = (Root) => {
                 defaultPixelFormat: bundleMode.compositionDefaultPixelFormat,
                 defaultProResProfile: bundleMode.compositionDefaultProResProfile,
                 defaultSampleRate: bundleMode.compositionDefaultSampleRate,
-            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', visualModeEnabled: false, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
+            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
                         jsx_runtime_1.jsx(Root, {}), jsx_runtime_1.jsx(GetVideoComposition, { state: bundleMode })
                     ] }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'evaluation') {
-        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', visualModeEnabled: false, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
+        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'index') {
@@ -204,7 +204,7 @@ const renderContent = (Root) => {
             window.remotion_isStudio = true;
             window.remotion_isReadOnlyStudio = true;
             window.remotion_inputProps = '{}';
-            renderToDOM(jsx_runtime_1.jsx(StudioInternals.Studio, { readOnly: true, rootComponent: Root, visualModeEnabled: false }));
+            renderToDOM(jsx_runtime_1.jsx(StudioInternals.Studio, { readOnly: true, rootComponent: Root }));
         })
             .catch((err) => {
             renderToDOM(jsx_runtime_1.jsxs("div", { children: ["Failed to load Remotion Studio: ", err.message] }));

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.460",
+	"version": "4.0.461",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,25 +26,25 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.460",
-		"@remotion/player": "4.0.460",
-		"@remotion/media-utils": "4.0.460",
-		"@remotion/renderer": "4.0.460",
-		"@remotion/web-renderer": "4.0.460",
-		"@remotion/studio-shared": "4.0.460",
-		"@remotion/timeline-utils": "4.0.460",
-		"@remotion/zod-types": "4.0.460",
+		"remotion": "4.0.461",
+		"@remotion/player": "4.0.461",
+		"@remotion/media-utils": "4.0.461",
+		"@remotion/renderer": "4.0.461",
+		"@remotion/web-renderer": "4.0.461",
+		"@remotion/studio-shared": "4.0.461",
+		"@remotion/timeline-utils": "4.0.461",
+		"@remotion/zod-types": "4.0.461",
+		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.42.0",
 		"memfs": "3.4.3",
-		"source-map": "0.7.3",
-		"open": "^8.4.2",
+		"open": "8.4.2",
 		"zod": "4.3.6"
 	},
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.460",
+		"@types/semver": "7.5.3",
+		"@remotion/eslint-config-internal": "4.0.461",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -76,12 +76,6 @@
 			"require": "./dist/previewEntry.js",
 			"module": "./dist/esm/previewEntry.mjs",
 			"import": "./dist/esm/previewEntry.mjs"
-		},
-		"./audio-waveform-worker": {
-			"types": "./dist/audio-waveform-worker.d.ts",
-			"require": "./dist/audio-waveform-worker.js",
-			"module": "./dist/esm/audio-waveform-worker.mjs",
-			"import": "./dist/esm/audio-waveform-worker.mjs"
 		}
 	},
 	"homepage": "https://www.remotion.dev/docs/studio/api",
@@ -95,9 +89,6 @@
 			],
 			"previewEntry": [
 				"./dist/previewEntry.d.ts"
-			],
-			"audio-waveform-worker": [
-				"./dist/audio-waveform-worker.d.ts"
 			]
 		}
 	}

package/dist/audio-waveform-worker.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/audio-waveform-worker.js

@@ -1,102 +0,0 @@
-"use strict";
-/// <reference lib="webworker" />
-Object.defineProperty(exports, "__esModule", { value: true });
-const timeline_utils_1 = require("@remotion/timeline-utils");
-const draw_peaks_1 = require("./components/draw-peaks");
-const load_waveform_peaks_1 = require("./components/load-waveform-peaks");
-const slice_waveform_peaks_1 = require("./components/slice-waveform-peaks");
-let canvas = null;
-let currentController = null;
-let latestRequestId = 0;
-const postError = (requestId, error) => {
-    const message = error instanceof Error ? error.message : 'Failed to render waveform';
-    const payload = {
-        type: 'error',
-        requestId,
-        message,
-    };
-    self.postMessage(payload);
-};
-const drawPartialWaveform = (message, peaks) => {
-    if (!canvas) {
-        return;
-    }
-    const portionPeaks = (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
-        durationInFrames: (0, timeline_utils_1.shouldTileLoopDisplay)(message.loopDisplay)
-            ? message.loopDisplay.durationInFrames
-            : message.durationInFrames,
-        fps: message.fps,
-        peaks,
-        playbackRate: message.playbackRate,
-        startFrom: message.startFrom,
-    });
-    if (!(0, timeline_utils_1.shouldTileLoopDisplay)(message.loopDisplay)) {
-        (0, draw_peaks_1.drawBars)(canvas, portionPeaks, 'rgba(255, 255, 255, 0.6)', message.volume, message.width);
-        return;
-    }
-    const loopWidth = (0, timeline_utils_1.getLoopDisplayWidth)({
-        visualizationWidth: message.width,
-        loopDisplay: message.loopDisplay,
-    });
-    const targetCanvas = new OffscreenCanvas(Math.max(1, Math.ceil(loopWidth)), message.height);
-    (0, draw_peaks_1.drawBars)(targetCanvas, portionPeaks, 'rgba(255, 255, 255, 0.6)', message.volume, targetCanvas.width);
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        throw new Error('Failed to get canvas context');
-    }
-    const pattern = ctx.createPattern(targetCanvas, 'repeat-x');
-    if (!pattern) {
-        return;
-    }
-    pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
-    ctx.clearRect(0, 0, message.width, message.height);
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, message.width, message.height);
-};
-const renderWaveform = async (message) => {
-    if (!canvas) {
-        postError(message.requestId, new Error('Waveform canvas not initialized'));
-        return;
-    }
-    const controller = new AbortController();
-    currentController === null || currentController === void 0 ? void 0 : currentController.abort();
-    currentController = controller;
-    latestRequestId = message.requestId;
-    try {
-        canvas.width = message.width;
-        canvas.height = message.height;
-        const peaks = await (0, load_waveform_peaks_1.loadWaveformPeaks)(message.src, controller.signal, {
-            onProgress: ({ peaks: nextPeaks }) => {
-                if (controller.signal.aborted ||
-                    latestRequestId !== message.requestId) {
-                    return;
-                }
-                drawPartialWaveform(message, nextPeaks);
-            },
-        });
-        if (controller.signal.aborted || latestRequestId !== message.requestId) {
-            return;
-        }
-        drawPartialWaveform(message, peaks);
-    }
-    catch (error) {
-        if (controller.signal.aborted || latestRequestId !== message.requestId) {
-            return;
-        }
-        postError(message.requestId, error);
-    }
-};
-self.addEventListener('message', (event) => {
-    const message = event.data;
-    if (message.type === 'init') {
-        canvas = message.canvas;
-        return;
-    }
-    if (message.type === 'dispose') {
-        currentController === null || currentController === void 0 ? void 0 : currentController.abort();
-        currentController = null;
-        canvas = null;
-        return;
-    }
-    renderWaveform(message);
-});

package/dist/components/audio-waveform-worker-types.d.ts

@@ -1,28 +0,0 @@
-import type { LoopDisplay } from 'remotion';
-export type AudioWaveformWorkerInitMessage = {
-    readonly type: 'init';
-    readonly canvas: OffscreenCanvas;
-};
-export type AudioWaveformWorkerRenderMessage = {
-    readonly type: 'render';
-    readonly requestId: number;
-    readonly src: string;
-    readonly width: number;
-    readonly height: number;
-    readonly volume: number;
-    readonly startFrom: number;
-    readonly durationInFrames: number;
-    readonly fps: number;
-    readonly playbackRate: number;
-    readonly loopDisplay: LoopDisplay | undefined;
-};
-export type AudioWaveformWorkerDisposeMessage = {
-    readonly type: 'dispose';
-};
-export type AudioWaveformWorkerIncomingMessage = AudioWaveformWorkerInitMessage | AudioWaveformWorkerRenderMessage | AudioWaveformWorkerDisposeMessage;
-export type AudioWaveformWorkerErrorMessage = {
-    readonly type: 'error';
-    readonly requestId: number;
-    readonly message: string;
-};
-export type AudioWaveformWorkerOutgoingMessage = AudioWaveformWorkerErrorMessage;

package/dist/components/audio-waveform-worker-types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/draw-peaks.d.ts

@@ -1 +0,0 @@
-export declare const drawBars: (canvas: HTMLCanvasElement | OffscreenCanvas, peaks: Float32Array<ArrayBufferLike>, color: string, volume: number, width: number) => void;

package/dist/components/draw-peaks.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawBars = void 0;
-const parse_color_1 = require("./parse-color");
-const CLIPPING_COLOR = '#FF7F50';
-const drawBars = (canvas, peaks, color, volume, width) => {
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        throw new Error('Failed to get canvas context');
-    }
-    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;
-    const [r, g, b, a] = (0, parse_color_1.parseColor)(color);
-    const [cr, cg, cb, ca] = (0, parse_color_1.parseColor)(CLIPPING_COLOR);
-    const imageData = ctx.createImageData(w, height);
-    const { data } = imageData;
-    const numBars = width;
-    for (let barIndex = 0; barIndex < numBars; barIndex++) {
-        const x = barIndex;
-        if (x >= w)
-            break;
-        const peakIndex = Math.floor((barIndex / numBars) * peaks.length);
-        const peak = peaks[peakIndex] || 0;
-        const scaledPeak = peak * volume;
-        const halfBar = Math.max(0, Math.min(height / 2, (scaledPeak * height) / 2));
-        if (halfBar === 0)
-            continue;
-        const mid = height / 2;
-        const barY = Math.round(mid - halfBar);
-        const barEnd = Math.round(mid + halfBar);
-        const isClipping = scaledPeak > 1;
-        const clipTopEnd = isClipping ? Math.min(barY + 2, barEnd) : barY;
-        const clipBotStart = isClipping ? Math.max(barEnd - 2, barY) : barEnd;
-        for (let y = barY; y < clipTopEnd; y++) {
-            const idx = (y * w + x) * 4;
-            data[idx] = cr;
-            data[idx + 1] = cg;
-            data[idx + 2] = cb;
-            data[idx + 3] = ca;
-        }
-        for (let y = clipTopEnd; y < clipBotStart; y++) {
-            const idx = (y * w + x) * 4;
-            data[idx] = r;
-            data[idx + 1] = g;
-            data[idx + 2] = b;
-            data[idx + 3] = a;
-        }
-        for (let y = clipBotStart; y < barEnd; y++) {
-            const idx = (y * w + x) * 4;
-            data[idx] = cr;
-            data[idx + 1] = cg;
-            data[idx + 2] = cb;
-            data[idx + 3] = ca;
-        }
-    }
-    ctx.putImageData(imageData, 0, 0);
-};
-exports.drawBars = drawBars;

package/dist/components/load-waveform-peaks.d.ts

@@ -1,13 +0,0 @@
-declare const TARGET_SAMPLE_RATE = 100;
-export { TARGET_SAMPLE_RATE };
-type Progress = {
-    readonly peaks: Float32Array;
-    readonly completedPeaks: number;
-    readonly totalPeaks: number;
-    readonly final: boolean;
-};
-type LoadWaveformPeaksOptions = {
-    readonly onProgress?: (progress: Progress) => void;
-    readonly progressIntervalInMs?: number;
-};
-export declare function loadWaveformPeaks(url: string, signal: AbortSignal, options?: LoadWaveformPeaksOptions): Promise<Float32Array>;

package/dist/components/load-waveform-peaks.js

@@ -1,76 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TARGET_SAMPLE_RATE = void 0;
-exports.loadWaveformPeaks = loadWaveformPeaks;
-const mediabunny_1 = require("mediabunny");
-const waveform_peak_processor_1 = require("./waveform-peak-processor");
-const TARGET_SAMPLE_RATE = 100;
-exports.TARGET_SAMPLE_RATE = TARGET_SAMPLE_RATE;
-const DEFAULT_PROGRESS_INTERVAL_IN_MS = 50;
-const peaksCache = new Map();
-async function loadWaveformPeaks(url, signal, options) {
-    var _a, _b;
-    const cached = peaksCache.get(url);
-    if (cached) {
-        (0, waveform_peak_processor_1.emitWaveformProgress)({
-            peaks: cached,
-            completedPeaks: cached.length,
-            totalPeaks: cached.length,
-            final: true,
-            onProgress: options === null || options === void 0 ? void 0 : options.onProgress,
-        });
-        return cached;
-    }
-    const input = new mediabunny_1.Input({
-        formats: mediabunny_1.ALL_FORMATS,
-        source: new mediabunny_1.UrlSource(url),
-    });
-    try {
-        const audioTrack = await input.getPrimaryAudioTrack();
-        if (!audioTrack) {
-            return new Float32Array(0);
-        }
-        if (await audioTrack.isLive()) {
-            throw new Error('Live streams are not currently supported by Remotion. Sorry! Source: ' +
-                url);
-        }
-        if (await audioTrack.isRelativeToUnixEpoch()) {
-            throw new Error('Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: ' +
-                url);
-        }
-        const sampleRate = await audioTrack.getSampleRate();
-        const durationInSeconds = (_a = (await audioTrack.getDurationFromMetadata({ skipLiveWait: true }))) !== null && _a !== void 0 ? _a : (await audioTrack.computeDuration({ skipLiveWait: true }));
-        const totalPeaks = Math.ceil(durationInSeconds * TARGET_SAMPLE_RATE);
-        const samplesPerPeak = Math.max(1, Math.floor(sampleRate / TARGET_SAMPLE_RATE));
-        const sink = new mediabunny_1.AudioSampleSink(audioTrack);
-        const processor = (0, waveform_peak_processor_1.createWaveformPeakProcessor)({
-            totalPeaks,
-            samplesPerPeak,
-            onProgress: options === null || options === void 0 ? void 0 : options.onProgress,
-            progressIntervalInMs: (_b = options === null || options === void 0 ? void 0 : options.progressIntervalInMs) !== null && _b !== void 0 ? _b : DEFAULT_PROGRESS_INTERVAL_IN_MS,
-            now: () => Date.now(),
-        });
-        for await (const sample of sink.samples()) {
-            if (signal.aborted) {
-                sample.close();
-                return new Float32Array(0);
-            }
-            const bytesNeeded = sample.allocationSize({
-                format: 'f32',
-                planeIndex: 0,
-            });
-            const floats = new Float32Array(bytesNeeded / 4);
-            sample.copyTo(floats, { format: 'f32', planeIndex: 0 });
-            const channels = Math.max(1, sample.numberOfChannels);
-            sample.close();
-            processor.processSampleChunk(floats, channels);
-        }
-        processor.finalize();
-        const { peaks } = processor;
-        peaksCache.set(url, peaks);
-        return peaks;
-    }
-    finally {
-        input.dispose();
-    }
-}

package/dist/components/parse-color.d.ts

@@ -1 +0,0 @@
-export declare const parseColor: (color: string) => [number, number, number, number];

package/dist/components/parse-color.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseColor = void 0;
-const colorCache = new Map();
-const parseColor = (color) => {
-    const cached = colorCache.get(color);
-    if (cached)
-        return cached;
-    const ctx = new OffscreenCanvas(1, 1).getContext('2d');
-    ctx.fillStyle = color;
-    ctx.fillRect(0, 0, 1, 1);
-    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
-    const result = [r, g, b, a];
-    colorCache.set(color, result);
-    return result;
-};
-exports.parseColor = parseColor;

package/dist/components/slice-waveform-peaks.d.ts

@@ -1,7 +0,0 @@
-export declare const sliceWaveformPeaks: ({ durationInFrames, fps, peaks, playbackRate, startFrom, }: {
-    readonly peaks: Float32Array<ArrayBufferLike>;
-    readonly startFrom: number;
-    readonly durationInFrames: number;
-    readonly fps: number;
-    readonly playbackRate: number;
-}) => Float32Array<ArrayBufferLike>;