Merge pull request #35 from pietrop/refactors-from-pagination

pietrop · web-flow · commit de376344a2b7 · 2021-02-05T23:51:10.000-05:00
Extrated some refactors from pagination PR
diff --git a/src/components/index.js b/src/components/index.js
@@ -18,7 +18,17 @@ import { createEditor, Editor, Transforms } from 'slate';
 // Import the Slate components and React plugin.
 import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
 import { withHistory } from 'slate-history';
-import { faSave, faShare, faUndo, faSync, faInfoCircle, faMehBlank, faPause, faMusic, faClosedCaptioning } from '@fortawesome/free-solid-svg-icons';
+import {
+  faSave,
+  faFileDownload,
+  faUndo,
+  faSync,
+  faInfoCircle,
+  // faMehBlank,
+  faPause,
+  // faMusic,
+  // faClosedCaptioning,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { shortTimecode } from '../util/timecode-converter';
 import download from '../util/downlaod/index.js';
@@ -27,10 +37,11 @@ import convertDpeToSlate from '../util/dpe-to-slate';
 import insertTimecodesInline from '../util/inline-interval-timecodes';
 import pluck from '../util/pluk';
 import subtitlesExportOptionsList from '../util/export-adapters/subtitles-generator/list.js';
-import updateTimestamps from '../util/update-timestamps';
+// import updateTimestamps from '../util/update-timestamps';
+import updateTimestamps from '../util/export-adapters/slate-to-dpe/update-timestamps';
 import exportAdapter from '../util/export-adapters';
 import isEmpty from '../util/is-empty';
-
+import generatePreviousTimingsUpToCurrent from '../util/generate-previous-timings-up-to-current';
 const PLAYBACK_RATE_VALUES = [0.2, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 3, 3.5];
 const SEEK_BACK_SEC = 15;
 const PAUSE_WHILTE_TYPING_TIMEOUT_MILLISECONDS = 1500;
@@ -306,14 +317,14 @@ export default function SlateTranscriptEditor(props) {
     if (e.target.classList.contains('timecode')) {
       const start = e.target.dataset.start;
       if (mediaRef && mediaRef.current) {
-        mediaRef.current.currentTime = parseInt(start);
+        mediaRef.current.currentTime = parseFloat(start);
         mediaRef.current.play();
       }
     } else if (e.target.dataset.slateString) {
       if (e.target.parentNode.dataset.start) {
         const start = e.target.parentNode.dataset.start;
         if (mediaRef && mediaRef.current && start) {
-          mediaRef.current.currentTime = parseInt(start);
+          mediaRef.current.currentTime = parseFloat(start);
           mediaRef.current.play();
         }
       }
@@ -397,19 +408,19 @@ export default function SlateTranscriptEditor(props) {
    * to provide current paragaph's highlight.
    * @param {Number} currentTime - float in seconds
    */
-  const generatePreviousTimingsUpToCurrent = (currentTime) => {
-    // edge case - empty transcription
-    if (isEmpty(props.transcriptData)) {
-      return '';
-    }
-    const lastWordStartTime = props.transcriptData.words[props.transcriptData.words.length - 1].start;
-    const lastWordStartTimeInt = parseInt(lastWordStartTime);
-    const emptyListOfTimes = Array(lastWordStartTimeInt);
-    const listOfTimesInt = [...emptyListOfTimes.keys()];
-    const listOfTimesUpToCurrentTimeInt = listOfTimesInt.splice(0, currentTime, 0);
-    const stringlistOfTimesUpToCurrentTimeInt = listOfTimesUpToCurrentTimeInt.join(' ');
-    return stringlistOfTimesUpToCurrentTimeInt;
-  };
+  // const generatePreviousTimingsUpToCurrent = (currentTime) => {
+  //   // edge case - empty transcription
+  //   if (isEmpty(props.transcriptData)) {
+  //     return '';
+  //   }
+  //   const lastWordStartTime = props.transcriptData.words[props.transcriptData.words.length - 1].start;
+  //   const lastWordStartTimeInt = parseInt(lastWordStartTime);
+  //   const emptyListOfTimes = Array(lastWordStartTimeInt);
+  //   const listOfTimesInt = [...emptyListOfTimes.keys()];
+  //   const listOfTimesUpToCurrentTimeInt = listOfTimesInt.splice(0, currentTime, 0);
+  //   const stringlistOfTimesUpToCurrentTimeInt = listOfTimesUpToCurrentTimeInt.join(' ');
+  //   return stringlistOfTimesUpToCurrentTimeInt;
+  // };
 
   const handleSetPauseWhileTyping = () => {
     setIsPauseWhiletyping(!isPauseWhiletyping);
@@ -447,9 +458,7 @@ export default function SlateTranscriptEditor(props) {
       <style scoped>
         {`
               /* Next words */
-              .timecode[data-previous-timings*="${
-                mediaRef && mediaRef.current && mediaRef.current.duration && generatePreviousTimingsUpToCurrent(parseInt(currentTime))
-              }"]{
+             .timecode[data-previous-timings*="${generatePreviousTimingsUpToCurrent(parseInt(currentTime), value)}"]{
                   color:  #9E9E9E;
               }
           `}
@@ -613,8 +622,16 @@ export default function SlateTranscriptEditor(props) {
                 overlay={<Tooltip id="tooltip-disabled">Export options</Tooltip>}
               >
                 <span className="d-inline-block">
-                  <DropdownButton disabled={isProcessing} id="dropdown-basic-button" title={<FontAwesomeIcon icon={faShare} />} variant="light">
+                  <DropdownButton
+                    disabled={isProcessing}
+                    id="dropdown-basic-button"
+                    title={<FontAwesomeIcon icon={faFileDownload} />}
+                    variant="light"
+                  >
                     {/* TODO: need to run re-alignement if exportin with timecodes true, otherwise they'll be inaccurate */}
+                    <Dropdown.Item style={{ color: 'black' }} disabled>
+                      <b>Text Export</b>
+                    </Dropdown.Item>
                     <Dropdown.Item
                       onClick={() => {
                         handleExport({
@@ -752,6 +769,27 @@ export default function SlateTranscriptEditor(props) {
                       Word (OHMS)
                     </Dropdown.Item>
                     <Dropdown.Divider />
+
+                    <Dropdown.Item style={{ color: 'black' }} disabled>
+                      <b>Closed Captions Export</b>
+                    </Dropdown.Item>
+                    {subtitlesExportOptionsList.map(({ type, label, ext }, index) => {
+                      return (
+                        <Dropdown.Item
+                          key={index + label}
+                          onClick={() => {
+                            handleExport({ type, ext, isDownload: true });
+                          }}
+                        >
+                          {label} (<code>.{ext}</code>)
+                        </Dropdown.Item>
+                      );
+                    })}
+                    <Dropdown.Divider />
+                    <Dropdown.Item style={{ color: 'black' }} disabled>
+                      <b>Developer options</b>
+                    </Dropdown.Item>
+
                     <Dropdown.Item
                       onClick={() => {
                         handleExport({
@@ -782,7 +820,7 @@ export default function SlateTranscriptEditor(props) {
                 </span>
               </OverlayTrigger>
             </Col>
-            <Col xs={2} sm={12} md={12} lg={12} xl={12} className={'p-1 mx-auto'}>
+            {/* <Col xs={2} sm={12} md={12} lg={12} xl={12} className={'p-1 mx-auto'}>
               <OverlayTrigger
                 OverlayTrigger
                 delay={TOOTLIP_LONGER_DELAY}
@@ -809,7 +847,7 @@ export default function SlateTranscriptEditor(props) {
                   })}
                 </DropdownButton>
               </OverlayTrigger>
-            </Col>
+            </Col> */}
             <Col xs={2} sm={12} md={12} lg={12} xl={12} className={'p-1 mx-auto'}>
               <OverlayTrigger
                 OverlayTrigger
@@ -822,23 +860,23 @@ export default function SlateTranscriptEditor(props) {
                 </Button>
               </OverlayTrigger>
             </Col>
-            <Col xs={2} sm={12} md={12} lg={12} xl={12} className={'p-1 mx-auto'}>
-              <OverlayTrigger
-                delay={TOOTLIP_DELAY}
-                placement={'bottom'}
-                overlay={
-                  <Tooltip id="tooltip-disabled">
-                    To insert a paragraph break, and split a pargraph in two, put the cursor at a point where you'd want to add a paragraph break in
-                    the text and either click this button or hit enter key
-                  </Tooltip>
-                }
-              >
-                <Button disabled={isProcessing} onClick={breakParagraph} variant="light">
-                  {/* <FontAwesomeIcon icon={ faICursor } /> */}↵
-                </Button>
-              </OverlayTrigger>
-            </Col>
-            <Col xs={2} sm={12} md={12} lg={12} xl={12} className={'p-1 mx-auto'}>
+            {/* <Col xs={2} sm={12} md={12} lg={12} xl={12} className={'p-1 mx-auto'}>
+                <OverlayTrigger
+                  delay={TOOTLIP_DELAY}
+                  placement={'bottom'}
+                  overlay={
+                    <Tooltip id="tooltip-disabled">
+                      To insert a paragraph break, and split a pargraph in two, put the cursor at a point where you'd want to add a paragraph break in
+                      the text and either click this button or hit enter key
+                    </Tooltip>
+                  }
+                >
+                  <Button disabled={isProcessing} onClick={breakParagraph} variant="light">
+                    ↵
+                  </Button>
+                </OverlayTrigger>
+              </Col> */}
+            {/* <Col xs={2} sm={12} md={12} lg={12} xl={12} className={'p-1 mx-auto'}>
               <OverlayTrigger
                 delay={TOOTLIP_DELAY}
                 placement={'bottom'}
@@ -850,16 +888,16 @@ export default function SlateTranscriptEditor(props) {
                   <FontAwesomeIcon icon={faMehBlank} />
                 </Button>
               </OverlayTrigger>
-            </Col>
-            <Col xs={2} sm={12} md={12} lg={12} xl={12} className={'p-1 mx-auto'}>
+            </Col> */}
+            {/* <Col xs={2} sm={12} md={12} lg={12} xl={12} className={'p-1 mx-auto'}>
               <OverlayTrigger delay={TOOTLIP_DELAY} placement={'bottom'} overlay={<Tooltip id="tooltip-disabled">Insert a ♫ in the text</Tooltip>}>
                 <span className="d-inline-block">
                   <Button onClick={handleInsertMusicNote} variant={'light'}>
                     <FontAwesomeIcon icon={faMusic} />
                   </Button>
                 </span>
               </OverlayTrigger>
-            </Col>
+            </Col> */}
             <Col xs={2} sm={12} md={12} lg={12} xl={12} className={'p-1 mx-auto'}>
               <OverlayTrigger
                 delay={TOOTLIP_DELAY}
diff --git a/src/util/dpe-to-slate/generate-previous-timings-up-to-current/index.js b/src/util/dpe-to-slate/generate-previous-timings-up-to-current/index.js
@@ -0,0 +1,49 @@
+import { generatePreviousTimingsUpToCurrentOne } from '../dpe-to-slate';
+
+/**
+ * See explanation in `src/utils/dpe-to-slate/index.js` for how this function works with css injection
+ * to provide current paragaph's highlight.
+ * @param {Number} currentTime - float in seconds
+ */
+import isEmpty from '../../util/is-empty';
+/**
+ *
+ * @param {*} currentTime
+ * @param {*} transcriptData - dpe transcript data with timecodes at word level
+ */
+// const generatePreviousTimingsUpToCurrent = (currentTime, transcriptData) => {
+//   // edge case - empty transcription
+//   if (isEmpty(transcriptData)) {
+//     return '';
+//   }
+//   const lastWordStartTime = transcriptData.words[transcriptData.words.length - 1].start;
+//   const lastWordStartTimeInt = parseInt(lastWordStartTime);
+//   const emptyListOfTimes = Array(lastWordStartTimeInt);
+//   const listOfTimesInt = [...emptyListOfTimes.keys()];
+//   const listOfTimesUpToCurrentTimeInt = listOfTimesInt.splice(0, currentTime, 0);
+//   const stringlistOfTimesUpToCurrentTimeInt = listOfTimesUpToCurrentTimeInt.join(' ');
+//   return stringlistOfTimesUpToCurrentTimeInt;
+// };
+
+// export default generatePreviousTimingsUpToCurrent;
+
+/**
+ *
+ * @param {*} currentTime
+ * @param {*} transcriptDataSlateValue - slateJS value data with timecodes at paragraph level
+ */
+const generatePreviousTimingsUpToCurrent = (currentTime, transcriptDataSlateValue) => {
+  // edge case - empty transcription
+  if (isEmpty(transcriptDataSlateValue)) {
+    return '';
+  }
+  const lastWordStartTime = transcriptDataSlateValue[transcriptDataSlateValue.length - 1].start;
+  const lastWordStartTimeInt = parseInt(lastWordStartTime);
+  const emptyListOfTimes = Array(lastWordStartTimeInt);
+  const listOfTimesInt = [...emptyListOfTimes.keys()];
+  const listOfTimesUpToCurrentTimeInt = listOfTimesInt.splice(0, currentTime, 0);
+  const stringlistOfTimesUpToCurrentTimeInt = listOfTimesUpToCurrentTimeInt.join(' ');
+  return stringlistOfTimesUpToCurrentTimeInt;
+};
+
+export default generatePreviousTimingsUpToCurrent;
diff --git a/src/util/dpe-to-slate/index.js b/src/util/dpe-to-slate/index.js
@@ -12,6 +12,9 @@ import { shortTimecode } from '../timecode-converter';
  * eg if current time is `3` then `listOfPreviousTimingsUpToCurrentOne` "0 1 2"
  */
 
+//  TODO: should it consolidate generatePreviousTimingsUpToCurrent or are they for different porpuses?
+//  import generatePreviousTimingsUpToCurrent from './generate-previous-timings-up-to-current';
+
 /**
  * Generate a list of times, each rounded up to int.
  * from zero to the provided `time`.
@@ -21,7 +24,11 @@ import { shortTimecode } from '../timecode-converter';
 
 export const generatePreviousTimings = (time) => {
   // https://stackoverflow.com/questions/3746725/how-to-create-an-array-containing-1-n
-  return [...Array(parseInt(time)).keys()];
+  if (time) {
+    return [...Array(parseInt(time)).keys()];
+  } else {
+    return [0];
+  }
 };
 
 /**
@@ -68,6 +75,8 @@ const convertDpeToSlate = (transcript) => {
         children: [
           {
             text: 'Text',
+            // Adding list of words in slateJs paragraphs
+            words: [],
           },
         ],
       },
@@ -83,7 +92,13 @@ const convertDpeToSlate = (transcript) => {
     // pre-computing the display of the formatting here so that it doesn't need to convert it in leaf render
     startTimecode: shortTimecode(paragraph.start),
     type: 'timedText',
-    children: [{ text: generateText(paragraph, words) }],
+    children: [
+      {
+        text: generateText(paragraph, words),
+        // Adding list of words in slateJs paragraphs
+        words,
+      },
+    ],
   }));
 };
 
diff --git a/src/util/export-adapters/slate-to-dpe/index.js b/src/util/export-adapters/slate-to-dpe/index.js
@@ -3,14 +3,15 @@
  * https://github.com/pietrop/react-transcript-editor/blob/master/packages/components/timed-text-editor/UpdateTimestamps/index.js
  * similar to updateTimestamps
  */
-import { alignSTT } from 'stt-align-node';
-import slateToText from '../txt';
+// import { alignSTT } from 'stt-align-node';
+// import slateToText from '../txt';
 import countWords from '../../count-words';
+import updateTimestampsHelper from './update-timestamps/update-timestamps-helper';
 /**
  * Transposes the timecodes from stt json list of words onto
  * dpe transcript with paragraphs and words
  */
-const createParagraphsFromSlateJs = (currentContent, newEntities) => {
+export const createDpeParagraphsFromSlateJs = (currentContent, newEntities) => {
   // Update entites to block structure.
   const updatedBlockArray = [];
   let totalWords = 0;
@@ -45,9 +46,8 @@ const createParagraphsFromSlateJs = (currentContent, newEntities) => {
  * @return dpe transcript with paragraphs and words
  */
 const converSlateToDpe = (currentContent, words) => {
-  const currentText = slateToText({ value: currentContent, speakers: false, timecodes: false, atlasFormat: false });
-  const alignedWords = alignSTT(words, currentText);
-  const updatedContent = createParagraphsFromSlateJs(currentContent, alignedWords);
+  const alignedWords = updateTimestampsHelper(currentContent, words);
+  const updatedContent = createDpeParagraphsFromSlateJs(currentContent, alignedWords);
   return { words: alignedWords, paragraphs: updatedContent };
 };
 
diff --git a/src/util/export-adapters/slate-to-dpe/update-timestamps/index.js b/src/util/export-adapters/slate-to-dpe/update-timestamps/index.js
@@ -3,16 +3,15 @@
  * https://github.com/pietrop/react-transcript-editor/blob/master/packages/components/timed-text-editor/UpdateTimestamps/index.js
  *
  */
-import { alignSTT } from 'stt-align-node';
-import slateToText from '../export-adapters/txt';
-import { shortTimecode } from '../timecode-converter';
-import { generatePreviousTimingsUpToCurrentOne } from '../dpe-to-slate';
-import countWords from '../count-words';
+import { shortTimecode } from '../../../timecode-converter';
+import { generatePreviousTimingsUpToCurrentOne } from '../../../dpe-to-slate';
+import countWords from '../../../count-words';
+import updateTimestampsHelper from './update-timestamps-helper';
 /**
  * Transposes the timecodes from stt json list of words onto
  * slateJs value paragraphs
  */
-const createContentFromSlateJsParagraphs = (currentContent, newEntities) => {
+export const createSlateContentFromSlateJsParagraphs = (currentContent, newEntities) => {
   // Update entites to block structure.
   const updatedBlockArray = [];
   let totalWords = 0;
@@ -53,9 +52,8 @@ const createContentFromSlateJsParagraphs = (currentContent, newEntities) => {
  * @return slateJS value
  */
 const updateTimestamps = (currentContent, words) => {
-  const currentText = slateToText({ value: currentContent, speakers: false, timecodes: false, atlasFormat: false });
-  const alignedWords = alignSTT(words, currentText);
-  const updatedContent = createContentFromSlateJsParagraphs(currentContent, alignedWords);
+  const alignedWords = updateTimestampsHelper(currentContent, words);
+  const updatedContent = createSlateContentFromSlateJsParagraphs(currentContent, alignedWords);
   return updatedContent;
 };
 
diff --git a/src/util/export-adapters/slate-to-dpe/update-timestamps/update-timestamps-helper.js b/src/util/export-adapters/slate-to-dpe/update-timestamps/update-timestamps-helper.js
diff --git a/src/util/export-adapters/subtitles-generator/list.js b/src/util/export-adapters/subtitles-generator/list.js
