mirror of
https://github.com/scottlamb/moonfire-nvr.git
synced 2025-02-21 18:42:30 -05:00
0236ab8d64
It's a start. It can display several streams at once, which is nice.
There are lots of opportunities for improvement:
* it doesn't keep the videos approximately in sync.
* it accumulates extra buffering, drifting behind live. This is
particularly noticeable when it's paused and played again; it can
be several seconds before it jumps to after the break.
* it always uses the sub stream rather main. I'd prefer it support
"auto" (use main if the viewport is larger than the sub stream and
there's sufficient bandwidth), "main", or "sub".
* it has a kludgy heuristic where it throws away everything buffered 5
seconds before the current timestamp. It should throw away
everything before the current GOP instead, but I need to alter the
API so it can easily know when that is.
* it can't tell you when a camera connection is down. This needs an
API change also.
* it'd be nice to quickly double-click on a stream to view only it,
then double-click again to go back to the multi-pane view.
* it doesn't allow you to zoom in on part of the video. This would be
nice particularly when viewing 4k video streams on small screens.
* it has only four preconfigured layouts that subdivide a 16x9
viewport. You have to choose every camera every time. It'd be nice
to both allow more flexibility and have more memory.
React prototype: #111
live stream: #59
58 lines
1.6 KiB
CSS
58 lines
1.6 KiB
CSS
/*
|
|
* This file is part of Moonfire NVR, a security camera network video recorder.
|
|
* Copyright (C) 2021 The Moonfire NVR Authors; see AUTHORS and LICENSE.txt.
|
|
* SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
|
|
*/
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
@media (pointer: fine) {
|
|
/*
|
|
* The spacing defined at https://material.io/components/date-pickers#specs
|
|
* seems plenty big enough (on desktop). Not sure why material-ui wants
|
|
* to make it bigger but that doesn't work well with our layout.
|
|
*
|
|
* Defining this here (in a global .css file) is the first way I could find
|
|
* to override properties of .MuiPickerStaticWrapper-root. It's unfortunately
|
|
* a _parent_ of the element that gets the <DatePicker>'s className applied,
|
|
* and it doesn't seem to be exposed for a global style override
|
|
* <https://next.material-ui.com/customization/theme-components/#global-style-overrides>.
|
|
*/
|
|
.MuiPickersStaticWrapper-root {
|
|
min-width: 256px !important;
|
|
}
|
|
|
|
/* Increased specificity here so it doesn't apply to the popup time picker. */
|
|
.MuiPickersStaticWrapper-root .MuiPickerView-root {
|
|
width: 256px !important;
|
|
}
|
|
|
|
.MuiPickersCalendar-root {
|
|
min-height: 160px !important;
|
|
}
|
|
|
|
.MuiPickersCalendar-weekDayLabel {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.MuiPickersCalendar-week {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.MuiPickersDay-dayWithMargin {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.MuiPickersDay-root {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
}
|
|
}
|