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:3000](http://localhost:3000)
|
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 | ### Typescript projects
|
76 |
|
77 | 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
|
78 |
|
79 | ```js
|
80 | //@ts-ignore
|
81 | import {TranscriptEditor} from "@bbc/react-transcript-editor";
|
82 | ```
|
83 |
|
84 |
|
85 | ## System Architecture
|
86 |
|
87 |
|
88 |
|
89 | 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.
|
90 |
|
91 | 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.
|
92 |
|
93 | > Place everything you want to publish to npm inside `src/lib`.
|
94 |
|
95 | > Outside `src/lib` (but inside src/), you can create example web pages to test or demonstrate the usage of your components.
|
96 |
|
97 | ## Documentation
|
98 |
|
99 | There's a [docs](./docs) folder in this repository.
|
100 |
|
101 | [docs/notes](./docs/notes) contains dev notes on various aspects of the project.
|
102 |
|
103 | [docs/adr](./docs/adr) contains [Architecture Decision Record](https://github.com/joelparkerhenderson/architecture_decision_record).
|
104 |
|
105 | > An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences.
|
106 |
|
107 | We are using [this template for ADR](https://gist.github.com/iaincollins/92923cc2c309c2751aea6f1b34b31d95)
|
108 |
|
109 | [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).
|
110 |
|
111 | ## Build
|
112 |
|
113 |
|
114 |
|
115 | > To transpile `src/lib` and create a build in the dist folder, run:
|
116 |
|
117 | ```
|
118 | npm run build:component
|
119 | ```
|
120 |
|
121 | ## Demo
|
122 |
|
123 | Demo can be viewed at [https://bbc.github.io/react-transcript-editor](https://bbc.github.io/react-transcript-editor)
|
124 |
|
125 |
|
126 | -->
|
127 |
|
128 |
|
129 | ## Build - demo
|
130 |
|
131 | This github repository uses [github pages](https://pages.github.com/) to host a demo of the component, in [docs/demo](./docs/demo)
|
132 |
|
133 | ```
|
134 | npm run deploy:ghpages
|
135 | ```
|
136 |
|
137 | add to git, and push to origin master to update
|
138 |
|
139 |
|
140 |
|
141 | Alternatively If you simply want to build the demo locally in the `build` folder then just
|
142 |
|
143 | ```
|
144 | npm run build:example
|
145 | ```
|
146 |
|
147 | ## Tests
|
148 |
|
149 |
|
150 |
|
151 | Test coverage using [`jest`](https://jestjs.io/), to run tests
|
152 |
|
153 | ```
|
154 | npm run test
|
155 | ```
|
156 |
|
157 | ## Deployment
|
158 |
|
159 | <!-- _How to deploy the code/app into test/staging/production_ -->
|
160 |
|
161 | To push to [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
|
162 |
|
163 | ```
|
164 | npm publish:public
|
165 | ```
|
166 |
|
167 | This runs `npm run build:component` and `npm publish --access public` under the hood
|
168 |
|
169 | > Note that only `README.md` and the `dist` folders are published to npm.
|
170 |
|
171 |
|
172 | ## Contributing
|
173 |
|
174 | See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) guidelines.
|
175 |
|
176 |
|
177 | ## Licence
|
178 |
|
179 | See [LICENCE.md](./LICENCE.md)
|
180 |
|
181 |
|
182 | ## Legal Disclaimer
|
183 |
|
184 | Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest.
|
185 |
|
\ | No newline at end of file |