Redesign audio controls into a real media player

Adds a shared AudioPlayer component with a seekable progress bar,
big play/pause button, and icon transport controls, replacing the
row of text buttons on both the book and chapter audio players.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/pages/HomePage.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useApp } from '../context/AppContext.js';
 import AuthStatus from '../components/AuthStatus.jsx';
+import AudioPlayer from '../components/AudioPlayer.jsx';
 import {
   bookOptions,
   CHAPTER_COUNTS,
@@ -21,6 +22,7 @@ export default function HomePage() {
     audioBook, setAudioBook,
     audioNarrator, setAudioNarrator,
     audioState,
+    audioProgress,
     openBibleReader,
     openImportProject,
     openNewProject,
@@ -33,6 +35,7 @@ export default function HomePage() {
     handleToggleBookAudioPause,
     handleSkipBookChapter,
     handleSeekAudio,
+    handleSeekAudioTo,
   } = useApp();
   const [homeSearch, setHomeSearch] = useState('');
   const [homeSort, setHomeSort] = useState(() => {
@@ -233,91 +236,51 @@ export default function HomePage() {
             {/* Reading plan card */}
             <ReadingPlanCard readingPlan={readingPlan} createReadingPlan={createReadingPlan} clearReadingPlan={clearReadingPlan} openBibleReader={openBibleReader} />
 
-            <div className="mb-4 flex flex-col gap-3 rounded-3xl border border-slate-200 bg-white p-6 shadow-panel sm:flex-row sm:items-center sm:justify-between">
-              <div className="flex-1">
-                <h3 className="text-base font-semibold text-slate-900">Listen to BSB Audio</h3>
-                <p className="mt-1 text-sm text-slate-600">
-                  {audioState.status === 'idle' || audioState.status === 'error'
+            <div className="mb-4">
+              <AudioPlayer
+                title="Listen to BSB Audio"
+                subtitle={
+                  audioState.status === 'idle' || audioState.status === 'error'
                     ? 'Play a full book of the Berean Standard Bible.'
-                    : `Playing ${bookOptions.find((b) => b.abbrev === audioBook)?.name} — chapter ${audioState.chapter} of ${audioState.total}`}
-                </p>
-                {audioState.status === 'error' && (
-                  <p className="mt-1 text-sm text-rose-600">Couldn't load audio for this book/narrator.</p>
-                )}
-              </div>
-              <div className="flex flex-wrap items-center gap-2">
-                <select
-                  value={audioBook}
-                  onChange={(e) => setAudioBook(e.target.value)}
-                  disabled={audioState.status === 'playing' || audioState.status === 'paused'}
-                  className="rounded-xl border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 disabled:opacity-60"
-                >
-                  {bookOptions.map((book) => (
-                    <option key={book.abbrev} value={book.abbrev}>{book.name}</option>
-                  ))}
-                </select>
-                <select
-                  value={audioNarrator}
-                  onChange={(e) => setAudioNarrator(e.target.value)}
-                  disabled={audioState.status === 'playing' || audioState.status === 'paused'}
-                  className="rounded-xl border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 disabled:opacity-60"
-                >
-                  <option value="david">David</option>
-                  <option value="hays">Hays</option>
-                  <option value="souer">Souer</option>
-                </select>
-                {audioState.status === 'playing' || audioState.status === 'paused' ? (
+                    : `Playing ${bookOptions.find((b) => b.abbrev === audioBook)?.name} — chapter ${audioState.chapter} of ${audioState.total}`
+                }
+                errorMessage="Couldn't load audio for this book/narrator."
+                status={audioState.status}
+                currentTime={audioProgress.currentTime}
+                duration={audioProgress.duration}
+                onPlay={handlePlayBookAudio}
+                onTogglePause={handleToggleBookAudioPause}
+                onSeekBack={() => handleSeekAudio(-10)}
+                onSeekForward={() => handleSeekAudio(10)}
+                onSeekTo={handleSeekAudioTo}
+                onNext={handleSkipBookChapter}
+                nextDisabled={audioState.chapter >= audioState.total}
+                onStop={handleStopBookAudio}
+                controls={(
                   <>
-                    <button
-                      type="button"
-                      onClick={() => handleSeekAudio(-10)}
-                      title="Rewind 10 seconds"
-                      className="rounded-xl border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50"
+                    <select
+                      value={audioBook}
+                      onChange={(e) => setAudioBook(e.target.value)}
+                      disabled={audioState.status === 'playing' || audioState.status === 'paused'}
+                      className="rounded-xl border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 disabled:opacity-60"
                     >
-                      -10s
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => handleSeekAudio(10)}
-                      title="Fast-forward 10 seconds"
-                      className="rounded-xl border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50"
+                      {bookOptions.map((book) => (
+                        <option key={book.abbrev} value={book.abbrev}>{book.name}</option>
+                      ))}
+                    </select>
+                    <select
+                      value={audioNarrator}
+                      onChange={(e) => setAudioNarrator(e.target.value)}
+                      disabled={audioState.status === 'playing' || audioState.status === 'paused'}
+                      className="rounded-xl border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 disabled:opacity-60"
                     >
-                      +10s
-                    </button>
-                    <button
-                      type="button"
-                      onClick={handleToggleBookAudioPause}
-                      className="rounded-xl bg-sky-600 px-3 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-sky-500"
-                    >
-                      {audioState.status === 'paused' ? 'Resume' : 'Pause'}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={handleSkipBookChapter}
-                      disabled={audioState.chapter >= audioState.total}
-                      title="Skip to next chapter"
-                      className="rounded-xl border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 disabled:opacity-60"
-                    >
-                      Next chapter
-                    </button>
-                    <button
-                      type="button"
-                      onClick={handleStopBookAudio}
-                      className="rounded-xl border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50"
-                    >
-                      Stop
-                    </button>
+                      <option value="david">David</option>
+                      <option value="hays">Hays</option>
+                      <option value="souer">Souer</option>
+                    </select>
                   </>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={handlePlayBookAudio}
-                    className="rounded-xl bg-sky-600 px-3 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-sky-500"
-                  >
-                    Play book
-                  </button>
                 )}
-              </div>
+              />
             </div>
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {projectIndex

src/pages/ReaderPage.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useMemo, useDeferredValue } from 'react';
 import { useApp } from '../context/AppContext.js';
 import { formatCrossRef, speakOriginalWord } from '../utils/wordStudy.js';
 import AuthStatus from '../components/AuthStatus.jsx';
+import AudioPlayer from '../components/AudioPlayer.jsx';
 import { bookOptions, BookmarkIcon, CopyIcon } from '../utils/bibleUtils.jsx';
 import DrawCanvas from './DrawCanvas.jsx';
 
@@ -33,6 +34,7 @@ export default function ReaderPage() {
     readerSearchActive, setReaderSearchActive,
     readerSearchScope, setReaderSearchScope,
     readerAudioState,
+    audioProgress,
     bibleIndexStatus,
     audioNarrator, setAudioNarrator,
     _bibleIndexCacheRef,
@@ -48,6 +50,7 @@ export default function ReaderPage() {
     handleToggleReaderAudioPause,
     handleStopBookAudio,
     handleSeekAudio,
+    handleSeekAudioTo,
     setReaderCrossRefs,
     readerInkByPage,
     updateReaderPageInk,
@@ -503,53 +506,34 @@ export default function ReaderPage() {
         )}
 
         {/* Audio player */}
-        <div className="mb-4 flex flex-wrap items-center gap-3 rounded-3xl border border-slate-200 bg-white p-4 shadow-panel">
-          <div className="flex-1">
-            <h3 className="text-sm font-semibold text-slate-900">Listen to this chapter</h3>
-            <p className="mt-1 text-xs text-slate-500">
-              {readerAudioState.status === 'error'
+        <div className="mb-4">
+          <AudioPlayer
+            title="Listen to this chapter"
+            subtitle={
+              readerAudioState.status === 'error'
                 ? "Couldn't load audio for this chapter/narrator."
-                : `Audio follows ${readerBook?.name} ${readerChapter} as you browse.`}
-            </p>
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <select value={audioNarrator} onChange={(e) => setAudioNarrator(e.target.value)}
-              className="rounded-xl border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200">
-              <option value="david">David</option>
-              <option value="hays">Hays</option>
-              <option value="souer">Souer</option>
-            </select>
-            {readerAudioState.status === 'playing' || readerAudioState.status === 'paused' ? (
-              <>
-                <button type="button" onClick={() => handleSeekAudio(-10)} title="Rewind 10 seconds"
-                  className="rounded-xl border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">
-                  -10s
-                </button>
-                <button type="button" onClick={() => handleSeekAudio(10)} title="Fast-forward 10 seconds"
-                  className="rounded-xl border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">
-                  +10s
-                </button>
-                <button type="button" onClick={handleToggleReaderAudioPause}
-                  className="rounded-xl bg-sky-600 px-3 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-sky-500">
-                  {readerAudioState.status === 'paused' ? 'Resume' : 'Pause'}
-                </button>
-                <button type="button" onClick={readerGoToNextChapter} disabled={readerChapter >= readerTotalChapters}
-                  title="Skip to next chapter"
-                  className="rounded-xl border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 disabled:opacity-60">
-                  Next chapter
-                </button>
-                <button type="button" onClick={handleStopBookAudio}
-                  className="rounded-xl border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">
-                  Stop
-                </button>
-              </>
-            ) : (
-              <button type="button" onClick={handlePlayReaderAudio}
-                className="rounded-xl bg-sky-600 px-3 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-sky-500">
-                Play
-              </button>
+                : `Audio follows ${readerBook?.name} ${readerChapter} as you browse.`
+            }
+            status={readerAudioState.status}
+            currentTime={audioProgress.currentTime}
+            duration={audioProgress.duration}
+            onPlay={handlePlayReaderAudio}
+            onTogglePause={handleToggleReaderAudioPause}
+            onSeekBack={() => handleSeekAudio(-10)}
+            onSeekForward={() => handleSeekAudio(10)}
+            onSeekTo={handleSeekAudioTo}
+            onNext={readerGoToNextChapter}
+            nextDisabled={readerChapter >= readerTotalChapters}
+            onStop={handleStopBookAudio}
+            controls={(
+              <select value={audioNarrator} onChange={(e) => setAudioNarrator(e.target.value)}
+                className="rounded-xl border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200">
+                <option value="david">David</option>
+                <option value="hays">Hays</option>
+                <option value="souer">Souer</option>
+              </select>
             )}
-          </div>
+          />
         </div>
 
         {/* Verses — normal scroll mode */}