[feat] update export for ADL with form using formik

bbc · Mar 1, 2021 · e077dba · e077dba
1 parent 06cf95c
commit e077dba
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 31 deletions.
diff --git a/package.json b/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",

diff --git a/src/Components/PaperEditor/ProgrammeScriptContainer/ExportDropdown/ExportModal/ADLModal.js b/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

diff --git a/src/Components/PaperEditor/ProgrammeScriptContainer/ExportDropdown/edl.js b/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

diff --git a/src/Components/PaperEditor/ProgrammeScriptContainer/ExportDropdown/index.js b/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>