remotion/dist/cjs/SequenceManager.js

Make videos programmatically

"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.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceRegistrationContext = exports.SequenceManagerRefContext = exports.SequenceManager = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const sequence_order_marker_js_1 = require("./sequence-order-marker.js");
const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.default.useEffect : react_1.default.useLayoutEffect;
exports.SequenceManager = react_1.default.createContext({
    registerSequence: () => {
        throw new Error('SequenceManagerContext not initialized');
    },
    updateSequence: null,
    unregisterSequence: () => {
        throw new Error('SequenceManagerContext not initialized');
    },
    sequences: [],
});
exports.SequenceManagerRefContext = react_1.default.createContext({
    current: [],
});
exports.SequenceRegistrationContext = react_1.default.createContext(false);
const makeSequencePropsSubscriptionKey = (key) => {
    return `${key.absolutePath}\0${key.nodePath.join('.')}\0${key.sequenceKeys.join('.')}\0${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
};
exports.makeSequencePropsSubscriptionKey = makeSequencePropsSubscriptionKey;
exports.VisualModePropStatusesContext = react_1.default.createContext({
    propStatuses: {},
});
exports.VisualModePropStatusesRefContext = react_1.default.createContext({
    current: {},
});
exports.VisualModeDragOverridesContext = react_1.default.createContext({
    getDragOverrides: () => {
        throw new Error('VisualModeDragOverridesContext not initialized');
    },
    getEffectDragOverrides: () => {
        throw new Error('VisualModeDragOverridesContext not initialized');
    },
});
exports.VisualModeSettersContext = react_1.default.createContext({
    setDragOverrides: () => {
        throw new Error('VisualModeSettersContext not initialized');
    },
    clearDragOverrides: () => {
        throw new Error('VisualModeSettersContext not initialized');
    },
    setEffectDragOverrides: () => {
        throw new Error('VisualModeSettersContext not initialized');
    },
    clearEffectDragOverrides: () => {
        throw new Error('VisualModeSettersContext not initialized');
    },
    setPropStatuses: () => {
        throw new Error('VisualModeSettersContext not initialized');
    },
    remapPropStatuses: () => {
        throw new Error('VisualModeSettersContext not initialized');
    },
});
const effectDragOverridesKey = (nodePath, effectIndex) => `${(0, exports.makeSequencePropsSubscriptionKey)(nodePath)}.effects.${effectIndex}`;
const SequenceManagerProvider = ({ children }) => {
    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
    const [sequenceManagerId] = (0, react_1.useState)(() => String(Math.random()));
    const committedOrderRef = (0, react_1.useRef)(null);
    const committedOrderIdsRef = (0, react_1.useRef)(null);
    const [sequences, setSequences] = (0, react_1.useState)([]);
    const sequencesRef = (0, react_1.useRef)(sequences);
    sequencesRef.current = sequences;
    const [dragOverrides, setControlOverrides] = (0, react_1.useState)({});
    const controlOverridesRef = (0, react_1.useRef)(dragOverrides);
    controlOverridesRef.current = dragOverrides;
    const [effectDragOverridesState, setEffectDragOverridesState] = (0, react_1.useState)({});
    const [propStatuses, setPropStatusesMapState] = (0, react_1.useState)({});
    const propStatusesRef = (0, react_1.useRef)(propStatuses);
    propStatusesRef.current = propStatuses;
    const setDragOverrides = (0, react_1.useCallback)((nodePath, key, value) => {
        setControlOverrides((prev) => ({
            ...prev,
            [(0, exports.makeSequencePropsSubscriptionKey)(nodePath)]: {
                ...prev[(0, exports.makeSequencePropsSubscriptionKey)(nodePath)],
                [key]: value,
            },
        }));
    }, []);
    const clearDragOverrides = (0, react_1.useCallback)((nodePath) => {
        setControlOverrides((prev) => {
            const key = (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
            if (!prev[key]) {
                return prev;
            }
            const next = { ...prev };
            delete next[key];
            return next;
        });
    }, []);
    const setEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex, key, value) => {
        setEffectDragOverridesState((prev) => {
            const mapKey = effectDragOverridesKey(nodePath, effectIndex);
            return {
                ...prev,
                [mapKey]: {
                    ...prev[mapKey],
                    [key]: value,
                },
            };
        });
    }, []);
    const clearEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex) => {
        setEffectDragOverridesState((prev) => {
            const mapKey = effectDragOverridesKey(nodePath, effectIndex);
            if (!prev[mapKey]) {
                return prev;
            }
            const next = { ...prev };
            delete next[mapKey];
            return next;
        });
    }, []);
    const setPropStatuses = (0, react_1.useCallback)((nodePath, values) => {
        setPropStatusesMapState((prev) => {
            const key = (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
            const prevKey = prev[key];
            const newKey = values(prevKey);
            if (prevKey === newKey) {
                return prev;
            }
            return { ...prev, [key]: newKey };
        });
    }, []);
    const remapPropStatuses = (0, react_1.useCallback)((remappings) => {
        setPropStatusesMapState((prev) => {
            const next = { ...prev };
            for (const remapping of remappings) {
                delete next[(0, exports.makeSequencePropsSubscriptionKey)(remapping.previousNodePath)];
            }
            for (const remapping of remappings) {
                if (remapping.nodePath !== null && remapping.result !== null) {
                    next[(0, exports.makeSequencePropsSubscriptionKey)(remapping.nodePath)] =
                        remapping.result;
                }
            }
            return next;
        });
    }, []);
    useIsomorphicLayoutEffect(() => {
        if (!isStudio) {
            return;
        }
        let unmounted = false;
        const onCommitOrder = (event) => {
            const { detail } = event;
            const managerOrder = detail.sequenceManagers.find((item) => item.managerId === sequenceManagerId);
            if (!managerOrder) {
                return;
            }
            const previousOrder = committedOrderIdsRef.current;
            if (previousOrder !== null &&
                previousOrder.length === managerOrder.sequenceIds.length &&
                previousOrder.every((sequenceId, index) => sequenceId === managerOrder.sequenceIds[index])) {
                return;
            }
            const order = new Map(managerOrder.sequenceIds.map((sequenceId, index) => [
                sequenceId,
                index,
            ]));
            committedOrderIdsRef.current = managerOrder.sequenceIds;
            committedOrderRef.current = order;
            queueMicrotask(() => {
                if (unmounted) {
                    return;
                }
                setSequences((currentSequences) => {
                    let changed = false;
                    const nextSequences = currentSequences.map((sequence) => {
                        var _a;
                        const timelineOrder = (_a = order.get(sequence.id)) !== null && _a !== void 0 ? _a : null;
                        if (sequence.timelineOrder === timelineOrder) {
                            return sequence;
                        }
                        changed = true;
                        return { ...sequence, timelineOrder };
                    });
                    return changed ? nextSequences : currentSequences;
                });
            });
        };
        window.addEventListener(sequence_order_marker_js_1.COMMIT_ORDER_EVENT, onCommitOrder);
        return () => {
            unmounted = true;
            window.removeEventListener(sequence_order_marker_js_1.COMMIT_ORDER_EVENT, onCommitOrder);
        };
    }, [isStudio, sequenceManagerId]);
    const registerSequence = (0, react_1.useCallback)((seq) => {
        setSequences((seqs) => {
            var _a;
            var _b;
            return [
                ...seqs,
                {
                    ...seq,
                    timelineOrder: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(seq.id)) !== null && _b !== void 0 ? _b : null,
                },
            ];
        });
    }, []);
    const updateSequence = (0, react_1.useCallback)((seq) => {
        setSequences((seqs) => {
            var _a;
            var _b;
            const index = seqs.findIndex((item) => item.id === seq.id);
            if (index === -1) {
                return seqs;
            }
            const next = [...seqs];
            next[index] = {
                ...seq,
                timelineOrder: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(seq.id)) !== null && _b !== void 0 ? _b : null,
            };
            return next;
        });
    }, []);
    const unregisterSequence = (0, react_1.useCallback)((seq) => {
        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
    }, []);
    const sequenceContext = (0, react_1.useMemo)(() => {
        return {
            registerSequence,
            sequences,
            updateSequence,
            unregisterSequence,
        };
    }, [registerSequence, sequences, unregisterSequence, updateSequence]);
    const getDragOverrides = (0, react_1.useCallback)((nodePath) => {
        var _a;
        return (_a = dragOverrides[(0, exports.makeSequencePropsSubscriptionKey)(nodePath)]) !== null && _a !== void 0 ? _a : {};
    }, [dragOverrides]);
    const getEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex) => {
        var _a;
        return ((_a = effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)]) !== null && _a !== void 0 ? _a : {});
    }, [effectDragOverridesState]);
    const propStatusesContext = (0, react_1.useMemo)(() => {
        return {
            propStatuses,
        };
    }, [propStatuses]);
    const dragOverridesContext = (0, react_1.useMemo)(() => {
        return {
            getDragOverrides,
            getEffectDragOverrides,
        };
    }, [getDragOverrides, getEffectDragOverrides]);
    const settersContext = (0, react_1.useMemo)(() => {
        return {
            setDragOverrides,
            clearDragOverrides,
            setEffectDragOverrides,
            clearEffectDragOverrides,
            setPropStatuses,
            remapPropStatuses,
        };
    }, [
        setDragOverrides,
        clearDragOverrides,
        setEffectDragOverrides,
        clearEffectDragOverrides,
        setPropStatuses,
        remapPropStatuses,
    ]);
    const providers = (jsx_runtime_1.jsx(exports.SequenceManagerRefContext.Provider, { value: sequencesRef, children: jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesRefContext.Provider, { value: propStatusesRef, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesContext.Provider, { value: propStatusesContext, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }) }) }));
    return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceManagerOrderMarker, { managerId: sequenceManagerId, children: providers })) : (providers);
};
exports.SequenceManagerProvider = SequenceManagerProvider;