From a313a02d3129bbc3e2e19790f4689592a7f6b775 Mon Sep 17 00:00:00 2001 From: Shahidul Alam Riyad Date: Tue, 27 Feb 2024 18:24:37 +0600 Subject: [PATCH 1/2] fix: slider issue fix on mobile --- src/components/AudioPlayer.tsx | 64 +++++++++++++++++++++----------- src/helpers/utils/getRangeBox.ts | 2 +- 2 files changed, 44 insertions(+), 22 deletions(-) diff --git a/src/components/AudioPlayer.tsx b/src/components/AudioPlayer.tsx index 018fce6..8bb09e9 100644 --- a/src/components/AudioPlayer.tsx +++ b/src/components/AudioPlayer.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { iconPaths } from '../helpers/icons/icons'; import { formatTime } from '../helpers/utils/formatTime'; import { getRangeBox } from '../helpers/utils/getRangeBox'; +import getDeviceEventNames from '../helpers/utils/getDeviceEventNames'; import './audioPlay.css'; export interface AudioInterface { @@ -197,37 +198,43 @@ export const AudioPlayer: React.FC = ({ } }; - const inRange = (event: MouseEvent | React.MouseEvent) => { + const inRange = (event: MouseEvent | TouchEvent | React.MouseEvent) => { const rangeBox = getRangeBox(event, currentlyDragged.current); const rect = rangeBox.getBoundingClientRect(); const direction = rangeBox.dataset.direction; if (direction === 'horizontal') { - if (event.clientX - rect.left < 0 || event.clientX - rect.right > 0) return false; + const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX; + if (clientX - rect.left < 0 || clientX - rect.right > 0) return false; } else { const min = rect.top; const max = min + rangeBox.offsetHeight; - if (event.clientY < min || event.clientY > max) return false; + const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY; + if (clientY < min || clientY > max) return false; } return true; }; - function getCoefficient(event: MouseEvent | React.MouseEvent) { + function getCoefficient(event: MouseEvent | TouchEvent | React.MouseEvent) { const slider = getRangeBox(event, currentlyDragged.current); const rect = slider.getBoundingClientRect(); let K = 0; + if (slider.dataset.direction === 'horizontal') { - const offsetX = event.clientX - rect.left; + const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX; + const offsetX = clientX - rect.left; const width = slider.clientWidth; K = offsetX / width; } else if (slider.dataset.direction === 'vertical') { + const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY; const height = slider.clientHeight; - const offsetY = event.clientY - rect.top; + const offsetY = clientY - rect.top; K = 1 - offsetY / height; } + return K; } - const rewind = (event: MouseEvent | React.MouseEvent) => { + const rewind = (event: MouseEvent | TouchEvent | React.MouseEvent) => { if (inRange(event) && audioRef.current) { if (preload === 'none' && !audioRef.current.duration) { setCanPlay(false); @@ -239,37 +246,38 @@ export const AudioPlayer: React.FC = ({ } }; - const changeVolume = (event: MouseEvent | React.MouseEvent) => { + const changeVolume = (event: MouseEvent | TouchEvent | React.MouseEvent) => { if (inRange(event) && audioRef.current) { audioRef.current.volume = getCoefficient(event); } }; - const handleRewindMouseDown = () => { + const handleRewindDragging = () => { currentlyDragged.current = rewindPin.current; - - window.addEventListener('mousemove', rewind, false); + const events = getDeviceEventNames(); + window.addEventListener(events.move, rewind, false); window.addEventListener( - 'mouseup', + events.up, () => { currentlyDragged.current = null; - window.removeEventListener('mousemove', rewind, false); + window.removeEventListener(events.move, rewind, false); }, { once: true } ); }; - const handleVolumeMouseDown = () => { + const handleVolumeDragging = () => { currentlyDragged.current = volumePin.current; + const events = getDeviceEventNames(); - window.addEventListener('mousemove', changeVolume, false); + window.addEventListener(events.move, changeVolume, false); window.addEventListener( - 'mouseup', + events.up, () => { currentlyDragged.current = null; - window.removeEventListener('mousemove', changeVolume, false); + window.removeEventListener(events.move, changeVolume, false); }, false ); @@ -352,7 +360,7 @@ export const AudioPlayer: React.FC = ({
{currentTime} -
+
= ({ ...(sliderColor ? { backgroundColor: sliderColor } : {}) }} > -
+
{totalTime !== '--:--' && {totalTime}} @@ -380,7 +395,7 @@ export const AudioPlayer: React.FC = ({ e.stopPropagation(); }} > -
+
= ({ ...(sliderColor ? { backgroundColor: sliderColor } : {}) }} > -
+
diff --git a/src/helpers/utils/getRangeBox.ts b/src/helpers/utils/getRangeBox.ts index ac2d510..4cf0573 100644 --- a/src/helpers/utils/getRangeBox.ts +++ b/src/helpers/utils/getRangeBox.ts @@ -2,7 +2,7 @@ function isDraggable(el: HTMLElement) { return Array.from(el.classList).indexOf('rap-pin') !== -1; } -export const getRangeBox = (event: MouseEvent | React.MouseEvent, currentDragElement: HTMLDivElement | null) => { +export const getRangeBox = (event: MouseEvent | TouchEvent | React.MouseEvent, currentDragElement: HTMLDivElement | null) => { let rangeBox = event.target as HTMLElement; if (event.type === 'click' && isDraggable(rangeBox) && rangeBox?.parentElement?.parentElement) { rangeBox = rangeBox.parentElement.parentElement; From 0fc45d82c63830392181f8e15a3c9a8fd36a5e9b Mon Sep 17 00:00:00 2001 From: Shahidul Alam Riyad Date: Tue, 27 Feb 2024 18:24:44 +0600 Subject: [PATCH 2/2] fix: slider issue fix on mobile --- src/helpers/utils/getDeviceEventNames.ts | 26 ++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/helpers/utils/getDeviceEventNames.ts diff --git a/src/helpers/utils/getDeviceEventNames.ts b/src/helpers/utils/getDeviceEventNames.ts new file mode 100644 index 0000000..1825ef1 --- /dev/null +++ b/src/helpers/utils/getDeviceEventNames.ts @@ -0,0 +1,26 @@ +type moveEvents = 'touchmove' | 'mousemove'; +type upEvents = 'touchend' | 'mouseup'; + +interface returnProp { + move: moveEvents; + up: upEvents; +} + +const getDeviceEventNames = (): returnProp => { + if (isTouchDevice()) { + return { + move: 'touchmove', + up: 'touchend' + }; + } + return { + move: 'mousemove', + up: 'mouseup' + }; +}; + +const isTouchDevice = () => { + return 'ontouchstart' in window || navigator.maxTouchPoints; +}; + +export default getDeviceEventNames;