MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2024-12-26 23:25:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

display tweaks, especially for small screens

Browse Source
This commit is contained in:
Scott Lamb 2021-03-15 11:08:02 -07:00
parent 9d0a48ba00
commit 1a5e01adef
2 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/src/List/VideoList.tsx
View File

@ -101,22 +101,22 @@ const VideoList = ({
key={r.startId} key={r.startId}
onClick={() => setActiveRecording([stream, r])} onClick={() => setActiveRecording([stream, r])}
> >
<TableCell> <TableCell align="right">
{formatTime(Math.max(r.startTime90k, range90k![0]))} {formatTime(Math.max(r.startTime90k, range90k![0]))}
</TableCell> </TableCell>
<TableCell> <TableCell align="right">
{formatTime(Math.min(r.endTime90k, range90k![1]))} {formatTime(Math.min(r.endTime90k, range90k![1]))}
</TableCell> </TableCell>
<TableCell> <TableCell className="opt" align="right">
{vse.width}x{vse.height} {vse.width}x{vse.height}
</TableCell> </TableCell>
<TableCell> <TableCell className="opt" align="right">
{frameRateFmt.format(r.videoSamples / durationSec)} {frameRateFmt.format(r.videoSamples / durationSec)}
</TableCell> </TableCell>
<TableCell> <TableCell className="opt" align="right">
{sizeFmt.format(r.sampleFileBytes / 1048576)} MiB {sizeFmt.format(r.sampleFileBytes / 1048576)} MiB
</TableCell> </TableCell>
<TableCell> <TableCell align="right">
{sizeFmt.format((r.sampleFileBytes / durationSec) * 0.000008)} Mbps {sizeFmt.format((r.sampleFileBytes / durationSec) * 0.000008)} Mbps
</TableCell> </TableCell>
</TableRow> </TableRow>

44
ui/src/List/index.tsx
View File

@ -22,18 +22,13 @@ import TimerangeSelector from "./TimerangeSelector";
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles((theme: Theme) => ({
root: { root: {
display: "flex", display: "flex",
[theme.breakpoints.down("md")]: { flexWrap: "wrap",
flexDirection: "column",
},
margin: theme.spacing(2), margin: theme.spacing(2),
}, },
selectors: { selectors: {
[theme.breakpoints.up("md")]: {
marginRight: theme.spacing(2), marginRight: theme.spacing(2),
},
[theme.breakpoints.down("md")]: {
marginBottom: theme.spacing(2), marginBottom: theme.spacing(2),
}, width: "max-content",
}, },
video: { video: {
objectFit: "contain", objectFit: "contain",
@ -46,12 +41,21 @@ const useStyles = makeStyles((theme: Theme) => ({
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
}, },
videoTable: { videoTable: {
flexGrow: 1, width: "max-content",
height: "max-content",
"& .MuiTableBody-root:not(:last-child):after": { "& .MuiTableBody-root:not(:last-child):after": {
content: "''", content: "''",
display: "block", display: "block",
height: theme.spacing(2), height: theme.spacing(2),
}, },
"& tbody tr": {
cursor: "pointer",
},
"& .opt": {
[theme.breakpoints.down("lg")]: {
display: "none",
},
},
}, },
})); }));
@ -99,12 +103,18 @@ const Main = ({ cameras, timeZoneName }: Props) => {
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell>start</TableCell> <TableCell align="right">start</TableCell>
<TableCell>end</TableCell> <TableCell align="right">end</TableCell>
<TableCell>resolution</TableCell> <TableCell className="opt" align="right">
<TableCell>fps</TableCell> resolution
<TableCell>storage</TableCell> </TableCell>
<TableCell>bitrate</TableCell> <TableCell className="opt" align="right">
fps
</TableCell>
<TableCell className="opt" align="right">
storage
</TableCell>
<TableCell align="right">bitrate</TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<VideoList <VideoList
@ -121,10 +131,8 @@ const Main = ({ cameras, timeZoneName }: Props) => {
setActiveRecording(null); setActiveRecording(null);
}; };
const recordingsTable = ( const recordingsTable = (
<TableContainer component={Paper}> <TableContainer component={Paper} className={classes.videoTable}>
<Table size="small" className={classes.videoTable}> <Table size="small">{videoLists}</Table>
{videoLists}
</Table>
</TableContainer> </TableContainer>
); );
return ( return (