1 | # React Transcript Editor
|
2 |
|
3 |
|
4 | A 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 |
|
8 | The 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 |
|
13 |
|
14 | ## Development env
|
15 |
|
16 |
|
17 |
|
18 | - npm > `6.1.0`
|
19 | - [Node 10 - dubnium](https://scotch.io/tutorials/whats-new-in-node-10-dubnium)
|
20 |
|
21 | Node version is set in node version manager [`.nvmrc`](https://github.com/creationix/nvm#nvmrc)
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 | ## Setup
|
29 |
|
30 |
|
31 |
|
32 |
|
33 | Fork this repository + git clone + cd into folder
|
34 |
|
35 | ## Usage - development
|
36 |
|
37 |
|
38 |
|
39 | > To start the development server (with entry point `src/index.js`), run
|
40 |
|
41 | ```
|
42 | npm start
|
43 | ```
|
44 |
|
45 | Visit [http://localhost:3006](http://localhost:3006)
|
46 |
|
47 |
|
48 | ## Usage - production
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 | Available on [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
|
56 |
|
57 | ```
|
58 | npm install @bbc/react-transcript-editor
|
59 | ```
|
60 |
|
61 | ```js
|
62 | import { 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 |
|
79 |
|
80 | Uses [`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 |
|
82 | This 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 |
|
90 | There'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 |
|
98 | We 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 |
|
105 |
|
106 | > To transpile `src/lib` and create a build in the dist folder, run:
|
107 |
|
108 | ```
|
109 | npm run build:component
|
110 | ```
|
111 |
|
112 | ## Demo
|
113 |
|
114 | Demo can be viewed at [https://bbc.github.io/react-transcript-editor](https://bbc.github.io/react-transcript-editor)
|
115 |
|
116 |
|
117 | -->
|
118 |
|
119 |
|
120 | ## Build - demo
|
121 |
|
122 | This github repository uses [github pages](https://pages.github.com/) to host a demo of the component, in [docs/demo](./docs/demo)
|
123 |
|
124 | ```
|
125 | npm run deploy:ghpages
|
126 | ```
|
127 |
|
128 | add to git, and push to origin master to update
|
129 |
|
130 |
|
131 |
|
132 | Alternatively If you simply want to build the demo locally in the `build` folder then just
|
133 |
|
134 | ```
|
135 | npm run build:example
|
136 | ```
|
137 |
|
138 | ## Tests
|
139 |
|
140 |
|
141 |
|
142 | Test 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 |
|
152 | To push to [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
|
153 |
|
154 | ```
|
155 | npm publish:public
|
156 | ```
|
157 |
|
158 | This 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 |
|
165 | See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) guidelines.
|
166 |
|
167 |
|
168 | ## Licence
|
169 |
|
170 | See [LICENCE.md](./LICENCE.md)
|
171 |
|
172 |
|
173 | ## Legal Disclaimer
|
174 |
|
175 | Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest. |
\ | No newline at end of file |