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

by React

React Transcript Editor

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

View Demo Download Source

Development env

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:3006

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}// se to true if you want to be able to edit the text
    sttJsonType={ 'bbcKaldi' }// the type of STT Json transcript supported.
/>

System Architecture

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

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.

Build

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

npm run build:component

Build - 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.

GitHub