administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-18 14:18:21 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Make draggable live grid MSE video use cover fit

Browse Source
This commit is contained in:
ibs0d 2026-03-08 19:27:11 +11:00
parent defa1dfabd
commit 937460abd0
2 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/player/MsePlayer.tsx
View File

@ -6,6 +6,7 @@ import {
VideoResolutionType, VideoResolutionType,
} from "@/types/live"; } from "@/types/live";
import { import {
CSSProperties,
SetStateAction, SetStateAction,
useCallback, useCallback,
useEffect, useEffect,
@ -799,6 +800,10 @@ function MSEPlayer({
<video <video
ref={videoRef} ref={videoRef}
className={className} className={className}
style={{
objectFit:
"var(--frigate-mse-object-fit, fill)" as CSSProperties["objectFit"],
}}
playsInline playsInline
preload="auto" preload="auto"
onLoadedData={() => { onLoadedData={() => {

2
web/src/views/live/DraggableGridLayout.tsx
View File

@ -669,7 +669,7 @@ export default function DraggableGridLayout({
useWebGL={useWebGL} useWebGL={useWebGL}
cameraRef={cameraRef} cameraRef={cameraRef}
className={cn( 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 && isEditMode &&
showCircles && showCircles &&
"outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing", "outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",