plumb more api response through to list view

This keeps a coarser-grained `toplevel` property rather than `user`
and `session`. It also synthesizes a `streams` field within it with ids.
This makes it easier to put the streams in the URL by id.

ui/src/List/StreamMultiSelector.tsx

@@ -7,9 +7,10 @@ import { Camera, Stream, StreamType } from "../types";
 import Checkbox from "@mui/material/Checkbox";
 import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "@mui/styles";
+import { ToplevelResponse } from "../api";
 
 interface Props {
-  cameras: Camera[];
+  toplevel: ToplevelResponse;
   selected: Set<Stream>;
   setSelected: (selected: Set<Stream>) => void;
 }
@@ -35,7 +36,7 @@ const useStyles = makeStyles({
 });
 
 /** Returns a table which allows selecting zero or more streams. */
-const StreamMultiSelector = ({ cameras, selected, setSelected }: Props) => {
+const StreamMultiSelector = ({ toplevel, selected, setSelected }: Props) => {
   const theme = useTheme();
   const classes = useStyles();
   const setStream = (s: Stream, checked: boolean) => {
@@ -57,7 +58,7 @@ const StreamMultiSelector = ({ cameras, selected, setSelected }: Props) => {
       }
     }
     if (!foundAny) {
-      for (const c of cameras) {
+      for (const c of toplevel.cameras) {
         if (c.streams[st] !== undefined) {
           updated.add(c.streams[st as StreamType]!);
         }
@@ -83,7 +84,7 @@ const StreamMultiSelector = ({ cameras, selected, setSelected }: Props) => {
     setSelected(updated);
   };
 
-  const cameraRows = cameras.map((c) => {
+  const cameraRows = toplevel.cameras.map((c) => {
     function checkbox(st: StreamType) {
       const s = c.streams[st];
       if (s === undefined) {

ui/src/List/index.tsx

@@ -13,7 +13,7 @@ import utcToZonedTime from "date-fns-tz/utcToZonedTime";
 import format from "date-fns/format";
 import React, { useMemo, useState } from "react";
 import * as api from "../api";
-import { Camera, Stream } from "../types";
+import { Stream } from "../types";
 import DisplaySelector, { DEFAULT_DURATION } from "./DisplaySelector";
 import StreamMultiSelector from "./StreamMultiSelector";
 import TimerangeSelector from "./TimerangeSelector";
@@ -96,11 +96,11 @@ const FullScreenVideo = ({ src, aspect }: FullScreenVideoProps) => {
 
 interface Props {
   timeZoneName: string;
-  cameras: Camera[];
+  toplevel: api.ToplevelResponse;
   showSelectors: boolean;
 }
 
-const Main = ({ cameras, timeZoneName, showSelectors }: Props) => {
+const Main = ({ toplevel, timeZoneName, showSelectors }: Props) => {
   const classes = useStyles();
 
   /**
@@ -161,7 +161,7 @@ const Main = ({ cameras, timeZoneName, showSelectors }: Props) => {
         sx={{ display: showSelectors ? "block" : "none" }}
       >
         <StreamMultiSelector
-          cameras={cameras}
+          cameras={toplevel.cameras}
           selected={selectedStreams}
           setSelected={setSelectedStreams}
         />