UNPKG

5.57 kBMarkdownView Raw
1# React Transcript Editor
2
3<!-- _One liner_ -->
4A React component to make transcribing audio and video easier and faster.
5
6[![install size](https://packagephobia.now.sh/badge?p=@bbc/react-transcript-editor)](https://packagephobia.now.sh/result?p=@bbc/react-transcript-editor)
7
8The project uses [this github project board to organise and the co-ordinate development](https://github.com/bbc/react-transcript-editor/projects/1).
9
10_--> Work in progress <--_
11
12<!-- _Screenshot of UI - optional_ -->
13
14## Development env
15
16 <!-- _How to run the development environment_ -->
17
18- npm > `6.1.0`
19- [Node 10 - dubnium](https://scotch.io/tutorials/whats-new-in-node-10-dubnium)
20
21Node version is set in node version manager [`.nvmrc`](https://github.com/creationix/nvm#nvmrc)
22
23<!-- _Coding style convention ref optional, eg which linter to use_ -->
24
25<!-- _Linting, github pre-push hook - optional_ -->
26
27
28## Setup
29
30<!-- _stack - optional_ -->
31<!-- _How to build and run the code/app_ -->
32
33Fork this repository + git clone + cd into folder
34
35## Usage - development
36
37<!-- git clone git@github.com:bbc/react-transcript-editor.git -->
38
39> To start the development server (with entry point `src/index.js`), run
40
41```
42npm start
43```
44
45Visit [http://localhost:3006](http://localhost:3006)
46
47
48## Usage - production
49
50<!-- npm install react-transcript-editor -->
51
52<!-- exampel usage - require etc.. -->
53<!-- https://www.npmjs.com/package/@bbc/react-transcript-editor -->
54
55Available on [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
56
57```
58npm install @bbc/react-transcript-editor
59```
60
61```js
62import { TranscriptEditor } from '@bbc/react-transcript-editor';
63
64<TranscriptEditor
65 transcriptData=// Transcript json
66 mediaUrl=// string url to media file - audio or video
67 isEditable={true}// se to true if you want to be able to edit the text
68 sttJsonType={ 'bbckaldi' }// the type of STT Json transcript supported.
69 fileName={ this.state.fileName }// optional*
70/>
71```
72
73_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)_
74
75
76## System Architecture
77
78<!-- _High level overview of system architecture_ -->
79
80Uses [`create-component-lib`](https://www.npmjs.com/package/create-component-lib) as explaied in this [blog post](https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b) to setup the environment to develop this React component.
81
82This uses [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) so we are using [CSS Modules](https://github.com/css-modules/css-modules) to contain the scope of the css for this component.
83
84> Place everything you want to publish to npm inside `src/lib`.
85
86> Outside `src/lib` (but inside src/), you can create example web pages to test or demonstrate the usage of your components.
87
88## Documentation
89
90There's a [docs](./docs) folder in this repository.
91
92[docs/notes](./docs/notes) contains dev notes on various aspects of the project.
93
94[docs/adr](./docs/adr) contains [Architecture Decision Record](https://github.com/joelparkerhenderson/architecture_decision_record).
95
96> An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences.
97
98We are using [this template for ADR](https://gist.github.com/iaincollins/92923cc2c309c2751aea6f1b34b31d95)
99
100[There also QA testing docs](./docs/qa/0-README.md) to manual test the component before a major release, (QA testing does not require any technical knowledge).
101
102## Build
103
104<!-- _How to run build_ -->
105
106> To transpile `src/lib` and create a build in the dist folder, run:
107
108```
109npm run build:component
110```
111
112## Demo
113
114Demo can be viewed at [https://bbc.github.io/react-transcript-editor](https://bbc.github.io/react-transcript-editor)
115
116<!-- https://github.com/gitname/react-gh-pages
117-->
118
119
120## Build - demo
121
122This github repository uses [github pages](https://pages.github.com/) to host a demo of the component, in [docs/demo](./docs/demo)
123
124```
125npm run deploy:ghpages
126```
127
128add to git, and push to origin master to update
129
130<!-- https://help.github.com/articles/user-organization-and-project-pages/#project-pages-sites -->
131
132Alternatively If you simply want to build the demo locally in the `build` folder then just
133
134```
135npm run build:example
136```
137
138## Tests
139
140<!-- _How to carry out tests_ -->
141
142Test coverage using [`jest`](https://jestjs.io/), to run tests
143
144 ```
145 npm run test
146 ```
147
148## Deployment
149
150<!-- _How to deploy the code/app into test/staging/production_ -->
151
152To push to [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
153
154```
155npm publish:public
156```
157
158This runs `npm run build:component` and `npm publish --access public` under the hood
159
160> Note that only `README.md` and the `dist` folders are published to npm.
161
162
163## Contributing
164
165See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) guidelines.
166
167
168## Licence
169
170See [LICENCE.md](./LICENCE.md)
171
172
173## Legal Disclaimer
174
175Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest.
\No newline at end of file