diff --git a/src/components/footer/AudioPlayerFooter.tsx b/src/components/footer/AudioPlayerFooter.tsx index 5d1d7270..9ad09919 100644 --- a/src/components/footer/AudioPlayerFooter.tsx +++ b/src/components/footer/AudioPlayerFooter.tsx @@ -211,7 +211,7 @@ const AudioPlayerFooter: React.FC = ({ onVisibilityChang const offsetX = touch.clientX - progressBarRect.left; const offsetY = progressBarRect.height / 2; setCyclePosition({ left: offsetX, top: offsetY, visible: true }); - globalAudio.currentTime = (offsetX / (showAudioPlayerMinimal ? 100 : 150)) * globalAudio.duration; + globalAudio.currentTime = (offsetX / progressBarRect.width) * globalAudio.duration; // prevent default Click! setIsTouching(true); } else { @@ -221,20 +221,22 @@ const AudioPlayerFooter: React.FC = ({ onVisibilityChang setCyclePosition({ left: offsetX, top: offsetY, visible: true }); if (isMouseDown) { - handleClick(); + handleClick(event); } } }; + const handleMouseLeave = () => { setCyclePosition({ left: 0, top: 0, visible: false }); }; - const handleClick = () => { + + const handleClick = (event: React.MouseEvent | React.TouchEvent) => { if (isTouching) { setIsTouching(false); handleMouseLeave(); } else { - globalAudio.currentTime = - (cyclePosition.left / (showAudioPlayerMinimal ? 100 : 150)) * globalAudio.duration; + const progressBarRect = event.currentTarget.getBoundingClientRect(); + globalAudio.currentTime = (cyclePosition.left / progressBarRect.width) * globalAudio.duration; } }; const handleMouseDown = (event: React.MouseEvent) => { @@ -338,7 +340,7 @@ const AudioPlayerFooter: React.FC = ({ onVisibilityChang console.error("Error setting media session position state:", e); } } - }, [globalAudio, currentPlayPosition]); + }, [globalAudio]); // rearrange player for mobile / tablet const isMobile = window.innerWidth <= 768; diff --git a/src/utils/helpers.tsx b/src/utils/helpers.tsx index 6e880956..9c32b079 100644 --- a/src/utils/helpers.tsx +++ b/src/utils/helpers.tsx @@ -2,8 +2,6 @@ export function getLongestStringByPixelWidth( stringsArray: string[], font = "14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'" ) { - console.log(font); - console.log(stringsArray); let longestString = ""; let maxWidth = 0; @@ -19,8 +17,6 @@ export function getLongestStringByPixelWidth( } }); } - console.log(maxWidth); - console.log(longestString); return { longestString, pixelWidth: maxWidth,