Move background audio handling into Submission Modal from Data Table

to make it more independent
kobotoolbox · Jul 9, 2024 · 0d9546c · 0d9546c
1 parent d85bd1f
commit 0d9546c
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 92 deletions.
diff --git a/jsapp/js/components/bigModal/bigModal.es6 b/jsapp/js/components/bigModal/bigModal.es6
@@ -380,7 +380,6 @@ class BigModal extends React.Component {
                 ids={this.props.params.ids}
                 isDuplicated={this.props.params.isDuplicated}
                 duplicatedSubmission={this.props.params.duplicatedSubmission}
-                backgroundAudioUrl={this.props.params.backgroundAudioUrl}
                 tableInfo={this.props.params.tableInfo || false}
               />
             }

diff --git a/jsapp/js/components/submissions/submissionDataTable.scss b/jsapp/js/components/submissions/submissionDataTable.scss
@@ -86,19 +86,31 @@ $submission-data-table-space: sizes.$x12;
 
 .submission-data-table__row--response .submission-data-table__column.submission-data-table__column--data {
   @include mixins.centerRowFlex;
+  gap: 10px;
 
   flex: 1;
 
   .audio-player:first-child {
-    padding-right: sizes.$x30;
+    margin-right: 30px;
+    flex: 1;
   }
 
-  > *:first-child {
-    flex: 1;
+  video {
+    max-width: 100%;
+    object-fit: contain;
   }
+}
+
+.submission-data-table__column.submission-data-table__column--data.submission-data-table__column--type-audio,
+.submission-data-table__column.submission-data-table__column--data.submission-data-table__column--type-image,
+.submission-data-table__column.submission-data-table__column--data.submission-data-table__column--type-video {
+  justify-content: flex-end;
 
-  > *:not(:last-child) {
-    margin-right: sizes.$x20;
+  img {
+    // We don't want the image to take too much space, as it's making the UI
+    // harder to follow. There are other ways to see full image, and
+    // `SubmissionDataTable` is more about the full picture.
+    max-height: 250px;
   }
 }
 

diff --git a/jsapp/js/components/submissions/submissionDataTable.tsx b/jsapp/js/components/submissions/submissionDataTable.tsx
@@ -3,7 +3,6 @@ import autoBind from 'react-autobind';
 import bem, {makeBem} from 'js/bem';
 import Button from 'js/components/common/button';
 import {
-  downloadUrl,
   formatTimeDate,
   formatDate,
 } from 'js/utils';
@@ -21,7 +20,7 @@ import {
   SCORE_ROW_TYPE,
   RANK_LEVEL_TYPE,
 } from 'js/constants';
-import type {MetaQuestionTypeName} from 'js/constants';
+import type {MetaQuestionTypeName, AnyRowTypeName} from 'js/constants';
 import './submissionDataTable.scss';
 import type {
   AssetResponse,
@@ -277,42 +276,46 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
     );
   }
 
-  renderAttachment(type: string, filename: string, name: string, xpath: string) {
+  renderAttachment(type: AnyRowTypeName, filename: string, name: string, xpath: string) {
     const attachment = getMediaAttachment(this.props.submissionData, filename, xpath);
     if (attachment && attachment instanceof Object) {
-      if (type === QUESTION_TYPES.audio.id) {
-        return (
-          <React.Fragment>
-            <AudioPlayer mediaURL={attachment.download_url} />
-
-            <Button
-              type='full'
-              size='s'
-              color='blue'
-              endIcon='arrow-up-right'
-              label={t('Open')}
-              onClick={this.openProcessing.bind(this, name)}
-            />
+      return (
+        <>
+          {type === QUESTION_TYPES.audio.id &&
+            <>
+              <AudioPlayer mediaURL={attachment.download_url} />
+
+              <Button
+                type='full'
+                size='s'
+                color='blue'
+                endIcon='arrow-up-right'
+                label={t('Open')}
+                onClick={this.openProcessing.bind(this, name)}
+              />
+            </>
+          }
 
-            <Button
-              type='frame'
-              size='s'
-              color='blue'
-              endIcon='download'
-              label={t('Download')}
-              onClick={downloadUrl.bind(this, attachment.download_url)}
+          {type === QUESTION_TYPES.image.id &&
+            <a href={attachment.download_url} target='_blank'>
+              <img src={attachment.download_medium_url}/>
+            </a>
+          }
+
+          {type === QUESTION_TYPES.video.id &&
+            <video
+              src={attachment.download_url}
+              controls
             />
-          </React.Fragment>
-        );
-      } else if (type === QUESTION_TYPES.image.id) {
-        return (
-          <a href={attachment.download_url} target='_blank'>
-            <img src={attachment.download_medium_url}/>
-          </a>
-        );
-      } else {
-        return (<a href={attachment.download_url} target='_blank'>{filename}</a>);
-      }
+          }
+
+          {type === QUESTION_TYPES.file.id &&
+            <a href={attachment.download_url} target='_blank'>
+              {filename}
+            </a>
+          }
+        </>
+      );
     // In the case that an attachment is missing, don't crash the page
     } else {
       return attachment;

diff --git a/jsapp/js/components/submissions/submissionModal.tsx b/jsapp/js/components/submissions/submissionModal.tsx
@@ -29,6 +29,9 @@ import type {
   SubmissionResponse,
   ValidationStatusResponse,
 } from 'js/dataInterface';
+import AudioPlayer from 'js/components/common/audioPlayer';
+import {getBackgroundAudioQuestionName} from 'js/components/submissions/tableUtils';
+import {getMediaAttachment} from 'js/components/submissions/submissionUtils';
 import './submissionModal.scss';
 
 const DETAIL_NOT_FOUND = '{\"detail\":\"Not found.\"}';
@@ -39,7 +42,6 @@ interface SubmissionModalProps {
   ids: number[];
   isDuplicated: boolean;
   duplicatedSubmission: SubmissionResponse | null;
-  backgroundAudioUrl: string;
   tableInfo:
     | {
         resultsTotal: number;
@@ -387,12 +389,45 @@ class SubmissionModal extends React.Component<
     });
   }
 
-  hasBackgroundAudio() {
+  /**
+   * Whether the form has background audio enabled. This means that there is
+   * a possibility that the submission could have a background audio recording.
+   * If you need to know if recording exist, please use `getBackgroundAudioUrl`.
+   */
+  hasBackgroundAudioEnabled() {
     return this.props.asset?.content?.survey?.some(
       (question) => question.type === META_QUESTION_TYPES['background-audio']
     );
   }
 
+  getBackgroundAudioUrl() {
+    const backgroundAudioName = getBackgroundAudioQuestionName(
+      this.props.asset
+    );
+
+    if (
+      backgroundAudioName &&
+      this.state.submission &&
+      Object.keys(this.state.submission).includes(backgroundAudioName)
+    ) {
+      const response = this.state.submission[backgroundAudioName];
+      if (typeof response === 'string') {
+        const mediaAttachment = getMediaAttachment(
+          this.state.submission,
+          response,
+          META_QUESTION_TYPES['background-audio']
+        );
+        if (typeof mediaAttachment === 'string') {
+          return mediaAttachment;
+        } else {
+          return mediaAttachment.download_medium_url;
+        }
+      }
+    }
+
+    return undefined;
+  }
+
   renderDropdowns() {
     if (!this.props.asset.deployment__active || !this.state.submission) {
       return null;
@@ -465,7 +500,7 @@ class SubmissionModal extends React.Component<
       return <CenteredMessage message={t('Unknown error')} />;
     }
 
-    const s = this.state.submission;
+    const bgAudioUrl = this.getBackgroundAudioUrl();
 
     // Use this modal if we just duplicated a submission, but not if we are
     // editing it
@@ -558,19 +593,6 @@ class SubmissionModal extends React.Component<
           )}
 
           <section className='submission-modal-section'>
-            {this.hasBackgroundAudio() && (
-              <bem.BackgroundAudioPlayer>
-                <bem.BackgroundAudioPlayer__label>
-                  {t('Background audio recording')}
-                </bem.BackgroundAudioPlayer__label>
-
-                <bem.BackgroundAudioPlayer__audio
-                  controls
-                  src={this.props?.backgroundAudioUrl}
-                />
-              </bem.BackgroundAudioPlayer>
-            )}
-
             {this.renderDropdowns()}
           </section>
 
@@ -718,6 +740,30 @@ class SubmissionModal extends React.Component<
             </div>
           </section>
 
+          {this.hasBackgroundAudioEnabled() && (
+            <bem.SubmissionDataTable>
+              <bem.SubmissionDataTable__row m={['columns', 'column-names']}>
+                <bem.SubmissionDataTable__column>
+                  {t('Background audio recording')}
+                </bem.SubmissionDataTable__column>
+              </bem.SubmissionDataTable__row>
+
+              <bem.SubmissionDataTable__row m={['columns', 'response', 'type-audio']}>
+                {bgAudioUrl &&
+                  <bem.SubmissionDataTable__column m={['data', 'type-audio']}>
+                    <AudioPlayer mediaURL={bgAudioUrl} />
+                  </bem.SubmissionDataTable__column>
+                }
+
+                {!bgAudioUrl &&
+                  <bem.SubmissionDataTable__column m='data'>
+                    {t('N/A')}
+                  </bem.SubmissionDataTable__column>
+                }
+              </bem.SubmissionDataTable__row>
+            </bem.SubmissionDataTable>
+          )}
+
           {this.state.submission && (
             <SubmissionDataTable
               asset={this.props.asset}

diff --git a/jsapp/js/components/submissions/table.tsx b/jsapp/js/components/submissions/table.tsx
@@ -586,7 +586,7 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
               tooltip={t('Open')}
               tooltipPosition='left'
               onClick={() => {
-                this.launchSubmissionModal(row, row.original._id);
+                this.launchSubmissionModal(row.original._id);
               }}
             />
 
@@ -1254,39 +1254,8 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
    * Opens submission modal
    * @param {object} row
    */
-  launchSubmissionModal(row: CellInfo, sid: string) {
-    if (row && row.original) {
-      const backgroundAudioName = getBackgroundAudioQuestionName(
-        this.props.asset
-      );
-      if (
-        backgroundAudioName &&
-        Object.keys(row.original).includes(backgroundAudioName)
-      ) {
-        const mediaAttachment = getMediaAttachment(
-          row.original,
-          row.original[backgroundAudioName],
-          META_QUESTION_TYPES['background-audio']
-        );
-
-        let backgroundAudioUrl;
-        if (typeof mediaAttachment === 'string') {
-          backgroundAudioUrl = mediaAttachment;
-        } else {
-          backgroundAudioUrl = mediaAttachment.download_medium_url;
-        }
-
-        this.submissionModalProcessing(
-          sid,
-          this.state.submissions,
-          false,
-          null,
-          backgroundAudioUrl
-        );
-      } else {
-        this.submissionModalProcessing(sid, this.state.submissions);
-      }
-    }
+  launchSubmissionModal(sid: string) {
+    this.submissionModalProcessing(sid, this.state.submissions);
   }
 
   /**
@@ -1297,7 +1266,6 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
     submissions: SubmissionResponse[],
     isDuplicated: boolean = false,
     duplicatedSubmission: SubmissionResponse | null = null,
-    backgroundAudioUrl: string | null = null
   ) {
     const ids = submissions.map((item) => item._id);
 
@@ -1308,7 +1276,6 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
       ids: ids,
       isDuplicated: isDuplicated,
       duplicatedSubmission: duplicatedSubmission,
-      backgroundAudioUrl: backgroundAudioUrl,
       tableInfo: {
         currentPage: this.state.currentPage,
         pageSize: this.state.pageSize,