Skip to content

Commit 5d8ac44

Browse files
jamesdoolsjamesdools
authored
Demo polish (#138)
* Fix: cleanup and renaming * Task: Add consistent style for buttons and inputs, tidy up * Task: Added margins and central alignment for mobile, general cleanup and colours * Fix: file upload for user transcripts * Fix: alignment after demo load * Task: highlight demo button * Fix: Columns
1 parent 713edd3 commit 5d8ac44

File tree

9 files changed

+210
-113
lines changed

9 files changed

+210
-113
lines changed

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@ import TranscriptEditor from '@bbc/react-transcript-editor';
6262
```js
6363
<TranscriptEditor
6464
transcriptData=// Transcript json
65-
mediaUrl=// string url to media file - audio or video
65+
mediaUrl=// string url to media file - audio or video
6666
isEditable={true}// set to true if you want to be able to edit the text
6767
sttJsonType={ 'bbckaldi' } // the type of STT Json transcript supported.
6868
handleAnalyticsEvents={ this.handleAnalyticsEvents } // optional - if you want to collect analytics events.
69-
fileName=// optional - used for saving and retrieving local storage blob files
69+
fileName=// optional - used for saving and retrieving local storage blob files
7070
title=// optional - defaults to ''
7171
ref={ this.transcriptEditorRef } // optional - if you want to have access to internal functions such as retrieving content from the editor. eg to save to a server/db.
7272
/>
@@ -86,7 +86,7 @@ import { TranscriptEditor } from "@bbc/react-transcript-editor";
8686

8787
#### Internal components
8888

89-
You can also import some of the underlying React components directly.
89+
You can also import some of the underlying React components directly.
9090

9191
- `TranscriptEditor`
9292
- `TimedTextEditor`
@@ -105,7 +105,7 @@ However if you are not using `TranscriptEditor` it is recommended to follow the
105105

106106
See [the storybook](https://bbc.github.io/react-transcript-editor) for each component details on optional and required attributes.
107107

108-
You can also use this node modules as standalone
108+
You can also use this node modules as standalone
109109

110110
```js
111111
import exportAdapter from '@bbc/react-transcript-editor/exportAdapter'
@@ -171,7 +171,7 @@ http://localhost:6006
171171
-->
172172

173173
## Build - storybook
174-
To build the storybook as a static site
174+
To build the storybook as a static site
175175

176176
```
177177
npm run build:storybook
@@ -210,7 +210,7 @@ Test coverage using [`jest`](https://jestjs.io/), to run tests
210210
npm run test
211211
```
212212

213-
During development you can use
213+
During development you can use
214214

215215
```
216216
npm run test:watch

‎demo/app.js‎

Lines changed: 74 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,85 @@
11
import React from 'react';
22

3-
import DemoTranscript from '../packages/components/transcript-editor/index.js';
4-
import kaldiTedTalkTranscript from './sample-data/KateDarling-bbcKaldiTranscriptWithSpeakerSegments.json';
5-
import style from './index.module.css';
3+
import TranscriptEditor from '../packages/components/transcript-editor';
64
import SttTypeSelect from './select-stt-json-type';
75
import ExportFormatSelect from './select-export-format';
86
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
97
import { faGithub } from '@fortawesome/free-brands-svg-icons';
108

11-
const tedTalkVideoUrl = 'https://download.ted.com/talks/KateDarling_2018S-950k.mp4';
9+
import demoTranscript from './sample-data/KateDarling-bbcKaldiTranscriptWithSpeakerSegments.json';
10+
const demoMediaUrl = 'https://download.ted.com/talks/KateDarling_2018S-950k.mp4';
11+
const demoTitle = 'Ted Talk - Kate Darling';
12+
13+
import style from './index.module.css';
1214

1315
class App extends React.Component {
1416
constructor(props) {
1517
super(props);
18+
1619
this.state = {
1720
transcriptData: null,
1821
mediaUrl: null,
1922
isTextEditable: true,
2023
sttType: 'bbckaldi',
2124
analyticsEvents: [],
22-
title: 'Ted Talk Kate Darling',
25+
title: '',
2326
fileName: ''
2427
};
2528

2629
this.transcriptEditorRef = React.createRef();
2730
}
2831

29-
loadDemo() {
32+
loadDemo = () => {
3033
this.setState({
31-
transcriptData: kaldiTedTalkTranscript,
32-
mediaUrl: tedTalkVideoUrl,
34+
transcriptData: demoTranscript,
35+
mediaUrl: demoMediaUrl,
36+
title: demoTitle,
3337
sttType: 'bbckaldi'
3438
});
3539
}
3640

3741
// https://stackoverflow.com/questions/8885701/play-local-hard-drive-video-file-with-html5-video-tag
38-
handleChangeLoadMedia(files) {
39-
console.log(files);
42+
handleLoadMedia = (files) => {
4043
const file = files[0];
41-
const type = file.type;
42-
// check if is playable
4344
const videoNode = document.createElement('video');
44-
const canPlay = videoNode.canPlayType(type);
45+
const canPlay = videoNode.canPlayType(file.type);
46+
4547
if (canPlay) {
4648
const fileURL = URL.createObjectURL(file);
47-
// videoNode.src = fileURL
4849
this.setState({
49-
// transcriptData: kaldiTedTalkTranscript,
50+
// transcriptData: demoTranscript,
5051
mediaUrl: fileURL,
5152
fileName: file.name
5253
});
5354
} else {
54-
alert('select a valid audio or video file');
55+
alert('Select a valid audio or video file.');
5556
}
5657
}
5758

58-
handleChangeLoadMediaUrl() {
59-
const fileURL = prompt("Paste the URL you'd like to use here");
59+
handleLoadMediaUrl = () => {
60+
const fileURL = prompt("Paste the URL you'd like to use here:");
6061

6162
this.setState({
62-
// transcriptData: kaldiTedTalkTranscript,
63+
// transcriptData: demoTranscript,
6364
mediaUrl: fileURL
6465
});
6566
}
6667

67-
handleChangeLoadTranscriptJson(files) {
68+
handleLoadTranscriptJson = (files) => {
6869
const file = files[0];
6970

7071
if (file.type === 'application/json') {
71-
const fr = new FileReader();
72+
const fileReader = new FileReader();
7273

73-
fr.onload = event => {
74+
fileReader.onload = event => {
7475
this.setState({
7576
transcriptData: JSON.parse(event.target.result)
7677
});
7778
};
7879

79-
fr.readAsText(file);
80+
fileReader.readAsText(file);
8081
} else {
81-
alert('select a valid json file');
82+
alert('Select a valid JSON file.');
8283
}
8384
}
8485

@@ -109,17 +110,17 @@ class App extends React.Component {
109110
// https://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file
110111
download = (content, filename, contentType) => {
111112
const type = contentType || 'application/octet-stream';
112-
const a = document.createElement('a');
113+
const link = document.createElement('a');
113114
const blob = new Blob([ content ], { type: type });
114115

115-
a.href = window.URL.createObjectURL(blob);
116-
a.download = filename;
117-
a.click();
116+
link.href = window.URL.createObjectURL(blob);
117+
link.download = filename;
118+
link.click();
118119
};
119120

120121
clearLocalStorage = () => {
121122
localStorage.clear();
122-
console.info('cleared local storage');
123+
console.info('Cleared local storage.');
123124
};
124125

125126
handleAnalyticsEvents = event => {
@@ -139,97 +140,92 @@ class App extends React.Component {
139140
render() {
140141
return (
141142
<div className={ style.container }>
142-
Demo <mark>React Transcript Editor</mark> |{' '}
143+
<span>React Transcript Editor Demo </span>
143144
<a
144145
href="https://github.com/bbc/react-transcript-editor"
145146
rel="noopener noreferrer"
146147
target="_blank"
147148
>
148149
<FontAwesomeIcon icon={ faGithub } />
149150
</a>
150-
<hr />
151-
152151
<div className={ style.demoNav }>
153152
<section className={ style.demoNavItem }>
154-
<button onClick={ () => this.loadDemo() }>Load demo</button>
153+
<label className={ style.sectionLabel }>Start</label>
154+
<button className={ style.demoButton } onClick={ () => this.loadDemo() }>Load Demo</button>
155155
</section>
156+
156157
<section className={ style.demoNavItem }>
157-
<label>Load Local Media</label>
158-
<br />
158+
<label className={ style.sectionLabel }>Custom Media</label>
159+
<button onClick={ () => this.handleLoadMediaUrl() }>Load from URL</button>
159160
<input
160-
className={ style.demoInput }
161-
type="file"
162-
onChange={ e => this.handleChangeLoadMedia(e.target.files) }
161+
type={ 'file' }
162+
id={ 'mediaFile' }
163+
onChange={ e => this.handleLoadMedia(e.target.files) }
163164
/>
164-
<br />
165-
or
166-
<br />
167-
<button onClick={ () => this.handleChangeLoadMediaUrl() }>
168-
Load Media From Url
169-
</button>
165+
<label htmlFor="mediaFile" >Load local media</label>
166+
{this.state.fileName !== '' ? <label className={ style.fileNameLabel }>{this.state.fileName}</label> : null}
170167
</section>
168+
171169
<section className={ style.demoNavItem }>
172-
<label>
173-
Open Transcript <code>Json</code>
174-
</label>
175-
<br />
170+
<label className={ style.sectionLabel }>Import Transcript</label>
176171
<SttTypeSelect
172+
className={ style.dropdown }
177173
name={ 'sttType' }
178174
value={ this.state.sttType }
179175
handleChange={ this.handleSttTypeChange }
180176
/>
181-
<br />
177+
182178
<input
183-
className={ style.demoInput }
184-
type="file"
185-
onChange={ e =>
186-
this.handleChangeLoadTranscriptJson(e.target.files)
187-
}
179+
type={ 'file' }
180+
id={ 'transcriptFile' }
181+
onChange={ e => this.handleLoadTranscriptJson(e.target.files) }
188182
/>
183+
<label htmlFor="transcriptFile" >Load Transcript</label>
184+
{this.state.transcriptData !== null ? <label className={ style.fileNameLabel }>Transcript loaded.</label> : null}
185+
189186
</section>
187+
190188
<section className={ style.demoNavItem }>
191-
<label>Export transcript</label>
192-
<br />
189+
<label className={ style.sectionLabel }>Export Transcript</label>
193190
<ExportFormatSelect
191+
className={ style.dropdown }
194192
name={ 'exportFormat' }
195193
value={ this.state.exportFormat }
196194
handleChange={ this.handleExportFormatChange }
197195
/>
198-
<br />
199-
<button onClick={ () => this.exportTranscript() }>Export file</button>
200-
</section>
201-
<section className={ style.demoNavItem }>
202-
<label>Text Is Editable</label>
203-
<br />
204-
<label>
205-
<input
206-
type="checkbox"
207-
defaultChecked="true"
208-
onChange={ this.handleIsTextEditable }
209-
/>
210-
</label>
196+
<button onClick={ () => this.exportTranscript() }>Export File</button>
211197
</section>
198+
212199
<section className={ style.demoNavItem }>
213-
<label>
214-
Transcript Title <i>Optional</i>
200+
<label className={ style.sectionLabel }>
201+
Transcript Title
202+
<span className={ style.titleLabel }>(Optional)</span>
215203
</label>
216-
<br />
217204
<input
218-
className={ style.demoInput }
219205
type="text"
220206
value={ this.state.title }
221207
onChange={ e => this.handleChangeTranscriptTitle(e.target.value) }
222208
/>
223209
</section>
210+
224211
<section className={ style.demoNavItem }>
225-
<button onClick={ () => this.clearLocalStorage() }>
226-
Clear Local Storage
227-
</button>
212+
<label className={ style.sectionLabel }>Options</label>
213+
214+
<div className={ style.checkbox }>
215+
<label className={ style.editableLabel } htmlFor={ 'textIsEditableCheckbox' }>Text Is Editable</label>
216+
<input
217+
id={ 'textIsEditableCheckbox' }
218+
type="checkbox"
219+
defaultChecked="true"
220+
onChange={ this.handleIsTextEditable }
221+
/>
222+
</div>
223+
224+
<button className={ style.warningButton } onClick={ () => this.clearLocalStorage() }>Clear Local Storage</button>
228225
</section>
229226
</div>
230-
<hr />
231227

232-
<DemoTranscript
228+
<TranscriptEditor
233229
transcriptData={ this.state.transcriptData }
234230
fileName={ this.state.fileName }
235231
mediaUrl={ this.state.mediaUrl }

0 commit comments

Comments
 (0)