@remotion/studio 4.0.499 → 4.0.500

package/dist/components/selected-outline-types.d.ts

@@ -1,4 +1,4 @@
-import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import type { ComboboxValue } from './NewComposition/ComboBox';
 import type { SelectedOutlineUvHandle } from './selected-outline-uv';
@@ -7,6 +7,7 @@ export type SelectedOutlineContextMenuOpenResult = false | void | readonly Combo
 export type SelectedOutlineContextMenuOpenHandler = () => SelectedOutlineContextMenuOpenResult | Promise<SelectedOutlineContextMenuOpenResult>;
 export type SelectedOutlineTarget = {
     readonly key: string;
+    readonly canCrop: boolean;
     readonly containsSelection: boolean;
     readonly effectDrop: SelectedOutlineEffectDropTarget | null;
     readonly nodePathInfo: SequenceNodePathInfo;
@@ -14,12 +15,53 @@ export type SelectedOutlineTarget = {
     readonly selected: boolean;
     readonly selection: TimelineSelection;
     readonly sequence: TSequence;
+    readonly crop: {
+        readonly left: number;
+        readonly right: number;
+        readonly top: number;
+        readonly bottom: number;
+    };
+    readonly cropDrag: SelectedOutlineCropDragTarget | null;
     readonly drag: SelectedOutlineDragTarget | null;
     readonly scaleDrag: SelectedOutlineScaleDragTarget | null;
     readonly rotationDrag: SelectedOutlineRotationDragTarget | null;
     readonly transformOriginDrag: SelectedOutlineTransformOriginDragTarget | null;
     readonly uvHandles: readonly SelectedOutlineUvHandle[];
 };
+export declare const cropFieldKeys: {
+    readonly left: "cropLeft";
+    readonly right: "cropRight";
+    readonly top: "cropTop";
+    readonly bottom: "cropBottom";
+};
+export type SelectedOutlineCropEdge = keyof typeof cropFieldKeys;
+export type SelectedOutlineCropFieldKey = (typeof cropFieldKeys)[SelectedOutlineCropEdge];
+export declare const canEditSelectedOutlineCrop: ({ schema, propStatuses, }: {
+    readonly schema: InteractivitySchema | null;
+    readonly propStatuses: Record<string, CanUpdateSequencePropStatus> | undefined;
+}) => boolean;
+export type SelectedOutlineCropHandle = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top' | 'right' | 'bottom' | 'left';
+type CropNumberFieldSchema = Extract<InteractivitySchemaField, {
+    type: 'number';
+}>;
+export type SelectedOutlineCropField = {
+    readonly defaultValue: number | null | undefined;
+    readonly fieldSchema: CropNumberFieldSchema;
+    readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
+    readonly value: number;
+};
+export type SelectedOutlineCropDragTarget = {
+    readonly clientId: string;
+    readonly fields: Record<SelectedOutlineCropFieldKey, SelectedOutlineCropField>;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: InteractivitySchema;
+    readonly sourceFrame: number;
+    readonly transformOrigin: {
+        readonly defaultValue: string | undefined;
+        readonly propStatus: CanUpdateSequencePropStatus;
+        readonly value: string;
+    } | null;
+};
 export type SelectedOutlineEffectDropTarget = {
     readonly clientId: string;
     readonly fileName: string;
@@ -119,3 +161,4 @@ export type SelectedOutlineKeyboardNudgeSession = {
     deltaY: number;
     lastValues: ReadonlyMap<string, string>;
 };
+export {};

package/dist/components/selected-outline-types.js

@@ -1,6 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.emptyContextMenuValues = exports.outlineContainer = exports.selectedOutlineDragThresholdPx = exports.transformOriginFieldKey = exports.rotateFieldKey = exports.scaleFieldKey = exports.translateFieldKey = void 0;
+exports.emptyContextMenuValues = exports.outlineContainer = exports.selectedOutlineDragThresholdPx = exports.transformOriginFieldKey = exports.rotateFieldKey = exports.scaleFieldKey = exports.translateFieldKey = exports.canEditSelectedOutlineCrop = exports.cropFieldKeys = void 0;
+exports.cropFieldKeys = {
+    left: 'cropLeft',
+    right: 'cropRight',
+    top: 'cropTop',
+    bottom: 'cropBottom',
+};
+const canEditSelectedOutlineCrop = ({ schema, propStatuses, }) => {
+    for (const fieldKey of Object.values(exports.cropFieldKeys)) {
+        const fieldSchema = schema === null || schema === void 0 ? void 0 : schema[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 false;
+        }
+    }
+    return true;
+};
+exports.canEditSelectedOutlineCrop = canEditSelectedOutlineCrop;
 exports.translateFieldKey = 'style.translate';
 exports.scaleFieldKey = 'style.scale';
 exports.rotateFieldKey = 'style.rotate';

package/dist/error-overlay/remotion-overlay/Overlay.js

@@ -4,7 +4,7 @@ exports.Overlay = exports.setErrorsRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const MenuToolbar_1 = require("../../components/MenuToolbar");
+const menu_toolbar_height_1 = require("../../components/menu-toolbar-height");
 const colors_1 = require("../../helpers/colors");
 const keybindings_1 = require("../../state/keybindings");
 const ErrorLoader_1 = require("./ErrorLoader");
@@ -45,8 +45,8 @@ const Overlay = () => {
                 backgroundColor: BACKGROUND_COLOR,
                 overflow: 'auto',
                 color: colors_1.WHITE,
-                top: MenuToolbar_1.MENU_TOOLBAR_HEIGHT,
-                height: `calc(100% - ${MenuToolbar_1.MENU_TOOLBAR_HEIGHT}px)`,
+                top: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
+                height: `calc(100% - ${menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT}px)`,
             }, children: errors.errors.map((err, i) => {
                 var _a;
                 return (jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader

package/dist/error-overlay/remotion-overlay/ShortcutHint.js

@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShortcutHint = exports.cmdOrCtrlCharacter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const is_mac_1 = require("../../helpers/is-mac");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-exports.cmdOrCtrlCharacter = typeof window !== 'undefined' && window.navigator.platform.startsWith('Mac')
-    ? '⌘'
-    : 'Ctrl';
+exports.cmdOrCtrlCharacter = is_mac_1.isMac ? '⌘' : 'Ctrl';
 const container = {
     display: 'inline-block',
     marginLeft: 6,