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

don't load metadata until image has loaded

Browse Source
This commit is contained in:
Josh Hawkins 2024-02-26 11:46:23 -06:00
parent 2fd7fe7928
commit 1d780390d7
1 changed files with 47 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,6 @@ import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
import axios from "axios"; import axios from "axios";
import { useFormattedTimestamp } from "@/hooks/use-date-utils"; import { useFormattedTimestamp } from "@/hooks/use-date-utils";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import { LazyLoadImage } from "react-lazy-load-image-component";
type PreviewPlayerProps = { type PreviewPlayerProps = {
review: ReviewSegment; review: ReviewSegment;
@ -122,7 +121,11 @@ export default function PreviewThumbnailPlayer({
/> />
</div> </div>
)} )}
<LazyLoadImage {!imgLoaded && (
<Skeleton className={`absolute inset-0 w-full h-full`} />
)}
<div className={`${imgLoaded ? "vislble" : "invisible"}`}>
<img
className={`w-full h-full transition-opacity ${ className={`w-full h-full transition-opacity ${
playingBack ? "opacity-0" : "opacity-100" playingBack ? "opacity-0" : "opacity-100"
}`} }`}
@ -130,15 +133,15 @@ export default function PreviewThumbnailPlayer({
"/media/frigate/", "/media/frigate/",
"" ""
)}`} )}`}
loading="lazy"
onLoad={() => { onLoad={() => {
setImgLoaded(true); setImgLoaded(true);
}} }}
placeholder={<Skeleton className="w-full h-full rounded-xl" />}
/> />
{!playingBack && imgLoaded && ( {!playingBack && (
<> <>
<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="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="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 +159,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 animate-in fade-in"> <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="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}
@ -164,6 +167,7 @@ export default function PreviewThumbnailPlayer({
</div> </div>
</> </>
)} )}
</div>
{playingBack && ( {playingBack && (
<Slider <Slider
className="absolute left-0 right-0 bottom-0 z-10" className="absolute left-0 right-0 bottom-0 z-10"
@ -358,7 +362,7 @@ function InProgressPreview({
if (!previewFrames || previewFrames.length == 0) { if (!previewFrames || previewFrames.length == 0) {
return ( return (
<LazyLoadImage <img
className="h-full w-full" className="h-full w-full"
src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`} src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
/> />