prettify code

ui/src/List/DisplaySelector.tsx

@@ -41,61 +41,65 @@ const DisplaySelector = (props: Props) => {
       }}
     >
       <CardContent>
-      <FormControl fullWidth variant="outlined">
-        <InputLabel id="split90k-label" shrink>
-          Max video duration
-        </InputLabel>
-        <Select
-          labelId="split90k-label"
-          label="Max video duration"
-          id="split90k"
-          size="small"
-          value={props.split90k}
-          onChange={(e) =>
-            props.setSplit90k(
-              typeof e.target.value === "string"
-                ? parseInt(e.target.value)
-                : e.target.value
-            )
-          }
-          displayEmpty
-        >
-          {DURATIONS.map(([l, d]) => (
-            <MenuItem key={l} value={d}>
-              {l}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-      <FormControlLabel
-        title="Trim each segment of video so that it is fully
+        <FormControl fullWidth variant="outlined">
+          <InputLabel id="split90k-label" shrink>
+            Max video duration
+          </InputLabel>
+          <Select
+            labelId="split90k-label"
+            label="Max video duration"
+            id="split90k"
+            size="small"
+            value={props.split90k}
+            onChange={(e) =>
+              props.setSplit90k(
+                typeof e.target.value === "string"
+                  ? parseInt(e.target.value)
+                  : e.target.value
+              )
+            }
+            displayEmpty
+          >
+            {DURATIONS.map(([l, d]) => (
+              <MenuItem key={l} value={d}>
+                {l}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControlLabel
+          title="Trim each segment of video so that it is fully
     contained within the select time range. When this is not selected,
     all segments will overlap with the selected time range but may start
     and/or end outside it."
-        control={
-          <Checkbox
-            checked={props.trimStartAndEnd}
-            size="small"
-            onChange={(event) => props.setTrimStartAndEnd(event.target.checked)}
-            name="trim-start-and-end"
-            color="secondary"
-          />
-        }
-        label="Trim start and end"
-      />
-      <FormControlLabel
-        title="Include a text track in each .mp4 with the
+          control={
+            <Checkbox
+              checked={props.trimStartAndEnd}
+              size="small"
+              onChange={(event) =>
+                props.setTrimStartAndEnd(event.target.checked)
+              }
+              name="trim-start-and-end"
+              color="secondary"
+            />
+          }
+          label="Trim start and end"
+        />
+        <FormControlLabel
+          title="Include a text track in each .mp4 with the
     timestamp at which the video was recorded."
-        control={
-          <Checkbox
-            checked={props.timestampTrack}
-            size="small"
-            onChange={(event) => props.setTimestampTrack(event.target.checked)}
-            name="timestamp-track"
-            color="secondary"
-          />
-        }
-        label="Timestamp track"
+          control={
+            <Checkbox
+              checked={props.timestampTrack}
+              size="small"
+              onChange={(event) =>
+                props.setTimestampTrack(event.target.checked)
+              }
+              name="timestamp-track"
+              color="secondary"
+            />
+          }
+          label="Timestamp track"
         />
       </CardContent>
     </Card>

ui/src/List/StreamMultiSelector.tsx

@@ -90,37 +90,36 @@ const StreamMultiSelector = ({ toplevel, selected, setSelected }: Props) => {
     );
   });
   return (
-    <Card
-    >
+    <Card>
       <CardContent>
-      <Box
-        component="table"
-        sx={{
-          fontSize: "0.9rem",
-          "& td:first-of-type": {
-            paddingRight: "3px",
-          },
-          "& td:not(:first-of-type)": {
-            textAlign: "center",
-          },
-          "& .MuiCheckbox-root": {
-            padding: "3px",
-          },
-          "@media (pointer: fine)": {
-            "& .MuiCheckbox-root": {
-              padding: "0px",
+        <Box
+          component="table"
+          sx={{
+            fontSize: "0.9rem",
+            "& td:first-of-type": {
+              paddingRight: "3px",
             },
-          },
-        }}
-      >
-        <thead>
-          <tr>
-            <td />
-            <td onClick={() => toggleType("main")}>main</td>
-            <td onClick={() => toggleType("sub")}>sub</td>
-          </tr>
-        </thead>
-        <tbody>{cameraRows}</tbody>
+            "& td:not(:first-of-type)": {
+              textAlign: "center",
+            },
+            "& .MuiCheckbox-root": {
+              padding: "3px",
+            },
+            "@media (pointer: fine)": {
+              "& .MuiCheckbox-root": {
+                padding: "0px",
+              },
+            },
+          }}
+        >
+          <thead>
+            <tr>
+              <td />
+              <td onClick={() => toggleType("main")}>main</td>
+              <td onClick={() => toggleType("sub")}>sub</td>
+            </tr>
+          </thead>
+          <tbody>{cameraRows}</tbody>
         </Box>
       </CardContent>
     </Card>

ui/src/List/TimerangeSelector.tsx

@@ -373,80 +373,82 @@ const TimerangeSelector = ({
     <Card>
       <CardContent>
         <Box>
-        <FormLabel component="legend">From</FormLabel>
-        <SmallStaticDatePicker
-          displayStaticWrapperAs="desktop"
-          value={startDate}
-          disabled={days.allowed === null}
-          shouldDisableDate={shouldDisableDate}
-          maxDate={
-            days.allowed === null ? today : new Date(days.allowed.maxMillis)
-          }
-          minDate={
-            days.allowed === null ? today : new Date(days.allowed.minMillis)
-          }
-          onChange={(d: Date | null) => {
-            updateDays({ op: "set-start-day", newStartDate: d });
-          }}
-        />
-        <MyTimePicker
-          value={startTime}
-          onChange={(newValue) => {
-            if (newValue === null || isFinite((newValue as Date).getTime())) {
-              setStartTime(newValue);
-            }
-          }}
-          disabled={days.allowed === null}
-        />
-        </Box>
-        <Box>
-          <FormLabel sx={{ mt: 1 }} component="legend">To</FormLabel>
-        <RadioGroup
-          row
-          value={days.endType}
-          onChange={(e) => {
-            updateDays({
-              op: "set-end-type",
-              newEndType: e.target.value as EndDayType,
-            });
-          }}
-        >
-          <FormControlLabel
-            value="same-day"
-            control={<Radio size="small" color="secondary" />}
-            label="Same day"
-          />
-          <FormControlLabel
-            value="other-day"
-            control={<Radio size="small" color="secondary" />}
-            label="Other day"
-          />
-        </RadioGroup>
-        <Collapse in={days.endType === "other-day"}>
+          <FormLabel component="legend">From</FormLabel>
           <SmallStaticDatePicker
             displayStaticWrapperAs="desktop"
-            value={endDate}
-            shouldDisableDate={(d: Date | null) =>
-              days.endType !== "other-day" || shouldDisableDate(d)
-            }
+            value={startDate}
+            disabled={days.allowed === null}
+            shouldDisableDate={shouldDisableDate}
             maxDate={
-              startDate === null ? today : new Date(days.allowed!.maxMillis)
+              days.allowed === null ? today : new Date(days.allowed.maxMillis)
+            }
+            minDate={
+              days.allowed === null ? today : new Date(days.allowed.minMillis)
             }
-            minDate={startDate === null ? today : startDate}
             onChange={(d: Date | null) => {
-              updateDays({ op: "set-end-day", newEndDate: d! });
+              updateDays({ op: "set-start-day", newStartDate: d });
             }}
           />
-        </Collapse>
-        <MyTimePicker
-          value={endTime}
-          onChange={(newValue) => {
-            if (newValue === null || isFinite((newValue as Date).getTime())) {
-              setEndTime(newValue);
-            }
-          }}
-          disabled={days.allowed === null}
-        />
+          <MyTimePicker
+            value={startTime}
+            onChange={(newValue) => {
+              if (newValue === null || isFinite((newValue as Date).getTime())) {
+                setStartTime(newValue);
+              }
+            }}
+            disabled={days.allowed === null}
+          />
+        </Box>
+        <Box>
+          <FormLabel sx={{ mt: 1 }} component="legend">
+            To
+          </FormLabel>
+          <RadioGroup
+            row
+            value={days.endType}
+            onChange={(e) => {
+              updateDays({
+                op: "set-end-type",
+                newEndType: e.target.value as EndDayType,
+              });
+            }}
+          >
+            <FormControlLabel
+              value="same-day"
+              control={<Radio size="small" color="secondary" />}
+              label="Same day"
+            />
+            <FormControlLabel
+              value="other-day"
+              control={<Radio size="small" color="secondary" />}
+              label="Other day"
+            />
+          </RadioGroup>
+          <Collapse in={days.endType === "other-day"}>
+            <SmallStaticDatePicker
+              displayStaticWrapperAs="desktop"
+              value={endDate}
+              shouldDisableDate={(d: Date | null) =>
+                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! });
+              }}
+            />
+          </Collapse>
+          <MyTimePicker
+            value={endTime}
+            onChange={(newValue) => {
+              if (newValue === null || isFinite((newValue as Date).getTime())) {
+                setEndTime(newValue);
+              }
+            }}
+            disabled={days.allowed === null}
+          />
         </Box>
       </CardContent>
     </Card>