Add SRT support in Transcript component

public/manifests/dev/lunchroom_manners.json

@@ -410,6 +410,22 @@
                 }
               },
               "target": "http://localhost:3003/dev/lunchroom_manners/canvas/1"
+            },
+            {
+              "id": "http://localhost:3003/dev/lunchroom_manners/canvas/1/annotation/srt",
+              "type": "Annotation",
+              "motivation": "supplementing",
+              "body": {
+                "id": "http://localhost:3003/lunchroom_manners/lunchroom_manners.srt",
+                "type": "Text",
+                "format": "application/x-subrip",
+                "label": {
+                  "en": [
+                    "SRT Transcript (machine-generated)"
+                  ]
+                }
+              },
+              "target": "http://localhost:3003/dev/lunchroom_manners/canvas/1"
             }
           ]
         }

public/manifests/dev/playlist-manifest.json

@@ -287,7 +287,7 @@
               "body": {
                 "id": "http://localhost:3003/volleyball-for-boys/volleyball.txt",
                 "type": "Text",
-                "format": "plain/txt",
+                "format": "text/plain",
                 "label": {
                   "en": [
                     "External Text Transcript (machine-generated)"
@@ -356,4 +356,4 @@
       ]
     }
   ]
-}
+}

public/manifests/dev/volleyball-for-boys.json

@@ -48,7 +48,7 @@
               "body": {
                 "id": "http://localhost:6060/volleyball-for-boys/volleyball.txt",
                 "type": "Text",
-                "format": "plain/txt",
+                "format": "text/plain",
                 "label": {
                   "en": [
                     "External Text Transcript (machine-generated)"
@@ -62,4 +62,4 @@
       ]
     }
   ]
-}
+}

public/manifests/prod/lunchroom_manners.json

@@ -282,6 +282,22 @@
                 }
               },
               "target": "https://iiif-react-media-player.netlify.app/prod/lunchroom_manners/canvas/1"
+            },
+            {
+              "id": "https://iiif-react-media-player.netlify.app/prod/lunchroom_manners/canvas/1/annotation/srt",
+              "type": "Annotation",
+              "motivation": "supplementing",
+              "body": {
+                "id": "https://iiif-react-media-player.netlify.app/lunchroom_manners/lunchroom_manners.srt",
+                "type": "Text",
+                "format": "application/x-subrip",
+                "label": {
+                  "en": [
+                    "SRT Transcript (machine-generated)"
+                  ]
+                }
+              },
+              "target": "https://iiif-react-media-player.netlify.app/prod/lunchroom_manners/canvas/1"
             }
           ]
         }

src/components/Transcript/Transcript.js

@@ -4,7 +4,7 @@ import 'lodash';
 import TanscriptSelector from './TranscriptMenu/TranscriptSelector';
 import { autoScroll, checkSrcRange, getMediaFragment, timeToHHmmss } from '@Services/utility-helpers';
 import {
-  getSupplementingAnnotations,
+  readSupplementingAnnotations,
   parseTranscriptData,
   sanitizeTranscripts,
   TRANSCRIPT_TYPES,
@@ -143,7 +143,7 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
       allTranscripts = await sanitizeTranscripts(transcripts);
     } else if (manifestUrl) {
       // Read supplementing annotations from the given manifest
-      allTranscripts = await getSupplementingAnnotations(manifestUrl);
+      allTranscripts = await readSupplementingAnnotations(manifestUrl);
     }
     setTranscriptsList(allTranscripts);
     initTranscriptData(allTranscripts);
@@ -206,7 +206,7 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
     // set isEmpty flag to render transcripts UI
     setIsEmpty(false);
 
-    const { id, title, filename, url, isMachineGen } = transcript;
+    const { id, title, filename, url, isMachineGen, format } = transcript;
 
     // Check cached transcript data
     const cached = cachedTranscripts.filter(
@@ -220,7 +220,7 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
     } else {
       // Parse new transcript data from the given sources
       await Promise.resolve(
-        parseTranscriptData(url, canvasIndexRef.current)
+        parseTranscriptData(url, canvasIndexRef.current, format)
       ).then(function (value) {
         if (value != null) {
           const { tData, tUrl, tType, tFileExt } = value;

src/components/Transcript/Transcript.md

@@ -17,6 +17,7 @@ Transcript component displays any available transcript data in a given IIIF mani
      - Word document (.docx)
      - Plain text file
      - WebVTT
+     - SRT
 
     `transcripts` prop has a default value of an empty array.
 
@@ -68,6 +69,11 @@ import config from '../../../env.js';
           title: 'Invalid transcript',
           url: `${config.url}/manifests/${config.env}/invalid-annotation.json`, // URL of the manifest
         },
+        {
+          // SRT file
+          title: 'SRT Transcript',
+          url: `${config.url}/lunchroom_manners/lunchroom_manners.srt`,
+        },
       ],
     },
   ]}

src/components/Transcript/Transcript.test.js

@@ -551,8 +551,8 @@ describe('Transcript component', () => {
           ]
         }
       ];
-      const getSupplementingAnnotationsMock = jest
-        .spyOn(transcriptParser, 'getSupplementingAnnotations')
+      const readSupplementingAnnotationsMock = jest
+        .spyOn(transcriptParser, 'readSupplementingAnnotations')
         .mockReturnValue(transcriptsList);
 
       const parseTranscriptMock = jest
@@ -573,7 +573,7 @@ describe('Transcript component', () => {
       await act(() => Promise.resolve());
 
       await waitFor(() => {
-        expect(getSupplementingAnnotationsMock).toHaveBeenCalledTimes(1);
+        expect(readSupplementingAnnotationsMock).toHaveBeenCalledTimes(1);
         expect(parseTranscriptMock).toHaveBeenCalledTimes(1);
         expect(screen.queryByTestId('transcript-selector')).toBeInTheDocument();
         expect(screen.queryByTestId('transcript_content_1')).toBeInTheDocument();
@@ -593,8 +593,8 @@ describe('Transcript component', () => {
         manifestUrl: 'http://example.com/manifest.json'
       };
 
-      const getSupplementingAnnotationsMock = jest
-        .spyOn(transcriptParser, 'getSupplementingAnnotations')
+      const readSupplementingAnnotationsMock = jest
+        .spyOn(transcriptParser, 'readSupplementingAnnotations')
         .mockReturnValue([]);
 
       const parseTranscriptMock = jest
@@ -610,7 +610,7 @@ describe('Transcript component', () => {
       await act(() => Promise.resolve());
 
       await waitFor(() => {
-        expect(getSupplementingAnnotationsMock).toHaveBeenCalledTimes(1);
+        expect(readSupplementingAnnotationsMock).toHaveBeenCalledTimes(1);
         expect(parseTranscriptMock).not.toHaveBeenCalled();
         expect(screen.queryByTestId('transcript-selector')).not.toBeInTheDocument();
         expect(screen.queryByTestId('transcript_content_0')).toBeInTheDocument();
@@ -631,8 +631,8 @@ describe('Transcript component', () => {
         }],
       };
 
-      const getSupplementingAnnotationsMock = jest
-        .spyOn(transcriptParser, 'getSupplementingAnnotations');
+      const readSupplementingAnnotationsMock = jest
+        .spyOn(transcriptParser, 'readSupplementingAnnotations');
 
       render(
         <React.Fragment>
@@ -643,7 +643,7 @@ describe('Transcript component', () => {
       await act(() => Promise.resolve());
 
       await waitFor(() => {
-        expect(getSupplementingAnnotationsMock).not.toHaveBeenCalled();
+        expect(readSupplementingAnnotationsMock).not.toHaveBeenCalled();
         expect(screen.queryByTestId('transcript-selector')).not.toBeInTheDocument();
         expect(screen.queryByTestId('transcript_content_0')).toBeInTheDocument();
         expect(screen.queryByTestId('no-transcript')).toBeInTheDocument();