init commit

remotion/node_modules/@remotion/studio/dist/components/InitialCompositionLoader.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialCompositionLoader = exports.useSelectComposition = exports.useSelectAsset = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_static_files_1 = require("../api/get-static-files");
+const mobile_layout_1 = require("../helpers/mobile-layout");
+const url_state_1 = require("../helpers/url-state");
+const folders_1 = require("../state/folders");
+const sidebar_1 = require("../state/sidebar");
+const CompositionSelector_1 = require("./CompositionSelector");
+const ExplorerPanel_1 = require("./ExplorerPanel");
+const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
+const useSelectAsset = () => {
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const { setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    return (asset) => {
+        var _a;
+        setCanvasContent({ type: 'asset', asset });
+        (_a = ExplorerPanel_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectAssetsPanel();
+        setAssetFoldersExpanded((ex) => {
+            const split = asset.split('/');
+            const keysToExpand = split.map((_, i) => {
+                return split.slice(0, i).join('/');
+            });
+            const newState = {
+                ...ex,
+            };
+            for (const key of keysToExpand) {
+                newState[key] = true;
+            }
+            return newState;
+        });
+    };
+};
+exports.useSelectAsset = useSelectAsset;
+const useSelectComposition = () => {
+    const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    return (0, react_1.useCallback)((c, push) => {
+        var _a;
+        if (push) {
+            (0, url_state_1.pushUrl)(`/${c.id}`);
+        }
+        (_a = ExplorerPanel_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectCompositionPanel();
+        setCanvasContent({ type: 'composition', compositionId: c.id });
+        const { folderName, parentFolderName } = c;
+        if (folderName !== null) {
+            setCompositionFoldersExpanded((ex) => {
+                const keysToExpand = (0, CompositionSelector_1.getKeysToExpand)(folderName, parentFolderName);
+                const newState = {
+                    ...ex,
+                };
+                for (const key of keysToExpand) {
+                    newState[key] = true;
+                }
+                return newState;
+            });
+            if (isMobileLayout) {
+                setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
+            }
+        }
+    }, [
+        isMobileLayout,
+        setCanvasContent,
+        setCompositionFoldersExpanded,
+        setSidebarCollapsedState,
+    ]);
+};
+exports.useSelectComposition = useSelectComposition;
+const InitialCompositionLoader = () => {
+    const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const selectComposition = (0, exports.useSelectComposition)();
+    const selectAsset = (0, exports.useSelectAsset)();
+    (0, react_1.useEffect)(() => {
+        if (canvasContent) {
+            return;
+        }
+        const canvasContentFromUrl = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();
+        if (canvasContentFromUrl && canvasContentFromUrl.type === 'composition') {
+            const exists = compositions.find((c) => c.id === canvasContentFromUrl.compositionId);
+            if (exists) {
+                selectComposition(exists, false);
+            }
+            return;
+        }
+        if (canvasContentFromUrl && canvasContentFromUrl.type === 'asset') {
+            selectAsset(canvasContentFromUrl.asset);
+            return;
+        }
+        if (canvasContentFromUrl && canvasContentFromUrl.type === 'output') {
+            setCanvasContent(canvasContentFromUrl);
+            return;
+        }
+        if (compositions.length > 0) {
+            selectComposition(compositions[0], true);
+        }
+    }, [
+        compositions,
+        canvasContent,
+        selectComposition,
+        setCanvasContent,
+        selectAsset,
+    ]);
+    (0, react_1.useEffect)(() => {
+        const onchange = () => {
+            const newCanvas = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();
+            if (newCanvas && newCanvas.type === 'composition') {
+                const newComp = (0, url_state_1.getRoute)().substring(1);
+                const exists = compositions.find((c) => c.id === newComp);
+                if (exists) {
+                    selectComposition(exists, false);
+                }
+                return;
+            }
+            if (newCanvas && newCanvas.type === 'asset') {
+                const staticFiles = (0, get_static_files_1.getStaticFiles)();
+                const exists = staticFiles.find((file) => {
+                    return file.name === newCanvas.asset;
+                });
+                if (exists) {
+                    setCanvasContent(newCanvas);
+                }
+                return;
+            }
+            setCanvasContent(newCanvas);
+        };
+        window.addEventListener('popstate', onchange);
+        return () => window.removeEventListener('popstate', onchange);
+    }, [compositions, selectComposition, setCanvasContent]);
+    return null;
+};
+exports.InitialCompositionLoader = InitialCompositionLoader;