fix: prevent video stretching in timeline scrubbing preview

- MsePlayer: change default object-fit fallback from fill to contain
  (grid layout keeps fill via --frigate-mse-object-fit:fill CSS variable)
- PreviewPlayer: add object-contain class to video element
- HlsVideoPlayer: add object-contain class to video element

Recordings view and timeline preview now preserve aspect ratio,
while live grid continues to stretch corridor cameras as before.
This commit is contained in:
Claude 2026-03-20 09:47:54 +00:00
parent e947e1ede7
commit 90d9c444c8
No known key found for this signature in database
3 changed files with 3 additions and 3 deletions

View File

@ -390,7 +390,7 @@ export default function HlsVideoPlayer({
)} )}
<video <video
ref={videoRef} ref={videoRef}
className={`size-full rounded-lg bg-black md:rounded-2xl ${loadedMetadata ? "" : "invisible"} cursor-pointer`} className={`size-full object-contain rounded-lg bg-black md:rounded-2xl ${loadedMetadata ? "" : "invisible"} cursor-pointer`}
preload="auto" preload="auto"
autoPlay autoPlay
controls={!frigateControls} controls={!frigateControls}

View File

@ -849,7 +849,7 @@ function MSEPlayer({
className={className} className={className}
style={{ style={{
objectFit: objectFit:
"var(--frigate-mse-object-fit, fill)" as CSSProperties["objectFit"], "var(--frigate-mse-object-fit, contain)" as CSSProperties["objectFit"],
transform: transform:
"var(--frigate-mse-grid-rotation, none)" as CSSProperties["transform"], "var(--frigate-mse-grid-rotation, none)" as CSSProperties["transform"],
transformOrigin: transformOrigin:

View File

@ -303,7 +303,7 @@ function PreviewVideoPlayer({
{isVisible && ( {isVisible && (
<video <video
ref={previewRef} ref={previewRef}
className={`absolute size-full ${currentHourFrame ? "invisible" : "visible"}`} className={`absolute size-full object-contain ${currentHourFrame ? "invisible" : "visible"}`}
preload="auto" preload="auto"
autoPlay autoPlay
playsInline playsInline