WordloopApp — Audio Playback UI
Audio player component wired to the signed URL, active segment highlight synced to currentTime, click-to-seek on transcript rows, and recoverable error UI for expired links.
App — Audio Playback UI
Owner: App Engineer Domain: app Complexity: M Prerequisite: Core Audio URL and ML Timestamped Transcript slices merged
When this slice is complete, the finalized meeting review page shows the expected tabs, an audio player wired to the signed playback URL supports play/pause/seek, the active transcript row highlights in sync with currentTime, clicking a transcript row seeks the player, and an expired or unavailable link surfaces a recoverable error that reloads a fresh one.
Required Capabilities
- The finalized meeting review page renders transcript, summary, talking points, tasks, notes, and playback tabs.
- The audio player consumes
GET /meetings/{id}/audio-url's{url, mime_type, duration_ms, expires_at}shape and supports play/pause/seek. - The transcript row matching the player's current
currentTime(via segmentstart_ms/end_ms) is visually highlighted and updates as playback advances. - Clicking a transcript row seeks the player to that segment's
start_ms. - An expired or unavailable signed URL surfaces a recoverable error in the player and can reload a fresh link.
Dependencies
- Core Audio URL slice must be merged — specifically
GET /meetings/{id}/audio-url. - ML Timestamped Transcript slice must be merged — specifically
start_ms/end_mson final segments.
Test Cases
Test cases map to tests/bets/meeting-recording/test_milestone_10_audio_playback_and_review.py. Run via ./dev test bet meeting-recording.
| Test | Location | Assertion |
|---|---|---|
test_finalized_meeting_review_shows_expected_tabs | test_milestone_10 (App Vitest test_app_review_tabs_present) | The review page renders the expected tabs. |
test_audio_playback_uses_signed_url | test_milestone_10 (App Vitest test_app_audio_player_uses_signed_url) | The audio player consumes the signed-URL shape returned by GET /audio-url. |
test_user_can_play_pause_and_seek_audio | test_milestone_10 (App Vitest test_app_player_play_pause_seek) | Play/pause/seek controls drive the media element. |
test_transcript_highlighting_follows_playback_time | test_milestone_10 (App Vitest test_app_transcript_highlight_follows_playback) | The highlighted transcript row follows the player's currentTime. |
test_clicking_transcript_seeks_audio | test_milestone_10 (App Vitest test_app_click_transcript_seeks_player) | Clicking a transcript row seeks the player to the matching timestamp. |
test_expired_signed_url_has_recoverable_error | test_milestone_10 (App Vitest test_app_expired_signed_url_recoverable_error) | The player shows a recoverable error on an expired/unavailable link and reloads a fresh one. |
Completion Checklist
- Code merged and deployed
- Bet progress tests pass (
./dev test bet meeting-recording) - Permanent service tests implemented per testing strategy
- Code review completed
- Testing review completed
- System documentation updated (as applicable)
10 Audio Playback And Review
Final review supports audio playback, signed access, and synced transcript navigation.
Core — Audio URL
GET /meetings/:id/audio-url returning a time-limited signed URL, with mime_type and duration_ms in the response, and the recoverable-error contract for expired or forged links.