Fix 87 initialising transcript media - component interface

README.md

@@ -97,7 +97,7 @@ There's a [docs](./docs) folder in this repository.
 
 We are using [this template for ADR](https://gist.github.com/iaincollins/92923cc2c309c2751aea6f1b34b31d95)
 
-[There also QA testing docs](./docs/qa/0-README.md) to manual test the component before a major release, (QA testing does not require any technical knowledge).
+[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).
 
 ## Build
 

docs/qa/0-component-interface.md

@@ -0,0 +1,77 @@
+
+#### 0.Component Interface
+
+As initially surfaced in this issue [#87](https://github.com/bbc/react-transcript-editor/issues/87)
+
+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`.
+
+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).
+
+This QA section shows how to use the demo app to test that this works as expected.
+
+[To begin visit the demo app at](https://bbc.github.io/react-transcript-editor/ )
+
+
+####  Both at same time - media+transcript
+
+##### Steps:
+- [ ] click 'clear local storage'
+- [ ] 'Load demo'
+- [ ] Edit text
+- [ ] refresh browser
+- [ ] 'Load demo'
+##### Expected Results: 
+- [ ] Expect the text change in step 3 to have persisted
+
+
+####  Media first - local media
+
+##### Steps:
+- [ ] click 'clear local storage'
+- [ ] 'Load Local Media' + 'Chose File'
+- [ ] 'open Transcript Json' + 'Choose file'
+- [ ] Edit text
+- [ ] refresh browser
+- [ ] repeat step 2 and 3
+##### Expected Results: 
+- [ ] Expect the text change in step 4 to have persisted
+
+
+####  Media first - url
+
+##### Steps:
+- [ ] click 'clear local storage'
+- [ ] 'Load media from Url'  and add this url: https://download.ted.com/talks/KateDarling_2018S-950k.mp4
+- [ ] 'open Transcript Json' + 'Choose file'
+- [ ] Edit text
+- [ ] refresh browser
+- [ ] repeat step 2 and 3
+##### Expected Results: 
+- [ ] Expect the text change in step 4 to have persisted
+
+
+####  Transcript first - local media
+
+##### Steps:
+- [ ] click 'clear local storage'
+- [ ] 'open Transcript Json' + 'Choose file'
+- [ ] 'Load Local Media' + 'Chose File'
+- [ ] Edit text
+- [ ] refresh browser
+- [ ] repeat step 2 and 3
+##### Expected Results: 
+- [ ] Expect the text change in step 4 to have persisted
+
+#### Transcript first - url 
+
+##### Steps:
+- [ ] click 'clear local storage'
+- [ ] 'open Transcript Json' + 'Choose file'
+- [ ] 'Load media from Url' 
+- [ ] add this url: https://download.ted.com/talks/KateDarling_2018S-950k.mp4
+- [ ] Edit text
+- [ ] refresh browser
+- [ ] repeat step 2 and 3
+##### Expected Results: 
+- [ ] Expect the text change in step 4 to have persisted
+

docs/qa/0-README.md → docs/qa/README.md

@@ -45,6 +45,7 @@ When you raise an issue please indicate the operating system, device, and browse
 
 There are 5 main parts for QA testing
 
+0. [Component Interface](0-component-interface.md)
 1. [Player Controls](1-player-controls.md)
 2. [Timed Text Editor](2-timed-text-editor.md) 
 3. [Settings](3-settings.md)

src/lib/TranscriptEditor/TimedTextEditor/index.js

@@ -40,6 +40,7 @@ class TimedTextEditor extends React.Component {
       inputCount: 0,
       currentWord: {}
     };
+    console.log('TimedTextEditor Initialised');
   }
 
   componentDidMount() {

src/lib/TranscriptEditor/index.js

@@ -33,6 +33,8 @@ class TranscriptEditor extends React.Component {
 
   static getDerivedStateFromProps(nextProps) {
     if (nextProps.transcriptData !== null) {
+      console.log('getDerivedStateFromProps');
+
       return {
         transcriptData: nextProps.transcriptData
       };
@@ -42,7 +44,34 @@ class TranscriptEditor extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (prevState.transcriptData !== this.state.transcriptData) {
+    // Transcript and media passed to component at same time
+    if (
+      (prevState.transcriptData !== this.state.transcriptData)
+        && (prevProps.mediaUrl !== this.props.mediaUrl )
+    ) {
+      console.info('Transcript and media');
+      this.ifPresentRetrieveTranscriptFromLocalStorage();
+    }
+    // Transcript first and then media passed to component
+    else if (
+      (prevState.transcriptData === this.state.transcriptData)
+      && (prevProps.mediaUrl !== this.props.mediaUrl)
+    ) {
+      console.info('Transcript first and then media');
+      this.ifPresentRetrieveTranscriptFromLocalStorage();
+    }
+    // Media first and then transcript passed to component
+    else if (
+      (prevState.transcriptData !== this.state.transcriptData)
+      && (prevProps.mediaUrl === this.props.mediaUrl)
+    ) {
+      console.info('Media first and then transcript');
+      this.ifPresentRetrieveTranscriptFromLocalStorage();
+    }
+  }
+
+  ifPresentRetrieveTranscriptFromLocalStorage = () => {
+    if (this.refs.timedTextEditor!== undefined) {
       if (this.refs.timedTextEditor.isPresentInLocalStorage(this.props.mediaUrl)) {
         console.log('was already present in local storage');
         this.refs.timedTextEditor.loadLocalSavedData(this.props.mediaUrl);
@@ -229,6 +258,25 @@ class TranscriptEditor extends React.Component {
       handleShortcutsToggle={ this.handleShortcutsToggle }
     />;
 
+    const timedTextEditor = <TimedTextEditor
+      fileName={ this.props.fileName }
+      transcriptData={ this.state.transcriptData }
+      timecodeOffset={ this.state.timecodeOffset }
+      onWordClick={ this.handleWordClick }
+      playMedia={ this.handlePlayMedia }
+      isPlaying={ this.handleIsPlaying }
+      currentTime={ this.state.currentTime }
+      isEditable={ this.props.isEditable }
+      sttJsonType={ this.props.sttJsonType }
+      mediaUrl={ this.props.mediaUrl }
+      isScrollIntoViewOn={ this.state.isScrollIntoViewOn }
+      isPauseWhileTypingOn={ this.state.isPauseWhileTypingOn }
+      showTimecodes={ this.state.showTimecodes }
+      showSpeakers={ this.state.showSpeakers }
+      ref={ 'timedTextEditor' }
+      handleAnalyticsEvents={ this.props.handleAnalyticsEvents }
+    />;
+
     return (
       <div className={ style.container }>
         <header className={ style.header }>
@@ -248,24 +296,7 @@ class TranscriptEditor extends React.Component {
         </div>
 
         <main className={ style.main }>
-          <TimedTextEditor
-            fileName={ this.props.fileName }
-            transcriptData={ this.state.transcriptData }
-            timecodeOffset={ this.state.timecodeOffset }
-            onWordClick={ this.handleWordClick }
-            playMedia={ this.handlePlayMedia }
-            isPlaying={ this.handleIsPlaying }
-            currentTime={ this.state.currentTime }
-            isEditable={ this.props.isEditable }
-            sttJsonType={ this.props.sttJsonType }
-            mediaUrl={ this.props.mediaUrl }
-            isScrollIntoViewOn={ this.state.isScrollIntoViewOn }
-            isPauseWhileTypingOn={ this.state.isPauseWhileTypingOn }
-            showTimecodes={ this.state.showTimecodes }
-            showSpeakers={ this.state.showSpeakers }
-            ref={ 'timedTextEditor' }
-            handleAnalyticsEvents={ this.props.handleAnalyticsEvents }
-          />
+          {this.props.mediaUrl === null? null : timedTextEditor}
         </main>
       </div>
     );