administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-09 04:35:25 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fading effects

Browse Source
This commit is contained in:
Josh Hawkins 2024-02-26 09:41:31 -06:00
parent 2699d5ddc2
commit 133d883102
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@ -113,7 +113,7 @@ export default function PreviewThumbnailPlayer({
onClick={onClick} onClick={onClick}
> >
{playingBack && ( {playingBack && (
<div className="absolute left-0 top-0 right-0 bottom-0"> <div className="absolute left-0 top-0 right-0 bottom-0 animate-in fade-in">
<PreviewContent <PreviewContent
review={review} review={review}
relevantPreview={relevantPreview} relevantPreview={relevantPreview}
@ -124,7 +124,7 @@ export default function PreviewThumbnailPlayer({
)} )}
<LazyLoadImage <LazyLoadImage
className={`w-full h-full transition-opacity ${ className={`w-full h-full transition-opacity ${
playingBack && imgLoaded ? "opacity-0" : "opacity-100" playingBack ? "opacity-0" : "opacity-100"
}`} }`}
src={`${apiHost}${review.thumb_path.replace( src={`${apiHost}${review.thumb_path.replace(
"/media/frigate/", "/media/frigate/",
@ -138,7 +138,7 @@ export default function PreviewThumbnailPlayer({
{!playingBack && imgLoaded && ( {!playingBack && imgLoaded && (
<> <>
<div className="absolute top-0 left-0 right-0 rounded-t-l z-10 w-full h-[30%] bg-gradient-to-b from-black/60 to-transparent pointer-events-none"> <div className="absolute top-0 left-0 right-0 rounded-t-l z-10 w-full h-[30%] bg-gradient-to-b from-black/60 to-transparent pointer-events-none animate-in fade-in">
<div className="flex h-full justify-between items-start mx-3 pb-1 text-white text-sm "> <div className="flex h-full justify-between items-start mx-3 pb-1 text-white text-sm ">
{(review.severity == "alert" || {(review.severity == "alert" ||
review.severity == "detection") && ( review.severity == "detection") && (
@ -156,7 +156,7 @@ export default function PreviewThumbnailPlayer({
)} )}
</div> </div>
</div> </div>
<div className="absolute bottom-0 left-0 right-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none"> <div className="absolute bottom-0 left-0 right-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none animate-in fade-in">
<div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm "> <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm ">
<TimeAgo time={review.start_time * 1000} dense /> <TimeAgo time={review.start_time * 1000} dense />
{formattedDate} {formattedDate}