Hearing Transcriptions Frontend

[Mephistic]

Problem

Now that we have our hearing transcription pipeline running successfully and have some real transcription data to work with, we need to surface that new data in the front-end.

To that end, let's create a new Hearing Detail page for hearings that displays the transcription data.

Success Criteria

• New "Hearing Detail" page at /hearing/[hearingId] that matches the attached design (excluding the Search component and the Committee Vote Results in the sidebar).
  • Hearings are stored in the events collection in Firestore with type hearing and firestore IDs like hearing-123 where 123 is the legislature's hearing ID. They will have a videoTranscriptionId that identifies an item in the transcriptions collection (if the hearing in question has a video and transcription available).
    • The videoURL on the Hearing event is what should be used for displaying the hearing video.
  • Transcriptions are stored in the transcriptions collection in Firestore. The best way to access the transcription text is in the paragraphs subcollection - it will have the hearing's transcription text broken up into reasonably sized chunks for a better UX.

Related Links

• Design for the Hearing Detail page: https://www.figma.com/design/nQBq3MSm4WHorHq5GlkAr9/Transcriptions---Video-Hearings?node-id=801-52&p=f&t=Q7R8gzYAAz7Obr2l-0
  • This is still being tweaked a little, but is finalized enough to begin work.
  • Design also has a mobile version in a mostly usable state - they just need to finalize it