Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Fix fetching of generated preview video (#13498)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-09-02 08:18:58 -06:00 committed by GitHub
parent 5239790835
commit 21a50cc452
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 55 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -127,59 +127,61 @@ export function AnimatedEventCard({
<TooltipContent>Mark as Reviewed</TooltipContent> <TooltipContent>Mark as Reviewed</TooltipContent>
</Tooltip> </Tooltip>
)} )}
<div {previews != undefined && (
className="size-full cursor-pointer overflow-hidden rounded md:rounded-lg" <div
onClick={onOpenReview} className="size-full cursor-pointer overflow-hidden rounded md:rounded-lg"
> onClick={onOpenReview}
{!alertVideos ? ( >
<img {!alertVideos ? (
className="size-full select-none" <img
src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`} className="size-full select-none"
loading={isSafari ? "eager" : "lazy"} src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`}
onLoad={() => setIsLoaded(true)} loading={isSafari ? "eager" : "lazy"}
/> onLoad={() => setIsLoaded(true)}
) : ( />
<> ) : (
{previews ? ( <>
<VideoPreview {previews.length ? (
relevantPreview={previews[previews.length - 1]} <VideoPreview
startTime={event.start_time} relevantPreview={previews[previews.length - 1]}
endTime={event.end_time} startTime={event.start_time}
loop endTime={event.end_time}
showProgress={false} loop
setReviewed={() => {}} showProgress={false}
setIgnoreClick={() => {}} setReviewed={() => {}}
isPlayingBack={() => {}} setIgnoreClick={() => {}}
onTimeUpdate={() => { isPlayingBack={() => {}}
if (!isLoaded) { onTimeUpdate={() => {
setIsLoaded(true); if (!isLoaded) {
} setIsLoaded(true);
}} }
windowVisible={windowVisible} }}
/> windowVisible={windowVisible}
) : (
<video
preload="auto"
autoPlay
playsInline
muted
disableRemotePlayback
loop
onTimeUpdate={() => {
if (!isLoaded) {
setIsLoaded(true);
}
}}
>
<source
src={`${baseUrl}api/review/${event.id}/preview?format=mp4`}
type="video/mp4"
/> />
</video> ) : (
)} <video
</> preload="auto"
)} autoPlay
</div> playsInline
muted
disableRemotePlayback
loop
onTimeUpdate={() => {
if (!isLoaded) {
setIsLoaded(true);
}
}}
>
<source
src={`${baseUrl}api/review/${event.id}/preview?format=mp4`}
type="video/mp4"
/>
</video>
)}
</>
)}
</div>
)}
{isLoaded && ( {isLoaded && (
<div className="absolute inset-x-0 bottom-0 h-6 rounded bg-gradient-to-t from-slate-900/50 to-transparent"> <div className="absolute inset-x-0 bottom-0 h-6 rounded bg-gradient-to-t from-slate-900/50 to-transparent">
<div className="absolute bottom-0 left-1 w-full text-xs text-white"> <div className="absolute bottom-0 left-1 w-full text-xs text-white">

2
web/src/hooks/use-camera-previews.ts
View File

@ -29,7 +29,7 @@ export function useCameraPreviews(
{ revalidateOnFocus: autoRefresh, revalidateOnReconnect: autoRefresh }, { revalidateOnFocus: autoRefresh, revalidateOnReconnect: autoRefresh },
); );
return allPreviews; return fetchPreviews ? allPreviews : [];
} }
// we need to add a buffer of 5 seconds to the end preview times // we need to add a buffer of 5 seconds to the end preview times