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

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),

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),

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,10 +244,25 @@ 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"
           >
+            {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
@@ -256,12 +272,33 @@ export default function EventView({
                     <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"
           >
+            {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
@@ -271,18 +308,25 @@ export default function EventView({
                     <ActivityIndicator className="ml-2 size-4" />
                   )}
                 </div>
+              </>
+            )}
           </ToggleGroupItem>
           <ToggleGroupItem
-            className={`rounded-lg px-3 py-4 ${
+            className={cn(
-              severityToggle == "significant_motion"
+              "rounded-lg px-3 py-4",
-                ? ""
+              severityToggle != "significant_motion" && "text-muted-foreground",
-                : "text-muted-foreground"
+            )}
-            }`}
             value="significant_motion"
             aria-label="Select motion"
           >
+            {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>