From 31862a835da96c071759853962840978d1e96a26 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@data-pixel.com>
Date: Thu, 25 Dec 2025 20:30:56 +0100
Subject: [PATCH] Improve mobile UI and fix Media Session and API settings bugs

---
 js/events.js | 5 +++++
 js/ui.js     | 2 +-
 styles.css   | 3 +++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/js/events.js b/js/events.js
index 60fe12a..931ee08 100644
--- a/js/events.js
+++ b/js/events.js
@@ -37,6 +37,11 @@ export function initializePlayerEvents(player, audioPlayer, scrobbler) {
         updateTabTitle(player);
     });
 
+    audioPlayer.addEventListener('playing', () => {
+        player.updateMediaSessionPlaybackState();
+        player.updateMediaSessionPositionState();
+    });
+
     audioPlayer.addEventListener('pause', () => {
         playPauseBtn.innerHTML = SVG_PLAY;
         player.updateMediaSessionPlaybackState();
diff --git a/js/ui.js b/js/ui.js
index 503eada..f5ae910 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -725,7 +725,7 @@ async renderPlaylistPage(playlistId) {
             container.innerHTML = instances.map((url, index) => {
                 const speedInfo = speeds[url];
                 const speedText = speedInfo
-                    ? (speedInfo.speed === Infinity
+                    ? (speedInfo.speed === Infinity || typeof speedInfo.speed !== 'number'
                         ? `<span style="color: var(--muted-foreground); font-size: 0.8rem;">Failed</span>`
                         : `<span style="color: var(--muted-foreground); font-size: 0.8rem;">${speedInfo.speed.toFixed(0)}ms</span>`)
                     : '';
diff --git a/styles.css b/styles.css
index 14964c2..c87a2c6 100644
--- a/styles.css
+++ b/styles.css
@@ -142,6 +142,7 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    -webkit-tap-highlight-color: transparent;
 }
 
 html {
@@ -869,6 +870,7 @@ body.has-page-background .track-item:hover {
     cursor: pointer;
     transition: all var(--transition);
     box-shadow: var(--shadow-sm);
+    -webkit-tap-highlight-color: transparent;
 }
 
 .btn-primary:hover {
@@ -1088,6 +1090,7 @@ input:checked + .slider::before {
     height: 32px;
     border-radius: 50%;
     position: relative;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .player-controls .buttons button:hover {