@remotion/studio 4.0.80

package/dist/components/Timeline/TimelineDragHandler.js

@@ -0,0 +1,454 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineDragHandler = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const in_out_1 = require("../../state/in-out");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
+const z_index_1 = require("../../state/z-index");
+const ContextMenu_1 = require("../ContextMenu");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+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 TimelineSlider_1 = require("./TimelineSlider");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const inner = {
+    overflowY: 'auto',
+    overflowX: 'hidden',
+};
+const container = {
+    userSelect: 'none',
+    position: 'absolute',
+    height: '100%',
+    top: 0,
+};
+const style = {
+    width: '100%',
+    height: '100%',
+};
+const getClientXWithScroll = (x) => {
+    var _a;
+    return x + ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft);
+};
+const TimelineDragHandler = () => {
+    const video = remotion_1.Internals.useUnsafeVideoConfig();
+    const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const containerStyle = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!canvasContent || canvasContent.type !== 'composition') {
+            return {};
+        }
+        const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        return {
+            ...container,
+            width: 100 * zoom + '%',
+        };
+    }, [canvasContent, zoomMap]);
+    if (!canvasContent || canvasContent.type !== 'composition') {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? (0, jsx_runtime_1.jsx)(Inner, {}) : null }));
+};
+exports.TimelineDragHandler = TimelineDragHandler;
+const Inner = () => {
+    var _a, _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 setFrame = remotion_1.Internals.useTimelineSetFrame();
+    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 [dragging, setDragging] = (0, react_1.useState)({
+        dragging: false,
+    });
+    const { playing, play, pause, seek } = player_1.PlayerInternals.usePlayer();
+    const scroller = (0, react_1.useRef)(null);
+    const stopInterval = () => {
+        if (scroller.current) {
+            clearInterval(scroller.current);
+            scroller.current = null;
+        }
+    };
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        if (!isHighestContext) {
+            return;
+        }
+        stopInterval();
+        if (!videoConfig) {
+            return;
+        }
+        if (e.target === TimelineInOutPointerHandle_1.inPointerHandle.current) {
+            if (inFrame === null) {
+                throw new Error('expected outframe');
+            }
+            const inMarker = get(inFrame);
+            const outMarker = outFrame === null ? Infinity : get(outFrame - 1);
+            setInOutDragging({
+                dragging: 'in',
+                initialOffset: getClientXWithScroll(e.clientX),
+                boundaries: [-Infinity, outMarker - inMarker],
+            });
+            return;
+        }
+        if (e.target === TimelineInOutPointerHandle_1.outPointerHandle.current) {
+            if (outFrame === null) {
+                throw new Error('expected outframe');
+            }
+            const outMarker = get(outFrame);
+            const inMarker = inFrame === null ? -Infinity : get(inFrame + 1);
+            setInOutDragging({
+                dragging: 'out',
+                initialOffset: getClientXWithScroll(e.clientX),
+                boundaries: [inMarker - outMarker, Infinity],
+            });
+            return;
+        }
+        if (e.button !== 0) {
+            return;
+        }
+        const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
+            clientX: getClientXWithScroll(e.clientX) - left,
+            durationInFrames: videoConfig.durationInFrames,
+            width,
+            extrapolate: 'clamp',
+        });
+        seek(frame);
+        setDragging({
+            dragging: true,
+            wasPlaying: playing,
+        });
+        pause();
+    }, [
+        isHighestContext,
+        videoConfig,
+        left,
+        width,
+        seek,
+        playing,
+        pause,
+        inFrame,
+        get,
+        outFrame,
+    ]);
+    const onPointerMoveScrubbing = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (!videoConfig) {
+            return;
+        }
+        if (!dragging.dragging) {
+            return;
+        }
+        const isRightOfArea = e.clientX >=
+            ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) +
+                left -
+                timeline_layout_1.TIMELINE_PADDING;
+        const isLeftOfArea = e.clientX <= left;
+        const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
+            clientX: getClientXWithScroll(e.clientX) - left,
+            durationInFrames: videoConfig.durationInFrames,
+            width,
+            extrapolate: 'clamp',
+        });
+        if (isLeftOfArea && (0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollLeft) {
+            if (scroller.current) {
+                return;
+            }
+            const scrollEvery = () => {
+                var _a;
+                if (!(0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollLeft) {
+                    stopInterval();
+                    return;
+                }
+                const nextFrame = (0, timeline_scroll_logic_1.getFrameWhileScrollingLeft)({
+                    durationInFrames: videoConfig.durationInFrames,
+                    width,
+                });
+                const scrollPos = (0, timeline_scroll_logic_1.getScrollPositionForCursorOnLeftEdge)({
+                    nextFrame,
+                    durationInFrames: videoConfig.durationInFrames,
+                });
+                (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(nextFrame);
+                seek(nextFrame);
+                (0, timeline_scroll_logic_1.scrollToTimelineXOffset)(scrollPos);
+            };
+            scrollEvery();
+            scroller.current = setInterval(() => {
+                scrollEvery();
+            }, 100);
+        }
+        else if (isRightOfArea &&
+            (0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollRight) {
+            if (scroller.current) {
+                return;
+            }
+            const scrollEvery = () => {
+                var _a;
+                if (!(0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollRight) {
+                    stopInterval();
+                    return;
+                }
+                const nextFrame = (0, timeline_scroll_logic_1.getFrameWhileScrollingRight)({
+                    durationInFrames: videoConfig.durationInFrames,
+                    width,
+                });
+                const scrollPos = (0, timeline_scroll_logic_1.getScrollPositionForCursorOnRightEdge)({
+                    nextFrame,
+                    durationInFrames: videoConfig.durationInFrames,
+                });
+                (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(nextFrame);
+                seek(nextFrame);
+                (0, timeline_scroll_logic_1.scrollToTimelineXOffset)(scrollPos);
+            };
+            scrollEvery();
+            scroller.current = setInterval(() => {
+                scrollEvery();
+            }, 100);
+        }
+        else {
+            stopInterval();
+            seek(frame);
+        }
+    }, [videoConfig, dragging.dragging, left, width, seek]);
+    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 onPointerUpScrubbing = (0, react_1.useCallback)((e) => {
+        stopInterval();
+        if (!videoConfig) {
+            return;
+        }
+        if (!dragging.dragging) {
+            return;
+        }
+        setDragging({
+            dragging: false,
+        });
+        const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
+            clientX: getClientXWithScroll(e.clientX) - left,
+            durationInFrames: videoConfig.durationInFrames,
+            width,
+            extrapolate: 'clamp',
+        });
+        remotion_1.Internals.persistCurrentFrame(frame, videoConfig.id);
+        setFrame((c) => ({ ...c, [videoConfig.id]: frame }));
+        if (dragging.wasPlaying) {
+            play();
+        }
+    }, [dragging, left, play, videoConfig, setFrame, width]);
+    const onPointerUpInOut = (0, react_1.useCallback)((e) => {
+        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 (!dragging.dragging) {
+            return;
+        }
+        window.addEventListener('pointermove', onPointerMoveScrubbing);
+        window.addEventListener('pointerup', onPointerUpScrubbing);
+        return () => {
+            window.removeEventListener('pointermove', onPointerMoveScrubbing);
+            window.removeEventListener('pointerup', onPointerUpScrubbing);
+        };
+    }, [dragging.dragging, onPointerMoveScrubbing, onPointerUpScrubbing]);
+    (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 ((0, jsx_runtime_1.jsxs)("div", { style: style, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: inContextMenu, children: (0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: outContextMenu, children: (0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
+};

package/dist/components/Timeline/TimelineEyeToggler.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const inMarkerAreaRef: React.RefObject<HTMLDivElement>;
+export declare const outMarkerAreaRef: React.RefObject<HTMLDivElement>;
+export declare const TimelineInOutPointer: React.FC;

package/dist/components/Timeline/TimelineInOutPointer.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineInOutPointer = exports.outMarkerAreaRef = exports.inMarkerAreaRef = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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 TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const areaHighlight = {
+    position: 'absolute',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    height: '100%',
+    bottom: 0,
+    top: 0,
+};
+exports.inMarkerAreaRef = (0, react_1.createRef)();
+exports.outMarkerAreaRef = (0, react_1.createRef)();
+const TimelineInOutPointer = () => {
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    if (!videoConfig || timelineWidth === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [inFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.inMarkerAreaRef, style: {
+                    ...areaHighlight,
+                    left: 0,
+                    width: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(inFrame, videoConfig.durationInFrames, timelineWidth),
+                } })), outFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.outMarkerAreaRef, style: {
+                    ...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),
+                } }))] }));
+};
+exports.TimelineInOutPointer = TimelineInOutPointer;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const inPointerHandle: React.RefObject<HTMLDivElement>;
+export declare const outPointerHandle: React.RefObject<HTMLDivElement>;
+type Props = {
+    dragging: boolean;
+    type: 'in' | 'out';
+    atFrame: number;
+};
+export declare const TimelineInOutPointerHandle: React.FC<Props>;
+export {};

package/dist/components/Timeline/TimelineInOutPointerHandle.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineInOutPointerHandle = exports.outPointerHandle = exports.inPointerHandle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const line = {
+    height: '100%',
+    width: 1,
+    position: 'absolute',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    cursor: 'ew-resize',
+    paddingLeft: 1,
+    paddingRight: 1,
+};
+exports.inPointerHandle = (0, react_1.createRef)();
+exports.outPointerHandle = (0, react_1.createRef)();
+const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, type }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...line,
+            backgroundColor: dragging
+                ? 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)`,
+        };
+    }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
+};
+const TimelineInOutPointerHandle = ({ dragging, 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 ((0, jsx_runtime_1.jsx)(InnerTimelineInOutPointerHandle, { atFrame: atFrame, dragging: dragging, timelineWidth: timelineWidth, type: type }));
+};
+exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const TimelineLayerEye: React.FC<{
+    onInvoked: (type: 'enable' | 'disable') => void;
+    hidden: boolean;
+    type: 'eye' | 'speaker';
+}>;

package/dist/components/Timeline/TimelineLayerEye.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineLayerEye = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const eyeIcon = {
+    width: 12,
+    color: 'currentColor',
+    pointerEvents: 'none',
+};
+const speakerIcon = {
+    ...eyeIcon,
+    height: 10,
+    marginLeft: -1,
+};
+const container = {
+    height: 16,
+    width: 16,
+    borderRadius: 2,
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 6,
+};
+let layerPointedDown = null;
+const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
+    const renderAction = (0, react_1.useCallback)((color) => {
+        if (hidden) {
+            return null;
+        }
+        if (type === 'speaker') {
+            return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 10 14", fill: "none", style: speakerIcon, children: (0, jsx_runtime_1.jsx)("path", { d: "M9.40938 0.0869018C9.76875 0.249402 10 0.605652 10 0.999402V12.9994C10 13.3932 9.76875 13.7494 9.40938 13.9119C9.05 14.0744 8.62813 14.0088 8.33438 13.7463L4.11875 9.9994H2C0.896875 9.9994 0 9.10253 0 7.9994V5.9994C0 4.89628 0.896875 3.9994 2 3.9994H4.11875L8.33438 0.252527C8.62813 -0.0099732 9.05 -0.0724732 9.40938 0.0869018Z", fill: color }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)("svg", { style: eyeIcon, viewBox: "0 0 24 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M24 7.551C24 7.551 19.748 16 12.015 16C4.835 16 0 7.551 0 7.551C0 7.551 4.446 0 12.015 0C19.709 0 24 7.551 24 7.551ZM17 8C17 5.243 14.757 3 12 3C9.243 3 7 5.243 7 8C7 10.757 9.243 13 12 13C14.757 13 17 10.757 17 8Z", fill: color }) }));
+    }, [hidden, type]);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        layerPointedDown = hidden ? 'enable' : 'disable';
+        onInvoked(layerPointedDown);
+        window.addEventListener('pointerup', () => {
+            layerPointedDown = null;
+        }, { once: true });
+    }, [hidden, onInvoked]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        if (layerPointedDown) {
+            onInvoked(layerPointedDown);
+        }
+    }, [onInvoked]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
+};
+exports.TimelineLayerEye = TimelineLayerEye;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineList: React.FC<{
+    timeline: TrackWithHash[];
+}>;

package/dist/components/Timeline/TimelineList.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const TimelineListItem_1 = require("./TimelineListItem");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const container = {
+    flex: 1,
+    background: colors_1.BACKGROUND,
+};
+const TimelineList = ({ timeline }) => {
+    const ref = (0, react_1.useRef)(null);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        shouldApplyCssTransforms: false,
+        triggerOnWindowResize: false,
+    });
+    const isCompact = size ? size.width < 250 : false;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: container, children: [(0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
+                return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TimelineListItem_1.TimelineListItem, { nestedDepth: track.depth, sequence: track.sequence, isCompact: isCompact }, track.sequence.id) }, track.sequence.id));
+            })] }));
+};
+exports.TimelineList = TimelineList;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TSequence } from 'remotion';
+export declare const TimelineListItem: React.FC<{
+    sequence: TSequence;
+    nestedDepth: number;
+    isCompact: boolean;
+}>;