From 937460abd0bbfdeccbc223f7ab6ee25bf74c002f Mon Sep 17 00:00:00 2001
From: ibs0d <53568938+ibs0d@users.noreply.github.com>
Date: Sun, 8 Mar 2026 19:27:11 +1100
Subject: [PATCH] Make draggable live grid MSE video use cover fit

---
 web/src/components/player/MsePlayer.tsx    | 5 +++++
 web/src/views/live/DraggableGridLayout.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 7c9619e46..0dfd480dd 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -6,6 +6,7 @@ import {
   VideoResolutionType,
 } from "@/types/live";
 import {
+  CSSProperties,
   SetStateAction,
   useCallback,
   useEffect,
@@ -799,6 +800,10 @@ function MSEPlayer({
     <video
       ref={videoRef}
       className={className}
+      style={{
+        objectFit:
+          "var(--frigate-mse-object-fit, fill)" as CSSProperties["objectFit"],
+      }}
       playsInline
       preload="auto"
       onLoadedData={() => {
diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index 02ed3af3a..33ac8c50e 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -669,7 +669,7 @@ export default function DraggableGridLayout({
                     useWebGL={useWebGL}
                     cameraRef={cameraRef}
                     className={cn(
-                      "size-full rounded-lg bg-black md:rounded-2xl",
+                      "draggable-live-grid-mse-cover size-full rounded-lg bg-black [--frigate-mse-object-fit:cover] md:rounded-2xl",
                       isEditMode &&
                         showCircles &&
                         "outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",