From 3279dddae50d42465dde0c1a9a55ce6ee010c0ef Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Tue, 29 Sep 2026 09:20:15 -0400
Subject: [PATCH] Reader: ESV chapter audio

The Reader's player follows the translation on screen: ESV plays its own
recording via a server route that resolves the ESV API's audio redirect;
other translations keep the BSB narrators.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 server/bibleApi.js                   | 21 +++++++++++++++++
 src/App.jsx                          |  2 +-
 src/components/reader/AudioSheet.jsx |  6 +++--
 src/hooks/useAudio.js                | 35 ++++++++++++++++++++--------
 4 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/server/bibleApi.js b/server/bibleApi.js
index 77da414..91cc1c9 100644
--- a/server/bibleApi.js
+++ b/server/bibleApi.js
@@ -59,6 +59,27 @@ export function registerBibleRoutes(app, requireAuth) {
     })));
   });
 
+  // ESV chapter audio (read by David Cochran Heath). The ESV API answers with a
+  // redirect to a public mp3; hand that URL to the browser's <audio> element.
+  app.get('/api/bible/ESV/audio/:book/:chapter', requireAuth, async (req, res) => {
+    const { book, chapter } = req.params;
+    const bookNum = BOOK_ORDER.indexOf(book.toUpperCase()) + 1;
+    if (!bookNum || !/^\d{1,3}$/.test(chapter)) return res.status(400).json({ error: 'Invalid book or chapter.' });
+    if (!process.env.ESV_API_KEY) return res.status(503).json({ error: 'ESV_API_KEY is not configured on the server.' });
+    const prefix = String(bookNum).padStart(2, '0') + String(Number(chapter)).padStart(3, '0');
+    try {
+      const upstream = await fetch(`https://api.esv.org/v3/passage/audio/?q=${prefix}001-${prefix}999`, {
+        headers: { Authorization: `Token ${process.env.ESV_API_KEY}` }, redirect: 'manual',
+      });
+      const url = upstream.headers.get('location');
+      if (upstream.status === 429) return res.status(429).json({ error: 'ESV rate limit reached. Try again in a minute.' });
+      if (!url) return res.status(502).json({ error: 'ESV audio is not available for this chapter.' });
+      res.json({ url });
+    } catch {
+      res.status(502).json({ error: 'Could not reach the ESV audio service.' });
+    }
+  });
+
   app.get('/api/bible/:translation/:book/:chapter', requireAuth, async (req, res) => {
     const translation = LICENSED_TRANSLATIONS[req.params.translation.toUpperCase()];
     const { book, chapter } = req.params;
diff --git a/src/App.jsx b/src/App.jsx
index d7b2695..8658a7c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -39,7 +39,7 @@ const App = () => {
   const [syncStatus, setSyncStatus] = useState('');   // '' | 'syncing' | 'synced' | 'error'
   const [studyBuildBusy, setStudyBuildBusy] = useState(false);
   const reader = useBibleReader(currentPage);
-  const audio = useAudio(reader.readerBookAbbrev, reader.readerChapter);
+  const audio = useAudio(reader.readerBookAbbrev, reader.readerChapter, reader.readerTranslation);
   const readingPlans = useReadingPlans();
   const { authUser, setAuthUser, authServerDown, signIn, logout } = useAuth({
     onSignIn: (user) => {
diff --git a/src/components/reader/AudioSheet.jsx b/src/components/reader/AudioSheet.jsx
index ada76d6..cbaf128 100644
--- a/src/components/reader/AudioSheet.jsx
+++ b/src/components/reader/AudioSheet.jsx
@@ -9,7 +9,9 @@ export default function AudioSheet({ open, onClose, translation, bookName, chapt
         title={`${bookName} ${chapter}`}
         subtitle={audio.state.status === 'error'
           ? "Couldn't load audio for this chapter/narrator."
-          : translation !== 'BSB'
+          : translation === 'ESV'
+            ? 'ESV audio, read by David Cochran Heath. It follows the chapter as you browse.'
+            : translation !== 'BSB'
             ? `Audio is BSB only — no ${translation} audio is available, so it won't match the ${translation} text on screen.`
             : 'Audio follows the chapter as you browse.'}
         status={audio.state.status}
@@ -23,7 +25,7 @@ export default function AudioSheet({ open, onClose, translation, bookName, chapt
         onNext={onNext}
         nextDisabled={nextDisabled}
         onStop={audio.stop}
-        controls={(
+        controls={translation === 'ESV' ? null : (
           <select value={narrator} onChange={(e) => onNarrator(e.target.value)}
             className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1.5 text-sm text-[var(--r-text)]">
             <option value="david">David</option>
diff --git a/src/hooks/useAudio.js b/src/hooks/useAudio.js
index acbf08b..de18e6f 100644
--- a/src/hooks/useAudio.js
+++ b/src/hooks/useAudio.js
@@ -1,9 +1,9 @@
 // Chapter audio playback. The Home page's whole-book player and the Reader's
 // chapter player share one <audio> element; audioModeRef tracks which owns it.
 import { useEffect, useRef, useState } from 'react';
-import { bookOptions } from '../utils/bibleUtils.jsx';
+import { bookOptions, CHAPTER_COUNTS } from '../utils/bibleUtils.jsx';
 
-export function useAudio(readerBookAbbrev, readerChapter) {
+export function useAudio(readerBookAbbrev, readerChapter, readerTranslation = 'BSB') {
   const [audioBook, setAudioBook] = useState(bookOptions[0].abbrev);
   const [audioNarrator, setAudioNarrator] = useState('souer');
   const [audioState, setAudioState] = useState({ status: 'idle', chapter: 0, total: 0 });
@@ -17,13 +17,28 @@ export function useAudio(readerBookAbbrev, readerChapter) {
   audioBookRef.current = audioBook;
   audioNarratorRef.current = audioNarrator;
   audioStateRef.current = audioState;
+  // The Reader's player follows the translation on screen: ESV has its own
+  // recording; every other translation falls back to the BSB narrators.
+  const readerTranslationRef = useRef(readerTranslation);
+  readerTranslationRef.current = readerTranslation;
+  const readerAudioSource = () => (readerTranslationRef.current === 'ESV' ? 'ESV' : 'BSB');
 
   const playAudioChapter = async (abbrev, chapterNum, narrator) => {
-    const res = await fetch(`https://bible.helloao.org/api/BSB/${abbrev}/${chapterNum}.json`);
-    if (!res.ok) throw new Error('Failed to load chapter audio');
-    const data = await res.json();
-    const total = data.book?.numberOfChapters ?? chapterNum;
-    const url = data.thisChapterAudioLinks?.[narrator];
+    const source = audioModeRef.current === 'reader' ? readerAudioSource() : 'BSB';
+    let url;
+    let total;
+    if (source === 'ESV') {
+      const res = await fetch(`/api/bible/ESV/audio/${abbrev}/${chapterNum}`, { credentials: 'include' });
+      if (!res.ok) throw new Error('Failed to load ESV audio');
+      url = (await res.json()).url;
+      total = CHAPTER_COUNTS[abbrev] ?? chapterNum;
+    } else {
+      const res = await fetch(`https://bible.helloao.org/api/BSB/${abbrev}/${chapterNum}.json`);
+      if (!res.ok) throw new Error('Failed to load chapter audio');
+      const data = await res.json();
+      total = data.book?.numberOfChapters ?? chapterNum;
+      url = data.thisChapterAudioLinks?.[narrator];
+    }
     if (!url) throw new Error('Audio not available for this narrator');
     if (!audioRef.current) {
       audioRef.current = new Audio();
@@ -52,7 +67,7 @@ export function useAudio(readerBookAbbrev, readerChapter) {
     audioEl.src = url;
     await audioEl.play();
     if (audioModeRef.current === 'reader') {
-      setReaderAudioState({ status: 'playing', chapter: chapterNum });
+      setReaderAudioState({ status: 'playing', chapter: chapterNum, source });
     } else {
       setAudioState({ status: 'playing', chapter: chapterNum, total });
     }
@@ -149,7 +164,7 @@ export function useAudio(readerBookAbbrev, readerChapter) {
   useEffect(() => {
     if (audioModeRef.current !== 'reader') return;
     if (readerAudioState.status !== 'playing' && readerAudioState.status !== 'paused') return;
-    if (readerAudioState.chapter === readerChapter) return;
+    if (readerAudioState.chapter === readerChapter && readerAudioState.source === readerAudioSource()) return;
     const wasPaused = readerAudioState.status === 'paused';
     playAudioChapter(readerBookAbbrev, readerChapter, audioNarrator)
       .then(() => {
@@ -160,7 +175,7 @@ export function useAudio(readerBookAbbrev, readerChapter) {
       })
       .catch(() => setReaderAudioState({ status: 'error', chapter: 0 }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [readerBookAbbrev, readerChapter]);
+  }, [readerBookAbbrev, readerChapter, readerTranslation]);
 
   useEffect(() => () => {
     if (audioRef.current) {