administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-17 16:44:29 +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 { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
import { Preview } from "@/types/preview"; import { Preview } from "@/types/preview";
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import usePress from "@/hooks/use-press";
import { LongPressReactEvents } from "use-long-press";
type PreviewPlayerProps = { type PreviewPlayerProps = {
review: ReviewSegment; review: ReviewSegment;
@ -49,7 +51,7 @@ export default function PreviewThumbnailPlayer({
const [ignoreClick, setIgnoreClick] = useState(false); const [ignoreClick, setIgnoreClick] = useState(false);
const handleOnClick = useCallback( const handleOnClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => { (e: LongPressReactEvents<Element>) => {
if (!ignoreClick) { if (!ignoreClick) {
onClick(review, e.metaKey, false); onClick(review, e.metaKey, false);
} }
@ -77,6 +79,11 @@ export default function PreviewThumbnailPlayer({
onClick(review, true, false); onClick(review, true, false);
}); });
const bindClickAndLongPress = usePress({
onLongPress: () => onClick(review, true, false),
onPress: (e) => handleOnClick(e),
})();
// playback // playback
const relevantPreview = useMemo(() => { const relevantPreview = useMemo(() => {
@ -176,7 +183,7 @@ export default function PreviewThumbnailPlayer({
className="relative size-full cursor-pointer" className="relative size-full cursor-pointer"
onMouseOver={isMobile ? undefined : () => setIsHovered(true)} onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
onMouseLeave={isMobile ? undefined : () => setIsHovered(false)} onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
onClick={handleOnClick} {...bindClickAndLongPress}
onAuxClick={(e) => { onAuxClick={(e) => {
if (e.button === 1) { if (e.button === 1) {
window.open(`${baseUrl}review?id=${review.id}`, "_blank")?.focus(); 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( export default function usePress(
options: Omit<Parameters<typeof useLongPress>[1], "onCancel" | "onStart"> & { options: Omit<Parameters<typeof useLongPress>[1], "onCancel" | "onStart"> & {
onLongPress: NonNullable<Parameters<typeof useLongPress>[0]>; onLongPress: NonNullable<Parameters<typeof useLongPress>[0]>;
onPress: () => void; onPress: (event: LongPressReactEvents<Element>) => void;
}, },
) { ) {
const { onLongPress, onPress, ...actualOptions } = options; const { onLongPress, onPress, ...actualOptions } = options;
@ -43,9 +43,9 @@ export default function usePress(
return useCallback( return useCallback(
() => ({ () => ({
...bind(), ...bind(),
onClick: () => { onClick: (event: LongPressReactEvents<HTMLDivElement>) => {
if (!hasLongPress) { if (!hasLongPress) {
onPress(); onPress(event);
} }
}, },
}), }),