@remotion/studio 4.0.474 → 4.0.476

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -10,6 +10,7 @@ const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const TimelineDeleteKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -17,55 +18,81 @@ const TimelineDeleteKeybindings = () => {
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { canSelect, canSelectEasing } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     (0, react_1.useEffect)(() => {
-        if (!canSelect || previewServerState.type !== 'connected') {
+        if ((!canSelect && !canSelectEasing) ||
+            previewServerState.type !== 'connected') {
             return;
         }
         const { clientId } = previewServerState;
-        const backspace = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'Backspace',
-            callback: () => {
-                const { selectedItems, clearSelection } = currentSelection.current;
-                const sequences = sequencesRef.current;
-                const propStatuses = propStatusesRef.current;
-                if (selectedItems.length === 0) {
-                    return;
-                }
-                const resetPromise = (0, reset_selected_timeline_props_1.resetSelectedTimelineProps)({
-                    selections: selectedItems,
+        const handleDelete = () => {
+            const { selectedItems, clearSelection } = currentSelection.current;
+            const sequences = sequencesRef.current;
+            const propStatuses = propStatusesRef.current;
+            if (selectedItems.length === 0) {
+                return;
+            }
+            const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
+                selections: selectedItems,
+                sequences,
+                overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                setPropStatuses,
+                clientId,
+                confirm,
+            });
+            if (deletePromise !== null) {
+                deletePromise
+                    .then((deleted) => {
+                    if (deleted) {
+                        clearSelection();
+                    }
+                })
+                    .catch(() => undefined);
+                return;
+            }
+            const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
+            if (easingSelections.length === selectedItems.length) {
+                const resetEasingPromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
+                    selections: easingSelections,
                     sequences,
                     overrideIdsToNodePaths: overrideIdToNodePathMappings,
                     propStatuses,
                     setPropStatuses,
                     clientId,
+                    easing: 'linear',
                 });
-                if (resetPromise !== null) {
-                    resetPromise.catch(() => undefined);
-                    return;
-                }
-                const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
-                    selections: selectedItems,
-                    sequences,
-                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                    setPropStatuses,
-                    clientId,
-                    confirm,
-                });
-                if (deletePromise === null) {
+                if (resetEasingPromise !== null) {
+                    resetEasingPromise.catch(() => undefined);
                     return;
                 }
-                deletePromise
-                    .then((deleted) => {
-                    if (deleted) {
-                        clearSelection();
-                    }
-                })
-                    .catch(() => undefined);
-            },
+            }
+            const resetPromise = (0, reset_selected_timeline_props_1.resetSelectedTimelineProps)({
+                selections: selectedItems,
+                sequences,
+                overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                propStatuses,
+                setPropStatuses,
+                clientId,
+            });
+            if (resetPromise !== null) {
+                resetPromise.catch(() => undefined);
+            }
+        };
+        const backspace = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Backspace',
+            callback: handleDelete,
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const deleteKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Delete',
+            callback: handleDelete,
             commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -95,10 +122,12 @@ const TimelineDeleteKeybindings = () => {
         });
         return () => {
             backspace.unregister();
+            deleteKey.unregister();
             duplicate.unregister();
         };
     }, [
         canSelect,
+        canSelectEasing,
         confirm,
         currentSelection,
         keybindings,

package/dist/components/Timeline/TimelineDragHandler.js

@@ -82,13 +82,13 @@ const TimelineDragHandler = () => {
         return {
             ...container,
             width: 100 * zoom + '%',
-            ...(TimelineSelection_1.TIMELINE_TOP_DRAG ? { height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT } : {}),
+            height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
         };
     }, [canvasContent, zoomMap]);
     if (!canvasContent || canvasContent.type !== 'composition') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, 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 ? jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {}) : null }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {

package/dist/components/Timeline/TimelineEffectItem.js

@@ -90,8 +90,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     const deleteDisabled = !previewConnected ||
         effectStatus.type !== 'can-update-effect' ||
         !validatedLocation.source;
-    const canReorder = TimelineSelection_1.SELECTION_ENABLED &&
-        previewConnected &&
+    const canReorder = previewConnected &&
         effectStatus.type === 'can-update-effect' &&
         Boolean(validatedLocation.source);
     const nodePathKey = (0, react_1.useMemo)(() => remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -246,7 +246,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 schema: field.effectSchema,
                 key: field.key,
             }),
-        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex })) : null;
+        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo })) : null;
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;

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

@@ -6,6 +6,7 @@ export declare const TimelineExpandedKeyframeRow: React.NamedExoticComponent<{
         frame: number;
         value: unknown;
     }[];
+    readonly canEditEasing: boolean;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly showSeparator: boolean;
 }>;

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -48,10 +48,10 @@ const row = {
 const rowSeparator = {
     height: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
 };
-const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, nodePathInfo, showSeparator }) => {
+const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasing, nodePathInfo, showSeparator }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const easingSegments = TimelineSelection_1.ENABLE_OUTLINES
+    const easingSegments = canEditEasing
         ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
         : [];
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowSelected && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -14,6 +14,6 @@ const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeD
         nodePathInfo,
         keyframeDisplayOffset,
     });
-    return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
+    return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, canEditEasing: row.canEditEasing, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
 };
 exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner);

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -36,12 +36,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineHeightContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const TimelineSelection_1 = require("./TimelineSelection");
 const use_timeline_height_1 = require("./use-timeline-height");
 const baseStyle = {
     display: 'flex',
     flex: 1,
     minHeight: '100%',
     overflowX: 'hidden',
+    backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
 };
 const TimelineHeightContainerInner = ({ shown, hasBeenCut, children }) => {
     const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut });

package/dist/components/Timeline/TimelineItemStack.js

@@ -3,63 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineItemStack = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
-const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
-const open_in_editor_1 = require("../../helpers/open-in-editor");
-const layout_1 = require("../layout");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const Spinner_1 = require("../Spinner");
-const TimelineSelection_1 = require("./TimelineSelection");
 const source_attribution_1 = require("./TimelineStack/source-attribution");
 const TimelineItemStack = ({ originalLocation }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const [opening, setOpening] = (0, react_1.useState)(false);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const openEditor = (0, react_1.useCallback)(async (location) => {
-        if (!window.remotion_editorName) {
-            return;
-        }
-        setOpening(true);
-        try {
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(location);
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        }
-        finally {
-            setOpening(false);
-        }
-    }, []);
-    const canOpenInEditor = Boolean(window.remotion_editorName &&
-        connectionStatus === 'connected' &&
-        originalLocation);
-    const canOpenInGitHub = Boolean(window.remotion_gitSource && originalLocation);
-    const hoverable = !TimelineSelection_1.SELECTION_ENABLED && (canOpenInEditor || canOpenInGitHub);
-    const onClick = (0, react_1.useCallback)(() => {
-        if (!originalLocation) {
-            return;
-        }
-        if (canOpenInEditor) {
-            openEditor(originalLocation);
-            return;
-        }
-        if (canOpenInGitHub) {
-            window.open((0, get_git_menu_item_1.getGitRefUrl)(window.remotion_gitSource, originalLocation), '_blank');
-        }
-    }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
-    const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
-    const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
     const style = (0, react_1.useMemo)(() => {
         return {
             fontSize: 12,
-            color: opening
-                ? colors_1.VERY_LIGHT_TEXT
-                : hovered && hoverable
-                    ? colors_1.LIGHT_TEXT
-                    : colors_1.VERY_LIGHT_TEXT,
-            cursor: hoverable ? 'pointer' : undefined,
+            color: colors_1.VERY_LIGHT_TEXT,
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
@@ -70,13 +20,10 @@ const TimelineItemStack = ({ originalLocation }) => {
             userSelect: 'none',
             WebkitUserSelect: 'none',
         };
-    }, [opening, hovered, hoverable]);
+    }, []);
     if (!originalLocation) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { onPointerEnter: hoverable ? onPointerEnter : undefined, onPointerLeave: hoverable ? onPointerLeave : undefined, onClick: hoverable ? onClick : undefined, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) }), opening ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 })
-                ] })) : null] }));
+    return (jsx_runtime_1.jsx("div", { style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) }));
 };
 exports.TimelineItemStack = TimelineItemStack;

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

@@ -1,5 +1,11 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatus, DragOverrideValue, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import { type TimelineSelection } from './TimelineSelection';
+export declare const getSelectedKeyframeControlNodePathInfos: ({ clickedNodePathInfo, selectedItems, }: {
+    readonly clickedNodePathInfo: SequenceNodePathInfo;
+    readonly selectedItems: readonly TimelineSelection[];
+}) => readonly SequenceNodePathInfo[];
 export declare const shouldShowTimelineKeyframeControls: ({ propStatus, selected, keyframable, }: {
     propStatus: CanUpdateSequencePropStatus | null;
     selected: boolean;
@@ -15,4 +21,5 @@ export declare const TimelineKeyframeControls: React.FC<{
     readonly dragOverrideValue: DragOverrideValue | undefined;
     readonly schema: SequenceSchema;
     readonly effectIndex: number | null;
+    readonly nodePathInfo: SequenceNodePathInfo;
 }>;