From 5d62c6c0e9a614642fe814357c47b4367e40cd28 Mon Sep 17 00:00:00 2001 From: MathieuG-P Date: Mon, 26 Dec 2022 21:23:10 +0100 Subject: [PATCH] download on double click PLUS little fixes --- .../map-item.component.tsx | 20 ++++++++++++++----- .../download-maps-modal.component.tsx | 11 +++++----- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/renderer/components/maps-mangement-components/map-item.component.tsx b/src/renderer/components/maps-mangement-components/map-item.component.tsx index e7806fb7..f782f5eb 100644 --- a/src/renderer/components/maps-mangement-components/map-item.component.tsx +++ b/src/renderer/components/maps-mangement-components/map-item.component.tsx @@ -5,7 +5,7 @@ import { BsmLink } from "../shared/bsm-link.component"; import { BsmIcon } from "../svgs/bsm-icon.component"; import { BsmButton } from "../shared/bsm-button.component"; import { AnimatePresence, motion } from "framer-motion"; -import { useState, Fragment, memo } from "react"; +import { useState, Fragment, memo, useRef } from "react"; import { LinkOpenerService } from "renderer/services/link-opener.service"; import dateFormat from "dateformat"; import { AudioPlayerService } from "renderer/services/audio-player.service"; @@ -19,6 +19,7 @@ import defaultImage from '../../../../assets/images/default-version-img.jpg' import { useTranslation } from "renderer/hooks/use-translation.hook"; import { MAP_DIFFICULTIES } from "renderer/partials/maps/map-difficulties/map-difficulties"; import { MAP_DIFFICULTIES_COLORS } from "renderer/partials/maps/map-difficulties/map-difficulties-colors" +import useDoubleClick from "use-double-click"; export type ParsedMapDiff = {type: BsvMapDifficultyType, name: string, stars: number} @@ -44,10 +45,11 @@ export type MapItemProps = { onDelete?: (param: T) => void, onDownload?: (param: T) => void, onSelected?: (param: T) => void, - onCancelDownload?: (param: T) => void + onCancelDownload?: (param: T) => void, + onDoubleClick?: (param: T) => void } -export const MapItem = memo(({hash, title, autor, songAutor, coverUrl, songUrl, autorId, mapId, diffs, qualified, ranked, bpm, duration, likes, createdAt, selected, downloading, callBackParam, onDelete, onDownload, onSelected, onCancelDownload}: MapItemProps) => { +export const MapItem = memo(({hash, title, autor, songAutor, coverUrl, songUrl, autorId, mapId, diffs, qualified, ranked, bpm, duration, likes, createdAt, selected, downloading, callBackParam, onDelete, onDownload, onSelected, onCancelDownload, onDoubleClick}: MapItemProps) => { const linkOpener = LinkOpenerService.getInstance(); const audioPlayer = AudioPlayerService.getInstance(); @@ -55,10 +57,18 @@ export const MapItem = memo(({hash, title, autor, songAutor, coverUrl, songUrl, const color = useThemeColor("first-color"); const t = useTranslation(); + const ref = useRef(null); const [hovered, setHovered] = useState(false); const [bottomBarHovered, setBottomBarHovered, cancelBottomBarHovered] = useDelayedState(false); const [diffsPanelHovered, setDiffsPanelHovered] = useState(false); + useDoubleClick({ + ref, + latency: onDoubleClick ? 200 : 0, + onSingleClick: e => onSelected?.(callBackParam), + onDoubleClick: e => onDoubleClick?.(callBackParam) + }) + const songPlaying = useObservable(audioPlayer.playing$.pipe(map(playing => playing && audioPlayer.src === songUrl))); const zipUrl = getMapZipUrlFromHash(hash); @@ -137,7 +147,7 @@ export const MapItem = memo(({hash, title, autor, songAutor, coverUrl, songUrl, } return ( - setHovered(true)} onHoverEnd={() => setHovered(false)} style={{zIndex: hovered && 5, transform: "translateZ(0) scale(1.0, 1.0)", backfaceVisibility: "hidden"}} onClick={e => {onSelected?.(callBackParam)}}> + setHovered(true)} onHoverEnd={() => setHovered(false)} style={{zIndex: hovered && 5, transform: "translateZ(0) scale(1.0, 1.0)", backfaceVisibility: "hidden"}}> {(hovered || selected) && onSelected && } {(diffsPanelHovered || bottomBarHovered) && ( @@ -216,7 +226,7 @@ export const MapItem = memo(({hash, title, autor, songAutor, coverUrl, songUrl,
{onDelete && !downloading && {e.stopPropagation(); onDelete(callBackParam)}}/>} {onDownload && !downloading && {e.stopPropagation(); onDownload(callBackParam)}}/>} - {onCancelDownload && !downloading && {e.stopPropagation(); onCancelDownload(callBackParam)}}/>} + {onCancelDownload && !downloading && {e.stopPropagation(); onCancelDownload(callBackParam)}}/>} {downloading && } {previewUrl && {e.stopPropagation(); openPreview()}}/>} {mapId && {e.stopPropagation(); copyBsr()}}/>} diff --git a/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx b/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx index 5ba1352f..8c5fb400 100644 --- a/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx +++ b/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx @@ -34,8 +34,8 @@ export const DownloadMapsModal: ModalComponent = ({data}) => { const [sortOrder, setSortOrder] = useState(BSV_SORT_ORDER.at(0)); const [ownedMapHashs, setOwnedMapHashs] = useState([]); const [searchParams, setSearchParams] = useState({ - sortOrder: sortOrder, - filter: filter, + sortOrder, + filter, page: 0, q: query }); @@ -113,6 +113,7 @@ export const DownloadMapsModal: ModalComponent = ({data}) => { songUrl={map.versions.at(0).previewURL} key={map.id} onDownload={(!isMapOwned && !inQueue) && (handleDownloadMap)} + onDoubleClick={(!isMapOwned && !inQueue) && (handleDownloadMap)} onCancelDownload={(inQueue && !isDownloading) && (handleCancelDownload)} downloading={isDownloading} callBackParam={map} @@ -136,8 +137,8 @@ export const DownloadMapsModal: ModalComponent = ({data}) => { const handleSearch = () => { const searchParams: SearchParams = { - sortOrder: sortOrder, - filter: filter, + sortOrder, + filter, q: query.trim(), page: 0, }; @@ -165,7 +166,7 @@ export const DownloadMapsModal: ModalComponent = ({data}) => {
    {maps.length === 0 ? (
    - + {t("modals.download-maps.loading-maps")}
    ) : (