@remotion/studio 4.0.469 → 4.0.471

package/dist/components/Timeline/TimelineEffectItem.js

@@ -0,0 +1,323 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineEffectItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const call_api_1 = require("../call-api");
+const ContextMenu_1 = require("../ContextMenu");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const save_effect_prop_1 = require("./save-effect-prop");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
+const TimelineSelection_1 = require("./TimelineSelection");
+const EFFECT_REORDER_MIME_TYPE = 'application/remotion-effect-reorder';
+let currentEffectDrag = null;
+const rowLabel = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
+};
+const rowStyle = {
+    height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
+    cursor: 'default',
+};
+const reorderWrapper = {
+    position: 'relative',
+};
+const reorderLineBase = {
+    backgroundColor: '#0b84ff',
+    height: 2,
+    left: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: 0,
+    zIndex: 1,
+};
+const hasEffectReorderDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).includes(EFFECT_REORDER_MIME_TYPE);
+};
+const getEffectReorderDragData = (dataTransfer) => {
+    if (currentEffectDrag) {
+        return currentEffectDrag;
+    }
+    const value = dataTransfer.getData(EFFECT_REORDER_MIME_TYPE);
+    if (!value) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(value);
+        if (typeof parsed.nodePathKey === 'string' &&
+            typeof parsed.effectIndex === 'number') {
+            return parsed;
+        }
+    }
+    catch (_a) {
+        return null;
+    }
+    return null;
+};
+const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
+    return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
+};
+const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
+    var _a;
+    var _b;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewConnected = previewServerState.type === 'connected';
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const [dropIndicator, setDropIndicator] = (0, react_1.useState)(null);
+    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
+        codeValues,
+        nodePath,
+        effectIndex,
+    }), [codeValues, nodePath, effectIndex]);
+    const disabledStatus = effectStatus.type === 'can-update-effect'
+        ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : null)
+        : null;
+    const isDisabled = (0, react_1.useMemo)(() => {
+        if (disabledStatus && disabledStatus.canUpdate) {
+            return Boolean(disabledStatus.codeValue);
+        }
+        return false;
+    }, [disabledStatus]);
+    const canToggle = previewConnected && disabledStatus !== null && disabledStatus.canUpdate;
+    const deleteDisabled = !previewConnected ||
+        effectStatus.type !== 'can-update-effect' ||
+        !validatedLocation.source;
+    const canReorder = TimelineSelection_1.SELECTION_ENABLED &&
+        previewConnected &&
+        effectStatus.type === 'can-update-effect' &&
+        Boolean(validatedLocation.source);
+    const nodePathKey = (0, react_1.useMemo)(() => remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
+    const onDeleteEffectFromSource = (0, react_1.useCallback)(async () => {
+        if (deleteDisabled) {
+            return;
+        }
+        try {
+            const result = await (0, call_api_1.callApi)('/api/delete-effect', [
+                {
+                    type: 'single-effect',
+                    fileName: validatedLocation.source,
+                    sequenceNodePath: nodePath,
+                    effectIndex,
+                },
+            ]);
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Removed effect from source file', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [deleteDisabled, effectIndex, nodePath, validatedLocation.source]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        if (!previewConnected) {
+            return [];
+        }
+        const items = [];
+        if (documentationLink) {
+            items.push({
+                type: 'item',
+                id: 'open-effect-docs',
+                keyHint: null,
+                label: 'Open effect docs',
+                leftItem: null,
+                disabled: false,
+                onClick: () => {
+                    window.open(documentationLink, '_blank', 'noopener,noreferrer');
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'open-effect-docs',
+            });
+            items.push({
+                type: 'divider',
+                id: 'open-effect-docs-divider',
+            });
+        }
+        items.push({
+            type: 'item',
+            id: 'delete-effect',
+            keyHint: null,
+            label: 'Delete',
+            leftItem: null,
+            disabled: deleteDisabled,
+            onClick: () => {
+                if (deleteDisabled) {
+                    return;
+                }
+                onDeleteEffectFromSource();
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'delete-effect',
+        });
+        return items;
+    }, [
+        deleteDisabled,
+        documentationLink,
+        onDeleteEffectFromSource,
+        previewConnected,
+    ]);
+    const onToggle = (0, react_1.useCallback)((type) => {
+        if (!canToggle || previewServerState.type !== 'connected') {
+            return;
+        }
+        const newValue = type !== 'enable';
+        const fieldSchema = effectSchema.disabled;
+        const defaultValue = fieldSchema && fieldSchema.type === 'boolean'
+            ? JSON.stringify(fieldSchema.default)
+            : null;
+        (0, save_effect_prop_1.saveEffectProp)({
+            fileName: validatedLocation.source,
+            nodePath,
+            effectIndex,
+            fieldKey: 'disabled',
+            value: newValue,
+            defaultValue,
+            schema: effectSchema,
+            setCodeValues,
+            clientId: previewServerState.clientId,
+        });
+    }, [
+        canToggle,
+        effectIndex,
+        effectSchema,
+        nodePath,
+        previewServerState,
+        setCodeValues,
+        validatedLocation.source,
+    ]);
+    const isExpanded = getIsExpanded(nodePathInfo);
+    const labelStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...rowLabel,
+            ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selection.selected, true),
+            alignSelf: 'stretch',
+            alignItems: 'center',
+            color: (0, TimelineSelection_1.getTimelineColor)(selection.selected, true),
+            display: 'flex',
+            flex: 1,
+            minWidth: 0,
+            paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+        };
+    }, [selection.selected]);
+    const getDropTarget = (0, react_1.useCallback)((e) => {
+        const dragData = getEffectReorderDragData(e.dataTransfer);
+        if (!dragData || dragData.nodePathKey !== nodePathKey) {
+            return null;
+        }
+        const rect = e.currentTarget.getBoundingClientRect();
+        const before = e.clientY < rect.top + rect.height / 2;
+        const insertionIndex = before ? effectIndex : effectIndex + 1;
+        const toIndex = getDestinationIndex({
+            fromIndex: dragData.effectIndex,
+            insertionIndex,
+        });
+        if (toIndex === dragData.effectIndex) {
+            return null;
+        }
+        return {
+            dragData,
+            toIndex,
+            indicator: before ? 'before' : 'after',
+        };
+    }, [effectIndex, nodePathKey]);
+    const onDragStart = (0, react_1.useCallback)((e) => {
+        if (!canReorder) {
+            e.preventDefault();
+            return;
+        }
+        const dragData = { nodePathKey, effectIndex };
+        currentEffectDrag = dragData;
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData(EFFECT_REORDER_MIME_TYPE, JSON.stringify(dragData));
+        e.stopPropagation();
+    }, [canReorder, effectIndex, nodePathKey]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        currentEffectDrag = null;
+        setDropIndicator(null);
+    }, []);
+    const onDragOver = (0, react_1.useCallback)((e) => {
+        if (!canReorder || !hasEffectReorderDragType(e.dataTransfer)) {
+            return;
+        }
+        const dropTarget = getDropTarget(e);
+        if (!dropTarget) {
+            setDropIndicator(null);
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'move';
+        setDropIndicator(dropTarget.indicator);
+    }, [canReorder, getDropTarget]);
+    const onDragLeave = (0, react_1.useCallback)((e) => {
+        if (e.currentTarget.contains(e.relatedTarget)) {
+            return;
+        }
+        setDropIndicator(null);
+    }, []);
+    const onDrop = (0, react_1.useCallback)(async (e) => {
+        if (!canReorder ||
+            previewServerState.type !== 'connected' ||
+            !validatedLocation.source) {
+            return;
+        }
+        const dropTarget = getDropTarget(e);
+        if (!dropTarget) {
+            setDropIndicator(null);
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setDropIndicator(null);
+        currentEffectDrag = null;
+        try {
+            const result = await (0, call_api_1.callApi)('/api/reorder-effect', {
+                fileName: validatedLocation.source,
+                sequenceNodePath: nodePath,
+                fromIndex: dropTarget.dragData.effectIndex,
+                toIndex: dropTarget.toIndex,
+                clientId: previewServerState.clientId,
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Reordered effect', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [
+        canReorder,
+        getDropTarget,
+        nodePath,
+        previewServerState,
+        validatedLocation.source,
+    ]);
+    const reorderLineStyle = (0, react_1.useMemo)(() => {
+        if (!dropIndicator) {
+            return null;
+        }
+        return {
+            ...reorderLineBase,
+            ...(dropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
+        };
+    }, [dropIndicator]);
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
+    const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
+    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: draggableRow })) : (draggableRow);
+};
+exports.TimelineEffectItem = TimelineEffectItem;

package/dist/components/Timeline/{TimelineEffectFieldRow.d.ts → TimelineEffectPropItem.d.ts}

@@ -3,10 +3,11 @@ import type { SequencePropsSubscriptionKey } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { EffectSchemaFieldInfo } from '../../helpers/timeline-layout';
-export declare const TimelineEffectFieldRow: React.FC<{
+export declare const TimelineEffectPropItem: React.FC<{
     readonly field: EffectSchemaFieldInfo;
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly nodePathInfo: SequenceNodePathInfo;
+    readonly keyframeDisplayOffset: number;
 }>;

package/dist/components/Timeline/{TimelineEffectFieldRow.js → TimelineEffectPropItem.js}

@@ -1,23 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineEffectFieldRow = void 0;
+exports.TimelineEffectPropItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const call_api_1 = require("../call-api");
+const ContextMenu_1 = require("../ContextMenu");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const save_effect_prop_1 = require("./save-effect-prop");
 const save_prop_queue_1 = require("./save-prop-queue");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const TimelineKeyframeControls_1 = require("./TimelineKeyframeControls");
+const TimelineKeyframedValue_1 = require("./TimelineKeyframedValue");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
 const fieldRowBase = {};
-const Value = ({ field, nodePath, validatedLocation }) => {
+const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
     var _a;
     var _b;
     const { setEffectDragOverrides, clearEffectDragOverrides, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -124,8 +128,10 @@ const Value = ({ field, nodePath, validatedLocation }) => {
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
     if (propStatus === null || !propStatus.canUpdate) {
-        if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'computed' ||
-            (propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'keyframed') {
+        if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'keyframed') {
+            return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset }));
+        }
+        if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'computed') {
             return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
         }
         return null;
@@ -138,8 +144,13 @@ const Value = ({ field, nodePath, validatedLocation }) => {
     });
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
 };
-const TimelineEffectFieldRow = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo }) => {
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, }) => {
     var _a;
+    var _b, _c;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const style = (0, react_1.useMemo)(() => {
         return {
@@ -147,8 +158,86 @@ const TimelineEffectFieldRow = ({ field, validatedLocation, rowDepth, nodePath,
             height: field.rowHeight,
         };
     }, [field.rowHeight]);
-    return (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
-            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_a = field.description) !== null && _a !== void 0 ? _a : field.key }), jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation }) })
+    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
+        codeValues,
+        nodePath,
+        effectIndex: field.effectIndex,
+    }), [codeValues, nodePath, field.effectIndex]);
+    const propStatus = effectStatus.type === 'can-update-effect'
+        ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
+        : null;
+    const dragOverrideValue = (0, react_1.useMemo)(() => {
+        const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
+        return overrides[field.key];
+    }, [getEffectDragOverrides, nodePath, field.effectIndex, field.key]);
+    const keyframeControls = propStatus !== null &&
+        (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
+            propStatus,
+            selected: selection.selected,
+        }) ? (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;
+    const isNonDefault = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!propStatus || !propStatus.canUpdate) {
+            return false;
+        }
+        const effectiveCodeValue = (_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : field.fieldSchema.default;
+        return (JSON.stringify(effectiveCodeValue) !==
+            JSON.stringify(field.fieldSchema.default));
+    }, [field.fieldSchema.default, propStatus]);
+    const canPerformReset = previewServerState.type === 'connected' &&
+        propStatus !== null &&
+        propStatus.canUpdate;
+    const onReset = (0, react_1.useCallback)(() => {
+        if (!canPerformReset ||
+            previewServerState.type !== 'connected' ||
+            !isNonDefault) {
+            return;
+        }
+        const defaultValue = field.fieldSchema.default !== undefined
+            ? JSON.stringify(field.fieldSchema.default)
+            : null;
+        (0, save_effect_prop_1.saveEffectProp)({
+            fileName: validatedLocation.source,
+            nodePath,
+            effectIndex: field.effectIndex,
+            fieldKey: field.key,
+            value: field.fieldSchema.default,
+            defaultValue,
+            schema: field.effectSchema,
+            setCodeValues,
+            clientId: previewServerState.clientId,
+        });
+    }, [
+        canPerformReset,
+        field.effectIndex,
+        field.effectSchema,
+        field.fieldSchema.default,
+        field.key,
+        isNonDefault,
+        nodePath,
+        previewServerState,
+        setCodeValues,
+        validatedLocation.source,
+    ]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        return [
+            {
+                type: 'item',
+                id: 'reset-effect-field',
+                keyHint: null,
+                label: 'Reset',
+                leftItem: null,
+                disabled: !canPerformReset,
+                onClick: onReset,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'reset-effect-field',
+            },
+        ];
+    }, [canPerformReset, onReset]);
+    const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }), jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: keyframeDisplayOffset }) })
         ] }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };
-exports.TimelineEffectFieldRow = TimelineEffectFieldRow;
+exports.TimelineEffectPropItem = TimelineEffectPropItem;

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -21,6 +21,10 @@ const arrowButton = {
     outline: 'none',
     lineHeight: 1,
 };
+const arrowSpacer = {
+    ...arrowButton,
+    cursor: 'default',
+};
 const svgStyle = { display: 'block' };
 const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = false }) => {
     const style = (0, react_1.useMemo)(() => {
@@ -35,6 +39,6 @@ const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = fals
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {
-    return jsx_runtime_1.jsx("div", { style: arrowButton });
+    return jsx_runtime_1.jsx("div", { style: arrowSpacer });
 };
 exports.TimelineExpandArrowSpacer = TimelineExpandArrowSpacer;

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -1,14 +1,45 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedKeyframeRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const TimelineKeyframeDiamond_1 = require("./TimelineKeyframeDiamond");
 const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const row = {
     position: 'relative',
 };
@@ -16,8 +47,9 @@ const rowSeparator = {
     height: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
 };
 const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, nodePathInfo, showSeparator }) => {
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    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 ? (jsx_runtime_1.jsx("div", { style: TimelineSelection_1.TIMELINE_SELECTED_TRACK_HIGHLIGHT_STYLE })) : null, keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
+    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, keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
         ] }));
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);

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

@@ -13,4 +13,5 @@ export declare const TimelineExpandedRow: React.FC<{
     readonly validatedLocation: CodePosition;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
+    readonly keyframeDisplayOffset: number;
 }>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -8,19 +8,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
-const TimelineEffectFieldRow_1 = require("./TimelineEffectFieldRow");
-const TimelineEffectGroupRow_1 = require("./TimelineEffectGroupRow");
+const TimelineEffectItem_1 = require("./TimelineEffectItem");
+const TimelineEffectPropItem_1 = require("./TimelineEffectPropItem");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
-const TimelineFieldRow_1 = require("./TimelineFieldRow");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineSequencePropItem_1 = require("./TimelineSequencePropItem");
 const rowLabel = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
     userSelect: 'none',
 };
-const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, }) => {
+const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, }) => {
     const rowDepth = (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: depth });
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
     const labelStyle = react_1.default.useMemo(() => ({
@@ -36,7 +36,9 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTr
     }), [selection.selected]);
     if (node.kind === 'group') {
         if (node.effectInfo) {
-            return (jsx_runtime_1.jsx(TimelineEffectGroupRow_1.TimelineEffectGroupRow, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
+            return (
+            // A single effect
+            jsx_runtime_1.jsx(TimelineEffectItem_1.TimelineEffectItem, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
         }
         // Group like "Effects"
         const isExpanded = getIsExpanded(node.nodePathInfo);
@@ -46,10 +48,10 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTr
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectFieldRow_1.TimelineEffectFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema }));
+            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }

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

@@ -7,4 +7,5 @@ export declare const TimelineExpandedSection: React.FC<{
     readonly validatedLocation: CodePosition;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly nestedDepth: number;
+    readonly keyframeDisplayOffset: number;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -53,7 +53,7 @@ const separator = {
     height: 0,
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
-const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth }) => {
+const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
@@ -89,7 +89,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
         return jsx_runtime_1.jsx("div", { style: style, children: "No schema" });
     }
     return (jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
-            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema })
+            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset })
                 ] }, JSON.stringify(node.nodePathInfo)));
         }) }));
 };

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TimelineInOutDragHandler: React.FC;