fixed local media local storage issue (#72)

* fixed local media local storage issue

added optional fileName param to use as key for saving  local media into local storage. only catch is that the mediaUrl should be present along side the transcriptData when initialising the component

* PR changes

* fixed progressBar issue

max value needs to be cast to string

Author: pietrop

README.md

@@ -66,9 +66,13 @@ import { TranscriptEditor } from '@bbc/react-transcript-editor';
     mediaUrl=// string url to media file - audio or video 
     isEditable={true}// se to true if you want to be able to edit the text
     sttJsonType={ 'bbcKaldi' }// the type of STT Json transcript supported.
+    fileName={ this.state.fileName }// optional*
 />
 ```
 
+_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)_
+
+
 ## System Architecture
 
 <!-- _High level overview of system architecture_ -->

src/index.js

@@ -18,9 +18,9 @@ class App extends React.Component {
       mediaUrl: null,
       isTextEditable: true,
       sttType: 'bbckaldi',
-      analyticsEvents: []
+      analyticsEvents: [],
+      fileName: 'Kate Darling Ted Talk'
     };
-    // this.handleChangeLoadTranscriptJson = this.handleChangeLoadTranscriptJson.bind(this);
   }
 
   loadDemo() {
@@ -45,8 +45,12 @@ class App extends React.Component {
       this.setState({
         // transcriptData: kaldiTedTalkTranscript,
         mediaUrl: fileURL,
+        fileName: file.name
       });
     }
+    else {
+      alert('select a valid audio or video file');
+    }
   }
 
   handleChangeLoadMediaUrl() {
@@ -59,21 +63,23 @@ class App extends React.Component {
   }
 
   handleChangeLoadTranscriptJson(files) {
-    const self = this;
     const file = files[0];
-    // let type = file.type;
-    // TODO: add checks
-    // let transcriptJsonContent = FileReader.readAsText(file)
-    const fr = new FileReader();
-    fr.onload = function (e) {
-      // e.target.result should contain the text
-      console.log(JSON.parse(e.target.result));
-      self.setState({
-        transcriptData: JSON.parse(e.target.result),
-        // mediaUrl: tedTalkVideoUrl
-      });
-    };
-    fr.readAsText(file);
+
+    if (file.type ==='application/json') {
+      const fr = new FileReader();
+
+      fr.onload = (evt) => {
+        this.setState({
+          transcriptData: JSON.parse(evt.target.result)
+        });
+      };
+
+      fr.readAsText(file);
+
+    }
+    else {
+      alert('select a valid json file');
+    }
   }
 
   handleIsTextEditable = () => {
@@ -117,6 +123,10 @@ class App extends React.Component {
      this.setState({ analyticsEvents: [ ...this.state.analyticsEvents, event ] });
    }
 
+   handleChangeTranscriptName = (value) => {
+     this.setState({ fileName: value });
+   }
+
    render() {
      return (
        <div className={ style.container }>
@@ -133,6 +143,16 @@ class App extends React.Component {
          <br />
          <button onClick={ () => this.loadDemo() }>load demo</button>
          <hr />
+         <label>Load Local Media</label>
+         <input
+           type="file"
+           onChange={ e => this.handleChangeLoadMedia(e.target.files) }
+         />
+         or
+         <button onClick={ () => this.handleChangeLoadMediaUrl() }>
+          Load Media From Url
+         </button>
+         <br/>
          <label>open Transcript Json</label>
          <SttTypeSelect
            name={ 'sttType' }
@@ -144,17 +164,6 @@ class App extends React.Component {
            onChange={ e => this.handleChangeLoadTranscriptJson(e.target.files) }
          />
 
-         <br />
-         <label>Load Local Media</label>
-         <input
-           type="file"
-           onChange={ e => this.handleChangeLoadMedia(e.target.files) }
-         />
-         or
-         <button onClick={ () => this.handleChangeLoadMediaUrl() }>
-          Load Media From Url
-         </button>
-
          <br />
          <label>Export transcript</label>
          <button onClick={ () => this.exportTranscript() }>Export file</button>
@@ -174,11 +183,19 @@ class App extends React.Component {
            <span className={ style.slider }></span>
          </label>
          <br />
+         <label>Transcript Name</label>
+         <input
+           type="text"
+           onChange={ e => this.handleChangeTranscriptName(e.target.value) }
+           value={ this.state.fileName }
+         />
+         <br />
          <button onClick={ () => this.clearLocalStorage() }>Clear Local Storage</button>
          <hr/>
 
          <TranscriptEditor
            transcriptData={ this.state.transcriptData }
+           fileName={ this.state.fileName }
            mediaUrl={ this.state.mediaUrl }
            isEditable={ this.state.isTextEditable }
            sttJsonType={ this.state.sttType }

src/lib/TranscriptEditor/MediaPlayer/ProgressBar.js

@@ -14,7 +14,7 @@ class ProgressBar extends React.Component {
           onChange={ this.props.buttonClick }
           value={ this.props.value }
           min='0'
-          max={ this.props.max }
+          max={ this.props.max.toString() }
         />
       </div>
     );

src/lib/TranscriptEditor/MediaPlayer/index.js

@@ -360,7 +360,7 @@ class MediaPlayer extends React.Component {
     const playerControlsSection = (
       <div className={ styles.controlsSection }>
         <div className={ styles.titleBox }>
-          <h1 className={ styles.title }>{ this.props.mediaUrl }</h1>
+          <h1 className={ styles.title }>{ this.props.fileName? this.props.fileName : this.props.mediaUrl }</h1>
         </div>
         <PlayerControls
           playMedia={ this.togglePlayMedia.bind(this) }
@@ -402,6 +402,7 @@ class MediaPlayer extends React.Component {
 }
 
 MediaPlayer.propTypes = {
+  fileName: PropTypes.string,
   hookSeek: PropTypes.func,
   hookPlayMedia: PropTypes.func,
   hookIsPlaying: PropTypes.func,

src/lib/TranscriptEditor/MediaPlayer/index.module.css

@@ -30,6 +30,7 @@ video {
 .title {
   margin: 1em;
   color: white;
+  height: 1em;
 }
 
 .helpText {

src/lib/TranscriptEditor/TimedTextEditor/index.js

@@ -145,29 +145,49 @@ class TimedTextEditor extends React.Component {
   }
 
   localSave = () => {
-    const mediaUrl = this.props.mediaUrl;
+    let mediaUrlName = this.props.mediaUrl;
+    // if using local media instead of using random blob name
+    // that makes it impossible to retrieve from on page refresh
+    // use file name
+    if (this.props.mediaUrl.includes('blob')) {
+      mediaUrlName = this.props.fileName;
+    }
     const data = convertToRaw(this.state.editorState.getCurrentContent());
-    localStorage.setItem(`draftJs-${ mediaUrl }`, JSON.stringify(data));
+    localStorage.setItem(`draftJs-${ mediaUrlName }`, JSON.stringify(data));
     const newLastLocalSavedDate = new Date().toString();
-    localStorage.setItem(`timestamp-${ mediaUrl }`, newLastLocalSavedDate);
+    localStorage.setItem(`timestamp-${ mediaUrlName }`, newLastLocalSavedDate);
 
     return newLastLocalSavedDate;
   }
 
   // eslint-disable-next-line class-methods-use-this
   isPresentInLocalStorage(mediaUrl) {
-    const data = localStorage.getItem(`draftJs-${ mediaUrl }`);
-    if (data !== null) {
-      return true;
+    if (mediaUrl !== null) {
+      let mediaUrlName = mediaUrl;
+
+      if (mediaUrl.includes('blob')) {
+        mediaUrlName = this.props.fileName;
+      }
+
+      const data = localStorage.getItem(`draftJs-${ mediaUrlName }`);
+      if (data !== null) {
+        return true;
+      }
+
+      return false;
     }
 
     return false;
   }
 
   loadLocalSavedData(mediaUrl) {
-    const data = JSON.parse(localStorage.getItem(`draftJs-${ mediaUrl }`));
+    let mediaUrlName = mediaUrl;
+    if (mediaUrl.includes('blob')) {
+      mediaUrlName = this.props.fileName;
+    }
+    const data = JSON.parse(localStorage.getItem(`draftJs-${ mediaUrlName }`));
     if (data !== null) {
-      const lastLocalSavedDate = localStorage.getItem(`timestamp-${ mediaUrl }`);
+      const lastLocalSavedDate = localStorage.getItem(`timestamp-${ mediaUrlName }`);
       this.setEditorContentState(data);
 
       return lastLocalSavedDate;

src/lib/TranscriptEditor/index.js

@@ -196,6 +196,7 @@ class TranscriptEditor extends React.Component {
 
   render() {
     const mediaPlayer = <MediaPlayer
+      fileName={ this.props.fileName }
       hookSeek={ foo => this.setCurrentTime = foo }
       hookPlayMedia={ foo => this.playMedia = foo }
       hookIsPlaying={ foo => this.isPlaying = foo }
@@ -248,6 +249,7 @@ class TranscriptEditor extends React.Component {
 
         <main className={ style.main }>
           <TimedTextEditor
+            fileName={ this.props.fileName }
             transcriptData={ this.state.transcriptData }
             timecodeOffset={ this.state.timecodeOffset }
             onWordClick={ this.handleWordClick }
@@ -274,7 +276,8 @@ TranscriptEditor.propTypes = {
   mediaUrl: PropTypes.string,
   isEditable: PropTypes.bool,
   sttJsonType: PropTypes.string,
-  handleAnalyticsEvents: PropTypes.func
+  handleAnalyticsEvents: PropTypes.func,
+  fileName: PropTypes.string
 };
 
 export default TranscriptEditor;