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

Just use multiselect for mobile

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-01 07:47:08 -07:00
parent a49e1bbc64
commit 54877a5598
1 changed files with 91 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@ import { getIconForLabel, getIconForSubLabel } from "@/utils/iconUtil";
import TimeAgo from "../dynamic/TimeAgo"; import TimeAgo from "../dynamic/TimeAgo";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { isFirefox, isMobile, isSafari } from "react-device-detect"; import { isDesktop, isFirefox, isMobile, isSafari } from "react-device-detect";
import Chip from "../Chip"; import Chip from "../Chip";
import { import {
ContextMenu, ContextMenu,
@ -166,87 +166,98 @@ export default function PreviewThumbnailPlayer({
config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p", config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
); );
return ( const previewContent = (
<ContextMenu> <div
<ContextMenuTrigger asChild> className="relative size-full cursor-pointer"
<div onMouseEnter={isMobile ? undefined : () => onPlayback(true)}
className="relative size-full cursor-pointer" onMouseLeave={isMobile ? undefined : () => onPlayback(false)}
onMouseEnter={isMobile ? undefined : () => onPlayback(true)} onContextMenu={
onMouseLeave={isMobile ? undefined : () => onPlayback(false)} isDesktop
onClick={handleOnClick} ? undefined
{...swipeHandlers} : (e) => {
> e.preventDefault();
{playingBack && ( onClick(review.id, true);
<div className="absolute inset-0 animate-in fade-in"> }
<PreviewContent }
review={review} onClick={handleOnClick}
relevantPreview={relevantPreview} {...swipeHandlers}
setReviewed={handleSetReviewed} >
setIgnoreClick={setIgnoreClick} {playingBack && (
isPlayingBack={setPlayback} <div className="absolute inset-0 animate-in fade-in">
onTimeUpdate={onTimeUpdate} <PreviewContent
/> review={review}
</div> relevantPreview={relevantPreview}
)} setReviewed={handleSetReviewed}
<PreviewPlaceholder imgLoaded={imgLoaded} /> setIgnoreClick={setIgnoreClick}
<div className={`${imgLoaded ? "visible" : "invisible"}`}> isPlayingBack={setPlayback}
<img onTimeUpdate={onTimeUpdate}
ref={imgRef} />
className={`w-full h-full transition-opacity ${
playingBack ? "opacity-0" : "opacity-100"
}`}
src={`${apiHost}${review.thumb_path.replace(
"/media/frigate/",
"",
)}`}
loading={isSafari ? "eager" : "lazy"}
onLoad={() => {
onImgLoad();
}}
/>
{!playingBack && (
<>
<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 ">
{(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 z-0">
{review.data.objects.map((object) => {
return getIconForLabel(object, "size-3 text-white");
})}
{review.data.audio.map((audio) => {
return getIconForLabel(audio, "size-3 text-white");
})}
{review.data.sub_labels?.map((sub) => {
return getIconForSubLabel(sub, "size-3 text-white");
})}
</Chip>
)}
</div>
</div>
<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 ">
<TimeAgo time={review.start_time * 1000} dense />
{formattedDate}
</div>
</div>
</>
)}
</div>
{!playingBack && imgLoaded && review.has_been_reviewed && (
<div className="absolute inset-0 z-10 bg-black bg-opacity-60" />
)}
</div> </div>
</ContextMenuTrigger> )}
<PreviewContextItems <PreviewPlaceholder imgLoaded={imgLoaded} />
review={review} <div className={`${imgLoaded ? "visible" : "invisible"}`}>
onSelect={() => onClick(review.id, true)} <img
setReviewed={handleSetReviewed} ref={imgRef}
markAboveReviewed={markAboveReviewed} className={`w-full h-full transition-opacity ${
/> playingBack ? "opacity-0" : "opacity-100"
</ContextMenu> }`}
src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
loading={isSafari ? "eager" : "lazy"}
onLoad={() => {
onImgLoad();
}}
/>
{!playingBack && (
<>
<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 ">
{(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 z-0">
{review.data.objects.map((object) => {
return getIconForLabel(object, "size-3 text-white");
})}
{review.data.audio.map((audio) => {
return getIconForLabel(audio, "size-3 text-white");
})}
{review.data.sub_labels?.map((sub) => {
return getIconForSubLabel(sub, "size-3 text-white");
})}
</Chip>
)}
</div>
</div>
<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 ">
<TimeAgo time={review.start_time * 1000} dense />
{formattedDate}
</div>
</div>
</>
)}
</div>
{!playingBack && imgLoaded && review.has_been_reviewed && (
<div className="absolute inset-0 z-10 bg-black bg-opacity-60" />
)}
</div>
); );
if (isDesktop) {
return (
<ContextMenu>
<ContextMenuTrigger asChild>{previewContent}</ContextMenuTrigger>
<PreviewContextItems
review={review}
onSelect={() => onClick(review.id, true)}
setReviewed={handleSetReviewed}
markAboveReviewed={markAboveReviewed}
/>
</ContextMenu>
);
}
return previewContent;
} }
type PreviewContentProps = { type PreviewContentProps = {