@remotion/studio 4.0.522 → 4.0.524

package/dist/components/SyntaxHighlightedSource.js

@@ -0,0 +1,78 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const prismjs_1 = __importDefault(require("prismjs"));
+const react_1 = __importStar(require("react"));
+// These CommonJS grammars read global Prism. Load them after initialization:
+// Bun hoists side-effect imports ahead of the CommonJS default import.
+prismjs_1.default.manual = true;
+require('prismjs/components/prism-jsx.js');
+require('prismjs/components/prism-typescript.js');
+require('prismjs/components/prism-tsx.js');
+const tokenStyle = {
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+};
+const renderTokens = (tokens) => {
+    var _a;
+    if (typeof tokens === 'string') {
+        return tokens;
+    }
+    if (Array.isArray(tokens)) {
+        let offset = 0;
+        return tokens.map((token) => {
+            const key = offset;
+            offset += token.length;
+            return jsx_runtime_1.jsx(react_1.default.Fragment, { children: renderTokens(token) }, key);
+        });
+    }
+    return (jsx_runtime_1.jsx("span", { className: [
+            'token',
+            tokens.type,
+            ...(typeof tokens.alias === 'string'
+                ? [tokens.alias]
+                : ((_a = tokens.alias) !== null && _a !== void 0 ? _a : [])),
+        ].join(' '), style: tokenStyle, children: renderTokens(tokens.content) }));
+};
+const SyntaxHighlightedSource = ({ source, }) => {
+    const tokens = (0, react_1.useMemo)(() => prismjs_1.default.tokenize(source, prismjs_1.default.languages.tsx), [source]);
+    return (jsx_runtime_1.jsx("span", { style: { ...tokenStyle, color: 'inherit' }, children: renderTokens(tokens) }));
+};
+exports.default = SyntaxHighlightedSource;

package/dist/components/Tabs/vertical.d.ts

@@ -5,4 +5,5 @@ export declare const VerticalTab: React.FC<{
     readonly renderIcon?: (color: string) => React.ReactNode;
     readonly style?: React.CSSProperties;
     readonly selected: boolean;
+    readonly autoFocus?: boolean;
 }>;

package/dist/components/Tabs/vertical.js

@@ -19,7 +19,7 @@ const selectorButton = {
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-const VerticalTab = ({ children, onClick, renderIcon, style, selected }) => {
+const VerticalTab = ({ children, onClick, renderIcon, style, selected, autoFocus }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -38,6 +38,6 @@ const VerticalTab = ({ children, onClick, renderIcon, style, selected }) => {
             ...style,
         };
     }, [color, hovered, selected, style]);
-    return (jsx_runtime_1.jsxs("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, children] }));
+    return (jsx_runtime_1.jsxs("button", { autoFocus: autoFocus, style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, children] }));
 };
 exports.VerticalTab = VerticalTab;

package/dist/components/TimeValue.js

@@ -102,13 +102,12 @@ const TimeValue = () => {
     }), [seek, play, pause, toggle]);
     (0, react_1.useEffect)(() => {
         const gKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'g',
+            event: 'keydown',
+            action: 'goToFrame',
             callback: () => {
                 var _a;
                 (_a = ref.current) === null || _a === void 0 ? void 0 : _a.click();
             },
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,

package/dist/components/Timeline/SequencePropsObserver.js

@@ -8,6 +8,7 @@ const client_id_1 = require("../../helpers/client-id");
 const sequence_node_path_mutations_1 = require("../../helpers/sequence-node-path-mutations");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
+const TimelineSelection_1 = require("./TimelineSelection");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { remapPropStatuses, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -18,6 +19,7 @@ const SequencePropsObserver = () => {
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
     const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const { migrateExpandedTracksForSubscriptionKey } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
+    const { remapSelectionNodePaths } = (0, TimelineSelection_1.useTimelineSelection)();
     (0, react_1.useEffect)(() => {
         const handleEvent = (event) => {
             if (event.type !== 'sequence-props-updated') {
@@ -36,6 +38,7 @@ const SequencePropsObserver = () => {
         if (mutations.length === 0) {
             return;
         }
+        remapSelectionNodePaths(mutations);
         const statusRemappings = [];
         const overrideUpdates = [];
         const overrideIdsToRefresh = new Set();
@@ -127,6 +130,7 @@ const SequencePropsObserver = () => {
         fastRefreshes,
         migrateExpandedTracksForSubscriptionKey,
         propStatusesRef,
+        remapSelectionNodePaths,
         remapPropStatuses,
         setOverrideIdToNodePath,
     ]);

package/dist/components/Timeline/Timeline.js

@@ -63,7 +63,6 @@ const should_subscribe_to_sequence_props_1 = require("./should-subscribe-to-sequ
 const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_asset_drop_context_1 = require("./timeline-asset-drop-context");
 const timeline_refs_1 = require("./timeline-refs");
-const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
 const TimelineInOutDragHandler_1 = require("./TimelineInOutDragHandler");
@@ -75,7 +74,7 @@ const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
 const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSelection_1 = require("./TimelineSelection");
-const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
+const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEdgeDragHandle");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTickFormatProvider_1 = require("./TimelineTickFormatProvider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
@@ -99,7 +98,6 @@ const TimelineContextMenuArea = ({ children }) => {
     const assetDropFrame = (0, use_timeline_asset_drop_1.useTimelineAssetDrop)();
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -107,44 +105,6 @@ const TimelineContextMenuArea = ({ children }) => {
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const browserStudioCanInsertSolid = browserStudioOperations !== null;
-    (0, react_1.useEffect)(() => {
-        const verticalScroll = timeline_refs_1.timelineVerticalScroll.current;
-        if (!verticalScroll) {
-            return;
-        }
-        const autoScroll = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
-            includeHorizontal: false,
-            includeVertical: true,
-            verticalTopOffset: isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
-            onTick: (directions) => {
-                if (directions.y === null) {
-                    return;
-                }
-                verticalScroll.scrollTop +=
-                    directions.y === 'up'
-                        ? -timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT
-                        : timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT;
-            },
-        });
-        const onDragOver = (event) => {
-            if (!event.dataTransfer ||
-                !Array.from(event.dataTransfer.types).includes(TimelineSequenceItem_1.SEQUENCE_REORDER_MIME_TYPE)) {
-                autoScroll.stop();
-                return;
-            }
-            autoScroll.update(event);
-        };
-        const stopAutoScroll = () => autoScroll.stop();
-        verticalScroll.addEventListener('dragover', onDragOver, true);
-        document.addEventListener('dragend', stopAutoScroll, true);
-        document.addEventListener('drop', stopAutoScroll, true);
-        return () => {
-            autoScroll.stop();
-            verticalScroll.removeEventListener('dragover', onDragOver, true);
-            document.removeEventListener('dragend', stopAutoScroll, true);
-            document.removeEventListener('drop', stopAutoScroll, true);
-        };
-    }, [isStill]);
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -299,22 +259,54 @@ const TimelineInner = () => {
         overrideIdToNodePathMappings,
         compositions,
     ]);
+    const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const filtered = (0, react_1.useMemo)(() => {
+        return timeline.filter((t) => {
+            // Moving outside the composition can reduce the displayed duration to
+            // zero. Keep the drag owner mounted until its pending edit is saved.
+            if (t.sequence.showInTimeline &&
+                t.nodePathInfo !== null &&
+                getDragOverrides(t.nodePathInfo.sequenceSubscriptionKey).from !==
+                    undefined) {
+                return true;
+            }
+            return (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames);
+        });
+    }, [durationInFrames, getDragOverrides, timeline]);
+    // Keep `filtered` complete so a future toggle can show every programmatic
+    // instance without recalculating the timeline or losing its instance index.
+    const collapsed = (0, react_1.useMemo)(() => {
+        const seenNodePaths = new Set();
+        return filtered.filter((track) => {
+            if (track.nodePathInfo === null) {
+                return true;
+            }
+            const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
+            if (seenNodePaths.has(key)) {
+                return false;
+            }
+            seenNodePaths.add(key);
+            return true;
+        });
+    }, [filtered]);
+    const { visibleTracks, value: layerChildrenValue } = (0, TimelineLayerChildren_1.useTimelineLayerChildren)(collapsed, sequences, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null);
     const pendingInsertedElementSelection = (0, use_sync_external_store_1.useSyncExternalStore)(inserted_element_selection_1.subscribeToInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection);
     const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const pendingSelectionStart = (0, react_1.useRef)(null);
     const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         var _a;
         if (pendingInsertedElementSelection === null) {
             pendingSelectionStart.current = null;
             return;
         }
-        const matchesInsertedNodePath = (track) => track.nodePathInfo !== null &&
-            (pendingInsertedElementSelection.nodePath === null ||
-                (track.nodePathInfo.sequenceSubscriptionKey.absolutePath ===
+        const matchesInsertedNodePath = (track) => pendingInsertedElementSelection.nodePath === null ||
+            (track.nodePathInfo !== null &&
+                track.nodePathInfo.sequenceSubscriptionKey.absolutePath ===
                     pendingInsertedElementSelection.nodePath.absolutePath &&
-                    JSON.stringify(track.nodePathInfo.sequenceSubscriptionKey.nodePath) ===
-                        JSON.stringify(pendingInsertedElementSelection.nodePath.nodePath)));
+                JSON.stringify(track.nodePathInfo.sequenceSubscriptionKey.nodePath) ===
+                    JSON.stringify(pendingInsertedElementSelection.nodePath.nodePath));
         if (((_a = pendingSelectionStart.current) === null || _a === void 0 ? void 0 : _a.selection) !==
             pendingInsertedElementSelection) {
             pendingSelectionStart.current = {
@@ -340,7 +332,14 @@ const TimelineInner = () => {
             return matchesInsertedNodePath(track) &&
                 !((_a = pendingSelectionStart.current) === null || _a === void 0 ? void 0 : _a.existingSequenceIds.has(track.sequence.id));
         });
-        if (!insertedTrack || insertedTrack.nodePathInfo === null) {
+        if (!insertedTrack) {
+            return;
+        }
+        const layerKey = layerChildrenValue.keys.get(insertedTrack.sequence.id);
+        if (layerKey !== undefined && !layerChildrenValue.collapsed[layerKey]) {
+            layerChildrenValue.toggle(layerKey);
+        }
+        if (insertedTrack.nodePathInfo === null) {
             return;
         }
         selectItems([{ type: 'sequence', nodePathInfo: insertedTrack.nodePathInfo }], { reveal: true });
@@ -351,42 +350,11 @@ const TimelineInner = () => {
     }, [
         canvasContent,
         fastRefreshes,
+        layerChildrenValue,
         pendingInsertedElementSelection,
         selectItems,
         timeline,
     ]);
-    const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
-    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const filtered = (0, react_1.useMemo)(() => {
-        return timeline.filter((t) => {
-            // Moving outside the composition can reduce the displayed duration to
-            // zero. Keep the drag owner mounted until its pending edit is saved.
-            if (t.sequence.showInTimeline &&
-                t.nodePathInfo !== null &&
-                getDragOverrides(t.nodePathInfo.sequenceSubscriptionKey).from !==
-                    undefined) {
-                return true;
-            }
-            return (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames);
-        });
-    }, [durationInFrames, getDragOverrides, timeline]);
-    // Keep `filtered` complete so a future toggle can show every programmatic
-    // instance without recalculating the timeline or losing its instance index.
-    const collapsed = (0, react_1.useMemo)(() => {
-        const seenNodePaths = new Set();
-        return filtered.filter((track) => {
-            if (track.nodePathInfo === null) {
-                return true;
-            }
-            const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
-            if (seenNodePaths.has(key)) {
-                return false;
-            }
-            seenNodePaths.add(key);
-            return true;
-        });
-    }, [filtered]);
-    const { visibleTracks, value: layerChildrenValue } = (0, TimelineLayerChildren_1.useTimelineLayerChildren)(collapsed, sequences, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null);
     const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
     const shown = (0, react_1.useMemo)(() => {
         return maxTimelineTracks !== null &&
@@ -413,6 +381,6 @@ const TimelineInner = () => {
 };
 const MemoizedTimelineInner = react_1.default.memo(TimelineInner);
 const Timeline = () => {
-    return (jsx_runtime_1.jsx(TimelineTickFormatProvider_1.TimelineTickFormatProvider, { children: jsx_runtime_1.jsx(MemoizedTimelineInner, {}) }));
+    return (jsx_runtime_1.jsx(TimelineTickFormatProvider_1.TimelineTickFormatProvider, { children: jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceMediaDurationDragLimitsProvider, { children: jsx_runtime_1.jsx(MemoizedTimelineInner, {}) }) }));
 };
 exports.Timeline = Timeline;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -367,7 +367,7 @@ const TimelineClipboardKeybindings = () => {
         const { clientId } = previewServerState;
         const copy = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'c',
+            action: 'copyEffectsAndValues',
             callback: (e) => {
                 var _a, _b;
                 const { selectedItems } = currentSelection.current;
@@ -509,14 +509,13 @@ const TimelineClipboardKeybindings = () => {
                     (0, NotificationCenter_1.showNotification)(`Could not copy effects: ${err.message}`, 2000);
                 });
             },
-            commandCtrlKey: true,
             preventDefault: false,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const cut = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'x',
+            action: 'cutEffects',
             callback: (e) => {
                 const { selectedItems, clearSelection, selectItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
@@ -575,7 +574,6 @@ const TimelineClipboardKeybindings = () => {
                     (0, NotificationCenter_1.showNotification)(`Could not cut effects: ${err.message}`, 2000);
                 });
             },
-            commandCtrlKey: true,
             preventDefault: false,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -25,31 +25,18 @@ const TimelineDeleteKeybindings = () => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
         }
-        const backspace = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'Backspace',
-            callback: () => deleteTimelineItems(null),
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
         const deleteKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'Delete',
+            action: 'deleteSelection',
             callback: () => deleteTimelineItems(null),
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const duplicate = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'd',
-            callback: (event) => {
-                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineDuplicateShortcut)(event)) {
-                    return;
-                }
+            action: 'duplicateSequences',
+            callback: () => {
                 const { selectedItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
@@ -63,7 +50,6 @@ const TimelineDeleteKeybindings = () => {
                 }
                 duplicatePromise.catch(() => undefined);
             },
-            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -97,7 +83,6 @@ const TimelineDeleteKeybindings = () => {
             keepRegisteredWhenNotHighestContext: false,
         });
         return () => {
-            backspace.unregister();
             deleteKey.unregister();
             duplicate.unregister();
             split.unregister();

package/dist/components/Timeline/TimelineDragHandler.js

@@ -115,7 +115,7 @@ const TimelineDragHandler = () => {
 };
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {
-    var _a;
+    var _a, _b;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
@@ -320,6 +320,6 @@ const TimelineDragHandlerInner = () => {
             current.removeEventListener('scroll', onScroll);
         };
     }, []);
-    return (jsx_runtime_1.jsx("div", { ref: ref, style: style, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }) }));
+    return (jsx_runtime_1.jsx("div", { ref: ref, style: { ...style, minWidth: (_b = size === null || size === void 0 ? void 0 : size.width) !== null && _b !== void 0 ? _b : 0 }, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }) }));
 };
 const TimelineDragHandlerInnerMemo = react_1.default.memo(TimelineDragHandlerInner);

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -47,6 +47,7 @@ const rowClipper = {
     boxSizing: 'border-box',
     marginLeft: -timeline_layout_1.TIMELINE_PADDING,
     marginRight: -timeline_layout_1.TIMELINE_PADDING,
+    minWidth: `calc(100% + ${timeline_layout_1.TIMELINE_PADDING * 2}px)`,
     overflow: 'hidden',
     paddingLeft: timeline_layout_1.TIMELINE_PADDING,
     paddingRight: timeline_layout_1.TIMELINE_PADDING,

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -8,7 +8,16 @@ const hoverable_1 = require("../../helpers/hoverable");
 const persist_boolean_map_1 = require("../../helpers/persist-boolean-map");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const TimelineCollapseToggle_1 = require("./TimelineCollapseToggle");
-const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+// Reserve the same space before and after children register or unregister.
+const toggleLayout = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 12,
+    height: 16,
+    marginRight: 0,
+    flexShrink: 0,
+};
 const STORAGE_KEY = 'remotion.editor.collapsedLayerChildren.v1';
 const TimelineLayerChildrenContext = (0, react_1.createContext)(null);
 exports.TimelineLayerChildrenProvider = TimelineLayerChildrenContext.Provider;
@@ -104,7 +113,7 @@ const TimelineLayerChildrenToggle = ({ sequence }) => {
     }, [context, key]);
     const stopPropagation = (0, react_1.useCallback)((event) => event.stopPropagation(), []);
     if (!(context === null || context === void 0 ? void 0 : context.parents.has(sequence.id)) || key === undefined) {
-        return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
+        return jsx_runtime_1.jsx("div", { style: toggleLayout });
     }
     const label = `${isCollapsed ? 'Expand' : 'Collapse'} children of ${sequence.displayName}`;
     return (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, "aria-label": label, "aria-expanded": !isCollapsed, title: label, onClick: onClick, onPointerDown: stopPropagation, onDoubleClick: stopPropagation, style: {
@@ -114,16 +123,10 @@ const TimelineLayerChildrenToggle = ({ sequence }) => {
                 idleColor: colors_1.LIGHT_TEXT,
                 hoverColor: colors_1.WHITE,
             }),
+            ...toggleLayout,
             border: 'none',
             padding: 0,
             cursor: 'default',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 12,
-            height: 16,
-            marginRight: 0,
-            flexShrink: 0,
         }, children: jsx_runtime_1.jsx(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: isCollapsed, color: "currentColor" }) }));
 };
 exports.TimelineLayerChildrenToggle = TimelineLayerChildrenToggle;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -37,6 +37,7 @@ exports.TimelineRowChrome = exports.TimelineRowKeyframeControlsColumn = exports.
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
+const drag_aware_double_click_1 = require("../../helpers/drag-aware-double-click");
 const Padder_1 = require("./Padder");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
@@ -72,6 +73,7 @@ exports.TimelineRowKeyframeControlsColumn = TimelineRowKeyframeControlsColumn;
 const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, hovered = false, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
     const { basePadding, rowBorderRadius, rowHorizontalMargin } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const selectedBackground = (0, react_1.useContext)(exports.TimelineRowSelectedBackgroundContext);
+    const doubleClickTracker = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
@@ -95,7 +97,7 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
             onSelect();
         }
     }, [onSelect, selected]);
-    const onDoubleClickIfNotInteractive = (0, react_1.useCallback)((e) => {
+    const performDoubleClickIfNotInteractive = (0, react_1.useCallback)((e) => {
         const { target } = e;
         if (target instanceof Element &&
             e.currentTarget.contains(target.closest('button, input, select, textarea, a, [contenteditable="true"]'))) {
@@ -104,6 +106,12 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         }
         onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
     }, [onDoubleClick]);
+    const onClick = (0, react_1.useCallback)((e) => {
+        if (!doubleClickTracker.acceptClickAsDoubleClick(e)) {
+            return;
+        }
+        performDoubleClickIfNotInteractive(e);
+    }, [doubleClickTracker, performDoubleClickIfNotInteractive]);
     const highlightBackground = (0, TimelineSelection_1.getTimelineRowHighlightBackground)({
         showSelectedBackground,
         selected,
@@ -139,8 +147,8 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
     }, [outerHeight, highlightBackground]);
     const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [keyframeControls ? (jsx_runtime_1.jsx(exports.TimelineRowKeyframeControlsColumn, { depth: depth, children: keyframeControls })) : (jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] }) })), children] }));
     if (outerStyle) {
-        return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClickIfNotInteractive, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+        return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDownCapture: doubleClickTracker.beginPointerGesture, onPointerDown: selectable ? onPointerDown : undefined, onClick: onClick, onContextMenu: selectable ? onContextMenu : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }
-    return (jsx_runtime_1.jsx("div", { onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClickIfNotInteractive, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
+    return (jsx_runtime_1.jsx("div", { onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDownCapture: doubleClickTracker.beginPointerGesture, onPointerDown: selectable ? onPointerDown : undefined, onClick: onClick, onContextMenu: selectable ? onContextMenu : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -52,8 +52,10 @@ const unsupportedStatusWrapper = {
 };
 const unsupportedLabel = {
     color: colors_1.WHITE_ALPHA_40,
+    fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
     fontStyle: 'italic',
+    lineHeight: '18px',
 };
 const computedValue = {
     color: colors_1.WHITE_ALPHA_40,
@@ -119,10 +121,12 @@ const TimelineNonEditableStatus = ({ propStatus, field, runtimeValue, validatedL
         });
     }, [field.key, remotionSkillsInfo, setSelectedModal, validatedLocation]);
     if (propStatus.status === 'computed') {
-        return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
-                fieldSchema: field.fieldSchema,
-                value: runtimeValue,
-            }), onFix: onFix, formattedValue: true }));
+        return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: runtimeValue === undefined
+                ? 'computed'
+                : (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+                    fieldSchema: field.fieldSchema,
+                    value: runtimeValue,
+                }), onFix: onFix, formattedValue: runtimeValue !== undefined }));
     }
 };
 exports.TimelineNonEditableStatus = TimelineNonEditableStatus;

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

@@ -1,4 +1,5 @@
 import { type CanvasSelectionInteraction, type CanvasSelectionItem, type CanvasSelectionSnapshot } from '@remotion/canvas';
+import { type SequenceNodePathMutation } from '@remotion/studio-shared';
 import React, { type CSSProperties } from 'react';
 import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses } from 'remotion';
 import type { SequenceNodePathInfo, TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
@@ -101,6 +102,7 @@ type TimelineSelectionContextValue = {
         readonly selectedItems: readonly TimelineSelection[];
     };
     readonly containsSelection: (nodePathInfo: SequenceNodePathInfo) => boolean;
+    readonly remapSelectionNodePaths: (mutations: readonly SequenceNodePathMutation[]) => void;
     readonly clearSelection: () => void;
 };
 export declare const TimelineSelectionOrderProvider: React.FC<{