feat: add audio transcript display with synced playback

Audio Transcript Display with Synced Playback

Description

This PR adds a new audio transcript display feature that integrates seamlessly with the existing media player. The TranscriptPanel component displays speech-to-text transcripts that automatically sync with audio playback, allowing users to view, navigate, and interact with transcript text while listening to audio.

Changes Made:

• Added new TranscriptPanel component for displaying and syncing transcripts with audio playback
• Extended ContributionItem interface in MediaDetailModal to support extracted transcript data
• Integrated TranscriptPanel into RecordDetails page for audio records
• Implemented smart segment grouping (merges segments with < 1 second gaps)
• Added text cleaning to remove control characters and normalize whitespace
• Click segments to seek audio to that timestamp
• Real-time highlighting and auto-scroll to active segment during playback

Type of Change

• Bug Fix
• Feature Development
• Documentation

Testing

• Tested on desktop
• Tested on mobile
• Tested in different browsers

Screenshots (if applicable)

Transcript Panel displays below audio player with toggle functionality

Video Demo

[Link to screen recording demonstrating audio playback with transcript synchronization, interactive segment clicking, and toggle functionality]

If you have used AI create this PR, please also record video of yourself explaining the changes.

[Link to code walkthrough video explaining the cleanText function, segment grouping logic, and sync mechanism]

Checklist

• Code follows project style guidelines
• Self-review completed
• No console errors
• TypeScript types are correct
• All tests pass (2866 passed, 33 skipped)
• Build succeeds without errors
• ESLint compliant
• No breaking changes