administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-09 04:35:25 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

don't show chips and date when image is loading

Browse Source
This commit is contained in:
Josh Hawkins 2024-02-25 14:48:44 -06:00
parent 9801534f11
commit 8b1ea415a0
1 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,6 +49,7 @@ export default function PreviewThumbnailPlayer({
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>(); const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
const [playback, setPlayback] = useState(false); const [playback, setPlayback] = useState(false);
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
const [imgLoaded, setImgLoaded] = useState(false);
const playingBack = useMemo(() => playback, [playback, autoPlayback]); const playingBack = useMemo(() => playback, [playback, autoPlayback]);
@ -128,21 +129,23 @@ export default function PreviewThumbnailPlayer({
"/media/frigate/", "/media/frigate/",
"" ""
)}`} )}`}
onLoad={() => setImgLoaded(true)}
/> />
{(review.severity == "alert" || review.severity == "detection") && ( {imgLoaded &&
<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.severity == "alert" || review.severity == "detection") && (
{review.data.objects.map((object) => { <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">
return getIconForLabel(object, "w-3 h-3 text-white"); {review.data.objects.map((object) => {
})} return getIconForLabel(object, "w-3 h-3 text-white");
{review.data.audio.map((audio) => { })}
return getIconForLabel(audio, "w-3 h-3 text-white"); {review.data.audio.map((audio) => {
})} return getIconForLabel(audio, "w-3 h-3 text-white");
{review.data.sub_labels?.map((sub) => { })}
return getIconForSubLabel(sub, "w-3 h-3 text-white"); {review.data.sub_labels?.map((sub) => {
})} return getIconForSubLabel(sub, "w-3 h-3 text-white");
</Chip> })}
)} </Chip>
{!playingBack && ( )}
{!playingBack && imgLoaded && (
<div className="absolute left-[6px] right-[6px] bottom-1 flex justify-between text-white"> <div className="absolute left-[6px] right-[6px] bottom-1 flex justify-between text-white">
<TimeAgo time={review.start_time * 1000} dense /> <TimeAgo time={review.start_time * 1000} dense />
{formattedDate} {formattedDate}
@ -159,7 +162,7 @@ export default function PreviewThumbnailPlayer({
max={100} max={100}
/> />
)} )}
{!playingBack && review.has_been_reviewed && ( {!playingBack && imgLoaded && review.has_been_reviewed && (
<div className="absolute left-0 top-0 bottom-0 right-0 bg-black bg-opacity-60" /> <div className="absolute left-0 top-0 bottom-0 right-0 bg-black bg-opacity-60" />
)} )}
</div> </div>
@ -192,7 +195,10 @@ function PreviewContent({
} }
// start with a bit of padding // start with a bit of padding
return Math.max(0, review.start_time - relevantPreview.start - PREVIEW_PADDING); return Math.max(
0,
review.start_time - relevantPreview.start - PREVIEW_PADDING
);
}, []); }, []);
const [lastPercent, setLastPercent] = useState(0.0); const [lastPercent, setLastPercent] = useState(0.0);
@ -223,7 +229,8 @@ function PreviewContent({
(playerRef.current?.currentTime || 0) - playerStartTime; (playerRef.current?.currentTime || 0) - playerStartTime;
// end with a bit of padding // end with a bit of padding
const playerDuration = review.end_time - review.start_time + PREVIEW_PADDING; const playerDuration =
review.end_time - review.start_time + PREVIEW_PADDING;
const playerPercent = (playerProgress / playerDuration) * 100; const playerPercent = (playerProgress / playerDuration) * 100;
if ( if (