administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-05 22:57:40 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: preserve aspect ratio in preview players during timeline scrubbing

Browse Source 
Replace size-full (100%×100%) on img/video elements with max-h-full max-w-full
so portrait (9:16) and 4:3 cameras maintain their natural proportions during
scrubbing in RecordingView. Add items-center to flex containers so content
stays vertically centered within the available space.

https://claude.ai/code/session_01H1uowWMpsNm1U8HdcSP8AA
This commit is contained in:
Claude 2026-03-21 01:34:18 +00:00
parent f481d6de5a
commit 6d6b800674
No known key found for this signature in database
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/player/PreviewPlayer.tsx
View File

@ -281,7 +281,7 @@ function PreviewVideoPlayer({
<div
ref={visibilityRef}
className={cn(
"relative flex w-full justify-center overflow-hidden rounded-lg bg-black md:rounded-2xl",
"relative flex w-full items-center justify-center overflow-hidden rounded-lg bg-black md:rounded-2xl",
onClick && "cursor-pointer",
className,
)}
@ -289,7 +289,7 @@ function PreviewVideoPlayer({
onClick={onClick}
>
<img
className={`absolute size-full object-contain ${currentHourFrame ? "visible" : "invisible"}`}
className={`max-h-full max-w-full object-contain ${currentHourFrame ? "visible" : "invisible"}`}
src={currentHourFrame}
onLoad={() => {
if (changeoverTimeout) {
@ -303,7 +303,7 @@ function PreviewVideoPlayer({
{isVisible && (
<video
ref={previewRef}
className={`absolute size-full object-contain ${currentHourFrame ? "invisible" : "visible"}`}
className={`max-h-full max-w-full object-contain ${currentHourFrame ? "invisible" : "visible"}`}
preload="auto"
autoPlay
playsInline
@ -348,7 +348,7 @@ function PreviewVideoPlayer({
{t("noPreviewFoundFor", { camera: cameraName })}
</div>
)}
{firstLoad && <Skeleton className="absolute aspect-video size-full" />}
{firstLoad && <Skeleton className="aspect-video w-full" />}
</div>
);
}
@ -554,7 +554,7 @@ function PreviewFramesPlayer({
return (
<div
className={cn(
"relative flex w-full justify-center",
"relative flex w-full items-center justify-center",
className,
onClick && "cursor-pointer",
)}
@ -562,7 +562,7 @@ function PreviewFramesPlayer({
>
<img
ref={imgRef}
className={`size-full rounded-lg bg-black object-contain md:rounded-2xl`}
className="max-h-full max-w-full rounded-lg object-contain md:rounded-2xl"
loading="lazy"
onLoad={onImageLoaded}
/>