1 | # React Transcript Editor
|
2 |
|
3 |
|
4 |
|
5 | A React component to make transcribing audio and video easier and faster.
|
6 |
|
7 | <p>
|
8 | <a href="https://unpkg.com/react-transcript-editor@1.3.1-alpha.4/TranscriptEditor.js">
|
9 | <img src="http://img.badgesize.io/https://unpkg.com/react-transcript-editor@1.3.1-alpha.4/index.js?compression=gzip&label=size">
|
10 | </a>
|
11 | <a href="https://packagephobia.now.sh/result?p=@bbc/react-transcript-editor">
|
12 | <img src="https://badgen.net/packagephobia/install/@bbc/react-transcript-editor">
|
13 | </a>
|
14 | <a href="./package.json">
|
15 | <img src="https://img.shields.io/npm/v/@bbc/react-transcript-editor.svg?maxAge=3600&label=version&colorB=007ec6">
|
16 | </a>
|
17 | </p>
|
18 | <br/>
|
19 |
|
20 | The project uses [this github project boards to organise and the co-ordinate development](https://github.com/bbc/react-transcript-editor/projects).
|
21 |
|
22 | _--> Work in progress <--_
|
23 |
|
24 |
|
25 |
|
26 | - [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)
|
27 | - [And you can see a list of features here](./docs/features-list.md).
|
28 |
|
29 | ## Development env
|
30 |
|
31 |
|
32 |
|
33 | - npm > `6.1.0`
|
34 | - [Node 10 - dubnium](https://scotch.io/tutorials/whats-new-in-node-10-dubnium)
|
35 |
|
36 | Node version is set in node version manager [`.nvmrc`](https://github.com/creationix/nvm#nvmrc)
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 | ## Setup
|
43 |
|
44 |
|
45 |
|
46 |
|
47 | Fork this repository + git clone + cd into folder
|
48 |
|
49 | ## Usage - development
|
50 |
|
51 | Git clone this repository and cd into the folder.
|
52 |
|
53 | To start the storybook run
|
54 |
|
55 | ```
|
56 | npm start
|
57 | ```
|
58 |
|
59 | Visit [http://localhost:6006](http://localhost:6006)
|
60 |
|
61 | ## Usage - production
|
62 |
|
63 | Available on [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
|
64 |
|
65 | ```
|
66 | npm install @bbc/react-transcript-editor
|
67 | ```
|
68 |
|
69 | ```js
|
70 | import TranscriptEditor from "@bbc/react-transcript-editor";
|
71 | ```
|
72 |
|
73 | Minimal data needed for initialization
|
74 |
|
75 | ```js
|
76 | <TranscriptEditor
|
77 | transcriptData={someJsonFile}
|
78 | mediaUrl={"https://download.ted.com/talks/KateDarling_2018S-950k.mp4"}
|
79 | />
|
80 | ```
|
81 |
|
82 | With more attributes
|
83 | ```js
|
84 | <TranscriptEditor
|
85 | transcriptData={someJsonFile}
|
86 | mediaUrl={"https://download.ted.com/talks/KateDarling_2018S-950k.mp4"}
|
87 | handleAutoSaveChanges={this.handleAutoSaveChanges}
|
88 | autoSaveContentType={'digitalpaperedit'}
|
89 | isEditable={true}
|
90 | spellCheck={false}
|
91 | sttJsonType={"bbckaldi"}
|
92 | handleAnalyticsEvents={this.handleAnalyticsEvents}
|
93 | fileName={"ted-talk.mp4"}
|
94 | title={"Ted Talk"}
|
95 | ref={this.transcriptEditorRef}
|
96 | mediaType={'video'}
|
97 | timecodeOffset={60}
|
98 | />
|
99 | ```
|
100 |
|
101 | | Attributes | Description | required | type |
|
102 | | :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | :------: | :-------: |
|
103 | | transcriptData | Transcript json | yes | Json |
|
104 | | mediaUrl | string url to media file - audio or video | yes | String |
|
105 | |`handleAutoSaveChanges`| returns content of transcription after a change | no | Function |
|
106 | | autoSaveContentType | specify the file format for data returned by `handleAutoSaveChanges`,falls back on `sttJsonType`. or `draftjs` | no | string |
|
107 | | isEditable | set to true if you want to be able to edit the text | no | Boolean |
|
108 | | spellCheck | set to true if you want the browser to spell check this transcript | no | Boolean |
|
109 | |`handleAnalyticsEvents`| if you want to collect analytics events. | no | Function |
|
110 | | fileName | used for saving and retrieving local storage blob files | no | String |
|
111 | | title | defaults to empty string | no | String |
|
112 | | 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 |
|
113 | | 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 |
|
114 | | timecodeOffset | a number (in seconds) to offset transcript timecodes, eg. to synchronise timings from the camera | no | Number |
|
115 |
|
116 | See [`./demo/app.js` demo](./demo/app.js) as a more detailed example usage of the component.
|
117 |
|
118 | _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`](./src/index.js)_
|
119 |
|
120 | _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_
|
121 |
|
122 | ### Typescript projects
|
123 |
|
124 | If 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
|
125 |
|
126 | ```js
|
127 | //@ts-ignore
|
128 | import { TranscriptEditor } from "@bbc/react-transcript-editor";
|
129 | ```
|
130 |
|
131 | #### Internal components
|
132 |
|
133 | You can also import some of the underlying React components directly.
|
134 |
|
135 | - `TranscriptEditor`
|
136 | - `TimedTextEditor`
|
137 | - `MediaPlayer`
|
138 | - `VideoPlayer`
|
139 | - `Settings`
|
140 | - `KeyboardShortcuts`
|
141 |
|
142 | - `ProgressBar`
|
143 | - `PlaybackRate`
|
144 | - `PlayerControls`
|
145 | - `RollBack`
|
146 | - `Select`
|
147 |
|
148 | To import the components you can do as follows
|
149 |
|
150 | ```js
|
151 | import TimedTextEditor from "@bbc/react-transcript-editor/TimedTextEditor";
|
152 | ```
|
153 |
|
154 | ```js
|
155 | import { TimedTextEditor } from "@bbc/react-transcript-editor";
|
156 | ```
|
157 |
|
158 | 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`](https://react-bootstrap.github.io/getting-started/introduction) works)
|
159 |
|
160 | See [the storybook](https://bbc.github.io/react-transcript-editor) for each component details on optional and required attributes.
|
161 |
|
162 | You can also use this node modules as standalone
|
163 |
|
164 | ```js
|
165 | import exportAdapter from "@bbc/react-transcript-editor/exportAdapter";
|
166 | ```
|
167 |
|
168 | Converts from draftJs json format to other formats
|
169 |
|
170 | ```js
|
171 | import sttJsonAdapter from "@bbc/react-transcript-editor/sttJsonAdapter";
|
172 | ```
|
173 |
|
174 | Converts various stt json formats to draftJs
|
175 |
|
176 | ```js
|
177 | import {
|
178 | secondsToTimecode,
|
179 | timecodeToSeconds,
|
180 | shortTimecode
|
181 | } from "@bbc/react-transcript-editor/timecodeConverter";
|
182 | ```
|
183 |
|
184 | some modules to convert to and from timecodes
|
185 |
|
186 | ## System Architecture
|
187 |
|
188 |
|
189 |
|
190 | - 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.
|
191 | - This uses [CSS Modules](https://github.com/css-modules/css-modules) to contain the scope of the css for this component.
|
192 | - [`.storybook/webpack.config.js](./.storybook/webpack.config.js) enanches the storybook webpack config to add support for css modules.
|
193 | - The parts of the component are inside [`./packages`](./packages)
|
194 | - [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).
|
195 |
|
196 |
|
197 |
|
198 | ## Documentation
|
199 |
|
200 | There's a [docs](./docs) folder in this repository.
|
201 |
|
202 | [docs/notes](./docs/notes) contains dev notes on various aspects of the project.
|
203 |
|
204 | [docs/adr](./docs/adr) contains [Architecture Decision Record](https://github.com/joelparkerhenderson/architecture_decision_record).
|
205 |
|
206 | > An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences.
|
207 |
|
208 | We are using [this template for ADR](https://gist.github.com/iaincollins/92923cc2c309c2751aea6f1b34b31d95)
|
209 |
|
210 | [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).
|
211 |
|
212 | ## Build
|
213 |
|
214 |
|
215 |
|
216 | > To transpile `./packages` and create a build in the `./dist` folder, run:
|
217 |
|
218 | ```
|
219 | npm run build:component
|
220 | ```
|
221 |
|
222 | ## Demo & storybook
|
223 |
|
224 | - **Storybook** can bew viewed at [https://bbc.github.io/react-transcript-editor/](https://bbc.github.io/react-transcript-editor/)
|
225 |
|
226 | - **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)
|
227 |
|
228 | http://localhost:6006
|
229 |
|
230 |
|
231 | -->
|
232 |
|
233 | ## Build - storybook
|
234 |
|
235 | To build the storybook as a static site
|
236 |
|
237 | ```
|
238 | npm run build:storybook
|
239 | ```
|
240 |
|
241 | ## Publish storybook & demo to github pages
|
242 |
|
243 | This github repository uses [github pages](https://pages.github.com/) to host the storybook and the demo of the component
|
244 |
|
245 | ```
|
246 | npm run deploy:ghpages
|
247 | ```
|
248 |
|
249 | add to git, and push to origin master to update
|
250 |
|
251 |
|
252 |
|
253 | Alternatively If you simply want to build the demo locally in the `build` folder then just
|
254 |
|
255 | ```
|
256 | npm run build:storybook
|
257 | ```
|
258 |
|
259 | you can then run this command to serve the static site locally
|
260 |
|
261 | ```
|
262 | npm run build:storybook:serve
|
263 | ```
|
264 |
|
265 | ## Tests
|
266 |
|
267 |
|
268 |
|
269 | Test coverage using [`jest`](https://jestjs.io/), to run tests
|
270 |
|
271 | ```sh
|
272 | npm run test
|
273 | ```
|
274 |
|
275 | During development you can use
|
276 |
|
277 | ```sh
|
278 | npm run test:watch
|
279 | ```
|
280 |
|
281 | ## Travis CI
|
282 |
|
283 | On commit this repo uses the [.travis.yml](./.travis.yml) config tu run the automated test on [travis CI](https://travis-ci.org/bbc/react-transcript-editor).
|
284 |
|
285 | ## Deployment
|
286 |
|
287 |
|
288 |
|
289 | To push to [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
|
290 |
|
291 | ```
|
292 | npm publish:public
|
293 | ```
|
294 |
|
295 | This runs `npm run build:component` and `npm publish --access public` under the hood
|
296 |
|
297 | > Note that only `README.md` and the `dist` folders are published to npm.
|
298 |
|
299 | ## Contributing
|
300 |
|
301 | See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) guidelines.
|
302 |
|
303 | ## Licence
|
304 |
|
305 |
|
306 |
|
307 | See [LICENCE](./LICENCE.md)
|
308 |
|
309 | ## Legal Disclaimer
|
310 |
|
311 | _Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest._
|