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

• You can see a demo by clicking here (and then click the load demo button)
• And you can see a list of features here.

• npm > 6.1.0
• Node 10 - dubnium

Node version is set in node version manager .nvmrc

1. Fork this repository
2. Clone this repository to a directory of your choice
3. Run npm i to install dependencies

We use a tool called storybook to run the components locally. To start the Storybook, run:

npm start

Running that command should open the locally hosted Storybook, but if it doesn't, visit http://localhost:6006

In order to use a published version of react-transcript-editor, install the published module @bbc/react-transcript-editor by running:

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"}
/>

transcriptData and mediaUrl are non-optional props to use TranscriptEditor. See the full list of options here.

<TranscriptEditor
  transcriptData={someJsonFile}
  mediaUrl={"https://download.ted.com/talks/KateDarling_2018S-950k.mp4"}
  handleAutoSaveChanges={this.handleAutoSaveChanges}
  autoSaveContentType={"digitalpaperedit"}
  isEditable={true}
  spellCheck={false}
  sttJsonType={"bbckaldi"}
  handleAnalyticsEvents={this.handleAnalyticsEvents}
  fileName={"ted-talk.mp4"}
  title={"Ted Talk"}
  ref={this.transcriptEditorRef}
  mediaType={"video"}
/>

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

fileName 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_

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";

You can also import some of the underlying React components directly. See the storybook for each component details on optional and required attributes.

• 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)

Some of these node modules can be used as standalone imports.

Converts from draftJs json format to other formats

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

Converts various stt json formats to draftJs

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

Some modules to convert to and from timecodes

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

• Uses storybook with the setup as explained in their docs to develop this React.
• This uses CSS Modules to contain the scope of the css for this component.
• `.storybook/webpack.config.js enables the storybook webpack config to add support for css modules.
• The parts of the component are inside ./packages
• babel.config.js provides root level system config for babel 7.

There's a docs folder in this repository, which contains subdirectories to keep:

• notes: dev notes on various aspects of the project.
• adr: 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).

To transpile ./packages and create a build in the ./dist folder, run:

npm run build:component

To understand the build process, have a read through this.

• Storybook can be viewed at https://bbc.github.io/react-transcript-editor/
• Demo can be viewed at https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default

To run locally, see setup.

To build the storybook as a static site, run:

npm run build:storybook

This will produce a build folder containing the static site of the demo. To serve the build folder locally, run:

npm run build:storybook:serve

We use github pages to host the storybook and the demo of the component. Make sure to add your changes to git, and push to origin master to ensure the code in master is reflective of what's online on Github Pages. When you are ready, re-publish the Storybook by running:

npm run deploy:ghpages

We are using jest for the testing framework. To run tests, run:

npm run test

For convenience, during development you can use:

npm run test:watch

and watch the test be re-run at every save.

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

To publish to npm - @bbc/react-transcript-editor run:

npm publish:public

This runs npm run build:component and npm publish --access public under the hood, building the component and publishing to NPM.

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

See CONTRIBUTING.md guidelines and CODE_OF_CONDUCT.md guidelines.

See LICENCE

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