@remotion/studio
Version:
APIs for interacting with the Remotion Studio
138 lines (137 loc) • 6.88 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CompositionSelector = exports.getKeysToExpand = exports.useCompositionNavigation = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
const colors_1 = require("../helpers/colors");
const create_folder_tree_1 = require("../helpers/create-folder-tree");
const persist_open_folders_1 = require("../helpers/persist-open-folders");
const sort_by_nonce_history_1 = require("../helpers/sort-by-nonce-history");
const use_keybinding_1 = require("../helpers/use-keybinding");
const modals_1 = require("../state/modals");
const z_index_1 = require("../state/z-index");
const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
const CurrentComposition_1 = require("./CurrentComposition");
const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
const useCompositionNavigation = () => {
const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
const navigateToNextComposition = (0, react_1.useCallback)(() => {
if (!canvasContent ||
canvasContent.type !== 'composition' ||
compositions.length <= 1) {
return;
}
const currentIndex = compositions.findIndex((c) => c.id === canvasContent.compositionId);
if (currentIndex === -1) {
return;
}
const nextIndex = (currentIndex + 1) % compositions.length;
const nextComposition = compositions[nextIndex];
selectComposition(nextComposition, true);
}, [canvasContent, compositions, selectComposition]);
const navigateToPreviousComposition = (0, react_1.useCallback)(() => {
if (!canvasContent ||
canvasContent.type !== 'composition' ||
compositions.length <= 1) {
return;
}
const currentIndex = compositions.findIndex((c) => c.id === canvasContent.compositionId);
if (currentIndex === -1) {
return;
}
const previousIndex = (currentIndex - 1 + compositions.length) % compositions.length;
const previousComposition = compositions[previousIndex];
selectComposition(previousComposition, true);
}, [canvasContent, compositions, selectComposition]);
return (0, react_1.useMemo)(() => ({
navigateToNextComposition,
navigateToPreviousComposition,
}), [navigateToNextComposition, navigateToPreviousComposition]);
};
exports.useCompositionNavigation = useCompositionNavigation;
const container = {
display: 'flex',
flexDirection: 'column',
flex: 1,
overflow: 'hidden',
backgroundColor: colors_1.BACKGROUND,
};
const QUICK_SWITCHER_TRIGGER_HEIGHT = 38;
const quickSwitcherArea = {
padding: '4px 12px',
borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
};
const quickSwitcherTrigger = {
backgroundColor: 'rgba(255, 255, 255, 0.06)',
borderRadius: 5,
padding: '4px 10px',
color: colors_1.LIGHT_TEXT,
fontSize: 12,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
border: 'none',
width: '100%',
appearance: 'none',
};
const shortcutLabel = {
fontSize: 11,
opacity: 0.6,
};
const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
initial.push((0, persist_open_folders_1.openFolderKey)({
folderName: initialFolderName,
parentName: parentFolderName,
}));
const { name, parent } = (0, create_folder_tree_1.splitParentIntoNameAndParent)(parentFolderName);
if (!name) {
return initial;
}
return (0, exports.getKeysToExpand)(name, parent, initial);
};
exports.getKeysToExpand = getKeysToExpand;
const CompositionSelector = () => {
const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
const { foldersExpanded } = (0, react_1.useContext)(persist_open_folders_1.ExpandedFoldersContext);
const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
const { tabIndex } = (0, z_index_1.useZIndex)();
const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
const sortedCompositions = (0, react_1.useMemo)(() => {
return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(compositions);
}, [compositions]);
const sortedFolders = (0, react_1.useMemo)(() => {
return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(folders);
}, [folders]);
const items = (0, react_1.useMemo)(() => {
return (0, create_folder_tree_1.createFolderTree)(sortedCompositions, sortedFolders, foldersExpanded);
}, [sortedCompositions, sortedFolders, foldersExpanded]);
const list = (0, react_1.useMemo)(() => {
return {
height: `calc(100% - ${CurrentComposition_1.CURRENT_COMPOSITION_HEIGHT}px - ${QUICK_SWITCHER_TRIGGER_HEIGHT}px)`,
overflowY: 'auto',
};
}, []);
const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
var _a;
(_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.toggleFolder(folderName, parentName);
}, []);
const openQuickSwitcher = (0, react_1.useCallback)(() => {
setSelectedModal({
type: 'quick-switcher',
mode: 'compositions',
invocationTimestamp: Date.now(),
});
}, [setSelectedModal]);
return (jsx_runtime_1.jsxs("div", { style: container, children: [
jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}), jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] }))] }) }), jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
? canvasContent.compositionId
: null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
}) })
] }));
};
exports.CompositionSelector = CompositionSelector;