mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-14 15:15:22 +03:00
remove unnecessary bits from search thumbnail
This commit is contained in:
parent
c92235fbeb
commit
5b55b0ae4a
@ -1,14 +1,13 @@
|
|||||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
import React, { useCallback } from "react";
|
||||||
import { useApiHost } from "@/api";
|
import { useApiHost } from "@/api";
|
||||||
import { getIconForLabel } from "@/utils/iconUtil";
|
import { getIconForLabel } 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 { isIOS, isMobile, isSafari } from "react-device-detect";
|
import { isIOS, isSafari } from "react-device-detect";
|
||||||
import Chip from "@/components/indicators/Chip";
|
import Chip from "@/components/indicators/Chip";
|
||||||
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
||||||
import useImageLoaded from "@/hooks/use-image-loaded";
|
import useImageLoaded from "@/hooks/use-image-loaded";
|
||||||
import { useSwipeable } from "react-swipeable";
|
|
||||||
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||||
import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
|
import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
|
||||||
import ActivityIndicator from "../indicators/activity-indicator";
|
import ActivityIndicator from "../indicators/activity-indicator";
|
||||||
@ -19,14 +18,12 @@ import { cn } from "@/lib/utils";
|
|||||||
|
|
||||||
type SearchThumbnailProps = {
|
type SearchThumbnailProps = {
|
||||||
searchResult: SearchResult;
|
searchResult: SearchResult;
|
||||||
scrollLock?: boolean;
|
|
||||||
findSimilar: () => void;
|
findSimilar: () => void;
|
||||||
onClick: (searchResult: SearchResult, detail: boolean) => void;
|
onClick: (searchResult: SearchResult, detail: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function SearchThumbnail({
|
export default function SearchThumbnail({
|
||||||
searchResult,
|
searchResult,
|
||||||
scrollLock = false,
|
|
||||||
findSimilar,
|
findSimilar,
|
||||||
onClick,
|
onClick,
|
||||||
}: SearchThumbnailProps) {
|
}: SearchThumbnailProps) {
|
||||||
@ -34,59 +31,15 @@ export default function SearchThumbnail({
|
|||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
const { data: config } = useSWR<FrigateConfig>("config");
|
||||||
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
|
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
|
||||||
|
|
||||||
// interaction
|
|
||||||
|
|
||||||
const swipeHandlers = useSwipeable({
|
|
||||||
onSwipedLeft: () => setDetails(false),
|
|
||||||
onSwipedRight: () => setDetails(true),
|
|
||||||
preventScrollOnSwipe: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
useContextMenu(imgRef, findSimilar);
|
useContextMenu(imgRef, findSimilar);
|
||||||
|
|
||||||
// Hover Details
|
|
||||||
|
|
||||||
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
|
|
||||||
const [details, setDetails] = useState(false);
|
|
||||||
const [tooltipHovering, setTooltipHovering] = useState(false);
|
|
||||||
const showingMoreDetail = useMemo(
|
|
||||||
() => details && !tooltipHovering,
|
|
||||||
[details, tooltipHovering],
|
|
||||||
);
|
|
||||||
const [isHovered, setIsHovered] = useState(false);
|
|
||||||
|
|
||||||
const handleOnClick = useCallback(
|
const handleOnClick = useCallback(
|
||||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
if (!showingMoreDetail) {
|
|
||||||
onClick(searchResult, e.metaKey);
|
onClick(searchResult, e.metaKey);
|
||||||
}
|
|
||||||
},
|
},
|
||||||
[searchResult, showingMoreDetail, onClick],
|
[searchResult, onClick],
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isHovered && scrollLock) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isHovered && !tooltipHovering) {
|
|
||||||
setHoverTimeout(
|
|
||||||
setTimeout(() => {
|
|
||||||
setDetails(true);
|
|
||||||
setHoverTimeout(null);
|
|
||||||
}, 500),
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
if (hoverTimeout) {
|
|
||||||
clearTimeout(hoverTimeout);
|
|
||||||
}
|
|
||||||
|
|
||||||
setDetails(false);
|
|
||||||
}
|
|
||||||
// we know that these deps are correct
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [isHovered, scrollLock, tooltipHovering]);
|
|
||||||
|
|
||||||
// date
|
// date
|
||||||
|
|
||||||
const formattedDate = useFormattedTimestamp(
|
const formattedDate = useFormattedTimestamp(
|
||||||
@ -95,13 +48,7 @@ export default function SearchThumbnail({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="relative size-full cursor-pointer" onClick={handleOnClick}>
|
||||||
className="relative size-full cursor-pointer"
|
|
||||||
onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
|
|
||||||
onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
|
|
||||||
onClick={handleOnClick}
|
|
||||||
{...swipeHandlers}
|
|
||||||
>
|
|
||||||
<ImageLoadingIndicator
|
<ImageLoadingIndicator
|
||||||
className="absolute inset-0"
|
className="absolute inset-0"
|
||||||
imgLoaded={imgLoaded}
|
imgLoaded={imgLoaded}
|
||||||
@ -131,11 +78,7 @@ export default function SearchThumbnail({
|
|||||||
|
|
||||||
<div className="absolute left-0 top-2 z-40">
|
<div className="absolute left-0 top-2 z-40">
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<div
|
<div className="flex">
|
||||||
className="flex"
|
|
||||||
onMouseEnter={() => setTooltipHovering(true)}
|
|
||||||
onMouseLeave={() => setTooltipHovering(false)}
|
|
||||||
>
|
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<div className="mx-3 pb-1 text-sm text-white">
|
<div className="mx-3 pb-1 text-sm text-white">
|
||||||
{
|
{
|
||||||
|
|||||||
@ -181,7 +181,6 @@ export default function SearchView({
|
|||||||
>
|
>
|
||||||
<SearchThumbnail
|
<SearchThumbnail
|
||||||
searchResult={value}
|
searchResult={value}
|
||||||
scrollLock={false}
|
|
||||||
findSimilar={() => setSimilaritySearch(value)}
|
findSimilar={() => setSimilaritySearch(value)}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
onSelectSearch(value, true);
|
onSelectSearch(value, true);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user