Nostradamus Prophecy Machine

    @bbc/react-transcript-editor

    0.3.1 • 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 board 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

    To start the development server (with entry point src/index.js), run

    npm start
    

    Visit http://localhost:3000

    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
         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 ./src/index.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";

    System Architecture

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

    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.

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

    npm run build:component
    

    Demo

    Demo can be viewed at https://bbc.github.io/react-transcript-editor

    Build - demo

    This github repository uses github pages to host a demo of the component, in docs/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.

    Contributing

    See CONTRIBUTING.md guidelines and CODE_OF_CONDUCT.md guidelines.

    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@0.3.1

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    164 kB

    Total Files

    54

    Last publish

    Collaborators

    • claydelas
    • jkent
    • sevisariisik
    • bennuttall
    • spencc05
    • niklasr
    • mcmanj04
    • langtonm
    • tomfranciswinnington
    • leihe
    • allishultes
    • joewhitwell
    • tamsingreen
    • chrispnicholson
    • aniablaziak
    • newslabs-jenkins
    • sarahrainbow