Revamp mobile UI (#10103)

* Simplify nav components

* Allow ability to choose live layout on mobile

* Combine event views

* Undo vite

* Fix autoplay

* Remove import

* Show filters on mobile view

* Spacing

* Don't separate properties

web/src/pages/Events.tsx

@@ -1,12 +1,10 @@
 import useApiFilter from "@/hooks/use-api-filter";
 import useOverlayState from "@/hooks/use-overlay-state";
 import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
-import DesktopEventView from "@/views/events/DesktopEventView";
 import DesktopRecordingView from "@/views/events/DesktopRecordingView";
-import MobileEventView from "@/views/events/MobileEventView";
+import EventView from "@/views/events/EventView";
 import axios from "axios";
 import { useCallback, useMemo, useState } from "react";
-import { isMobile } from "react-device-detect";
 import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
 
@@ -209,24 +207,8 @@ export default function Events() {
       />
     );
   } else {
-    if (isMobile) {
-      return (
-        <MobileEventView
-          reviewPages={reviewPages}
-          relevantPreviews={allPreviews}
-          reachedEnd={isDone}
-          isValidating={isValidating}
-          severity={severity}
-          setSeverity={setSeverity}
-          loadNextPage={onLoadNextPage}
-          markItemAsReviewed={markItemAsReviewed}
-          pullLatestData={reloadData}
-        />
-      );
-    }
-
     return (
-      <DesktopEventView
+      <EventView
         reviewPages={reviewPages}
         relevantPreviews={allPreviews}
         timeRange={selectedTimeRange}

web/src/pages/Live.tsx

@@ -1,17 +1,26 @@
 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 { CiGrid2H, 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 +89,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 inset-y-0 inset-x-1/2 -translate-x-1/2 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")}
+            >
+              <CiGrid2H className="m-1" />
+            </Button>
+          </div>
+        </div>
+      )}
+
       {events && events.length > 0 && (
         <ScrollArea>
           <TooltipProvider>
@@ -93,21 +127,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-2 md: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"}