Allow ability to choose live layout on mobile

web/src/components/player/LivePlayer.tsx

@@ -12,6 +12,7 @@ import useCameraActivity from "@/hooks/use-camera-activity";
 import { useRecordingsState } from "@/api/ws";
 import { LivePlayerMode } from "@/types/live";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
+import { isDesktop } from "react-device-detect";
 
 type LivePlayerProps = {
   className?: string;
@@ -153,7 +154,7 @@ export default function LivePlayer({
           className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
         >
           <MdLeakAdd className="w-4 h-4 text-motion" />
-          <div className="ml-1 text-white text-xs">Motion</div>
+          <div className="hidden md:block ml-1 text-white text-xs">Motion</div>
         </Chip>
 
         {cameraConfig.audio.enabled_in_config && (
@@ -162,19 +163,21 @@ export default function LivePlayer({
             className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
           >
             <BsSoundwave className="w-4 h-4 text-audio" />
-            <div className="ml-1 text-white text-xs">Sound</div>
+            <div className="hidden md:block ml-1 text-white text-xs">Sound</div>
           </Chip>
         )}
       </div>
 
-      <Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
+      {isDesktop && (
-        {recording == "ON" && (
+        <Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
-          <MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" />
+          {recording == "ON" && (
-        )}
+            <MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" />
-        <div className="ml-1 capitalize text-white text-xs">
+          )}
-          {cameraConfig.name.replaceAll("_", " ")}
+          <div className="ml-1 capitalize text-white text-xs">
-        </div>
+            {cameraConfig.name.replaceAll("_", " ")}
-      </Chip>
+          </div>
+        </Chip>
+      )}
     </div>
   );
 }

web/src/pages/Live.tsx

@@ -1,17 +1,27 @@
 import { useFrigateEvents } from "@/api/ws";
+import Logo from "@/components/Logo";
 import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail";
 import LivePlayer from "@/components/player/LivePlayer";
+import { Button } from "@/components/ui/button";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Event as FrigateEvent } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { isSafari } from "react-device-detect";
+import { isDesktop, isMobile, isSafari } from "react-device-detect";
+import { LuGrid } from "react-icons/lu";
+import { CiGrid2V, CiGrid31 } from "react-icons/ci";
 import useSWR from "swr";
 
 function Live() {
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  // layout
+
+  const [layout, setLayout] = useState<"grid" | "list">(
+    isDesktop ? "grid" : "list"
+  );
+
   // recent events
   const { payload: eventUpdate } = useFrigateEvents();
   const { data: allEvents, mutate: updateEvents } = useSWR<FrigateEvent[]>([
@@ -80,6 +90,31 @@ function Live() {
 
   return (
     <div className="w-full h-full overflow-y-scroll px-2">
+      {isMobile && (
+        <div className="relative h-9 flex items-center justify-between">
+          <Logo className="absolute w-full h-8" />
+          <div />
+          <div className="flex items-center gap-1">
+            <Button
+              className={layout == "grid" ? "text-blue-600 bg-blue-200" : ""}
+              size="xs"
+              variant="secondary"
+              onClick={() => setLayout("grid")}
+            >
+              <CiGrid31 className="m-1" />
+            </Button>
+            <Button
+              className={layout == "list" ? "text-blue-600 bg-blue-200" : ""}
+              size="xs"
+              variant="secondary"
+              onClick={() => setLayout("list")}
+            >
+              <CiGrid2V className="m-1" />
+            </Button>
+          </div>
+        </div>
+      )}
+
       {events && events.length > 0 && (
         <ScrollArea>
           <TooltipProvider>
@@ -93,21 +128,23 @@ function Live() {
         </ScrollArea>
       )}
 
-      <div className="mt-4 md:grid md:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-4">
+      <div
+        className={`mt-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-4`}
+      >
         {cameras.map((camera) => {
           let grow;
           let aspectRatio = camera.detect.width / camera.detect.height;
           if (aspectRatio > 2) {
-            grow = "md:col-span-2 aspect-wide";
+            grow = `${layout == "grid" ? "col-span-2" : ""} aspect-wide`;
           } else if (aspectRatio < 1) {
-            grow = `md:row-span-2 aspect-tall md:h-full`;
+            grow = `${layout == "grid" ? "row-span-2 aspect-tall md:h-full" : ""} aspect-tall`;
           } else {
             grow = "aspect-video";
           }
           return (
             <LivePlayer
               key={camera.name}
-              className={`mb-2 md:mb-0 rounded-2xl bg-black ${grow}`}
+              className={`rounded-2xl bg-black ${grow}`}
               windowVisible={windowVisible}
               cameraConfig={camera}
               preferredLiveMode={isSafari ? "webrtc" : "mse"}