# Hypertranscript

## Component/part description

Best described by functionality

* click on word, play video at corresponding part
* video plays, words change color to show you were it's at. 
* sync scroll (optional)
* search text (optional) 

It’s a view. It’s extensible. Eg need to be able to add other components, for text selections, annotations, tags, search, etc to the view.

## Related projects

### What is an `hypertranscript`?

[HyperTranscript representation as described in hyperaudio](http://hyperaud.io/blog/hypertranscripts) `==` Clickable transcript in sync with video.

\--

## Implementations Options considered

in quickQuote, made hypertranscript using rails and erb.

\--

## Current implementation

Using backbone and browserify, with ejs templating.

\--

## What needs refactoring

Reusable front end client side components.

At the moment the views are one block, it could be smaller views combined together, with defined interfaces, to make it more reusable.

Eg the hypertranscript "component" in transcript show and in paper edit is repeated. See view components for paper-edit

Eg in branch paper-edit (which is an attempt to implement “v3”) I have tried to put hypertranscript template as a separate view. <https://github.com/OpenNewsLabs/autoEdit_2/blob/paperedit/lib/app/templates/hypertranscript.html.ejs>

Which extracts it from transcription show template. <https://github.com/OpenNewsLabs/autoEdit_2/blob/paperedit/lib/app/templates/transcription_show.html.ejs>

Paper-edit show and transcription show could be made of components.

Entertaining the idea of using [vuejs](/documentation/master-1.0.6/transcriptions/hypertranscript.md) to help with this. Or to do more research on how to best use backbone views in a more modular way.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://autoedit.gitbook.io/documentation/master-1.0.6/transcriptions/hypertranscript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.