Improve mobile UI and fix Media Session and API settings bugs

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();

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>`)
                     : '';

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 {