Use cn() for class names throughout (#11278)

* add scrollbar on ptz presets dropdown

* use cn function for class names throughout

* Revert "add scrollbar on ptz presets dropdown"

This reverts commit 2cee93dc3e.

web/src/components/player/BirdseyeLivePlayer.tsx

@@ -4,6 +4,7 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import JSMpegPlayer from "./JSMpegPlayer";
 import MSEPlayer from "./MsePlayer";
 import { LivePlayerMode } from "@/types/live";
+import { cn } from "@/lib/utils";
 
 type LivePlayerProps = {
   className?: string;
@@ -57,7 +58,10 @@ export default function BirdseyeLivePlayer({
 
   return (
     <div
-      className={`relative flex justify-center w-full cursor-pointer ${className ?? ""}`}
+      className={cn(
+        "relative flex justify-center w-full cursor-pointer",
+        className,
+      )}
       onClick={onClick}
     >
       <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>

web/src/components/player/LivePlayer.tsx

@@ -13,6 +13,7 @@ import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 import { getIconForLabel } from "@/utils/iconUtil";
 import Chip from "../indicators/Chip";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
+import { cn } from "@/lib/utils";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -150,11 +151,16 @@ export default function LivePlayer({
     <div
       ref={cameraRef}
       data-camera={cameraConfig.name}
-      className={`relative flex justify-center ${liveMode == "jsmpeg" ? "size-full" : "w-full"} outline cursor-pointer ${
+      className={cn(
+        "relative flex justify-center",
+        liveMode === "jsmpeg" ? "size-full" : "w-full",
+        "outline cursor-pointer",
         activeTracking
           ? "outline-severity_alert outline-3 rounded-lg md:rounded-2xl shadow-severity_alert"
-          : "outline-0 outline-background"
-      } transition-all duration-500 ${className}`}
+          : "outline-0 outline-background",
+        "transition-all duration-500",
+        className,
+      )}
       onClick={onClick}
     >
       <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>

web/src/components/player/PreviewPlayer.tsx

@@ -15,6 +15,7 @@ import { baseUrl } from "@/api/baseUrl";
 import { isAndroid, isChrome, isMobile } from "react-device-detect";
 import { TimeRange } from "@/types/timeline";
 import { Skeleton } from "../ui/skeleton";
+import { cn } from "@/lib/utils";
 
 type PreviewPlayerProps = {
   className?: string;
@@ -238,7 +239,11 @@ function PreviewVideoPlayer({
 
   return (
     <div
-      className={`relative rounded-lg md:rounded-2xl w-full flex justify-center bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
+      className={cn(
+        "relative rounded-lg md:rounded-2xl w-full flex justify-center bg-black overflow-hidden",
+        onClick && "cursor-pointer",
+        className,
+      )}
       onClick={onClick}
     >
       <img
@@ -476,7 +481,11 @@ function PreviewFramesPlayer({
 
   return (
     <div
-      className={`relative w-full flex justify-center ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
+      className={cn(
+        "relative w-full flex justify-center",
+        className,
+        onClick && "cursor-pointer",
+      )}
       onClick={onClick}
     >
       <img

web/src/components/player/VideoControls.tsx

@@ -29,6 +29,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "../ui/alert-dialog";
+import { cn } from "@/lib/utils";
 
 type VideoControls = {
   volume?: boolean;
@@ -161,7 +162,10 @@ export default function VideoControls({
 
   return (
     <div
-      className={`px-4 py-2 flex justify-between items-center gap-8 text-primary z-50 bg-background/60 rounded-lg ${className ?? ""}`}
+      className={cn(
+        "px-4 py-2 flex justify-between items-center gap-8 text-primary z-50 bg-background/60 rounded-lg",
+        className,
+      )}
     >
       {video && features.volume && (
         <div className="flex justify-normal items-center gap-2 cursor-pointer">

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -11,6 +11,7 @@ import { TimeRange } from "@/types/timeline";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { VideoResolutionType } from "@/types/live";
 import axios from "axios";
+import { cn } from "@/lib/utils";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -202,7 +203,10 @@ export default function DynamicVideoPlayer({
         onUploadFrame={onUploadFrameToPlus}
       />
       <PreviewPlayer
-        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}
+        className={cn(
+          isScrubbing || isLoading ? "visible" : "hidden",
+          className,
+        )}
         camera={camera}
         timeRange={timeRange}
         cameraPreviews={cameraPreviews}