audio player respects group context

app/(app)/(reader)/transcriptions/book/[book]/book-browser.tsx

@@ -7,7 +7,15 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { ChevronLeft, ChevronRight, Menu, Calendar, Clock, MapPin } from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Menu,
+  Calendar,
+  Clock,
+  MapPin,
+} from "lucide-react";
+import { TranscriptQueue } from "@/components/audio-player/transcript-queue";
 import { PlayAudioButton } from "@/app/(app)/(reader)/transcriptions/[slug]/play-audio-button";
 import { parseChapter, parseVerse } from "@/lib/book-reference";
 import {
@@ -417,6 +425,13 @@ export function TranscriptionBookBrowser({
     contentRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
   };
 
+  // Next / Previous run through every chapter's lectures in display order,
+  // so playback carries on into the next chapter.
+  const queueItems = useMemo(
+    () => flat.flatMap((f) => f.chapter.transcriptions),
+    [flat],
+  );
+
   const activeIdx = flat.findIndex((f) => f.chapter.key === activeKey);
   const active = activeIdx >= 0 ? flat[activeIdx] : null;
   const prev = activeIdx > 0 ? flat[activeIdx - 1] : null;
@@ -463,42 +478,44 @@ export function TranscriptionBookBrowser({
 
         {/* Main content */}
         <main ref={contentRef} className="flex-1 min-w-0 px-6 py-8 space-y-8">
-          {/* Top navigation */}
-          <ChapterNav
-            prev={prev}
-            next={next}
-            sections={sections}
-            activeKey={activeKey}
-            onSelect={handleSelect}
-            drawerTitle={title}
-          />
+          <TranscriptQueue items={queueItems}>
+            {/* Top navigation */}
+            <ChapterNav
+              prev={prev}
+              next={next}
+              sections={sections}
+              activeKey={activeKey}
+              onSelect={handleSelect}
+              drawerTitle={title}
+            />
 
-          {/* Content — every lecture of the active chapter (all years/places) */}
-          {!active || active.chapter.transcriptions.length === 0 ? (
-            <div className="py-12 text-center text-muted-foreground">
-              <p className="text-lg font-medium">
-                No transcriptions for this chapter
-              </p>
-            </div>
-          ) : (
-            <Card className="overflow-hidden">
-              <CardContent className="p-0 divide-y divide-border">
-                {active.chapter.transcriptions.map((t) => (
-                  <LectureRow key={t.slug} t={t} />
-                ))}
-              </CardContent>
-            </Card>
-          )}
+            {/* Content — every lecture of the active chapter (all years/places) */}
+            {!active || active.chapter.transcriptions.length === 0 ? (
+              <div className="py-12 text-center text-muted-foreground">
+                <p className="text-lg font-medium">
+                  No transcriptions for this chapter
+                </p>
+              </div>
+            ) : (
+              <Card className="overflow-hidden">
+                <CardContent className="p-0 divide-y divide-border">
+                  {active.chapter.transcriptions.map((t) => (
+                    <LectureRow key={t.slug} t={t} />
+                  ))}
+                </CardContent>
+              </Card>
+            )}
 
-          {/* Bottom navigation */}
-          <ChapterNav
-            prev={prev}
-            next={next}
-            sections={sections}
-            activeKey={activeKey}
-            onSelect={handleSelect}
-            drawerTitle={title}
-          />
+            {/* Bottom navigation */}
+            <ChapterNav
+              prev={prev}
+              next={next}
+              sections={sections}
+              activeKey={activeKey}
+              onSelect={handleSelect}
+              drawerTitle={title}
+            />
+          </TranscriptQueue>
         </main>
       </div>
     </>