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>
</Tooltip>
)}
<div
className="size-full cursor-pointer overflow-hidden rounded md:rounded-lg"
onClick={onOpenReview}
>
{!alertVideos ? (
<img
className="size-full select-none"
src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`}
loading={isSafari ? "eager" : "lazy"}
onLoad={() => setIsLoaded(true)}
/>
) : (
<>
{previews ? (
<VideoPreview
relevantPreview={previews[previews.length - 1]}
startTime={event.start_time}
endTime={event.end_time}
loop
showProgress={false}
setReviewed={() => {}}
setIgnoreClick={() => {}}
isPlayingBack={() => {}}
onTimeUpdate={() => {
if (!isLoaded) {
setIsLoaded(true);
}
}}
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"
{previews != undefined && (
<div
className="size-full cursor-pointer overflow-hidden rounded md:rounded-lg"
onClick={onOpenReview}
>
{!alertVideos ? (
<img
className="size-full select-none"
src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`}
loading={isSafari ? "eager" : "lazy"}
onLoad={() => setIsLoaded(true)}
/>
) : (
<>
{previews.length ? (
<VideoPreview
relevantPreview={previews[previews.length - 1]}
startTime={event.start_time}
endTime={event.end_time}
loop
showProgress={false}
setReviewed={() => {}}
setIgnoreClick={() => {}}
isPlayingBack={() => {}}
onTimeUpdate={() => {
if (!isLoaded) {
setIsLoaded(true);
}
}}
windowVisible={windowVisible}
/>
</video>
)}
</>
)}
</div>
) : (
<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>
)}
</>
)}
</div>
)}
{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 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 },
);
return allPreviews;
return fetchPreviews ? allPreviews : [];
}
// we need to add a buffer of 5 seconds to the end preview times