@remotion/studio 4.0.470 → 4.0.472

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/calculate-timeline.js

@@ -21,8 +21,8 @@ const getInheritedLoopDisplay = (sequence, sequences) => {
     return getInheritedLoopDisplay(parent, sequences);
 };
 const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
-    var _a;
-    var _b;
+    var _a, _b;
+    var _c;
     const sortedSequences = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences);
     const tracks = [];
     if (sortedSequences.length === 0) {
@@ -44,7 +44,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
         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 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;
         tracks.push({
@@ -63,12 +63,14 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
             keyframeDisplayOffset: hasKeyframeRows
                 ? cascadedStart - sequence.from
                 : 0,
+            sequenceFrameOffset: visibleStart - cascadedStart,
             nodePathInfo: nodePath
                 ? {
                     sequenceSubscriptionKey: nodePath,
                     auxiliaryKeys: [],
                     index: 0,
                     numberOfSequencesWithThisNodePath: 0,
+                    supportsEffects: ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.supportsEffects) === true,
                 }
                 : null,
         });
@@ -106,6 +108,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
                 auxiliaryKeys: track.nodePathInfo.auxiliaryKeys,
                 index,
                 numberOfSequencesWithThisNodePath: 0,
+                supportsEffects: track.nodePathInfo.supportsEffects,
             },
         };
     })
@@ -122,6 +125,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
                 auxiliaryKeys: track.nodePathInfo.auxiliaryKeys,
                 index: track.nodePathInfo.index,
                 numberOfSequencesWithThisNodePath: (_a = nodePathIndexCounters.get(key)) !== null && _a !== void 0 ? _a : 0,
+                supportsEffects: track.nodePathInfo.supportsEffects,
             },
         };
     });

package/dist/helpers/create-folder-tree.js

@@ -113,6 +113,7 @@ const createFolderIfDoesNotExist = (items, availableFolders, folderItem, folders
     }
     itemList.push({
         type: 'folder',
+        folder: folderItem,
         folderName: folderItem.name,
         items: [],
         key: folderItem.name,

package/dist/helpers/detect-file-type.d.ts

@@ -0,0 +1,69 @@
+export type FileDimensions = {
+    readonly width: number;
+    readonly height: number;
+};
+export declare const matchesPattern: (pattern: Uint8Array<ArrayBufferLike>) => (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isRiffAvi: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isRiffWave: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isWebm: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isIsoBaseMedia: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isTransportStream: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isMp3: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isAac: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isFlac: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isM3u: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export type RiffType = {
+    type: 'riff';
+};
+export type WebmType = {
+    type: 'webm';
+};
+export type IsoBaseMediaType = {
+    type: 'iso-base-media';
+};
+export type TransportStreamType = {
+    type: 'transport-stream';
+};
+export type Mp3Type = {
+    type: 'mp3';
+};
+export type AacType = {
+    type: 'aac';
+};
+export type WavType = {
+    type: 'wav';
+};
+export type GifType = {
+    type: 'gif';
+    dimensions: FileDimensions;
+};
+export type FlacType = {
+    type: 'flac';
+};
+export type M3uType = {
+    type: 'm3u';
+};
+export type PngType = {
+    type: 'png';
+    dimensions: FileDimensions | null;
+};
+export type JpegType = {
+    type: 'jpeg';
+    dimensions: FileDimensions | null;
+};
+export type WebpType = {
+    type: 'webp';
+    dimensions: FileDimensions | null;
+};
+export type BmpType = {
+    type: 'bmp';
+    dimensions: FileDimensions | null;
+};
+export type PdfType = {
+    type: 'pdf';
+};
+export type UnknownType = {
+    type: 'unknown';
+};
+export type FileType = JpegType | WebpType | RiffType | WebmType | WavType | PdfType | AacType | IsoBaseMediaType | TransportStreamType | Mp3Type | GifType | PngType | BmpType | AacType | FlacType | M3uType | UnknownType;
+export declare const detectFileType: (data: Uint8Array<ArrayBufferLike>) => FileType;

package/dist/helpers/detect-file-type.js

@@ -0,0 +1,278 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectFileType = exports.isM3u = exports.isFlac = exports.isAac = exports.isMp3 = exports.isTransportStream = exports.isIsoBaseMedia = exports.isWebm = exports.isRiffWave = exports.isRiffAvi = exports.matchesPattern = void 0;
+const webmPattern = new Uint8Array([0x1a, 0x45, 0xdf, 0xa3]);
+const matchesPattern = (pattern) => {
+    return (data) => {
+        return pattern.every((value, index) => data[index] === value);
+    };
+};
+exports.matchesPattern = matchesPattern;
+const isRiffAvi = (data) => {
+    const riffPattern = new Uint8Array([0x52, 0x49, 0x46, 0x46]);
+    if (!(0, exports.matchesPattern)(riffPattern)(data.subarray(0, 4))) {
+        return false;
+    }
+    const fileType = data.subarray(8, 12);
+    const aviPattern = new Uint8Array([0x41, 0x56, 0x49, 0x20]);
+    return (0, exports.matchesPattern)(aviPattern)(fileType);
+};
+exports.isRiffAvi = isRiffAvi;
+const isRiffWave = (data) => {
+    const riffPattern = new Uint8Array([0x52, 0x49, 0x46, 0x46]);
+    if (!(0, exports.matchesPattern)(riffPattern)(data.subarray(0, 4))) {
+        return false;
+    }
+    const fileType = data.subarray(8, 12);
+    const wavePattern = new Uint8Array([0x57, 0x41, 0x56, 0x45]);
+    return (0, exports.matchesPattern)(wavePattern)(fileType);
+};
+exports.isRiffWave = isRiffWave;
+const isWebm = (data) => {
+    return (0, exports.matchesPattern)(webmPattern)(data.subarray(0, 4));
+};
+exports.isWebm = isWebm;
+const isIsoBaseMedia = (data) => {
+    const isoBaseMediaMp4Pattern = new TextEncoder().encode('ftyp');
+    return (0, exports.matchesPattern)(isoBaseMediaMp4Pattern)(data.subarray(4, 8));
+};
+exports.isIsoBaseMedia = isIsoBaseMedia;
+const isTransportStream = (data) => {
+    return data[0] === 0x47 && data[188] === 0x47;
+};
+exports.isTransportStream = isTransportStream;
+const isMp3 = (data) => {
+    const mpegPattern = new Uint8Array([0xff, 0xf3]);
+    const mpegPattern2 = new Uint8Array([0xff, 0xfb]);
+    const id3v4Pattern = new Uint8Array([0x49, 0x44, 0x33, 4]);
+    const id3v3Pattern = new Uint8Array([0x49, 0x44, 0x33, 3]);
+    const id3v2Pattern = new Uint8Array([0x49, 0x44, 0x33, 2]);
+    const subarray = data.subarray(0, 4);
+    return ((0, exports.matchesPattern)(mpegPattern)(subarray) ||
+        (0, exports.matchesPattern)(mpegPattern2)(subarray) ||
+        (0, exports.matchesPattern)(id3v4Pattern)(subarray) ||
+        (0, exports.matchesPattern)(id3v3Pattern)(subarray) ||
+        (0, exports.matchesPattern)(id3v2Pattern)(subarray));
+};
+exports.isMp3 = isMp3;
+const isAac = (data) => {
+    const aacPattern = new Uint8Array([0xff, 0xf1]);
+    return (0, exports.matchesPattern)(aacPattern)(data.subarray(0, 2));
+};
+exports.isAac = isAac;
+const isFlac = (data) => {
+    const flacPattern = new Uint8Array([0x66, 0x4c, 0x61, 0x43]);
+    return (0, exports.matchesPattern)(flacPattern)(data.subarray(0, 4));
+};
+exports.isFlac = isFlac;
+const isM3u = (data) => {
+    return new TextDecoder('utf-8').decode(data.slice(0, 7)) === '#EXTM3U';
+};
+exports.isM3u = isM3u;
+const getPngDimensions = (pngData) => {
+    if (pngData.length < 24) {
+        return null;
+    }
+    const view = new DataView(pngData.buffer, pngData.byteOffset);
+    const pngSignature = [137, 80, 78, 71, 13, 10, 26, 10];
+    for (let i = 0; i < 8; i++) {
+        if (pngData[i] !== pngSignature[i]) {
+            return null;
+        }
+    }
+    return {
+        width: view.getUint32(16, false),
+        height: view.getUint32(20, false),
+    };
+};
+const isPng = (data) => {
+    const pngPattern = new Uint8Array([0x89, 0x50, 0x4e, 0x47]);
+    if ((0, exports.matchesPattern)(pngPattern)(data.subarray(0, 4))) {
+        const png = getPngDimensions(data);
+        return { dimensions: png, type: 'png' };
+    }
+    return null;
+};
+const getJpegDimensions = (data) => {
+    let offset = 0;
+    const readUint16BE = (o) => {
+        return (data[o] << 8) | data[o + 1];
+    };
+    if (readUint16BE(offset) !== 0xffd8) {
+        return null;
+    }
+    offset += 2;
+    while (offset < data.length) {
+        if (data[offset] === 0xff) {
+            const marker = data[offset + 1];
+            if (marker === 0xc0 || marker === 0xc2) {
+                const height = readUint16BE(offset + 5);
+                const width = readUint16BE(offset + 7);
+                return { width, height };
+            }
+            const length = readUint16BE(offset + 2);
+            offset += length + 2;
+        }
+        else {
+            offset++;
+        }
+    }
+    return null;
+};
+const isJpeg = (data) => {
+    const jpegPattern = new Uint8Array([0xff, 0xd8]);
+    const jpeg = (0, exports.matchesPattern)(jpegPattern)(data.subarray(0, 2));
+    if (!jpeg) {
+        return null;
+    }
+    const dim = getJpegDimensions(data);
+    return { dimensions: dim, type: 'jpeg' };
+};
+const getGifDimensions = (data) => {
+    const view = new DataView(data.buffer, data.byteOffset);
+    const width = view.getUint16(6, true);
+    const height = view.getUint16(8, true);
+    return { width, height };
+};
+const isGif = (data) => {
+    const gifPattern = new Uint8Array([0x47, 0x49, 0x46, 0x38]);
+    if ((0, exports.matchesPattern)(gifPattern)(data.subarray(0, 4))) {
+        return { type: 'gif', dimensions: getGifDimensions(data) };
+    }
+    return null;
+};
+const getWebPDimensions = (bytes) => {
+    if (bytes.length < 30) {
+        return null;
+    }
+    if (bytes[0] !== 0x52 ||
+        bytes[1] !== 0x49 ||
+        bytes[2] !== 0x46 ||
+        bytes[3] !== 0x46 ||
+        bytes[8] !== 0x57 ||
+        bytes[9] !== 0x45 ||
+        bytes[10] !== 0x42 ||
+        bytes[11] !== 0x50) {
+        return null;
+    }
+    if (bytes[12] === 0x56 && bytes[13] === 0x50 && bytes[14] === 0x38) {
+        if (bytes[15] === 0x20) {
+            return {
+                width: bytes[26] | ((bytes[27] << 8) & 0x3fff),
+                height: bytes[28] | ((bytes[29] << 8) & 0x3fff),
+            };
+        }
+    }
+    if (bytes[12] === 0x56 &&
+        bytes[13] === 0x50 &&
+        bytes[14] === 0x38 &&
+        bytes[15] === 0x4c) {
+        return {
+            width: 1 + (bytes[21] | ((bytes[22] & 0x3f) << 8)),
+            height: 1 +
+                (((bytes[22] & 0xc0) >> 6) |
+                    (bytes[23] << 2) |
+                    ((bytes[24] & 0x0f) << 10)),
+        };
+    }
+    if (bytes[12] === 0x56 &&
+        bytes[13] === 0x50 &&
+        bytes[14] === 0x38 &&
+        bytes[15] === 0x58) {
+        return {
+            width: 1 + (bytes[24] | (bytes[25] << 8) | (bytes[26] << 16)),
+            height: 1 + (bytes[27] | (bytes[28] << 8) | (bytes[29] << 16)),
+        };
+    }
+    return null;
+};
+const isWebp = (data) => {
+    const webpPattern = new Uint8Array([0x52, 0x49, 0x46, 0x46]);
+    if ((0, exports.matchesPattern)(webpPattern)(data.subarray(0, 4))) {
+        return {
+            type: 'webp',
+            dimensions: getWebPDimensions(data),
+        };
+    }
+    return null;
+};
+const getBmpDimensions = (bmpData) => {
+    if (bmpData.length < 26) {
+        return null;
+    }
+    const view = new DataView(bmpData.buffer, bmpData.byteOffset);
+    return {
+        width: view.getUint32(18, true),
+        height: Math.abs(view.getInt32(22, true)),
+    };
+};
+const isBmp = (data) => {
+    const bmpPattern = new Uint8Array([0x42, 0x4d]);
+    if ((0, exports.matchesPattern)(bmpPattern)(data.subarray(0, 2))) {
+        const bmp = getBmpDimensions(data);
+        return { dimensions: bmp, type: 'bmp' };
+    }
+    return null;
+};
+const isPdf = (data) => {
+    if (data.length < 4) {
+        return null;
+    }
+    const pdfPattern = new Uint8Array([0x25, 0x50, 0x44, 0x46]);
+    return (0, exports.matchesPattern)(pdfPattern)(data.subarray(0, 4)) ? { type: 'pdf' } : null;
+};
+const detectFileType = (data) => {
+    if ((0, exports.isRiffWave)(data)) {
+        return { type: 'wav' };
+    }
+    if ((0, exports.isRiffAvi)(data)) {
+        return { type: 'riff' };
+    }
+    if ((0, exports.isAac)(data)) {
+        return { type: 'aac' };
+    }
+    if ((0, exports.isFlac)(data)) {
+        return { type: 'flac' };
+    }
+    if ((0, exports.isM3u)(data)) {
+        return { type: 'm3u' };
+    }
+    const webp = isWebp(data);
+    if (webp) {
+        return webp;
+    }
+    if ((0, exports.isWebm)(data)) {
+        return { type: 'webm' };
+    }
+    if ((0, exports.isIsoBaseMedia)(data)) {
+        return { type: 'iso-base-media' };
+    }
+    if ((0, exports.isTransportStream)(data)) {
+        return { type: 'transport-stream' };
+    }
+    if ((0, exports.isMp3)(data)) {
+        return { type: 'mp3' };
+    }
+    const gif = isGif(data);
+    if (gif) {
+        return gif;
+    }
+    const png = isPng(data);
+    if (png) {
+        return png;
+    }
+    const pdf = isPdf(data);
+    if (pdf) {
+        return pdf;
+    }
+    const bmp = isBmp(data);
+    if (bmp) {
+        return bmp;
+    }
+    const jpeg = isJpeg(data);
+    if (jpeg) {
+        return jpeg;
+    }
+    return { type: 'unknown' };
+};
+exports.detectFileType = detectFileType;

package/dist/helpers/get-folder-id.d.ts

@@ -0,0 +1,4 @@
+export declare const getFolderId: ({ folderName, parentName, }: {
+    folderName: string;
+    parentName: string | null;
+}) => string;

package/dist/helpers/get-folder-id.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFolderId = void 0;
+const getFolderId = ({ folderName, parentName, }) => {
+    return [parentName, folderName].filter(Boolean).join('/');
+};
+exports.getFolderId = getFolderId;

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

@@ -3,7 +3,7 @@ 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);
+    const proportion = frame / duration;
     return proportion * (width - timeline_layout_1.TIMELINE_PADDING * 2) + timeline_layout_1.TIMELINE_PADDING;
 };
 exports.getXPositionOfItemInTimelineImperatively = getXPositionOfItemInTimelineImperatively;

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

@@ -3,35 +3,34 @@ 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 getWidthOfTrack = ({ durationInFrames, timelineDuration, windowWidth, spatialDuration, nonNegativeMarginLeft, }) => {
     const fullWidth = windowWidth - timeline_layout_1.TIMELINE_PADDING * 2;
-    const base = durationInFrames === Infinity || lastFrame === 0
+    const base = durationInFrames === Infinity || timelineDuration <= 0
         ? fullWidth
-        : (spatialDuration / lastFrame) * fullWidth;
+        : (spatialDuration / timelineDuration) * fullWidth;
     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 timelineDuration = (_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1;
-    const lastFrame = timelineDuration - 1;
     const spatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames, timelineDuration - startFrom));
-    // Unclipped spatial duration: without the lastFrame - startFrom constraint
+    // Unclipped spatial duration: without the timeline-end constraint
     const naturalSpatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames));
-    const marginLeft = lastFrame === 0
+    const marginLeft = timelineDuration <= 0
         ? 0
-        : (startFrom / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
+        : (startFrom / timelineDuration) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
     const nonNegativeMarginLeft = Math.min(marginLeft, 0);
     const width = getWidthOfTrack({
         durationInFrames,
-        lastFrame,
+        timelineDuration,
         nonNegativeMarginLeft,
         spatialDuration,
         windowWidth,
     });
     const naturalWidth = getWidthOfTrack({
         durationInFrames,
-        lastFrame,
+        timelineDuration,
         nonNegativeMarginLeft,
         spatialDuration: naturalSpatialDuration,
         windowWidth,
@@ -39,7 +38,7 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
     const premountWidth = premountDisplay
         ? getWidthOfTrack({
             durationInFrames: premountDisplay,
-            lastFrame,
+            timelineDuration,
             nonNegativeMarginLeft,
             spatialDuration: premountDisplay,
             windowWidth,
@@ -48,7 +47,7 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
     const postmountWidth = postmountDisplay
         ? getWidthOfTrack({
             durationInFrames: postmountDisplay,
-            lastFrame,
+            timelineDuration,
             nonNegativeMarginLeft,
             spatialDuration: postmountDisplay,
             windowWidth,

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

@@ -4,12 +4,14 @@ export type SequenceNodePathInfo = {
     auxiliaryKeys: string[];
     index: number;
     numberOfSequencesWithThisNodePath: number;
+    supportsEffects: boolean;
 };
 type Track = {
     sequence: TSequence;
     depth: number;
     nodePathInfo: SequenceNodePathInfo | null;
     keyframeDisplayOffset: number;
+    sequenceFrameOffset: number;
 };
 export type TrackWithHash = Track & {
     hash: string;

package/dist/helpers/open-in-editor.d.ts

@@ -1,7 +1,24 @@
-import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { CompositionComponentInfoResponse, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
 export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition) => Promise<void>;
+type ResolvedCompositionComponentInfo = {
+    location: CompositionComponentInfoResponse['location'];
+    canAddSequence: boolean;
+};
+export declare const subscribeToCompositionComponentInfo: (listener: () => void) => () => void;
+export declare const getCachedCompositionComponentInfo: ({ compositionFile, compositionId, }: {
+    compositionFile: string;
+    compositionId: string;
+}) => ResolvedCompositionComponentInfo | null;
+export declare const useCachedCompositionComponentInfo: ({ compositionFile, compositionId, }: {
+    compositionFile: string | null;
+    compositionId: string | null;
+}) => ResolvedCompositionComponentInfo | null;
+export declare const loadCompositionComponentInfo: ({ compositionFile, compositionId, }: {
+    compositionFile: string;
+    compositionId: string;
+}) => Promise<ResolvedCompositionComponentInfo>;
 export declare const preloadCompositionComponentInfo: ({ compositionFile, compositionId, }: {
     compositionFile: string;
     compositionId: string;
@@ -10,3 +27,4 @@ export declare const openCompositionComponentInEditor: ({ compositionFile, compo
     compositionFile: string;
     compositionId: string;
 }) => Promise<void>;
+export {};

package/dist/helpers/open-in-editor.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
+exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
+const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
 const openInEditor = (stack) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
@@ -26,9 +27,40 @@ const openOriginalPositionInEditor = async (originalPosition) => {
 };
 exports.openOriginalPositionInEditor = openOriginalPositionInEditor;
 const componentResolutionCache = new Map();
+const componentResolutionResults = new Map();
+const componentResolutionListeners = new Set();
 const getComponentResolutionCacheKey = ({ compositionFile, compositionId, }) => {
     return `${compositionFile}::${compositionId}`;
 };
+const notifyComponentResolutionListeners = () => {
+    for (const listener of componentResolutionListeners) {
+        listener();
+    }
+};
+const subscribeToCompositionComponentInfo = (listener) => {
+    componentResolutionListeners.add(listener);
+    return () => {
+        componentResolutionListeners.delete(listener);
+    };
+};
+exports.subscribeToCompositionComponentInfo = subscribeToCompositionComponentInfo;
+const getCachedCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
+    var _a;
+    return ((_a = componentResolutionResults.get(getComponentResolutionCacheKey({ compositionFile, compositionId }))) !== null && _a !== void 0 ? _a : null);
+};
+exports.getCachedCompositionComponentInfo = getCachedCompositionComponentInfo;
+const useCachedCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
+    return (0, react_1.useSyncExternalStore)(exports.subscribeToCompositionComponentInfo, () => {
+        if (compositionFile === null || compositionId === null) {
+            return null;
+        }
+        return (0, exports.getCachedCompositionComponentInfo)({
+            compositionFile,
+            compositionId,
+        });
+    }, () => null);
+};
+exports.useCachedCompositionComponentInfo = useCachedCompositionComponentInfo;
 const loadCompositionComponentInfo = async ({ compositionFile, compositionId, }) => {
     const cacheKey = getComponentResolutionCacheKey({
         compositionFile,
@@ -43,10 +75,13 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
             compositionFile,
             compositionId,
         });
-        return {
+        const result = {
             location: body.location,
             canAddSequence: body.canAddSequence,
         };
+        componentResolutionResults.set(cacheKey, result);
+        notifyComponentResolutionListeners();
+        return result;
     })();
     componentResolutionCache.set(cacheKey, promise);
     try {
@@ -54,18 +89,21 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
     }
     catch (err) {
         componentResolutionCache.delete(cacheKey);
+        componentResolutionResults.delete(cacheKey);
+        notifyComponentResolutionListeners();
         throw err;
     }
 };
+exports.loadCompositionComponentInfo = loadCompositionComponentInfo;
 const preloadCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
-    loadCompositionComponentInfo({
+    (0, exports.loadCompositionComponentInfo)({
         compositionFile,
         compositionId,
     }).catch(() => undefined);
 };
 exports.preloadCompositionComponentInfo = preloadCompositionComponentInfo;
 const openCompositionComponentInEditor = async ({ compositionFile, compositionId, }) => {
-    const info = await loadCompositionComponentInfo({
+    const info = await (0, exports.loadCompositionComponentInfo)({
         compositionFile,
         compositionId,
     });

package/dist/helpers/timeline-layout.js

@@ -15,7 +15,7 @@ exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
 const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, codeValues, }) => {
     var _a;
     const roots = [];
-    const { sequenceSubscriptionKey, index, auxiliaryKeys } = nodePathInfo;
+    const { sequenceSubscriptionKey, index, auxiliaryKeys, supportsEffects } = nodePathInfo;
     const controlFields = (0, studio_shared_1.getFieldsToShow)({
         schema: sequence.controls.schema,
         currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
@@ -32,6 +32,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                     auxiliaryKeys: [...auxiliaryKeys, 'controls', f.key],
                     index,
                     numberOfSequencesWithThisNodePath: 0,
+                    supportsEffects,
                 },
                 label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
                 field: f,
@@ -46,6 +47,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                 auxiliaryKeys: [...auxiliaryKeys, 'effects'],
                 index,
                 numberOfSequencesWithThisNodePath: 0,
+                supportsEffects,
             },
             label: 'Effects',
             effectInfo: null,
@@ -65,6 +67,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                         auxiliaryKeys: [...auxiliaryKeys, 'effects', i.toString()],
                         index,
                         numberOfSequencesWithThisNodePath: 0,
+                        supportsEffects,
                     },
                     label: effect.label,
                     effectInfo: {
@@ -86,6 +89,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                                 ],
                                 index,
                                 numberOfSequencesWithThisNodePath: 0,
+                                supportsEffects,
                             },
                             label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
                             field: f,