230 transcription UI

src/Components/Workspace/Transcripts/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withAuthorization } from '../../Session';
 import TranscriptRow from '@bbc/digital-paper-edit-storybook/TranscriptRow';
 import { formatDates } from '../../../Util/time';
+import './index.scss';
 
 const Transcripts = (props) => {
   const items = props.items;
@@ -23,7 +24,7 @@ const Transcripts = (props) => {
         created={ created ? created : 'NA' }
         updated={ updated ? updated : 'NA' }
         message={ item.message }
-        mediaDuration={ item.mediaDuration }
+        mediaDuration={ item.duration ? item.duration : null }
         transcriptionDuration={ item.transcriptionDuration }
         status={ item.status }
         progress={ progress }

src/Components/Workspace/index.js

@@ -283,6 +283,56 @@ const WorkspaceView = props => {
 
   // general
 
+  const formatDuration = async (duration) => {
+    const seconds = Number(duration);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+
+    const mDisplay = m > 0 ? m + (m === 1 ? ' min ' : ' mins ') : '';
+    const sDisplay = s > 0 ? s + (s === 1 ? ' s' : ' s') : '';
+
+    return mDisplay + sDisplay;
+  };
+
+  const finishCreateOrUpdateTranscript = async (transcript, duration, video) => {
+    video.remove();
+    const file = transcript.file;
+    delete transcript.file;
+
+    const newTranscript = await createOrUpdateCollectionItem({
+      ...transcript,
+      title: transcript.title,
+      projectId: id,
+      description: transcript.description ? transcript.description : '',
+      status: 'uploading',
+      duration: duration,
+    }, createTranscript, updateTranscript);
+
+    asyncUploadFile(newTranscript.id, file);
+
+    newTranscript.display = true;
+
+    return newTranscript;
+
+  };
+
+  const createOrUpdateWithDuration = async (newTranscript) => {
+    const file = newTranscript.file;
+    const video = document.createElement('video');
+    video.setAttribute('id', 'preload');
+    video.preload = 'metadata';
+
+    video.onloadedmetadata = async () => {
+      window.URL.revokeObjectURL(video.src);
+      const duration = video.duration;
+      const formattedDuration = await formatDuration(duration);
+
+      return await finishCreateOrUpdateTranscript(newTranscript, formattedDuration, video);
+    };
+
+    video.src = URL.createObjectURL(file);
+  };
+
   const createOrUpdatePaperEdit = async (item) => {
     const newPaperEdit = { ...item, projectId: id };
     delete newPaperEdit.display;
@@ -294,31 +344,20 @@ const WorkspaceView = props => {
   };
 
   const createOrUpdateTranscript = async (item) => {
+    console.log('trying to create a transcript...', item);
     let newTranscript = { ...item, projectId: id };
     delete newTranscript.display;
 
     if (newTranscript.id) {
       newTranscript = await createOrUpdateCollectionItem(newTranscript, createTranscript,
         updateTranscript);
+      newTranscript.display = true;
+
+      return newTranscript;
 
     } else {
-      const file = newTranscript.file;
-      delete newTranscript.file;
-
-      newTranscript = await createOrUpdateCollectionItem({
-        ...newTranscript,
-        title: newTranscript.title,
-        projectId: id,
-        description: newTranscript.description ? newTranscript.description : '',
-        status: 'uploading',
-      }, createTranscript, updateTranscript);
-
-      asyncUploadFile(newTranscript.id, file);
+      return await createOrUpdateWithDuration(newTranscript);
     }
-
-    newTranscript.display = true;
-
-    return newTranscript;
   };
 
   const handleSavePaperEditForm = (item) => {