init commit

remotion/node_modules/@remotion/studio/dist/components/Splitter/SplitterContainer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SplitterOrientation } from './SplitterContext';
+export declare const containerColumn: React.CSSProperties;
+export declare const SplitterContainer: React.FC<{
+    readonly orientation: SplitterOrientation;
+    readonly maxFlex: number;
+    readonly minFlex: number;
+    readonly id: string;
+    readonly defaultFlex: number;
+    readonly children: React.ReactNode;
+}>;

remotion/node_modules/@remotion/studio/dist/components/Splitter/SplitterContainer.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitterContainer = exports.containerColumn = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_1 = require("../../state/timeline");
+const SplitterContext_1 = require("./SplitterContext");
+const containerRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    flex: 1,
+    height: '100%',
+    width: '100%',
+};
+exports.containerColumn = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    height: 0,
+};
+const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
+    const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
+    const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
+    const ref = (0, react_1.useRef)(null);
+    const isDragging = (0, react_1.useRef)(false);
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            flexValue,
+            ref,
+            setFlexValue,
+            isDragging,
+            orientation,
+            id,
+            maxFlex,
+            minFlex,
+            defaultFlex,
+            persistFlex,
+        };
+    }, [
+        defaultFlex,
+        flexValue,
+        id,
+        maxFlex,
+        minFlex,
+        orientation,
+        persistFlex,
+        ref,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(SplitterContext_1.SplitterContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }));
+};
+exports.SplitterContainer = SplitterContainer;

remotion/node_modules/@remotion/studio/dist/components/Splitter/SplitterContext.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export type SplitterDragState = false | {
+    x: number;
+    y: number;
+};
+export type SplitterOrientation = 'horizontal' | 'vertical';
+export type TSplitterContext = {
+    flexValue: number;
+    setFlexValue: React.Dispatch<React.SetStateAction<number>>;
+    orientation: SplitterOrientation;
+    ref: React.RefObject<HTMLDivElement | null>;
+    maxFlex: number;
+    minFlex: number;
+    defaultFlex: number;
+    id: string;
+    persistFlex: (value: number) => void;
+    isDragging: React.MutableRefObject<false | {
+        x: number;
+        y: number;
+    }>;
+};
+export declare const SplitterContext: React.Context<TSplitterContext>;

remotion/node_modules/@remotion/studio/dist/components/Splitter/SplitterContext.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitterContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.SplitterContext = react_1.default.createContext({
+    flexValue: 1,
+    ref: { current: null },
+    setFlexValue: () => undefined,
+    isDragging: { current: false },
+    orientation: 'horizontal',
+    maxFlex: 1,
+    minFlex: 1,
+    defaultFlex: 1,
+    id: '--',
+    persistFlex: () => undefined,
+});

remotion/node_modules/@remotion/studio/dist/components/Splitter/SplitterElement.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const SplitterElement: React.FC<{
+    readonly type: 'flexer' | 'anti-flexer';
+    readonly children: React.ReactNode;
+    readonly sticky: React.ReactNode | null;
+}>;

remotion/node_modules/@remotion/studio/dist/components/Splitter/SplitterElement.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitterElement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const SplitterContext_1 = require("./SplitterContext");
+const SplitterElement = ({ children, type, sticky }) => {
+    const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            flex: 
+            // Multiply by 1000 because if flex values don't add up to at least 1, they will not fill up the screen
+            (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 1000,
+            display: 'flex',
+            position: 'relative',
+            overflow: 'hidden',
+            flexDirection: 'column',
+        };
+    }, [context.flexValue, type]);
+    const stickStyle = (0, react_1.useMemo)(() => {
+        return {
+            position: 'absolute',
+            left: (type === 'flexer' ? 0 : context.flexValue) * 100 + '%',
+            width: (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 100 +
+                '%',
+            backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], ['red', 'blue']),
+        };
+    }, [context.flexValue, type]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: style, children: children }), (0, jsx_runtime_1.jsx)("div", { style: stickStyle, children: sticky !== null && sticky !== void 0 ? sticky : null })] }));
+};
+exports.SplitterElement = SplitterElement;

remotion/node_modules/@remotion/studio/dist/components/Splitter/SplitterHandle.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const SPLITTER_HANDLE_SIZE = 3;
+export declare const SplitterHandle: React.FC<{
+    readonly allowToCollapse: 'right' | 'left' | 'none';
+    readonly onCollapse: () => void;
+}>;

remotion/node_modules/@remotion/studio/dist/components/Splitter/SplitterHandle.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitterHandle = exports.SPLITTER_HANDLE_SIZE = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const SplitterContext_1 = require("./SplitterContext");
+exports.SPLITTER_HANDLE_SIZE = 3;
+const containerRow = {
+    height: exports.SPLITTER_HANDLE_SIZE,
+};
+const containerColumn = {
+    width: exports.SPLITTER_HANDLE_SIZE,
+};
+const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
+    const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
+    if (!context) {
+        throw new Error('Cannot find splitter context');
+    }
+    const [lastPointerUp, setLastPointerUp] = (0, react_1.useState)(() => Date.now());
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (context.isDragging.current) {
+            return;
+        }
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const getNewValue = (e, clamp) => {
+            if (!context.isDragging.current) {
+                throw new Error('cannot get value if not dragging');
+            }
+            if (!context.ref.current) {
+                throw new Error('domRect is not mounted');
+            }
+            const { width, height } = context.ref.current.getBoundingClientRect();
+            const change = (() => {
+                if (context.orientation === 'vertical') {
+                    return ((e.clientX - context.isDragging.current.x) /
+                        (width - exports.SPLITTER_HANDLE_SIZE));
+                }
+                return ((e.clientY - context.isDragging.current.y) /
+                    (height - exports.SPLITTER_HANDLE_SIZE));
+            })();
+            const newFlex = context.flexValue + change;
+            if (clamp) {
+                return Math.min(context.maxFlex, Math.max(context.minFlex, newFlex));
+            }
+            return newFlex;
+        };
+        const onPointerDown = (e) => {
+            var _a;
+            if (e.button !== 0) {
+                return;
+            }
+            context.isDragging.current = {
+                x: e.clientX,
+                y: e.clientY,
+            };
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add('remotion-splitter-active');
+            window.addEventListener('pointerup', (ev) => {
+                if (!context.isDragging.current) {
+                    return;
+                }
+                context.persistFlex(getNewValue(ev, true));
+                cleanup();
+                setLastPointerUp(Date.now());
+            }, { once: true });
+            window.addEventListener('pointermove', onPointerMove);
+        };
+        const onPointerMove = (e) => {
+            if (context.isDragging.current) {
+                const val = getNewValue(e, true);
+                context.setFlexValue(val);
+                if (allowToCollapse === 'left') {
+                    const unclamped = getNewValue(e, false);
+                    if (unclamped < context.minFlex / 2) {
+                        cleanup();
+                        onCollapse();
+                        setLastPointerUp(Date.now());
+                    }
+                }
+                if (allowToCollapse === 'right') {
+                    const unclamped = 1 - getNewValue(e, false);
+                    if (unclamped < (1 - context.maxFlex) / 2) {
+                        cleanup();
+                        onCollapse();
+                        setLastPointerUp(Date.now());
+                    }
+                }
+            }
+        };
+        const cleanup = () => {
+            var _a;
+            context.isDragging.current = false;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove('remotion-splitter-active');
+            current.removeEventListener('pointerdown', onPointerDown);
+            window.removeEventListener('pointermove', onPointerMove);
+            player_1.PlayerInternals.updateAllElementsSizes();
+        };
+        current.addEventListener('pointerdown', onPointerDown);
+        return () => {
+            if (!context.isDragging.current) {
+                cleanup();
+            }
+        };
+    }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        let isMouseDown = false;
+        const onMouseDown = () => {
+            isMouseDown = true;
+        };
+        const onMouseUp = () => {
+            isMouseDown = false;
+        };
+        const onMouseEnter = (e) => {
+            if (e.button !== 0) {
+                return;
+            }
+            if (isMouseDown) {
+                return;
+            }
+            current.classList.add('remotion-splitter-hover');
+        };
+        const onMouseLeave = (e) => {
+            if (e.button !== 0) {
+                return;
+            }
+            current.classList.remove('remotion-splitter-hover');
+        };
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        window.addEventListener('mousedown', onMouseDown);
+        window.addEventListener('mouseup', onMouseUp);
+        return () => {
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+            window.removeEventListener('mousedown', onMouseDown);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: [
+            'remotion-splitter',
+            context.orientation === 'horizontal'
+                ? 'remotion-splitter-horizontal'
+                : 'remotion-splitter-vertical',
+        ].join(' '), style: context.orientation === 'horizontal' ? containerRow : containerColumn }));
+};
+exports.SplitterHandle = SplitterHandle;