Use fixed height

web/src/components/image/EventThumbnail.tsx

@@ -0,0 +1,24 @@
+import { baseUrl } from "@/api/baseUrl";
+import { Event as FrigateEvent } from "@/types/event";
+import { LuStar } from "react-icons/lu";
+
+type EventThumbnailProps = {
+  event: FrigateEvent;
+  onFavorite?: (e: Event, event: FrigateEvent) => void;
+};
+export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) {
+  return (
+    <div
+      className="relative rounded bg-cover w-40 h-24 bg-no-repeat bg-center mr-4"
+      style={{
+        backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
+      }}
+    >
+      <LuStar
+        className="h-6 w-6 text-yellow-300 absolute top-1 right-1 cursor-pointer"
+        onClick={(e: Event) => (onFavorite ? onFavorite(e, event) : null)}
+        fill={event.retain_indefinitely ? "currentColor" : "none"}
+      />
+    </div>
+  );
+}

web/src/components/player/LivePlayer.tsx

@@ -78,7 +78,7 @@ export default function LivePlayer({
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
       player = (
         <MSEPlayer
-          className="rounded-2xl w-full"
+          className="rounded-2xl"
           camera={cameraConfig.live.stream_name}
         />
       );
@@ -131,14 +131,10 @@ export default function LivePlayer({
   }
 
   return (
-    <div className={`relative ${className}`}>
+    <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

@@ -1,11 +1,10 @@
-import { baseUrl } from "@/api/baseUrl";
+import { EventThumbnail } from "@/components/image/EventThumbnail";
 import LivePlayer from "@/components/player/LivePlayer";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Event as FrigateEvent } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { LuStar } from "react-icons/lu";
 import useSWR from "swr";
 
 function Live() {
@@ -16,7 +15,7 @@ function Live() {
   const [recentCutoff, setRecentCutoff] = useState<number>(0);
   useEffect(() => {
     const date = new Date();
-    date.setHours(date.getHours() - 12);
+    date.setHours(date.getHours() - 4);
     setRecentCutoff(date.getTime() / 1000);
 
     const intervalId: NodeJS.Timeout = setInterval(() => {
@@ -66,19 +65,11 @@ function Live() {
           <div className="flex">
             {events.map((event) => {
               return (
-                <div
+                <EventThumbnail
                   key={event.id}
-                  className="relative rounded bg-cover w-40 h-24 bg-no-repeat bg-center mr-4"
+                  event={event}
-                  style={{
+                  onFavorite={onFavorite}
-                    backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
+                />
-                  }}
-                >
-                  <LuStar
-                    className="h-6 w-6 text-yellow-300 absolute top-1 right-1 cursor-pointer"
-                    onClick={(e: Event) => onFavorite(e, event)}
-                    fill={event.retain_indefinitely ? "currentColor" : "none"}
-                  />
-                </div>
               );
             })}
           </div>
@@ -91,7 +82,7 @@ function Live() {
           return (
             <LivePlayer
               key={camera.name}
-              className="rounded-2xl"
+              className="rounded-2xl bg-black h-[428px]"
               cameraConfig={camera}
             />
           );