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 overlay in safari and firefox (#10015)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-24 06:48:18 -07:00 committed by GitHub
parent 02dfa1222e
commit d73c8bb90c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 66 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,68 +96,73 @@ export default function PreviewThumbnailPlayer({
return ( return (
<ContextMenu> <ContextMenu>
<ContextMenuTrigger <ContextMenuTrigger asChild>
className="relative w-full h-full cursor-pointer" <div
onMouseEnter={isMobile ? undefined : () => onPlayback(true)} className="relative w-full h-full cursor-pointer"
onMouseLeave={isMobile ? undefined : () => onPlayback(false)} onMouseEnter={isMobile ? undefined : () => onPlayback(true)}
onClick={onClick} onMouseLeave={isMobile ? undefined : () => onPlayback(false)}
> onClick={onClick}
{playingBack && ( >
<div className="absolute left-0 top-0 right-0 bottom-0"> {playingBack && (
<PreviewContent <div className="absolute left-0 top-0 right-0 bottom-0">
review={review} <PreviewContent
relevantPreview={relevantPreview} review={review}
setProgress={setProgress} relevantPreview={relevantPreview}
setReviewed={setReviewed} setProgress={setProgress}
/> setReviewed={setReviewed}
</div> />
)} </div>
<img )}
className={`w-full h-full transition-opacity ${ <img
playingBack ? "opacity-0" : "opacity-100" className={`w-full h-full transition-opacity ${
}`} playingBack ? "opacity-0" : "opacity-100"
loading="lazy" }`}
src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`} loading="lazy"
/> src={`${apiHost}${review.thumb_path.replace(
{(review.severity == "alert" || review.severity == "detection") && ( "/media/frigate/",
<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) => { )}`}
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.sub_labels?.map((sub) => {
return getIconForSubLabel(sub, "w-3 h-3 text-white");
})}
</Chip>
)}
{!playingBack && (
<div className="absolute left-[6px] right-[6px] bottom-1 flex justify-between text-white">
<TimeAgo time={review.start_time * 1000} dense />
{config &&
formatUnixTimestampToDateTime(review.start_time, {
strftime_fmt:
config.ui.time_format == "24hour"
? "%b %-d, %H:%M"
: "%b %-d, %I:%M %p",
})}
</div>
)}
<div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none" />
<div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none" />
{playingBack && (
<Slider
className="absolute left-0 right-0 bottom-0 z-10"
value={[progress]}
min={0}
step={1}
max={100}
/> />
)} {(review.severity == "alert" || review.severity == "detection") && (
{!playingBack && review.has_been_reviewed && ( <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">
<div className="absolute left-0 top-0 bottom-0 right-0 bg-black bg-opacity-60" /> {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.sub_labels?.map((sub) => {
return getIconForSubLabel(sub, "w-3 h-3 text-white");
})}
</Chip>
)}
{!playingBack && (
<div className="absolute left-[6px] right-[6px] bottom-1 flex justify-between text-white">
<TimeAgo time={review.start_time * 1000} dense />
{config &&
formatUnixTimestampToDateTime(review.start_time, {
strftime_fmt:
config.ui.time_format == "24hour"
? "%b %-d, %H:%M"
: "%b %-d, %I:%M %p",
})}
</div>
)}
<div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none" />
<div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none" />
{playingBack && (
<Slider
className="absolute left-0 right-0 bottom-0 z-10"
value={[progress]}
min={0}
step={1}
max={100}
/>
)}
{!playingBack && review.has_been_reviewed && (
<div className="absolute left-0 top-0 bottom-0 right-0 bg-black bg-opacity-60" />
)}
</div>
</ContextMenuTrigger> </ContextMenuTrigger>
<PreviewContextItems review={review} setReviewed={setReviewed} /> <PreviewContextItems review={review} setReviewed={setReviewed} />
</ContextMenu> </ContextMenu>