diff --git a/app/src/components/AudioPlayer/AudioPlayer.tsx b/app/src/components/AudioPlayer/AudioPlayer.tsx index 1c398ed8..44ebb266 100644 --- a/app/src/components/AudioPlayer/AudioPlayer.tsx +++ b/app/src/components/AudioPlayer/AudioPlayer.tsx @@ -7,8 +7,8 @@ import { Slider } from '@/components/ui/slider'; import { apiClient } from '@/lib/api/client'; import { formatAudioDuration } from '@/lib/utils/audio'; import { debug } from '@/lib/utils/debug'; -import { usePlayerStore } from '@/stores/playerStore'; import { usePlatform } from '@/platform/PlatformContext'; +import { usePlayerStore } from '@/stores/playerStore'; export function AudioPlayer() { const platform = usePlatform(); @@ -360,7 +360,7 @@ export function AudioPlayer() { if (shouldAutoPlayNow) { // Clear the flag first usePlayerStore.getState().clearAutoPlayFlag(); - + // Use a small delay to ensure audio element is fully ready setTimeout(() => { wavesurfer.play().catch((error) => { @@ -665,7 +665,7 @@ export function AudioPlayer() { // Handle shouldAutoPlay flag - for story mode auto-advance const shouldAutoPlay = usePlayerStore((state) => state.shouldAutoPlay); const clearAutoPlayFlag = usePlayerStore((state) => state.clearAutoPlayFlag); - + useEffect(() => { const wavesurfer = wavesurferRef.current; if (!wavesurfer || !shouldAutoPlay || duration === 0) { @@ -833,11 +833,7 @@ export function AudioPlayer() { className="shrink-0" title={duration === 0 && !isLoading ? 'Audio not loaded' : ''} aria-label={ - duration === 0 && !isLoading - ? 'Audio not loaded' - : isPlaying - ? 'Pause' - : 'Play' + duration === 0 && !isLoading ? 'Audio not loaded' : isPlaying ? 'Pause' : 'Play' } > {isPlaying ? : } @@ -872,7 +868,9 @@ export function AudioPlayer() { {/* Title */} {title && ( -
{title}
+
+ {title} +
)} {/* Loop Button */} @@ -888,7 +886,11 @@ export function AudioPlayer() { {/* Volume Control */} -
+