Nostalgic Perogi Monogramming


    1.4.4 • Public • Published

    React Transcript Editor

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

    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


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

    Usage - development

    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

    Usage - production

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

    Basic use case


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

    Advanced use case

      title={"Ted Talk"}

    TranscriptEditor Props List

    Props Description required type default
    transcriptData Transcript JSON yes JSON
    mediaUrl URL to media (audio or video) file yes String
    handleAutoSaveChanges Function to handle the content of transcription after a change no Function
    autoSaveContentType Specify the file format for data returned by handleAutoSaveChanges no String falls back to sttJsonType, if set, or draftjs
    isEditable Set to true to have the ability to edit the text no Boolean False
    spellCheck Set to true to spell-check the transcript no Boolean False
    sttJsonType The data model type of your transcriptData no String draftjs
    handleAnalyticsEvents if you want to collect analytics events. no Function false
    fileName used for saving and retrieving local storage blob files no, but disables the local save feature 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
    mediaType Can be audio or video. Changes the look of the UI based on media type. no String if not provided the component uses the medialUrl to determine the media type

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

    Local save

    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_

    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

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

    Internal components

    Direct imports

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

    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)

    Other Node Modules (non-react)

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

    Export Adapter

    Converts from draftJs json format to other formats

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

    Converts various stt json formats to draftJs

    import sttJsonAdapter from "@bbc/react-transcript-editor/sttJsonAdapter";
    Conversion modules to/from Timecodes

    Some modules to convert to and from timecodes

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

    System Architecture


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


    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.

    Demo & storybook

    To run locally, see setup.

    Build - storybook

    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

    Publishing to a web page

    Github Pages

    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.

    Travis CI

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

    Publish to NPM

    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 and the dist folders are published to npm.


    See guidelines and guidelines.



    Legal Disclaimer

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


    npm i @bbc/react-transcript-editor

    DownloadsWeekly Downloads






    Unpacked Size

    34.1 MB

    Total Files


    Last publish


    • izzy-pickering
    • rjw57
    • geoffbbc
    • faithege
    • claydelas
    • sevisariisik
    • bennuttall
    • spencc05
    • jack_mcpoland
    • mcmanj04
    • langtonm
    • tomfranciswinnington
    • tamsingreen
    • chrispnicholson
    • newslabs-jenkins
    • sarahrainbow