administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-17 08:35:21 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix long press in review

Browse Source
This commit is contained in:
Josh Hawkins 2024-12-02 08:32:49 -06:00
parent ddc68dea9d
commit 4173a22860
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,8 @@ import { cn } from "@/lib/utils";
import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
import { Preview } from "@/types/preview";
import { baseUrl } from "@/api/baseUrl";
import usePress from "@/hooks/use-press";
import { LongPressReactEvents } from "use-long-press";
type PreviewPlayerProps = {
review: ReviewSegment;
@ -49,7 +51,7 @@ export default function PreviewThumbnailPlayer({
const [ignoreClick, setIgnoreClick] = useState(false);
const handleOnClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => {
(e: LongPressReactEvents<Element>) => {
if (!ignoreClick) {
onClick(review, e.metaKey, false);
}
@ -77,6 +79,11 @@ export default function PreviewThumbnailPlayer({
onClick(review, true, false);
});
const bindClickAndLongPress = usePress({
onLongPress: () => onClick(review, true, false),
onPress: (e) => handleOnClick(e),
})();
// playback
const relevantPreview = useMemo(() => {
@ -176,7 +183,7 @@ export default function PreviewThumbnailPlayer({
className="relative size-full cursor-pointer"
onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
onClick={handleOnClick}
{...bindClickAndLongPress}
onAuxClick={(e) => {
if (e.button === 1) {
window.open(`${baseUrl}review?id=${review.id}`, "_blank")?.focus();

6
web/src/hooks/use-press.ts
View File

@ -10,7 +10,7 @@ import {
export default function usePress(
options: Omit<Parameters<typeof useLongPress>[1], "onCancel" | "onStart"> & {
onLongPress: NonNullable<Parameters<typeof useLongPress>[0]>;
onPress: () => void;
onPress: (event: LongPressReactEvents<Element>) => void;
},
) {
const { onLongPress, onPress, ...actualOptions } = options;
@ -43,9 +43,9 @@ export default function usePress(
return useCallback(
() => ({
...bind(),
onClick: () => {
onClick: (event: LongPressReactEvents<HTMLDivElement>) => {
if (!hasLongPress) {
onPress();
onPress(event);
}
},
}),