Use prettier-plugin-tailwindcss (#11373)

* use prettier-plugin-tailwindcss to keep class names organized

* use prettierrc file to ensure formatting on save works with vscode

* classname reorder with prettier-plugin-tailwindcss

web/src/components/player/BirdseyeLivePlayer.tsx

@@ -23,7 +23,7 @@ export default function BirdseyeLivePlayer({
   if (liveMode == "webrtc") {
     player = (
       <WebRtcPlayer
-        className={`rounded-lg md:rounded-2xl size-full`}
+        className={`size-full rounded-lg md:rounded-2xl`}
         camera="birdseye"
       />
     );
@@ -31,7 +31,7 @@ export default function BirdseyeLivePlayer({
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
       player = (
         <MSEPlayer
-          className={`rounded-lg md:rounded-2xl size-full`}
+          className={`size-full rounded-lg md:rounded-2xl`}
           camera="birdseye"
         />
       );
@@ -46,7 +46,7 @@ export default function BirdseyeLivePlayer({
   } else if (liveMode == "jsmpeg") {
     player = (
       <JSMpegPlayer
-        className="size-full flex justify-center rounded-lg md:rounded-2xl overflow-hidden"
+        className="flex size-full justify-center overflow-hidden rounded-lg md:rounded-2xl"
         camera="birdseye"
         width={birdseyeConfig.width}
         height={birdseyeConfig.height}
@@ -59,13 +59,13 @@ export default function BirdseyeLivePlayer({
   return (
     <div
       className={cn(
-        "relative flex justify-center w-full cursor-pointer",
+        "relative flex w-full cursor-pointer justify-center",
         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>
-      <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
+      <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl"></div>
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl"></div>
       <div className="size-full">{player}</div>
     </div>
   );

web/src/components/player/HlsVideoPlayer.tsx

@@ -153,7 +153,7 @@ export default function HlsVideoPlayer({
   return (
     <TransformWrapper minScale={1.0}>
       <VideoControls
-        className="absolute bottom-5 left-1/2 -translate-x-1/2 z-50"
+        className="absolute bottom-5 left-1/2 z-50 -translate-x-1/2"
         video={videoRef.current}
         isPlaying={isPlaying}
         show={visible && (controls || controlsOpen)}
@@ -231,7 +231,7 @@ export default function HlsVideoPlayer({
       >
         <video
           ref={videoRef}
-          className={`size-full bg-black rounded-lg md:rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
+          className={`size-full rounded-lg bg-black md:rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
           preload="auto"
           autoPlay
           controls={false}

web/src/components/player/LivePlayer.tsx

@@ -103,7 +103,7 @@ export default function LivePlayer({
   if (liveMode == "webrtc") {
     player = (
       <WebRtcPlayer
-        className={`rounded-lg md:rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
+        className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
         camera={cameraConfig.live.stream_name}
         playbackEnabled={cameraActive}
         audioEnabled={playAudio}
@@ -117,7 +117,7 @@ export default function LivePlayer({
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
       player = (
         <MSEPlayer
-          className={`rounded-lg md:rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
+          className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
           camera={cameraConfig.live.stream_name}
           playbackEnabled={cameraActive}
           audioEnabled={playAudio}
@@ -137,7 +137,7 @@ export default function LivePlayer({
   } else if (liveMode == "jsmpeg") {
     player = (
       <JSMpegPlayer
-        className="size-full flex justify-center rounded-lg md:rounded-2xl overflow-hidden"
+        className="flex size-full justify-center overflow-hidden rounded-lg md:rounded-2xl"
         camera={cameraConfig.live.stream_name}
         width={cameraConfig.detect.width}
         height={cameraConfig.detect.height}
@@ -154,17 +154,17 @@ export default function LivePlayer({
       className={cn(
         "relative flex justify-center",
         liveMode === "jsmpeg" ? "size-full" : "w-full",
-        "outline cursor-pointer",
+        "cursor-pointer outline",
         activeTracking
-          ? "outline-severity_alert outline-3 rounded-lg md:rounded-2xl shadow-severity_alert"
+          ? "outline-3 rounded-lg shadow-severity_alert outline-severity_alert md:rounded-2xl"
           : "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>
-      <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
+      <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl"></div>
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl"></div>
       {player}
 
       {objects.length > 0 && (
@@ -172,9 +172,9 @@ export default function LivePlayer({
           <Tooltip>
             <div className="flex">
               <TooltipTrigger asChild>
-                <div className="mx-3 pb-1 text-white text-sm">
+                <div className="mx-3 pb-1 text-sm text-white">
                   <Chip
-                    className={`flex items-start justify-between space-x-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0`}
+                    className={`z-0 flex items-start justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500`}
                   >
                     {[
                       ...new Set([
@@ -226,7 +226,7 @@ export default function LivePlayer({
 
       <div className="absolute right-2 top-2 size-4">
         {activeMotion && (
-          <MdCircle className="size-2 drop-shadow-md shadow-danger text-danger animate-pulse" />
+          <MdCircle className="size-2 animate-pulse text-danger shadow-danger drop-shadow-md" />
         )}
       </div>
     </div>

web/src/components/player/PreviewPlayer.tsx

@@ -240,7 +240,7 @@ function PreviewVideoPlayer({
   return (
     <div
       className={cn(
-        "relative rounded-lg md:rounded-2xl w-full flex justify-center bg-black overflow-hidden",
+        "relative flex w-full justify-center overflow-hidden rounded-lg bg-black md:rounded-2xl",
         onClick && "cursor-pointer",
         className,
       )}
@@ -288,11 +288,11 @@ function PreviewVideoPlayer({
         )}
       </video>
       {cameraPreviews && !currentPreview && (
-        <div className="absolute inset-0 text-white rounded-lg md:rounded-2xl flex justify-center items-center">
+        <div className="absolute inset-0 flex items-center justify-center rounded-lg text-white md:rounded-2xl">
           No Preview Found
         </div>
       )}
-      {firstLoad && <Skeleton className="absolute size-full aspect-video" />}
+      {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
     </div>
   );
 }
@@ -482,7 +482,7 @@ function PreviewFramesPlayer({
   return (
     <div
       className={cn(
-        "relative w-full flex justify-center",
+        "relative flex w-full justify-center",
         className,
         onClick && "cursor-pointer",
       )}
@@ -490,15 +490,15 @@ function PreviewFramesPlayer({
     >
       <img
         ref={imgRef}
-        className={`size-full object-contain rounded-lg md:rounded-2xl bg-black`}
+        className={`size-full rounded-lg bg-black object-contain md:rounded-2xl`}
         onLoad={onImageLoaded}
       />
       {previewFrames?.length === 0 && (
-        <div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-lg md:rounded-2xl align-center text-center">
+        <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-black text-center text-white md:rounded-2xl">
           No Preview Found
         </div>
       )}
-      {firstLoad && <Skeleton className="absolute size-full aspect-video" />}
+      {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
     </div>
   );
 }

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -207,7 +207,7 @@ export default function PreviewThumbnailPlayer({
       <div className={`${imgLoaded ? "visible" : "invisible"}`}>
         <img
           ref={imgRef}
-          className={`size-full transition-opacity select-none ${
+          className={`size-full select-none transition-opacity ${
             playingBack ? "opacity-0" : "opacity-100"
           }`}
           style={
@@ -234,12 +234,12 @@ export default function PreviewThumbnailPlayer({
               onMouseLeave={() => setTooltipHovering(false)}
             >
               <TooltipTrigger asChild>
-                <div className="mx-3 pb-1 text-white text-sm">
+                <div className="mx-3 pb-1 text-sm text-white">
                   {(review.severity == "alert" ||
                     review.severity == "detection") && (
                     <>
                       <Chip
-                        className={`flex items-start justify-between space-x-1 ${playingBack ? "hidden" : ""} bg-gradient-to-br ${review.has_been_reviewed ? "from-green-600 to-green-700 bg-green-600" : "from-gray-400 to-gray-500 bg-gray-500"} z-0`}
+                        className={`flex items-start justify-between space-x-1 ${playingBack ? "hidden" : ""} bg-gradient-to-br ${review.has_been_reviewed ? "bg-green-600 from-green-600 to-green-700" : "bg-gray-500 from-gray-400 to-gray-500"} z-0`}
                       >
                         {review.data.objects.sort().map((object) => {
                           return getIconForLabel(object, "size-3 text-white");
@@ -273,9 +273,9 @@ export default function PreviewThumbnailPlayer({
         </div>
         {!playingBack && (
           <>
-            <div className="absolute top-0 inset-x-0 rounded-t-l z-10 w-full h-[30%] bg-gradient-to-b from-black/60 to-transparent pointer-events-none"></div>
-            <div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none">
-              <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm">
+            <div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
+            <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent">
+              <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
                 {review.end_time ? (
                   <TimeAgo time={review.start_time * 1000} dense />
                 ) : (
@@ -557,10 +557,10 @@ export function VideoPreview({
   );
 
   return (
-    <div className="relative size-full aspect-video bg-black">
+    <div className="relative aspect-video size-full bg-black">
       <video
         ref={playerRef}
-        className="size-full aspect-video bg-black pointer-events-none"
+        className="pointer-events-none aspect-video size-full bg-black"
         autoPlay
         playsInline
         preload="auto"
@@ -738,9 +738,9 @@ export function InProgressPreview({
   }
 
   return (
-    <div className="relative size-full flex items-center bg-black">
+    <div className="relative flex size-full items-center bg-black">
       <img
-        className="size-full object-contain pointer-events-none"
+        className="pointer-events-none size-full object-contain"
         src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.webp`}
         onLoad={handleLoad}
       />

web/src/components/player/VideoControls.tsx

@@ -171,16 +171,16 @@ export default function VideoControls({
   return (
     <div
       className={cn(
-        "w-auto px-4 py-2 flex sm:flex-nowrap justify-between items-center gap-4 sm:gap-8 text-primary z-50 bg-background/60 rounded-lg",
+        "z-50 flex w-auto items-center justify-between gap-4 rounded-lg bg-background/60 px-4 py-2 text-primary sm:flex-nowrap sm:gap-8",
         className,
         isMobileOnly &&
           Object.values(features).filter((feat) => feat).length >
             MIN_ITEMS_WRAP &&
-          "flex-wrap min-w-[75%]",
+          "min-w-[75%] flex-wrap",
       )}
     >
       {video && features.volume && (
-        <div className="flex justify-normal items-center gap-2 cursor-pointer">
+        <div className="flex cursor-pointer items-center justify-normal gap-2">
           <VolumeIcon
             className="size-5"
             onClick={(e: React.MouseEvent) => {
@@ -208,9 +208,9 @@ export default function VideoControls({
       )}
       <div className="cursor-pointer" onClick={onTogglePlay}>
         {isPlaying ? (
-          <LuPause className="size-5 text-primary fill-primary" />
+          <LuPause className="size-5 fill-primary text-primary" />
         ) : (
-          <LuPlay className="size-5 text-primary fill-primary" />
+          <LuPlay className="size-5 fill-primary text-primary" />
         )}
       </div>
       {features.seek && (