npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bbc/react-transcript-editor

v1.4.4

Published

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

Downloads

3,741

Readme

React Transcript Editor

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

Development env

Node version is set in node version manager .nvmrc

Setup

  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

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

Advanced use case

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

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

//@ts-ignore
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 {
  secondsToTimecode,
  timecodeToSeconds,
  shortTimecode,
} from "@bbc/react-transcript-editor/timecodeConverter";

System Architecture

Documentation

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

ADR

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

QA

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

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

Tests

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