diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 284bef5..0ed0cf1 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -11,7 +11,7 @@ import { useSnackbars } from "./snackbars";
import { Camera, Session } from "./types";
import ListActivity from "./List";
import AppBar from "@mui/material/AppBar";
-import {BrowserRouter, Routes, Route, Link} 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";
@@ -34,12 +34,16 @@ type Activity = "list" | "live";
function App() {
const [showMenu, toggleShowMenu] = useReducer((m: boolean) => !m, false);
+ const [searchParams, setSearchParams] = useSearchParams();
+
const [showListSelectors, toggleShowListSelectors] = useReducer(
(m: boolean) => !m,
true
);
- const [activity, setActivity] = useState("list");
- const [multiviewLayoutIndex, setMultiviewLayoutIndex] = useState(0);
+ 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 [session, setSession] = useState(null);
const [cameras, setCameras] = useState(null);
const [timeZoneName, setTimeZoneName] = useState(null);
@@ -145,14 +149,17 @@ function App() {
activityMenu = (
{
+ setMultiviewLayoutIndex(value)
+ setSearchParams({layout: value.toString()}, )
+ }}
/>
);
break;
}
}
return (
-
+ <>
- clickActivity("list")}>
+ clickActivity("list")} component={Link} to="/">
-
+
- clickActivity("live")}>
+ clickActivity("live")} component={Link} to="/live">
-
-
+
@@ -211,10 +217,10 @@ function App() {
)}
-
+
{fetchedCameras(cameras)}
-
+ >
);
}
diff --git a/ui/src/Live/Multiview.tsx b/ui/src/Live/Multiview.tsx
index 722bb36..54ead02 100644
--- a/ui/src/Live/Multiview.tsx
+++ b/ui/src/Live/Multiview.tsx
@@ -4,7 +4,7 @@
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";
@@ -91,13 +91,13 @@ export const MultiviewChooser = (props: MultiviewChooserProps) => {