diff --git a/src/lib/dnd-kit/DndKitUtil.ts b/src/lib/dnd-kit/DndKitUtil.ts index bf26ffd7..c29cd4c6 100644 --- a/src/lib/dnd-kit/DndKitUtil.ts +++ b/src/lib/dnd-kit/DndKitUtil.ts @@ -16,7 +16,7 @@ import { SensorOptions, useSensors, } from '@dnd-kit/core'; -import { AbstractPointerSensorOptions } from '@dnd-kit/core/dist/sensors'; +import { AbstractPointerSensorOptions, PointerActivationConstraint } from '@dnd-kit/core/dist/sensors'; import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx'; export class DndKitUtil { @@ -28,11 +28,38 @@ export class DndKitUtil { return MouseSensor; } + static useGetSensorForDevice(): Sensor { + MediaQuery.useIsTouchDevice(); + + return DndKitUtil.getSensorForDevice(); + } + + static useGetActivationConstraintForDevice(): PointerActivationConstraint { + const isTouchDevice = MediaQuery.useIsTouchDevice(); + + if (isTouchDevice) { + return { + delay: 300, + tolerance: 8, + }; + } + + return { + distance: 8, + }; + } + static useSensorsForDevice(options?: AbstractPointerSensorOptions): SensorDescriptor[] { + const sensor = DndKitUtil.useGetSensorForDevice(); + const activationConstraint = DndKitUtil.useGetActivationConstraintForDevice(); + return useSensors( - useSensor(DndKitUtil.getSensorForDevice(), { + useSensor(sensor, { ...options, - activationConstraint: { distance: 15, ...options?.activationConstraint }, + activationConstraint: { + ...activationConstraint, + ...options?.activationConstraint, + }, }), ); } diff --git a/src/modules/downloads/components/DownloadQueueChapterCard.tsx b/src/modules/downloads/components/DownloadQueueChapterCard.tsx index 0e590856..90c83e8f 100644 --- a/src/modules/downloads/components/DownloadQueueChapterCard.tsx +++ b/src/modules/downloads/components/DownloadQueueChapterCard.tsx @@ -28,10 +28,12 @@ import { makeToast } from '@/modules/core/utils/Toast.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts'; import { DownloaderState } from '@/lib/graphql/generated/graphql.ts'; import { ChapterDownloadStatus, ChapterIdInfo } from '@/modules/chapter/Chapter.types.ts'; +import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx'; export const DownloadQueueChapterCard = memo( ({ item, status }: { item: ChapterDownloadStatus; status: DownloaderState }) => { const { t } = useTranslation(); + const preventMobileContextMenu = MediaQuery.usePreventMobileContextMenu(); const handleDelete = useCallback( async (chapter: ChapterIdInfo) => { @@ -68,7 +70,12 @@ export const DownloadQueueChapterCard = memo( return ( - +