MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2024-12-26 07:05:56 -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}
onClick={() => setActiveRecording([stream, r])}
>
<TableCell>
<TableCell align="right">
{formatTime(Math.max(r.startTime90k, range90k![0]))}
</TableCell>
<TableCell>
<TableCell align="right">
{formatTime(Math.min(r.endTime90k, range90k![1]))}
</TableCell>
<TableCell>
<TableCell className="opt" align="right">
{vse.width}x{vse.height}
</TableCell>
<TableCell>
<TableCell className="opt" align="right">
{frameRateFmt.format(r.videoSamples / durationSec)}
</TableCell>
<TableCell>
<TableCell className="opt" align="right">
{sizeFmt.format(r.sampleFileBytes / 1048576)} MiB
</TableCell>
<TableCell>
<TableCell align="right">
{sizeFmt.format((r.sampleFileBytes / durationSec) * 0.000008)} Mbps
</TableCell>
</TableRow>

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

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