Playback Features inside the Editor page

[kouloumos]

In the current workflow, reviewers access the original source material through a link provided in the Editor page. While this setup facilitates a basic review process, it introduces several inefficiencies that can affect productivity:

1. Limited Playback Features: Many source material pages lack advanced playback controls, making it difficult for reviewers to easily navigate through the content.
2. Inefficient Editing Process: Reviewers often need to pause the source material on one screen to make edits on the transcript in another, disrupting their workflow.
3. Challenging Navigation: Locating specific sections of the source material requires manual interaction with the progress bar, which is not user-friendly.

To address these issues and significantly improve the efficiency of the reviewing process, we can integrate playback functionality directly within the Editor. This would involve:

1. Embedding Video and Audio Playback: For YouTube videos, embedding them directly into the Editor. For audio files, including a set of playback controls. This ensures that all source materials have consistent and efficient playback features.
2. Automated Pause During Editing: Introducing a feature where playback automatically pauses when the reviewer begins typing, allowing for seamless transitions between listening and editing.
3. Timestamp Navigation: Utilizing the existing timestamps in transcripts to allow reviewers to click a timestamp and jump directly to the corresponding section in the playback. This would streamline finding relevant parts of the audio or video.
4. Synchronized Word Highlighting: The text of the transcript is highlighted in sync with the playback. This would help reviewers to visually track where they are in the transcript as they listen.
   note: while we currently have word-per-word timestamps available from the AI-generated transcripts, these are not yet integrated into our review process. Incorporating this feature would therefore require significant enhancements to our system. We would need to ensure that the review interface can access and potentially modify these word-per-word timestamps, which may complicate the integration with our existing editing functionalities.

This feature set is similar to improvements we are considering for the Bitcoin Transcripts Registry, where embedding source material on transcript pages is also proposed. There, the focus is on improving reader experience by allowing direct navigation to specific segments via timestamps.

I see a potential to develop a shared playback component that could be reused across both the Registry and Reviews. The key difference would be that the Reviews version would need to support editing functionalities, while the Registry's implementation would be read-only. Furthermore, by utilizing a shared component, we could streamline the future integration of features that allow readers of the Bitcoin Transcripts Registry to easily propose fixes directly while reading a transcript.

Packages we could use directly or get inspiration from:

• https://github.com/pietrop/slate-transcript-editor
• https://github.com/bbc/react-transcript-editor
• https://github.com/smlum/scription

Action Items:

• Research for other existing solutions: Explore additional tools that could be adapted to our needs, focusing on those that offer advanced playback and interactive transcript features.
• Quick proof of concept: Implement a quick prototype by integrating the Slate Transcript Editor into our existing editor to assess feasibility and identify potential integration challenges.
• Understand word highlighting mechanisms: Investigate how word highlighting is implemented in other solutions to determine if we can apply similar functionalities with our existing data. This will help us estimate the scope of work needed to integrate such features into our platform.

[kouloumos]

@IgboPharaoh has added the slate-transcript-editor library to the project (WIP branch).

Next Steps:

1. Create a Proof of Concept (POC) by implementing the necessary changes to:
   • Convert our raw data to the format required by the slate-transcript-editor library.
   • Transform the output of the slate-transcript-editor library to match the desired output for our workflow.