From cfe905b9f917e411c23b3974aec3354243042c53 Mon Sep 17 00:00:00 2001
From: Gregor Lohaus <lohausgregor@gmail.com>
Date: Sat, 20 Jun 2026 14:11:50 +0200
Subject: [PATCH] music mobile fix

---
 src/app/music/_components/AudioPlayer.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/music/_components/AudioPlayer.tsx b/src/app/music/_components/AudioPlayer.tsx
index bfc25d2..dc1eee1 100644
--- a/src/app/music/_components/AudioPlayer.tsx
+++ b/src/app/music/_components/AudioPlayer.tsx
@@ -47,7 +47,15 @@ export default function AudioPlayer(props: {
 	const [downloading, setDownloading] = useState(false);
 	const { resolvedTheme } = useTheme();
 
-	const { currentId, isPlaying, currentTime, toggle, seek, subscribeTime } = useMusicPlayer();
+	const {
+		currentId,
+		isPlaying,
+		currentTime,
+		duration: engineDuration,
+		toggle,
+		seek,
+		subscribeTime,
+	} = useMusicPlayer();
 	const isActive = currentId === props.id;
 
 	// Reach live values from the once-created wavesurfer callbacks.
@@ -143,6 +151,9 @@ export default function AudioPlayer(props: {
 	}
 
 	const playing = isActive && isPlaying;
+	// The waveform is only a visual; playback is owned by the shared engine. Show
+	// its duration if the waveform hasn't decoded (slow/unreliable on mobile).
+	const shownDuration = duration || (isActive ? engineDuration : 0);
 
 	return (
 		<div className="flex items-center gap-3 rounded-lg border bg-transparent px-3 py-2">
@@ -151,7 +162,6 @@ export default function AudioPlayer(props: {
 				size="icon"
 				variant="ghost"
 				aria-label={playing ? "Pause" : "Play"}
-				disabled={!ready}
 				onClick={() => toggle(props.id)}
 			>
 				{playing ? <Pause /> : <Play />}
@@ -171,7 +181,7 @@ export default function AudioPlayer(props: {
 			</div>
 
 			<span className="w-10 shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
-				{formatTime(duration)}
+				{formatTime(shownDuration)}
 			</span>
 
 			<Button