Build Modern Speaker Detail Modal & Improve Playback UX

Description

Create a modern standalone SpeakerDetailModal experience while improving diarized segment rendering and audio playback behavior.

This work includes:

• extracting speaker playback into an animated modal
• merging fragmented same-speaker diarization segments
• fixing playback to stop exactly at segment boundaries
• simplifying the sidebar speaker card experience

Tasks

• Create reusable SpeakerDetailModal.tsx

• Add:

  • framer-motion animations
  • glassmorphism UI
  • waveform/equalizer animations
  • speaker metadata display
  • transcript/timestamp layout

• Refactor renderSpeakerSegments

• Ensure only one modal is active at a time

• Sync modal playback with existing audio refs/state

• Add:

  • ESC dismissal
  • backdrop-click dismissal
  • clip download support

• Implement mergeSegments() preprocessing

• Merge consecutive same-speaker segments

• Concatenate transcript text intelligently

• Expand merged timestamp boundaries

• Prevent DOM pollution from micro-segments

• Remove playback auto-advance behavior

• Stop playback exactly at segment.end_time

• Reset playback state after completion

Acceptance Criteria

• Speaker segments render as clean merged cards
• Modal playback experience feels smooth and modern
• Audio stops exactly at selected segment end
• No unintended next-segment playback
• Playback/download works for merged segments
• UI remains performant even with granular diarization data