Run prettier and eslint

web/src/types/live.ts

@@ -33,5 +33,5 @@ export type LiveStreamMetadata = {
 
 export type LivePlayerError = "stalled" | "startup" | "mse-decode";
 
-export const LiveViewModes = ["auto", "static", "continuous"] as const
+export const LiveViewModes = ["auto", "static", "continuous"] as const;
 export type LiveViewMode = (typeof LiveViewModes)[number];

web/src/views/live/LiveDashboardView.tsx

@@ -28,7 +28,7 @@ import DraggableGridLayout from "./DraggableGridLayout";
 import { IoClose } from "react-icons/io5";
 import { LuLayoutDashboard } from "react-icons/lu";
 import { cn } from "@/lib/utils";
-import {LivePlayerError, LivePlayerMode, LiveViewMode} from "@/types/live";
+import { LivePlayerError, LivePlayerMode, LiveViewMode } from "@/types/live";
 import { FaCompress, FaExpand } from "react-icons/fa";
 import { useResizeObserver } from "@/hooks/resize-observer";
 

web/src/views/settings/GeneralSettingsView.tsx

@@ -62,16 +62,15 @@ export default function GeneralSettingsView() {
   const [alertVideos, setAlertVideos] = usePersistence("alertVideos", true);
 
   return (
-      <>
+    <>
       <div className="flex size-full flex-col md:flex-row">
-        <Toaster position="top-center" closeButton={true}/>
-        <div
-            className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
+        <Toaster position="top-center" closeButton={true} />
+        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
           <Heading as="h3" className="my-2">
             General Settings
           </Heading>
 
-          <Separator className="my-2 flex bg-secondary"/>
+          <Separator className="my-2 flex bg-secondary" />
 
           <Heading as="h4" className="my-2">
             Live Dashboard
@@ -80,28 +79,41 @@ export default function GeneralSettingsView() {
           <div className="mt-2 space-y-6">
             <div className="text-md">Live View Modes</div>
             <div className="my-2 text-sm text-muted-foreground">
-              <p>Live stream behavior:<br/>Auto mode (default) will begin streaming when activity is
-                detected.<br/>Static mode will update camera images on the live dashboard once per minute.<br/>Continuous mode
-                will stream cameras regardless of activity. Caution: Continuous mode will increase bandwidth usage and may affect performance.</p>
+              <p>
+                Live stream behavior:
+                <br />
+                Auto mode (default) will begin streaming when activity is
+                detected.
+                <br />
+                Static mode will update camera images on the live dashboard once
+                per minute.
+                <br />
+                Continuous mode will stream cameras regardless of activity.
+                Caution: Continuous mode will increase bandwidth usage and may
+                affect performance.
+              </p>
             </div>
             <Select
-                value={liveViewMode}
-                onValueChange={(value: LiveViewMode) => setLiveViewMode(value)}
+              value={liveViewMode}
+              onValueChange={(value: LiveViewMode) => setLiveViewMode(value)}
             >
-              <SelectTrigger className="w-100" style={{textTransform: "capitalize"}}>
+              <SelectTrigger
+                className="w-100"
+                style={{ textTransform: "capitalize" }}
+              >
                 {liveViewMode}
               </SelectTrigger>
               <SelectContent>
                 <SelectGroup>
                   {LiveViewModes.map((mode) => (
-                      <SelectItem
-                          key={mode}
-                          className="cursor-pointer"
-                          value={mode}
-                          style={{textTransform: "capitalize"}}
-                      >
-                        {mode}
-                      </SelectItem>
+                    <SelectItem
+                      key={mode}
+                      className="cursor-pointer"
+                      value={mode}
+                      style={{ textTransform: "capitalize" }}
+                    >
+                      {mode}
+                    </SelectItem>
                   ))}
                 </SelectGroup>
               </SelectContent>
@@ -109,9 +121,9 @@ export default function GeneralSettingsView() {
             <div className="space-y-3">
               <div className="flex flex-row items-center justify-start gap-2">
                 <Switch
-                    id="images-only"
-                    checked={alertVideos}
-                    onCheckedChange={setAlertVideos}
+                  id="images-only"
+                  checked={alertVideos}
+                  onCheckedChange={setAlertVideos}
                 />
                 <Label className="cursor-pointer" htmlFor="images-only">
                   Play Alert Videos
@@ -142,7 +154,7 @@ export default function GeneralSettingsView() {
               <Button onClick={clearStoredLayouts}>Clear All Layouts</Button>
             </div>
 
-            <Separator className="my-2 flex bg-secondary"/>
+            <Separator className="my-2 flex bg-secondary" />
 
             <Heading as="h4" className="my-2">
               Recordings Viewer
@@ -157,66 +169,65 @@ export default function GeneralSettingsView() {
               </div>
             </div>
             <Select
-                value={playbackRate?.toString()}
-                onValueChange={(value) => setPlaybackRate(parseFloat(value))}
-        >
-          <SelectTrigger className="w-20">
-            {`${playbackRate}x`}
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              {PLAYBACK_RATE_DEFAULT.map((rate) => (
-                  <SelectItem
+              value={playbackRate?.toString()}
+              onValueChange={(value) => setPlaybackRate(parseFloat(value))}
+            >
+              <SelectTrigger className="w-20">
+                {`${playbackRate}x`}
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {PLAYBACK_RATE_DEFAULT.map((rate) => (
+                    <SelectItem
                       key={rate}
                       className="cursor-pointer"
                       value={rate.toString()}
-                  >
-                    {rate}x
-                  </SelectItem>
-              ))}
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-        <Separator className="my-2 flex bg-secondary"/>
+                    >
+                      {rate}x
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <Separator className="my-2 flex bg-secondary" />
 
-        <Heading as="h4" className="my-2">
-          Calendar
-        </Heading>
+            <Heading as="h4" className="my-2">
+              Calendar
+            </Heading>
 
-        <div className="mt-2 space-y-6">
-          <div className="space-y-0.5">
-            <div className="text-md">First Weekday</div>
-            <div className="my-2 text-sm text-muted-foreground">
-              <p>The day that the weeks of the review calendar begin on.</p>
+            <div className="mt-2 space-y-6">
+              <div className="space-y-0.5">
+                <div className="text-md">First Weekday</div>
+                <div className="my-2 text-sm text-muted-foreground">
+                  <p>The day that the weeks of the review calendar begin on.</p>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <Select
-            value={weekStartsOn?.toString()}
-            onValueChange={(value) => setWeekStartsOn(parseInt(value))}
-        >
-          <SelectTrigger className="w-32">
-            {WEEK_STARTS_ON[weekStartsOn ?? 0]}
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              {WEEK_STARTS_ON.map((day, index) => (
-                  <SelectItem
+            <Select
+              value={weekStartsOn?.toString()}
+              onValueChange={(value) => setWeekStartsOn(parseInt(value))}
+            >
+              <SelectTrigger className="w-32">
+                {WEEK_STARTS_ON[weekStartsOn ?? 0]}
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {WEEK_STARTS_ON.map((day, index) => (
+                    <SelectItem
                       key={index}
                       className="cursor-pointer"
                       value={index.toString()}
-                  >
-                    {day}
-                  </SelectItem>
-              ))}
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-        <Separator className="my-2 flex bg-secondary"/>
+                    >
+                      {day}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <Separator className="my-2 flex bg-secondary" />
+          </div>
+        </div>
       </div>
-      </div>
-</div>
-</>
-)
-  ;
+    </>
+  );
 }