React Transcript Editor

A React component to make transcribing audio and video easier and faster.

The project uses this github project board to organise and the co-ordinate development.

--> Work in progress <--

Development env

npm > 6.1.0
Node 10 - dubnium

Node version is set in node version manager .nvmrc

Setup

Fork this repository + git clone + cd into folder

Usage - development

To start the development server (with entry point src/index.js), run

npm start

Visit http://localhost:3000

Usage - production

Available on npm - @bbc/react-transcript-editor

npm install @bbc/react-transcript-editor

import { TranscriptEditor } from '@bbc/react-transcript-editor';

  <TranscriptEditor
     transcriptData=// Transcript json
     mediaUrl=// string url to media file - audio or video 
     isEditable={true}// set to true if you want to be able to edit the text
     sttJsonType={ 'bbckaldi' } // the type of STT Json transcript supported.
     handleAnalyticsEvents={ this.handleAnalyticsEvents } // optional - if you want to collect analytics events.
     fileName=// optional - used for saving and retrieving local storage blob files 
     title=// optional - defaults to ''
     ref={ this.transcriptEditorRef } // optional - if you want to have access to internal functions such as retrieving content from the editor. eg to save to a server/db.
   />

See ./src/index.js demo as a more detailed example usage of the component.

Note: fileName it is optional but it's needed if working with user uploaded local media in the browser, to be able to save and retrieve from local storage. For instance if you are passing a blob url to mediaUrl using createObjectURL this url is randomly re-generated on every page refresh so you wouldn't be able to restore a session, as mediaUrl is used as the local storage key. See demo app for more detail example of this./src/index.js

Typescript projects

If using in a parent project where typescript is being used you might need to add //@ts-ignore before the import statment like this

//@ts-ignore
import { TranscriptEditor } from "@bbc/react-transcript-editor";

System Architecture

uses create-component-lib as explaied in this blog post to setup the environment to develop this React.

This uses Create React App 2.0 so we are using CSS Modules to contain the scope of the css for this component.

Place everything you want to publish to npm inside src/lib.

Outside src/lib (but inside src/), you can create example web pages to test or demonstrate the usage of your components.

Documentation

There's a docs folder in this repository.

docs/notes contains dev notes on various aspects of the project.

docs/adr contains Architecture Decision Record.

An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences.

We are using this template for ADR

There also QA testing docs to manual test the component before a major release, (QA testing does not require any technical knowledge).

Build

To transpile src/lib and create a build in the dist folder, run:

npm run build:component

Demo

Demo can be viewed at https://bbc.github.io/react-transcript-editor

Build - demo

This github repository uses github pages to host a demo of the component, in docs/demo

npm run deploy:ghpages

add to git, and push to origin master to update

Alternatively If you simply want to build the demo locally in the build folder then just

npm run build:example

Tests

Test coverage using jest, to run tests

npm run test

Deployment

To push to npm - @bbc/react-transcript-editor

npm publish:public

This runs npm run build:component and npm publish --access public under the hood

Note that only README.md and the dist folders are published to npm.

Contributing

See CONTRIBUTING.md guidelines and CODE_OF_CONDUCT.md guidelines.

Licence

Legal Disclaimer

Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest.

andersonsantos/react-transcript-editor