@remotion/studio 4.0.464 → 4.0.466

package/dist/components/Timeline/TimelineEffectGroupRow.js

@@ -6,6 +6,9 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const call_api_1 = require("../call-api");
+const ContextMenu_1 = require("../ContextMenu");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
@@ -15,9 +18,10 @@ const rowLabel = {
     color: 'rgba(255, 255, 255, 0.8)',
     userSelect: 'none',
 };
-const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
+const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
     var _a;
     var _b;
+    const [labelHovered, setLabelHovered] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
@@ -37,6 +41,54 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
         return false;
     }, [disabledStatus]);
     const canToggle = previewConnected && disabledStatus !== null && disabledStatus.canUpdate;
+    const deleteDisabled = !previewConnected ||
+        effectStatus.type !== 'can-update-effect' ||
+        !validatedLocation.source;
+    const onDeleteEffectFromSource = (0, react_1.useCallback)(async () => {
+        if (deleteDisabled) {
+            return;
+        }
+        try {
+            const result = await (0, call_api_1.callApi)('/api/delete-effect', {
+                fileName: validatedLocation.source,
+                sequenceNodePath: nodePath,
+                effectIndex,
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Removed effect from source file', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [deleteDisabled, effectIndex, nodePath, validatedLocation.source]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        if (!previewConnected) {
+            return [];
+        }
+        return [
+            {
+                type: 'item',
+                id: 'delete-effect',
+                keyHint: null,
+                label: 'Delete',
+                leftItem: null,
+                disabled: deleteDisabled,
+                onClick: () => {
+                    if (deleteDisabled) {
+                        return;
+                    }
+                    onDeleteEffectFromSource();
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'delete-effect',
+            },
+        ];
+    }, [deleteDisabled, onDeleteEffectFromSource, previewConnected]);
     const onToggle = (0, react_1.useCallback)((type) => {
         if (!canToggle || previewServerState.type !== 'connected') {
             return;
@@ -71,6 +123,22 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
         height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
         paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
     }), []);
-    return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: label }) }));
+    const labelStyle = (0, react_1.useMemo)(() => {
+        const hoverEffect = labelHovered && documentationLink !== null;
+        return {
+            ...rowLabel,
+            textDecoration: hoverEffect ? 'underline' : 'none',
+            textUnderlineOffset: 2,
+            cursor: hoverEffect ? 'pointer' : undefined,
+        };
+    }, [documentationLink, labelHovered]);
+    const onClickLabel = (0, react_1.useCallback)(() => {
+        if (documentationLink === null) {
+            return;
+        }
+        window.open(documentationLink, '_blank', 'noopener,noreferrer');
+    }, [documentationLink]);
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, children: jsx_runtime_1.jsx("span", { onPointerEnter: () => setLabelHovered(true), onPointerLeave: () => setLabelHovered(false), onClick: onClickLabel, title: documentationLink ? `Open documentation: ${documentationLink}` : label, style: labelStyle, children: label }) }));
+    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: row })) : (row);
 };
 exports.TimelineEffectGroupRow = TimelineEffectGroupRow;

package/dist/components/Timeline/TimelineExpandedRow.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SequenceSchema, SequencePropsSubscriptionKey } from 'remotion';
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -19,7 +19,7 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTr
     const rowDepth = (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: depth });
     if (node.kind === 'group') {
         if (node.effectInfo) {
-            return (jsx_runtime_1.jsx(TimelineEffectGroupRow_1.TimelineEffectGroupRow, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
+            return (jsx_runtime_1.jsx(TimelineEffectGroupRow_1.TimelineEffectGroupRow, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
         }
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<{
+    readonly sequence: TSequence;
+    readonly nodePathInfo: SequenceNodePathInfo;
+}>;

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -0,0 +1,123 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineExpandedTrackKeyframes = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const row = {
+    position: 'relative',
+};
+const separator = {
+    height: 1,
+    backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
+};
+const section = {
+    borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
+};
+const diamondBase = {
+    position: 'absolute',
+    width: 8,
+    height: 8,
+    backgroundColor: colors_1.LIGHT_TEXT,
+    borderRadius: 1,
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
+    pointerEvents: 'none',
+};
+const getNodeKeyframes = ({ node, nodePath, codeValues, }) => {
+    var _a, _b;
+    if (node.kind !== 'field' || node.field === null) {
+        return [];
+    }
+    if (node.field.kind === 'sequence-field') {
+        return (0, get_timeline_keyframes_1.getTimelineKeyframes)((_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key]);
+    }
+    const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
+        codeValues,
+        nodePath,
+        effectIndex: node.field.effectIndex,
+    });
+    return (0, get_timeline_keyframes_1.getTimelineKeyframes)(effectStatus.type === 'can-update-effect'
+        ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[node.field.key]
+        : null);
+};
+const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+        sequence,
+        nodePathInfo,
+        getDragOverrides: () => ({}),
+        codeValues,
+    }), [codeValues, nodePathInfo, sequence]);
+    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
+    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
+        sequence,
+        nodePathInfo,
+        getIsExpanded,
+        codeValues,
+    }), [codeValues, getIsExpanded, nodePathInfo, sequence]);
+    const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => ({
+        height: (0, timeline_layout_1.getTreeRowHeight)(node),
+        keyframes: getNodeKeyframes({
+            node,
+            nodePath: nodePathInfo.sequenceSubscriptionKey,
+            codeValues,
+        }),
+        key: JSON.stringify(node.nodePathInfo),
+    })), [codeValues, flat, nodePathInfo.sequenceSubscriptionKey]);
+    return (jsx_runtime_1.jsx("div", { style: {
+            height: expandedHeight + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+        }, children: jsx_runtime_1.jsx("div", { style: { ...section, height: expandedHeight }, children: rows.map(({ height, keyframes, key }, i) => {
+                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx("div", { style: { ...row, height }, children: timelineWidth === null
+                                ? null
+                                : keyframes.map((keyframe) => (jsx_runtime_1.jsx("div", { style: {
+                                        ...diamondBase,
+                                        left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(keyframe.frame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING,
+                                        top: height / 2,
+                                        transform: 'translate(-50%, -50%) rotate(45deg)',
+                                    }, title: `Keyframe at frame ${keyframe.frame}` }, String(keyframe.frame)))) })
+                    ] }, key));
+            }) }) }));
+};
+exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner);

package/dist/components/Timeline/TimelineSchemaField.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const TimelineBooleanField_1 = require("./TimelineBooleanField");
 const TimelineColorField_1 = require("./TimelineColorField");
 const TimelineEnumField_1 = require("./TimelineEnumField");
@@ -30,7 +31,7 @@ const TimelineNonEditableStatus = ({ propStatus }) => {
         return null;
     }
     if (propStatus.reason === 'computed') {
-        return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "computed" });
+        return (jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) }));
     }
     throw new Error(`Unsupported prop status: ${propStatus.reason}`);
 };

package/dist/components/Timeline/TimelineStack/index.js

@@ -7,8 +7,6 @@ const client_id_1 = require("../../../helpers/client-id");
 const colors_1 = require("../../../helpers/colors");
 const get_git_menu_item_1 = require("../../../helpers/get-git-menu-item");
 const open_in_editor_1 = require("../../../helpers/open-in-editor");
-const url_state_1 = require("../../../helpers/url-state");
-const InitialCompositionLoader_1 = require("../../InitialCompositionLoader");
 const layout_1 = require("../../layout");
 const NotificationCenter_1 = require("../../Notifications/NotificationCenter");
 const Spinner_1 = require("../../Spinner");
@@ -17,26 +15,8 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
     const [stackHovered, setStackHovered] = (0, react_1.useState)(false);
     const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
     const [opening, setOpening] = (0, react_1.useState)(false);
-    const selectAsset = (0, InitialCompositionLoader_1.useSelectAsset)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
-    const assetPath = (0, react_1.useMemo)(() => {
-        if (sequence.type !== 'video' &&
-            sequence.type !== 'audio' &&
-            sequence.type !== 'image') {
-            return null;
-        }
-        const isStatic = sequence.src.startsWith(window.remotion_staticBase);
-        if (!isStatic) {
-            return null;
-        }
-        const relativePath = sequence.src.replace(window.remotion_staticBase + '/', '');
-        return relativePath;
-    }, [sequence]);
-    const navigateToAsset = (0, react_1.useCallback)((asset) => {
-        selectAsset(asset);
-        (0, url_state_1.pushUrl)(`/assets/${asset}`);
-    }, [selectAsset]);
     const openEditor = (0, react_1.useCallback)(async (location) => {
         if (!window.remotion_editorName) {
             return;
@@ -56,35 +36,15 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
         connectionStatus === 'connected' &&
         originalLocation;
     const canOpenInGitHub = window.remotion_gitSource && originalLocation;
-    const titleHoverable = (isCompact && (canOpenInEditor || canOpenInGitHub)) || assetPath;
+    const { documentationLink } = sequence;
+    const titleHoverable = documentationLink !== null;
     const stackHoverable = !isCompact && (canOpenInEditor || canOpenInGitHub);
     const onClickTitle = (0, react_1.useCallback)(() => {
-        if (!titleHoverable) {
+        if (documentationLink === null) {
             return null;
         }
-        if (assetPath) {
-            navigateToAsset(assetPath);
-            return;
-        }
-        if (!originalLocation) {
-            return;
-        }
-        if (canOpenInEditor) {
-            openEditor(originalLocation);
-            return;
-        }
-        if (canOpenInGitHub) {
-            window.open((0, get_git_menu_item_1.getGitRefUrl)(window.remotion_gitSource, originalLocation), '_blank');
-        }
-    }, [
-        assetPath,
-        canOpenInEditor,
-        canOpenInGitHub,
-        navigateToAsset,
-        openEditor,
-        originalLocation,
-        titleHoverable,
-    ]);
+        window.open(documentationLink, '_blank', 'noopener,noreferrer');
+    }, [documentationLink]);
     const onClickStack = (0, react_1.useCallback)(() => {
         if (!originalLocation) {
             return;
@@ -150,8 +110,8 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
         ? sequence.displayName.slice(0, 1000) + '...'
         : sequence.displayName;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: originalLocation
-                    ? (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation)
+            jsx_runtime_1.jsx("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: documentationLink
+                    ? `Open documentation: ${documentationLink}`
                     : text || '<Sequence>', style: titleStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : (jsx_runtime_1.jsx("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) })), opening ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 })
                 ] })) : null] }));

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -7,14 +7,13 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const render_frame_1 = require("../../state/render-frame");
-const SplitterHandle_1 = require("../Splitter/SplitterHandle");
 const TimeValue_1 = require("../TimeValue");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 exports.TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 const container = {
-    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT - 4,
+    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
     boxShadow: `0 0 4px ${colors_1.TIMELINE_BACKGROUND}`,
     position: 'absolute',
     backgroundColor: colors_1.TIMELINE_BACKGROUND,
@@ -94,10 +93,8 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            width: windowWidth - SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+            width: windowWidth,
             overflow: 'hidden',
-            // Since
-            marginLeft: SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
             pointerEvents: 'none',
         };
     }, [windowWidth]);
@@ -119,9 +116,7 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
                 frame: index * fps,
                 style: {
                     ...secondTick,
-                    left: frameInterval * index * fps +
-                        timeline_layout_1.TIMELINE_PADDING -
-                        SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+                    left: frameInterval * index * fps + timeline_layout_1.TIMELINE_PADDING,
                 },
                 showTime: index > 0,
             };
@@ -134,9 +129,7 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
                 frame: index,
                 style: {
                     ...tick,
-                    left: frameInterval * index +
-                        timeline_layout_1.TIMELINE_PADDING -
-                        SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+                    left: frameInterval * index + timeline_layout_1.TIMELINE_PADDING,
                     height: index % fps === 0
                         ? 10
                         : (index / frameMarkerEveryNth) % 2 === 0

package/dist/components/Timeline/TimelineTracks.js

@@ -36,11 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTracks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const TimelineExpandedTrackKeyframes_1 = require("./TimelineExpandedTrackKeyframes");
 const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const content = {
@@ -51,18 +51,9 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const getExpandedPlaceholderStyle = ({ sequence, nodePathInfo, getIsExpanded, codeValues, }) => ({
-    height: (0, timeline_layout_1.getExpandedTrackHeight)({
-        sequence,
-        nodePathInfo,
-        getIsExpanded,
-        codeValues,
-    }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-});
 const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const previewServerConnected = previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
@@ -78,12 +69,7 @@ const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
                                 jsx_runtime_1.jsx("div", { style: {
                                         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), isExpanded && track.nodePathInfo && previewServerConnected ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle({
-                                        sequence: track.sequence,
-                                        nodePathInfo: track.nodePathInfo,
-                                        getIsExpanded,
-                                        codeValues,
-                                    }) })) : null] }, track.sequence.id));
+                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), isExpanded && track.nodePathInfo && previewServerConnected ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = react_1.default.memo(TimelineTracksInner);

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
+const get_timeline_video_info_widths_1 = require("./get-timeline-video-info-widths");
 const FILMSTRIP_HEIGHT = timeline_layout_1.TIMELINE_LAYER_HEIGHT_IMAGE - 2;
 const outerStyle = {
     width: '100%',
@@ -16,7 +17,6 @@ const outerStyle = {
 };
 const filmstripContainerStyle = {
     height: FILMSTRIP_HEIGHT,
-    width: '100%',
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     display: 'flex',
     borderTopLeftRadius: 2,
@@ -28,6 +28,14 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const aspectRatio = (0, react_1.useRef)((0, timeline_utils_1.getAspectRatioFromCache)(src));
+    const { mediaVisualizationWidth, mediaNaturalWidth } = (0, react_1.useMemo)(() => {
+        return (0, get_timeline_video_info_widths_1.getTimelineVideoInfoWidths)({
+            visualizationWidth,
+            naturalWidth,
+            premountWidth,
+            postmountWidth,
+        });
+    }, [naturalWidth, postmountWidth, premountWidth, visualizationWidth]);
     // for rendering frames
     (0, react_1.useEffect)(() => {
         if (error) {
@@ -39,7 +47,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         }
         const controller = new AbortController();
         const canvas = document.createElement('canvas');
-        canvas.width = visualizationWidth;
+        canvas.width = mediaVisualizationWidth;
         canvas.height = FILMSTRIP_HEIGHT;
         const ctx = canvas.getContext('2d');
         if (!ctx) {
@@ -47,7 +55,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         }
         current.appendChild(canvas);
         const loopWidth = (0, timeline_utils_1.getLoopDisplayWidth)({
-            visualizationWidth: naturalWidth,
+            visualizationWidth: mediaNaturalWidth,
             loopDisplay,
         });
         const shouldRepeatVideo = (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay);
@@ -85,7 +93,9 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         // Trim is applied first, then playbackRate. Each composition frame
         // advances the source video by `playbackRate` source frames.
         const toSeconds = fromSeconds + (visibleDurationInFrames * playbackRate) / fps;
-        const targetWidth = shouldRepeatVideo ? targetCanvas.width : naturalWidth;
+        const targetWidth = shouldRepeatVideo
+            ? targetCanvas.width
+            : mediaNaturalWidth;
         if (aspectRatio.current !== null) {
             (0, timeline_utils_1.ensureSlots)({
                 filledSlots,
@@ -207,13 +217,20 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         error,
         fps,
         loopDisplay,
-        naturalWidth,
+        mediaNaturalWidth,
+        mediaVisualizationWidth,
         playbackRate,
         src,
         trimBefore,
-        visualizationWidth,
     ]);
-    const audioWidth = visualizationWidth - premountWidth - postmountWidth;
+    const audioWidth = mediaVisualizationWidth;
+    const filmstripStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...filmstripContainerStyle,
+            width: mediaVisualizationWidth,
+            marginLeft: premountWidth,
+        };
+    }, [mediaVisualizationWidth, premountWidth]);
     const audioStyle = (0, react_1.useMemo)(() => {
         return {
             height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO,
@@ -223,7 +240,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         };
     }, [audioWidth, premountWidth]);
     return (jsx_runtime_1.jsxs("div", { style: outerStyle, children: [
-            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripContainerStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
+            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
         ] }));
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

package/dist/components/Timeline/get-timeline-keyframes.d.ts

@@ -0,0 +1,6 @@
+import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse } from 'remotion';
+export declare const getComputedStatusLabel: (propStatus: CanUpdateSequencePropStatusFalse) => string;
+export declare const getTimelineKeyframes: (propStatus: CanUpdateSequencePropStatus | null | undefined) => {
+    frame: number;
+    value: unknown;
+}[];

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineKeyframes = exports.getComputedStatusLabel = void 0;
+const getComputedStatusLabel = (propStatus) => {
+    var _a;
+    if (propStatus.reason !== 'computed') {
+        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
+    }
+    return ((_a = propStatus.keyframes) === null || _a === void 0 ? void 0 : _a.length) ? 'keyframed' : 'computed';
+};
+exports.getComputedStatusLabel = getComputedStatusLabel;
+const getTimelineKeyframes = (propStatus) => {
+    var _a;
+    if (!propStatus || propStatus.canUpdate) {
+        return [];
+    }
+    if (propStatus.reason !== 'computed') {
+        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
+    }
+    return (_a = propStatus.keyframes) !== null && _a !== void 0 ? _a : [];
+};
+exports.getTimelineKeyframes = getTimelineKeyframes;

package/dist/components/Timeline/get-timeline-video-info-widths.d.ts

@@ -0,0 +1,9 @@
+export declare const getTimelineVideoInfoWidths: ({ visualizationWidth, naturalWidth, premountWidth, postmountWidth, }: {
+    visualizationWidth: number;
+    naturalWidth: number;
+    premountWidth: number;
+    postmountWidth: number;
+}) => {
+    mediaVisualizationWidth: number;
+    mediaNaturalWidth: number;
+};

package/dist/components/Timeline/get-timeline-video-info-widths.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineVideoInfoWidths = void 0;
+const getTimelineVideoInfoWidths = ({ visualizationWidth, naturalWidth, premountWidth, postmountWidth, }) => {
+    const mountWidth = premountWidth + postmountWidth;
+    return {
+        mediaVisualizationWidth: Math.max(0, visualizationWidth - mountWidth),
+        mediaNaturalWidth: Math.max(0, naturalWidth - mountWidth),
+    };
+};
+exports.getTimelineVideoInfoWidths = getTimelineVideoInfoWidths;

package/dist/components/Timeline/use-resolved-stack.d.ts

@@ -1,2 +1,3 @@
 import type { ResolvedStackLocation } from 'remotion';
+export declare const hasResolvedStack: (stack: string | null) => boolean;
 export declare const useResolvedStack: (stack: string | null) => ResolvedStackLocation | null;

package/dist/components/Timeline/use-resolved-stack.js

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResolvedStack = void 0;
+exports.useResolvedStack = exports.hasResolvedStack = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_stack_1 = require("./TimelineStack/get-stack");
 const resolvedCache = new Map();
+const hasResolvedStack = (stack) => {
+    if (!stack) {
+        return true;
+    }
+    return resolvedCache.has(stack);
+};
+exports.hasResolvedStack = hasResolvedStack;
 const inFlight = new Set();
 const subscribers = new Map();
 const useResolvedStack = (stack) => {
@@ -40,6 +47,8 @@ const useResolvedStack = (stack) => {
                 .catch((err) => {
                 // eslint-disable-next-line no-console
                 console.error('Could not get original location of Sequence', err);
+                resolvedCache.set(stack, null);
+                subs.forEach((fn) => fn(null));
             })
                 .finally(() => {
                 inFlight.delete(stack);

package/dist/components/composition-menu-items.d.ts

@@ -0,0 +1,12 @@
+import type { SetStateAction } from 'react';
+import type { ResolvedStackLocation } from 'remotion';
+import type { ModalState } from '../state/modals';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getCompositionMenuItems: ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, }: {
+    composition: import("remotion").AnyComposition | null;
+    connectionStatus: "connected" | "disconnected" | "init";
+    resolvedLocation: ResolvedStackLocation | null;
+    setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
+    closeMenu: () => void;
+    readOnlyStudio: boolean;
+}) => ComboboxValue[];