Skip to content
A React component to make correcting automated transcriptions of audio and video easier and faster. By BBC News Labs. - Work in progress
JavaScript CSS
Branch: master
Clone or download
Latest commit c06416a Sep 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Develop (#175) Aug 13, 2019
.storybook Task: Move to scss, update and optimise webpack Aug 20, 2019
__mocks__ Monorepo refactor (#130) Apr 8, 2019
demo Fix: demo font fallback & breakpoint Sep 18, 2019
docs
packages Merge pull request #183 from bbc/refactor-media-player Sep 18, 2019
.eslintignore added build folder in git ignore Nov 22, 2018
.eslintrc Task: Move to scss, update and optimise webpack Aug 20, 2019
.gitignore adding media files to gitignore May 28, 2019
.npmignore Monorepo refactor (#130) Apr 8, 2019
.nvmrc
.stylelintrc Monorepo refactor (#130) Apr 8, 2019
.travis.yml Monorepo refactor (#130) Apr 8, 2019
CODE_OF_CONDUCT.md Update CODE_OF_CONDUCT.md Dec 20, 2018
CONTRIBUTING.md Monorepo refactor (#130) Apr 8, 2019
LICENCE.md licence change Nov 23, 2018
README.md storybook, npm, webpack setup - draft (#184) Aug 21, 2019
babel.config.js Monorepo refactor (#130) Apr 8, 2019
package-lock.json Merge pull request #183 from bbc/refactor-media-player Sep 18, 2019
package.json Merge pull request #183 from bbc/refactor-media-player Sep 18, 2019
webpack.config.js Task: Move to scss, update and optimise webpack Aug 20, 2019

README.md

React Transcript Editor

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

install size

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

--> Work in progress <--

Development env

Node version is set in node version manager .nvmrc

Setup

Fork this repository + git clone + cd into folder

Usage - development

Git clone this repository and cd into the folder.

To start the storybook run

npm start

Visit http://localhost:6006

Usage - production

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

npm install @bbc/react-transcript-editor
import TranscriptEditor from "@bbc/react-transcript-editor";
<TranscriptEditor
  transcriptData={someJsonFile}
  mediaUrl={"https://download.ted.com/talks/KateDarling_2018S-950k.mp4"}
  isEditable={true}
  spellCheck={false}
  sttJsonType={"bbckaldi"}
  handleAnalyticsEvents={this.handleAnalyticsEvents}
  fileName={"ted-talk.mp4"}
  title={"Ted Talk"}
  ref={this.transcriptEditorRef}
/>
Attributes Description required type
transcriptData Transcript json yes Json
mediaUrl string url to media file - audio or video yes String
isEditable set to true if you want to be able to edit the text no Boolean
spellCheck set to true if you want the browser to spell check this transcript no Boolean
handleAnalyticsEvents if you want to collect analytics events. no Function
fileName used for saving and retrieving local storage blob files no String
title defaults to empty string no String
ref if you want to have access to internal functions such as retrieving content from the editor. eg to save to a server/db. no React ref

See ./demo/app.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";

Internal components

You can also import some of the underlying React components directly.

  • TranscriptEditor

  • TimedTextEditor

  • MediaPlayer

  • VideoPlayer

  • Settings

  • KeyboardShortcuts

  • ProgressBar

  • PlaybackRate

  • PlayerControls

  • RollBack

  • Select

To import the components you can do as follows

import TimedTextEditor from "@bbc/react-transcript-editor/TimedTextEditor";
import { TimedTextEditor } from "@bbc/react-transcript-editor";

However if you are not using TranscriptEditor it is recommended to follow the second option and import individual components like: @bbc/react-transcript-editor/TimedTextEditor rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client. (Similarly to how react-bootstrap works)

See the storybook for each component details on optional and required attributes.

You can also use this node modules as standalone

import exportAdapter from "@bbc/react-transcript-editor/exportAdapter";

Converts from draftJs json format to other formats

import sttJsonAdapter from "@bbc/react-transcript-editor/sttJsonAdapter";

Converts various stt json formats to draftJs

import {
  secondsToTimecode,
  timecodeToSeconds,
  shortTimecode
} from "@bbc/react-transcript-editor/timecodeConverter";

some modules to convert to and from timecodes

System Architecture

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 ./packages and create a build in the ./dist folder, run:

npm run build:component

Demo & storybook

http://localhost:6006

Build - storybook

To build the storybook as a static site

npm run build:storybook

Publish storybook & demo to github pages

This github repository uses github pages to host the storybook and the demo of the component

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

you can then run this command to serve the static site locally

npm run build:storybook:serve

Tests

Test coverage using jest, to run tests

npm run test

During development you can use

npm run test:watch

Travis CI

On commit this repo uses the .travis.yml config tu run the automated test on travis CI.

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

See LICENCE

Legal Disclaimer

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

You can’t perform that action at this time.