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

Use chip for detections and show all the time

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-22 06:49:37 -07:00
parent 861cd8af79
commit 33c80cf88c
1 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,7 @@ import TimeAgo from "../dynamic/TimeAgo";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { isMobile, isSafari } from "react-device-detect"; import { isMobile, isSafari } from "react-device-detect";
import Chip from "../Chip";
type PreviewPlayerProps = { type PreviewPlayerProps = {
review: ReviewSegment; review: ReviewSegment;
@ -121,23 +122,23 @@ export default function PreviewThumbnailPlayer({
) : ( ) : (
<img <img
className="h-full w-full" className="h-full w-full"
loading="lazy"
src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`} src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
/> />
)} )}
{!playingBack && {(review.severity == "alert" || review.severity == "detection") && (
(review.severity == "alert" || 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">
<div className="absolute top-1 left-[6px] flex gap-1"> {review.data.objects.map((object) => {
{review.data.objects.map((object) => { return getIconForLabel(object, "w-3 h-3 text-white");
return getIconForLabel(object, "w-3 h-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, "w-3 h-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, "w-3 h-3 text-white"); })}
})} </Chip>
</div> )}
)}
{!playingBack && ( {!playingBack && (
<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} /> <TimeAgo time={review.start_time * 1000} />
@ -184,7 +185,6 @@ function PreviewContent({
setProgress, setProgress,
setReviewed, setReviewed,
}: PreviewContentProps) { }: PreviewContentProps) {
// manual playback // manual playback
// safari is incapable of playing at a speed > 2x // safari is incapable of playing at a speed > 2x
// so manual seeking is required on iOS // so manual seeking is required on iOS