@remotion/studio 4.0.486 → 4.0.488

package/dist/components/SelectedOutlineOverlay.js

@@ -40,12 +40,15 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
+const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const editor_guides_1 = require("../state/editor-guides");
 const editor_outlines_1 = require("../state/editor-outlines");
 const scale_lock_1 = require("../state/scale-lock");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_snap_1 = require("./selected-outline-snap");
 const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
 const SelectedOutlineElement_1 = require("./SelectedOutlineElement");
@@ -95,6 +98,19 @@ const outlineContainer = {
     pointerEvents: 'none',
     overflow: 'visible',
 };
+const SelectedOutlineSnapIndicators = ({ activeSnapPoints, compositionHeight, compositionWidth, scale }) => {
+    if (activeSnapPoints.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("g", { pointerEvents: "none", children: activeSnapPoints.map((snapPoint) => {
+            if (snapPoint.target.axis === 'x') {
+                const x = snapPoint.target.position * scale;
+                return (jsx_runtime_1.jsx("line", { x1: x, x2: x, y1: 0, y2: compositionHeight * scale, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+            }
+            const y = snapPoint.target.position * scale;
+            return (jsx_runtime_1.jsx("line", { x1: 0, x2: compositionWidth * scale, y1: y, y2: y, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+        }) }));
+};
 const orderOutlinesForRendering = ({ outlines, targetsByKey, }) => {
     return [...outlines].sort((a, b) => {
         var _a, _b;
@@ -105,9 +121,10 @@ const orderOutlinesForRendering = ({ outlines, targetsByKey, }) => {
     });
 };
 exports.orderOutlinesForRendering = orderOutlinesForRendering;
-const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
+const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, translationX, translationY, }) => {
     const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
@@ -115,12 +132,14 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { getScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
     const { editorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const { editorShowGuides, guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayer();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const [outlines, setOutlines] = (0, react_1.useState)([]);
     const [hoveredOutlineKey, setHoveredOutlineKey] = (0, react_1.useState)(null);
     const [draggingOutline, setDraggingOutline] = (0, react_1.useState)(false);
+    const [activeSnapPoints, setActiveSnapPoints] = (0, react_1.useState)([]);
     const overlayRef = (0, react_1.useRef)(null);
     const keyboardNudgeSessionRef = (0, react_1.useRef)(null);
     const saveKeyboardNudgeSessionRef = (0, react_1.useRef)(() => undefined);
@@ -129,12 +148,18 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
         if (dragging) {
             setHoveredOutlineKey(null);
         }
+        else {
+            setActiveSnapPoints([]);
+        }
+    }, []);
+    const onSnapPointsChange = (0, react_1.useCallback)((snapPoints) => {
+        setActiveSnapPoints(snapPoints);
     }, []);
     const selectOutlineItem = (0, react_1.useCallback)((item, interaction) => {
         selectItem(item, interaction, undefined, { reveal: true });
     }, [selectItem]);
     const outlineTargets = (0, react_1.useMemo)(() => {
-        if (!editorShowOutlines) {
+        if (!interactivity_enabled_1.studioInteractivityEnabled || !editorShowOutlines) {
             return [];
         }
         const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);
@@ -391,11 +416,24 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
     const outlinesForRendering = (0, react_1.useMemo)(() => {
         return (0, exports.orderOutlinesForRendering)({ outlines, targetsByKey });
     }, [outlines, targetsByKey]);
+    const outlinesByKey = (0, react_1.useMemo)(() => {
+        return new Map(outlines.map((outline) => [outline.key, outline]));
+    }, [outlines]);
     const allDragTargets = (0, react_1.useMemo)(() => {
         return outlineTargets.flatMap((target) => (target.selected || target.containsSelection) && target.drag !== null
             ? [target.drag]
             : []);
     }, [outlineTargets]);
+    const allDragOutlines = (0, react_1.useMemo)(() => {
+        return outlineTargets.flatMap((target) => {
+            if ((!target.selected && !target.containsSelection) ||
+                target.drag === null) {
+                return [];
+            }
+            const outline = outlinesByKey.get(target.key);
+            return outline === undefined ? [] : [outline];
+        });
+    }, [outlineTargets, outlinesByKey]);
     const allScaleDragTargets = (0, react_1.useMemo)(() => {
         return outlineTargets.flatMap((target) => target.selected && target.scaleDrag !== null ? [target.scaleDrag] : []);
     }, [outlineTargets]);
@@ -404,6 +442,19 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
             ? [target.rotationDrag]
             : []);
     }, [outlineTargets]);
+    const guidesForSnap = (0, react_1.useMemo)(() => {
+        if (!editorShowGuides || (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition') {
+            return [];
+        }
+        return guidesList.filter((guide) => guide.compositionId === canvasContent.compositionId);
+    }, [canvasContent, editorShowGuides, guidesList]);
+    const snapTargets = (0, react_1.useMemo)(() => {
+        return (0, selected_outline_snap_1.getSelectedOutlineSnapTargets)({
+            compositionHeight,
+            compositionWidth,
+            guides: guidesForSnap,
+        });
+    }, [compositionHeight, compositionWidth, guidesForSnap]);
     const saveKeyboardNudgeSession = (0, react_1.useCallback)(() => {
         const session = keyboardNudgeSessionRef.current;
         if (session === null) {
@@ -671,6 +722,7 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
     if (outlineTargets.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSelect: selectOutlineItem, scale: scale, target: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
+    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [
+            jsx_runtime_1.jsx(SelectedOutlineSnapIndicators, { activeSnapPoints: activeSnapPoints, compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSnapPointsChange: onSnapPointsChange, onSelect: selectOutlineItem, scale: scale, snapTargets: snapTargets, target: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
 };
 exports.SelectedOutlineOverlay = SelectedOutlineOverlay;

package/dist/components/SelectedOutlineUvControls.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const editor_snapping_1 = require("../state/editor-snapping");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
@@ -384,6 +385,7 @@ const trimLineToCircleEdges = ({ from, fromRadius, to, toRadius, }) => {
 };
 const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
     const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const { rotationControl } = control;
     const field = rotationControl === null || rotationControl === void 0 ? void 0 : rotationControl.field;
     const onPointerDown = react_1.default.useCallback((event) => {
@@ -413,7 +415,7 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
         let lastValue = null;
         const updateRotationDragOverride = () => {
             const rawValue = control.rotation + accumulatedDelta;
-            const snappedValue = rotationLocked
+            const snappedValue = rotationLocked && editorSnapping
                 ? snapRotationDegrees(rawValue)
                 : rawValue;
             const nextValue = (0, selected_outline_uv_1.roundNumericUvEllipseValue)(snappedValue, field.fieldSchema);
@@ -497,6 +499,7 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
     }, [
         clearEffectDragOverrides,
         control,
+        editorSnapping,
         field,
         onDraggingChange,
         rotationControl,
@@ -522,6 +525,7 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
 };
 const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSelect, outline }) => {
     const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const position = (0, react_1.useMemo)(() => (0, selected_outline_uv_1.getUvHandlePosition)(outline.points, handle.value), [handle.value, outline.points]);
     const onPointerDown = react_1.default.useCallback((event) => {
         if (event.button !== 0) {
@@ -556,11 +560,13 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
                 rect: svgRect,
             });
             const rawUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point);
-            const snappedUv = (0, selected_outline_drag_1.snapSelectedOutlineUv)({
-                point,
-                points: outline.points,
-                uv: rawUv,
-            });
+            const snappedUv = editorSnapping
+                ? (0, selected_outline_drag_1.snapSelectedOutlineUv)({
+                    point,
+                    points: outline.points,
+                    uv: rawUv,
+                })
+                : rawUv;
             const nextValue = (0, selected_outline_uv_1.roundUvCoordinate)((0, selected_outline_uv_1.constrainUv)(snappedUv, handle.fieldSchema), handle.fieldSchema);
             lastValue = nextValue;
             setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, handle.propStatus.status === 'keyframed'
@@ -644,6 +650,7 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
         window.addEventListener('pointercancel', onPointerUp);
     }, [
         clearEffectDragOverrides,
+        editorSnapping,
         handle,
         nodePathInfo,
         onDraggingChange,

package/dist/components/SnappingProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SnappingProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/SnappingProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnappingProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_snapping_1 = require("../state/editor-snapping");
+const SnappingProvider = ({ children }) => {
+    const [editorSnapping, setEditorSnappingState] = (0, react_1.useState)(() => (0, editor_snapping_1.loadEditorSnappingOption)());
+    const setEditorSnapping = (0, react_1.useCallback)((newValue) => {
+        setEditorSnappingState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_snapping_1.persistEditorSnappingOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorSnappingCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorSnapping,
+            setEditorSnapping,
+        };
+    }, [editorSnapping, setEditorSnapping]);
+    return (jsx_runtime_1.jsx(editor_snapping_1.EditorSnappingContext.Provider, { value: editorSnappingCtx, children: children }));
+};
+exports.SnappingProvider = SnappingProvider;

package/dist/components/SnappingToggle.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SnappingToggle: React.FC;

package/dist/components/SnappingToggle.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnappingToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const magnet_1 = require("../icons/magnet");
+const editor_snapping_1 = require("../state/editor-snapping");
+const ControlButton_1 = require("./ControlButton");
+const SnappingToggle = () => {
+    const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const onClick = (0, react_1.useCallback)(() => {
+        setEditorSnapping((current) => !current);
+    }, [setEditorSnapping]);
+    const color = editorSnapping ? colors_1.BLUE : colors_1.WHITE;
+    const accessibilityLabel = [
+        editorSnapping ? 'Disable snapping' : 'Enable snapping',
+        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(Shift+M)',
+    ]
+        .filter(no_react_1.NoReactInternals.truthy)
+        .join(' ');
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
+};
+exports.SnappingToggle = SnappingToggle;

package/dist/components/Splitter/SplitterContext.d.ts

@@ -14,7 +14,7 @@ export type TSplitterContext = {
     defaultFlex: number;
     id: string;
     persistFlex: (value: number) => void;
-    isDragging: React.MutableRefObject<false | {
+    isDragging: React.RefObject<false | {
         x: number;
         y: number;
     }>;

package/dist/components/Timeline/Timeline.js

@@ -40,6 +40,7 @@ const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const call_api_1 = require("../call-api");
@@ -88,6 +89,7 @@ const TimelineContextMenuArea = ({ children }) => {
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
+    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -102,13 +104,13 @@ const TimelineContextMenuArea = ({ children }) => {
         compositionFile,
         compositionId: currentCompositionId,
     });
-    const canInsertSolid = previewConnected &&
+    const canInsertSolid = previewInteractive &&
         (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
         compositionFile !== null &&
         videoConfig !== null &&
         !isAddingSolid;
-    const canInsertAsset = previewConnected &&
+    const canInsertAsset = previewInteractive &&
         !window.remotion_isReadOnlyStudio &&
         (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
@@ -207,6 +209,7 @@ const TimelineInner = () => {
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
+    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
     const videoConfigIsNull = videoConfig === null;
     const timeline = (0, react_1.useMemo)(() => {
         if (videoConfigIsNull) {
@@ -228,15 +231,14 @@ const TimelineInner = () => {
     }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
     return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
-                if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewConnected)) {
+                if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewInteractive)) {
                     return null;
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
-            }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [
-                        jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown }), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+            }), interactivity_enabled_1.studioInteractivityEnabled ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [interactivity_enabled_1.studioInteractivityEnabled ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
                                     jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
                                             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                                        jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                                        jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), interactivity_enabled_1.studioInteractivityEnabled ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                                     ] }) })
                                         ] })
                                 ] })) })

package/dist/components/Timeline/TimelineDragHandler.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
@@ -88,7 +89,7 @@ const TimelineDragHandler = () => {
     if (!canvasContent || canvasContent.type !== 'composition') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video ? jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {}) : null }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video && interactivity_enabled_1.studioInteractivityEnabled ? (jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {})) : null }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {

package/dist/components/Timeline/TimelineSelection.js

@@ -7,11 +7,13 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const z_index_1 = require("../../state/z-index");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
@@ -556,7 +558,8 @@ 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 = previewServerState.type === 'connected' &&
+    const canSelect = interactivity_enabled_1.studioInteractivityEnabled &&
+        previewServerState.type === 'connected' &&
         !window.remotion_isReadOnlyStudio;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const selectionAnchor = (0, react_1.useRef)(null);
@@ -684,6 +687,7 @@ const TimelineSelectionProvider = ({ children }) => {
         if (!canSelectItem(item)) {
             return;
         }
+        (0, options_sidebar_tabs_1.selectOptionsSidebarInspectorPanel)();
         expandParentsForSelectionItem(item);
         if (options.reveal) {
             requestRevealSelectionItem(item);
@@ -714,6 +718,9 @@ const TimelineSelectionProvider = ({ children }) => {
         if (!items.every(canSelectItem)) {
             return;
         }
+        if (items.length > 0) {
+            (0, options_sidebar_tabs_1.selectOptionsSidebarInspectorPanel)();
+        }
         selectionScope.current = timelineSelectionScope;
         selectionAnchor.current =
             items.length === 0 ? null : items[items.length - 1];

package/dist/components/Timeline/TimelineSequence.js

@@ -41,6 +41,7 @@ const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_max_media_duration_1 = require("../../helpers/use-max-media-duration");
@@ -177,11 +178,15 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
             : undefined;
     }, [propStatuses, nodePath]);
-    const durationCanUpdate = Boolean(((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
-    const fromCanUpdate = Boolean(((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
-    const trimBeforeCanUpdate = Boolean(((_c = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.trimBefore) === null || _c === void 0 ? void 0 : _c.status) === 'static');
+    const durationCanUpdate = Boolean(interactivity_enabled_1.studioInteractivityEnabled &&
+        ((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
+    const fromCanUpdate = Boolean(interactivity_enabled_1.studioInteractivityEnabled &&
+        ((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
+    const trimBeforeCanUpdate = Boolean(interactivity_enabled_1.studioInteractivityEnabled &&
+        ((_c = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.trimBefore) === null || _c === void 0 ? void 0 : _c.status) === 'static');
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
+    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
@@ -201,9 +206,9 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         });
     }, [canOpenInEditor, originalLocation]);
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
-    const deleteDisabled = !previewConnected || !s.controls || !canDeleteFromSource;
+    const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
     const duplicateDisabled = deleteDisabled;
-    const disableInteractivityDisabled = !previewConnected ||
+    const disableInteractivityDisabled = !previewInteractive ||
         !s.showInTimeline ||
         !nodePath ||
         !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
@@ -280,7 +285,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
-        clientId: previewServerState.type === 'connected'
+        clientId: previewInteractive && previewServerState.type === 'connected'
             ? previewServerState.clientId
             : null,
         nodePath,
@@ -302,7 +307,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             disableInteractivityDisabled,
             duplicateDisabled,
             fileLocation,
-            includeSourceEditItems: true,
+            includeSourceEditItems: interactivity_enabled_1.studioInteractivityEnabled,
             onDeleteSequenceFromSource,
             onDisableSequenceInteractivity,
             onDuplicateSequenceFromSource,
@@ -310,7 +315,9 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             originalLocation,
             selectAsset,
             sequence: s,
-            sourceActions: freezeFrameMenuItem ? [freezeFrameMenuItem] : [],
+            sourceActions: interactivity_enabled_1.studioInteractivityEnabled && freezeFrameMenuItem
+                ? [freezeFrameMenuItem]
+                : [],
         });
     }, [
         assetLinkInfo,