@kablamo/react-transcript-editor
v1.5.0-alpha.3
Published
A React component to make transcribing audio and video easier and faster.
Downloads
14
Readme
React Transcript Editor
This a fork of @bbc/react-transcript-editor
. You probably want the original library.
A React component to make transcribing audio and video easier and faster.
The project uses this github project boards to organise and the co-ordinate development.
--> 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 - @bbc/react-transcript-editor
npm install @bbc/react-transcript-editor
import TranscriptEditor from "@bbc/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={"bbckaldi"}
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 |
| 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 |
|handleAnalyticsEvents
| if you want to collect analytics events. | no | 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
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
To import the components you can do as follows
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
- 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.
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
Storybook can bew viewed at https://bbc.github.io/react-transcript-editor/
Demo can be viewed at https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default
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 thedist
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.