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

29
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,13 +166,19 @@ 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>
<ContextMenuTrigger asChild>
<div <div
className="relative size-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)}
onContextMenu={
isDesktop
? undefined
: (e) => {
e.preventDefault();
onClick(review.id, true);
}
}
onClick={handleOnClick} onClick={handleOnClick}
{...swipeHandlers} {...swipeHandlers}
> >
@ -195,10 +201,7 @@ export default function PreviewThumbnailPlayer({
className={`w-full h-full transition-opacity ${ className={`w-full h-full transition-opacity ${
playingBack ? "opacity-0" : "opacity-100" playingBack ? "opacity-0" : "opacity-100"
}`} }`}
src={`${apiHost}${review.thumb_path.replace( src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
"/media/frigate/",
"",
)}`}
loading={isSafari ? "eager" : "lazy"} loading={isSafari ? "eager" : "lazy"}
onLoad={() => { onLoad={() => {
onImgLoad(); onImgLoad();
@ -238,7 +241,12 @@ export default function PreviewThumbnailPlayer({
<div className="absolute inset-0 z-10 bg-black bg-opacity-60" /> <div className="absolute inset-0 z-10 bg-black bg-opacity-60" />
)} )}
</div> </div>
</ContextMenuTrigger> );
if (isDesktop) {
return (
<ContextMenu>
<ContextMenuTrigger asChild>{previewContent}</ContextMenuTrigger>
<PreviewContextItems <PreviewContextItems
review={review} review={review}
onSelect={() => onClick(review.id, true)} onSelect={() => onClick(review.id, true)}
@ -249,6 +257,9 @@ export default function PreviewThumbnailPlayer({
); );
} }
return previewContent;
}
type PreviewContentProps = { type PreviewContentProps = {
review: ReviewSegment; review: ReviewSegment;
relevantPreview: Preview | undefined; relevantPreview: Preview | undefined;