@remotion/cli 4.0.111 → 4.0.113

package/dist/editor/helpers/document-title.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setRenderJobs = exports.setUnsavedProps = exports.setCurrentCanvasContentId = void 0;
+const truthy_1 = require("../../truthy");
+let currentItemName = null;
+let unsavedProps = false;
+let tabInactive = false;
+let renderJobs = [];
+const setCurrentCanvasContentId = (id) => {
+    if (!id) {
+        currentItemName = id;
+        updateTitle();
+        return;
+    }
+    const idWithoutFolder = id.split('/').pop();
+    currentItemName = idWithoutFolder;
+    updateTitle();
+};
+exports.setCurrentCanvasContentId = setCurrentCanvasContentId;
+const setUnsavedProps = (unsaved) => {
+    window.remotion_unsavedProps = unsaved;
+    unsavedProps = unsaved;
+};
+exports.setUnsavedProps = setUnsavedProps;
+const setRenderJobs = (jobs) => {
+    renderJobs = jobs;
+    updateTitle();
+};
+exports.setRenderJobs = setRenderJobs;
+document.addEventListener('visibilitychange', () => {
+    tabInactive = document.visibilityState === 'hidden';
+    updateTitle();
+});
+const productName = 'Remotion Studio';
+const suffix = `- ${productName}`;
+const updateTitle = () => {
+    if (!currentItemName) {
+        document.title = productName;
+        return;
+    }
+    const currentCompTitle = `${currentItemName} / ${window.remotion_projectName}`;
+    document.title = [
+        getProgressInBrackets(currentItemName, renderJobs),
+        unsavedProps && tabInactive ? '✏️' : null,
+        `${currentCompTitle} ${suffix}`,
+    ]
+        .filter(truthy_1.truthy)
+        .join(' ');
+};
+const getProgressInBrackets = (selectedCompositionId, jobs) => {
+    const currentRender = jobs.find((job) => job.status === 'running');
+    if (!currentRender) {
+        return null;
+    }
+    if (currentRender.status !== 'running') {
+        throw new Error('expected running job');
+    }
+    const progInPercent = Math.ceil(currentRender.progress.value * 100);
+    const progressInBrackets = currentRender.compositionId === selectedCompositionId
+        ? `[${progInPercent}%]`
+        : `[${progInPercent}% ${currentRender.compositionId}]`;
+    return progressInBrackets;
+};
+document.addEventListener('visibilitychange', () => {
+    tabInactive = document.visibilityState === 'hidden';
+    updateTitle();
+});

package/dist/editor/helpers/editor-ruler.d.ts

@@ -0,0 +1,53 @@
+import type { Guide } from '../state/editor-guides';
+type Orientation = 'horizontal' | 'vertical';
+export declare const drawGuide: ({ selectedGuide, scale, startMarking, context, canvasHeight, canvasWidth, orientation, originOffset, }: {
+    selectedGuide: Guide;
+    scale: number;
+    startMarking: number;
+    context: CanvasRenderingContext2D;
+    canvasHeight: number;
+    canvasWidth: number;
+    orientation: Orientation;
+    originOffset: number;
+}) => void;
+export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, }: {
+    scale: number;
+    points: Array<{
+        position: number;
+        value: number;
+    }>;
+    startMarking: number;
+    originOffset: number;
+    markingGaps: number;
+    orientation: 'horizontal' | 'vertical';
+    rulerCanvasRef: React.RefObject<HTMLCanvasElement>;
+    selectedGuide: Guide | null;
+}) => void;
+export declare const getRulerPoints: ({ rulerScaleRange, rulerMarkingGaps, scale, }: {
+    rulerScaleRange: {
+        start: number;
+        end: number;
+    };
+    rulerMarkingGaps: number;
+    scale: number;
+}) => {
+    points: {
+        value: number;
+        position: number;
+    }[];
+    startMarking: number;
+};
+export declare const rulerValueToPosition: ({ value, startMarking, scale, }: {
+    value: number;
+    startMarking: number;
+    scale: number;
+}) => number;
+export declare const getRulerScaleRange: ({ canvasLength, containerRef, scale, }: {
+    canvasLength: number;
+    containerRef: React.RefObject<HTMLDivElement>;
+    scale: number;
+}) => {
+    start: number;
+    end: number;
+};
+export {};

package/dist/editor/helpers/editor-ruler.js

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRulerScaleRange = exports.rulerValueToPosition = exports.getRulerPoints = exports.drawMarkingOnRulerCanvas = exports.drawGuide = 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 = (0, exports.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();
+};
+exports.drawGuide = drawGuide;
+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) {
+        (0, exports.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: (0, exports.rulerValueToPosition)({
+                scale,
+                startMarking,
+                value: i * rulerMarkingGaps,
+            }),
+        });
+    }
+    return {
+        points,
+        startMarking,
+    };
+};
+exports.getRulerPoints = getRulerPoints;
+const rulerValueToPosition = ({ value, startMarking, scale, }) => {
+    return (value + startMarking) * scale;
+};
+exports.rulerValueToPosition = rulerValueToPosition;
+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/editor/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/editor/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/editor/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/editor/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/editor/helpers/get-left-of-timeline-slider.d.ts

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

package/dist/editor/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/editor/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/editor/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/editor/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/editor/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 + (parentSequence.showInTimeline ? 1 : 0));
+};
+exports.getTimelineNestedLevel = getTimelineNestedLevel;

package/dist/editor/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/editor/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/editor/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;
+};

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineSequenceLayout = exports.SEQUENCE_BORDER_WIDTH = void 0;
+const timeline_layout_1 = require("./timeline-layout");
+exports.SEQUENCE_BORDER_WIDTH = 1;
+const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDuration, nonNegativeMarginLeft, }) => {
+    const fullWidth = windowWidth - timeline_layout_1.TIMELINE_PADDING * 2;
+    const base = durationInFrames === Infinity || lastFrame === 0
+        ? fullWidth
+        : (spatialDuration / lastFrame) * fullWidth;
+    return base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft;
+};
+const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }) => {
+    var _a;
+    const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
+    const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+    let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom);
+    const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
+    const shouldAddHalfAFrameAtStart = startFrom > 0;
+    if (shouldAddHalfAFrameAtEnd) {
+        spatialDuration += 0.5;
+    }
+    if (shouldAddHalfAFrameAtStart) {
+        spatialDuration += 0.5;
+    }
+    const startFromWithOffset = shouldAddHalfAFrameAtStart
+        ? startFrom - 0.5
+        : startFrom;
+    const marginLeft = lastFrame === 0
+        ? 0
+        : (startFromWithOffset / lastFrame) *
+            (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
+    const nonNegativeMarginLeft = Math.min(marginLeft, 0);
+    return {
+        marginLeft: Math.round(Math.max(marginLeft, 0)),
+        width: Math.floor(getWidthOfTrack({
+            durationInFrames,
+            lastFrame,
+            nonNegativeMarginLeft,
+            spatialDuration,
+            windowWidth,
+        })),
+    };
+};
+exports.getTimelineSequenceLayout = getTimelineSequenceLayout;

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

@@ -0,0 +1,18 @@
+import type { TSequence } from 'remotion';
+type Track = {
+    sequence: TSequence;
+    depth: number;
+};
+export type TrackWithHash = Track & {
+    hash: string;
+    canCollapse: boolean;
+};
+export type TrackWithHashAndOriginalTimings = TrackWithHash & {
+    hash: string;
+    cascadedStart: number;
+    cascadedDuration: number;
+};
+export declare const getTimelineSequenceSequenceSortKey: (track: TrackWithHash, tracks: TrackWithHash[], sameHashes?: {
+    [hash: string]: string[];
+}) => string;
+export {};