@remotion/studio 4.0.80

package/dist/helpers/editor-ruler.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRulerScaleRange = exports.getRulerPoints = exports.drawMarkingOnRulerCanvas = void 0;
+const editor_rulers_1 = require("../state/editor-rulers");
+const colors_1 = require("./colors");
+const drawLabel = ({ orientation, context, label, originDistance, color, }) => {
+    context.fillStyle = color;
+    if (orientation === 'horizontal') {
+        context.fillText(label, originDistance + 4, 16);
+    }
+    else {
+        context.rotate(-Math.PI / 2);
+        context.fillText(label, -originDistance + 4, 16);
+        context.rotate(Math.PI / 2);
+    }
+};
+const drawGradient = ({ orientation, context, originDistance, canvasHeight, canvasWidth, }) => {
+    const size = 250;
+    const startX = orientation === 'horizontal' ? originDistance - size / 2 : 0;
+    const startY = orientation === 'horizontal' ? 0 : originDistance - size / 2;
+    const endX = orientation === 'horizontal' ? originDistance + size / 2 : canvasWidth;
+    const endY = orientation === 'horizontal' ? canvasHeight : originDistance + size / 2;
+    const grd = context.createLinearGradient(startX, startY, endX, endY);
+    grd.addColorStop(0, colors_1.BACKGROUND__TRANSPARENT);
+    grd.addColorStop(0.25, colors_1.BACKGROUND);
+    grd.addColorStop(0.75, colors_1.BACKGROUND);
+    grd.addColorStop(1, colors_1.BACKGROUND__TRANSPARENT);
+    context.fillStyle = grd;
+    context.fillRect(startX, startY, endX - startX, endY - startY);
+};
+const drawGuide = ({ selectedGuide, scale, startMarking, context, canvasHeight, canvasWidth, orientation, originOffset, }) => {
+    const originDistance = rulerValueToPosition({
+        value: selectedGuide.position,
+        startMarking,
+        scale,
+    }) +
+        originOffset -
+        startMarking * scale;
+    drawGradient({
+        canvasHeight,
+        context,
+        orientation,
+        originDistance,
+        canvasWidth,
+    });
+    context.strokeStyle = colors_1.SELECTED_GUIDE;
+    context.lineWidth = 1;
+    context.beginPath();
+    if (orientation === 'horizontal' &&
+        selectedGuide.orientation === 'horizontal') {
+        return;
+    }
+    if (orientation === 'vertical' && selectedGuide.orientation === 'vertical') {
+        return;
+    }
+    if (orientation === 'vertical' &&
+        selectedGuide.orientation === 'horizontal') {
+        context.moveTo(0, originDistance);
+        context.lineTo(canvasWidth, originDistance);
+        drawLabel({
+            context,
+            label: selectedGuide.position.toString(),
+            originDistance,
+            orientation,
+            color: colors_1.SELECTED_GUIDE,
+        });
+    }
+    else if (orientation === 'horizontal' &&
+        selectedGuide.orientation === 'vertical') {
+        context.moveTo(originDistance, 0);
+        context.lineTo(originDistance, canvasHeight);
+        drawLabel({
+            context,
+            label: selectedGuide.position.toString(),
+            originDistance,
+            orientation,
+            color: colors_1.SELECTED_GUIDE,
+        });
+    }
+    context.stroke();
+};
+const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, }) => {
+    const canvas = rulerCanvasRef.current;
+    if (!canvas)
+        return;
+    const context = canvas.getContext('2d');
+    if (!context)
+        return;
+    const canvasWidth = canvas.clientWidth * window.devicePixelRatio;
+    const canvasHeight = canvas.clientHeight * window.devicePixelRatio;
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+    context.scale(window.devicePixelRatio, window.devicePixelRatio);
+    context.clearRect(0, 0, canvasWidth, canvasHeight);
+    context.strokeStyle = colors_1.RULER_COLOR;
+    context.lineWidth = 1;
+    context.beginPath();
+    points.forEach((point) => {
+        context.strokeStyle = colors_1.RULER_COLOR;
+        context.lineWidth = 1;
+        const originDistance = point.position + originOffset - startMarking * scale;
+        context.beginPath();
+        if (orientation === 'horizontal') {
+            context.moveTo(originDistance, 0);
+            context.lineTo(originDistance, canvasHeight);
+        }
+        else {
+            context.moveTo(0, originDistance);
+            context.lineTo(canvasWidth, originDistance);
+        }
+        for (let i = 1; i < 5; i++) {
+            const markingOffsetXY = i * markingGaps * scale;
+            if (orientation === 'horizontal') {
+                context.moveTo(originDistance + markingOffsetXY / 5, 0);
+                context.lineTo(originDistance + markingOffsetXY / 5, 4);
+            }
+            else {
+                context.moveTo(0, originDistance + markingOffsetXY / 5);
+                context.lineTo(4, originDistance + markingOffsetXY / 5);
+            }
+        }
+        context.stroke();
+        context.font = '10px Arial, Helvetica, sans-serif';
+        context.textAlign = 'left';
+        context.fillStyle = colors_1.RULER_COLOR;
+        drawLabel({
+            orientation,
+            context,
+            label: point.value.toString(),
+            originDistance,
+            color: colors_1.RULER_COLOR,
+        });
+    });
+    if (selectedGuide && orientation !== selectedGuide.orientation) {
+        drawGuide({
+            canvasHeight,
+            canvasWidth,
+            context,
+            orientation,
+            originOffset,
+            scale,
+            selectedGuide,
+            startMarking,
+        });
+    }
+};
+exports.drawMarkingOnRulerCanvas = drawMarkingOnRulerCanvas;
+const getRulerPoints = ({ rulerScaleRange, rulerMarkingGaps, scale, }) => {
+    const points = [];
+    const startPoint = Math.ceil(rulerScaleRange.start / rulerMarkingGaps);
+    const endPoint = Math.floor(rulerScaleRange.end / rulerMarkingGaps);
+    const startMarking = startPoint * rulerMarkingGaps;
+    for (let i = startPoint; i <= endPoint; i++) {
+        points.push({
+            value: i * rulerMarkingGaps,
+            position: rulerValueToPosition({
+                scale,
+                startMarking,
+                value: i * rulerMarkingGaps,
+            }),
+        });
+    }
+    return {
+        points,
+        startMarking,
+    };
+};
+exports.getRulerPoints = getRulerPoints;
+const rulerValueToPosition = ({ value, startMarking, scale, }) => {
+    return (value + startMarking) * scale;
+};
+const getRulerScaleRange = ({ canvasLength, containerRef, scale, }) => {
+    var _a, _b;
+    const scaleRangeBeyondCanvas = (((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) ||
+        editor_rulers_1.MINIMUM_VISIBLE_CANVAS_SIZE - editor_rulers_1.MINIMUM_VISIBLE_CANVAS_SIZE) / scale;
+    return {
+        start: -scaleRangeBeyondCanvas,
+        end: scaleRangeBeyondCanvas + canvasLength,
+    };
+};
+exports.getRulerScaleRange = getRulerScaleRange;

package/dist/helpers/event-source.d.ts

@@ -0,0 +1,3 @@
+import type { EventSourceEvent } from '../event-source-events';
+export declare const subscribeToEvent: (type: EventSourceEvent['type'], listener: (event: EventSourceEvent) => void) => () => void;
+export declare const openEventSource: () => void;

package/dist/helpers/event-source.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openEventSource = exports.subscribeToEvent = void 0;
+const remotion_1 = require("remotion");
+const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
+const context_1 = require("../components/RenderQueue/context");
+const client_id_1 = require("./client-id");
+let source = null;
+let listeners = [];
+const subscribeToEvent = (type, listener) => {
+    listeners.push({ type, listener });
+    return () => {
+        listeners = listeners.filter((l) => l.type !== type || l.listener !== listener);
+    };
+};
+exports.subscribeToEvent = subscribeToEvent;
+const openEventSource = () => {
+    source = new EventSource('/events');
+    source.addEventListener('message', (event) => {
+        var _a, _b;
+        const newEvent = JSON.parse(event.data);
+        if (newEvent.type === 'new-input-props' ||
+            newEvent.type === 'new-env-variables') {
+            window.location.reload();
+        }
+        if (newEvent.type === 'init') {
+            (_a = client_id_1.studioServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({
+                type: 'connected',
+                clientId: newEvent.clientId,
+            });
+        }
+        if (newEvent.type === 'render-queue-updated') {
+            (_b = context_1.renderJobsRef.current) === null || _b === void 0 ? void 0 : _b.updateRenderJobs(newEvent.queue);
+        }
+        if (newEvent.type === 'render-job-failed') {
+            (0, NotificationCenter_1.sendErrorNotification)(`Rendering "${newEvent.compositionId}" failed`);
+        }
+        if (newEvent.type === 'new-public-folder') {
+            const payload = {
+                files: newEvent.files,
+            };
+            window.dispatchEvent(new CustomEvent(remotion_1.Internals.WATCH_REMOTION_STATIC_FILES, {
+                detail: payload,
+            }));
+            window.remotion_staticFiles = newEvent.files;
+            window.remotion_publicFolderExists = newEvent.folderExists;
+        }
+        listeners.forEach((l) => {
+            if (l.type === newEvent.type) {
+                l.listener(newEvent);
+            }
+        });
+    });
+    source.addEventListener('open', () => {
+        source.addEventListener('error', () => {
+            var _a;
+            (_a = client_id_1.studioServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({ type: 'disconnected' });
+            // Display an error message that the studio server has disconnected.
+            source === null || source === void 0 ? void 0 : source.close();
+            // Retry later
+            setTimeout(() => {
+                (0, exports.openEventSource)();
+            }, 1000);
+        }, { once: true });
+    });
+};
+exports.openEventSource = openEventSource;

package/dist/helpers/format-bytes.d.ts

@@ -0,0 +1,6 @@
+export declare const formatBytes: (number: number, options?: Intl.NumberFormatOptions & {
+    locale: string;
+    bits?: boolean;
+    binary?: boolean;
+    signed: boolean;
+}) => string;

package/dist/helpers/format-bytes.js

@@ -0,0 +1,103 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatBytes = void 0;
+const BYTE_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+const BIBYTE_UNITS = [
+    'B',
+    'kiB',
+    'MiB',
+    'GiB',
+    'TiB',
+    'PiB',
+    'EiB',
+    'ZiB',
+    'YiB',
+];
+const BIT_UNITS = [
+    'b',
+    'kbit',
+    'Mbit',
+    'Gbit',
+    'Tbit',
+    'Pbit',
+    'Ebit',
+    'Zbit',
+    'Ybit',
+];
+const BIBIT_UNITS = [
+    'b',
+    'kibit',
+    'Mibit',
+    'Gibit',
+    'Tibit',
+    'Pibit',
+    'Eibit',
+    'Zibit',
+    'Yibit',
+];
+/*
+Formats the given number using `Number#toLocaleString`.
+- If locale is a string, the value is expected to be a locale-key (for example: `de`).
+- If locale is true, the system default locale is used for translation.
+- If no value for locale is specified, the number is returned unmodified.
+*/
+const toLocaleString = (number, locale, options) => {
+    if (typeof locale === 'string' || Array.isArray(locale)) {
+        return number.toLocaleString(locale, options);
+    }
+    if (locale === true || options !== undefined) {
+        return number.toLocaleString(undefined, options);
+    }
+    return String(number);
+};
+const formatBytes = (number, options = {
+    locale: 'en-US',
+    signed: false,
+    maximumFractionDigits: 1,
+}) => {
+    if (!Number.isFinite(number)) {
+        throw new TypeError(`Expected a finite number, got ${typeof number}: ${number}`);
+    }
+    options = { bits: false, binary: false, ...options };
+    const UNITS = options.bits
+        ? options.binary
+            ? BIBIT_UNITS
+            : BIT_UNITS
+        : options.binary
+            ? BIBYTE_UNITS
+            : BYTE_UNITS;
+    if (options.signed && number === 0) {
+        return `0 $ {
+            UNITS[0]
+        }`;
+    }
+    const isNegative = number < 0;
+    const prefix = isNegative ? '-' : options.signed ? '+' : '';
+    if (isNegative) {
+        number = -number;
+    }
+    let localeOptions;
+    if (options.minimumFractionDigits !== undefined) {
+        localeOptions = {
+            minimumFractionDigits: options.minimumFractionDigits,
+        };
+    }
+    if (options.maximumFractionDigits !== undefined) {
+        localeOptions = {
+            maximumFractionDigits: options.maximumFractionDigits,
+            ...localeOptions,
+        };
+    }
+    if (number < 1) {
+        const numString = toLocaleString(number, options.locale, localeOptions);
+        return prefix + numString + ' ' + UNITS[0];
+    }
+    const exponent = Math.min(Math.floor(options.binary
+        ? Math.log(number) / Math.log(1024)
+        : Math.log10(number) / 3), UNITS.length - 1);
+    number /= (options.binary ? 1024 : 1000) ** exponent;
+    const numberString = toLocaleString(Number(number), options.locale, localeOptions);
+    const unit = UNITS[exponent];
+    return prefix + numberString + ' ' + unit;
+};
+exports.formatBytes = formatBytes;

package/dist/helpers/get-asset-metadata.d.ts

@@ -0,0 +1,11 @@
+import type { CanvasContent } from 'remotion';
+import type { Dimensions } from './is-current-selected-still';
+export declare const remotion_outputsBase: string;
+export type AssetMetadata = {
+    type: 'not-found';
+} | {
+    type: 'found';
+    size: number;
+    dimensions: Dimensions | 'none' | null;
+};
+export declare const getAssetMetadata: (canvasContent: CanvasContent) => Promise<AssetMetadata>;

package/dist/helpers/get-asset-metadata.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAssetMetadata = exports.remotion_outputsBase = void 0;
+const media_utils_1 = require("@remotion/media-utils");
+const remotion_1 = require("remotion");
+const Preview_1 = require("../components/Preview");
+exports.remotion_outputsBase = window.remotion_staticBase.replace('static', 'outputs');
+const getSrcFromCanvasContent = (canvasContent) => {
+    if (canvasContent.type === 'asset') {
+        return (0, remotion_1.staticFile)(canvasContent.asset);
+    }
+    if (canvasContent.type === 'composition') {
+        throw new Error('cannot get dimensions for composition');
+    }
+    return exports.remotion_outputsBase + canvasContent.path;
+};
+const getAssetMetadata = async (canvasContent) => {
+    const src = getSrcFromCanvasContent(canvasContent);
+    const file = await fetch(src, {
+        method: 'HEAD',
+    });
+    if (file.status === 404) {
+        return { type: 'not-found' };
+    }
+    if (file.status !== 200) {
+        throw new Error(`Expected status code 200 or 404 for file, got ${file.status}`);
+    }
+    const size = file.headers.get('content-length');
+    if (!size) {
+        throw new Error('Unexpected error: content-length is null');
+    }
+    const fileType = (0, Preview_1.getPreviewFileType)(src);
+    if (fileType === 'video') {
+        const resolution = await (0, media_utils_1.getVideoMetadata)(src);
+        return {
+            type: 'found',
+            size: Number(size),
+            dimensions: { width: resolution.width, height: resolution.height },
+        };
+    }
+    if (fileType === 'image') {
+        const resolution = await new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                resolve({
+                    type: 'found',
+                    size: Number(size),
+                    dimensions: { width: img.width, height: img.height },
+                });
+            };
+            img.onerror = () => {
+                reject(new Error('Failed to load image'));
+            };
+            img.src = src;
+        });
+        return resolution;
+    }
+    return {
+        type: 'found',
+        dimensions: 'none',
+        size: Number(size),
+    };
+};
+exports.getAssetMetadata = getAssetMetadata;

package/dist/helpers/get-effective-translation.d.ts

@@ -0,0 +1,26 @@
+import type { Size, Translation } from '@remotion/player';
+export declare const getEffectiveTranslation: ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }: {
+    canvasSize: Size;
+    scale: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    translation: {
+        x: number;
+        y: number;
+    };
+}) => {
+    x: number;
+    y: number;
+};
+export declare const getCenterPointWhileScrolling: ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }: {
+    size: Size;
+    clientX: number;
+    clientY: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    scale: number;
+    translation: Translation;
+}) => {
+    centerX: number;
+    centerY: number;
+};

package/dist/helpers/get-effective-translation.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+const getEffectiveXTranslation = ({ canvasSize, scale, compositionWidth, translation, }) => {
+    const maxTranslation = Math.abs(canvasSize.width / 2 +
+        (scale * compositionWidth) / 2 -
+        MUST_BE_INSIDE_CANVAS);
+    return Math.max(-maxTranslation, Math.min(translation.x, maxTranslation));
+};
+const MUST_BE_INSIDE_CANVAS = 50;
+const getEffectiveYTranslation = ({ canvasSize, scale, compositionHeight, translation, }) => {
+    const maxTranslation = Math.abs(canvasSize.height / 2 + (scale * compositionHeight) / 2) -
+        MUST_BE_INSIDE_CANVAS;
+    return Math.max(-maxTranslation, Math.min(translation.y, maxTranslation));
+};
+const getEffectiveTranslation = ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }) => {
+    return {
+        x: getEffectiveXTranslation({
+            canvasSize,
+            compositionWidth,
+            scale,
+            translation,
+        }),
+        y: getEffectiveYTranslation({
+            canvasSize,
+            compositionHeight,
+            scale,
+            translation,
+        }),
+    };
+};
+exports.getEffectiveTranslation = getEffectiveTranslation;
+const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
+    const mouseLeft = clientX - size.left;
+    const mouseTop = clientY - size.top;
+    const contentLeftPoint = size.width / 2 - (compositionWidth * scale) / 2 - translation.x;
+    const contentTopPoint = size.height / 2 - (compositionHeight * scale) / 2 - translation.y;
+    const offsetFromVideoLeft = Math.min(compositionWidth, Math.max(0, (mouseLeft - contentLeftPoint) / scale));
+    const offsetFromVideoTop = Math.min(compositionHeight, Math.max(0, (mouseTop - contentTopPoint) / scale));
+    return {
+        centerX: offsetFromVideoLeft,
+        centerY: offsetFromVideoTop,
+    };
+};
+exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;

package/dist/helpers/get-left-of-timeline-slider.d.ts

@@ -0,0 +1 @@
+export declare const getXPositionOfItemInTimelineImperatively: (frame: number, duration: number, width: number) => number;

package/dist/helpers/get-left-of-timeline-slider.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getXPositionOfItemInTimelineImperatively = void 0;
+const timeline_layout_1 = require("./timeline-layout");
+const getXPositionOfItemInTimelineImperatively = (frame, duration, width) => {
+    const proportion = frame / (duration - 1);
+    return proportion * (width - timeline_layout_1.TIMELINE_PADDING * 2) + timeline_layout_1.TIMELINE_PADDING;
+};
+exports.getXPositionOfItemInTimelineImperatively = getXPositionOfItemInTimelineImperatively;

package/dist/helpers/get-location-of-sequence.d.ts

@@ -0,0 +1 @@
+export declare const getLocationOfSequence: (stack: string | null) => import("../error-overlay/react-overlay/utils/stack-frame").StackFrame | null;

package/dist/helpers/get-location-of-sequence.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLocationOfSequence = void 0;
+const parser_1 = require("../error-overlay/react-overlay/utils/parser");
+const getLocationOfSequence = (stack) => {
+    if (!stack) {
+        return null;
+    }
+    const parsed = (0, parser_1.parseStack)(stack.split('\n'));
+    let i = 0;
+    while (i < parsed.length) {
+        const frame = parsed[i];
+        if (frame.functionName === 'apply') {
+            i++;
+            continue;
+        }
+        return frame;
+    }
+    return null;
+};
+exports.getLocationOfSequence = getLocationOfSequence;

package/dist/helpers/get-sequence-visible-range.d.ts

@@ -0,0 +1,4 @@
+import type { TSequence } from 'remotion';
+export declare const getCascadedStart: (sequence: TSequence, sequences: TSequence[]) => number;
+export declare const getTimelineVisibleStart: (sequence: TSequence, sequences: TSequence[]) => number;
+export declare const getTimelineVisibleDuration: (sequence: TSequence, sequences: TSequence[]) => number;

package/dist/helpers/get-sequence-visible-range.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineVisibleDuration = exports.getTimelineVisibleStart = exports.getCascadedStart = void 0;
+const getCascadedStart = (sequence, sequences) => {
+    if (!sequence.parent) {
+        return sequence.from;
+    }
+    const parent = sequences.find((s) => s.id === sequence.parent);
+    if (!parent) {
+        throw new TypeError('Parent not found for sequence ' + sequence.id);
+    }
+    return (0, exports.getCascadedStart)(parent, sequences) + sequence.from;
+};
+exports.getCascadedStart = getCascadedStart;
+const getTimelineVisibleStart = (sequence, sequences) => {
+    const cascadedStart = Math.max(0, (0, exports.getCascadedStart)(sequence, sequences));
+    if (!sequence.parent) {
+        return cascadedStart;
+    }
+    const parent = sequences.find((s) => s.id === sequence.parent);
+    if (!parent) {
+        throw new TypeError('Parent not found for sequence ' + sequence.id);
+    }
+    const timelineVisibleStart = (0, exports.getTimelineVisibleStart)(parent, sequences);
+    return Math.max(timelineVisibleStart, cascadedStart);
+};
+exports.getTimelineVisibleStart = getTimelineVisibleStart;
+const getTimelineVisibleDuration = (sequence, sequences) => {
+    const visibleDuration = sequence.duration + Math.min(sequence.from, 0);
+    if (!sequence.parent) {
+        return visibleDuration;
+    }
+    const parent = sequences.find((s) => s.id === sequence.parent);
+    if (!parent) {
+        throw new TypeError('Parent not found for sequence ' + sequence.id);
+    }
+    return Math.min(visibleDuration, (0, exports.getTimelineVisibleDuration)(parent, sequences));
+};
+exports.getTimelineVisibleDuration = getTimelineVisibleDuration;

package/dist/helpers/get-timeline-nestedness.d.ts

@@ -0,0 +1,2 @@
+import type { TSequence } from 'remotion';
+export declare const getTimelineNestedLevel: (sequence: TSequence, allSequences: TSequence[], depth: number) => number;

package/dist/helpers/get-timeline-nestedness.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineNestedLevel = void 0;
+const getTimelineNestedLevel = (sequence, allSequences, depth) => {
+    if (!sequence.parent) {
+        return depth;
+    }
+    const parentSequence = allSequences.find((s) => s.id === sequence.parent);
+    if (!parentSequence) {
+        throw new Error('has parentId but no parent');
+    }
+    return (0, exports.getTimelineNestedLevel)(parentSequence, allSequences, depth + 1);
+};
+exports.getTimelineNestedLevel = getTimelineNestedLevel;

package/dist/helpers/get-timeline-sequence-hash.d.ts

@@ -0,0 +1,6 @@
+import type { TSequence } from 'remotion';
+export declare const getTimelineSequenceHash: (sequence: TSequence, allSequences: TSequence[], hashesUsedInRoot: {
+    [rootId: string]: string[];
+}, cache: {
+    [sequenceId: string]: string;
+}) => string;

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineSequenceHash = void 0;
+// The goal for this function is to calculate an as unique as possible identifier
+// for a sequence based on it's properties. A sequence can be registered multiple times
+// from main preview and from thumbnails and we use this to deduplicate it.
+// This is why we don't use `id` properties as they will
+// differ as a hash.
+const getTimelineSequenceHash = (sequence, allSequences, hashesUsedInRoot, cache) => {
+    if (cache[sequence.id]) {
+        return cache[sequence.id];
+    }
+    const parent = allSequences.find((a) => a.id === sequence.parent);
+    const baseHash = [
+        parent
+            ? (0, exports.getTimelineSequenceHash)(parent, allSequences, hashesUsedInRoot, cache)
+            : null,
+        sequence.displayName,
+        sequence.duration,
+        sequence.from,
+        sequence.type,
+        sequence.type === 'audio' ? sequence.src : null,
+        sequence.type === 'audio' ? sequence.volume : null,
+        sequence.type === 'video' ? sequence.src : null,
+        sequence.type === 'video' ? sequence.volume : null,
+    ].join('-');
+    const actualHash = baseHash +
+        hashesUsedInRoot[sequence.rootId].filter((h) => h === baseHash).length;
+    hashesUsedInRoot[sequence.rootId].push(baseHash);
+    cache[sequence.id] = actualHash;
+    return actualHash;
+};
+exports.getTimelineSequenceHash = getTimelineSequenceHash;

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

@@ -0,0 +1,13 @@
+import type { VideoConfig } from 'remotion';
+export declare const SEQUENCE_BORDER_WIDTH = 1;
+export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }: {
+    durationInFrames: number;
+    startFrom: number;
+    startFromMedia: number;
+    maxMediaDuration: number | null;
+    video: VideoConfig;
+    windowWidth: number;
+}) => {
+    marginLeft: number;
+    width: number;
+};