@remotion/studio
Version:
APIs for interacting with the Remotion Studio
187 lines (186 loc) • 8.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CompositionSelectorItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../helpers/colors");
const is_composition_still_1 = require("../helpers/is-composition-still");
const folder_1 = require("../icons/folder");
const still_1 = require("../icons/still");
const video_1 = require("../icons/video");
const modals_1 = require("../state/modals");
const CompositionContextButton_1 = require("./CompositionContextButton");
const ContextMenu_1 = require("./ContextMenu");
const layout_1 = require("./layout");
const NotificationCenter_1 = require("./Notifications/NotificationCenter");
const SidebarRenderButton_1 = require("./SidebarRenderButton");
const COMPOSITION_ITEM_HEIGHT = 32;
const itemStyle = {
paddingRight: 10,
paddingTop: 6,
paddingBottom: 6,
fontSize: 13,
display: 'flex',
textDecoration: 'none',
cursor: 'default',
alignItems: 'center',
marginBottom: 1,
appearance: 'none',
border: 'none',
width: '100%',
textAlign: 'left',
backgroundColor: colors_1.BACKGROUND,
height: COMPOSITION_ITEM_HEIGHT,
userSelect: 'none',
};
const labelStyle = {
textAlign: 'left',
textDecoration: 'none',
fontSize: 13,
flex: 1,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
};
const iconStyle = {
width: 18,
height: 18,
flexShrink: 0,
};
const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, selectComposition, toggleFolder, }) => {
const selected = (0, react_1.useMemo)(() => {
if (item.type === 'composition') {
return currentComposition === item.composition.id;
}
return false;
}, [item, currentComposition]);
const [hovered, setHovered] = (0, react_1.useState)(false);
const onPointerEnter = (0, react_1.useCallback)(() => {
setHovered(true);
}, []);
const onPointerLeave = (0, react_1.useCallback)(() => {
setHovered(false);
}, []);
const style = (0, react_1.useMemo)(() => {
return {
...itemStyle,
backgroundColor: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected }),
paddingLeft: 12 + level * 8,
};
}, [hovered, level, selected]);
const label = (0, react_1.useMemo)(() => {
return {
...labelStyle,
color: selected || hovered ? 'white' : colors_1.LIGHT_TEXT,
};
}, [hovered, selected]);
const onClick = (0, react_1.useCallback)((evt) => {
evt.preventDefault();
if (item.type === 'composition') {
selectComposition(item.composition, true);
}
else {
toggleFolder(item.folderName, item.parentName);
}
}, [item, selectComposition, toggleFolder]);
const onKeyPress = (0, react_1.useCallback)((evt) => {
if (evt.key === 'Enter') {
onClick(evt);
}
}, [onClick]);
const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
const contextMenu = (0, react_1.useMemo)(() => {
if (item.type === 'composition') {
return [
{
id: 'duplicate',
keyHint: null,
label: `Duplicate...`,
leftItem: null,
onClick: () => {
setSelectedModal({
type: 'duplicate-comp',
compositionId: item.composition.id,
compositionType: item.composition.durationInFrames === 1
? 'still'
: 'composition',
});
},
quickSwitcherLabel: null,
subMenu: null,
type: 'item',
value: 'duplicate',
},
{
id: 'rename',
keyHint: null,
label: `Rename...`,
leftItem: null,
onClick: () => {
setSelectedModal({
type: 'rename-comp',
compositionId: item.composition.id,
});
},
quickSwitcherLabel: null,
subMenu: null,
type: 'item',
value: 'rename',
},
{
id: 'delete',
keyHint: null,
label: `Delete...`,
leftItem: null,
onClick: () => {
setSelectedModal({
type: 'delete-comp',
compositionId: item.composition.id,
});
},
quickSwitcherLabel: null,
subMenu: null,
type: 'item',
value: 'delete',
},
{
type: 'divider',
id: 'copy-id-divider',
},
{
id: 'copy-id',
keyHint: null,
label: `Copy ID`,
leftItem: null,
onClick: () => {
navigator.clipboard
.writeText(item.composition.id)
.catch((err) => {
(0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
})
.then(() => {
(0, NotificationCenter_1.showNotification)('Copied to clipboard', 1000);
});
},
quickSwitcherLabel: null,
subMenu: null,
type: 'item',
value: 'remove',
},
];
}
return [];
}, [item, setSelectedModal]);
if (item.type === 'folder') {
return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsxs("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName })
] }), item.expanded
? item.items.map((childItem) => {
return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder }, childItem.key + childItem.type));
})
: null] }));
}
return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
] }) }) }));
};
exports.CompositionSelectorItem = CompositionSelectorItem;