@remotion/studio
Version:
APIs for interacting with the Remotion Studio
46 lines (45 loc) • 1.75 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RendersTab = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../helpers/colors");
const layout_1 = require("./layout");
const context_1 = require("./RenderQueue/context");
const Tabs_1 = require("./Tabs");
const row = {
display: 'flex',
flexDirection: 'row',
fontSize: 14,
color: 'inherit',
alignItems: 'center',
flex: 1,
};
const badge = {
height: 16,
width: 16,
borderRadius: 3,
fontSize: 10,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
};
const RendersTab = ({ selected, onClick }) => {
const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
const failedJobs = jobs.filter((j) => j.status === 'failed').length;
const jobCount = jobs.length;
const badgeStyle = (0, react_1.useMemo)(() => {
return {
...badge,
backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : 'transparent',
color: failedJobs > 0 ? 'white' : colors_1.LIGHT_TEXT,
borderWidth: failedJobs > 0 ? 0 : 1,
borderStyle: 'solid',
borderColor: colors_1.LIGHT_TEXT,
};
}, [failedJobs]);
return (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: selected, onClick: onClick, children: jsx_runtime_1.jsxs("div", { style: row, children: ["Renders", jobCount > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx("div", { style: badgeStyle, children: jobCount })
] })) : null] }) }));
};
exports.RendersTab = RendersTab;