@remotion/studio 4.0.498 → 4.0.500

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -285,18 +285,8 @@ const getEasingClipboardDataFromSelection = ({ selection, sequences, overrideIds
     };
 };
 exports.getEasingClipboardDataFromSelection = getEasingClipboardDataFromSelection;
-const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
+const getPasteEffectPropTargetForSelection = ({ selection, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
     var _a;
-    if (selectedItems.length === 0) {
-        return { type: 'none' };
-    }
-    if (selectedItems.length !== 1) {
-        return { type: 'multiple' };
-    }
-    const [selection] = selectedItems;
-    if (!selection) {
-        return { type: 'none' };
-    }
     if (selection.type !== 'sequence-effect-prop' &&
         selection.type !== 'sequence-effect') {
         return { type: 'none' };
@@ -348,12 +338,42 @@ const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequen
     }
     return {
         type: 'valid',
-        fileName: selection.nodePathInfo.sequenceSubscriptionKey.absolutePath,
-        nodePath: selection.nodePathInfo.sequenceSubscriptionKey,
-        effectIndex: target.effectIndex,
-        fieldKey: target.fieldKey,
-        defaultValue: getDefaultValue(fieldSchema),
-        schema: effect.schema,
+        target: {
+            fileName: selection.nodePathInfo.sequenceSubscriptionKey.absolutePath,
+            nodePath: selection.nodePathInfo.sequenceSubscriptionKey,
+            effectIndex: target.effectIndex,
+            fieldKey: target.fieldKey,
+            defaultValue: getDefaultValue(fieldSchema),
+            schema: effect.schema,
+        },
+    };
+};
+const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
+    if (selectedItems.length === 0) {
+        return { type: 'none' };
+    }
+    const targets = [];
+    for (const selection of selectedItems) {
+        const result = getPasteEffectPropTargetForSelection({
+            selection,
+            payload,
+            propStatuses,
+            sequences,
+            overrideIdsToNodePaths,
+        });
+        if (result.type !== 'valid') {
+            return result;
+        }
+        targets.push(result.target);
+    }
+    return {
+        type: 'valid',
+        targets: [
+            ...new Map(targets.map((target) => [
+                `${makeTargetKey(target.nodePath)}:${target.effectIndex}:${target.fieldKey}`,
+                target,
+            ])).values(),
+        ],
     };
 };
 exports.getPasteEffectPropTarget = getPasteEffectPropTarget;
@@ -730,11 +750,8 @@ const TimelineClipboardKeybindings = () => {
                     });
                     if (effectPropTarget.type !== 'valid') {
                         switch (effectPropTarget.type) {
-                            case 'multiple':
-                                (0, NotificationCenter_1.showNotification)('Select one target effect prop or effect to paste onto', 3000);
-                                return;
                             case 'none':
-                                (0, NotificationCenter_1.showNotification)('Select a matching effect prop or effect to paste onto', 3000);
+                                (0, NotificationCenter_1.showNotification)('Select matching effect props or effects to paste onto', 3000);
                                 return;
                             case 'unsupported':
                                 (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
@@ -752,26 +769,36 @@ const TimelineClipboardKeybindings = () => {
                                 throw new Error(`Unexpected paste target: ${effectPropTarget}`);
                         }
                     }
-                    return (0, save_effect_prop_1.saveEffectProp)({
-                        fileName: effectPropTarget.fileName,
-                        nodePath: effectPropTarget.nodePath,
-                        effectIndex: effectPropTarget.effectIndex,
-                        fieldKey: effectPropTarget.fieldKey,
-                        ...(effectPropResult.data.param.type === 'static'
-                            ? {
-                                type: 'value',
-                                value: effectPropResult.data.param.value,
-                            }
-                            : {
-                                type: 'effect-param',
-                                effectParam: effectPropResult.data.param,
-                            }),
-                        defaultValue: effectPropTarget.defaultValue,
-                        schema: effectPropTarget.schema,
+                    return (0, save_effect_prop_1.saveMultipleEffectProps)({
+                        changes: effectPropTarget.targets.map((pasteTarget) => ({
+                            fileName: pasteTarget.fileName,
+                            nodePath: pasteTarget.nodePath,
+                            effectIndex: pasteTarget.effectIndex,
+                            fieldKey: pasteTarget.fieldKey,
+                            ...(effectPropResult.data.param.type === 'static'
+                                ? {
+                                    type: 'value',
+                                    value: effectPropResult.data.param.value,
+                                }
+                                : {
+                                    type: 'effect-param',
+                                    effectParam: effectPropResult.data.param,
+                                }),
+                            defaultValue: pasteTarget.defaultValue,
+                            schema: pasteTarget.schema,
+                        })),
                         setPropStatuses,
                         clientId,
+                        undoLabel: effectPropTarget.targets.length > 1
+                            ? 'Paste effect prop onto selected effects'
+                            : 'Paste effect prop',
+                        redoLabel: effectPropTarget.targets.length > 1
+                            ? 'Reapply effect prop paste onto selected effects'
+                            : 'Reapply effect prop paste',
                     }).then(() => {
-                        (0, NotificationCenter_1.showNotification)('Pasted effect prop', 2000);
+                        (0, NotificationCenter_1.showNotification)(effectPropTarget.targets.length > 1
+                            ? 'Pasted effect prop onto selected effects'
+                            : 'Pasted effect prop', 2000);
                     });
                 }
                 const result = envelope === null

package/dist/components/Timeline/TimelineColorField.js

@@ -12,8 +12,22 @@ const containerStyle = {
 };
 const SWATCH_WIDTH = 20;
 const SWATCH_HEIGHT = 15;
+const DEFAULT_SET_COLOR = '#808080';
+const noneLabelStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+};
+const setButtonStyle = {
+    background: 'none',
+    border: 'none',
+    color: colors_1.BLUE,
+    cursor: 'pointer',
+    fontSize: 12,
+    margin: 0,
+    padding: 0,
+};
 const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
-    var _a;
+    var _a, _b;
     const currentValue = typeof effectiveValue === 'string'
         ? effectiveValue
         : field.fieldSchema.type === 'color'
@@ -33,6 +47,11 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
             marginLeft: 5,
         };
     }, []);
+    if (currentValue === 'none') {
+        return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
+                jsx_runtime_1.jsx("span", { style: noneLabelStyle, children: "None" }), jsx_runtime_1.jsx("button", { type: "button", style: setButtonStyle, title: `Set ${(_b = field.description) !== null && _b !== void 0 ? _b : field.key} to gray`, onClick: () => onChangeComplete(DEFAULT_SET_COLOR), children: "Set" })
+            ] }));
+    }
     return (jsx_runtime_1.jsx("span", { style: containerStyle, children: jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: currentValue, status: "ok", onChange: onChange, onChangeComplete: onChangeComplete, width: SWATCH_WIDTH, height: SWATCH_HEIGHT, disabled: false, name: field.key, title: currentValue, style: swatchStyle }) }));
 };
 exports.TimelineColorField = TimelineColorField;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -6,10 +6,10 @@ 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 open_in_editor_1 = require("../../helpers/open-in-editor");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
-const get_animation_item_selection_for_frame_1 = require("./get-animation-item-selection-for-frame");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_effect_prop_1 = require("./save-effect-prop");
 const save_prop_queue_1 = require("./save-prop-queue");
@@ -21,7 +21,6 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
-const update_selected_easing_1 = require("./update-selected-easing");
 const fieldRowBase = {};
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -218,9 +217,6 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const style = (0, react_1.useMemo)(() => {
@@ -314,82 +310,17 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             },
         ];
     }, [canShowReset, onReset]);
-    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
-        setFrame((current) => {
-            const next = { ...current, [videoConfig.id]: frame };
-            remotion_1.Internals.persistCurrentFrame(next);
-            return next;
-        });
-    }, [setFrame, videoConfig.id]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
-        if (propStatus === null || propStatus.status === 'computed') {
-            return;
-        }
-        const keyframeSelection = {
-            type: 'keyframe',
-            nodePathInfo,
-            frame: sourceFrame + keyframeDisplayOffset,
-        };
-        if (propStatus.status === 'static') {
-            if (!keyframable || previewServerState.type !== 'connected') {
-                return;
-            }
-            const value = remotion_1.Internals.getEffectiveVisualModeValue({
-                propStatus,
-                dragOverrideValue,
-                frame: sourceFrame,
-                defaultValue: field.fieldSchema.default,
-                shouldResortToDefaultValueIfUndefined: true,
-            });
-            event.stopPropagation();
-            (0, call_add_keyframe_1.callAddEffectKeyframe)({
-                fileName: validatedLocation.source,
-                nodePath,
-                effectIndex: field.effectIndex,
-                fieldKey: field.key,
-                sourceFrame,
-                value,
-                schema: field.effectSchema,
-                setPropStatuses,
-                clientId: previewServerState.clientId,
-            }).catch(() => undefined);
-            selectItems([keyframeSelection], { reveal: true });
-            seekToDisplayFrame(keyframeSelection.frame);
-            return;
-        }
-        const targetSelection = (0, get_animation_item_selection_for_frame_1.getAnimationItemSelectionForSourceFrame)({
-            includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(propStatus.interpolationFunction),
-            keyframeDisplayOffset,
-            keyframes: propStatus.keyframes,
-            nodePathInfo,
-            sourceFrame,
-        });
-        if (targetSelection === null) {
+        if (!window.remotion_editorName ||
+            previewServerState.type !== 'connected') {
             return;
         }
         event.stopPropagation();
-        selectItems([targetSelection], { reveal: true });
-        if (targetSelection.type === 'keyframe') {
-            seekToDisplayFrame(targetSelection.frame);
-        }
-    }, [
-        dragOverrideValue,
-        field.effectIndex,
-        field.effectSchema,
-        field.fieldSchema.default,
-        field.key,
-        keyframeDisplayOffset,
-        keyframable,
-        nodePath,
-        nodePathInfo,
-        previewServerState,
-        propStatus,
-        seekToDisplayFrame,
-        selectItems,
-        setPropStatuses,
-        sourceFrame,
-        validatedLocation.source,
-    ]);
+        (0, open_in_editor_1.openOriginalPositionInEditorAtProperty)({
+            originalPosition: validatedLocation,
+            property: field.key,
+        }).catch(() => undefined);
+    }, [field.key, previewServerState.type, validatedLocation]);
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: sourceFrame }) }) }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -43,6 +43,7 @@ const TimelineKeyframeEasingLine_1 = require("./TimelineKeyframeEasingLine");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const row = {
+    overflow: 'hidden',
     position: 'relative',
 };
 const rowSeparator = {

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineHeightContainer: React.NamedExoticComponent<{
-    readonly shown: TrackWithHash[];
+    readonly shown: TimelineTrackData[];
     readonly hasBeenCut: boolean;
     readonly children: React.ReactNode;
 }>;

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -252,17 +252,41 @@ const TimelineInOutDragHandlerInner = () => {
         videoConfig,
         width,
     ]);
+    const onPointerCancelInOut = (0, react_1.useCallback)(() => {
+        document.body.style.userSelect = '';
+        document.body.style.webkitUserSelect = '';
+        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+        setInOutDragging({
+            dragging: false,
+        });
+    }, []);
     (0, react_1.useEffect)(() => {
         if (inOutDragging.dragging === false) {
             return;
         }
         window.addEventListener('pointermove', onPointerMoveInOut);
         window.addEventListener('pointerup', onPointerUpInOut);
+        window.addEventListener('pointercancel', onPointerCancelInOut);
+        window.addEventListener('blur', onPointerCancelInOut);
         return () => {
             window.removeEventListener('pointermove', onPointerMoveInOut);
             window.removeEventListener('pointerup', onPointerUpInOut);
+            window.removeEventListener('pointercancel', onPointerCancelInOut);
+            window.removeEventListener('blur', onPointerCancelInOut);
+        };
+    }, [
+        inOutDragging.dragging,
+        onPointerCancelInOut,
+        onPointerMoveInOut,
+        onPointerUpInOut,
+    ]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            document.body.style.userSelect = '';
+            document.body.style.webkitUserSelect = '';
+            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         };
-    }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
+    }, []);
     const inContextMenu = (0, react_1.useMemo)(() => {
         return [
             {

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineKeyframeTracksProvider: React.FC<{
-    readonly tracks: readonly TrackWithHash[];
+    readonly tracks: readonly TimelineTrackData[];
     readonly children: React.ReactNode;
 }>;
-export declare const useTimelineKeyframeTracks: () => readonly TrackWithHash[];
+export declare const useTimelineKeyframeTracks: () => readonly TimelineTrackData[];

package/dist/components/Timeline/TimelineLayerEye.js

@@ -64,7 +64,10 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             onInvoked(layerPointedDown);
         }
     }, [onInvoked]);
-    return (jsx_runtime_1.jsx("div", { style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
+    const onDoubleClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx("div", { style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;
 const spacerStyle = {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineList: React.FC<{
-    readonly timeline: TrackWithHash[];
+    readonly timeline: TimelineTrackData[];
 }>;

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -17,6 +17,12 @@ const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
 const inlineWrapper = {
     fontSize: 12,
 };
+const assetInlineWrapper = {
+    ...inlineWrapper,
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+};
 const isTimelinePrimitiveFieldInfo = (field) => {
     return field.typeName !== 'array' && field.fieldSchema.type !== 'array';
 };
@@ -60,7 +66,7 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineFontFamilyField_1.TimelineFontFamilyField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }
     if (field.typeName === 'asset') {
-        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineAssetField_1.TimelineAssetField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+        return (jsx_runtime_1.jsx("span", { style: assetInlineWrapper, children: jsx_runtime_1.jsx(TimelineAssetField_1.TimelineAssetField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }
     throw new Error(`Unsupported field type: ${field.typeName}`);
 };

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

@@ -1,6 +1,6 @@
 import React, { type CSSProperties } from 'react';
 import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses } from 'remotion';
-import type { SequenceNodePathInfo, TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { SequenceNodePathInfo, TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 import { type GetIsExpanded } from '../ExpandedTracksProvider';
 export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
@@ -145,23 +145,23 @@ type TimelineSelectionOptions = {
 };
 export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
 export declare const getTimelineSelectionKey: (item: TimelineSelection) => string;
-export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TrackWithHash, "nodePathInfo">[]) => TimelineSelection[];
+export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TimelineTrackData, "nodePathInfo">[]) => TimelineSelection[];
 export declare const getSelectableTimelineItems: ({ getDragOverrides, getEffectDragOverrides, getIsExpanded, propStatuses, selectedItems, timeline, timelinePosition, }: {
     readonly getDragOverrides: GetDragOverrides;
     readonly getEffectDragOverrides: GetEffectDragOverrides;
     readonly getIsExpanded: GetIsExpanded;
     readonly propStatuses: PropStatuses;
     readonly selectedItems: readonly TimelineSelection[];
-    readonly timeline: readonly TrackWithHash[];
+    readonly timeline: readonly TimelineTrackData[];
     readonly timelinePosition: number;
 }) => TimelineSelection[];
 export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
 export declare const TimelineSelectAllKeybindings: React.FC<{
-    readonly timeline: readonly TrackWithHash[];
+    readonly timeline: readonly TimelineTrackData[];
 }>;
 export declare const TimelineSelectableItemsProvider: React.FC<{
     readonly children: React.ReactNode;
-    readonly timeline: readonly TrackWithHash[];
+    readonly timeline: readonly TimelineTrackData[];
 }>;
 export declare const TimelineSelectionProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/components/Timeline/TimelineSelection.js

@@ -595,9 +595,9 @@ const TimelineSelectionProvider = ({ children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const timelineSelectionScope = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const { expandParentTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const canSelect = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
-        previewServerState.type === 'connected' &&
-        !window.remotion_isReadOnlyStudio;
+    const canSelect = (0, interactivity_enabled_1.isStudioSelectionEnabled)() &&
+        (previewServerState.type === 'connected' ||
+            window.remotion_isReadOnlyStudio);
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const selectionAnchor = (0, react_1.useRef)(null);
     const selectionScope = (0, react_1.useRef)(null);
@@ -614,7 +614,8 @@ const TimelineSelectionProvider = ({ children }) => {
             setSelectedItems([]);
         }
     }, [canSelect]);
-    const canSelectItem = (0, react_1.useCallback)((_item) => canSelect, [canSelect]);
+    const canSelectItem = (0, react_1.useCallback)((item) => canSelect &&
+        (!window.remotion_isReadOnlyStudio || item.type === 'sequence'), [canSelect]);
     const getCurrentAvailableSelectionState = (0, react_1.useCallback)((currentSelectedItems) => {
         if (selectionScope.current !== timelineSelectionScope) {
             return exports.EMPTY_TIMELINE_SELECTION_STATE;
@@ -867,8 +868,9 @@ const TimelineSelectionProvider = ({ children }) => {
     ]);
     const currentSelection = (0, react_1.useRef)(value);
     currentSelection.current = value;
-    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineEscapeKeybindings, {}), jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
-            ] }) }));
+    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineEscapeKeybindings, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
+                    ] })) : null] }) }));
 };
 exports.TimelineSelectionProvider = TimelineSelectionProvider;
 const useTimelineSelection = () => {

package/dist/components/Timeline/TimelineSequence.js

@@ -185,6 +185,11 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     }, [propStatuses, nodePath]);
     const durationCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         ((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
+    const durationCanResize = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
+        (0, TimelineSequenceRightEdgeDragHandle_1.canResizeTimelineSequenceDuration)({
+            sequence: s,
+            status: propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames,
+        }));
     const fromCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         ((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
     const trimBeforeCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
@@ -336,9 +341,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
     });
     const contextMenuValues = (0, react_1.useMemo)(() => {
-        if (!previewConnected) {
-            return [];
-        }
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
@@ -371,7 +373,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         onDuplicateSequenceFromSource,
         openInEditor,
         originalLocation,
-        previewConnected,
         s,
         selectAsset,
     ]);
@@ -446,7 +447,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
-        durationCanUpdate;
+        durationCanResize;
     const showLeftEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceLeftEdgeDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
@@ -457,6 +458,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         return null;
     }
     const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: mediaVisualizationLayout.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: mediaVisualizationLayout.width }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showLeftEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 1 })) : null, showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1 })) : null] }));
-    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
+    return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);