UI Tweaks (#11931)

* Show number of items instead of dot * Don't call error when connection has been closed on purpose * Use motion icon for motion * Show text on tablets as well
blakeblackshear · Jun 13, 2024 · e56ce99 · e56ce99
1 parent 3e1861e
commit e56ce99
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 30 deletions.
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
@@ -328,7 +328,10 @@ function MSEPlayer({
 
  setBufferTimeout(
  setTimeout(() => {
- if (document.visibilityState === "visible") {
+ if (
+ document.visibilityState === "visible" &&
+ wsRef.current != undefined
+ ) {
  onError("stalled");
  }
  }, 3000),

diff --git a/web/src/components/player/WebRTCPlayer.tsx b/web/src/components/player/WebRTCPlayer.tsx
@@ -238,7 +238,10 @@ export default function WebRtcPlayer({
 
  setBufferTimeout(
  setTimeout(() => {
- if (document.visibilityState === "visible") {
+ if (
+ document.visibilityState === "visible" &&
+ pcRef.current != undefined
+ ) {
  onError("stalled");
  }
  }, 3000),

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
@@ -29,7 +29,7 @@ import {
  useRef,
  useState,
 } from "react";
-import { isDesktop, isMobile } from "react-device-detect";
+import { isDesktop, isMobile, isMobileOnly } from "react-device-detect";
 import { LuFolderCheck, LuFolderX } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
@@ -50,6 +50,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { FilterList } from "@/types/filter";
+import { GiSoundWaves } from "react-icons/gi";
 
 type EventViewProps = {
  reviewItems?: SegmentedReviewData;
@@ -243,46 +244,89 @@ export default function EventView({
  } // don't allow the severity to be unselected
  >
  <ToggleGroupItem
- className={`${severityToggle == "alert" ? "" : "text-muted-foreground"}`}
+ className={cn(severityToggle != "alert" && "text-muted-foreground")}
  value="alert"
  aria-label="Select alerts"
  >
- <MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
- <div className="hidden md:flex md:flex-row md:items-center">
- Alerts
- {reviewCounts.alert > -1 ? (
- ` ∙ ${reviewCounts.alert}`
- ) : (
- <ActivityIndicator className="ml-2 size-4" />
- )}
- </div>
+ {isMobileOnly ? (
+ <div
+ className={cn(
+ "flex size-6 items-center justify-center rounded text-severity_alert",
+ severityToggle == "alert" ? "font-semibold" : "font-medium",
+ )}
+ >
+ {reviewCounts.alert > -1 ? (
+ reviewCounts.alert
+ ) : (
+ <ActivityIndicator className="size-4" />
+ )}
+ </div>
+ ) : (
+ <>
+ <MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
+ <div className="hidden md:flex md:flex-row md:items-center">
+ Alerts
+ {reviewCounts.alert > -1 ? (
+ ` ∙ ${reviewCounts.alert}`
+ ) : (
+ <ActivityIndicator className="ml-2 size-4" />
+ )}
+ </div>
+ </>
+ )}
  </ToggleGroupItem>
  <ToggleGroupItem
- className={`${severityToggle == "detection" ? "" : "text-muted-foreground"}`}
+ className={cn(
+ severityToggle != "detection" && "text-muted-foreground",
+ )}
  value="detection"
  aria-label="Select detections"
  >
- <MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
- <div className="hidden md:flex md:flex-row md:items-center">
- Detections
- {reviewCounts.detection > -1 ? (
- ` ∙ ${reviewCounts.detection}`
- ) : (
- <ActivityIndicator className="ml-2 size-4" />
- )}
- </div>
+ {isMobileOnly ? (
+ <div
+ className={cn(
+ "flex size-6 items-center justify-center rounded text-severity_detection",
+ severityToggle == "detection"
+ ? "font-semibold"
+ : "font-medium",
+ )}
+ >
+ {reviewCounts.detection > -1 ? (
+ reviewCounts.detection
+ ) : (
+ <ActivityIndicator className="size-4" />
+ )}
+ </div>
+ ) : (
+ <>
+ <MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
+ <div className="hidden md:flex md:flex-row md:items-center">
+ Detections
+ {reviewCounts.detection > -1 ? (
+ ` ∙ ${reviewCounts.detection}`
+ ) : (
+ <ActivityIndicator className="ml-2 size-4" />
+ )}
+ </div>
+ </>
+ )}
  </ToggleGroupItem>
  <ToggleGroupItem
- className={`rounded-lg px-3 py-4 ${
- severityToggle == "significant_motion"
- ? ""
- : "text-muted-foreground"
- }`}
+ className={cn(
+ "rounded-lg px-3 py-4",
+ severityToggle != "significant_motion" && "text-muted-foreground",
+ )}
  value="significant_motion"
  aria-label="Select motion"
  >
- <MdCircle className="size-2 text-severity_significant_motion md:mr-[10px]" />
- <div className="hidden md:block">Motion</div>
+ {isMobileOnly ? (
+ <GiSoundWaves className="size-6 rotate-90 text-severity_significant_motion" />
+ ) : (
+ <>
+ <MdCircle className="size-2 text-severity_significant_motion md:mr-[10px]" />
+ <div className="hidden md:block">Motion</div>
+ </>
+ )}
  </ToggleGroupItem>
  </ToggleGroup>