@remotion/studio 4.0.498 → 4.0.500

package/dist/components/SelectedOutlineElement.js

@@ -43,6 +43,7 @@ const colors_1 = require("../helpers/colors");
 const format_file_location_1 = require("../helpers/format-file-location");
 const get_connected_compositions_1 = require("../helpers/get-connected-compositions");
 const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
+const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
@@ -58,6 +59,7 @@ 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 SelectedOutlineCropControls_1 = require("./SelectedOutlineCropControls");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./Timeline/duplicate-selected-timeline-item");
@@ -71,10 +73,12 @@ const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
 const use_select_asset_1 = require("./use-select-asset");
 const emptyContextMenuValues = [];
 const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target }) => {
-    var _a;
+    var _a, _b;
     const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const transformOriginDrag = (_a = target === null || target === void 0 ? void 0 : target.transformOriginDrag) !== null && _a !== void 0 ? _a : null;
+    const crop = target === null || target === void 0 ? void 0 : target.crop;
+    const transformOriginPoints = (_b = outline.uncroppedPoints) !== null && _b !== void 0 ? _b : outline.points;
     const parsed = (0, react_1.useMemo)(() => transformOriginDrag === null
         ? null
         : (0, transform_origin_utils_1.parseTransformOrigin)(transformOriginDrag.originValue), [transformOriginDrag]);
@@ -88,7 +92,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             height: outline.dimensions.height,
         });
     }, [outline.dimensions, parsed]);
-    const position = (0, react_1.useMemo)(() => (uv === null ? null : (0, selected_outline_uv_1.getUvHandlePosition)(outline.points, uv)), [outline.points, uv]);
+    const position = (0, react_1.useMemo)(() => (uv === null ? null : (0, selected_outline_uv_1.getUvHandlePosition)(transformOriginPoints, uv)), [transformOriginPoints, uv]);
     const onPointerDown = react_1.default.useCallback((event) => {
         if (event.button !== 0 ||
             transformOriginDrag === null ||
@@ -125,7 +129,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
                 x: currentPointerX - svgRect.left,
                 y: currentPointerY - svgRect.top,
             };
-            const rawUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point);
+            const rawUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(transformOriginPoints, point);
             const lockedAxis = (0, selected_outline_drag_1.getSelectedOutlineTransformOriginLockedAxis)({
                 axisLocked,
                 dimensions,
@@ -139,11 +143,13 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             });
             const snapPoint = lockedAxis === null
                 ? point
-                : (0, selected_outline_uv_1.getUvHandlePosition)(outline.points, axisLockedUv);
+                : (0, selected_outline_uv_1.getUvHandlePosition)(transformOriginPoints, axisLockedUv);
             const snappedUv = editorSnapping
                 ? (0, selected_outline_drag_1.snapSelectedOutlineTransformOriginUv)({
+                    crop: crop !== null && crop !== void 0 ? crop : null,
                     point: snapPoint,
-                    points: outline.points,
+                    points: transformOriginPoints,
+                    thresholdPx: null,
                     uv: axisLockedUv,
                 })
                 : axisLockedUv;
@@ -273,6 +279,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         window.addEventListener('keyup', onKeyChange);
     }, [
         clearDragOverrides,
+        crop,
         editorSnapping,
         onDraggingChange,
         outline,
@@ -280,6 +287,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         setDragOverrides,
         setPropStatuses,
         transformOriginDrag,
+        transformOriginPoints,
         uv,
     ]);
     if (transformOriginDrag === null ||
@@ -743,6 +751,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
     const circleRef = (0, react_1.useRef)(null);
     const cornerInfo = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedOutlineRotationCornerInfo)(outline.points, corner), [corner, outline.points]);
     const onPointerDown = react_1.default.useCallback((event) => {
+        var _a;
         if (event.button !== 0 || rotationDrag === null) {
             return;
         }
@@ -770,7 +779,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         const svgRect = svg.getBoundingClientRect();
         const center = svgPointToClientPoint((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
             dimensions: outline.dimensions,
-            points: outline.points,
+            points: (_a = outline.uncroppedPoints) !== null && _a !== void 0 ? _a : outline.points,
             transformOriginValue: rotationDrag.transformOriginValue,
         }), svgRect);
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineRotationDragStates)({
@@ -924,6 +933,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         onDraggingChange,
         outline.dimensions,
         outline.points,
+        outline.uncroppedPoints,
         onSelect,
         rotationDrag,
         selected,
@@ -1006,7 +1016,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         selectComposition,
     ]);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
-        if (target === undefined || previewServerState.type !== 'connected') {
+        if (target === undefined) {
             return false;
         }
         if (!target.selected) {
@@ -1025,11 +1035,15 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             : null;
         const assetLinkInfo = mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null;
         const canOpenInEditor = Boolean(window.remotion_editorName && originalLocation);
-        const disableInteractivityDisabled = !target.sequence.showInTimeline;
-        const sourceEditDisabled = !target.sequence.controls || !nodePath.absolutePath;
+        const sourceEditingEnabled = (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+        const disableInteractivityDisabled = !sourceEditingEnabled || !target.sequence.showInTimeline;
+        const sourceEditDisabled = !sourceEditingEnabled ||
+            !target.sequence.controls ||
+            !nodePath.absolutePath;
         const canAddEffect = target.nodePathInfo.supportsEffects &&
             !sourceEditDisabled &&
             previewServerState.type === 'connected';
+        const canCrop = target.canCrop && !sourceEditDisabled;
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
@@ -1037,7 +1051,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             disableInteractivityDisabled,
             duplicateDisabled: sourceEditDisabled,
             fileLocation,
-            includeSourceEditItems: true,
+            includeSourceEditItems: sourceEditingEnabled,
             onDeleteSequenceFromSource: async () => {
                 if (sourceEditDisabled || previewServerState.type !== 'connected') {
                     return;
@@ -1103,39 +1117,65 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             originalLocation,
             selectAsset,
             sequence: target.sequence,
-            sourceActions: [
-                ...(target.nodePathInfo.supportsEffects
-                    ? [
-                        {
-                            type: 'item',
-                            id: 'add-effect',
-                            keyHint: null,
-                            label: 'Add effect...',
-                            leftItem: null,
-                            disabled: !canAddEffect,
-                            onClick: () => {
-                                if (!canAddEffect ||
-                                    previewServerState.type !== 'connected') {
-                                    return;
-                                }
-                                setSelectedModal({
-                                    type: 'add-effect',
-                                    clientId: previewServerState.clientId,
-                                    fileName: nodePath.absolutePath,
-                                    nodePath,
-                                });
+            sourceActions: sourceEditingEnabled
+                ? [
+                    ...(target.nodePathInfo.supportsEffects
+                        ? [
+                            {
+                                type: 'item',
+                                id: 'add-effect',
+                                keyHint: null,
+                                label: 'Add effect...',
+                                leftItem: null,
+                                disabled: !canAddEffect,
+                                onClick: () => {
+                                    if (!canAddEffect ||
+                                        previewServerState.type !== 'connected') {
+                                        return;
+                                    }
+                                    setSelectedModal({
+                                        type: 'add-effect',
+                                        clientId: previewServerState.clientId,
+                                        fileName: nodePath.absolutePath,
+                                        nodePath,
+                                    });
+                                },
+                                quickSwitcherLabel: null,
+                                subMenu: null,
+                                value: 'add-effect',
                             },
-                            quickSwitcherLabel: null,
-                            subMenu: null,
-                            value: 'add-effect',
-                        },
-                        {
-                            type: 'divider',
-                            id: 'add-effect-divider',
+                        ]
+                        : []),
+                    {
+                        type: 'item',
+                        id: 'crop',
+                        keyHint: null,
+                        label: 'Crop',
+                        leftItem: null,
+                        disabled: !canCrop,
+                        onClick: () => {
+                            if (!canCrop) {
+                                return;
+                            }
+                            onSelect({
+                                type: 'sequence-prop',
+                                nodePathInfo: {
+                                    ...target.nodePathInfo,
+                                    auxiliaryKeys: ['controls', selected_outline_types_1.cropFieldKeys.left],
+                                },
+                                key: selected_outline_types_1.cropFieldKeys.left,
+                            }, { shiftKey: false, toggleKey: false });
                         },
-                    ]
-                    : []),
-            ],
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        value: 'crop',
+                    },
+                    {
+                        type: 'divider',
+                        id: 'crop-divider',
+                    },
+                ]
+                : [],
         });
     }, [
         confirm,
@@ -1148,9 +1188,9 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         target,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
+            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: target }), (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
                 ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
-                : null, (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
+                : null, (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
                 ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
                 : null] }));
 };

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { type SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineTarget } from './selected-outline-types';
-export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginDragChanges, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
-export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
+export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineCropDragChanges, getSelectedOutlineCropDragValues, getSelectedOutlineCropFollowingTransformOrigin, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginDragChanges, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
+export { getOutlineSelectionInteraction, getSelectedCropInfo, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';
 type OutlineSequenceParent = {

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -63,6 +63,9 @@ Object.defineProperty(exports, "applySelectedOutlineDragAxisLock", { enumerable:
 Object.defineProperty(exports, "applySelectedOutlineTransformOriginAxisLock", { enumerable: true, get: function () { return selected_outline_drag_2.applySelectedOutlineTransformOriginAxisLock; } });
 Object.defineProperty(exports, "compensateTranslateForTransformOrigin", { enumerable: true, get: function () { return selected_outline_drag_2.compensateTranslateForTransformOrigin; } });
 Object.defineProperty(exports, "getSelectedOutlineActiveSchema", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineActiveSchema; } });
+Object.defineProperty(exports, "getSelectedOutlineCropDragChanges", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineCropDragChanges; } });
+Object.defineProperty(exports, "getSelectedOutlineCropDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineCropDragValues; } });
+Object.defineProperty(exports, "getSelectedOutlineCropFollowingTransformOrigin", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineCropFollowingTransformOrigin; } });
 Object.defineProperty(exports, "getSelectedOutlineDragChanges", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineDragChanges; } });
 Object.defineProperty(exports, "getSelectedOutlineDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineDragValues; } });
 Object.defineProperty(exports, "getSelectedOutlineKeyboardNudgeDelta", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineKeyboardNudgeDelta; } });
@@ -84,6 +87,7 @@ Object.defineProperty(exports, "snapSelectedOutlineTransformOriginUv", { enumera
 Object.defineProperty(exports, "snapSelectedOutlineUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineUv; } });
 const selected_outline_measurement_2 = require("./selected-outline-measurement");
 Object.defineProperty(exports, "getOutlineSelectionInteraction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineSelectionInteraction; } });
+Object.defineProperty(exports, "getSelectedCropInfo", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedCropInfo; } });
 Object.defineProperty(exports, "getSelectedEffectFieldsBySequenceKey", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedEffectFieldsBySequenceKey; } });
 Object.defineProperty(exports, "getSelectedOutlineRotationCornerInfo", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationCornerInfo; } });
 Object.defineProperty(exports, "getSelectedOutlineRotationDeltaDegrees", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationDeltaDegrees; } });
@@ -93,6 +97,50 @@ Object.defineProperty(exports, "getSequencesWithSelectableOutlines", { enumerabl
 Object.defineProperty(exports, "getTransformedSvgViewportPoints", { enumerable: true, get: function () { return selected_outline_measurement_2.getTransformedSvgViewportPoints; } });
 const selected_outline_types_2 = require("./selected-outline-types");
 Object.defineProperty(exports, "selectedOutlineDragThresholdPx", { enumerable: true, get: function () { return selected_outline_types_2.selectedOutlineDragThresholdPx; } });
+const getEffectiveCropValue = ({ activeSchema, controls, dragOverrides, fieldKey, frame, propStatuses, }) => {
+    var _a;
+    const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[fieldKey];
+    if ((fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) !== 'number') {
+        return 0;
+    }
+    const propStatus = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[fieldKey];
+    const value = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' || (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed'
+        ? remotion_1.Internals.getEffectiveVisualModeValue({
+            propStatus,
+            dragOverrideValue: dragOverrides[fieldKey],
+            defaultValue: fieldSchema.default,
+            frame,
+            shouldResortToDefaultValueIfUndefined: true,
+        })
+        : ((_a = controls === null || controls === void 0 ? void 0 : controls.currentRuntimeValueDotNotation[fieldKey]) !== null && _a !== void 0 ? _a : fieldSchema.default);
+    return typeof value === 'number' && Number.isFinite(value) ? value : 0;
+};
+const getCropDragFields = ({ activeSchema, cropValues, propStatuses, }) => {
+    if (!(0, selected_outline_types_1.canEditSelectedOutlineCrop)({
+        schema: activeSchema,
+        propStatuses,
+    })) {
+        return null;
+    }
+    const fields = {};
+    for (const fieldKey of Object.values(selected_outline_types_1.cropFieldKeys)) {
+        const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[fieldKey];
+        const propStatus = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[fieldKey];
+        const canEditStatus = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ||
+            ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' &&
+                propStatus.interpolationFunction === 'interpolate');
+        if ((fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) !== 'number' || !canEditStatus) {
+            return null;
+        }
+        fields[fieldKey] = {
+            defaultValue: fieldSchema.default,
+            fieldSchema,
+            propStatus,
+            value: cropValues[fieldKey],
+        };
+    }
+    return fields;
+};
 const outlineContainer = {
     position: 'absolute',
     inset: 0,
@@ -382,6 +430,8 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
     const overlayRef = (0, react_1.useRef)(null);
     const keyboardNudgeSessionRef = (0, react_1.useRef)(null);
     const saveKeyboardNudgeSessionRef = (0, react_1.useRef)(() => undefined);
+    const previewInteractive = previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const previewSelectionAvailable = previewServerState.type === 'connected' || window.remotion_isReadOnlyStudio;
     const onDraggingChange = react_1.default.useCallback((dragging) => {
         setDraggingOutline(dragging);
         if (dragging) {
@@ -398,13 +448,16 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         selectItem(item, interaction, undefined, { reveal: true });
     }, [selectItem]);
     const outlineTargets = (0, react_1.useMemo)(() => {
-        if (!(0, interactivity_enabled_1.isStudioInteractivityEnabled)() || !editorShowOutlines) {
+        if (!(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
+            !previewSelectionAvailable ||
+            !editorShowOutlines) {
             return [];
         }
         const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);
         const sequenceKeysContainingSelection = (0, selected_outline_measurement_1.getSequenceKeysContainingSelection)(selectedItems);
         const selectedEffectsBySequenceKey = (0, selected_outline_measurement_1.getSelectedEffectFieldsBySequenceKey)(selectedItems);
         const selectedTransformOriginInfo = (0, selected_outline_measurement_1.getSelectedTransformOriginInfo)(selectedItems);
+        const selectedCropInfo = (0, selected_outline_measurement_1.getSelectedCropInfo)(selectedItems);
         const clientId = previewServerState.type === 'connected'
             ? previewServerState.clientId
             : null;
@@ -434,6 +487,46 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                     frame: sourceFrame,
                 })
                 : null;
+            const cropValues = {
+                cropLeft: getEffectiveCropValue({
+                    activeSchema,
+                    controls,
+                    dragOverrides,
+                    fieldKey: selected_outline_types_1.cropFieldKeys.left,
+                    frame: sourceFrame,
+                    propStatuses: nodePropStatuses,
+                }),
+                cropRight: getEffectiveCropValue({
+                    activeSchema,
+                    controls,
+                    dragOverrides,
+                    fieldKey: selected_outline_types_1.cropFieldKeys.right,
+                    frame: sourceFrame,
+                    propStatuses: nodePropStatuses,
+                }),
+                cropTop: getEffectiveCropValue({
+                    activeSchema,
+                    controls,
+                    dragOverrides,
+                    fieldKey: selected_outline_types_1.cropFieldKeys.top,
+                    frame: sourceFrame,
+                    propStatuses: nodePropStatuses,
+                }),
+                cropBottom: getEffectiveCropValue({
+                    activeSchema,
+                    controls,
+                    dragOverrides,
+                    fieldKey: selected_outline_types_1.cropFieldKeys.bottom,
+                    frame: sourceFrame,
+                    propStatuses: nodePropStatuses,
+                }),
+            };
+            const crop = remotion_1.Internals.resolveSequenceCrop(cropValues);
+            const cropFields = getCropDragFields({
+                activeSchema,
+                cropValues,
+                propStatuses: nodePropStatuses,
+            });
             const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.translateFieldKey];
             const propStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.translateFieldKey];
             const scaleFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.scaleFieldKey];
@@ -459,18 +552,18 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             const canRotationDragStatus = (rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'static' ||
                 ((rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'keyframed' &&
                     rotationPropStatus.interpolationFunction === 'interpolate');
-            const canDrag = previewServerState.type === 'connected' &&
+            const canDrag = previewInteractive &&
                 controls !== null &&
                 (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'translate' &&
                 canDragStatus;
             const canScaleDragStatus = (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'static' ||
                 ((scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'keyframed' &&
                     scalePropStatus.interpolationFunction === 'interpolate');
-            const canScaleDrag = previewServerState.type === 'connected' &&
+            const canScaleDrag = previewInteractive &&
                 controls !== null &&
                 (scaleFieldSchema === null || scaleFieldSchema === void 0 ? void 0 : scaleFieldSchema.type) === 'scale' &&
                 canScaleDragStatus;
-            const canRotationDrag = previewServerState.type === 'connected' &&
+            const canRotationDrag = previewInteractive &&
                 controls !== null &&
                 (rotationFieldSchema === null || rotationFieldSchema === void 0 ? void 0 : rotationFieldSchema.type) === 'rotation-css' &&
                 canRotationDragStatus;
@@ -485,17 +578,44 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             const canTransformOriginTranslateStatus = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ||
                 ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' &&
                     propStatus.interpolationFunction === 'interpolate');
-            const canTransformOriginDrag = previewServerState.type === 'connected' &&
+            const canTransformOriginDrag = previewInteractive &&
                 selectedForTransformOrigin &&
                 controls !== null &&
                 (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
                 (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'translate' &&
                 canTransformOriginStatus &&
                 canTransformOriginTranslateStatus;
-            const canDropEffect = previewServerState.type === 'connected' &&
-                (controls === null || controls === void 0 ? void 0 : controls.supportsEffects) === true;
+            const selectedForCrop = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.sequenceKey) === key;
+            const cropSourceFrame = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === null ||
+                (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === undefined
+                ? sourceFrame
+                : selectedCropInfo.displayFrame - keyframeDisplayOffset;
+            const canCropDrag = previewInteractive &&
+                selectedForCrop &&
+                controls !== null &&
+                cropFields !== null;
+            const canDropEffect = previewInteractive && (controls === null || controls === void 0 ? void 0 : controls.supportsEffects) === true;
             return {
                 key,
+                canCrop: previewInteractive && controls !== null && cropFields !== null,
+                crop,
+                cropDrag: canCropDrag
+                    ? {
+                        clientId: previewServerState.clientId,
+                        fields: cropFields,
+                        nodePath,
+                        schema: controls.schema,
+                        sourceFrame: cropSourceFrame,
+                        transformOrigin: (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
+                            transformOriginPropStatus !== undefined
+                            ? {
+                                defaultValue: transformOriginFieldSchema.default,
+                                propStatus: transformOriginPropStatus,
+                                value: transformOriginValueForRotation,
+                            }
+                            : null,
+                    }
+                    : null,
                 containsSelection,
                 effectDrop: canDropEffect
                     ? {
@@ -628,6 +748,8 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         getScaleLockState,
         editorShowOutlines,
         overrideIdToNodePathMappings,
+        previewInteractive,
+        previewSelectionAvailable,
         previewServerState,
         selectedItems,
         sequences,

package/dist/components/SequencePropsSubscriptionProvider.d.ts

@@ -1,3 +1,5 @@
+import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+export declare const getReadOnlyOverrideIdToNodePathMappings: (sequences: readonly TSequence[]) => OverrideIdToNodePaths;
 export declare const SequencePropsSubscriptionProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;

package/dist/components/SequencePropsSubscriptionProvider.js

@@ -1,11 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequencePropsSubscriptionProvider = void 0;
+exports.SequencePropsSubscriptionProvider = exports.getReadOnlyOverrideIdToNodePathMappings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const getReadOnlyOverrideIdToNodePathMappings = (sequences) => {
+    return Object.fromEntries(sequences.flatMap((sequence) => {
+        var _a;
+        const overrideId = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId;
+        if (!overrideId) {
+            return [];
+        }
+        return [
+            [
+                overrideId,
+                {
+                    absolutePath: '',
+                    effectKeys: [],
+                    nodePath: ['readonly-sequence', overrideId],
+                    sequenceKeys: [],
+                    videoConfigValues: null,
+                },
+            ],
+        ];
+    }));
+};
+exports.getReadOnlyOverrideIdToNodePathMappings = getReadOnlyOverrideIdToNodePathMappings;
 const SequencePropsSubscriptionProvider = ({ children }) => {
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const [overrideToNodePathMap, setOverrideIdToNodePathMap] = (0, react_1.useState)({});
+    const readOnlyOverrideToNodePathMap = (0, react_1.useMemo)(() => window.remotion_isReadOnlyStudio
+        ? (0, exports.getReadOnlyOverrideIdToNodePathMappings)(sequences)
+        : null, [sequences]);
     const setOverrideIdToNodePath = (0, react_1.useCallback)((overrideId, state) => {
         setOverrideIdToNodePathMap((prev) => {
             const existing = prev[overrideId];
@@ -16,8 +42,10 @@ const SequencePropsSubscriptionProvider = ({ children }) => {
         });
     }, []);
     const getters = (0, react_1.useMemo)(() => {
-        return { overrideIdToNodePathMappings: overrideToNodePathMap };
-    }, [overrideToNodePathMap]);
+        return {
+            overrideIdToNodePathMappings: readOnlyOverrideToNodePathMap !== null && readOnlyOverrideToNodePathMap !== void 0 ? readOnlyOverrideToNodePathMap : overrideToNodePathMap,
+        };
+    }, [overrideToNodePathMap, readOnlyOverrideToNodePathMap]);
     const setters = (0, react_1.useMemo)(() => {
         return { setOverrideIdToNodePath };
     }, [setOverrideIdToNodePath]);

package/dist/components/SidebarCollapserControls.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const SidebarCollapserControls: React.FC<{}>;
+export declare const SidebarCollapserControl: React.FC<{
+    readonly side: 'left' | 'right';
+}>;