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 tall cameras not fitting in current hour frame (#10136)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-28 13:24:49 -07:00 committed by GitHub
parent b5becad63f
commit d416ae86d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,7 +65,6 @@ export default function PreviewThumbnailPlayer({
onSwipedLeft: () => setPlayback(false), onSwipedLeft: () => setPlayback(false),
onSwipedRight: () => setPlayback(true), onSwipedRight: () => setPlayback(true),
preventScrollOnSwipe: true, preventScrollOnSwipe: true,
}); });
const handleSetReviewed = useCallback(() => { const handleSetReviewed = useCallback(() => {
@ -110,14 +109,14 @@ export default function PreviewThumbnailPlayer({
<ContextMenu> <ContextMenu>
<ContextMenuTrigger asChild> <ContextMenuTrigger asChild>
<div <div
className="relative w-full h-full cursor-pointer" className="relative size-full cursor-pointer"
onMouseEnter={isMobile ? undefined : () => onPlayback(true)} onMouseEnter={isMobile ? undefined : () => onPlayback(true)}
onMouseLeave={isMobile ? undefined : () => onPlayback(false)} onMouseLeave={isMobile ? undefined : () => onPlayback(false)}
onClick={handleOnClick} onClick={handleOnClick}
{...swipeHandlers} {...swipeHandlers}
> >
{playingBack && ( {playingBack && (
<div className="absolute left-0 top-0 right-0 bottom-0 animate-in fade-in"> <div className="absolute inset-0 animate-in fade-in">
<PreviewContent <PreviewContent
review={review} review={review}
relevantPreview={relevantPreview} relevantPreview={relevantPreview}
@ -145,25 +144,25 @@ export default function PreviewThumbnailPlayer({
{!playingBack && ( {!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"> <div className="absolute top-0 inset-x-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") && (
<Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0"> <Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0">
{review.data.objects.map((object) => { {review.data.objects.map((object) => {
return getIconForLabel(object, "w-3 h-3 text-white"); return getIconForLabel(object, "size-3 text-white");
})} })}
{review.data.audio.map((audio) => { {review.data.audio.map((audio) => {
return getIconForLabel(audio, "w-3 h-3 text-white"); return getIconForLabel(audio, "size-3 text-white");
})} })}
{review.data.sub_labels?.map((sub) => { {review.data.sub_labels?.map((sub) => {
return getIconForSubLabel(sub, "w-3 h-3 text-white"); return getIconForSubLabel(sub, "size-3 text-white");
})} })}
</Chip> </Chip>
)} )}
</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 inset-x-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}
@ -174,7 +173,7 @@ export default function PreviewThumbnailPlayer({
</div> </div>
{playingBack && ( {playingBack && (
<Slider <Slider
className="absolute left-0 right-0 bottom-0 z-10" className="absolute inset-x-0 bottom-0 z-10"
value={[progress]} value={[progress]}
min={0} min={0}
step={1} step={1}
@ -182,7 +181,7 @@ export default function PreviewThumbnailPlayer({
/> />
)} )}
{!playingBack && imgLoaded && review.has_been_reviewed && ( {!playingBack && imgLoaded && review.has_been_reviewed && (
<div className="absolute left-0 top-0 bottom-0 right-0 z-10 bg-black bg-opacity-60" /> <div className="absolute inset-0 z-10 bg-black bg-opacity-60" />
)} )}
</div> </div>
</ContextMenuTrigger> </ContextMenuTrigger>
@ -298,7 +297,7 @@ function PreviewContent({
return ( return (
<video <video
ref={playerRef} ref={playerRef}
className="w-full h-full aspect-video bg-black" className="size-full aspect-video bg-black"
autoPlay autoPlay
playsInline playsInline
preload="auto" preload="auto"
@ -367,16 +366,16 @@ function InProgressPreview({
if (!previewFrames || previewFrames.length == 0) { if (!previewFrames || previewFrames.length == 0) {
return ( return (
<img <img
className="h-full w-full" className="size-full"
src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`} src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
/> />
); );
} }
return ( return (
<div className="w-full h-full flex items-center bg-black"> <div className="size-full flex items-center bg-black">
<img <img
className="w-full" className="size-full object-contain"
src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.jpg`} src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.jpg`}
onLoad={handleLoad} onLoad={handleLoad}
/> />