[feat] update export for ADL with form using formik (#162)

* [feat] update export for ADL with form using formik

* [refactor] Resolve some security issue https://github.com/acdlite/recompose/issues/817\#issuecomment-725033148

* [fix] security issues

* Updating package lock

* [fix] remove babel jest

* Update import to the security fixed recompose

* [fix] unused variables prevents build

* Update functions deps

functions/package.json

@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "aws-sdk": "^2.588.0",
-    "firebase-admin": "^8.6.0",
-    "firebase-functions": "^3.3.0",
+    "firebase-admin": "^9.5.0",
+    "firebase-functions": "^3.13.2",
     "fluent-ffmpeg": "^2.1.2",
     "node-fetch": "^2.6.1",
     "zlib": "^1.0.5"

package.json

@@ -23,6 +23,7 @@
     "firebase": "^7.14.0",
     "firebase-admin": "^9.4.2",
     "firebaseui": "^4.3.0",
+    "formik": "^2.2.6",
     "http2": "^3.3.7",
     "node-sass": "^4.13.0",
     "randomcolor": "^0.5.4",
@@ -33,10 +34,10 @@
     "react-fetch-progressbar": "^1.0.0",
     "react-router-bootstrap": "^0.24.4",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^3.0.1",
+    "react-scripts": "^4.0.3",
     "react-select": "^2.4.3",
     "react-sortable-hoc": "^1.9.1",
-    "recompose": "^0.30.0",
+    "@shakacode/recompose": "^0.30.3",
     "videocontext": "^0.53.1",
     "zlib": "^1.0.5"
   },
@@ -84,7 +85,6 @@
     "@react-mock/fetch": "^0.3.0",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.3.0",
-    "babel-jest": "^24.9.0",
     "cross-env": "^5.2.0",
     "eslint-plugin-react-hooks": "^2.5.0",
     "gh-pages": "^2.0.1",

src/Components/Firebase/context.js

@@ -1,10 +1,15 @@
 import React from 'react';
 
 const FirebaseContext = React.createContext(null);
-
-export const withFirebase = Component => props => (
-  <FirebaseContext.Consumer>
-    {firebase => <Component { ...props } firebase={ firebase } />}
-  </FirebaseContext.Consumer>
-);
 export default FirebaseContext;
+
+export const withFirebase = Component => {
+
+  const WithFirebase = (props) => (
+    <FirebaseContext.Consumer>
+      {firebase => <Component { ...props } firebase={ firebase } />}
+    </FirebaseContext.Consumer>
+  );
+
+  return WithFirebase;
+};

src/Components/PaperEditor/ProgrammeScriptContainer/ExportDropdown/ExportModal/ADLModal.js

@@ -2,60 +2,134 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Modal from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Accordion from 'react-bootstrap/Accordion';
+import Card from 'react-bootstrap/Card';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
 
 const ADLModal = (props) => {
 
   const transcripts = props.transcripts;
+  const initialForm = transcripts.reduce((res, tr) => {
+    res[tr.id] = tr.title;
 
-  const onClick = () => {
-    props.handleClick();
+    return res;
+  }, {});
+
+  const getExt = (fileName) => fileName.slice((fileName.lastIndexOf('.') - 1 >>> 0) + 2);
+  const adlSupportedExt = (ext) => (ext === 'wav' || ext === 'bwf');
+  const validateFileName = (value) => {
+    let error;
+    if (!value) {
+      error = 'Required';
+    } else {
+      const ext = getExt(value);
+      if (ext && !adlSupportedExt(ext)) {
+        error = `Invalid ext: ADL does not support filenames with ${ ext }. Please remove ext.`;
+      }
+    }
+
+    return error;
+  };
+
+  const onSubmit = (values) => {
+    props.onSubmit(values);
   };
 
+  const FormHeader = <Col>
+    <Row>
+      <Col xs={ 4 }>
+        <h6>Title</h6>
+      </Col>
+      <Col xs={ 8 }>
+        <h6>ADL source filename</h6>
+      </Col>
+    </Row>
+  </Col>;
+
+  const filenameForms = transcripts.map(tr => {
+    return (
+      <Col key={ `form-${ tr.id }` }>
+        <Row>
+          <Col xs={ 4 }>
+            {tr.title}
+          </Col>
+          <Col xs={ 8 }>
+            <Field style={ { width: '100%' } } name={ `${ tr.id }` } validate={ validateFileName } />
+          </Col>
+        </Row>
+        <Row style={ { color:'red' } }>
+          <Col>
+            <ErrorMessage name={ tr.id } />
+          </Col>
+        </Row>
+      </Col>
+    );
+  });
+
   return (
     <Modal show={ props.show } onHide={ props.handleClose }>
       <Modal.Header closeButton>
         <Modal.Title>Generate ADL</Modal.Title>
       </Modal.Header>
+
       <Modal.Body>
         <h5>For SaDiE Users</h5>
-        Before you import the generated ADL file, please make sure that you have:
+        Before you import the generated ADL file, please:
         <ol>
-          <li key={ 1 }>Created a SaDiE project</li>
-          <li key={ 2 }>[OPTIONAL] Downloaded media files from the Export menu.</li>
-          <li ke={ 3 }>Imported media files with the below filenames (without extension - e.g. wav). </li>
+          <li key={ 1 }>Create a SaDiE project</li>
+          <li key={ 2 }>[OPTIONAL] Download media files from the Export menu.</li>
+          <li ke={ 3 }>Import media files to your SaDiE project.</li>
+
+          <Accordion>
+            <li ke={ 4 }>Make sure that the media filenames match the filenames in the ADL.
+              <Accordion.Toggle style={ { padding: 0 } } as={ Button } variant="link" eventKey="0">
+                <FontAwesomeIcon icon={ faInfoCircle }></FontAwesomeIcon>
+              </Accordion.Toggle>
+            </li>
+            <Accordion.Collapse eventKey="0">
+              <Card.Body>
+                {'The ADL file generates a list of source filenames from the filenames provided. '}
+                {'SaDiE will use these to automatically import source tracks.'}
+              </Card.Body>
+            </Accordion.Collapse>
+          </Accordion>
         </ol>
 
-        <h6>Why do we need to match the filenames?</h6>
-        The generated ADL file uses the filenames below.
-        SaDiE will use the filenames to automatically import source tracks.
-        <br />
-        {"Once you've generated the ADL file successfully, please import it as an AES31 ADL file."}
-        <br />
+        The following assets will be in the ADL.
+        Please rename them to match the media filenames in SaDiE.
 
       </Modal.Body>
       <Modal.Body>
-        <Modal.Title>Filenames</Modal.Title>
-        {transcripts.map(tr => {
-          return (
-            <li key={ `li-${ tr.id }` }>{tr.title}</li>
-          );
-        })}
+        <Formik
+          initialValues={ initialForm }
+          onSubmit={ onSubmit }>
+          {() => (
+            <Form>
+              {FormHeader}
+              {filenameForms}
+              <br />
+              {"Once you've generated the ADL file successfully, please import it as an AES31 ADL file."}
+              <Modal.Footer>
+                <Button variant="secondary" onClick={ props.handleClose }>
+                  Close
+                </Button>
+                <Button type="submit">Submit</Button>
+              </Modal.Footer>
+            </Form>
+          )}
+        </Formik>
       </Modal.Body>
-      <Modal.Footer>
-        <Button variant="secondary" onClick={ props.handleClose }>
-          Cancel
-        </Button>
-        <Button variant="primary" onClick={ onClick }>
-          OK
-        </Button>
-      </Modal.Footer>
     </Modal>
   );
 
 };
 
 ADLModal.propTypes = {
-  handleClick: PropTypes.func,
+  onSubmit: PropTypes.func,
   handleClose: PropTypes.any,
   show: PropTypes.any,
   transcripts: PropTypes.any

src/Components/PaperEditor/ProgrammeScriptContainer/ExportDropdown/edl.js

@@ -53,7 +53,7 @@ const formatToADLEvent = (transcript, element) => {
     reelName: transcript.title
       ? transcript.title
       : defaultReelName,
-    clipName: `${ transcript.title }`,
+    clipName: transcript.fileName ? transcript.fileName : transcript.title,
     // TODO: frameRate should be pulled from the clips in the sequence
     // Changing to 24 fps because that is the frame rate of the ted talk examples from youtube
     // but again frameRate should not be hard coded

src/Components/PaperEditor/ProgrammeScriptContainer/ExportDropdown/index.js

@@ -69,8 +69,9 @@ const ExportDropdown = (props) => {
     downloadjs(edl.compose(), `${ title }.edl`, 'text/plain');
   };
 
-  const generateADL = () => {
-    const result = getADLSq(projectTitle, title, elements, transcripts);
+  const generateADL = (data) => {
+    const trWithFNames = transcripts.map(tr => ( { ...tr, fileName: data[tr.id] }));
+    const result = getADLSq(projectTitle, title, elements, trWithFNames);
     downloadjs(result, `${ projectTitle }-${ title }.adl`, 'text/plain');
   };
 
@@ -147,7 +148,7 @@ const ExportDropdown = (props) => {
           Download Media files <FontAwesomeIcon icon={ faInfoCircle } />
         </Dropdown.Item>
 
-        <ADLModal show={ showADL } handleClick={ generateADL } transcripts={ transcripts } handleClose={ handleCloseADL } ></ADLModal>
+        <ADLModal show={ showADL } onSubmit={ generateADL } transcripts={ transcripts } handleClose={ handleCloseADL } ></ADLModal>
         {urls.length > 0 ? <MediaModal urls={ urls } show={ showMedia } handleClose={ handleCloseMedia } ></MediaModal> : null}
       </Dropdown.Menu>
     </Dropdown>
@@ -157,6 +158,8 @@ const ExportDropdown = (props) => {
 
 ExportDropdown.propTypes = {
   elements: PropTypes.any,
+  handleGetMediaUrl: PropTypes.func,
+  projectTitle: PropTypes.any,
   title: PropTypes.any,
   transcripts: PropTypes.any
 };

src/Components/PaperEditor/ProgrammeScriptContainer/get-data-from-user-selection.js

@@ -25,7 +25,7 @@ function parseWordElDataset(wordEl) {
    * @param {*} e - browser event
    * @returns - an object with start and end time - eg {stat: "23.03", end: "39.61"}
    */
-function getDataFromUserWordsSelection(e) {
+function getDataFromUserWordsSelection() {
   if (!window.getSelection().isCollapsed) {
     const selection = window.getSelection();
     const countSelectedRanges = selection.rangeCount;

src/Components/PaperEditor/ProgrammeScriptContainer/index.js

@@ -330,11 +330,11 @@ const ProgrammeScriptContainer = (props) => {
   const getTranscriptSelectionStartTime = (insertIndex) => {
     const prevElements = elements.slice(0, insertIndex);
 
-    const paperEdits = prevElements.filter(
+    const pes = prevElements.filter(
       (element) => element.type === 'paper-cut'
     );
 
-    const totalDuration = paperEdits.reduce(
+    const totalDuration = pes.reduce(
       (prevResult, paperEdit) => {
         const paperEditDuration = paperEdit.end - paperEdit.start;
         prevResult.startTime += paperEditDuration;

src/Components/PaperEditor/TranscriptsContainer/LabelsList/index.js

@@ -37,7 +37,7 @@ const LabelsList = (props) => {
     }
   };
 
-  const handleEdit = (id, e) => {
+  const handleEdit = (id) => {
     const labelToEdit = labels.filter((label) => label.id === id);
     onLabelUpdate(labelToEdit.id, labelToEdit);
   };

src/Components/PaperEditor/TranscriptsContainer/LabelsList/select-color-styles.js

@@ -4,7 +4,7 @@
 
 const colourStyles = {
   control: styles => ({ ...styles, backgroundColor: 'white' }),
-  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
+  option: (styles, { data, isDisabled }) => {
     // const color = chroma(data.color);
 
     const tmpBackgroundColor = null;// 'black;
@@ -75,11 +75,11 @@ const colourStyles = {
       borderColor: data.color,
     };
   },
-  multiValueLabel: (styles, { data }) => ({
+  multiValueLabel: (styles) => ({
     ...styles,
     // color: data.color
   }),
-  multiValueRemove: (styles, { data }) => ({
+  multiValueRemove: (styles) => ({
     ...styles,
     // color: data.color,
     // ':hover': {

src/Components/PaperEditor/TranscriptsContainer/TranscriptTabPane/TranscriptTabContent/index.js

@@ -266,12 +266,12 @@ const TranscriptTabContent = (props) => {
     };
 
     const setAllDisplays = (display) => {
-      const displayAllParagraphs = annotatedParagraphs.map((p) => display);
+      const displayAllParagraphs = annotatedParagraphs.map(() => display);
       setDisplayParagraphs(displayAllParagraphs);
     };
 
     const setAllSearchResults = (searchResult) => {
-      const searchResults = annotatedParagraphs.map((p) => searchResult);
+      const searchResults = annotatedParagraphs.map(() => searchResult);
       setIsSearchResults(searchResults);
     };
 

src/Components/Session/withAuthorization.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 import { withRouter } from 'react-router-dom';
-import { compose } from 'recompose';
+import { compose } from '@shakacode/recompose';
 
 import AuthUserContext from './context';
 import { withFirebase } from '../Firebase';

src/Components/SignIn/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { withRouter } from 'react-router-dom';
-import { compose } from 'recompose';
+import { compose } from '@shakacode/recompose';
 import { withFirebase } from '../Firebase';
 import * as ROUTES from '../../constants/routes';
 import Form from 'react-bootstrap/Form';