Add story dropdown + Play/Pause/Resume controls to Player tab (sprint #8)

- Add story selector dropdown + Load button directly inside Companion Player tab
- Add Play / Pause / Resume button row with state-driven visibility
- Add chunk status indicator (Chunk N / Total)
- Wire play_btn → PLAYING, pause_btn → PAUSED state transitions
- Sync ask/resume/play/pause button visibility across all state transitions

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

app.py

@@ -467,7 +467,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
 
         # TAB 4: Active Companion Player
         with gr.TabItem("🎧 Companion Player", id="player") as player_tab:
-            
+
             with gr.Row():
                 with gr.Column(scale=2, elem_classes="dark-card-container"):
                     gr.HTML("""
@@ -476,42 +476,58 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                             <span style="background: rgba(22, 163, 74, 0.2); padding: 2px 6px; border-radius: 6px; font-size: 9px; font-family: monospace; color: #4ade80;">SYNCHRONIZED PITCH</span>
                         </div>
                     """)
-                    
+
+                    # Story selector inside player
+                    player_story_selector = gr.Dropdown(
+                        choices=book_titles_list,
+                        value=book_titles_list[0],
+                        label="📖 Select Story",
+                        show_label=True,
+                        container=True,
+                    )
+                    player_load_btn = gr.Button("Load Story", variant="secondary", size="sm")
+
                     player_title_info = gr.HTML("""
-                        <div style="text-align: center; margin-bottom: 24px;">
+                        <div style="text-align: center; margin-bottom: 24px; margin-top: 16px;">
                             <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=400" style="width: 130px; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); margin-bottom: 16px;" />
                             <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 22px; margin:0; color:#FAF7F2;">The Enchanted Willow</h3>
                             <p style="font-size: 12px; color: #94a3b8; font-style: italic; margin-top:2px;">by Elena S. Thorne</p>
                             <span style="display: inline-block; background: rgba(245, 132, 31, 0.15); color: #ffd3a6; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-top: 8px;">Active Narrator: Mom's Voice</span>
                         </div>
                     """)
-                    
-                    player_audio_control = gr.Audio(visible=True, interactive=False, label="VoiceBook Audiobook Audio Stream Channel", value="sample_sounds/willow.wav", autoplay=False)
 
-                    gr.HTML("""
-                        <div style="margin-top: 16px; background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 12px; text-align: center; font-size: 11px; color:#cbd5e1;">
-                            💡 <b>Standard Player Controls:</b> Click the standard play trigger on the audio player block above to listen to custom generated pitch chimes.
-                        </div>
-                    """)
+                    player_audio_control = gr.Audio(visible=True, interactive=False, label="Audio Stream", value="sample_sounds/willow.wav", autoplay=False)
 
-                    # Ask / Resume / Finish controls
+                    # Playback status indicator
                     player_status_bar = gr.HTML("""
-                        <div style="margin-top: 16px; display: flex; align-items: center; gap: 10px; justify-content: center;">
-                            <span style="width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block;"></span>
-                            <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">PLAYING</span>
+                        <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+                            <span style="width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; display: inline-block;"></span>
+                            <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">READY</span>
                         </div>
                     """)
 
+                    # Play / Pause / Resume / Ask row
                     with gr.Row():
-                        ask_btn = gr.Button("❓ Ask a Question", variant="primary", scale=2)
-                        resume_btn = gr.Button("▶️ Resume Story", variant="secondary", scale=2, visible=False)
+                        play_btn  = gr.Button("▶️ Play",  variant="primary",   scale=1)
+                        pause_btn = gr.Button("⏸ Pause", variant="secondary",  scale=1, visible=False)
+                        resume_btn = gr.Button("↩️ Resume Story", variant="secondary", scale=2, visible=False)
+
+                    with gr.Row():
+                        ask_btn = gr.Button("❓ Ask a Question", variant="primary", scale=2, visible=False)
+
+                    # Chunk progress indicator
+                    chunk_status = gr.HTML("""
+                        <div style="margin-top: 8px; font-size: 10px; color: #64748b; font-family: monospace; text-align: center;">
+                            Chunk 0 / 0
+                        </div>
+                    """)
 
-                    # Story-finished prompt (hidden until playback ends)
+                    # Story-finished prompt
                     story_finished_panel = gr.HTML("""
                         <div style="margin-top: 12px; padding: 16px; background: rgba(245,132,31,0.1); border: 1px solid rgba(245,132,31,0.3); border-radius: 14px; text-align: center;">
                             <span style="font-size: 28px;">🎉</span>
                             <h4 style="font-family: 'Playfair Display', Georgia, serif; color: #ffd3a6; margin: 8px 0 4px;">Story Complete!</h4>
-                            <p style="font-size: 12px; color: #94a3b8; margin-bottom: 12px;">Head to <b>My Bookshelf</b> to pick another adventure.</p>
+                            <p style="font-size: 12px; color: #94a3b8; margin-bottom: 12px;">Pick another story above or head to <b>My Bookshelf</b>.</p>
                         </div>
                     """, visible=False)
                     
@@ -795,6 +811,92 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         outputs=[player_title_info, player_audio_control, m_synopsis, m_category, main_tabs]
     )
 
+    # 4b. Player-tab story selector (same logic, no tab switch)
+    def handle_player_load(title_chosen, current_inventory):
+        selected = next((b for b in current_inventory if b["title"] == title_chosen), current_inventory[0])
+        player_html_markup = f"""
+        <div style="text-align: center; margin-bottom: 24px; margin-top: 16px;">
+            <img src="{selected['cover_url']}" style="width: 130px; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); margin-bottom: 16px;" />
+            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 22px; margin:0; color:#FAF7F2;">{selected['title']}</h3>
+            <p style="font-size: 12px; color: #94a3b8; font-style: italic; margin-top:2px;">by {selected['author']}</p>
+            <span style="display: inline-block; background: rgba(245, 132, 31, 0.15); color: #ffd3a6; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-top: 8px;">Active Narrator: {selected['voice_name']}</span>
+        </div>
+        """
+        total_chunks = len(narrative_subtitles)
+        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #64748b; font-family: monospace; text-align: center;">Chunk 0 / {total_chunks} — ready to play</div>"""
+        status_html = """
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+                <span style="width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; display: inline-block;"></span>
+                <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">READY</span>
+            </div>
+        """
+        return (
+            player_html_markup,
+            selected["audio_path"],
+            selected["synopsis"],
+            selected["category"],
+            status_html,
+            chunk_html,
+            gr.Button(visible=True),   # play_btn
+            gr.Button(visible=False),  # pause_btn
+            gr.Button(visible=False),  # ask_btn
+            gr.HTML(visible=False),    # story_finished_panel
+        )
+
+    player_load_btn.click(
+        handle_player_load,
+        inputs=[player_story_selector, books_state],
+        outputs=[player_title_info, player_audio_control, m_synopsis, m_category,
+                 player_status_bar, chunk_status, play_btn, pause_btn, ask_btn, story_finished_panel]
+    )
+
+    # 4c. Play button — transition to PLAYING state
+    def enter_playing_state(slider_val):
+        total_chunks = len(narrative_subtitles)
+        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #4ade80; font-family: monospace; text-align: center;">Chunk {int(slider_val) + 1} / {total_chunks} — streaming</div>"""
+        status_html = """
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+                <span style="width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block;"></span>
+                <span style="font-size: 11px; color: #4ade80; font-family: monospace;">PLAYING</span>
+            </div>
+        """
+        return (
+            status_html,
+            chunk_html,
+            gr.Button(visible=False),  # play_btn hide
+            gr.Button(visible=True),   # pause_btn show
+            gr.Button(visible=True),   # ask_btn show
+        )
+
+    play_btn.click(
+        enter_playing_state,
+        inputs=[timeline_slider],
+        outputs=[player_status_bar, chunk_status, play_btn, pause_btn, ask_btn]
+    )
+
+    # 4d. Pause button — transition to PAUSED state
+    def enter_paused_state(slider_val):
+        total_chunks = len(narrative_subtitles)
+        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #f59e0b; font-family: monospace; text-align: center;">Chunk {int(slider_val) + 1} / {total_chunks} — paused</div>"""
+        status_html = """
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+                <span style="width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block;"></span>
+                <span style="font-size: 11px; color: #f59e0b; font-family: monospace;">PAUSED</span>
+            </div>
+        """
+        return (
+            status_html,
+            chunk_html,
+            gr.Button(visible=True),   # play_btn show (acts as resume)
+            gr.Button(visible=False),  # pause_btn hide
+        )
+
+    pause_btn.click(
+        enter_paused_state,
+        inputs=[timeline_slider],
+        outputs=[player_status_bar, chunk_status, play_btn, pause_btn]
+    )
+
     # 5. Playback timeline slider sync transcript subtitle lyrics
     def update_synced_subtitles(percentage_index_choice):
         idx = int(percentage_index_choice)
@@ -815,13 +917,15 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
     # 6. Ask button — pauses story, reveals Q&A panel
     def enter_asking_state():
         status_html = """
-            <div style="margin-top: 16px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
                 <span style="width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block; animation: pulse 1s infinite;"></span>
                 <span style="font-size: 11px; color: #f59e0b; font-family: monospace;">PAUSED — ASKING</span>
             </div>
         """
         return (
             status_html,               # player_status_bar
+            gr.Button(visible=False),  # play_btn hide
+            gr.Button(visible=False),  # pause_btn hide
             gr.Button(visible=False),  # ask_btn hide
             gr.Button(visible=True),   # resume_btn show
             gr.HTML(visible=True),     # qa_panel show
@@ -833,7 +937,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
     ask_btn.click(
         enter_asking_state,
         inputs=[],
-        outputs=[player_status_bar, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio]
+        outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio]
     )
 
     # 7. Submit question — generate mock answer (placeholder for real Qwen call)
@@ -874,13 +978,15 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
     # 8. Resume button — restores playing state, hides Q&A panel
     def enter_resume_state():
         status_html = """
-            <div style="margin-top: 16px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
                 <span style="width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block;"></span>
-                <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">PLAYING</span>
+                <span style="font-size: 11px; color: #4ade80; font-family: monospace;">PLAYING</span>
             </div>
         """
         return (
             status_html,               # player_status_bar
+            gr.Button(visible=False),  # play_btn hide
+            gr.Button(visible=True),   # pause_btn show
             gr.Button(visible=True),   # ask_btn show
             gr.Button(visible=False),  # resume_btn hide
             gr.HTML(visible=False),    # qa_panel hide
@@ -893,7 +999,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
     resume_btn.click(
         enter_resume_state,
         inputs=[],
-        outputs=[player_status_bar, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio, question_text]
+        outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio, question_text]
     )
 
     # 9. Story-finished trigger — slider reaches end (index 5 = last subtitle)