@remotion/studio 4.0.458 → 4.0.460

package/dist/esm/renderEntry.mjs

@@ -209,7 +209,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-261b3aa0.js").then(({ StudioInternals }) => {
+    import("./chunk-nrgs0ad5.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

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

@@ -1,5 +1,6 @@
-import type { TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, TSequence } from 'remotion';
 import type { TrackWithHash } from './get-timeline-sequence-sort-key';
-export declare const calculateTimeline: ({ sequences, }: {
+export declare const calculateTimeline: ({ sequences, overrideIdsToNodePaths, }: {
     sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
 }) => TrackWithHash[];

package/dist/helpers/calculate-timeline.js

@@ -19,7 +19,9 @@ const getInheritedLoopDisplay = (sequence, sequences) => {
     }
     return getInheritedLoopDisplay(parent, sequences);
 };
-const calculateTimeline = ({ sequences, }) => {
+const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
+    var _a;
+    var _b;
     const sortedSequences = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences);
     const tracks = [];
     if (sortedSequences.length === 0) {
@@ -41,6 +43,8 @@ const calculateTimeline = ({ sequences, }) => {
         const cascadedStart = (0, get_sequence_visible_range_1.getCascadedStart)(sequence, sortedSequences);
         const visibleStart = (0, get_sequence_visible_range_1.getTimelineVisibleStart)(sequence, sortedSequences);
         const visibleDuration = (0, get_sequence_visible_range_1.getTimelineVisibleDuration)(sequence, sortedSequences);
+        const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : null;
+        const nodePath = overrideId ? overrideIdsToNodePaths[overrideId] : null;
         tracks.push({
             sequence: {
                 ...sequence,
@@ -54,6 +58,7 @@ const calculateTimeline = ({ sequences, }) => {
             hash: actualHash,
             cascadedStart,
             cascadedDuration: sequence.duration,
+            nodePathInfo: nodePath ? { nodePath, index: 0 } : null,
         });
     }
     const uniqueTracks = [];
@@ -67,10 +72,24 @@ const calculateTimeline = ({ sequences, }) => {
     for (let i = 0; i < tracks.length; i++) {
         nonceRanks.set(tracks[i].sequence.id, i);
     }
-    return uniqueTracks.sort((a, b) => {
+    const sortedTracks = uniqueTracks.sort((a, b) => {
         const sortKeyA = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSequenceSortKey)(a, tracks, sameHashes, nonceRanks);
         const sortKeyB = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSequenceSortKey)(b, tracks, sameHashes, nonceRanks);
         return sortKeyA.localeCompare(sortKeyB);
     });
+    const nodePathIndexCounters = new Map();
+    return sortedTracks.map((track) => {
+        var _a;
+        if (track.nodePathInfo === null) {
+            return track;
+        }
+        const key = JSON.stringify(track.nodePathInfo.nodePath);
+        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 },
+        };
+    });
 };
 exports.calculateTimeline = calculateTimeline;

package/dist/helpers/get-timeline-sequence-layout.js

@@ -8,15 +8,15 @@ const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDura
     const base = durationInFrames === Infinity || lastFrame === 0
         ? fullWidth
         : (spatialDuration / lastFrame) * fullWidth;
-    return base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft;
+    return Math.max(0, base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft);
 };
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
-    const spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom);
+    const spatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom));
     // Unclipped spatial duration: without the lastFrame - startFrom constraint
-    const naturalSpatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
+    const naturalSpatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames - 1));
     const marginLeft = lastFrame === 0
         ? 0
         : (startFrom / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);

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

@@ -1,7 +1,12 @@
-import type { TSequence } from 'remotion';
+import type { SequenceNodePath, TSequence } from 'remotion';
+export type SequenceNodePathInfo = {
+    nodePath: SequenceNodePath;
+    index: number;
+};
 type Track = {
     sequence: TSequence;
     depth: number;
+    nodePathInfo: SequenceNodePathInfo | null;
 };
 export type TrackWithHash = Track & {
     hash: string;

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

@@ -1,5 +1,7 @@
 import { type CodeValues, type DragOverrides, type SchemaFieldInfo, type SequenceControls } from '@remotion/studio-shared';
-import type { EffectDefinitionAndStack, TSequence } from 'remotion';
+import type { EffectDefinitionAndStack, GetCodeValues, GetDragOverrides, TSequence } from 'remotion';
+import type { GetIsExpanded } from '../components/ExpandedTracksProvider';
+import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
 export type { CodeValues, DragOverrides, SchemaFieldInfo, SequenceControls };
 export { SCHEMA_FIELD_ROW_HEIGHT, UNSUPPORTED_FIELD_ROW_HEIGHT, getFieldsToShow, } from '@remotion/studio-shared';
 export declare const TIMELINE_PADDING = 16;
@@ -16,31 +18,38 @@ export type EffectSchemaFieldLabel = {
 export declare const getEffectSchemaLabels: (effect: EffectDefinitionAndStack<unknown>) => EffectSchemaFieldLabel[];
 export type TimelineTreeNode = {
     readonly kind: 'group';
-    readonly id: string;
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly label: string;
     readonly children: TimelineTreeNode[];
 } | {
     readonly kind: 'field';
-    readonly id: string;
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly label: string;
     readonly field: SchemaFieldInfo | null;
 };
-export declare const buildTimelineTree: ({ sequence, dragOverrides, codeValues, }: {
+export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getCodeValues, }: {
     sequence: TSequence;
-    dragOverrides: DragOverrides;
-    codeValues: CodeValues;
+    nodePathInfo: SequenceNodePathInfo;
+    getDragOverrides: GetDragOverrides;
+    getCodeValues: GetCodeValues;
 }) => TimelineTreeNode[];
 export type FlatTreeRow = {
     readonly node: TimelineTreeNode;
     readonly depth: number;
 };
-export declare const flattenVisibleTreeNodes: ({ nodes, expandedTracks, depth, }: {
+export declare const flattenVisibleTreeNodes: ({ nodes, getIsExpanded, depth, }: {
     nodes: TimelineTreeNode[];
-    expandedTracks: Record<string, boolean>;
+    getIsExpanded: GetIsExpanded;
     depth?: number | undefined;
 }) => FlatTreeRow[];
 export declare const getTreeRowHeight: (node: TimelineTreeNode) => number;
-export declare const getExpandedTrackHeight: (sequence: TSequence, expandedTracks: Record<string, boolean>, dragOverrides: DragOverrides, codeValues: CodeValues) => number;
+export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues, }: {
+    sequence: TSequence;
+    nodePathInfo: SequenceNodePathInfo;
+    getIsExpanded: GetIsExpanded;
+    getDragOverrides: GetDragOverrides;
+    getCodeValues: GetCodeValues;
+}) => number;
 export declare const TIMELINE_LAYER_HEIGHT_VIDEO = 75;
 export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 50;
 export declare const TIMELINE_LAYER_HEIGHT_AUDIO = 25;

package/dist/helpers/timeline-layout.js

@@ -23,25 +23,29 @@ const getEffectSchemaLabels = (effect) => {
     }));
 };
 exports.getEffectSchemaLabels = getEffectSchemaLabels;
-const buildTimelineTree = ({ sequence, dragOverrides, codeValues, }) => {
+const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getCodeValues, }) => {
     var _a;
     const roots = [];
+    const { nodePath, index } = nodePathInfo;
     if (sequence.effects.length > 0) {
         roots.push({
             kind: 'group',
-            id: `${sequence.id}::effects`,
+            nodePathInfo: { nodePath: [...nodePath, 'effects'], index },
             label: 'Effects',
             children: sequence.effects.map((effect, i) => {
-                const effectId = `${sequence.id}::effects::${i}`;
+                const effectNodePath = [...nodePath, 'effects', i];
                 return {
                     kind: 'group',
-                    id: effectId,
+                    nodePathInfo: { nodePath: effectNodePath, index },
                     label: effect.definition.label,
                     children: (0, exports.getEffectSchemaLabels)(effect).map((label) => {
                         var _a;
                         return ({
                             kind: 'field',
-                            id: `${effectId}::${label.key}`,
+                            nodePathInfo: {
+                                nodePath: [...effectNodePath, label.key],
+                                index,
+                            },
                             label: (_a = label.description) !== null && _a !== void 0 ? _a : label.key,
                             field: null,
                         });
@@ -53,15 +57,15 @@ const buildTimelineTree = ({ sequence, dragOverrides, codeValues, }) => {
     const controlFields = (0, studio_shared_1.getFieldsToShow)({
         schema: sequence.controls.schema,
         currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
-        dragOverrides,
-        codeValues,
-        overrideId: sequence.controls.overrideId,
+        getDragOverrides,
+        getCodeValues,
+        nodePath,
     });
     if (controlFields && controlFields.length > 0) {
         for (const f of controlFields) {
             roots.push({
                 kind: 'field',
-                id: `${sequence.id}::controls::${f.key}`,
+                nodePathInfo: { nodePath: [...nodePath, 'controls', f.key], index },
                 label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
                 field: f,
             });
@@ -70,15 +74,14 @@ const buildTimelineTree = ({ sequence, dragOverrides, codeValues, }) => {
     return roots;
 };
 exports.buildTimelineTree = buildTimelineTree;
-const flattenVisibleTreeNodes = ({ nodes, expandedTracks, depth = 0, }) => {
-    var _a;
+const flattenVisibleTreeNodes = ({ nodes, getIsExpanded, depth = 0, }) => {
     const out = [];
     for (const node of nodes) {
         out.push({ node, depth });
-        if (node.kind === 'group' && ((_a = expandedTracks[node.id]) !== null && _a !== void 0 ? _a : false)) {
+        if (node.kind === 'group' && getIsExpanded(node.nodePathInfo)) {
             out.push(...(0, exports.flattenVisibleTreeNodes)({
                 nodes: node.children,
-                expandedTracks,
+                getIsExpanded,
                 depth: depth + 1,
             }));
         }
@@ -93,9 +96,14 @@ const getTreeRowHeight = (node) => {
     return exports.TREE_GROUP_ROW_HEIGHT;
 };
 exports.getTreeRowHeight = getTreeRowHeight;
-const getExpandedTrackHeight = (sequence, expandedTracks, dragOverrides, codeValues) => {
-    const tree = (0, exports.buildTimelineTree)({ sequence, dragOverrides, codeValues });
-    const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, expandedTracks });
+const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues, }) => {
+    const tree = (0, exports.buildTimelineTree)({
+        sequence,
+        nodePathInfo,
+        getDragOverrides,
+        getCodeValues,
+    });
+    const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded });
     if (flat.length === 0) {
         return exports.TIMELINE_TRACK_EXPANDED_HEIGHT;
     }

package/dist/icons/Checkmark.d.ts

@@ -1 +1,4 @@
-export declare const Checkmark: () => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const Checkmark: React.FC<{
+    readonly size?: number;
+}>;

package/dist/icons/Checkmark.js

@@ -2,9 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkmark = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style = {
-    width: 14,
-    height: 14,
-};
-const Checkmark = () => (jsx_runtime_1.jsx("svg", { focusable: "false", role: "img", viewBox: "0 0 512 512", style: style, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
+const Checkmark = ({ size = 14 }) => (jsx_runtime_1.jsx("svg", { focusable: "false", role: "img", viewBox: "0 0 512 512", style: { width: size, height: size }, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
 exports.Checkmark = Checkmark;

package/dist/icons/caret.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 export declare const CaretRight: () => import("react/jsx-runtime").JSX.Element;
-export declare const CaretDown: () => import("react/jsx-runtime").JSX.Element;
+export declare const CaretDown: React.FC<{
+    readonly small?: boolean;
+}>;
 export declare const AngleDown: React.FC<{
     readonly down: boolean;
 }>;

package/dist/icons/caret.js

@@ -10,13 +10,16 @@ const caret = {
 const caretDown = {
     width: 10,
 };
+const caretDownSmall = {
+    width: 7,
+};
 const angleDown = {
     width: 10,
 };
 const CaretRight = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 192 512", style: caret, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
 exports.CaretRight = CaretRight;
-const CaretDown = () => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", style: caretDown, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
+const CaretDown = ({ small = false, }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", style: small ? caretDownSmall : caretDown, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
 };
 exports.CaretDown = CaretDown;
 const AngleDown = ({ down }) => {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.458",
+	"version": "4.0.460",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,13 +26,14 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.458",
-		"@remotion/player": "4.0.458",
-		"@remotion/media-utils": "4.0.458",
-		"@remotion/renderer": "4.0.458",
-		"@remotion/web-renderer": "4.0.458",
-		"@remotion/studio-shared": "4.0.458",
-		"@remotion/zod-types": "4.0.458",
+		"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",
 		"mediabunny": "1.42.0",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -43,7 +44,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.458",
+		"@remotion/eslint-config-internal": "4.0.460",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/looped-media-timeline.d.ts

@@ -1,6 +0,0 @@
-import type { LoopDisplay } from 'remotion';
-export declare const shouldTileLoopDisplay: (loopDisplay: LoopDisplay | undefined) => loopDisplay is LoopDisplay;
-export declare const getLoopDisplayWidth: ({ visualizationWidth, loopDisplay, }: {
-    visualizationWidth: number;
-    loopDisplay: LoopDisplay | undefined;
-}) => number;

package/dist/components/looped-media-timeline.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLoopDisplayWidth = exports.shouldTileLoopDisplay = void 0;
-const shouldTileLoopDisplay = (loopDisplay) => {
-    return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
-};
-exports.shouldTileLoopDisplay = shouldTileLoopDisplay;
-const getLoopDisplayWidth = ({ visualizationWidth, loopDisplay, }) => {
-    if (!(0, exports.shouldTileLoopDisplay)(loopDisplay)) {
-        return visualizationWidth;
-    }
-    return visualizationWidth / loopDisplay.numberOfTimes;
-};
-exports.getLoopDisplayWidth = getLoopDisplayWidth;

package/dist/helpers/extract-frames.d.ts

@@ -1,18 +0,0 @@
-import type { VideoSample } from 'mediabunny';
-type Options = {
-    track: {
-        width: number;
-        height: number;
-    };
-    container: string;
-    durationInSeconds: number | null;
-};
-export type ExtractFramesTimestampsInSecondsFn = (options: Options) => Promise<number[]> | number[];
-export type ExtractFramesProps = {
-    src: string;
-    timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn;
-    onVideoSample: (sample: VideoSample) => void;
-    signal?: AbortSignal;
-};
-export declare function extractFrames({ src, timestampsInSeconds, onVideoSample, signal }: ExtractFramesProps): Promise<void>;
-export {};

package/dist/helpers/extract-frames.js

@@ -1,87 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractFrames = extractFrames;
-const mediabunny_1 = require("mediabunny");
-const get_duration_or_compute_1 = require("./get-duration-or-compute");
-async function extractFrames({ src, timestampsInSeconds, onVideoSample, signal, }) {
-    var _a;
-    const input = new mediabunny_1.Input({
-        formats: mediabunny_1.ALL_FORMATS,
-        source: new mediabunny_1.UrlSource(src),
-    });
-    const dispose = () => {
-        input.dispose();
-    };
-    if (signal) {
-        signal.addEventListener('abort', dispose, { once: true });
-    }
-    try {
-        const [durationInSeconds, format, videoTrack] = await Promise.all([
-            (0, get_duration_or_compute_1.getDurationOrCompute)(input),
-            input.getFormat(),
-            input.getPrimaryVideoTrack(),
-        ]);
-        if (!videoTrack) {
-            throw new Error('No video track found in the input');
-        }
-        if (await videoTrack.isLive()) {
-            throw new Error('Live streams are not currently supported by Remotion. Sorry! Source: ' +
-                src);
-        }
-        if (await videoTrack.isRelativeToUnixEpoch()) {
-            throw new Error('Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: ' +
-                src);
-        }
-        const timestamps = typeof timestampsInSeconds === 'function'
-            ? await timestampsInSeconds({
-                track: {
-                    width: await videoTrack.getDisplayWidth(),
-                    height: await videoTrack.getDisplayHeight(),
-                },
-                container: format.name,
-                durationInSeconds,
-            })
-            : timestampsInSeconds;
-        if (timestamps.length === 0) {
-            return;
-        }
-        const sink = new mediabunny_1.VideoSampleSink(videoTrack);
-        const sampleIterator = sink.samplesAtTimestamps(timestamps);
-        try {
-            for await (const videoSample of sampleIterator) {
-                if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
-                    videoSample === null || videoSample === void 0 ? void 0 : videoSample.close();
-                    break;
-                }
-                if (!videoSample) {
-                    continue;
-                }
-                onVideoSample(videoSample);
-            }
-        }
-        finally {
-            // When input.dispose() causes the iterator to throw
-            // InputDisposedError, for-await does not call .return() on the
-            // iterator (it only does so on `break`). Explicitly call it so
-            // the iterator can close any internally buffered VideoSamples.
-            try {
-                await ((_a = sampleIterator.return) === null || _a === void 0 ? void 0 : _a.call(sampleIterator));
-            }
-            catch (_b) {
-                // Iterator already done or input disposed
-            }
-        }
-    }
-    catch (error) {
-        if (error instanceof mediabunny_1.InputDisposedError) {
-            return;
-        }
-        throw error;
-    }
-    finally {
-        dispose();
-        if (signal) {
-            signal.removeEventListener('abort', dispose);
-        }
-    }
-}

package/dist/helpers/frame-database.d.ts

@@ -1,16 +0,0 @@
-export type FrameDatabaseKey = string & {
-    __brand: 'FrameDatabaseKey';
-};
-export declare const makeFrameDatabaseKey: (src: string, timestamp: number) => FrameDatabaseKey;
-export declare const getFrameDatabaseKeyPrefix: (src: string) => string;
-type VideoFrameAndLastUsed = {
-    frame: VideoFrame;
-    lastUsed: number;
-    size: number;
-};
-export declare const frameDatabase: Map<FrameDatabaseKey, VideoFrameAndLastUsed>;
-export declare const aspectRatioCache: Map<string, number>;
-export declare const getTimestampFromFrameDatabaseKey: (key: FrameDatabaseKey) => number;
-export declare const getAspectRatioFromCache: (src: string) => number | null;
-export declare const addFrameToCache: (key: FrameDatabaseKey, frame: VideoFrame) => void;
-export {};

package/dist/helpers/frame-database.js

@@ -1,65 +0,0 @@
-"use strict";
-// Cache the thumbnails of the timeline
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addFrameToCache = exports.getAspectRatioFromCache = exports.getTimestampFromFrameDatabaseKey = exports.aspectRatioCache = exports.frameDatabase = exports.getFrameDatabaseKeyPrefix = exports.makeFrameDatabaseKey = void 0;
-const KEY_SEPARATOR = '|';
-const makeFrameDatabaseKey = (src, timestamp) => `${src}${KEY_SEPARATOR}${timestamp}`;
-exports.makeFrameDatabaseKey = makeFrameDatabaseKey;
-const getFrameDatabaseKeyPrefix = (src) => {
-    return `${src}${KEY_SEPARATOR}`;
-};
-exports.getFrameDatabaseKeyPrefix = getFrameDatabaseKeyPrefix;
-const MAX_CACHE_SIZE_BYTES = 10 * 1024 * 1024; // 10 MB
-let totalCacheSize = 0;
-exports.frameDatabase = new Map();
-exports.aspectRatioCache = new Map();
-const getTimestampFromFrameDatabaseKey = (key) => {
-    const split = key.split(KEY_SEPARATOR);
-    return Number(split[split.length - 1]);
-};
-exports.getTimestampFromFrameDatabaseKey = getTimestampFromFrameDatabaseKey;
-const getAspectRatioFromCache = (src) => {
-    const cached = exports.aspectRatioCache.get(src);
-    if (cached) {
-        return cached;
-    }
-    return null;
-};
-exports.getAspectRatioFromCache = getAspectRatioFromCache;
-const evictLRU = () => {
-    while (totalCacheSize > MAX_CACHE_SIZE_BYTES && exports.frameDatabase.size > 0) {
-        let oldestKey;
-        let oldestTime = Infinity;
-        for (const [key, candidate] of exports.frameDatabase) {
-            if (candidate.lastUsed < oldestTime) {
-                oldestTime = candidate.lastUsed;
-                oldestKey = key;
-            }
-        }
-        if (!oldestKey) {
-            break;
-        }
-        const entry = exports.frameDatabase.get(oldestKey);
-        if (entry) {
-            totalCacheSize -= entry.size;
-            entry.frame.close();
-            exports.frameDatabase.delete(oldestKey);
-        }
-    }
-};
-const addFrameToCache = (key, frame) => {
-    const existing = exports.frameDatabase.get(key);
-    if (existing) {
-        totalCacheSize -= existing.size;
-        existing.frame.close();
-    }
-    const size = frame.allocationSize();
-    totalCacheSize += size;
-    exports.frameDatabase.set(key, {
-        frame,
-        lastUsed: Date.now(),
-        size,
-    });
-    evictLRU();
-};
-exports.addFrameToCache = addFrameToCache;

package/dist/helpers/resize-video-frame.d.ts

@@ -1,4 +0,0 @@
-export declare const resizeVideoFrame: ({ frame, scale, }: {
-    frame: VideoFrame;
-    scale: number;
-}) => VideoFrame;

package/dist/helpers/resize-video-frame.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.resizeVideoFrame = void 0;
-const calculateNewDimensionsFromScale = ({ width, height, scale, }) => {
-    const scaledWidth = Math.round(width * scale);
-    const scaledHeight = Math.round(height * scale);
-    return {
-        width: scaledWidth,
-        height: scaledHeight,
-    };
-};
-const resizeVideoFrame = ({ frame, scale, }) => {
-    var _a;
-    // No resize, no rotation
-    if (scale === 1) {
-        return frame;
-    }
-    const { width, height } = calculateNewDimensionsFromScale({
-        height: frame.displayHeight,
-        width: frame.displayWidth,
-        scale,
-    });
-    const canvas = new OffscreenCanvas(width, height);
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        throw new Error('Could not get 2d context');
-    }
-    canvas.width = width;
-    canvas.height = height;
-    ctx.scale(scale, scale);
-    ctx.drawImage(frame, 0, 0);
-    return new VideoFrame(canvas, {
-        displayHeight: height,
-        displayWidth: width,
-        duration: (_a = frame.duration) !== null && _a !== void 0 ? _a : undefined,
-        timestamp: frame.timestamp,
-    });
-};
-exports.resizeVideoFrame = resizeVideoFrame;