diff --git a/ui/src/List/DisplaySelector.tsx b/ui/src/List/DisplaySelector.tsx
index cf63bae..88dc751 100644
--- a/ui/src/List/DisplaySelector.tsx
+++ b/ui/src/List/DisplaySelector.tsx
@@ -2,14 +2,15 @@
// Copyright (C) 2021 The Moonfire NVR Authors; see AUTHORS and LICENSE.txt.
// SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
-import Card from "@mui/material/Card";
import Checkbox from "@mui/material/Checkbox";
import InputLabel from "@mui/material/InputLabel";
import FormControl from "@mui/material/FormControl";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import FormControlLabel from "@mui/material/FormControlLabel";
-import CardContent from "@mui/material/CardContent/CardContent";
+import FormGroup from "@mui/material/FormGroup";
+import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
interface Props {
split90k?: number;
@@ -33,14 +34,10 @@ export const DEFAULT_DURATION = DURATIONS[0][1];
* Returns a card for setting options relating to how videos are displayed.
*/
const DisplaySelector = (props: Props) => {
+ const theme = useTheme();
return (
-
-
+
+
Max video duration
@@ -101,8 +98,8 @@ const DisplaySelector = (props: Props) => {
}
label="Timestamp track"
/>
-
-
+
+
);
};
diff --git a/ui/src/List/StreamMultiSelector.tsx b/ui/src/List/StreamMultiSelector.tsx
index ca2ada6..501944f 100644
--- a/ui/src/List/StreamMultiSelector.tsx
+++ b/ui/src/List/StreamMultiSelector.tsx
@@ -3,11 +3,11 @@
// SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
import { Camera, Stream, StreamType } from "../types";
import Checkbox from "@mui/material/Checkbox";
import { ToplevelResponse } from "../api";
-import CardContent from "@mui/material/CardContent/CardContent";
+import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
interface Props {
toplevel: ToplevelResponse;
@@ -17,6 +17,7 @@ interface Props {
/** Returns a table which allows selecting zero or more streams. */
const StreamMultiSelector = ({ toplevel, selected, setSelected }: Props) => {
+ const theme = useTheme();
const setStream = (s: Stream, checked: boolean) => {
const updated = new Set(selected);
if (checked) {
@@ -90,39 +91,37 @@ const StreamMultiSelector = ({ toplevel, selected, setSelected }: Props) => {
);
});
return (
-
-
-
+
-
-
- |
- toggleType("main")}>main |
- toggleType("sub")}>sub |
-
-
- {cameraRows}
-
-
-
+ },
+ }}
+ >
+
+
+ |
+ toggleType("main")}>main |
+ toggleType("sub")}>sub |
+
+
+ {cameraRows}
+
+
);
};
diff --git a/ui/src/List/TimerangeSelector.tsx b/ui/src/List/TimerangeSelector.tsx
index 2535e4d..b1e8f3e 100644
--- a/ui/src/List/TimerangeSelector.tsx
+++ b/ui/src/List/TimerangeSelector.tsx
@@ -59,7 +59,6 @@ import React, { useEffect } from "react";
import { zonedTimeToUtc } from "date-fns-tz";
import { addDays, addMilliseconds, differenceInMilliseconds } from "date-fns";
import startOfDay from "date-fns/startOfDay";
-import Card from "@mui/material/Card";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormLabel from "@mui/material/FormLabel";
import Radio from "@mui/material/Radio";
@@ -67,7 +66,8 @@ import RadioGroup from "@mui/material/RadioGroup";
import { TimePicker, TimePickerProps } from "@mui/x-date-pickers/TimePicker";
import Collapse from "@mui/material/Collapse";
import Box from "@mui/material/Box";
-import CardContent from "@mui/material/CardContent/CardContent";
+import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
interface Props {
selectedStreams: Set;
@@ -326,6 +326,7 @@ const TimerangeSelector = ({
timeZoneName,
setRange90k,
}: Props) => {
+ const theme = useTheme();
const [days, updateDays] = React.useReducer(daysStateReducer, {
allowed: null,
rangeMillis: null,
@@ -370,88 +371,86 @@ const TimerangeSelector = ({
endDate = new Date(days.rangeMillis[1]);
}
return (
-
-
-
- From
+
+
+ From
+ {
+ updateDays({ op: "set-start-day", newStartDate: d });
+ }}
+ />
+ {
+ if (newValue === null || isFinite((newValue as Date).getTime())) {
+ setStartTime(newValue);
+ }
+ }}
+ disabled={days.allowed === null}
+ />
+
+
+
+ To
+
+ {
+ updateDays({
+ op: "set-end-type",
+ newEndType: e.target.value as EndDayType,
+ });
+ }}
+ >
+ }
+ label="Same day"
+ />
+ }
+ label="Other day"
+ />
+
+
+ days.endType !== "other-day" || shouldDisableDate(d)
+ }
maxDate={
- days.allowed === null ? today : new Date(days.allowed.maxMillis)
- }
- minDate={
- days.allowed === null ? today : new Date(days.allowed.minMillis)
+ startDate === null ? today : new Date(days.allowed!.maxMillis)
}
+ minDate={startDate === null ? today : startDate}
onChange={(d: Date | null) => {
- updateDays({ op: "set-start-day", newStartDate: d });
+ updateDays({ op: "set-end-day", newEndDate: d! });
}}
/>
- {
- if (newValue === null || isFinite((newValue as Date).getTime())) {
- setStartTime(newValue);
- }
- }}
- disabled={days.allowed === null}
- />
-
-
-
- To
-
- {
- updateDays({
- op: "set-end-type",
- newEndType: e.target.value as EndDayType,
- });
- }}
- >
- }
- label="Same day"
- />
- }
- label="Other day"
- />
-
-
-
- days.endType !== "other-day" || shouldDisableDate(d)
- }
- maxDate={
- startDate === null ? today : new Date(days.allowed!.maxMillis)
- }
- minDate={startDate === null ? today : startDate}
- onChange={(d: Date | null) => {
- updateDays({ op: "set-end-day", newEndDate: d! });
- }}
- />
-
- {
- if (newValue === null || isFinite((newValue as Date).getTime())) {
- setEndTime(newValue);
- }
- }}
- disabled={days.allowed === null}
- />
-
-
-
+
+ {
+ if (newValue === null || isFinite((newValue as Date).getTime())) {
+ setEndTime(newValue);
+ }
+ }}
+ disabled={days.allowed === null}
+ />
+
+
);
};