You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
| mediaUrl | string url to media file - audio or video | yes | String |
104
-
|`handleAutoSaveChanges`| returns content of transcription after a change | no | Function |
105
-
| autoSaveContentType | specify the file format for data returned by `handleAutoSaveChanges`,falls back on `sttJsonType`. or `draftjs`| no | string |
106
-
| isEditable | set to true if you want to be able to edit the text | no | Boolean |
107
-
| spellCheck | set to true if you want the browser to spell check this transcript | no | Boolean |
108
-
|`handleAnalyticsEvents`| if you want to collect analytics events. | no | Function |
109
-
| fileName | used for saving and retrieving local storage blob files | no | String |
110
-
| title | defaults to empty string | no | String |
111
-
| 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 |
112
-
| 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 |
|`mediaUrl`| URL to media (audio or video) file | yes | String ||
103
+
|`handleAutoSaveChanges`| Function to handle the content of transcription after a change | no | Function |
104
+
|`autoSaveContentType`| Specify the file format for data returned by `handleAutoSaveChanges`| no | String | falls back to `sttJsonType`, if set, or `draftjs`|
105
+
|`isEditable`| Set to `true` to have the ability to edit the text | no | Boolean | False |
106
+
|`spellCheck`| Set to `true` to spell-check the transcript | no | Boolean | False |
107
+
|`sttJsonType`| The data model type of your `transcriptData`| no | String |`draftjs`|
108
+
|`handleAnalyticsEvents`| if you want to collect analytics events. | no | Function | false |
109
+
|`fileName`| used for saving and retrieving local storage blob files | no, but disables the [local save feature](#local-save)| String |
110
+
|`title`| defaults to empty string | no | String |
111
+
|`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 |
112
+
|`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 |
113
113
114
114
See [`./demo/app.js` demo](./demo/app.js) as a more detailed example usage of the component.
115
115
116
-
_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)_
116
+
#### Local save
117
117
118
-
_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_
118
+
`fileName` is optional but it's needed if working with user uploaded local media in the browser,
119
+
to be able to save and retrieve from local storage.
120
+
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
121
120
122
### Typescript projects
121
123
@@ -128,15 +130,17 @@ import { TranscriptEditor } from "@bbc/react-transcript-editor";
128
130
129
131
#### Internal components
130
132
133
+
##### Direct imports
134
+
131
135
You can also import some of the underlying React components directly.
136
+
See [the storybook](https://bbc.github.io/react-transcript-editor) for each component details on optional and required attributes.
132
137
133
138
-`TranscriptEditor`
134
139
-`TimedTextEditor`
135
140
-`MediaPlayer`
136
141
-`VideoPlayer`
137
142
-`Settings`
138
143
-`KeyboardShortcuts`
139
-
140
144
-`ProgressBar`
141
145
-`PlaybackRate`
142
146
-`PlayerControls`
@@ -153,144 +157,142 @@ import TimedTextEditor from "@bbc/react-transcript-editor/TimedTextEditor";
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)
160
+
##### Import recommendation
157
161
158
-
See [the storybook](https://bbc.github.io/react-transcript-editor) for each component details on optional and required attributes.
162
+
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.
163
+
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)
164
+
165
+
#### Other Node Modules (non-react)
166
+
167
+
Some of these node modules can be used as standalone imports.
159
168
160
-
You can also use this node modules as standalone
169
+
##### Export Adapter
170
+
171
+
Converts from draftJs json format to other formats
<!-- _High level overview of system architecture_ -->
187
-
188
-
- 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.
199
+
- 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.
189
200
- This uses [CSS Modules](https://github.com/css-modules/css-modules) to contain the scope of the css for this component.
190
-
-[`.storybook/webpack.config.js](./.storybook/webpack.config.js)enanches the storybook webpack config to add support for css modules.
201
+
-[`.storybook/webpack.config.js](./.storybook/webpack.config.js)enables the storybook webpack config to add support for css modules.
191
202
- The parts of the component are inside [`./packages`](./packages)
192
203
-[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).
193
204
194
-
<!-- - for build, packaging, and deployment of the npm module, we use webpack with babel 7 -->
195
-
196
205
## Documentation
197
206
198
-
There's a [docs](./docs) folder in this repository.
207
+
There's a [docs](./docs) folder in this repository, which contains subdirectories to keep:
199
208
200
-
[docs/notes](./docs/notes) contains dev notes on various aspects of the project.
209
+
-[notes](./docs/notes): dev notes on various aspects of the project.
> An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences.
205
215
206
216
We are using [this template for ADR](https://gist.github.com/iaincollins/92923cc2c309c2751aea6f1b34b31d95)
207
217
218
+
### QA
219
+
208
220
[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).
209
221
210
222
## Build
211
223
212
-
<!-- _How to run build_ -->
213
-
214
224
> To transpile `./packages` and create a build in the `./dist` folder, run:
215
225
216
-
```
226
+
```sh
217
227
npm run build:component
218
228
```
219
229
220
-
## Demo & storybook
230
+
To understand the build process, have a read through [this](./docs/guides/storybook-npm-setup.md).
221
231
222
-
-**Storybook** can bew viewed at [https://bbc.github.io/react-transcript-editor/](https://bbc.github.io/react-transcript-editor/)
232
+
## Demo & storybook
223
233
234
+
-**Storybook** can be viewed at [https://bbc.github.io/react-transcript-editor/](https://bbc.github.io/react-transcript-editor/)
224
235
-**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)
225
236
226
-
http://localhost:6006
227
-
228
-
<!-- https://github.com/gitname/react-gh-pages
229
-
-->
237
+
To run locally, see [setup](#usage---development).
230
238
231
-
## Build - storybook
239
+
###Build - storybook
232
240
233
-
To build the storybook as a static site
241
+
To build the storybook as a static site, run:
234
242
235
-
```
243
+
```sh
236
244
npm run build:storybook
237
245
```
238
246
239
-
## Publish storybook & demo to github pages
247
+
This will produce a `build` folder containing the static site of the demo.
248
+
To serve the `build` folder locally, run:
240
249
241
-
This github repository uses [github pages](https://pages.github.com/) to host the storybook and the demo of the component
Alternatively If you simply want to build the demo locally in the `build` folder then just
258
+
We 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.
259
+
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`.
260
+
When you are ready, re-publish the Storybook by running:
252
261
253
-
```
254
-
npm run build:storybook
255
-
```
256
-
257
-
you can then run this command to serve the static site locally
258
-
259
-
```
260
-
npm run build:storybook:serve
262
+
```sh
263
+
npm run deploy:ghpages
261
264
```
262
265
263
266
## Tests
264
267
265
-
<!-- _How to carry out tests_ -->
266
-
267
-
Test coverage using [`jest`](https://jestjs.io/), to run tests
268
+
We are using [`jest`](https://jestjs.io/) for the testing framework.
269
+
To run tests, run:
268
270
269
271
```sh
270
272
npm run test
271
273
```
272
274
273
-
During development you can use
275
+
For convenience, during development you can use:
274
276
275
277
```sh
276
278
npm run test:watch
277
279
```
278
280
279
-
## Travis CI
281
+
and watch the test be re-run at every save.
280
282
281
-
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).
283
+
## Travis CI
282
284
283
-
## Deployment
285
+
On 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).
284
286
285
-
<!-- _How to deploy the code/app into test/staging/production_ -->
287
+
## Publish to NPM
286
288
287
-
To push to [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
289
+
To publish to [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor) run:
288
290
289
-
```
291
+
```sh
290
292
npm publish:public
291
293
```
292
294
293
-
This runs `npm run build:component` and `npm publish --access public` under the hood
295
+
This runs `npm run build:component` and `npm publish --access public` under the hood, building the component and publishing to NPM.
294
296
295
297
> Note that only `README.md` and the `dist` folders are published to npm.
0 commit comments