imprvements, but mediasession audio position still buggy

henryk86 · Nov 3, 2024 · 9cb09fa · 9cb09fa
1 parent 73ce061
commit 9cb09fa
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/src/components/footer/AudioPlayerFooter.tsx b/src/components/footer/AudioPlayerFooter.tsx
@@ -211,7 +211,7 @@ const AudioPlayerFooter: React.FC<AudioPlayerFooterProps> = ({ 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<AudioPlayerFooterProps> = ({ 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<AudioPlayerFooterProps> = ({ 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
@@ -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,