88 lines
1.9 KiB
JavaScript
88 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
|
|
import { Trans } from '@lingui/macro';
|
|
import Grid from '@mui/material/Grid';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
import Duration from '../../misc/Duration';
|
|
import Number from '../../misc/Number';
|
|
import Palette from '../../theme/base/palette';
|
|
|
|
export default function Progress(props) {
|
|
const uptime = props.progress.time;
|
|
const bitrate = props.progress.bitrate.toFixed(2);
|
|
const fps = Math.round(props.progress.fps);
|
|
const speed = props.progress.speed;
|
|
|
|
const valueStyle = {
|
|
fontWeight: 'bold',
|
|
marginBottom: -5,
|
|
};
|
|
|
|
const divStyle = {
|
|
backgroundColor: Palette.background.box_default,
|
|
textAlign: 'center',
|
|
borderRadius: 4,
|
|
padding: 8,
|
|
marginTop: '.5em',
|
|
marginBottom: '.2em',
|
|
};
|
|
|
|
const uptimeStyle = {
|
|
...divStyle,
|
|
};
|
|
|
|
const bitrateStyle = {
|
|
...divStyle,
|
|
};
|
|
|
|
const fpsStyle = {
|
|
...divStyle,
|
|
};
|
|
|
|
if (fps && (fps < 10 || speed < 1.0)) {
|
|
fpsStyle.backgroundColor = Palette.background.box_danger;
|
|
} else {
|
|
fpsStyle.backgroundColor = Palette.background.box_default;
|
|
}
|
|
|
|
return (
|
|
<Grid container spacing={1}>
|
|
<Grid item xs={4}>
|
|
<div style={uptimeStyle}>
|
|
<Typography variant="body1" style={valueStyle}>
|
|
<Duration seconds={uptime} />
|
|
</Typography>
|
|
<Typography variant="body2">
|
|
<Trans>Uptime</Trans>
|
|
</Typography>
|
|
</div>
|
|
</Grid>
|
|
<Grid item xs={4}>
|
|
<div style={bitrateStyle}>
|
|
<Typography variant="body1" style={valueStyle}>
|
|
<Number value={bitrate} minDigits={2} />
|
|
</Typography>
|
|
<Typography variant="body2">
|
|
<Trans>kbit/s</Trans>
|
|
</Typography>
|
|
</div>
|
|
</Grid>
|
|
<Grid item xs={4}>
|
|
<div style={fpsStyle}>
|
|
<Typography variant="body1" style={valueStyle}>
|
|
<Number value={fps} digits={2} />
|
|
</Typography>
|
|
<Typography variant="body2">
|
|
<Trans>FPS</Trans>
|
|
</Typography>
|
|
</div>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
Progress.defaultProps = {
|
|
progress: {},
|
|
};
|