@remotion/studio
Version:
APIs for interacting with the Remotion Studio
116 lines (115 loc) • 4.59 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.QuickSwitcherResult = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../../helpers/colors");
const use_keybinding_1 = require("../../helpers/use-keybinding");
const still_1 = require("../../icons/still");
const video_1 = require("../../icons/video");
const layout_1 = require("../layout");
const container = {
paddingLeft: 16,
paddingRight: 16,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
cursor: 'pointer',
};
const label = {
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
};
const searchLabel = {
...label,
lineHeight: 1.25,
};
const iconStyle = {
width: 14,
height: 14,
};
const labelContainer = {
overflow: 'hidden',
flex: 1,
paddingTop: 5,
paddingBottom: 5,
};
const QuickSwitcherResult = ({ result, selected }) => {
const [hovered, setIsHovered] = (0, react_1.useState)(false);
const ref = (0, react_1.useRef)(null);
const keybindings = (0, use_keybinding_1.useKeybinding)();
(0, react_1.useEffect)(() => {
const { current } = ref;
if (!current) {
return;
}
const onMouseEnter = () => setIsHovered(true);
const onMouseLeave = () => setIsHovered(false);
current.addEventListener('mouseenter', onMouseEnter);
current.addEventListener('mouseleave', onMouseLeave);
return () => {
current.removeEventListener('mouseenter', onMouseEnter);
current.removeEventListener('mouseleave', onMouseLeave);
};
}, []);
(0, react_1.useEffect)(() => {
if (!selected) {
return;
}
const binding = keybindings.registerKeybinding({
key: 'Enter',
callback: result.onSelected,
commandCtrlKey: false,
event: 'keydown',
preventDefault: true,
// Input will be focused while selection
triggerIfInputFieldFocused: true,
keepRegisteredWhenNotHighestContext: false,
});
return () => {
binding.unregister();
};
}, [keybindings, result.onSelected, selected]);
(0, react_1.useEffect)(() => {
var _a;
if (selected) {
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
block: 'nearest',
inline: 'center',
});
}
}, [selected]);
const style = (0, react_1.useMemo)(() => {
return {
...container,
backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
hovered,
selected,
}),
};
}, [hovered, selected]);
const labelStyle = (0, react_1.useMemo)(() => {
return {
...(result.type === 'search-result' ? searchLabel : label),
color: result.type === 'search-result'
? colors_1.LIGHT_TEXT
: selected || hovered
? 'white'
: colors_1.LIGHT_TEXT,
fontSize: 15,
};
}, [hovered, result.type, selected]);
return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx("div", {
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML: {
__html: result.titleLine,
}, style: labelStyle }), jsx_runtime_1.jsx("div", {
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML: {
__html: result.subtitleLine,
}, style: labelStyle })
] })) : (jsx_runtime_1.jsx("div", { style: labelStyle, children: result.title })) })
] }, result.id));
};
exports.QuickSwitcherResult = QuickSwitcherResult;