Spartan/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-22 08:57:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

Show skeleton when live filmstrip items are loading (#12660)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-07-29 06:52:22 -06:00 committed by GitHub
parent 7c39b176ac
commit 7d03d99852
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/components/card/AnimatedEventCard.tsx
View File

@ -14,6 +14,7 @@ import { baseUrl } from "@/api/baseUrl";
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import { isSafari } from "react-device-detect"; import { isSafari } from "react-device-detect";
import { usePersistence } from "@/hooks/use-persistence"; import { usePersistence } from "@/hooks/use-persistence";
import { Skeleton } from "../ui/skeleton";
type AnimatedEventCardProps = { type AnimatedEventCardProps = {
event: ReviewSegment; event: ReviewSegment;
@ -57,6 +58,8 @@ export function AnimatedEventCard({
}; };
}, [visibilityListener]); }, [visibilityListener]);
const [isLoaded, setIsLoaded] = useState(false);
// interaction // interaction
const navigate = useNavigate(); const navigate = useNavigate();
@ -109,6 +112,7 @@ export function AnimatedEventCard({
className="size-full select-none" className="size-full select-none"
src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`} src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`}
loading={isSafari ? "eager" : "lazy"} loading={isSafari ? "eager" : "lazy"}
onLoad={() => setIsLoaded(true)}
/> />
) : ( ) : (
<> <>
@ -122,6 +126,11 @@ export function AnimatedEventCard({
setReviewed={() => {}} setReviewed={() => {}}
setIgnoreClick={() => {}} setIgnoreClick={() => {}}
isPlayingBack={() => {}} isPlayingBack={() => {}}
onTimeUpdate={() => {
if (!isLoaded) {
setIsLoaded(true);
}
}}
windowVisible={windowVisible} windowVisible={windowVisible}
/> />
) : ( ) : (
@ -132,6 +141,11 @@ export function AnimatedEventCard({
muted muted
disableRemotePlayback disableRemotePlayback
loop loop
onTimeUpdate={() => {
if (!isLoaded) {
setIsLoaded(true);
}
}}
> >
<source <source
src={`${baseUrl}api/review/${event.id}/preview?format=mp4`} src={`${baseUrl}api/review/${event.id}/preview?format=mp4`}
@ -142,11 +156,14 @@ export function AnimatedEventCard({
</> </>
)} )}
</div> </div>
<div className="absolute inset-x-0 bottom-0 h-6 rounded bg-gradient-to-t from-slate-900/50 to-transparent"> {isLoaded && (
<div className="absolute bottom-0 left-1 w-full text-xs text-white"> <div className="absolute inset-x-0 bottom-0 h-6 rounded bg-gradient-to-t from-slate-900/50 to-transparent">
<TimeAgo time={event.start_time * 1000} dense /> <div className="absolute bottom-0 left-1 w-full text-xs text-white">
<TimeAgo time={event.start_time * 1000} dense />
</div>
</div> </div>
</div> )}
{!isLoaded && <Skeleton className="absolute inset-0" />}
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>