@remotion/studio 4.0.481 → 4.0.482

package/dist/components/Timeline/TimelineSelection.js

@@ -266,7 +266,7 @@ const TimelineSelectionOrderProvider = ({ children, items }) => {
 };
 exports.TimelineSelectionOrderProvider = TimelineSelectionOrderProvider;
 const CurrentTimelineSelectionContext = (0, react_1.createContext)(null);
-const TIMELINE_SELECTION_FOCUS_PADDING = 8;
+const TIMELINE_SELECTION_REVEAL_RETRY_COUNT = 2;
 const parseEffectIndex = (effectIndex) => {
     const parsed = Number(effectIndex);
     if (!Number.isInteger(parsed) || parsed < 0) {
@@ -557,11 +557,13 @@ const TimelineSelectionProvider = ({ children }) => {
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
     const focusableItems = (0, react_1.useRef)(new Map());
-    const previousSingleSelectionKey = (0, react_1.useRef)(null);
+    const focusableRegistrationCounter = (0, react_1.useRef)(0);
+    const [revealRequest, setRevealRequest] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
             selectionScope.current = null;
             selectionAnchor.current = null;
+            setRevealRequest(null);
             setSelectedItems([]);
         }
     }, [canSelect]);
@@ -577,37 +579,62 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [timelineSelectionScope]);
     const availableSelectionState = getCurrentAvailableSelectionState(selectedItems);
     const availableSelectedItems = availableSelectionState.selectedItems;
-    (0, react_1.useEffect)(() => {
-        if (availableSelectedItems.length !== 1) {
-            previousSingleSelectionKey.current = null;
-            return;
-        }
-        const selectedKey = (0, exports.getTimelineSelectionKey)(availableSelectedItems[0]);
-        if (previousSingleSelectionKey.current === selectedKey) {
-            return;
-        }
-        previousSingleSelectionKey.current = selectedKey;
-        const animationFrame = requestAnimationFrame(() => {
+    const revealSelectionKey = (0, react_1.useCallback)((selectedKey) => {
+        let cancelled = false;
+        let animationFrame = null;
+        const reveal = (attempt) => {
             var _a;
-            const registered = (_a = focusableItems.current.get(selectedKey)) !== null && _a !== void 0 ? _a : marqueeSelectableItems.current.get(selectedKey);
+            var _b;
+            if (cancelled) {
+                return;
+            }
             const scrollParent = timeline_refs_1.timelineVerticalScroll.current;
-            const rect = registered === null || registered === void 0 ? void 0 : registered.getRect();
+            const focusableRegistrations = focusableItems.current.get(selectedKey);
+            const focusableElement = scrollParent && focusableRegistrations
+                ? [...focusableRegistrations.values()]
+                    .sort((a, b) => a.order - b.order)
+                    .map((registered) => registered.getElement())
+                    .find((element) => element !== null && scrollParent.contains(element))
+                : null;
+            const rect = (_b = focusableElement === null || focusableElement === void 0 ? void 0 : focusableElement.getBoundingClientRect()) !== null && _b !== void 0 ? _b : (_a = marqueeSelectableItems.current.get(selectedKey)) === null || _a === void 0 ? void 0 : _a.getRect();
             if (!scrollParent || !rect) {
+                if (attempt < TIMELINE_SELECTION_REVEAL_RETRY_COUNT) {
+                    animationFrame = requestAnimationFrame(() => reveal(attempt + 1));
+                }
                 return;
             }
             const parentRect = scrollParent.getBoundingClientRect();
-            if (rect.top < parentRect.top) {
-                scrollParent.scrollTop -=
-                    parentRect.top - rect.top + TIMELINE_SELECTION_FOCUS_PADDING;
+            if (rect.top >= parentRect.top && rect.bottom <= parentRect.bottom) {
                 return;
             }
-            if (rect.bottom > parentRect.bottom) {
-                scrollParent.scrollTop +=
-                    rect.bottom - parentRect.bottom + TIMELINE_SELECTION_FOCUS_PADDING;
+            const elementCenter = rect.top + rect.height / 2;
+            const parentCenter = parentRect.top + parentRect.height / 2;
+            scrollParent.scrollTop += elementCenter - parentCenter;
+        };
+        animationFrame = requestAnimationFrame(() => reveal(0));
+        return () => {
+            cancelled = true;
+            if (animationFrame !== null) {
+                cancelAnimationFrame(animationFrame);
             }
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (revealRequest === null) {
+            return;
+        }
+        return revealSelectionKey(revealRequest.key);
+    }, [revealRequest, revealSelectionKey]);
+    const requestRevealSelectionItem = (0, react_1.useCallback)((item) => {
+        const key = (0, exports.getTimelineSelectionKey)(item);
+        setRevealRequest((previousRequest) => {
+            var _a;
+            return ({
+                key,
+                token: ((_a = previousRequest === null || previousRequest === void 0 ? void 0 : previousRequest.token) !== null && _a !== void 0 ? _a : 0) + 1,
+            });
         });
-        return () => cancelAnimationFrame(animationFrame);
-    }, [availableSelectedItems]);
+    }, []);
     const expandParentsForSelectionItems = (0, react_1.useCallback)((items) => {
         for (const item of items) {
             if (item.type === 'guide') {
@@ -646,11 +673,14 @@ const TimelineSelectionProvider = ({ children }) => {
     const selectItem = (0, react_1.useCallback)((item, interaction = {
         shiftKey: false,
         toggleKey: false,
-    }, allSelectableItems = []) => {
+    }, allSelectableItems = [], options = {}) => {
         if (!canSelectItem(item)) {
             return;
         }
         expandParentsForSelectionItem(item);
+        if (options.reveal) {
+            requestRevealSelectionItem(item);
+        }
         setSelectedItems((currentSelectedItems) => {
             const currentSelectionState = getCurrentAvailableSelectionState(currentSelectedItems);
             const nextState = (0, exports.getTimelineSelectionAfterInteraction)({
@@ -670,9 +700,10 @@ const TimelineSelectionProvider = ({ children }) => {
         canSelectItem,
         expandParentsForSelectionItem,
         getCurrentAvailableSelectionState,
+        requestRevealSelectionItem,
         timelineSelectionScope,
     ]);
-    const selectItems = (0, react_1.useCallback)((items) => {
+    const selectItems = (0, react_1.useCallback)((items, options = {}) => {
         if (!items.every(canSelectItem)) {
             return;
         }
@@ -680,8 +711,16 @@ const TimelineSelectionProvider = ({ children }) => {
         selectionAnchor.current =
             items.length === 0 ? null : items[items.length - 1];
         expandParentsForSelectionItems(items);
+        if (options.reveal && items.length === 1) {
+            requestRevealSelectionItem(items[0]);
+        }
         setSelectedItems(items);
-    }, [canSelectItem, expandParentsForSelectionItems, timelineSelectionScope]);
+    }, [
+        canSelectItem,
+        expandParentsForSelectionItems,
+        requestRevealSelectionItem,
+        timelineSelectionScope,
+    ]);
     const registerMarqueeSelectableItem = (0, react_1.useCallback)((item, getRect) => {
         const key = (0, exports.getTimelineSelectionKey)(item);
         const registrationOrder = marqueeRegistrationCounter.current;
@@ -695,13 +734,23 @@ const TimelineSelectionProvider = ({ children }) => {
             marqueeSelectableItems.current.delete(key);
         };
     }, []);
-    const registerFocusableItem = (0, react_1.useCallback)((item, getRect) => {
+    const registerFocusableItem = (0, react_1.useCallback)((item, getElement) => {
+        var _a;
         const key = (0, exports.getTimelineSelectionKey)(item);
-        focusableItems.current.set(key, {
-            getRect,
+        const registrationOrder = focusableRegistrationCounter.current;
+        focusableRegistrationCounter.current += 1;
+        const registrations = (_a = focusableItems.current.get(key)) !== null && _a !== void 0 ? _a : new Map();
+        registrations.set(registrationOrder, {
+            getElement,
+            order: registrationOrder,
         });
+        focusableItems.current.set(key, registrations);
         return () => {
-            focusableItems.current.delete(key);
+            const latestRegistrations = focusableItems.current.get(key);
+            latestRegistrations === null || latestRegistrations === void 0 ? void 0 : latestRegistrations.delete(registrationOrder);
+            if ((latestRegistrations === null || latestRegistrations === void 0 ? void 0 : latestRegistrations.size) === 0) {
+                focusableItems.current.delete(key);
+            }
         };
     }, []);
     const getMarqueeSelectionForRect = (0, react_1.useCallback)((marqueeRect, lockedSelectionKind) => {
@@ -902,11 +951,7 @@ const useTimelineFocusableItem = (item, ref) => {
         if (item === null) {
             return;
         }
-        return registerFocusableItem(item, () => {
-            var _a;
-            var _b;
-            return (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : null;
-        });
+        return registerFocusableItem(item, () => ref.current);
     }, [item, ref, registerFocusableItem]);
 };
 exports.useTimelineFocusableItem = useTimelineFocusableItem;
@@ -919,7 +964,7 @@ const useTimelineRowSelection = (nodePathInfo) => {
         if (selectionItem === null) {
             return;
         }
-        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current);
+        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current, { reveal: true });
     }, [selectItem, selectableTimelineItemsRef, selectionItem]);
     return {
         onSelect,

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -57,7 +57,6 @@ const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
-const TimelineItemStack_1 = require("./TimelineItemStack");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineMediaInfo_1 = require("./TimelineMediaInfo");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
@@ -807,8 +806,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
-                    ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineItemStack_1.TimelineItemStack, { originalLocation: originalLocation })
-            ] }) }));
+                    ] })) : null] }) }));
     const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
                 isExpanded &&

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -214,6 +214,9 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
     if (!fieldSchema) {
         return formatUnknownTimelineValueForDisplay(value);
     }
+    if (value === undefined) {
+        return 'unset';
+    }
     switch (fieldSchema.type) {
         case 'number':
             return ((_a = formatNumberTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _a !== void 0 ? _a : formatUnknownTimelineValueForDisplay(value));

package/dist/components/composition-menu-items.js

@@ -99,6 +99,23 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 id: 'show-in-editor-divider',
             }
             : null,
+        {
+            id: 'new',
+            keyHint: null,
+            label: `New...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'new-comp',
+                });
+            },
+            quickSwitcherLabel: 'New composition...',
+            subMenu: null,
+            type: 'item',
+            value: 'new',
+            disabled: readOnlyStudio,
+        },
         {
             id: 'rename',
             keyHint: null,