Merge pull request #22 from ibs0d/codex/update-mse-video-fill-in-draggable-grid

Make draggable live grid MSE tiles fill card area

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={() => {

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",