@remotion/studio 4.0.518 → 4.0.520

package/dist/components/Timeline/duplicate-selected-timeline-item.js

@@ -26,35 +26,33 @@ const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, co
         confirmLabel: 'Duplicate',
     });
 };
-const duplicateSequence = (nodePathInfo) => {
-    const nodePath = nodePathInfo.sequenceSubscriptionKey;
-    return (0, duplicate_jsx_node_api_1.duplicateJsxNode)({
-        fileName: nodePath.absolutePath,
-        nodePath: nodePath.nodePath,
-    });
-};
-const duplicateSequencesFromSource = (nodePathInfos, confirm) => {
+const duplicateSequencesFromSource = async (nodePathInfos, confirm) => {
     const programmaticallyDuplicated = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
     const regular = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath <= 1);
-    return confirmDuplicatingProgrammaticallyDuplicatedSequences(programmaticallyDuplicated, confirm).then((shouldDuplicateProgrammaticSequences) => {
-        const toDuplicate = [...regular];
-        if (shouldDuplicateProgrammaticSequences) {
-            toDuplicate.push(...programmaticallyDuplicated);
+    const shouldDuplicateProgrammaticSequences = await confirmDuplicatingProgrammaticallyDuplicatedSequences(programmaticallyDuplicated, confirm);
+    const toDuplicate = [...regular];
+    if (shouldDuplicateProgrammaticSequences) {
+        toDuplicate.push(...programmaticallyDuplicated);
+    }
+    const nodes = toDuplicate.map((nodePathInfo) => {
+        const nodePath = nodePathInfo.sequenceSubscriptionKey;
+        return {
+            fileName: nodePath.absolutePath,
+            nodePath: nodePath.nodePath,
+        };
+    });
+    try {
+        if (nodes.length === 0) {
+            return;
         }
-        if (toDuplicate.length === 0) {
-            return Promise.resolve();
+        const result = await (0, duplicate_jsx_node_api_1.duplicateJsxNode)({ nodes });
+        if (!result.success) {
+            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
-        return Promise.all(toDuplicate.map(duplicateSequence))
-            .then((results) => {
-            const failedResult = results.find((result) => !result.success);
-            if (failedResult && !failedResult.success) {
-                (0, NotificationCenter_1.showNotification)(failedResult.reason, 4000);
-            }
-        })
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(err.message, 4000);
-        });
-    });
+    }
+    catch (err) {
+        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+    }
 };
 exports.duplicateSequencesFromSource = duplicateSequencesFromSource;
 const isDuplicatableSequenceRowSelection = (selection) => selection.type === 'sequence';

package/dist/components/Timeline/get-sequence-context-menu-items.d.ts

@@ -2,6 +2,12 @@ import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEdito
 import type { ResolvedStackLocation, TSequence } from 'remotion';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { TimelineAssetLinkInfo } from './timeline-asset-link';
+export declare const getMultiSequenceContextMenuItems: ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }: {
+    readonly deleteDisabled: boolean;
+    readonly duplicateDisabled: boolean;
+    readonly onDeleteSelectedSequences: () => void;
+    readonly onDuplicateSelectedSequences: () => void;
+}) => ComboboxValue[];
 export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
     readonly assetLinkInfo: TimelineAssetLinkInfo | null;
     readonly canOpenInEditor: boolean;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSequenceContextMenuItems = void 0;
+exports.getSequenceContextMenuItems = exports.getMultiSequenceContextMenuItems = void 0;
 const no_react_1 = require("remotion/no-react");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const get_open_in_menu_items_1 = require("../get-open-in-menu-items");
@@ -27,6 +27,39 @@ const normalizeMenuDividers = (items) => {
     return normalized;
 };
 const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
+const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }) => {
+    return [
+        {
+            type: 'item',
+            id: 'duplicate-selected-sequences',
+            keyHint: null,
+            label: 'Duplicate selected',
+            leftItem: null,
+            disabled: duplicateDisabled,
+            onClick: onDuplicateSelectedSequences,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'duplicate-selected-sequences',
+        },
+        {
+            type: 'divider',
+            id: 'duplicate-delete-selected-sequences-divider',
+        },
+        {
+            type: 'item',
+            id: 'delete-selected-sequences',
+            keyHint: null,
+            label: 'Delete selected',
+            leftItem: null,
+            disabled: deleteDisabled,
+            onClick: onDeleteSelectedSequences,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'delete-selected-sequences',
+        },
+    ];
+};
+exports.getMultiSequenceContextMenuItems = getMultiSequenceContextMenuItems;
 const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
     var _a, _b, _c;
     var _d, _e, _f;

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -2,6 +2,8 @@ import type { SequenceNodePath, InteractivitySchema, VideoConfigValues } from 'r
 import { subscribeToSequenceProps } from '../sequence-props-api';
 type SubscribeResult = Awaited<ReturnType<typeof subscribeToSequenceProps>>;
 type ApplyResult = (result: SubscribeResult) => void;
+export declare const subscribeToSequencePropsRefresh: (overrideId: string, listener: () => void) => () => void;
+export declare const refreshSequencePropsSubscription: (overrideId: string) => void;
 export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, stack, }: {
     fileName: string;
     line: number;

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.acquireSequencePropsSubscription = void 0;
+exports.acquireSequencePropsSubscription = exports.refreshSequencePropsSubscription = exports.subscribeToSequencePropsRefresh = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const sequence_props_api_1 = require("../sequence-props-api");
@@ -8,6 +8,27 @@ const sequence_props_api_1 = require("../sequence-props-api");
 // resolve both the old and new JSX nodes to the same line and column.
 const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, assetKeys, effectKeys, videoConfigValues, stack, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${assetKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}\0${JSON.stringify(videoConfigValues)}\0${stack !== null && stack !== void 0 ? stack : ''}`;
 const entries = new Map();
+const refreshListeners = new Map();
+const subscribeToSequencePropsRefresh = (overrideId, listener) => {
+    var _a;
+    const listeners = (_a = refreshListeners.get(overrideId)) !== null && _a !== void 0 ? _a : new Set();
+    listeners.add(listener);
+    refreshListeners.set(overrideId, listeners);
+    return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+            refreshListeners.delete(overrideId);
+        }
+    };
+};
+exports.subscribeToSequencePropsRefresh = subscribeToSequencePropsRefresh;
+const refreshSequencePropsSubscription = (overrideId) => {
+    var _a;
+    for (const listener of (_a = refreshListeners.get(overrideId)) !== null && _a !== void 0 ? _a : []) {
+        listener();
+    }
+};
+exports.refreshSequencePropsSubscription = refreshSequencePropsSubscription;
 const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, stack, }) => {
     const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
     const assetKeys = (0, studio_shared_1.getAssetSchemaKeys)(schema);

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -3,6 +3,7 @@ export declare const canScrollTimelineIntoDirection: () => {
     canScrollLeft: boolean;
 };
 export declare const SCROLL_INCREMENT = 200;
+export declare const getTimelineContentWidth: () => number;
 export declare const EDGE_SCROLL_VERTICAL_INCREMENT = 60;
 export type TimelineEdgeScrollDirections = {
     x: 'left' | 'right' | null;

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromTimelineDrop = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.startTimelineEdgeAutoScroll = exports.EDGE_SCROLL_VERTICAL_INCREMENT = exports.SCROLL_INCREMENT = exports.canScrollTimelineIntoDirection = void 0;
+exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromTimelineDrop = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.startTimelineEdgeAutoScroll = exports.EDGE_SCROLL_VERTICAL_INCREMENT = exports.getTimelineContentWidth = exports.SCROLL_INCREMENT = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const imperative_state_1 = require("./imperative-state");
@@ -15,6 +15,12 @@ const canScrollTimelineIntoDirection = () => {
 };
 exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;
 exports.SCROLL_INCREMENT = 200;
+const getTimelineContentWidth = () => {
+    var _a, _b;
+    var _c, _d;
+    return ((_d = (_c = (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _d !== void 0 ? _d : 0);
+};
+exports.getTimelineContentWidth = getTimelineContentWidth;
 exports.EDGE_SCROLL_VERTICAL_INCREMENT = 60;
 const EDGE_SCROLL_INTERVAL_MS = 100;
 // Once edge-scrolling has started, the pointer must move this many pixels
@@ -169,10 +175,10 @@ const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
 };
 exports.getFrameWhileScrollingLeft = getFrameWhileScrollingLeft;
 const isCursorInViewport = ({ frame, durationInFrames, }) => {
-    var _a, _b;
-    var _c, _d;
-    const width = (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _c !== void 0 ? _c : 0;
-    const scrollLeft = (_d = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) !== null && _d !== void 0 ? _d : 0;
+    var _a;
+    var _b;
+    const width = (0, exports.getTimelineContentWidth)();
+    const scrollLeft = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
     const scrollPosOnRightEdge = (0, exports.getScrollPositionForCursorOnRightEdge)({
         nextFrame: frame,
         durationInFrames,
@@ -194,14 +200,14 @@ const isCursorInViewport = ({ frame, durationInFrames, }) => {
 };
 exports.isCursorInViewport = isCursorInViewport;
 const ensureFrameIsInViewport = ({ direction, durationInFrames, frame, }) => {
-    var _a, _b, _c;
-    var _d, _e;
+    var _a, _b;
+    var _c;
     // Sync the imperative frame first: scrolling below triggers the scroll
     // listener in TimelineSlider, which reads the frame imperatively.
     (0, imperative_state_1.setCurrentFrame)(frame);
     (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(frame);
-    const width = (_d = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _d !== void 0 ? _d : 0;
-    const scrollLeft = (_e = (_c = timeline_refs_1.scrollableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _e !== void 0 ? _e : 0;
+    const width = (0, exports.getTimelineContentWidth)();
+    const scrollLeft = (_c = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) !== null && _c !== void 0 ? _c : 0;
     if (direction === 'fit-left') {
         const currentFrameLeft = (0, exports.getFrameFromX)({
             clientX: scrollLeft,
@@ -281,22 +287,20 @@ const getScrollPositionForCursorOnLeftEdge = ({ nextFrame, durationInFrames, })
 };
 exports.getScrollPositionForCursorOnLeftEdge = getScrollPositionForCursorOnLeftEdge;
 const getScrollPositionForCursorOnRightEdge = ({ nextFrame, durationInFrames, }) => {
-    var _a, _b;
+    var _a;
     const frameIncrement = getFrameIncrement(durationInFrames);
     const framesRemaining = durationInFrames - 1 - nextFrame;
     const fromRight = framesRemaining * frameIncrement + timeline_layout_1.TIMELINE_PADDING;
-    const scrollPos = ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) -
+    const scrollPos = (0, exports.getTimelineContentWidth)() -
         fromRight -
-        ((_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) +
+        ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) +
         timeline_layout_1.TIMELINE_PADDING +
         4; // clearfix;
     return scrollPos;
 };
 exports.getScrollPositionForCursorOnRightEdge = getScrollPositionForCursorOnRightEdge;
 const getFrameIncrement = (durationInFrames) => {
-    var _a;
-    var _b;
-    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
+    const width = (0, exports.getTimelineContentWidth)();
     return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
 const getFrameIncrementFromWidth = (durationInFrames, width) => {
@@ -366,7 +370,7 @@ const prepareToPreserveTimelineCursor = ({ currentFrame, currentDurationInFrames
     if (!current) {
         return () => undefined;
     }
-    const oldTimelineWidth = current.scrollWidth;
+    const oldTimelineWidth = (0, exports.getTimelineContentWidth)();
     const oldScrollLeft = current.scrollLeft;
     const frameIncrement = (0, exports.getFrameIncrementFromWidth)(currentDurationInFrames, oldTimelineWidth);
     const frameForScroll = anchorFrame !== null && anchorFrame !== void 0 ? anchorFrame : currentFrame;
@@ -381,7 +385,7 @@ const prepareToPreserveTimelineCursor = ({ currentFrame, currentDurationInFrames
             anchorContentX: prevCursorPosition,
             oldScrollLeft,
             oldTimelineWidth,
-            newTimelineWidth: current.scrollWidth,
+            newTimelineWidth: (0, exports.getTimelineContentWidth)(),
         });
     };
 };

package/dist/components/Timeline/use-delete-timeline-items.d.ts

@@ -0,0 +1 @@
+export declare const useDeleteTimelineItems: () => (selectedItemsOverride: readonly import("@remotion/canvas").CanvasSelectionItem[] | null) => void;

package/dist/components/Timeline/use-delete-timeline-items.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeleteTimelineItems = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const editor_guides_1 = require("../../state/editor-guides");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
+const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
+const imperative_state_1 = require("./imperative-state");
+const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
+const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
+const useDeleteTimelineItems = () => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setGuidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    return (0, react_1.useCallback)((selectedItemsOverride) => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
+        const { clientId } = previewServerState;
+        const { selectedItems: currentSelectedItems, clearSelection, selectItems, } = currentSelection.current;
+        const selectedItems = selectedItemsOverride !== null && selectedItemsOverride !== void 0 ? selectedItemsOverride : currentSelectedItems;
+        const sequences = sequencesRef.current;
+        const propStatuses = propStatusesRef.current;
+        const timelinePosition = (0, imperative_state_1.getCurrentFrame)();
+        if (selectedItems.length === 0) {
+            return;
+        }
+        const selectedGuide = selectedItems.find((item) => item.type === 'guide');
+        if (selectedGuide) {
+            setGuidesList((prevGuides) => {
+                const newGuides = prevGuides.filter((guide) => guide.id !== selectedGuide.guideId);
+                (0, editor_guides_1.persistGuidesList)(newGuides);
+                return newGuides;
+            });
+            clearSelection();
+            return;
+        }
+        const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
+            selections: selectedItems,
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            setPropStatuses,
+            clientId,
+            confirm,
+            propStatuses,
+            timelinePosition,
+        });
+        if (deletePromise !== null) {
+            deletePromise
+                .then((deleted) => {
+                if (!deleted) {
+                    return;
+                }
+                const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
+                    selections: selectedItems,
+                    sequences,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    propStatuses,
+                    timelinePosition,
+                });
+                if (nextSelection.length === 0) {
+                    clearSelection();
+                }
+                else {
+                    selectItems(nextSelection);
+                }
+            })
+                .catch(() => undefined);
+            return;
+        }
+        const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
+        if (easingSelections.length === selectedItems.length) {
+            const resetEasingPromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
+                selections: easingSelections,
+                sequences,
+                overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                propStatuses,
+                setPropStatuses,
+                clientId,
+                easing: studio_shared_1.LINEAR_KEYFRAME_EASING,
+            });
+            if (resetEasingPromise !== null) {
+                resetEasingPromise.catch(() => undefined);
+                return;
+            }
+        }
+        const resetPromise = (0, reset_selected_timeline_props_1.resetSelectedTimelineProps)({
+            selections: selectedItems,
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses,
+            setPropStatuses,
+            clientId,
+        });
+        if (resetPromise !== null) {
+            resetPromise.catch(() => undefined);
+        }
+    }, [
+        confirm,
+        currentSelection,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        propStatusesRef,
+        sequencesRef,
+        setGuidesList,
+        setPropStatuses,
+    ]);
+};
+exports.useDeleteTimelineItems = useDeleteTimelineItems;

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -15,6 +15,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { migrateExpandedTracksForSubscriptionKey } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { previewServerState: state } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [refreshToken, setRefreshToken] = (0, react_1.useState)(0);
     const previousNodePathRef = (0, react_1.useRef)(null);
     const overrideIdToNodePathMappingsRef = (0, react_1.useRef)(overrideIdToNodePathMappings);
     overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
@@ -37,6 +38,11 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
     const locationSource = (_a = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _a !== void 0 ? _a : null;
     const locationLine = (_b = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.line) !== null && _b !== void 0 ? _b : null;
     const locationColumn = (_c = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.column) !== null && _c !== void 0 ? _c : null;
+    (0, react_1.useEffect)(() => {
+        return (0, sequence_props_subscription_store_1.subscribeToSequencePropsRefresh)(overrideId, () => {
+            setRefreshToken((token) => token + 1);
+        });
+    }, [overrideId]);
     (0, react_1.useEffect)(() => {
         var _a, _b;
         if (!clientId ||
@@ -108,6 +114,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
         migrateExpandedTracksForSubscriptionKey,
         overrideId,
         preferMappedNodePath,
+        refreshToken,
         schema,
         setPropStatuses,
         setOverrideIdToNodePath,

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -17,15 +17,8 @@ const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const use_resolved_stack_1 = require("./use-resolved-stack");
-const isEventInsideElement = (event, element) => {
-    if (event.target instanceof Node && element.contains(event.target)) {
-        return true;
-    }
-    const rect = element.getBoundingClientRect();
-    return (event.clientX >= rect.left &&
-        event.clientX <= rect.right &&
-        event.clientY >= rect.top &&
-        event.clientY <= rect.bottom);
+const isEventTargetInsideElement = (event, element) => {
+    return event.target instanceof Node && element.contains(event.target);
 };
 const useTimelineAssetDrop = () => {
     var _a, _b;
@@ -60,13 +53,14 @@ const useTimelineAssetDrop = () => {
             return null;
         }
         const scrollable = timeline_refs_1.scrollableRef.current;
-        return scrollable !== null && isEventInsideElement(event, scrollable)
+        return scrollable !== null &&
+            isEventTargetInsideElement(event, scrollable)
             ? (0, timeline_scroll_logic_1.getFrameFromTimelineDrop)({
                 clientX: event.clientX,
                 durationInFrames: videoConfig.durationInFrames,
                 scrollLeft: scrollable.scrollLeft,
                 timelineLeft: scrollable.getBoundingClientRect().left,
-                timelineWidth: scrollable.scrollWidth,
+                timelineWidth: (0, timeline_scroll_logic_1.getTimelineContentWidth)(),
             })
             : (0, imperative_state_1.getCurrentFrame)();
     }, [videoConfig]);
@@ -76,7 +70,7 @@ const useTimelineAssetDrop = () => {
         if (timeline === null ||
             dataTransfer === null ||
             !(0, drop_handler_data_1.isSupportedDropEvent)(event) ||
-            !isEventInsideElement(event, timeline)) {
+            !isEventTargetInsideElement(event, timeline)) {
             setAssetDropFrame(null);
             return;
         }
@@ -86,7 +80,7 @@ const useTimelineAssetDrop = () => {
         const scrollable = timeline_refs_1.scrollableRef.current;
         const shouldShowDropFrame = canInsertAsset &&
             scrollable !== null &&
-            isEventInsideElement(event, scrollable);
+            isEventTargetInsideElement(event, scrollable);
         setAssetDropFrame(shouldShowDropFrame ? getDropFrame(event) : null);
     }, [canInsertAsset, getDropFrame]);
     const onAssetDrop = (0, react_1.useCallback)(async (event) => {
@@ -96,7 +90,7 @@ const useTimelineAssetDrop = () => {
         if (timeline === null ||
             dataTransfer === null ||
             !(0, drop_handler_data_1.isSupportedDropEvent)(event) ||
-            !isEventInsideElement(event, timeline)) {
+            !isEventTargetInsideElement(event, timeline)) {
             return;
         }
         const localFiles = (0, drop_handler_data_1.isFileDragEvent)(event)

package/dist/components/TimelineCombobox.js

@@ -18,6 +18,7 @@ const label = {
     overflow: 'hidden',
     textAlign: 'left',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const TimelineCombobox = ({ values, selectedId, title, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {

package/dist/components/UpdateCheck.d.ts

@@ -1,9 +1 @@
-import type { GetRemotionSkillsInfoResponse, UpdateAvailableResponse } from '@remotion/studio-shared';
-export type UpdateInfo = UpdateAvailableResponse & Pick<GetRemotionSkillsInfoResponse, 'remotionUpgradeSkillAvailable'>;
-export type Bug = {
-    title: string;
-    description: string;
-    link: string;
-    versions: string[];
-};
 export declare const UpdateCheck: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/UpdateCheck.js

@@ -3,13 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UpdateCheck = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const InlineAction_1 = require("./InlineAction");
-const actions_1 = require("./RenderQueue/actions");
-const SettingsContext_1 = require("./SettingsContext");
+const UpdateStatusContext_1 = require("./UpdateStatusContext");
 const buttonStyle = {
     appearance: 'none',
     border: 'none',
@@ -27,67 +25,22 @@ const updateIconContainer = {
     flexShrink: 0,
 };
 const UpdateCheck = () => {
-    const [info, setInfo] = (0, react_1.useState)(null);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
+    const { info, knownBugs } = (0, UpdateStatusContext_1.useUpdateStatus)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const hasBugfixesAvailable = (0, react_1.useMemo)(() => {
         return Boolean((info === null || info === void 0 ? void 0 : info.updateAvailable) && knownBugs && knownBugs.length > 0);
     }, [info === null || info === void 0 ? void 0 : info.updateAvailable, knownBugs]);
-    const checkForUpdates = (0, react_1.useCallback)(() => {
-        const controller = new AbortController();
-        (0, actions_1.updateAvailable)(controller.signal)
-            .then((d) => {
-            setInfo(d);
-        })
-            .catch((err) => {
-            if (err.message.includes('aborted')) {
-                return;
-            }
-            // eslint-disable-next-line no-console
-            console.log('Could not check for updates', err);
-        });
-        return controller;
-    }, []);
-    const checkForBugs = (0, react_1.useCallback)(() => {
-        const controller = new AbortController();
-        fetch(`https://bugs.remotion.dev/api/${remotion_1.VERSION}`, {
-            signal: controller.signal,
-        })
-            .then(async (res) => {
-            const body = await res.json();
-            setKnownBugs(body.bugs);
-        })
-            .catch((err) => {
-            if (err.message.includes('aborted')) {
-                return;
-            }
-            // eslint-disable-next-line no-console
-            console.log('Could not check for bugs in this version', err);
-        });
-        return controller;
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const abortUpdate = checkForUpdates();
-        const abortBugs = checkForBugs();
-        return () => {
-            abortUpdate.abort();
-            abortBugs.abort();
-        };
-    }, [checkForBugs, checkForUpdates]);
     const openModal = (0, react_1.useCallback)(() => {
         var _a;
+        var _b;
         setSelectedModal({
-            type: 'update',
-            info: {
-                ...info,
-                remotionUpgradeSkillAvailable: (_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionUpgradeSkillAvailable) !== null && _a !== void 0 ? _a : false,
-            },
-            knownBugs: knownBugs,
+            type: 'settings',
+            initialTab: 'updates',
+            initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
         });
-    }, [info, knownBugs, remotionSkillsInfo, setSelectedModal]);
+    }, [setSelectedModal]);
     const dynButtonStyle = (0, react_1.useMemo)(() => {
         return {
             ...buttonStyle,

package/dist/components/UpdateStatusContext.d.ts

@@ -0,0 +1,18 @@
+import type { UpdateAvailableResponse } from '@remotion/studio-shared';
+import React from 'react';
+export type Bug = {
+    title: string;
+    description: string;
+    link: string;
+    versions: string[];
+};
+type UpdateStatusContextValue = {
+    readonly error: string | null;
+    readonly info: UpdateAvailableResponse | null;
+    readonly knownBugs: Bug[] | null;
+};
+export declare const UpdateStatusProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const useUpdateStatus: () => UpdateStatusContextValue;
+export {};