From b9f9b97cba0f4125172e2b5f66fe65d730c6837f Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Wed, 23 Sep 2026 11:49:32 -0400
Subject: [PATCH] Add chapter skip and 10s seek controls to audio players

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/hooks/useAudio.js    | 18 ++++++++++++++++++
 src/pages/HomePage.jsx   | 27 +++++++++++++++++++++++++++
 src/pages/ReaderPage.jsx | 14 ++++++++++++++
 3 files changed, 59 insertions(+)

diff --git a/src/hooks/useAudio.js b/src/hooks/useAudio.js
index 15eb267..dae0181 100644
--- a/src/hooks/useAudio.js
+++ b/src/hooks/useAudio.js
@@ -80,6 +80,22 @@ export function useAudio(readerBookAbbrev, readerChapter) {
     }
   };
 
+  const handleSeekAudio = (deltaSeconds) => {
+    if (!audioRef.current) return;
+    const el = audioRef.current;
+    const duration = Number.isFinite(el.duration) ? el.duration : Infinity;
+    el.currentTime = Math.min(Math.max(el.currentTime + deltaSeconds, 0), duration);
+  };
+
+  const handleSkipBookChapter = () => {
+    const nextChapter = audioStateRef.current.chapter + 1;
+    if (nextChapter > audioStateRef.current.total) return;
+    audioModeRef.current = 'book';
+    playAudioChapter(audioBookRef.current, nextChapter, audioNarratorRef.current).catch(() =>
+      setAudioState({ status: 'error', chapter: 0, total: 0 }),
+    );
+  };
+
   const handlePlayReaderAudio = async () => {
     audioModeRef.current = 'reader';
     try {
@@ -131,6 +147,8 @@ export function useAudio(readerBookAbbrev, readerChapter) {
     handlePlayBookAudio,
     handleStopBookAudio,
     handleToggleBookAudioPause,
+    handleSkipBookChapter,
+    handleSeekAudio,
     readerAudioState,
     handlePlayReaderAudio,
     handleToggleReaderAudioPause,
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 66763cb..7fb1c6c 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -31,6 +31,8 @@ export default function HomePage() {
     handlePlayBookAudio,
     handleStopBookAudio,
     handleToggleBookAudioPause,
+    handleSkipBookChapter,
+    handleSeekAudio,
   } = useApp();
   const [homeSearch, setHomeSearch] = useState('');
   const [homeSort, setHomeSort] = useState(() => {
@@ -266,6 +268,22 @@ export default function HomePage() {
                 </select>
                 {audioState.status === 'playing' || audioState.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={handleToggleBookAudioPause}
@@ -273,6 +291,15 @@ export default function HomePage() {
                     >
                       {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}
diff --git a/src/pages/ReaderPage.jsx b/src/pages/ReaderPage.jsx
index 49ebea5..ba3e54e 100644
--- a/src/pages/ReaderPage.jsx
+++ b/src/pages/ReaderPage.jsx
@@ -47,6 +47,7 @@ export default function ReaderPage() {
     handlePlayReaderAudio,
     handleToggleReaderAudioPause,
     handleStopBookAudio,
+    handleSeekAudio,
     setReaderCrossRefs,
     readerInkByPage,
     updateReaderPageInk,
@@ -520,10 +521,23 @@ export default function ReaderPage() {
             </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