@remotion/studio 4.0.515 → 4.0.517

package/dist/esm/renderEntry.mjs

@@ -4,7 +4,7 @@ import {
   WHITE,
   __require,
   __toESM
-} from "./chunk-s6k99gh2.js";
+} from "./chunk-4bxz1d3g.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -213,7 +213,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-v5a8vpv4.js").then(({ StudioInternals }) => {
+    import("./chunk-gzqm3g2m.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/add-asset-cache-bust.d.ts

@@ -0,0 +1,4 @@
+export declare const addAssetCacheBust: ({ fetchedAt, src, }: {
+    fetchedAt: number;
+    src: string;
+}) => string;

package/dist/helpers/add-asset-cache-bust.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addAssetCacheBust = void 0;
+const addAssetCacheBust = ({ fetchedAt, src, }) => {
+    if (src.startsWith('blob:')) {
+        return src;
+    }
+    return `${src}${src.includes('?') ? '&' : '?'}date=${fetchedAt}`;
+};
+exports.addAssetCacheBust = addAssetCacheBust;

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

@@ -1,7 +1 @@
-import type { OverrideIdToNodePaths, TSequence } from 'remotion';
-import type { TimelineTrackData } from './get-timeline-sequence-sort-key';
-export declare const calculateTimeline: ({ sequences, overrideIdsToNodePaths, compositions, }: {
-    sequences: TSequence[];
-    overrideIdsToNodePaths: OverrideIdToNodePaths;
-    compositions?: readonly import("remotion").AnyComposition[] | undefined;
-}) => TimelineTrackData[];
+export { calculateTimeline } from '@remotion/canvas';

package/dist/helpers/calculate-timeline.js

@@ -1,148 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateTimeline = void 0;
-const get_connected_compositions_1 = require("./get-connected-compositions");
-const get_sequence_visible_range_1 = require("./get-sequence-visible-range");
-const get_timeline_nestedness_1 = require("./get-timeline-nestedness");
-const get_timeline_sequence_sort_key_1 = require("./get-timeline-sequence-sort-key");
-const sort_by_nonce_history_1 = require("./sort-by-nonce-history");
-const timeline_node_path_key_1 = require("./timeline-node-path-key");
-const getInheritedLoopDisplay = (sequence, sequences) => {
-    if (sequence.loopDisplay) {
-        return sequence.loopDisplay;
-    }
-    if (!sequence.parent) {
-        return undefined;
-    }
-    const parent = sequences.find((s) => s.id === sequence.parent);
-    if (!parent) {
-        return undefined;
-    }
-    return getInheritedLoopDisplay(parent, sequences);
-};
-const calculateTimeline = ({ sequences, overrideIdsToNodePaths, compositions = [], }) => {
-    var _a, _b;
-    var _c, _d;
-    const sortedSequences = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences);
-    const tracks = [];
-    if (sortedSequences.length === 0) {
-        return [];
-    }
-    const connectedCompositionsBySequenceId = new Map();
-    for (const sequence of sortedSequences) {
-        const connectedCompositions = (0, get_connected_compositions_1.getConnectedCompositions)({
-            compositions,
-            singleChildComponent: sequence.singleChildComponent,
-        });
-        if (connectedCompositions.length > 0) {
-            connectedCompositionsBySequenceId.set(sequence.id, connectedCompositions);
-        }
-    }
-    const sequencesById = new Map(sortedSequences.map((sequence) => [sequence.id, sequence]));
-    const timelineSequences = sortedSequences.filter((sequence) => {
-        var _a;
-        var _b;
-        let parentId = sequence.parent;
-        while (parentId !== null) {
-            if (connectedCompositionsBySequenceId.has(parentId)) {
-                return false;
-            }
-            parentId = (_b = (_a = sequencesById.get(parentId)) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
-        }
-        return true;
-    });
-    for (let i = 0; i < timelineSequences.length; i++) {
-        const sequence = timelineSequences[i];
-        const cascadedStart = (0, get_sequence_visible_range_1.getCascadedStart)(sequence, sortedSequences);
-        const cascadedStartWithTrim = (0, get_sequence_visible_range_1.getCascadedStartWithTrim)(sequence, sortedSequences);
-        const effectiveFrom = sequence.trimBefore === null
-            ? sequence.from
-            : sequence.from - sequence.trimBefore;
-        const visibleStart = (0, get_sequence_visible_range_1.getTimelineVisibleStart)(sequence, sortedSequences);
-        const visibleDuration = (0, get_sequence_visible_range_1.getTimelineVisibleDuration)(sequence, sortedSequences);
-        const overrideId = (_c = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _c !== void 0 ? _c : null;
-        const nodePath = overrideId ? overrideIdsToNodePaths[overrideId] : null;
-        const hasKeyframeRows = sequence.controls !== null || sequence.effects.length > 0;
-        const connectedCompositions = (_d = connectedCompositionsBySequenceId.get(sequence.id)) !== null && _d !== void 0 ? _d : [];
-        tracks.push({
-            ...(connectedCompositions.length > 0 ? { connectedCompositions } : {}),
-            sequence: {
-                ...sequence,
-                from: visibleStart,
-                duration: visibleDuration,
-                loopDisplay: sequence.type === 'audio' || sequence.type === 'video'
-                    ? getInheritedLoopDisplay(sequence, sortedSequences)
-                    : sequence.loopDisplay,
-            },
-            depth: (0, get_timeline_nestedness_1.getTimelineNestedLevel)(sequence, sortedSequences, 0),
-            cascadedStart,
-            cascadedDuration: sequence.duration,
-            keyframeDisplayOffset: hasKeyframeRows
-                ? cascadedStartWithTrim - effectiveFrom
-                : 0,
-            sequenceFrameOffset: visibleStart - cascadedStartWithTrim,
-            nodePathInfo: nodePath
-                ? {
-                    sequenceSubscriptionKey: nodePath,
-                    auxiliaryKeys: [],
-                    index: 0,
-                    numberOfSequencesWithThisNodePath: 0,
-                    supportsEffects: ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.supportsEffects) === true,
-                }
-                : null,
-        });
-    }
-    const nonceRanks = new Map();
-    for (let i = 0; i < tracks.length; i++) {
-        nonceRanks.set(tracks[i].sequence.id, i);
-    }
-    const sortedTracks = tracks
-        .sort((a, b) => {
-        const sortKeyA = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSortKey)(a, tracks, nonceRanks);
-        const sortKeyB = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSortKey)(b, tracks, nonceRanks);
-        return sortKeyA.localeCompare(sortKeyB);
-    })
-        .map((track) => {
-        const { cascadedDuration, cascadedStart, ...cleanTrack } = track;
-        return cleanTrack;
-    });
-    const nodePathIndexCounters = new Map();
-    return sortedTracks
-        .map((track) => {
-        var _a;
-        if (track.nodePathInfo === null) {
-            return track;
-        }
-        const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
-        const index = (_a = nodePathIndexCounters.get(key)) !== null && _a !== void 0 ? _a : 0;
-        nodePathIndexCounters.set(key, index + 1);
-        return {
-            ...track,
-            nodePathInfo: {
-                sequenceSubscriptionKey: track.nodePathInfo.sequenceSubscriptionKey,
-                auxiliaryKeys: track.nodePathInfo.auxiliaryKeys,
-                index,
-                numberOfSequencesWithThisNodePath: 0,
-                supportsEffects: track.nodePathInfo.supportsEffects,
-            },
-        };
-    })
-        .map((track) => {
-        var _a;
-        if (track.nodePathInfo === null) {
-            return track;
-        }
-        const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
-        return {
-            ...track,
-            nodePathInfo: {
-                sequenceSubscriptionKey: track.nodePathInfo.sequenceSubscriptionKey,
-                auxiliaryKeys: track.nodePathInfo.auxiliaryKeys,
-                index: track.nodePathInfo.index,
-                numberOfSequencesWithThisNodePath: (_a = nodePathIndexCounters.get(key)) !== null && _a !== void 0 ? _a : 0,
-                supportsEffects: track.nodePathInfo.supportsEffects,
-            },
-        };
-    });
-};
-exports.calculateTimeline = calculateTimeline;
+const canvas_1 = require("@remotion/canvas");
+Object.defineProperty(exports, "calculateTimeline", { enumerable: true, get: function () { return canvas_1.calculateTimeline; } });

package/dist/helpers/colors.d.ts

@@ -63,6 +63,8 @@ export declare const INFO_BLUE = "#60a5fa";
 export declare const SERVER_DISCONNECTED_BACKGROUND = "#e74c3c";
 export declare const STACK_FRAME_BORDER_BLUE = "rgb(66, 144, 245)";
 export declare const TIMELINE_BACKGROUND_COLOR = "#15181B";
+export declare const TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = "#2C2F32";
+export declare const TIMELINE_NEGATIVE_START_BORDER_COLOR = "#414446";
 export declare const TIMELINE_SELECTED_BACKGROUND_COLOR = "#3B3F42";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "#B0B0B0";
 export declare const TIMELINE_BLUE = "#0b84ff";

package/dist/helpers/colors.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BLUE_DISABLED = exports.BLUE_HOVERED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.BLACK_OPAQUE = exports.BLACK_ALPHA_90 = exports.BLACK_ALPHA_85 = exports.BLACK_ALPHA_80 = exports.BLACK_ALPHA_60 = exports.BLACK_ALPHA_50 = exports.BLACK_ALPHA_40 = exports.BLACK_ALPHA_30 = exports.BLACK_ALPHA_28 = exports.BLACK_ALPHA_10 = exports.WHITE_ALPHA_80 = exports.WHITE_ALPHA_72 = exports.WHITE_ALPHA_70 = exports.WHITE_ALPHA_60 = exports.WHITE_ALPHA_50 = exports.WHITE_ALPHA_45 = exports.WHITE_ALPHA_40 = exports.WHITE_ALPHA_35 = exports.WHITE_ALPHA_30 = exports.WHITE_ALPHA_25 = exports.WHITE_ALPHA_20 = exports.WHITE_ALPHA_15 = exports.WHITE_ALPHA_12 = exports.WHITE_ALPHA_10 = exports.WHITE_ALPHA_08 = exports.WHITE_ALPHA_06 = exports.WHITE_ALPHA_05 = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND_HEX = exports.BACKGROUND = exports.BLACK_FULL_HEX = exports.BLACK_HEX = exports.WHITE_FULL_HEX = exports.WHITE_HEX = exports.CURRENT_COLOR_LOWERCASE = exports.CURRENT_COLOR = exports.TRANSPARENT = exports.RED = exports.WHITE = exports.BLACK = void 0;
-exports.FOCUS_BOX_SHADOW = exports.HOT_MIDDLEWARE_WARNING_STYLE = exports.HOT_MIDDLEWARE_ERROR_STYLE = exports.NOTIFICATION_BORDER = exports.COLOR_PICKER_HANDLE_SHADOW = exports.COLOR_PICKER_POPUP_SHADOW = exports.SERVER_DISCONNECTED_SHADOW = exports.NOTIFICATION_SHADOW = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = exports.SHADOW_BLACK = exports.BORDER_TIMELINE_MARQUEE_BLUE = exports.BORDER_TIMELINE_DROP_BLUE = exports.BORDER_STACK_FRAME_BLUE = exports.BORDER_INFO_BLUE = exports.BORDER_WHITE_ALPHA_20 = exports.BORDER_WHITE_ALPHA_12 = exports.BORDER_BLACK_ALPHA_60 = exports.BORDER_BLACK_ALPHA_50 = exports.BORDER_TRANSPARENT_2PX = exports.BORDER_CURRENT_COLOR = exports.BORDER_WHITE_2PX = exports.BORDER_WHITE = exports.BORDER_BLACK = exports.INFO_BLUE_BACKGROUND = exports.EASING_SELECTED_BACKGROUND = exports.TIMELINE_MARQUEE_BLUE_ALPHA_75 = exports.TIMELINE_MARQUEE_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_75 = exports.TIMELINE_DROP_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_12 = exports.TIMELINE_PLAYHEAD_COLOR = exports.TIMELINE_BLUE = exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = exports.TIMELINE_SELECTED_BACKGROUND_COLOR = exports.TIMELINE_BACKGROUND_COLOR = exports.STACK_FRAME_BORDER_BLUE = exports.SERVER_DISCONNECTED_BACKGROUND = exports.INFO_BLUE = exports.ERROR_LINK_COLOR = exports.ERROR_CODE_FRAME_LINE_BACKGROUND = exports.ERROR_CODE_FRAME_BACKGROUND = exports.RENDER_STATUS_BACKGROUND = exports.NOTIFICATION_BACKGROUND = exports.KEYBOARD_SHORTCUT_KEY_COLOR = exports.LIGHT_GRAY = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = void 0;
-exports.getBackgroundFromHoverState = exports.TIMELINE_IMAGE_GRADIENT = exports.TIMELINE_VIDEO_GRADIENT = exports.TIMELINE_AUDIO_GRADIENT = exports.LOOPED_INDICATOR_DROP_SHADOW = exports.SELECTED_OUTLINE_UV_DROP_SHADOW = exports.SELECTED_OUTLINE_DROP_SHADOW = exports.ERROR_MESSAGE_MASK_IMAGE = exports.COLOR_PICKER_HUE_GRADIENT = exports.COLOR_PICKER_ALPHA_TRANSPARENT = exports.COLOR_PICKER_SATURATION_BLACK_GRADIENT = exports.COLOR_PICKER_SATURATION_VALUE_GRADIENT = exports.COLOR_PICKER_CHECKER_BACKGROUND_COLOR = exports.COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = exports.CHECKERBOARD_BACKGROUND_IMAGE = void 0;
+exports.HOT_MIDDLEWARE_ERROR_STYLE = exports.NOTIFICATION_BORDER = exports.COLOR_PICKER_HANDLE_SHADOW = exports.COLOR_PICKER_POPUP_SHADOW = exports.SERVER_DISCONNECTED_SHADOW = exports.NOTIFICATION_SHADOW = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = exports.SHADOW_BLACK = exports.BORDER_TIMELINE_MARQUEE_BLUE = exports.BORDER_TIMELINE_DROP_BLUE = exports.BORDER_STACK_FRAME_BLUE = exports.BORDER_INFO_BLUE = exports.BORDER_WHITE_ALPHA_20 = exports.BORDER_WHITE_ALPHA_12 = exports.BORDER_BLACK_ALPHA_60 = exports.BORDER_BLACK_ALPHA_50 = exports.BORDER_TRANSPARENT_2PX = exports.BORDER_CURRENT_COLOR = exports.BORDER_WHITE_2PX = exports.BORDER_WHITE = exports.BORDER_BLACK = exports.INFO_BLUE_BACKGROUND = exports.EASING_SELECTED_BACKGROUND = exports.TIMELINE_MARQUEE_BLUE_ALPHA_75 = exports.TIMELINE_MARQUEE_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_75 = exports.TIMELINE_DROP_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_12 = exports.TIMELINE_PLAYHEAD_COLOR = exports.TIMELINE_BLUE = exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = exports.TIMELINE_SELECTED_BACKGROUND_COLOR = exports.TIMELINE_NEGATIVE_START_BORDER_COLOR = exports.TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = exports.TIMELINE_BACKGROUND_COLOR = exports.STACK_FRAME_BORDER_BLUE = exports.SERVER_DISCONNECTED_BACKGROUND = exports.INFO_BLUE = exports.ERROR_LINK_COLOR = exports.ERROR_CODE_FRAME_LINE_BACKGROUND = exports.ERROR_CODE_FRAME_BACKGROUND = exports.RENDER_STATUS_BACKGROUND = exports.NOTIFICATION_BACKGROUND = exports.KEYBOARD_SHORTCUT_KEY_COLOR = exports.LIGHT_GRAY = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = void 0;
+exports.getBackgroundFromHoverState = exports.TIMELINE_IMAGE_GRADIENT = exports.TIMELINE_VIDEO_GRADIENT = exports.TIMELINE_AUDIO_GRADIENT = exports.LOOPED_INDICATOR_DROP_SHADOW = exports.SELECTED_OUTLINE_UV_DROP_SHADOW = exports.SELECTED_OUTLINE_DROP_SHADOW = exports.ERROR_MESSAGE_MASK_IMAGE = exports.COLOR_PICKER_HUE_GRADIENT = exports.COLOR_PICKER_ALPHA_TRANSPARENT = exports.COLOR_PICKER_SATURATION_BLACK_GRADIENT = exports.COLOR_PICKER_SATURATION_VALUE_GRADIENT = exports.COLOR_PICKER_CHECKER_BACKGROUND_COLOR = exports.COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = exports.CHECKERBOARD_BACKGROUND_IMAGE = exports.FOCUS_BOX_SHADOW = exports.HOT_MIDDLEWARE_WARNING_STYLE = void 0;
 exports.BLACK = 'black';
 exports.WHITE = 'white';
 exports.RED = 'red';
@@ -69,6 +69,10 @@ exports.INFO_BLUE = '#60a5fa';
 exports.SERVER_DISCONNECTED_BACKGROUND = '#e74c3c';
 exports.STACK_FRAME_BORDER_BLUE = 'rgb(66, 144, 245)';
 exports.TIMELINE_BACKGROUND_COLOR = '#15181B';
+// WHITE_ALPHA_10 composited over TIMELINE_BACKGROUND_COLOR.
+exports.TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = '#2C2F32';
+// WHITE_ALPHA_10 composited over TIMELINE_NEGATIVE_START_BACKGROUND_COLOR.
+exports.TIMELINE_NEGATIVE_START_BORDER_COLOR = '#414446';
 exports.TIMELINE_SELECTED_BACKGROUND_COLOR = '#3B3F42';
 exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = '#B0B0B0';
 exports.TIMELINE_BLUE = '#0b84ff';

package/dist/helpers/drag-aware-double-click.d.ts

@@ -0,0 +1,6 @@
+export type DragAwareDoubleClickTracker = {
+    readonly beginPointerGesture: () => void;
+    readonly endPointerGesture: (wasDragged: boolean) => void;
+    readonly consumePointerGestureWasDragged: () => boolean;
+};
+export declare const createDragAwareDoubleClickTracker: () => DragAwareDoubleClickTracker;

package/dist/helpers/drag-aware-double-click.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDragAwareDoubleClickTracker = void 0;
+const createDragAwareDoubleClickTracker = () => {
+    let pointerGestureWasDragged = false;
+    return {
+        beginPointerGesture: () => {
+            pointerGestureWasDragged = false;
+        },
+        endPointerGesture: (wasDragged) => {
+            pointerGestureWasDragged = wasDragged;
+        },
+        consumePointerGestureWasDragged: () => {
+            const wasDragged = pointerGestureWasDragged;
+            pointerGestureWasDragged = false;
+            return wasDragged;
+        },
+    };
+};
+exports.createDragAwareDoubleClickTracker = createDragAwareDoubleClickTracker;

package/dist/helpers/editor-ruler.js

@@ -36,7 +36,8 @@ const drawGuide = ({ guideHighlight, scale, startMarking, context, canvasHeight,
         scale,
     }) +
         originOffset -
-        startMarking * scale;
+        startMarking * scale +
+        0.5;
     drawGradient({
         canvasHeight,
         context,
@@ -88,11 +89,11 @@ const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, m
     canvas.height = canvasHeight;
     context.scale(window.devicePixelRatio, window.devicePixelRatio);
     context.clearRect(0, 0, canvasWidth, canvasHeight);
-    context.strokeStyle = colors_1.RULER_COLOR;
+    context.strokeStyle = colors_1.WHITE_ALPHA_15;
     context.lineWidth = 1;
     context.beginPath();
     points.forEach((point) => {
-        context.strokeStyle = colors_1.RULER_COLOR;
+        context.strokeStyle = colors_1.WHITE_ALPHA_15;
         context.lineWidth = 1;
         const originDistance = point.position + originOffset - startMarking * scale;
         context.beginPath();
@@ -118,13 +119,13 @@ const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, m
         context.stroke();
         context.font = '10px Arial, Helvetica, sans-serif';
         context.textAlign = 'left';
-        context.fillStyle = colors_1.RULER_COLOR;
+        context.fillStyle = colors_1.LIGHT_TEXT;
         drawLabel({
             orientation,
             context,
             label: point.value.toString(),
             originDistance,
-            color: colors_1.RULER_COLOR,
+            color: colors_1.LIGHT_TEXT,
         });
     });
     if (guideHighlight && orientation !== guideHighlight.guide.orientation) {

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

@@ -1,5 +1,6 @@
 import type { CanvasContent } from 'remotion';
 import type { Dimensions } from './is-current-selected-still';
+import { type MediaMetadata } from './use-media-metadata';
 export declare const remotion_outputsBase: string;
 export type AssetMetadata = {
     type: 'not-found';
@@ -11,5 +12,23 @@ export type AssetMetadata = {
     size: number;
     dimensions: Dimensions | 'none' | null;
     fetchedAt: number;
+    mediaMetadata: MediaMetadata | null;
 };
+export declare const getAssetPreviewMetadata: ({ canvasContent, metadata, }: {
+    canvasContent: CanvasContent;
+    metadata: AssetMetadata;
+}) => {
+    asset: string;
+    width: number;
+    height: number;
+    fps: number;
+    durationInFrames: number;
+    props: {};
+    defaultCodec: null;
+    defaultOutName: null;
+    defaultVideoImageFormat: null;
+    defaultPixelFormat: null;
+    defaultProResProfile: null;
+    defaultSampleRate: number | null;
+} | null;
 export declare const getAssetMetadata: (canvasContent: CanvasContent, addTime: boolean) => Promise<AssetMetadata>;

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

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAssetMetadata = exports.remotion_outputsBase = void 0;
-const media_utils_1 = require("@remotion/media-utils");
+exports.getAssetMetadata = exports.getAssetPreviewMetadata = exports.remotion_outputsBase = void 0;
 const remotion_1 = require("remotion");
+const add_asset_cache_bust_1 = require("./add-asset-cache-bust");
 const get_preview_file_type_1 = require("./get-preview-file-type");
+const use_media_metadata_1 = require("./use-media-metadata");
 exports.remotion_outputsBase = window.remotion_staticBase.replace('static', 'outputs');
 const getSrcFromCanvasContent = (canvasContent) => {
     if (canvasContent.type === 'asset') {
@@ -11,13 +12,51 @@ const getSrcFromCanvasContent = (canvasContent) => {
     }
     return exports.remotion_outputsBase + canvasContent.path;
 };
+const getAssetPreviewMetadata = ({ canvasContent, metadata, }) => {
+    if (canvasContent.type !== 'asset' ||
+        metadata.type !== 'found' ||
+        metadata.mediaMetadata === null ||
+        !Number.isFinite(metadata.mediaMetadata.duration) ||
+        metadata.mediaMetadata.duration <= 0) {
+        return null;
+    }
+    const fileType = (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset);
+    if (fileType !== 'audio' && fileType !== 'video') {
+        return null;
+    }
+    const { dimensions } = metadata;
+    if (dimensions === null || dimensions === 'none') {
+        return null;
+    }
+    const detectedFps = metadata.mediaMetadata.fps;
+    const fps = detectedFps !== null && Number.isFinite(detectedFps) && detectedFps > 0
+        ? detectedFps
+        : 30;
+    return {
+        asset: canvasContent.asset,
+        width: dimensions.width,
+        height: dimensions.height,
+        fps,
+        durationInFrames: Math.max(1, Math.ceil(metadata.mediaMetadata.duration * fps)),
+        props: {},
+        defaultCodec: null,
+        defaultOutName: null,
+        defaultVideoImageFormat: null,
+        defaultPixelFormat: null,
+        defaultProResProfile: null,
+        defaultSampleRate: metadata.mediaMetadata.sampleRate,
+    };
+};
+exports.getAssetPreviewMetadata = getAssetPreviewMetadata;
 const getAssetMetadata = async (canvasContent, addTime) => {
+    var _a, _b, _c;
     if (canvasContent.type === 'output-blob') {
         return {
             type: 'found',
             size: canvasContent.sizeInBytes,
             dimensions: { width: canvasContent.width, height: canvasContent.height },
             fetchedAt: Date.now(),
+            mediaMetadata: null,
         };
     }
     if (canvasContent.type === 'composition') {
@@ -25,29 +64,42 @@ const getAssetMetadata = async (canvasContent, addTime) => {
     }
     try {
         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 listedStaticFile = canvasContent.type === 'asset'
+            ? window.remotion_staticFiles.find((file) => file.name === canvasContent.asset && file.src === src)
+            : null;
+        let size = (_a = listedStaticFile === null || listedStaticFile === void 0 ? void 0 : listedStaticFile.sizeInBytes) !== null && _a !== void 0 ? _a : null;
+        if (size === null) {
+            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 contentLength = file.headers.get('content-length');
+            if (!contentLength) {
+                throw new Error('Unexpected error: content-length is null');
+            }
+            size = Number(contentLength);
         }
         const fetchedAt = Date.now();
-        const srcWithTime = addTime ? `${src}?date=${fetchedAt}` : src;
+        const srcWithTime = addTime ? (0, add_asset_cache_bust_1.addAssetCacheBust)({ fetchedAt, src }) : src;
         const fileType = (0, get_preview_file_type_1.getPreviewFileType)(src);
-        if (fileType === 'video') {
-            const resolution = await (0, media_utils_1.getVideoMetadata)(srcWithTime);
+        if (fileType === 'video' || fileType === 'audio') {
+            const mediaMetadata = await (0, use_media_metadata_1.getMediaMetadata)(srcWithTime);
+            if (mediaMetadata === null) {
+                throw new Error(`Could not read media metadata for ${src}`);
+            }
+            const width = (_b = mediaMetadata.width) !== null && _b !== void 0 ? _b : 1920;
+            const height = (_c = mediaMetadata.height) !== null && _c !== void 0 ? _c : 1080;
             return {
                 type: 'found',
-                size: Number(size),
-                dimensions: { width: resolution.width, height: resolution.height },
+                size,
+                dimensions: { width, height },
                 fetchedAt,
+                mediaMetadata,
             };
         }
         if (fileType === 'image') {
@@ -56,9 +108,10 @@ const getAssetMetadata = async (canvasContent, addTime) => {
                 img.onload = () => {
                     resolve({
                         type: 'found',
-                        size: Number(size),
+                        size,
                         dimensions: { width: img.width, height: img.height },
                         fetchedAt,
+                        mediaMetadata: null,
                     });
                 };
                 img.onerror = () => {
@@ -71,8 +124,9 @@ const getAssetMetadata = async (canvasContent, addTime) => {
         return {
             type: 'found',
             dimensions: 'none',
-            size: Number(size),
+            size,
             fetchedAt,
+            mediaMetadata: null,
         };
     }
     catch (err) {

package/dist/helpers/get-connected-compositions.d.ts

@@ -1,6 +1 @@
-export declare const getConnectedCompositions: <Composition extends {
-    readonly componentFromProps?: unknown;
-}>({ compositions, singleChildComponent, }: {
-    readonly compositions: readonly Composition[];
-    readonly singleChildComponent: unknown;
-}) => Composition[];
+export { getConnectedCompositions } from '@remotion/canvas';

package/dist/helpers/get-connected-compositions.js

@@ -1,11 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getConnectedCompositions = void 0;
-const getConnectedCompositions = ({ compositions, singleChildComponent, }) => {
-    if (singleChildComponent === null ||
-        typeof singleChildComponent === 'undefined') {
-        return [];
-    }
-    return compositions.filter((composition) => composition.componentFromProps === singleChildComponent);
-};
-exports.getConnectedCompositions = getConnectedCompositions;
+const canvas_1 = require("@remotion/canvas");
+Object.defineProperty(exports, "getConnectedCompositions", { enumerable: true, get: function () { return canvas_1.getConnectedCompositions; } });

package/dist/helpers/get-sequence-double-click-action.d.ts

@@ -1,9 +1,10 @@
 import type { TSequence } from 'remotion';
 export type SequenceDoubleClickAction = 'open-connected-composition' | 'open-in-editor';
-export declare const getSequenceDoubleClickAction: ({ button, canOpenInEditor, numberOfConnectedCompositions, }: {
+export declare const getSequenceDoubleClickAction: ({ button, canOpenInEditor, numberOfConnectedCompositions, sequenceWasDragged, }: {
     readonly button: number;
     readonly canOpenInEditor: boolean;
     readonly numberOfConnectedCompositions: number;
+    readonly sequenceWasDragged: boolean;
 }) => SequenceDoubleClickAction | null;
 export declare const getConnectedCompositionFrame: ({ timelinePosition, sequence, sequenceFrameOffset, }: {
     readonly timelinePosition: number;

package/dist/helpers/get-sequence-double-click-action.js

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getConnectedCompositionFrame = exports.getSequenceDoubleClickAction = void 0;
-const getSequenceDoubleClickAction = ({ button, canOpenInEditor, numberOfConnectedCompositions, }) => {
+const getSequenceDoubleClickAction = ({ button, canOpenInEditor, numberOfConnectedCompositions, sequenceWasDragged, }) => {
+    // The browser still fires `dblclick` when the second press of a
+    // double-click turned into a drag. That gesture is a drag, not a
+    // double-click.
+    if (sequenceWasDragged) {
+        return null;
+    }
     if (button !== 0) {
         return null;
     }

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

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

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

@@ -1,53 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineVisibleDuration = exports.getTimelineVisibleStart = exports.getCascadedStartWithTrim = 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 getCascadedStartWithTrim = (sequence, sequences) => {
-    const effectiveFrom = sequence.trimBefore === null
-        ? sequence.from
-        : sequence.from - sequence.trimBefore;
-    if (!sequence.parent) {
-        return effectiveFrom;
-    }
-    const parent = sequences.find((s) => s.id === sequence.parent);
-    if (!parent) {
-        throw new TypeError('Parent not found for sequence ' + sequence.id);
-    }
-    return (0, exports.getCascadedStartWithTrim)(parent, sequences) + effectiveFrom;
-};
-exports.getCascadedStartWithTrim = getCascadedStartWithTrim;
-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;
+exports.getTimelineVisibleStart = exports.getTimelineVisibleDuration = exports.getCascadedStartWithTrim = exports.getCascadedStart = void 0;
+const canvas_1 = require("@remotion/canvas");
+Object.defineProperty(exports, "getCascadedStart", { enumerable: true, get: function () { return canvas_1.getCascadedStart; } });
+Object.defineProperty(exports, "getCascadedStartWithTrim", { enumerable: true, get: function () { return canvas_1.getCascadedStartWithTrim; } });
+Object.defineProperty(exports, "getTimelineVisibleDuration", { enumerable: true, get: function () { return canvas_1.getTimelineVisibleDuration; } });
+Object.defineProperty(exports, "getTimelineVisibleStart", { enumerable: true, get: function () { return canvas_1.getTimelineVisibleStart; } });

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

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

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

@@ -1,15 +1,5 @@
 "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');
-    }
-    const parentContributes = parentSequence.showInTimeline;
-    return (0, exports.getTimelineNestedLevel)(parentSequence, allSequences, parentContributes ? depth + 1 : depth);
-};
-exports.getTimelineNestedLevel = getTimelineNestedLevel;
+const canvas_1 = require("@remotion/canvas");
+Object.defineProperty(exports, "getTimelineNestedLevel", { enumerable: true, get: function () { return canvas_1.getTimelineNestedLevel; } });