Naturally Pacifist Marsupials

    @bbc/react-transcript-editor

    1.0.3 • Public • Published

    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=// 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
         spellCheck={false}// set to true if you want the browser to spell check this transcript
         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 ./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

    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.

    Install

    npm i @bbc/react-transcript-editor@1.0.3

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    14 MB

    Total Files

    32

    Last publish

    Collaborators

    • bennuttall
    • muhammed-hasan-bbc
    • spencc05
    • niklasr
    • mcmanj04
    • langtonm
    • leihe
    • allishultes
    • cmolumby
    • joewhitwell
    • tamsingreen
    • chrispnicholson
    • aniablaziak
    • newslabs-jenkins
    • sarahrainbow
    • sevisariisik