Skip to content

Commit 69b1e24

Browse files
author
Pietro Passarelli - News Labs
committed
reabsed with master
2 parents e9b3245 + 61affa7 commit 69b1e24

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+3980
-1031
lines changed

‎.babelrc

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
{
22
"presets": [
3-
"@babel/preset-react"
3+
"@babel/preset-react",
4+
"@babel/preset-env",
5+
["minify", {
6+
"builtIns": false,
7+
"evaluate": false,
8+
"mangle": false,
9+
}]
410
],
511
"plugins": [
612
"@babel/plugin-proposal-object-rest-spread",

‎.eslintrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"newline-before-return": "error",
4444
"space-before-blocks": "error",
4545
"no-unused-vars": "error",
46+
"no-multi-spaces": "warn",
4647
"comma-spacing": ["error", { "before": false, "after": true }],
4748
"prefer-destructuring": ["error", {
4849
"VariableDeclarator": {

‎.github/ISSUE_TEMPLATE/bug_report.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
---
22
name: Bug report
33
about: Create a report to help us improve
4+
title: ''
5+
labels: bug
6+
assignees: pietrop
47

58
---
69

‎.github/ISSUE_TEMPLATE/feature_request.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
---
22
name: Feature request
33
about: Suggest an idea for this project
4+
title: ''
5+
labels: Enhancement
6+
assignees: pietrop
47

58
---
69

‎.github/ISSUE_TEMPLATE/question.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
---
22
name: Question
33
about: Ask a question about this project
4+
title: ''
5+
labels: bug
6+
assignees: pietrop
47

58
---
69

‎.travis.yml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
language: node_js
22
node_js:
3-
- "node"
43
- "10"
54

65
install:

‎CONTRIBUTING.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ By submitting code as an individual or as an entity you agree that your code is
1818
5. If you've added code that should be tested, add tests, if you need help with automated testing, feel free to raise an [issue](https://github.com/bbc/react-transcript-editor/issues/new?template=feature_request.md).
1919
6. Ensure the test suite passes.
2020
7. Make sure your code lints.
21-
8. If you've changed APIs, consider [updating the documentation](https://github.com/bbc/react-transcript-editor#documentation).
21+
8. If you've changed APIs, consider [updating the documentation](https://github.com/bbc/react-transcript-editor#documentation) and QA Testing docs.
2222
9. Once the work is complete push the branch up on to GitHub for review. Make sure your branch is up to date with `master` before making a pull request. eg use [`git merge origin/master`](https://git-scm.com/docs/git-merge) or [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing)
2323
10. Once a branch has been merged into `master`, delete it.
2424

@@ -41,7 +41,7 @@ See [this blog post for more on this](https://medium.com/mindorks/how-to-write-c
4141
- [ ] Ensure test suite passes (`npm run test`)
4242
- [ ] Make sure your code lints. (`npm run lint`)
4343
- [ ] consider re-factoring for code quality and readability
44-
- [ ] Update documentation where appropriate [updating the documentation](https://github.com/bbc/react-transcript-editor#documentation)
44+
- [ ] Update documentation and QA docs where appropriate - [see updating the documentation](https://github.com/bbc/react-transcript-editor#documentation)
4545
- [ ] Setup your PR for review
4646

4747
<!--

‎README.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,14 @@ import { TranscriptEditor } from '@bbc/react-transcript-editor';
6565
transcriptData=// Transcript json
6666
mediaUrl=// string url to media file - audio or video
6767
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.
68+
sttJsonType={ 'bbckaldi' }// the type of STT Json transcript supported.
69+
fileName={ this.state.fileName }// optional*
6970
/>
7071
```
7172

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+
7276
## System Architecture
7377

7478
<!-- _High level overview of system architecture_ -->
@@ -93,6 +97,7 @@ There's a [docs](./docs) folder in this repository.
9397
9498
We are using [this template for ADR](https://gist.github.com/iaincollins/92923cc2c309c2751aea6f1b34b31d95)
9599

100+
[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).
96101

97102
## Build
98103

‎dist/index.js

Lines changed: 1 addition & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/adr/2018-01-24-frequency-of-local-storage-save.md

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# Frequency of local storage save
2+
3+
* Status: **accepted** <!-- optional -->
4+
* Deciders: Pietro <!-- optional -->
5+
* Date: 2019-01-24 <!-- optional -->
6+
7+
<!-- Technical Story: [description | ticket/issue URL] -->
8+
9+
## Context and Problem Statement
10+
11+
<!-- [Describe the context and problem statement, e.g., in free form using two to three sentences. You may want to articulate the problem in form of a question.] -->
12+
13+
The issue is how often to save to local storage when a user types, previous implementation saved every 5 characters. But that caused issues [#86](https://github.com/bbc/react-transcript-editor/issues/86)
14+
15+
16+
17+
## Decision Drivers <!-- optional -->
18+
19+
<!-- * [driver 1, e.g., a force, facing concern, …] -->
20+
* A simple and straight forward way to save to local storage
21+
* saving on a good frequency
22+
* without introducing performance issues especially on less performant devices
23+
* if possible without introducing third party dependencies
24+
25+
## Considered Options
26+
27+
* [loadash debounce](https://lodash.com/docs/4.17.11#debounce)
28+
* using a js timer
29+
30+
## Notes on debounce option
31+
32+
What is a debounce function?
33+
34+
> debounce function does, it limits the rate at which a function can fire.
35+
> [...] You'll pass the debounce function the function to execute and the fire rate limit in milliseconds
36+
37+
from https://john-dugan.com/javascript-debounce/
38+
39+
In more detail
40+
41+
https://davidwalsh.name/javascript-debounce-function
42+
43+
with examples
44+
45+
https://css-tricks.com/debouncing-throttling-explained-examples/
46+
47+
48+
https://lodash.com/docs/4.17.11#debounce
49+
50+
## Decision Outcome
51+
52+
Chosen option: **using a js timer**.
53+
54+
It uses a timer that can be consolidated into one final one rather then having a lot of saves being delayed, we just have one final save once after user has stopped typing for more then 5 seconds.
55+
56+
The timer is cleared before being called so that there is only the final one left. Leaving only one final save at the end. As a performance optimization.
57+
58+
```js
59+
if (this.saveTimer!== undefined) {
60+
clearTimeout(this.saveTimer);
61+
}
62+
this.saveTimer = setTimeout(() => {
63+
this.localSave(this.props.mediaUrl);
64+
}, 5000);
65+
```
66+
67+
68+
<!-- because [justification. e.g., only option, which meets k.o. criterion decision driver | which resolves force force | … | comes out best (see below)]. -->
69+
70+
71+
<!--
72+
### Positive Consequences
73+
74+
* [e.g., improvement of quality attribute satisfaction, follow-up decisions required, …]
75+
* …
76+
77+
### Negative consequences
78+
79+
* [e.g., compromising quality attribute, follow-up decisions required, …]
80+
* …
81+
82+
## Pros and Cons of the Options
83+
84+
### [option 1]
85+
86+
[example | description | pointer to more information | …]
87+
88+
* Good, because [argument a]
89+
* Good, because [argument b]
90+
* Bad, because [argument c]
91+
92+
### [option 2]
93+
94+
[example | description | pointer to more information | …]
95+
96+
* Good, because [argument a]
97+
* Good, because [argument b]
98+
* Bad, because [argument c]
99+
100+
101+
### [option 3]
102+
103+
[example | description | pointer to more information | …]
104+
105+
* Good, because [argument a]
106+
* Good, because [argument b]
107+
* Bad, because [argument c]
108+
109+
110+
## Links
111+
112+
* [Link type] [Link to ADR] -->

‎docs/qa/0-component-interface.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
2+
#### 0.Component Interface
3+
4+
As initially surfaced in this issue [#87](https://github.com/bbc/react-transcript-editor/issues/87)
5+
6+
The component at a minimum needs two params to function properly and to be able to save to local storage. Transcript as `transcriptData` (+ `sttJsonType`) and media as`mediaUrl`.
7+
8+
We'd normally expect both to be provided at the same time, but there might be edge case where the component is initialized with the first one, and then subsequently receives the second one (or the other way around).
9+
10+
This QA section shows how to use the demo app to test that this works as expected.
11+
12+
[To begin visit the demo app at](https://bbc.github.io/react-transcript-editor/ )
13+
14+
15+
#### Both at same time - media+transcript
16+
17+
##### Steps:
18+
- [ ] click 'clear local storage'
19+
- [ ] 'Load demo'
20+
- [ ] Edit text
21+
- [ ] refresh browser
22+
- [ ] 'Load demo'
23+
##### Expected Results:
24+
- [ ] wait 5 seconds
25+
- [ ] Expect the text change in step 3 to have persisted
26+
27+
28+
#### Media first - local media
29+
30+
##### Steps:
31+
- [ ] click 'clear local storage'
32+
- [ ] 'Load Local Media' + 'Chose File'
33+
- [ ] 'open Transcript Json' + 'Choose file'
34+
- [ ] Edit text
35+
- [ ] refresh browser
36+
- [ ] repeat step 2 and 3
37+
##### Expected Results:
38+
- [ ] wait 5 seconds
39+
- [ ] Expect the text change in step 4 to have persisted
40+
41+
42+
#### Media first - url
43+
44+
##### Steps:
45+
- [ ] click 'clear local storage'
46+
- [ ] 'Load media from Url' and add this url: https://download.ted.com/talks/KateDarling_2018S-950k.mp4
47+
- [ ] 'open Transcript Json' + 'Choose file'
48+
- [ ] Edit text
49+
- [ ] refresh browser
50+
- [ ] repeat step 2 and 3
51+
##### Expected Results:
52+
- [ ] wait 5 seconds
53+
- [ ] Expect the text change in step 4 to have persisted
54+
55+
56+
#### Transcript first - local media
57+
58+
##### Steps:
59+
- [ ] click 'clear local storage'
60+
- [ ] 'open Transcript Json' + 'Choose file'
61+
- [ ] 'Load Local Media' + 'Chose File'
62+
- [ ] Edit text
63+
- [ ] refresh browser
64+
- [ ] repeat step 2 and 3
65+
##### Expected Results:
66+
- [ ] wait 5 seconds
67+
- [ ] Expect the text change in step 4 to have persisted
68+
69+
#### Transcript first - url
70+
71+
##### Steps:
72+
- [ ] click 'clear local storage'
73+
- [ ] 'open Transcript Json' + 'Choose file'
74+
- [ ] 'Load media from Url'
75+
- [ ] add this url: https://download.ted.com/talks/KateDarling_2018S-950k.mp4
76+
- [ ] Edit text
77+
- [ ] refresh browser
78+
- [ ] repeat step 2 and 3
79+
##### Expected Results:
80+
- [ ] wait 5 seconds
81+
- [ ] Expect the text change in step 4 to have persisted
82+

‎docs/qa/1-player-controls.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
### Item to test #1: Player Controls
2+
3+
#### Item to test #1.1: Player Controls - Btns
4+
5+
From left to right
6+
7+
![player-controls](./images/player-controls.png)
8+
9+
| item | Buttons | Steps | Expected Results |
10+
|---|--- |--- |--- |
11+
| 1.1.1 |RollBack | click | To rewind of a set amount, 15 sec default |
12+
| 1.1.2 |rewind | click | Rewind 10 sec |
13+
| 1.1.3 |rewind | click - hold | Continue to rewind until release of btn |
14+
| 1.1.4 |play | click | play media, audio or video |
15+
| 1.1.5 |fast forward | click | Fast forward 10 sec |
16+
| 1.1.6 |fast forward | click - hold | Continue to fast forward until release of btn |
17+
| 1.1.7 |Playback speed | click - select| change the playback speed, of amount from dropdown |
18+
| 1.1.8 |current time | display | display current time of media, updates while playing |
19+
| 1.1.9 |current time | click | triggers prompt to jump to set time, using custom formats options |
20+
| 1.1.10|Duration | display | display duration of media |
21+
| 1.1.11|Save | click on 💾 | should save content to local storage |
22+
| 1.1.12|'Picture in Picture' 📺 | click | hide or show video as separate window always on top |
23+
| 1.1.13|Volume | click - Toggle| Mutes and un-mutes media |
24+
25+
#### Item to test #1.2: Player Controls - Preview
26+
27+
![player-controls-preview](./images/player-controls-preview.png)
28+
29+
##### Steps:
30+
- [ ] Click on the media preview on the left
31+
##### Expected Results:
32+
- [ ] if media paused expect to start playing
33+
- [ ] if media playing expect to pause playing
34+
35+
#### Item to test #1.3: Player Controls - Progress Bar
36+
37+
##### Steps:
38+
- Click inside the progress bar
39+
40+
##### Expected Results:
41+
- [ ] Expect the progress bar play head to change to clicked point
42+
- [ ] Expect current time display in player controls to update accordingly
43+
- [ ] If media was paused, expect media to start playing
44+
- [ ] Expect the editor to jump to the current word below
45+
46+
47+
#### Item to test #1.4: Player Controls - 'Picture in Picture'
48+
49+
!['Picture in Picture' screenshot](./images/picture-in-picture.png)
50+
51+
52+
53+
##### Steps:
54+
- [ ] Click the 'Picture in Picture' icon 📺
55+
56+
##### Expected Results:
57+
- [ ] If video, expect the video to appear as resizable floating window always on top
58+
- [ ] Expect if click picture in picture icon again for video to go back to it's original place
59+
- [ ] if in chrome expect it to work
60+
- [ ] if in browser other then chrome (Safari, Firefox etc) expect to get warning message saying browser is not supported and to use in chrome instead.
61+
62+
#### Item to test #1.11: Player Controls - Save 💾
63+
64+
##### Steps:
65+
- [ ] edit some text
66+
- [ ] Click the 'Save' icon 📺
67+
- [ ] refresh browser
68+
##### Expected Results:
69+
- [ ] Expect the text to persist after refresh

0 commit comments

Comments
 (0)