Performance no entities spike

README.md

@@ -92,15 +92,20 @@ With more attributes
 | transcriptData        | Transcript json                                                                                                         |   yes    |   Json    |
 | mediaUrl              | string url to media file - audio or video                                                                               |   yes    |  String   |
 |`handleAutoSaveChanges`| returns content of transcription after a change                                                                         |    no    |  Function |
+| isAutoSave            | default to true, enable the auto save callback   `handleAutoSaveChanges`                                                |    no    | Boolean |
 | autoSaveContentType        | specify the file format for data returned by `handleAutoSaveChanges`,falls back on `sttJsonType`. or `draftjs`          |    no    |  string   |
 | isEditable            | set to true if you want to be able to edit the text                                                                     |    no    |  Boolean  |
 | spellCheck            | set to true if you want the browser to spell check this transcript                                                      |    no    |  Boolean  |
-|`handleAnalyticsEvents`| if you want to collect analytics events.                                                                                |    yes    | Function  |
+| showTimecodes         | set to true if you want to show timecodes in the  transcript at paragraph level                                         |    no    |  Boolean  |
+| showSpeakers         | set to true if you want to show speaker labels in the  transcript at paragraph level                                     |    no    |  Boolean  |
+|`handleAnalyticsEvents`| if you want to collect analytics events.                                                                                |    yes    | Function |
 | fileName              | used for saving and retrieving local storage blob files                                                                 |    no    |  String   |
 | title                 | defaults to empty string                                                                                                |    no    |  String   |
 | ref                   | if you want to have access to internal functions such as retrieving content from the editor. eg to save to a server/db. |    no    | React ref |
 | mediaType             | can be `audio` or `video`, if not provided the component uses the url file type to determine and adjust use of the page layout |    no    | String |
 
+
+
 See [`./demo/app.js` demo](./demo/app.js) as a more detailed example usage of the component.
 
 _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)_

demo/app.js

@@ -4,19 +4,70 @@ import TranscriptEditor from "../packages/components/transcript-editor";
 import SttTypeSelect from "./select-stt-json-type";
 import ExportFormatSelect from "./select-export-format";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faThinkPeaks } from "@fortawesome/free-brands-svg-icons";
 
 import {
   loadLocalSavedData,
   isPresentInLocalStorage,
   localSave
 } from "./local-storage.js";
 
-import DEMO_TRANSCRIPT from "./sample-data/KateDarling-bbcKaldiTranscriptWithSpeakerSegments.json";
-const DEMO_MEDIA_URL =
+const DEMO_MEDIA_URL_KATE =
   "https://download.ted.com/talks/KateDarling_2018S-950k.mp4";
-const DEMO_TITLE =
+const DEMO_TITLE_KATE =
   "TED Talk | Kate Darling - Why we have an emotional connection to robots";
+import DEMO_TRANSCRIPT_KATE from "./sample-data/KateDarling-bbcKaldiTranscriptWithSpeakerSegments.json";
+
+const DEMO_MEDIA_URL_ZUCK_5HOURS =
+  "https://democratic-presidential-debate-stt-analyses.s3.us-east-2.amazonaws.com/Facebook+CEO+Mark+Zuckerberg+FULL+testimony+before+U.S.+senate-pXq-5L2ghhg.mp4";
+
+const DEMO_TITLE_ZUCK_5HOURS =
+  "Facebook CEO Mark Zuckerberg | 5 Hours | full testimony before U.S. Senate";
+import DEMO_TRANSCRIPT_ZUCK_5HOURS_DPE from "./sample-data/Facebook-CEO-Mark-Zuckerberg-FULL-testimony-before-U.S.senate-pXq-5L2ghhg.mp4.dpe.json";
+import DEMO_TRANSCRIPT_ZUCK_5HOURS_DRAFTJS from "./sample-data/Facebook-CEO-Mark-Zuckerberg-FULL-testimony-before-U.S.senate-pXq-5L2ghhg.mp4.draftjs.json";
+
+  const DEMO_TITLE_ZUCK_2HOURS =
+  "Facebook CEO Mark Zuckerberg | 2 Hours | full testimony before U.S. Senate ";
+  import DEMO_TRANSCRIPT_ZUCK_2HOURS_DPE from "./sample-data/Facebook-CEO-Mark-Zuckerberg-FULL-testimony-before-U.S.senate-pXq-5L2ghhg.mp4.dpe-2hours.json";
+  import DEMO_TRANSCRIPT_ZUCK_2HOURS_DRAFTJS from "./sample-data/Facebook-CEO-Mark-Zuckerberg-FULL-testimony-before-U.S.senate-pXq-5L2ghhg.mp4.draftjs-2hours.json";
+
+const DEMOS = [
+  {
+    id: 'kate',
+    title: DEMO_TITLE_KATE,
+    json: DEMO_TRANSCRIPT_KATE,
+    url: DEMO_MEDIA_URL_KATE,
+    type: "bbckaldi"
+  },
+  {
+    id: 'zuckDraftJs5h',
+    title: DEMO_TITLE_ZUCK_5HOURS,
+    json: DEMO_TRANSCRIPT_ZUCK_5HOURS_DRAFTJS,
+    url: DEMO_MEDIA_URL_ZUCK_5HOURS,
+    type: 'draftjs'
+  },
+  {
+    id: 'zuckDpe5h',
+    title: DEMO_TITLE_ZUCK_5HOURS,
+    json: DEMO_TRANSCRIPT_ZUCK_5HOURS_DPE,
+    url: DEMO_MEDIA_URL_ZUCK_5HOURS,
+    type: 'digitalpaperedit'
+  },
+  {
+    id: 'zuckDraftJs2h',
+    title: DEMO_TITLE_ZUCK_2HOURS,
+    json: DEMO_TRANSCRIPT_ZUCK_2HOURS_DRAFTJS,
+    url: DEMO_MEDIA_URL_ZUCK_5HOURS,
+    type: 'draftjs'
+  },
+  {
+    id: 'zuckDpe2h',
+    title: DEMO_TITLE_ZUCK_2HOURS,
+    json: DEMO_TRANSCRIPT_ZUCK_2HOURS_DPE,
+    url: DEMO_MEDIA_URL_ZUCK_5HOURS,
+    type: 'digitalpaperedit'
+  },
+]
 
 import style from "./index.module.scss";
 
@@ -36,19 +87,29 @@ class App extends React.Component {
       autoSaveData: {},
       autoSaveContentType: "draftjs",
       autoSaveExtension: "json",
-      useLocalStorage: true
+      useLocalStorage: false,
+      isAutoSave: false
     };
 
     this.transcriptEditorRef = React.createRef();
   }
 
-  loadDemo = () => {
+  loadDemo = (demoId) => {
+    const demo = DEMOS.find((d)=>{
+      return d.id === demoId;
+    })
+    const DEMO_TRANSCRIPT = demo.json;
+    const DEMO_MEDIA_URL = demo.url;
+    const DEMO_TITLE = demo.title;
+    const DEMO_TYPE = demo.type
+
       if(this.state.useLocalStorage && isPresentInLocalStorage(DEMO_MEDIA_URL)){
         const transcriptDataFromLocalStorage = loadLocalSavedData(DEMO_MEDIA_URL)
         this.setState({
           transcriptData: transcriptDataFromLocalStorage,
           mediaUrl: DEMO_MEDIA_URL,
           title: DEMO_TITLE,
+          // if loading from local storage, always saved in draftJS format 
           sttType: 'draftjs'
         });
       }
@@ -57,7 +118,7 @@ class App extends React.Component {
           transcriptData: DEMO_TRANSCRIPT,
           mediaUrl: DEMO_MEDIA_URL,
           title: DEMO_TITLE,
-          sttType: "bbckaldi"
+          sttType: DEMO_TYPE
         });
       }
   };
@@ -125,12 +186,10 @@ class App extends React.Component {
   };
 
   handleExportFormatChange = event => {
-    console.log(event.target.name, event.target.value);
     this.setState({ [event.target.name]: event.target.value });
   };
 
   exportTranscript = () => {
-    console.log("export");
     // eslint-disable-next-line react/no-string-refs
     const { data, ext } = this.transcriptEditorRef.current.getEditorContent(
       this.state.exportFormat
@@ -146,7 +205,6 @@ class App extends React.Component {
 
   // https://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file
   download = (content, filename, contentType) => {
-    console.log("download");
     const type = contentType || "application/octet-stream";
     const link = document.createElement("a");
     const blob = new Blob([content], { type: type });
@@ -180,7 +238,6 @@ class App extends React.Component {
   };
 
   handleAutoSaveChanges = newAutoSaveData => {
-    console.log("handleAutoSaveChanges", newAutoSaveData);
     const { data, ext } = newAutoSaveData;
     this.setState({ autoSaveData: data, autoSaveExtension: ext });
     // Saving to local storage 
@@ -193,7 +250,12 @@ class App extends React.Component {
     this.setState((prevState)=>{
       return {useLocalStorage: !prevState.useLocalStorage}
     }, ()=>{
-      console.log('this.state.useLocalStorage',this.state.useLocalStorage)
+      // console.log('this.state.useLocalStorage',this.state.useLocalStorage)
+    })
+  }
+  handleIsAutoSave = (e) =>{
+    this.setState({
+      isAutoSave: e.target.checked
     })
   }
   render() {
@@ -209,12 +271,36 @@ class App extends React.Component {
         </a>
         <div className={style.demoNav}>
           <section className={style.demoNavItem}>
-            <label className={style.sectionLabel}>Start</label>
+            <label className={style.sectionLabel}>Demos</label>
+            <button
+              className={style.demoButton}
+              onClick={() => this.loadDemo('kate')}
+            >
+              Kate TedTalk 12Min
+            </button>
+            <button
+              className={style.demoButton}
+              onClick={() => this.loadDemo('zuckDraftJs2h')}
+            >
+             Zuck 2h DraftJS
+            </button>
             <button
               className={style.demoButton}
-              onClick={() => this.loadDemo()}
+              onClick={() => this.loadDemo('zuckDpe2h')}
             >
-              Load Demo
+            Zuck 2h DPE
+            </button>
+            <button
+              className={style.demoButton}
+              onClick={() => this.loadDemo('zuckDraftJs5h')}
+            >
+             Zuck 5h DraftJS
+            </button>
+            <button
+              className={style.demoButton}
+              onClick={() => this.loadDemo('zuckDpe5h')}
+            >
+            Zuck 5h DPE
             </button>
           </section>
 
@@ -325,6 +411,21 @@ class App extends React.Component {
               />
             </div>
 
+            <div className={style.checkbox}>
+              <label
+                className={style.editableLabel}
+                htmlFor={"isAutoSave"}
+              >
+               Auto Save
+              </label>
+              <input
+                id={"isAutoSave"}
+                type="checkbox"
+                checked={this.state.isAutoSave}
+                onChange={this.handleIsAutoSave}
+              />
+            </div>
+
             <button
               className={style.warningButton}
               onClick={() => this.clearLocalStorage()}
@@ -347,6 +448,9 @@ class App extends React.Component {
           handleAutoSaveChanges={this.handleAutoSaveChanges}
           autoSaveContentType={this.state.autoSaveContentType}
           mediaType={ 'video' }
+          // showTimecodes={true}
+          // showSpeakers={true}
+          isAutoSave={this.state.isAutoSave}
         />
 
         <section style={{ height: "250px", width: "50%", float: "left" }}>
@@ -367,10 +471,8 @@ class App extends React.Component {
           </h3>
           <textarea
             style={{ height: "100%", width: "100%" }}
-            value={
-              this.state.autoSaveExtension === "json"
-                ? JSON.stringify(this.state.autoSaveData, null, 2)
-                : this.state.autoSaveData
+            value={(this.state.autoSaveExtension === "json" ||this.state.autoSaveExtension === "draftjs")?
+                    JSON.stringify(this.state.autoSaveData, null, 2) : this.state.autoSaveData
             }
             disabled
           />

demo/local-storage.js

@@ -6,8 +6,14 @@ const localSave = (mediaUrl, fileName, data) => {
   if (mediaUrlName.includes('blob')) {
     mediaUrlName = fileName;
   }
-
-  localStorage.setItem(`draftJs-${ mediaUrlName }`, JSON.stringify(data));
+  try {
+    localStorage.setItem(`draftJs-${ mediaUrlName }`, JSON.stringify(data));
+  }
+  catch(e){
+    // eg a 5 hour transcript, you might exceed local storage space  
+    console.error(e)
+    alert('Could not save in local storage')
+  }
 };
 
 // eslint-disable-next-line class-methods-use-this
@@ -34,7 +40,7 @@ const loadLocalSavedData = (mediaUrl, fileName) => {
   if (mediaUrl.includes('blob')) {
     mediaUrlName = fileName;
   }
-  const data = JSON.parse(localStorage.getItem(`draftJs-${ mediaUrlName }`));
+  const { data } = JSON.parse(localStorage.getItem(`draftJs-${ mediaUrlName }`));
   return data;
 };