@remotion/studio 4.0.468 → 4.0.470

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/TimelineItemStack.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+export declare const TimelineItemStack: React.FC<{
+    readonly originalLocation: OriginalPosition | null;
+}>;

package/dist/components/Timeline/TimelineItemStack.js

@@ -0,0 +1,82 @@
+"use strict";
+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,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            flexShrink: 100000,
+            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] }));
+};
+exports.TimelineItemStack = TimelineItemStack;

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;
+}>;