@pbirsinger/react-transcript-editor NPM

React Transcript Editor

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

--> Work in progress <--

You can see a demo by clicking here (and then click the load demo button)
And you can see a list of features here.

Development env

npm > 6.1.0
Node 10 - dubnium

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 - @pietrop/react-transcript-editor

npm install @pietrop/react-transcript-editor

import TranscriptEditor from "@pietrop/react-transcript-editor";

Minimal data needed for initialization

<TranscriptEditor
  transcriptData={someJsonFile}
  mediaUrl={"https://download.ted.com/talks/KateDarling_2018S-950k.mp4"}
/>

With more attributes

<TranscriptEditor
  transcriptData={someJsonFile}
  mediaUrl={"https://download.ted.com/talks/KateDarling_2018S-950k.mp4"}
  handleAutoSaveChanges={this.handleAutoSaveChanges}
  autoSaveContentType={'digitalpaperedit'}
  isEditable={true}
  spellCheck={false}
  sttJsonType={"pietropkaldi"}
  handleAnalyticsEvents={this.handleAnalyticsEvents}
  fileName={"ted-talk.mp4"}
  title={"Ted Talk"}
  ref={this.transcriptEditorRef}
  mediaType={'video'}
/>

Attributes	Description	required	type
transcriptData	Transcript json	yes	Json
mediaUrl	string url to media file - audio or video	yes	String
`handleAutoSaveChanges`	returns content of transcription after a change	no	Function
isAutoSave	default to true, enable the auto save callback `handleAutoSaveChanges`	no	Boolean
autoSaveContentType	specify the file format for data returned by `handleAutoSaveChanges`,falls back on `sttJsonType`. or `draftjs`	no	string
isEditable	set to true if you want to be able to edit the text	no	Boolean
spellCheck	set to true if you want the browser to spell check this transcript	no	Boolean
showTimecodes	set to true if you want to show timecodes in the transcript at paragraph level	no	Boolean
showSpeakers	set to true if you want to show speaker labels in the transcript at paragraph level	no	Boolean
`handleAnalyticsEvents`	if you want to collect analytics events.	yes	Function
fileName	used for saving and retrieving local storage blob files	no	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`, if not provided the component uses the url file type to determine and adjust use of the page layout	no	String

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

Note: mediaType if not defined, the component uses the url to determine the type and adjust the layout accordingly, however this could result in a slight delay when loading the component as it needs to fetch the media to determine it's file type

Note: in current version you need to add handleAnalyticsEvents function to be able to use keyboard shortcuts. But you can also just add a placeholder function if you don't wish to implement analytics

<TranscriptEditor
  transcriptData={someJsonFile}
  mediaUrl={"https://download.ted.com/talks/KateDarling_2018S-950k.mp4"}
  ...
  handleAnalyticsEvents = {()=>{console.log('handleAnalyticsEvents')}}
/>

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 "@pietrop/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

To import the components you can do as follows

import TimedTextEditor from "@pietrop/react-transcript-editor/TimedTextEditor";

import { TimedTextEditor } from "@pietrop/react-transcript-editor";

However if you are not using TranscriptEditor it is recommended to follow the second option and import individual components like: @pietrop/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 "@pietrop/react-transcript-editor/exportAdapter";

Converts from draftJs json format to other formats

import sttJsonAdapter from "@pietrop/react-transcript-editor/sttJsonAdapter";

Converts various stt json formats to draftJs

import {
  secondsToTimecode,
  timecodeToSeconds,
  shortTimecode
} from "@pietrop/react-transcript-editor/timecodeConverter";

some modules to convert to and from timecodes

System Architecture

uses storybook with the setup as explained in their docs to develop this React.
This uses CSS Modules to contain the scope of the css for this component.
`.storybook/webpack.config.js enanches the storybook webpack config to add support for css modules.
The parts of the component are inside ./packages
babel.config.js provides root level system config for babel 7.