@remotion/studio
Version:
APIs for interacting with the Remotion Studio
95 lines (94 loc) • 5.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderQueueItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const colors_1 = require("../../helpers/colors");
const url_state_1 = require("../../helpers/url-state");
const layout_1 = require("../layout");
const RenderQueueCopyToClipboard_1 = require("./RenderQueueCopyToClipboard");
const RenderQueueError_1 = require("./RenderQueueError");
const RenderQueueItemCancelButton_1 = require("./RenderQueueItemCancelButton");
const RenderQueueItemStatus_1 = require("./RenderQueueItemStatus");
const RenderQueueOpenInFolder_1 = require("./RenderQueueOpenInFolder");
const RenderQueueOutputName_1 = require("./RenderQueueOutputName");
const RenderQueueProgressMessage_1 = require("./RenderQueueProgressMessage");
const RenderQueueRemoveItem_1 = require("./RenderQueueRemoveItem");
const RenderQueueRepeat_1 = require("./RenderQueueRepeat");
const container = {
padding: 12,
display: 'flex',
flexDirection: 'row',
paddingBottom: 10,
paddingRight: 4,
};
const title = {
fontSize: 13,
lineHeight: 1,
};
const right = {
flex: 1,
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
};
const subtitle = {
maxWidth: '100%',
flex: 1,
display: 'flex',
overflow: 'hidden',
};
const SELECTED_CLASSNAME = '__remotion_selected_classname';
const RenderQueueItem = ({ job, selected }) => {
const [hovered, setHovered] = (0, react_1.useState)(false);
const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
const onPointerEnter = (0, react_1.useCallback)(() => {
setHovered(true);
}, []);
const onPointerLeave = (0, react_1.useCallback)(() => {
setHovered(false);
}, []);
const isHoverable = job.status === 'done';
const containerStyle = (0, react_1.useMemo)(() => {
return {
...container,
backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
hovered: isHoverable && hovered && job.type !== 'sequence',
selected,
}),
userSelect: 'none',
WebkitUserSelect: 'none',
};
}, [hovered, isHoverable, job.type, selected]);
const scrollCurrentIntoView = (0, react_1.useCallback)(() => {
var _a;
(_a = document
.querySelector(`.${SELECTED_CLASSNAME}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
}, []);
const onClick = (0, react_1.useCallback)(() => {
if (job.status !== 'done') {
return;
}
// Cannot show folders
if (job.type === 'sequence') {
return;
}
setCanvasContent((c) => {
const isAlreadySelected = c && c.type === 'output' && c.path === `/${job.outName}`;
if (isAlreadySelected && !selected) {
scrollCurrentIntoView();
return c;
}
return { type: 'output', path: `/${job.outName}` };
});
(0, url_state_1.pushUrl)(`/outputs/${job.outName}`);
}, [job, scrollCurrentIntoView, selected, setCanvasContent]);
(0, react_1.useEffect)(() => {
if (selected) {
scrollCurrentIntoView();
}
}, [scrollCurrentIntoView, selected]);
return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, className: selected ? SELECTED_CLASSNAME : undefined, children: [(0, jsx_runtime_1.jsx)(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: right, children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: job.compositionId }), (0, jsx_runtime_1.jsx)("div", { style: subtitle, children: job.status === 'done' ? ((0, jsx_runtime_1.jsx)(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : null })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, RenderQueueCopyToClipboard_1.supportsCopyingToClipboard)(job) ? ((0, jsx_runtime_1.jsx)(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, job.status === 'done' || job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : ((0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (0, jsx_runtime_1.jsx)(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) : null] }));
};
exports.RenderQueueItem = RenderQueueItem;