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

snappier default display options

Browse Source 
*   1-hour videos are a bit faster to render server-side and don't
    require so much index data to be transferred before play starts

*   the timestamp tracks might be causing a lot of excess data transfer
    in some cases. They're currently not interleaved by ascending
    timestamp, and I wonder if they should be. Chrome might be pulling
    all the bytes between the current position in the two tracks, which
    can be excessive. I'll have to consider interleaving when I add
    audio anyway. But for now, just make the default UI display
    snappier. Chrome doesn't display the timestamp track anyway, so
    don't let it slow things down.
This commit is contained in:
Scott Lamb 2021-03-16 22:28:00 -07:00
parent d273a99f83
commit 83369f673a
2 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/src/List/DisplaySelector.tsx
View File

@ -21,6 +21,15 @@ interface Props {
setTimestampTrack: (timestampTrack: boolean) => void;
}
const DURATIONS: [string, number | undefined][] = [
["1 hour", 60 * 60 * 90000],
["4 hours", 4 * 60 * 60 * 90000],
["24 hours", 24 * 60 * 60 * 90000],
["infinite", undefined],
];
export const DEFAULT_DURATION = DURATIONS[0][1];
/**
* Returns a card for setting options relating to how videos are displayed.
*/
@ -34,18 +43,6 @@ const DisplaySelector = (props: Props) => {
flexDirection: "column",
}}
>
{/*<TextField
select
label="Max video duration"
value={split90k}
onChange={(e) => setSplit90k(e.target.value)}
variant="outlined"
>
<MenuItem value={60 * 60 * 90000}>1 hour</MenuItem>
<MenuItem value={4 * 60 * 60 * 90000}>4 hours</MenuItem>
<MenuItem value={24 * 60 * 60 * 90000}>24 hours</MenuItem>
<MenuItem value={undefined}>infinite</MenuItem>
</TextField>*/}
<FormControl fullWidth variant="outlined">
<InputLabel id="split90k-label" shrink>
Max video duration
@ -57,10 +54,11 @@ const DisplaySelector = (props: Props) => {
onChange={(e) => props.setSplit90k(e.target.value)}
displayEmpty
>
<MenuItem value={60 * 60 * 90000}>1 hour</MenuItem>
<MenuItem value={4 * 60 * 60 * 90000}>4 hours</MenuItem>
<MenuItem value={24 * 60 * 60 * 90000}>24 hours</MenuItem>
<MenuItem value={undefined}>infinite</MenuItem>
{DURATIONS.map(([l, d]) => (
<MenuItem key={l} value={d}>
{l}
</MenuItem>
))}
</Select>
</FormControl>
<FormControlLabel

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

@ -13,7 +13,7 @@ import format from "date-fns/format";
import React, { useMemo, useState } from "react";
import * as api from "../api";
import { Camera, Stream } from "../types";
import DisplaySelector from "./DisplaySelector";
import DisplaySelector, { DEFAULT_DURATION } from "./DisplaySelector";
import StreamMultiSelector from "./StreamMultiSelector";
import TimerangeSelector from "./TimerangeSelector";
import VideoList from "./VideoList";
@ -91,10 +91,10 @@ const Main = ({ cameras, timeZoneName, showMenu }: Props) => {
/** Selected time range. */
const [range90k, setRange90k] = useState<[number, number] | null>(null);
const [split90k, setSplit90k] = useState<number | undefined>(undefined);
const [split90k, setSplit90k] = useState(DEFAULT_DURATION);
const [trimStartAndEnd, setTrimStartAndEnd] = useState(true);
const [timestampTrack, setTimestampTrack] = useState(true);
const [timestampTrack, setTimestampTrack] = useState(false);
const [activeRecording, setActiveRecording] = useState<
[Stream, api.Recording] | null