diff --git a/ui/package.json b/ui/package.json
index dcdcb0b..b09c168 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -6,9 +6,9 @@
"@emotion/react": "^11.1.5",
"@emotion/styled": "^11.1.5",
"@fontsource/roboto": "^4.2.1",
+ "@mui/material": "^5.0.1",
"@mui/icons-material": "^5.0.1",
"@mui/lab": "^5.0.0-alpha.48",
- "@mui/material": "^5.0.1",
"@mui/styles": "^5.0.1",
"@react-hook/resize-observer": "^1.2.0",
"@types/jest": "^26.0.20",
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 0ed0cf1..db85979 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -11,7 +11,14 @@ import { useSnackbars } from "./snackbars";
import { Camera, Session } from "./types";
import ListActivity from "./List";
import AppBar from "@mui/material/AppBar";
-import {Routes, Route, Link, useSearchParams, useResolvedPath, useMatch} from "react-router-dom";
+import {
+ Routes,
+ Route,
+ Link,
+ useSearchParams,
+ useResolvedPath,
+ useMatch,
+} from "react-router-dom";
import LiveActivity, { MultiviewChooser } from "./Live";
import Drawer from "@mui/material/Drawer";
import List from "@mui/material/List";
@@ -40,10 +47,12 @@ function App() {
(m: boolean) => !m,
true
);
- let resolved = useResolvedPath('live');
+ let resolved = useResolvedPath("live");
let match = useMatch({ path: resolved.pathname, end: true });
const [activity, setActivity] = useState(match ? "live" : "list");
- const [multiviewLayoutIndex, setMultiviewLayoutIndex] = useState(Number.parseInt(searchParams.get('layout') || '0', 10));
+ const [multiviewLayoutIndex, setMultiviewLayoutIndex] = useState(
+ Number.parseInt(searchParams.get("layout") || "0", 10)
+ );
const [session, setSession] = useState(null);
const [cameras, setCameras] = useState(null);
const [timeZoneName, setTimeZoneName] = useState(null);
@@ -86,14 +95,28 @@ function App() {
};
function fetchedCameras(cameras: Camera[] | null) {
- if (cameras !== null && cameras.length >0) {
+ if (cameras !== null && cameras.length > 0) {
return (
<>
- } />
- } />
+
+ }
+ />
+
+ }
+ />
>
);
}
@@ -150,8 +173,8 @@ function App() {
{
- setMultiviewLayoutIndex(value)
- setSearchParams({layout: value.toString()}, )
+ setMultiviewLayoutIndex(value);
+ setSearchParams({ layout: value.toString() });
}}
/>
);
@@ -181,13 +204,25 @@ function App() {
}}
>
- clickActivity("list")} component={Link} to="/">
+ clickActivity("list")}
+ component={Link}
+ to="/"
+ >
- clickActivity("live")} component={Link} to="/live">
+ clickActivity("live")}
+ component={Link}
+ to="/live"
+ >
@@ -217,9 +252,7 @@ function App() {
)}
-
- {fetchedCameras(cameras)}
-
+ {fetchedCameras(cameras)}
>
);
}
diff --git a/ui/src/Live/Multiview.tsx b/ui/src/Live/Multiview.tsx
index 54ead02..d5bc71c 100644
--- a/ui/src/Live/Multiview.tsx
+++ b/ui/src/Live/Multiview.tsx
@@ -4,11 +4,11 @@
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
-import React, {useReducer} from "react";
+import React, { useReducer } from "react";
import { Camera } from "../types";
import { makeStyles } from "@mui/styles";
import { Theme } from "@mui/material/styles";
-import {useSearchParams} from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
export interface Layout {
className: string;
@@ -96,7 +96,7 @@ export const MultiviewChooser = (props: MultiviewChooserProps) => {
typeof e.target.value === "string"
? parseInt(e.target.value)
: e.target.value
- )
+ );
}}
size="small"
sx={{
@@ -130,7 +130,6 @@ interface SelectOp {
cameraIndex: number | null;
}
-
function selectedReducer(old: SelectedCameras, op: SelectOp): SelectedCameras {
let selected = [...old]; // shallow clone.
if (op.cameraIndex !== null) {
@@ -156,7 +155,9 @@ const Multiview = (props: MultiviewProps) => {
const [selected, updateSelected] = useReducer(
selectedReducer,
- searchParams.has('cams') ? JSON.parse(searchParams.get('cams') || "") : Array(MAX_CAMERAS).fill(null)
+ searchParams.has("cams")
+ ? JSON.parse(searchParams.get("cams") || "")
+ : Array(MAX_CAMERAS).fill(null)
);
const outerRef = React.useRef(null);
@@ -179,16 +180,19 @@ const Multiview = (props: MultiviewProps) => {
cameraIndex={e}
renderCamera={props.renderCamera}
onSelect={(cameraIndex) => {
- updateSelected({selectedIndex: i, cameraIndex})
- searchParams.set('cams', JSON.stringify(selectedReducer(selected, {selectedIndex: i, cameraIndex})))
- setSearchParams(searchParams)
+ updateSelected({ selectedIndex: i, cameraIndex });
+ searchParams.set(
+ "cams",
+ JSON.stringify(
+ selectedReducer(selected, { selectedIndex: i, cameraIndex })
+ )
+ );
+ setSearchParams(searchParams);
}}
/>
);
});
-
-
return (
@@ -219,7 +223,7 @@ const Monoview = (props: MonoviewProps) => {
const chooser = (