Masonry layout

web/src/components/player/LivePlayer.tsx

@@ -1,5 +1,5 @@
 import WebRtcPlayer from "./WebRTCPlayer";
-import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
+import { CameraConfig } from "@/types/frigateConfig";
 import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
 import ActivityIndicator from "../ui/activity-indicator";
 import { Button } from "../ui/button";
@@ -11,7 +11,6 @@ import { Label } from "../ui/label";
 import { usePersistence } from "@/hooks/use-persistence";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
-import useSWR from "swr";
 import { MdCircle } from "react-icons/md";
 import Chip from "../Chip";
 
@@ -30,7 +29,6 @@ export default function LivePlayer({
   cameraConfig,
   liveMode = "mse",
 }: LivePlayerProps) {
-  const { data: config } = useSWR<FrigateConfig>("config");
   const [showSettings, setShowSettings] = useState(false);
 
   const [options, setOptions] = usePersistence(
@@ -76,10 +74,11 @@ export default function LivePlayer({
     );
   } else if (liveMode == "mse") {
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
+      const camera = cameraConfig.name == "front_doorbell_cam" ? "portrait_cam" : cameraConfig.name
       player = (
         <MSEPlayer
           className="rounded-2xl"
-          camera={cameraConfig.live.stream_name}
+          camera={camera}
         />
       );
     } else {
@@ -132,9 +131,13 @@ export default function LivePlayer({
 
   return (
     <div className={`relative flex justify-center ${className}`}>
-
       {player}
-
+      <Chip className="absolute right-2 top-2 bg-gray-500 bg-gradient-to-br">
+        <MdCircle className="w-2 h-2 text-danger" />
+        <div className="ml-1 capitalize text-white text-xs">
+          {cameraConfig.name.replaceAll("_", " ")}
+        </div>
+      </Chip>
     </div>
   );
 }

web/src/pages/Live.tsx

@@ -77,12 +77,20 @@ function Live() {
         </ScrollArea>
       )}
 
-      <div className="mt-4 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
+      <div className="mt-4 grid grid-rows-masonry grid-cols-3 gap-4">
         {cameras.map((camera) => {
+          let grow;
+          if (camera.detect.width / camera.detect.height > 2) {
+            grow = "h-[424px] col-end-span-2";
+          } else if (camera.name == "front_doorbell_cam") {
+            grow = "h-[840px]";
+          } else {
+            grow = "h-[425px]";
+          }
           return (
             <LivePlayer
               key={camera.name}
-              className="rounded-2xl bg-black h-[428px]"
+              className={`rounded-2xl bg-black ${grow}`}
               cameraConfig={camera}
             />
           );

web/tailwind.config.js

@@ -82,6 +82,15 @@ module.exports = {
         "3xl": "1920px",
         "4xl": "2560px",
       },
+      gridTemplateColumns: {
+        '3': 'repeat(3, 1fr)',
+      },
+      gridTemplateRows: {
+        'masonry': 'masonry',
+      },
+      gridColumnEnd: {
+        'span-2': 'span 2',
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],