Merge branch 'master' of github.com:bbc/react-transcript-editor

Author: Pietro Passarelli - News Labs

docs/qa/1-player-controls.md

@@ -18,15 +18,16 @@ From left to right
 | 1.1.8 |current time  | display       | display current time of media, updates while playing  |
 | 1.1.9 |current time  | click         | triggers prompt to jump to set time, using custom formats options  |
 | 1.1.10|Duration      | display       | display duration of media    |
-| 1.1.11|'Picture in Picture'  📺    | click       | hide or show video as separate window always on top   |
-| 1.1.12|Volume        | click - Toggle| Mutes and un-mutes media   |
+| 1.1.11|Save      | click on 💾       | should save content to local storage    |
+| 1.1.12|'Picture in Picture'  📺    | click       | hide or show video as separate window always on top   |
+| 1.1.13|Volume        | click - Toggle| Mutes and un-mutes media   |
 
 #### Item to test #1.2: Player Controls - Preview
 
 ![player-controls-preview](./images/player-controls-preview.png)
 
 ##### Steps:
-- Click on the media preview on the left
+- [ ] Click on the media preview on the left
 ##### Expected Results: 
 - [ ] if media paused expect to start playing
 - [ ] if media playing expect to pause playing
@@ -50,10 +51,19 @@ From left to right
 
 
 ##### Steps:
-- Click the 'Picture in Picture' icon 📺
+- [ ] Click the 'Picture in Picture' icon 📺
 
 ##### Expected Results: 
 - [ ] If video, expect the video to appear as resizable floating window always on top
 - [ ] Expect if click picture in picture icon again for video to go back to it's original place
 - [ ] if in chrome expect it to work
-- [ ] 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.
+- [ ] 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.
+
+#### Item to test #1.11: Player Controls - Save  💾 
+
+##### Steps:
+- [ ] edit some text
+- [ ] Click the 'Save' icon 📺
+- [ ] refresh browser
+##### Expected Results: 
+- [ ] Expect the text to persist after refresh

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bbc/react-transcript-editor",
   "description": "A React component to make transcribing audio and video easier and faster.",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "keywords": [
     "transcript",
     "transcriptions",

src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js

@@ -5,6 +5,18 @@ import Select from './Select';
 
 import style from './PlayerControls.module.css';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import {
+  faSave,
+  faTv,
+  faPlay,
+  faPause,
+  faBackward,
+  faForward,
+  faUndo
+} from '@fortawesome/free-solid-svg-icons';
+
 class PlayerControls extends React.Component {
   // to handle backward and forward mouse pressed on btn
   // set a 300 ms  interval to repeat the
@@ -34,28 +46,28 @@ class PlayerControls extends React.Component {
         <button
           className={ style.playerButton }
           onClick={ this.props.rollback }>
-          {'↺'}
+          <FontAwesomeIcon icon={ faUndo } />
         </button>
 
         <button
           className={ style.playerButton }
           onMouseDown={ this.setIntervalHelperBackward }
           onMouseUp={ this.clearIntervalHelper }>
-          {'◀◀'}
+          <FontAwesomeIcon icon={ faBackward } />
 
         </button>
 
         <button
           className={ style.playerButton }
           onClick={ this.props.playMedia }>
-          {this.props.isPlaying ? '❚❚' : '▶'}
+          {this.props.isPlaying ? <FontAwesomeIcon icon={ faPause } /> : <FontAwesomeIcon icon={ faPlay } />}
         </button>
 
         <button
           className={ style.playerButton }
           onMouseDown={ this.setIntervalHelperForward }
           onMouseUp={ this.clearIntervalHelper }>
-          {'▶▶'}
+          <FontAwesomeIcon icon={ faForward } />
         </button>
 
         <span className={ style.playBackRate }>
@@ -74,11 +86,17 @@ class PlayerControls extends React.Component {
           <span className={ style.duration }>{this.props.duration}</span>
         </div>
 
+        <button
+          className={ style.playerButton }
+          onClick={ this.props.handleSaveTranscript }>
+          <FontAwesomeIcon icon={ faSave } />
+        </button>
+
         <button
           className={ style.playerButton }
           onClick={ this.props.pictureInPicture }
         >
-          {'📺'}
+          <FontAwesomeIcon icon={ faTv } />
         </button>
 
         <VolumeControl

src/lib/TranscriptEditor/MediaPlayer/index.js

@@ -10,6 +10,7 @@ import returnHotKeys from './defaultHotKeys';
 import styles from './index.module.css';
 
 import { secondsToTimecode, timecodeToSeconds } from '../../Util/timecode-converter/index';
+import { timingSafeEqual } from 'crypto';
 
 const PLAYBACK_RATES = [
   { value: 0.2, label: '0.2' },
@@ -436,6 +437,7 @@ class MediaPlayer extends React.Component {
           setPlayBackRate={ this.handlePlayBackRateChange.bind(this) }
           playbackRateOptions={ this.state.playbackRateOptions }
           pictureInPicture={ this.handlePictureInPicture }
+          handleSaveTranscript={ () => {this.props.handleSaveTranscript();} }
         />
       </div>
     );

src/lib/TranscriptEditor/TimedTextEditor/index.js

@@ -62,7 +62,10 @@ class TimedTextEditor extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (prevState.transcriptData !== this.state.transcriptData) {
+    if (
+      (prevState.transcriptData !== this.state.transcriptData)
+      && ( this.props.mediaUrl!== null && !this.isPresentInLocalStorage(this.props.mediaUrl) )
+    ) {
       this.loadData();
     }
     if (prevState.timecodeOffset !== this.state.timecodeOffset