{"id":18376917,"url":"https://github.com/bbc/react-transcript-editor","last_synced_at":"2025-05-15T17:08:45.393Z","repository":{"id":37548946,"uuid":"155731010","full_name":"bbc/react-transcript-editor","owner":"bbc","description":"A React component to make correcting automated transcriptions of audio and video easier and faster. By BBC News Labs. - Work in progress","archived":false,"fork":false,"pushed_at":"2024-02-12T21:24:55.000Z","size":22263,"stargazers_count":584,"open_issues_count":92,"forks_count":165,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-03-31T22:16:25.610Z","etag":null,"topics":["bbc-news-labs","kaldi","news-labs","react","stt","textav","transcript","transcript-editor","transcription"],"latest_commit_sha":null,"homepage":"https://bbc.github.io/react-transcript-editor","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bbc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-01T14:52:52.000Z","updated_at":"2025-03-28T13:22:53.000Z","dependencies_parsed_at":"2024-06-18T15:18:13.696Z","dependency_job_id":"d00c3bf4-3dc2-484c-914d-c2a5c526afbf","html_url":"https://github.com/bbc/react-transcript-editor","commit_stats":{"total_commits":456,"total_committers":19,"mean_commits":24.0,"dds":0.4298245614035088,"last_synced_commit":"54b0a18a85af6189a3900e6a3c8bd3231c153fcd"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Freact-transcript-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Freact-transcript-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Freact-transcript-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Freact-transcript-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bbc","download_url":"https://codeload.github.com/bbc/react-transcript-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744295,"owners_count":20988782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bbc-news-labs","kaldi","news-labs","react","stt","textav","transcript","transcript-editor","transcription"],"created_at":"2024-11-06T00:25:23.726Z","updated_at":"2025-04-07T23:04:37.626Z","avatar_url":"https://github.com/bbc.png","language":"JavaScript","readme":"# React Transcript Editor\n\nA React component to make transcribing audio and video easier and faster.\n\n\u003cp\u003e\n  \u003ca href=\"https://unpkg.com/react-transcript-editor@1.3.1-alpha.4/TranscriptEditor.js\"\u003e\n    \u003cimg src=\"http://img.badgesize.io/https://unpkg.com/react-transcript-editor@1.3.1-alpha.4/index.js?compression=gzip\u0026amp;label=size\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://packagephobia.now.sh/result?p=@bbc/react-transcript-editor\"\u003e\n    \u003cimg src=\"https://badgen.net/packagephobia/install/@bbc/react-transcript-editor\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"./package.json\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@bbc/react-transcript-editor.svg?maxAge=3600\u0026label=version\u0026colorB=007ec6\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\nThe project uses [this github project boards to organise and the co-ordinate development](https://github.com/bbc/react-transcript-editor/projects).\n_--\u003e Work in progress \u003c--_\n\n\u003c!-- _Screenshot of UI - optional_ --\u003e\n\n- [You can see a demo by clicking here](https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default) (and then click the `load demo` button)\n- [And you can see a list of features here](./docs/features-list.md).\n\n## Development env\n\n \u003c!-- _How to run the development environment_ --\u003e\n\n- npm \u003e `6.1.0`\n- [Node 10 - dubnium](https://scotch.io/tutorials/whats-new-in-node-10-dubnium)\n\nNode version is set in node version manager [`.nvmrc`](https://github.com/creationix/nvm#nvmrc)\n\n## Setup\n\n1. Fork this repository\n2. Clone this repository to a directory of your choice\n3. Run `npm i` to install dependencies\n\n## Usage - development\n\nWe use a tool called [`storybook`](https://storybook.js.org)\nto run the components locally. To start the Storybook, run:\n\n```sh\nnpm start\n```\n\nRunning that command should open the locally hosted Storybook, but if it doesn't,\nvisit [http://localhost:6006](http://localhost:6006)\n\n## Usage - production\n\nIn order to use a published version of `react-transcript-editor`,\ninstall the published module [`@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)\nby running:\n\n```sh\nnpm install @bbc/react-transcript-editor\n```\n\n```js\nimport TranscriptEditor from \"@bbc/react-transcript-editor\";\n```\n\n### Basic use case\n\n```js\n\u003cTranscriptEditor\n  transcriptData={someJsonFile}\n  mediaUrl={\"https://download.ted.com/talks/KateDarling_2018S-950k.mp4\"}\n/\u003e\n```\n\n`transcriptData` and `mediaUrl` are non-optional props to use `TranscriptEditor`.\nSee the full list of options [here](#transcripteditor-props-list).\n\n### Advanced use case\n\n```js\n\u003cTranscriptEditor\n  transcriptData={someJsonFile}\n  mediaUrl={\"https://download.ted.com/talks/KateDarling_2018S-950k.mp4\"}\n  handleAutoSaveChanges={this.handleAutoSaveChanges}\n  autoSaveContentType={\"digitalpaperedit\"}\n  isEditable={true}\n  spellCheck={false}\n  sttJsonType={\"bbckaldi\"}\n  handleAnalyticsEvents={this.handleAnalyticsEvents}\n  fileName={\"ted-talk.mp4\"}\n  title={\"Ted Talk\"}\n  ref={this.transcriptEditorRef}\n  mediaType={\"video\"}\n/\u003e\n```\n\n### TranscriptEditor Props List\n\n| Props                   | Description                                                                                                             |                        required                        |   type    |                                    default                                     |\n| :---------------------- | :---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------: | :-------: | :----------------------------------------------------------------------------: |\n| `transcriptData`        | Transcript JSON                                                                                                         |                          yes                           |   JSON    |                                                                                |\n| `mediaUrl`              | URL to media (audio or video) file                                                                                      |                          yes                           |  String   |                                                                                |\n| `handleAutoSaveChanges` | Function to handle the content of transcription after a change                                                          |                           no                           | Function  |\n| `autoSaveContentType`   | Specify the file format for data returned by `handleAutoSaveChanges`                                                    |                           no                           |  String   |               falls back to `sttJsonType`, if set, or `draftjs`                |\n| `isEditable`            | Set to `true` to have the ability to edit the text                                                                      |                           no                           |  Boolean  |                                     False                                      |\n| `spellCheck`            | Set to `true` to spell-check the transcript                                                                             |                           no                           |  Boolean  |                                     False                                      |\n| `sttJsonType`           | The data model type of your `transcriptData`                                                                            |                           no                           |  String   |                                   `draftjs`                                    |\n| `handleAnalyticsEvents` | if you want to collect analytics events.                                                                                |                           no                           | Function  |                                     false                                      |\n| `fileName`              | used for saving and retrieving local storage blob files                                                                 | no, but disables the [local save feature](#local-save) |  String   |\n| `title`                 | defaults to empty string                                                                                                |                           no                           |  String   |\n| `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 |\n| `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 |\n\nSee [`./demo/app.js` demo](./demo/app.js) as a more detailed example usage of the component.\n\n#### Local save\n\n`fileName` is optional but it's needed if working with user uploaded local media in the browser,\nto be able to save and retrieve from local storage.\nFor 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`](./src/index.js)\\_\n\n### Typescript projects\n\nIf using in a parent project where [typescript](https://www.typescriptlang.org/) is being used you might need to add `//@ts-ignore` before the import statment like this\n\n```js\n//@ts-ignore\nimport { TranscriptEditor } from \"@bbc/react-transcript-editor\";\n```\n\n#### Internal components\n\n##### Direct imports\n\nYou can also import some of the underlying React components directly.\nSee [the storybook](https://bbc.github.io/react-transcript-editor) for each component details on optional and required attributes.\n\n- `TranscriptEditor`\n- `TimedTextEditor`\n- `MediaPlayer`\n- `VideoPlayer`\n- `Settings`\n- `KeyboardShortcuts`\n- `ProgressBar`\n- `PlaybackRate`\n- `PlayerControls`\n- `RollBack`\n- `Select`\n\nTo import the components you can do as follows\n\n```js\nimport TimedTextEditor from \"@bbc/react-transcript-editor/TimedTextEditor\";\n```\n\n```js\nimport { TimedTextEditor } from \"@bbc/react-transcript-editor\";\n```\n\n##### Import recommendation\n\nHowever 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.\nDoing 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`](https://react-bootstrap.github.io/getting-started/introduction) works)\n\n#### Other Node Modules (non-react)\n\nSome of these node modules can be used as standalone imports.\n\n##### Export Adapter\n\nConverts from draftJs json format to other formats\n\n```js\nimport exportAdapter from \"@bbc/react-transcript-editor/exportAdapter\";\n```\n\n##### STT JSON Adapter\n\nConverts various stt json formats to draftJs\n\n```js\nimport sttJsonAdapter from \"@bbc/react-transcript-editor/sttJsonAdapter\";\n```\n\n##### Conversion modules to/from Timecodes\n\nSome modules to convert to and from timecodes\n\n```js\nimport {\n  secondsToTimecode,\n  timecodeToSeconds,\n  shortTimecode,\n} from \"@bbc/react-transcript-editor/timecodeConverter\";\n```\n\n## System Architecture\n\n- Uses [`storybook`](https://storybook.js.org) with the setup as [explained in their docs](https://storybook.js.org/docs/guides/guide-react/) to develop this React.\n- This uses [CSS Modules](https://github.com/css-modules/css-modules) to contain the scope of the css for this component.\n- [`.storybook/webpack.config.js](./.storybook/webpack.config.js) enables the storybook webpack config to add support for css modules.\n- The parts of the component are inside [`./packages`](./packages)\n- [babel.config.js](./babel.config.js) provides root level system config for [babel 7](https://babeljs.io/docs/en/next/config-files#project-wide-configuration).\n\n## Documentation\n\nThere's a [docs](./docs) folder in this repository, which contains subdirectories to keep:\n\n- [notes](./docs/notes): dev notes on various aspects of the project.\n- [adr](./docs/adr): [Architecture Decision Record](https://github.com/joelparkerhenderson/architecture_decision_record).\n\n### ADR\n\n\u003e An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences.\n\nWe are using [this template for ADR](https://gist.github.com/iaincollins/92923cc2c309c2751aea6f1b34b31d95)\n\n### QA\n\n[There also QA testing docs](./docs/qa/README.md) to manual test the component before a major release, (QA testing does not require any technical knowledge).\n\n## Build\n\n\u003e To transpile `./packages` and create a build in the `./dist` folder, run:\n\n```sh\nnpm run build:component\n```\n\nTo understand the build process, have a read through [this](./docs/guides/storybook-npm-setup.md).\n\n## Demo \u0026 storybook\n\n- **Storybook** can be viewed at [https://bbc.github.io/react-transcript-editor/](https://bbc.github.io/react-transcript-editor/)\n- **Demo** can be viewed at [https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default](https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default)\n\nTo run locally, see [setup](#usage---development).\n\n### Build - storybook\n\nTo build the storybook as a static site, run:\n\n```sh\nnpm run build:storybook\n```\n\nThis will produce a `build` folder containing the static site of the demo.\nTo serve the `build` folder locally, run:\n\n```sh\nnpm run build:storybook:serve\n```\n\n#### Publishing to a web page\n\n##### Github Pages\n\nWe use [github pages](https://pages.github.com/) to host the storybook and the [demo](https://help.github.com/articles/user-organization-and-project-pages/#project-pages-sites) of the component.\nMake 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`.\nWhen you are ready, re-publish the Storybook by running:\n\n```sh\nnpm run deploy:ghpages\n```\n\n## Tests\n\nWe are using [`jest`](https://jestjs.io/) for the testing framework.\nTo run tests, run:\n\n```sh\nnpm run test\n```\n\nFor convenience, during development you can use:\n\n```sh\nnpm run test:watch\n```\n\nand watch the test be re-run at every save.\n\n## Travis CI\n\nOn commit this repo uses the [.travis.yml](./.travis.yml) config to run the automated test on [travis CI](https://travis-ci.org/bbc/react-transcript-editor).\n\n## Publish to NPM\n\nTo publish to [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor) run:\n\n```sh\nnpm publish:public\n```\n\nThis runs `npm run build:component` and `npm publish --access public` under the hood, building the component and publishing to NPM.\n\n\u003e Note that only `README.md` and the `dist` folders are published to npm.\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) guidelines.\n\n## Licence\n\n\u003c!-- mention MIT Licence --\u003e\n\nSee [LICENCE](./LICENCE.md)\n\n## Legal Disclaimer\n\n_Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest._\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbc%2Freact-transcript-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbbc%2Freact-transcript-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbc%2Freact-transcript-editor/lists"}