Render plain text transcripts

src/components/IIIFPlayer/IIIFPlayer.md

@@ -41,16 +41,16 @@ import './IIIFPlayer.scss';
     <StructuredNavigation />
     <Transcript
       transcripts={[
-        {
-          title: 'Transcript 2',
-          data: transcript_2,
-          url: 'https://dlib.indiana.edu/iiif_av/iiif-player-samples/transcripts/lunchroom_2.json',
-        },
         {
           title: 'Transcript 1',
           data: transcript_1,
           url: 'https://dlib.indiana.edu/iiif_av/iiif-player-samples/transcripts/lunchroom_1.json',
         },
+        {
+          title: 'Transcript in WebVTT',
+          data: null,
+          url: 'https://dlib.indiana.edu/iiif_av/lunchroom_manners/lunchroom_manners.vtt',
+        },
         {
           title: 'Transcript 3 with a really really really long long long name',
           data: transcript_1,

src/components/MediaPlayer/MediaPlayer.js

@@ -65,7 +65,6 @@ const MediaPlayer = () => {
     bigPlayButton: false,
     controls: true,
     fluid: true,
-    muted: true,
     controlBar: {
       // Define and order control bar controls
       // See https://docs.videojs.com/tutorial-components.html for options of what

src/components/Transcript/Transcript.js

@@ -159,9 +159,7 @@ const Transcript = ({ transcripts }) => {
 
   return (
     <div
-      className={`irmp--transcript_nav ${
-        transcriptRef.current ? '' : 'static'
-      }`}
+      className="irmp--transcript_nav"
       data-testid="transcript_nav"
       key={transcriptTitle}
       onMouseOver={() => handleMouseOver(true)}
@@ -175,7 +173,12 @@ const Transcript = ({ transcripts }) => {
           transcriptData={transcripts}
         />
       </div>
-      <div className="transcript_content" ref={transcriptContainerRef}>
+      <div
+        className={`transcript_content ${
+          transcriptRef.current ? '' : 'static'
+        }`}
+        ref={transcriptContainerRef}
+      >
         {transcriptRef.current ? (
           timedText
         ) : (

src/components/Transcript/Transcript.scss

@@ -2,22 +2,26 @@
 
 .irmp--transcript_nav {
   max-height: 30em;
-  overflow-y: auto;
   font-size: 0.85em;
   padding: 10px;
   div.active {
     background-color: $primaryLight;
   }
 
   div.transcript_content {
-    height: 30em;
+    height: 25em;
     overflow-y: auto;
   }
 
+  div.transcript_content.static {
+    overflow-y: unset;
+  }
+
   div.transcript_menu {
     position: sticky;
     top: 0;
   }
+
   iframe.transcript_gdoc-viewer {
     width: 100%;
     width: -moz-available; /* WebKit-based browsers will ignore this. */
@@ -27,10 +31,6 @@
   }
 }
 
-.irmp--transcript_nav.static {
-  overflow-y: visible;
-}
-
 div.irmp--transcript_item {
   display: flex;
   margin: 10px 10px 10px 10px;

src/components/Transcript/TranscriptMenu/TranscriptDownloader.js

@@ -1,38 +1,30 @@
 import React from 'react';
 
+// Handled file types for downloads
+const validFileExtensions = ['doc', 'docx', 'json', 'js', 'srt', 'txt', 'vtt'];
+
 const TranscriptDownloader = ({ fileUrl, fileName }) => {
   const handleDownload = (e) => {
     e.preventDefault();
+    const extension = fileUrl.split('.').reverse()[0];
+    // If unhandled file type use .doc
+    const fileExtension = validFileExtensions.includes(extension)
+      ? extension
+      : 'doc';
     fetch(fileUrl)
       .then((response) => {
-        // console.log(response);
         response.blob().then((blob) => {
-          console.log(blob);
           let url = window.URL.createObjectURL(blob);
           console.log(url);
           let a = document.createElement('a');
           a.href = url;
-          a.download = fileName;
+          a.download = `${fileName}.${fileExtension}`;
           a.click();
         });
       })
       .catch((error) => {
         console.log(error);
       });
-
-    // fetch(fileUrl, { responseType: 'blob' })
-    //   .then((response) => {
-    //     const json = JSON.stringify(response.data);
-    //     const blob = new Blob([response.data], {
-    //       type: 'application/json',
-    //     });
-    //     const link = document.createElement('a');
-    //     link.href = URL.createObjectURL(blob);
-    //     link.download = fileName;
-    //     link.click();
-    //     URL.revokeObjectURL(link.href);
-    //   })
-    //   .catch((error) => console.error(error));
   };
 
   return (

src/services/utility-helpers.js

@@ -21,6 +21,5 @@ export function timeToS(time) {
   let minutesInS = minutes ? parseInt(minutes) * 60 : 0;
   let secondsNum = seconds === '' ? 0.0 : parseFloat(seconds);
   let timeSeconds = hoursInS + minutesInS + secondsNum;
-  // console.log('in: ', time, ' | out: ', timeSeconds);
   return timeSeconds;
 }