snappier default display options

*   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.

ui/src/List/DisplaySelector.tsx

@@ -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

ui/src/List/index.tsx

@@ -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