@remotion/studio 4.0.469 → 4.0.471

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -0,0 +1,324 @@
+"use strict";
+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.TimelineInOutDragHandler = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const in_out_1 = require("../../state/in-out");
+const z_index_1 = require("../../state/z-index");
+const ContextMenu_1 = require("../ContextMenu");
+const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
+const TimelineInOutToggle_1 = require("../TimelineInOutToggle");
+const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
+const TimelineInOutPointerHandle_1 = require("./TimelineInOutPointerHandle");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const getClientXWithScroll = (x) => {
+    var _a;
+    return x + ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft);
+};
+const TimelineInOutDragHandler = () => {
+    const video = remotion_1.Internals.useUnsafeVideoConfig();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    if (!canvasContent || canvasContent.type !== 'composition') {
+        return null;
+    }
+    return video ? jsx_runtime_1.jsx(TimelineInOutDragHandlerInnerMemo, {}) : null;
+};
+exports.TimelineInOutDragHandler = TimelineInOutDragHandler;
+const TimelineInOutDragHandlerInner = () => {
+    var _a;
+    var _b, _c;
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const { isHighestContext } = (0, z_index_1.useZIndex)();
+    const [inOutDragging, setInOutDragging] = (0, react_1.useState)({
+        dragging: false,
+    });
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const get = (0, react_1.useCallback)((frame) => {
+        if (timelineWidth === null) {
+            throw new Error('timeline width is not yet determined');
+        }
+        return (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth);
+    }, [timelineWidth, videoConfig.durationInFrames]);
+    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
+    const left = (_c = size === null || size === void 0 ? void 0 : size.left) !== null && _c !== void 0 ? _c : 0;
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
+    const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
+    const onInPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        if (!isHighestContext) {
+            return;
+        }
+        if (!videoConfig) {
+            return;
+        }
+        if (inFrame === null) {
+            throw new Error('expected in frame');
+        }
+        e.stopPropagation();
+        document.body.style.userSelect = 'none';
+        document.body.style.webkitUserSelect = 'none';
+        const inMarker = get(inFrame);
+        const outMarker = outFrame === null ? Infinity : get(outFrame - 1);
+        (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
+        setInOutDragging({
+            dragging: 'in',
+            initialOffset: getClientXWithScroll(e.clientX),
+            boundaries: [-Infinity, outMarker - inMarker],
+        });
+    }, [isHighestContext, videoConfig, inFrame, get, outFrame]);
+    const onOutPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        if (!isHighestContext) {
+            return;
+        }
+        if (!videoConfig) {
+            return;
+        }
+        if (outFrame === null) {
+            throw new Error('expected out frame');
+        }
+        e.stopPropagation();
+        document.body.style.userSelect = 'none';
+        document.body.style.webkitUserSelect = 'none';
+        const outMarker = get(outFrame);
+        const inMarker = inFrame === null ? -Infinity : get(inFrame + 1);
+        (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
+        setInOutDragging({
+            dragging: 'out',
+            initialOffset: getClientXWithScroll(e.clientX),
+            boundaries: [inMarker - outMarker, Infinity],
+        });
+    }, [isHighestContext, videoConfig, inFrame, get, outFrame]);
+    const onPointerMoveInOut = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return;
+        }
+        if (!inOutDragging.dragging) {
+            return;
+        }
+        const offset = Math.max(inOutDragging.boundaries[0], Math.min(inOutDragging.boundaries[1], getClientXWithScroll(e.clientX) - inOutDragging.initialOffset));
+        if (inOutDragging.dragging === 'in') {
+            if (!TimelineInOutPointerHandle_1.inPointerHandle.current) {
+                throw new Error('in pointer handle');
+            }
+            if (!TimelineInOutPointer_1.inMarkerAreaRef.current) {
+                throw new Error('expected inMarkerAreaRef');
+            }
+            if (!inFrame) {
+                throw new Error('expected inframes');
+            }
+            TimelineInOutPointerHandle_1.inPointerHandle.current.style.transform = `translateX(${get(inFrame) + offset}px)`;
+            TimelineInOutPointer_1.inMarkerAreaRef.current.style.width =
+                String(get(inFrame) + offset) + 'px';
+        }
+        if (inOutDragging.dragging === 'out') {
+            if (!TimelineInOutPointerHandle_1.outPointerHandle.current) {
+                throw new Error('in pointer handle');
+            }
+            if (!TimelineInOutPointer_1.outMarkerAreaRef.current) {
+                throw new Error('in outMarkerAreaRef');
+            }
+            if (!outFrame) {
+                throw new Error('expected outframes');
+            }
+            TimelineInOutPointerHandle_1.outPointerHandle.current.style.transform = `translateX(${get(outFrame) + offset}px)`;
+            TimelineInOutPointer_1.outMarkerAreaRef.current.style.left =
+                String(get(outFrame) + offset) + 'px';
+            TimelineInOutPointer_1.outMarkerAreaRef.current.style.width =
+                String(width - get(outFrame) - offset) + 'px';
+        }
+    }, [get, inFrame, inOutDragging, outFrame, videoConfig, width]);
+    const onPointerUpInOut = (0, react_1.useCallback)((e) => {
+        document.body.style.userSelect = '';
+        document.body.style.webkitUserSelect = '';
+        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+        if (!videoConfig) {
+            return;
+        }
+        if (!inOutDragging.dragging) {
+            return;
+        }
+        setInOutDragging({
+            dragging: false,
+        });
+        const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
+            clientX: getClientXWithScroll(e.clientX) - left,
+            durationInFrames: videoConfig.durationInFrames,
+            width,
+            extrapolate: 'extend',
+        });
+        if (inOutDragging.dragging === 'in') {
+            if (frame < 1) {
+                return setInAndOutFrames((prev) => {
+                    var _a;
+                    return ({
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                            inFrame: null,
+                        },
+                    });
+                });
+            }
+            const maxFrame = outFrame === null ? Infinity : outFrame - 1;
+            setInAndOutFrames((prev) => {
+                var _a;
+                return ({
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                        inFrame: Math.min(maxFrame, frame),
+                    },
+                });
+            });
+        }
+        else {
+            if (frame > videoConfig.durationInFrames - 2) {
+                return setInAndOutFrames((prev) => {
+                    var _a;
+                    return ({
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                            outFrame: null,
+                        },
+                    });
+                });
+            }
+            const minFrame = inFrame === null ? -Infinity : inFrame + 1;
+            setInAndOutFrames((prev) => {
+                var _a;
+                return ({
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                        outFrame: Math.max(minFrame, frame),
+                    },
+                });
+            });
+        }
+    }, [
+        inFrame,
+        inOutDragging.dragging,
+        left,
+        outFrame,
+        setInAndOutFrames,
+        videoConfig,
+        width,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (inOutDragging.dragging === false) {
+            return;
+        }
+        window.addEventListener('pointermove', onPointerMoveInOut);
+        window.addEventListener('pointerup', onPointerUpInOut);
+        return () => {
+            window.removeEventListener('pointermove', onPointerMoveInOut);
+            window.removeEventListener('pointerup', onPointerUpInOut);
+        };
+    }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
+    const inContextMenu = (0, react_1.useMemo)(() => {
+        return [
+            {
+                id: 'hide-in',
+                keyHint: null,
+                label: 'Clear In marker',
+                leftItem: null,
+                onClick: (_, e) => {
+                    e === null || e === void 0 ? void 0 : e.stopPropagation();
+                    e === null || e === void 0 ? void 0 : e.preventDefault();
+                    setInAndOutFrames((prev) => {
+                        var _a;
+                        return ({
+                            ...prev,
+                            [videoConfig.id]: {
+                                ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                                inFrame: null,
+                            },
+                        });
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'hide-in',
+            },
+        ];
+    }, [setInAndOutFrames, videoConfig.id]);
+    const outContextMenu = (0, react_1.useMemo)(() => {
+        return [
+            {
+                id: 'hide-out',
+                keyHint: null,
+                label: 'Clear Out marker',
+                leftItem: null,
+                onClick: (_, e) => {
+                    e === null || e === void 0 ? void 0 : e.stopPropagation();
+                    e === null || e === void 0 ? void 0 : e.preventDefault();
+                    setInAndOutFrames((prev) => {
+                        var _a;
+                        return ({
+                            ...prev,
+                            [videoConfig.id]: {
+                                ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                                outFrame: null,
+                            },
+                        });
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'hide-out',
+            },
+        ];
+    }, [setInAndOutFrames, videoConfig.id]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, onOpen: null, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in', onPointerDown: onInPointerDown }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, onOpen: null, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame, onPointerDown: onOutPointerDown }) }))] }));
+};
+const TimelineInOutDragHandlerInnerMemo = react_1.default.memo(TimelineInOutDragHandlerInner);

package/dist/components/Timeline/TimelineInOutPointer.js

@@ -13,6 +13,7 @@ const areaHighlight = {
     height: '100%',
     bottom: 0,
     top: 0,
+    pointerEvents: 'none',
 };
 exports.inMarkerAreaRef = (0, react_1.createRef)();
 exports.outMarkerAreaRef = (0, react_1.createRef)();
@@ -31,7 +32,8 @@ const TimelineInOutPointer = () => {
                     ...areaHighlight,
                     left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(outFrame, videoConfig.durationInFrames, timelineWidth),
                     width: timelineWidth -
-                        (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(outFrame, videoConfig.durationInFrames, timelineWidth),
+                        (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(outFrame, videoConfig.durationInFrames + 1, // last frame also has width of 1 frame
+                        timelineWidth),
                 } }))] }));
 };
 exports.TimelineInOutPointer = TimelineInOutPointer;

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

@@ -5,6 +5,7 @@ type Props = {
     readonly dragging: boolean;
     readonly type: 'in' | 'out';
     readonly atFrame: number;
+    readonly onPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void;
 };
 export declare const TimelineInOutPointerHandle: React.FC<Props>;
 export {};

package/dist/components/Timeline/TimelineInOutPointerHandle.js

@@ -18,7 +18,7 @@ const line = {
 };
 exports.inPointerHandle = (0, react_1.createRef)();
 exports.outPointerHandle = (0, react_1.createRef)();
-const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, type }) => {
+const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, onPointerDown, timelineWidth, type }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const style = (0, react_1.useMemo)(() => {
         return {
@@ -27,17 +27,18 @@ const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, typ
                 ? colors_1.LIGHT_TRANSPARENT
                 : 'rgba(255, 255, 255, 0.1)',
             transform: `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`,
+            top: 0,
         };
     }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
-    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
+    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style, onPointerDown: onPointerDown }));
 };
-const TimelineInOutPointerHandle = ({ dragging, type, atFrame, }) => {
+const TimelineInOutPointerHandle = ({ dragging, onPointerDown, type, atFrame, }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     // When switching from a content which has no timeline (still or asset preview)
     // the timeline first needs to mount, so we need to wait for the timeline width
     if (timelineWidth === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InnerTimelineInOutPointerHandle, { atFrame: atFrame, dragging: dragging, timelineWidth: timelineWidth, type: type }));
+    return (jsx_runtime_1.jsx(InnerTimelineInOutPointerHandle, { atFrame: atFrame, dragging: dragging, onPointerDown: onPointerDown, timelineWidth: timelineWidth, type: type }));
 };
 exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+export declare const shouldShowTimelineKeyframeControls: ({ propStatus, selected, }: {
+    propStatus: CanUpdateSequencePropStatus | null;
+    selected: boolean;
+}) => boolean;
+export declare const TimelineKeyframeControls: React.FC<{
+    readonly fieldKey: string;
+    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fileName: string;
+    readonly keyframeDisplayOffset: number;
+    readonly defaultValue: unknown;
+    readonly dragOverrideValue: unknown | undefined;
+    readonly schema: SequenceSchema;
+    readonly effectIndex: number | null;
+}>;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -0,0 +1,222 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeControls = 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 colors_1 = require("../../helpers/colors");
+const call_add_keyframe_1 = require("./call-add-keyframe");
+const call_delete_keyframe_1 = require("./call-delete-keyframe");
+const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const TimelineSelection_1 = require("./TimelineSelection");
+const controlsContainerStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    gap: 1,
+    marginRight: 4,
+};
+const navButtonStyle = {
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    display: 'flex',
+    flexShrink: 0,
+    height: 12,
+    justifyContent: 'center',
+    lineHeight: 1,
+    outline: 'none',
+    padding: 0,
+    userSelect: 'none',
+    width: 12,
+};
+const diamondButtonStyle = {
+    ...navButtonStyle,
+    background: 'none',
+};
+const diamondIconStyle = {
+    borderRadius: 1,
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
+    height: 7,
+    transform: 'rotate(45deg)',
+    width: 7,
+};
+const svgStyle = { display: 'block' };
+const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverrideValue, }) => {
+    if (propStatus.canUpdate) {
+        return remotion_1.Internals.getEffectiveVisualModeValue({
+            codeValue: propStatus,
+            dragOverrideValue,
+            defaultValue,
+            shouldResortToDefaultValueIfUndefined: true,
+        });
+    }
+    if (propStatus.reason === 'keyframed') {
+        return remotion_1.Internals.interpolateKeyframedStatus({
+            frame: jsxFrame,
+            status: propStatus,
+        });
+    }
+    return null;
+};
+const shouldShowTimelineKeyframeControls = ({ propStatus, selected, }) => {
+    if (propStatus === null) {
+        return false;
+    }
+    if (selected) {
+        return true;
+    }
+    return (TimelineSelection_1.SELECTION_ENABLED &&
+        !propStatus.canUpdate &&
+        propStatus.reason === 'keyframed');
+};
+exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
+const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
+    const jsxFrame = timelinePosition - keyframeDisplayOffset;
+    const keyframes = (0, react_1.useMemo)(() => (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset), [propStatus, keyframeDisplayOffset]);
+    const hasKeyframeAtCurrentFrame = (0, react_1.useMemo)(() => {
+        if (propStatus.canUpdate || propStatus.reason === 'computed') {
+            return false;
+        }
+        return (0, get_keyframe_navigation_1.hasKeyframeAtSourceFrame)(propStatus.keyframes, jsxFrame);
+    }, [jsxFrame, propStatus]);
+    const previousDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getPreviousKeyframeDisplayFrame)(keyframes, timelinePosition), [keyframes, timelinePosition]);
+    const nextDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getNextKeyframeDisplayFrame)(keyframes, timelinePosition), [keyframes, timelinePosition]);
+    const canToggleKeyframe = propStatus.canUpdate || propStatus.reason === 'keyframed';
+    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
+        setFrame((current) => {
+            const next = { ...current, [videoConfig.id]: frame };
+            remotion_1.Internals.persistCurrentFrame(next);
+            return next;
+        });
+    }, [setFrame, videoConfig.id]);
+    const onPrevious = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (previousDisplayFrame !== null) {
+            seekToDisplayFrame(previousDisplayFrame);
+        }
+    }, [previousDisplayFrame, seekToDisplayFrame]);
+    const onNext = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (nextDisplayFrame !== null) {
+            seekToDisplayFrame(nextDisplayFrame);
+        }
+    }, [nextDisplayFrame, seekToDisplayFrame]);
+    const onToggleKeyframe = (0, react_1.useCallback)(async (e) => {
+        e.stopPropagation();
+        if (!clientId || !canToggleKeyframe) {
+            return;
+        }
+        if (hasKeyframeAtCurrentFrame &&
+            !propStatus.canUpdate &&
+            propStatus.reason === 'keyframed') {
+            if (effectIndex === null) {
+                await (0, call_delete_keyframe_1.callDeleteSequenceKeyframe)({
+                    fileName,
+                    nodePath,
+                    fieldKey,
+                    sourceFrame: jsxFrame,
+                    schema,
+                    setCodeValues,
+                    clientId,
+                });
+                return;
+            }
+            await (0, call_delete_keyframe_1.callDeleteEffectKeyframe)({
+                fileName,
+                nodePath,
+                effectIndex,
+                fieldKey,
+                sourceFrame: jsxFrame,
+                schema,
+                setCodeValues,
+                clientId,
+            });
+            return;
+        }
+        const value = getCurrentKeyframeValue({
+            propStatus,
+            jsxFrame,
+            defaultValue,
+            dragOverrideValue,
+        });
+        if (value === null) {
+            return;
+        }
+        if (effectIndex === null) {
+            await (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                fileName,
+                nodePath,
+                fieldKey,
+                sourceFrame: jsxFrame,
+                value,
+                schema,
+                setCodeValues,
+                clientId,
+            });
+            return;
+        }
+        await (0, call_add_keyframe_1.callAddEffectKeyframe)({
+            fileName,
+            nodePath,
+            effectIndex,
+            fieldKey,
+            sourceFrame: jsxFrame,
+            value,
+            schema,
+            setCodeValues,
+            clientId,
+        });
+    }, [
+        canToggleKeyframe,
+        clientId,
+        defaultValue,
+        dragOverrideValue,
+        effectIndex,
+        fieldKey,
+        fileName,
+        hasKeyframeAtCurrentFrame,
+        jsxFrame,
+        nodePath,
+        propStatus,
+        schema,
+        setCodeValues,
+    ]);
+    const previousDisabled = previousDisplayFrame === null;
+    const nextDisabled = nextDisplayFrame === null;
+    const previousStyle = (0, react_1.useMemo)(() => ({
+        ...navButtonStyle,
+        cursor: previousDisabled ? 'default' : 'pointer',
+        opacity: previousDisabled ? 0.35 : 1,
+    }), [previousDisabled]);
+    const nextStyle = (0, react_1.useMemo)(() => ({
+        ...navButtonStyle,
+        cursor: nextDisabled ? 'default' : 'pointer',
+        opacity: nextDisabled ? 0.35 : 1,
+    }), [nextDisabled]);
+    const diamondStyle = (0, react_1.useMemo)(() => ({
+        ...diamondButtonStyle,
+        cursor: canToggleKeyframe && clientId ? 'pointer' : 'default',
+        opacity: canToggleKeyframe && clientId ? 1 : 0.35,
+    }), [canToggleKeyframe, clientId]);
+    const diamondIcon = (0, react_1.useMemo)(() => ({
+        ...diamondIconStyle,
+        backgroundColor: hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT,
+    }), [hasKeyframeAtCurrentFrame]);
+    return (jsx_runtime_1.jsxs("div", { style: controlsContainerStyle, children: [
+            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: "#ccc" }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx("span", { style: diamondIcon }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: "#ccc" }) }) })
+        ] }));
+};
+exports.TimelineKeyframeControls = TimelineKeyframeControls;

package/dist/components/Timeline/TimelineKeyframeDiamond.js

@@ -49,7 +49,6 @@ const diamondBase = {
     backgroundColor: colors_1.LIGHT_TEXT,
     borderRadius: 1,
     boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
-    pointerEvents: 'none',
 };
 const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
@@ -61,11 +60,10 @@ const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) =
         }
         return {
             ...diamondBase,
-            backgroundColor: selected
-                ? TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND
-                : colors_1.LIGHT_TEXT,
+            backgroundColor: colors_1.LIGHT_TEXT,
+            outline: selected ? '2px solid ' + colors_1.BLUE : 'none',
             border: 'none',
-            cursor: 'default',
+            cursor: 'pointer',
             left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING,
             padding: 0,
             pointerEvents: 'auto',
@@ -76,7 +74,10 @@ const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) =
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
             e.stopPropagation();
-            onSelect();
+            onSelect({
+                shiftKey: e.shiftKey,
+                toggleKey: e.metaKey || e.ctrlKey,
+            });
         }
     }, [onSelect]);
     if (style === null) {

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusKeyframed } from 'remotion';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineKeyframedValue: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+    readonly keyframeDisplayOffset: number;
+}>;