remotion/dist/cjs/CompositionManagerProvider.js

Make videos programmatically

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CompositionManagerProvider = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const CompositionManager_1 = require("./CompositionManager");
const CompositionManagerContext_1 = require("./CompositionManagerContext");
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.useEffect : react_1.useLayoutEffect;
const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCompositionMetadata, initialCompositions, initialCanvasContent, }) => {
    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
    const [compositionManagerId] = (0, react_1.useState)(() => String(Math.random()));
    const committedOrderRef = (0, react_1.useRef)(null);
    const committedOrderIdsRef = (0, react_1.useRef)(null);
    const internalOrderRef = (0, react_1.useRef)(new Map(initialCompositions.map((composition, index) => [
        (0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
            type: 'composition',
            id: composition.id,
        }),
        index,
    ])));
    const nextInternalOrderRef = (0, react_1.useRef)(initialCompositions.length);
    const [folders, setFolders] = (0, react_1.useState)([]);
    const [canvasContent, setCanvasContent] = (0, react_1.useState)(initialCanvasContent);
    const [currentAssetMetadata, setCurrentAssetMetadata] = (0, react_1.useState)(null);
    const [compositions, setCompositions] = (0, react_1.useState)(() => initialCompositions.map((composition, order) => ({ ...composition, order })));
    // CompositionManagerProvider state
    const currentcompositionsRef = (0, react_1.useRef)(compositions);
    const updateCompositions = (0, react_1.useCallback)((updateComps) => {
        setCompositions((comps) => {
            const updated = updateComps(comps);
            currentcompositionsRef.current = updated;
            return updated;
        });
    }, []);
    const registerComposition = (0, react_1.useCallback)((comp) => {
        const orderKey = (0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
            type: 'composition',
            id: comp.id,
        });
        const internalOrder = nextInternalOrderRef.current++;
        internalOrderRef.current.set(orderKey, internalOrder);
        updateCompositions((comps) => {
            var _a;
            var _b;
            if (comps.find((c) => c.id === comp.id)) {
                throw new Error(`Multiple composition with id ${comp.id} are registered.`);
            }
            return [
                ...comps,
                {
                    ...comp,
                    order: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(orderKey)) !== null && _b !== void 0 ? _b : internalOrder,
                },
            ];
        });
    }, [updateCompositions]);
    const unregisterComposition = (0, react_1.useCallback)((id) => {
        internalOrderRef.current.delete((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({ type: 'composition', id }));
        setCompositions((comps) => {
            return comps.filter((c) => c.id !== id);
        });
    }, []);
    const registerFolder = (0, react_1.useCallback)((name, parent, stack) => {
        const orderKey = (0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
            type: 'folder',
            id: (0, sequence_order_marker_js_1.getFolderOrderId)({ name, parent }),
        });
        const internalOrder = nextInternalOrderRef.current++;
        internalOrderRef.current.set(orderKey, internalOrder);
        setFolders((prevFolders) => {
            var _a;
            var _b;
            return [
                ...prevFolders,
                {
                    name,
                    parent,
                    order: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(orderKey)) !== null && _b !== void 0 ? _b : internalOrder,
                    stack,
                },
            ];
        });
    }, []);
    const unregisterFolder = (0, react_1.useCallback)((name, parent) => {
        internalOrderRef.current.delete((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
            type: 'folder',
            id: (0, sequence_order_marker_js_1.getFolderOrderId)({ name, parent }),
        }));
        setFolders((prevFolders) => {
            return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
        });
    }, []);
    useIsomorphicLayoutEffect(() => {
        if (!isStudio) {
            return;
        }
        let unmounted = false;
        const onCommitOrder = (event) => {
            const { detail } = event;
            const managerOrder = detail.compositionManagers.find((item) => item.managerId === compositionManagerId);
            if (!managerOrder) {
                return;
            }
            const orderIds = managerOrder.compositionAndFolderOrder.map(sequence_order_marker_js_1.getCompositionAndFolderOrderKey);
            const previousOrder = committedOrderIdsRef.current;
            if (previousOrder !== null &&
                previousOrder.length === orderIds.length &&
                previousOrder.every((id, index) => id === orderIds[index])) {
                return;
            }
            const order = new Map(orderIds.map((id, index) => [id, index]));
            committedOrderIdsRef.current = orderIds;
            committedOrderRef.current = order;
            queueMicrotask(() => {
                if (unmounted) {
                    return;
                }
                updateCompositions((currentCompositions) => {
                    let changed = false;
                    const nextCompositions = currentCompositions.map((composition) => {
                        var _a, _b;
                        const nextOrder = (_b = (_a = order.get((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
                            type: 'composition',
                            id: composition.id,
                        }))) !== null && _a !== void 0 ? _a : internalOrderRef.current.get((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
                            type: 'composition',
                            id: composition.id,
                        }))) !== null && _b !== void 0 ? _b : composition.order;
                        if (nextOrder === composition.order) {
                            return composition;
                        }
                        changed = true;
                        return { ...composition, order: nextOrder };
                    });
                    return changed ? nextCompositions : currentCompositions;
                });
                setFolders((currentFolders) => {
                    let changed = false;
                    const nextFolders = currentFolders.map((folder) => {
                        var _a, _b;
                        const nextOrder = (_b = (_a = order.get((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
                            type: 'folder',
                            id: (0, sequence_order_marker_js_1.getFolderOrderId)(folder),
                        }))) !== null && _a !== void 0 ? _a : internalOrderRef.current.get((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
                            type: 'folder',
                            id: (0, sequence_order_marker_js_1.getFolderOrderId)(folder),
                        }))) !== null && _b !== void 0 ? _b : folder.order;
                        if (nextOrder === folder.order) {
                            return folder;
                        }
                        changed = true;
                        return { ...folder, order: nextOrder };
                    });
                    return changed ? nextFolders : currentFolders;
                });
            });
        };
        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);
        };
    }, [compositionManagerId, isStudio, updateCompositions]);
    (0, react_1.useImperativeHandle)(CompositionManager_1.compositionsRef, () => {
        return {
            getCompositions: () => currentcompositionsRef.current,
        };
    }, []);
    const compositionManagerSetters = (0, react_1.useMemo)(() => {
        return {
            registerComposition,
            unregisterComposition,
            registerFolder,
            unregisterFolder,
            setCanvasContent,
            setCurrentAssetMetadata,
            onlyRenderComposition,
        };
    }, [
        registerComposition,
        registerFolder,
        unregisterComposition,
        unregisterFolder,
        onlyRenderComposition,
    ]);
    const compositionManagerContextValue = (0, react_1.useMemo)(() => {
        return {
            compositions,
            folders,
            currentCompositionMetadata,
            currentAssetMetadata,
            canvasContent,
        };
    }, [
        compositions,
        folders,
        currentCompositionMetadata,
        currentAssetMetadata,
        canvasContent,
    ]);
    const providers = (jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }));
    return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.CompositionManagerOrderMarker, { managerId: compositionManagerId, children: providers })) : (providers);
};
exports.CompositionManagerProvider = CompositionManagerProvider;