Nasal Piercings Manipulator

    @bbc/react-transcript-editor

    0.2.11 • 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:3006

    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}// se to true if you want to be able to edit the text
        sttJsonType={ 'bbckaldi' }// the type of STT Json transcript supported.
        fileName={ this.state.fileName }// optional*
    />

    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

    System Architecture

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

    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

    See LICENCE.md

    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.2.11

    Version

    0.2.11

    License

    MIT

    Unpacked Size

    149 kB

    Total Files

    51

    Last publish

    Collaborators

    • rjw57
    • geoffbbc
    • faithege
    • claydelas
    • jkent
    • sevisariisik
    • bennuttall
    • spencc05
    • jack_mcpoland
    • mcmanj04
    • langtonm
    • zthomas997
    • tomfranciswinnington
    • leihe
    • joewhitwell
    • tamsingreen
    • chrispnicholson
    • aniablaziak
    • newslabs-jenkins
    • sarahrainbow