@remotion/studio 4.0.469 → 4.0.471

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineKeyframedValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const wrapperStyle = {
+    opacity: 0.5,
+    pointerEvents: 'none',
+};
+const noop = () => undefined;
+const noopAsync = () => Promise.resolve();
+const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset }) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const jsxFrame = timelinePosition - keyframeDisplayOffset;
+    const computedValue = (0, react_1.useMemo)(() => {
+        const raw = remotion_1.Internals.interpolateKeyframedStatus({
+            frame: jsxFrame,
+            status: propStatus,
+        });
+        if (typeof raw === 'number') {
+            return Math.round(raw * 100) / 100;
+        }
+        return raw;
+    }, [jsxFrame, propStatus]);
+    const fakeStatus = (0, react_1.useMemo)(() => ({
+        canUpdate: true,
+        codeValue: computedValue,
+    }), [computedValue]);
+    if (computedValue === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("div", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: fakeStatus, effectiveValue: computedValue, onSave: noopAsync, onDragValueChange: noop, onDragEnd: noop }) }));
+};
+exports.TimelineKeyframedValue = TimelineKeyframedValue;

package/dist/components/Timeline/TimelineList.js

@@ -2,29 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const TimelineListItem_1 = require("./TimelineListItem");
-const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const container = {
     flex: 1,
     background: colors_1.BACKGROUND,
 };
 const TimelineList = ({ timeline }) => {
-    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
-    // Selection-triggering click handlers in children call e.stopPropagation(),
-    // so any pointerdown that bubbles up here is by definition on empty space
-    // and should clear the current selection.
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        if (e.button !== 0) {
-            return;
-        }
-        clearSelection();
-    }, [clearSelection]);
-    return (jsx_runtime_1.jsxs("div", { style: container, onPointerDown: onPointerDown, children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineListItem_1.TimelineListItem, { nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo }, track.sequence.id) }, track.sequence.id));
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

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

@@ -1,15 +1,20 @@
 import React from 'react';
+import type { TimelineSelectionInteraction } from './TimelineSelection';
 export declare const TimelineRowChrome: React.FC<{
     readonly depth: number;
     readonly eye: React.ReactNode;
+    readonly keyframeControls?: React.ReactNode;
     readonly arrow: React.ReactNode;
     readonly children: React.ReactNode;
     readonly style: React.CSSProperties;
     readonly selected: boolean;
     readonly selectable: boolean;
-    readonly onSelect: () => void;
+    readonly onSelect: (interaction?: TimelineSelectionInteraction) => void;
     readonly showSelectedBackground: boolean;
     readonly containsSelection: boolean;
     readonly outerHeight: number | null;
+    readonly onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
+    readonly onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
+    readonly onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
     readonly onDoubleClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }>;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -11,19 +11,36 @@ const rowBase = {
     alignItems: 'stretch',
     display: 'flex',
 };
-const chromeColumnStyle = {
+const leftChromeStyle = {
     alignItems: 'center',
     alignSelf: 'stretch',
     display: 'flex',
     flexShrink: 0,
-    paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
 };
-const TimelineRowChrome = ({ depth, eye, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDoubleClick, }) => {
+const keyframeControlsColumnStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'flex-start',
+    marginRight: -(timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH - timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING),
+    width: timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH,
+};
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
+    const chromeColumnStyle = (0, react_1.useMemo)(() => ({
+        alignItems: 'center',
+        alignSelf: 'stretch',
+        display: 'flex',
+        flexShrink: 0,
+        paddingLeft: keyframeControls ? 0 : timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    }), [keyframeControls]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
             e.stopPropagation();
-            onSelect();
+            onSelect({
+                shiftKey: e.shiftKey,
+                toggleKey: e.metaKey || e.ctrlKey,
+            });
         }
     }, [onSelect]);
     const onContextMenu = (0, react_1.useCallback)((e) => {
@@ -52,10 +69,11 @@ const TimelineRowChrome = ({ depth, eye, arrow, children, style, selected, selec
         };
     }, [outerHeight, highlightBackground]);
     const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] }), children] }));
+            jsx_runtime_1.jsxs("div", { style: leftChromeStyle, children: [keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : null, jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] })
+                ] }), children] }));
     if (outerStyle) {
-        return (jsx_runtime_1.jsx("div", { style: outerStyle, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+        return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }
-    return (jsx_runtime_1.jsx("div", { onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, style: innerRowStyle, children: chrome }));
+    return (jsx_runtime_1.jsx("div", { onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

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

@@ -1,39 +1,83 @@
 import React, { type CSSProperties } from 'react';
-import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { SequenceNodePathInfo, TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
 export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
 export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
 export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
 export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
-export declare const TIMELINE_SELECTED_TRACK_HIGHLIGHT_STYLE: CSSProperties;
+export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number) => CSSProperties;
 export declare const SELECTION_ENABLED = false;
-export type TimelineSelection = {
-    readonly type: 'row';
+export declare const TIMELINE_TOP_DRAG = false;
+export declare const ENABLE_OUTLINES = false;
+type TimelineSelectionBase = {
     readonly nodePathInfo: SequenceNodePathInfo;
-} | {
+};
+export type TimelineSelection = (TimelineSelectionBase & {
+    readonly type: 'sequence';
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-prop';
+    readonly key: string;
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-all-effects';
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-effect';
+    readonly i: number;
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-effect-prop';
+    readonly i: number;
+    readonly key: string;
+}) | (TimelineSelectionBase & {
     readonly type: 'keyframe';
-    readonly nodePathInfo: SequenceNodePathInfo;
     readonly frame: number;
+});
+export type TimelineSelectionInteraction = {
+    readonly shiftKey: boolean;
+    readonly toggleKey: boolean;
 };
+export declare const isTimelineSelectionModifierEvent: ({ shiftKey, metaKey, ctrlKey, }: {
+    readonly shiftKey: boolean;
+    readonly metaKey: boolean;
+    readonly ctrlKey: boolean;
+}) => boolean;
+export type TimelineSelectionState = {
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly anchor: TimelineSelection | null;
+};
+export declare const getTimelineSelectionAfterInteraction: ({ currentState, clickedItem, interaction, allSelectableItems, }: {
+    readonly currentState: TimelineSelectionState;
+    readonly clickedItem: TimelineSelection;
+    readonly interaction: TimelineSelectionInteraction;
+    readonly allSelectableItems: readonly TimelineSelection[];
+}) => TimelineSelectionState;
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
+    readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
-    readonly selectItem: (item: TimelineSelection) => void;
+    readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction) => void;
+    readonly selectItems: (items: readonly TimelineSelection[]) => void;
+    readonly registerSelectableItem: (item: TimelineSelection) => () => void;
     readonly containsSelection: (nodePathInfo: SequenceNodePathInfo) => boolean;
     readonly clearSelection: () => void;
 };
+export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
+export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TrackWithHash, "nodePathInfo">[]) => TimelineSelection[];
+export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
+export declare const TimelineSelectAllKeybindings: React.FC<{
+    readonly timeline: readonly TrackWithHash[];
+}>;
 export declare const TimelineSelectionProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;
 export declare const useTimelineSelection: () => TimelineSelectionContextValue;
+export declare const useCurrentTimelineSelectionStateAsRef: () => React.RefObject<TimelineSelectionContextValue>;
 export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
-    onSelect: () => void;
+    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;
     selected: boolean;
 };
 export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePathInfo, frame: number) => {
-    onSelect: () => void;
+    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;
     selected: boolean;
 };