@remotion/studio 4.0.475 → 4.0.477

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

@@ -107,6 +107,8 @@ const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePat
         return (_a = promise === null || promise === void 0 ? void 0 : promise.then(() => true)) !== null && _a !== void 0 ? _a : null;
     }
     switch (selection.type) {
+        case 'guide':
+            return null;
         case 'sequence':
             return deleteSequences([selection.nodePathInfo], confirm);
         case 'sequence-effect':
@@ -175,6 +177,8 @@ const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodeP
     }
     assertTimelineSelectionsHaveSameType(selections);
     switch (firstSelection.type) {
+        case 'guide':
+            return null;
         case 'sequence':
             return deleteSequences(selections
                 .filter(isSequenceRowSelection)

package/dist/components/Timeline/disable-sequence-interactivity.d.ts

@@ -0,0 +1,8 @@
+import type { SequencePropsSubscriptionKey } from 'remotion';
+import { type SetPropStatuses } from './save-sequence-prop';
+export declare const disableSequenceInteractivity: ({ clientId, fileName, nodePath, setPropStatuses, }: {
+    readonly clientId: string;
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly setPropStatuses: SetPropStatuses;
+}) => Promise<void>;

package/dist/components/Timeline/disable-sequence-interactivity.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.disableSequenceInteractivity = void 0;
+const no_react_1 = require("remotion/no-react");
+const save_sequence_prop_1 = require("./save-sequence-prop");
+const disableSequenceInteractivity = ({ clientId, fileName, nodePath, setPropStatuses, }) => {
+    return (0, save_sequence_prop_1.saveSequenceProps)({
+        changes: [
+            {
+                fileName,
+                nodePath,
+                fieldKey: 'showInTimeline',
+                value: false,
+                defaultValue: 'true',
+                schema: no_react_1.NoReactInternals.sequenceSchema,
+            },
+        ],
+        setPropStatuses,
+        clientId,
+        undoLabel: 'Disable interactivity',
+        redoLabel: 'Disable interactivity again',
+    });
+};
+exports.disableSequenceInteractivity = disableSequenceInteractivity;

package/dist/components/Timeline/duplicate-selected-timeline-item.d.ts

@@ -3,9 +3,8 @@ import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { TimelineSelection } from './TimelineSelection';
 export declare const duplicateSequencesFromSource: (nodePathInfos: readonly SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<void>;
 export declare const isDuplicatableSequenceRowSelection: (selection: TimelineSelection) => selection is {
-    readonly nodePathInfo: SequenceNodePathInfo;
-} & {
     readonly type: "sequence";
+    readonly nodePathInfo: SequenceNodePathInfo;
 } & {
     type: "sequence";
 };

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

@@ -0,0 +1,20 @@
+import type { ResolvedStackLocation, TSequence } from 'remotion';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+import type { TimelineAssetLinkInfo } from './timeline-asset-link';
+export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
+    readonly assetLinkInfo: TimelineAssetLinkInfo | null;
+    readonly canOpenInEditor: boolean;
+    readonly deleteDisabled: boolean;
+    readonly disableInteractivityDisabled: boolean;
+    readonly duplicateDisabled: boolean;
+    readonly fileLocation: string | null;
+    readonly includeSourceEditItems: boolean;
+    readonly onDeleteSequenceFromSource: () => void;
+    readonly onDisableSequenceInteractivity: () => void;
+    readonly onDuplicateSequenceFromSource: () => void;
+    readonly openInEditor: () => void;
+    readonly originalLocation: ResolvedStackLocation | null;
+    readonly selectAsset: (src: string) => void;
+    readonly sequence: TSequence;
+    readonly sourceActions?: readonly ComboboxValue[] | undefined;
+}) => ComboboxValue[];

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

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSequenceContextMenuItems = void 0;
+const no_react_1 = require("remotion/no-react");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const timeline_asset_link_1 = require("./timeline-asset-link");
+const normalizeMenuDividers = (items) => {
+    var _a;
+    const normalized = [];
+    for (const item of items) {
+        if (item.type === 'divider') {
+            const previousItem = normalized[normalized.length - 1];
+            if (!previousItem || previousItem.type === 'divider') {
+                continue;
+            }
+        }
+        normalized.push(item);
+    }
+    if (((_a = normalized[normalized.length - 1]) === null || _a === void 0 ? void 0 : _a.type) === 'divider') {
+        normalized.pop();
+    }
+    return normalized;
+};
+const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+    const editorName = window.remotion_editorName;
+    const { documentationLink } = sequence;
+    const items = [
+        editorName
+            ? {
+                type: 'item',
+                id: 'show-in-editor',
+                keyHint: null,
+                label: `Show in ${editorName}`,
+                leftItem: null,
+                disabled: !canOpenInEditor || !originalLocation,
+                onClick: openInEditor,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'show-in-editor',
+            }
+            : null,
+        {
+            type: 'item',
+            id: 'copy-file-location',
+            keyHint: null,
+            label: 'Copy file location',
+            leftItem: null,
+            disabled: !fileLocation,
+            onClick: () => {
+                if (!fileLocation) {
+                    return;
+                }
+                navigator.clipboard
+                    .writeText(fileLocation)
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'copy-file-location',
+        },
+        documentationLink
+            ? {
+                type: 'item',
+                id: 'open-component-docs',
+                keyHint: null,
+                label: 'Open component docs',
+                leftItem: null,
+                disabled: false,
+                onClick: () => {
+                    window.open(documentationLink, '_blank', 'noopener,noreferrer');
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'open-component-docs',
+            }
+            : null,
+        assetLinkInfo
+            ? {
+                type: 'item',
+                id: 'show-asset',
+                keyHint: null,
+                label: 'Show asset',
+                leftItem: null,
+                disabled: false,
+                onClick: () => {
+                    (0, timeline_asset_link_1.openTimelineAssetLink)(assetLinkInfo, selectAsset);
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'show-asset',
+            }
+            : null,
+        documentationLink || assetLinkInfo
+            ? {
+                type: 'divider',
+                id: 'sequence-link-divider',
+            }
+            : null,
+        sourceActions.length > 0
+            ? {
+                type: 'divider',
+                id: 'sequence-source-actions-divider',
+            }
+            : null,
+        ...sourceActions,
+        {
+            type: 'item',
+            id: 'disable-interactivity',
+            keyHint: null,
+            label: 'Disable interactivity',
+            leftItem: null,
+            disabled: disableInteractivityDisabled,
+            onClick: onDisableSequenceInteractivity,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'disable-interactivity',
+        },
+        includeSourceEditItems
+            ? {
+                type: 'item',
+                id: 'duplicate-sequence',
+                keyHint: null,
+                label: 'Duplicate',
+                leftItem: null,
+                disabled: duplicateDisabled,
+                onClick: onDuplicateSequenceFromSource,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'duplicate-sequence',
+            }
+            : null,
+        includeSourceEditItems
+            ? {
+                type: 'divider',
+                id: 'sequence-duplicate-delete-divider',
+            }
+            : null,
+        includeSourceEditItems
+            ? {
+                type: 'item',
+                id: 'delete-sequence',
+                keyHint: null,
+                label: 'Delete',
+                leftItem: null,
+                disabled: deleteDisabled,
+                onClick: onDeleteSequenceFromSource,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'delete-sequence',
+            }
+            : null,
+    ].filter(no_react_1.NoReactInternals.truthy);
+    return normalizeMenuDividers(items);
+};
+exports.getSequenceContextMenuItems = getSequenceContextMenuItems;

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -17,13 +17,13 @@ function assertPropResetSelections(selections) {
 const isVisibleFieldSchema = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== 'hidden';
 const isNonDefaultCodeValue = ({ propStatus, defaultValue, }) => JSON.stringify(propStatus !== null && propStatus !== void 0 ? propStatus : defaultValue) !== JSON.stringify(defaultValue);
 const isResettablePropStatus = ({ propStatus, defaultValue, }) => {
-    if (!propStatus || propStatus.status === 'computed') {
+    if (!propStatus) {
         return false;
     }
     if (defaultValue === undefined) {
         return false;
     }
-    if (propStatus.status === 'keyframed') {
+    if (propStatus.status === 'keyframed' || propStatus.status === 'computed') {
         return true;
     }
     return isNonDefaultCodeValue({

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

@@ -2,11 +2,12 @@ import type { SequenceNodePath, SequenceSchema } from 'remotion';
 import { callApi } from '../call-api';
 type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
 type ApplyResult = (result: SubscribeResult) => void;
-export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, effects, nodePath, clientId, applyOnce, applyEach, }: {
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, }: {
     fileName: string;
     line: number;
     column: number;
     schema: SequenceSchema;
+    componentIdentity: string | null;
     effects: SequenceSchema[];
     nodePath: SequenceNodePath | null;
     clientId: string;

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

@@ -4,12 +4,19 @@ exports.acquireSequencePropsSubscription = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
-const makeKey = (fileName, line, column, sequenceKeys, effectKeys) => `${fileName}\0${line}\0${column}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}`;
+const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, effectKeys, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}`;
 const entries = new Map();
-const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effects, nodePath, clientId, applyOnce, applyEach, }) => {
+const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, }) => {
     const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
     const effectKeys = effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect));
-    const key = makeKey(fileName, line, column, sequenceKeys, effectKeys);
+    const key = makeKey({
+        fileName,
+        line,
+        column,
+        componentIdentity,
+        sequenceKeys,
+        effectKeys,
+    });
     let entry = entries.get(key);
     if (!entry) {
         const promise = (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
@@ -17,6 +24,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effe
             line,
             column,
             nodePath,
+            componentIdentity,
             keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
             effects: effectKeys,
             clientId,

package/dist/components/Timeline/should-clear-selection-on-pointer-down.d.ts

@@ -1,3 +1,5 @@
+export declare const PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR = "data-remotion-prevent-selection-clear";
 export declare const shouldClearSelectionOnPointerDown: (event: {
     readonly button: number;
+    readonly target?: EventTarget | null | undefined;
 }) => boolean;

package/dist/components/Timeline/should-clear-selection-on-pointer-down.js

@@ -1,7 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shouldClearSelectionOnPointerDown = void 0;
+exports.shouldClearSelectionOnPointerDown = exports.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR = void 0;
+exports.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR = 'data-remotion-prevent-selection-clear';
+const isSelectionClearBlocked = (target) => {
+    if (target === null ||
+        target === undefined ||
+        typeof target !== 'object' ||
+        !('closest' in target) ||
+        typeof target.closest !== 'function') {
+        return false;
+    }
+    return (target.closest(`[${exports.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR}]`) !== null);
+};
 const shouldClearSelectionOnPointerDown = (event) => {
-    return event.button === 0;
+    if (event.button !== 0) {
+        return false;
+    }
+    return !isSelectionClearBlocked(event.target);
 };
 exports.shouldClearSelectionOnPointerDown = shouldClearSelectionOnPointerDown;

package/dist/components/Timeline/timeline-rotation-utils.d.ts

@@ -1,2 +1,2 @@
 export declare const parseCssRotationToDegrees: (value: string) => number;
-export declare const serializeCssRotation: (value: number) => string;
+export declare const serializeCssRotation: (value: number, decimalPlaces?: number) => string;

package/dist/components/Timeline/timeline-rotation-utils.js

@@ -26,7 +26,9 @@ const parseCssRotationToDegrees = (value) => {
     }
 };
 exports.parseCssRotationToDegrees = parseCssRotationToDegrees;
-const serializeCssRotation = (value) => {
-    return `${(0, timeline_field_utils_1.normalizeTimelineNumber)(value)}deg`;
+const serializeCssRotation = (value, decimalPlaces = 6) => {
+    const factor = 10 ** decimalPlaces;
+    const rounded = Math.round((0, timeline_field_utils_1.normalizeTimelineNumber)(value) * factor) / factor;
+    return `${Object.is(rounded, -0) ? 0 : rounded}deg`;
 };
 exports.serializeCssRotation = serializeCssRotation;

package/dist/components/Timeline/update-selected-easing.d.ts

@@ -3,19 +3,17 @@ import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineEasingSelection, TimelineSelection } from './TimelineSelection';
 export type EasingSelection = TimelineEasingSelection;
 export type TimelineEasingValue = 'linear' | [number, number, number, number];
-export declare const getEasingSelections: (selections: readonly TimelineSelection[]) => ({
-    readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
-} & {
+export declare const getEasingSelections: (selections: readonly TimelineSelection[]) => {
     readonly type: "easing";
+    readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
     readonly fromFrame: number;
     readonly toFrame: number;
     readonly segmentIndex: number;
-})[];
+}[];
 export declare const getTimelineEasingValueForSelection: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
     selection: {
-        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
-    } & {
         readonly type: "easing";
+        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
         readonly fromFrame: number;
         readonly toFrame: number;
         readonly segmentIndex: number;

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

@@ -1,7 +1,8 @@
 import type { SequenceSchema } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, schema, effects, }: {
+export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, }: {
     overrideId: string;
+    componentIdentity: string | null;
     schema: SequenceSchema;
     effects: SequenceSchema[];
     originalLocation: OriginalPosition | null;

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

@@ -7,7 +7,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
-const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, effects, }) => {
+const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, }) => {
     var _a, _b, _c;
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
@@ -50,6 +50,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
             line: locationLine,
             column: locationColumn,
             schema,
+            componentIdentity,
             effects,
             nodePath: (_b = nodePathAtResubscribe === null || nodePathAtResubscribe === void 0 ? void 0 : nodePathAtResubscribe.nodePath) !== null && _b !== void 0 ? _b : null,
             clientId,
@@ -85,6 +86,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
         };
     }, [
         clientId,
+        componentIdentity,
         effects,
         effectsSignature,
         locationColumn,

package/dist/components/Timeline/use-timeline-keyframe-drag.d.ts

@@ -1,6 +1,30 @@
 import type React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-import { type TimelineSelectionInteraction } from './TimelineSelection';
+import { type TimelineDraggedKeyframe } from './TimelineKeyframeDragState';
+import { type TimelineSelection, type TimelineSelectionInteraction } from './TimelineSelection';
+export declare const getKeyframesForTimelineEasingDrag: ({ currentSelections, interaction, selectionItem, selected, }: {
+    readonly currentSelections: readonly TimelineSelection[];
+    readonly interaction: TimelineSelectionInteraction;
+    readonly selectionItem: {
+        readonly type: "easing";
+        readonly nodePathInfo: SequenceNodePathInfo;
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+    readonly selected: boolean;
+}) => ({
+    readonly type: "keyframe";
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly frame: number;
+} & {
+    type: "keyframe";
+})[];
+export declare const getTimelineSelectionsAfterEasingKeyframeDrag: ({ delta, selections, targets, }: {
+    readonly delta: number;
+    readonly selections: readonly TimelineSelection[];
+    readonly targets: readonly TimelineDraggedKeyframe[];
+}) => TimelineSelection[];
 export declare const useTimelineKeyframeDrag: ({ frame, nodePathInfo, onSelect, selectable, selected, }: {
     readonly frame: number;
     readonly nodePathInfo: SequenceNodePathInfo;
@@ -8,3 +32,15 @@ export declare const useTimelineKeyframeDrag: ({ frame, nodePathInfo, onSelect,
     readonly selectable: boolean;
     readonly selected: boolean;
 }) => (e: React.PointerEvent<HTMLButtonElement>) => void;
+export declare const useTimelineEasingKeyframeDrag: ({ onSelect, selectable, selected, selectionItem, }: {
+    readonly onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    readonly selectable: boolean;
+    readonly selected: boolean;
+    readonly selectionItem: {
+        readonly type: "easing";
+        readonly nodePathInfo: SequenceNodePathInfo;
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+}) => (e: React.PointerEvent<HTMLButtonElement>) => void;