Merge pull request #755 from samvera-labs/vtt-linebreaks

Display line breaks within a cue for WebVTT and SRT transcripts
samvera-labs · Dec 17, 2024 · ac213fb · ac213fb
2 parents 0207a97 + 74d597a
commit ac213fb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/src/services/transcript-parser.js b/src/services/transcript-parser.js
@@ -713,10 +713,15 @@ function groupTimedTextLines(lines) {
       t.line = isNote ? line.replace(/^NOTE\s*/, 'NOTE ') : '';
       i++;
 
+      // Counter to keep track of lines within a cue
+      let cueLineCount = 0;
       // Increment until an empty line is encountered marking the end of the block
       while (i < lines.length
         && !(lines[i] == '\r' || lines[i] == '\n' || lines[i] == '\r\n' || lines[i] == '')) {
+        // Add a line break only between lines within a cue, omit start and end of cue
+        if (cueLineCount > 0) t.line += '<br>';
         t.line += lines[i].endsWith('-') ? lines[i] : lines[i].replace(/\s*$/, ' ');
+        cueLineCount++;
         i++;
       }
       t.line = t.line.trimEnd();

diff --git a/src/services/transcript-parser.test.js b/src/services/transcript-parser.test.js
@@ -399,7 +399,7 @@ describe('transcript-parser', () => {
         {
           end: 26.6,
           begin: 22.2,
-          text: 'Just before lunch one day, a puppet show was put on at school.',
+          text: 'Just before lunch one day, a puppet show <br>was put on at school.',
           tag: 'TIMED_CUE'
         },
         {
@@ -417,7 +417,7 @@ describe('transcript-parser', () => {
         {
           end: 41.3,
           begin: 36.1,
-          text: "In the puppet show, Mr. Bungle came to the boys' room on his way to lunch.",
+          text: "In the puppet show, Mr. Bungle came to the <br>boys' room on his way to lunch.",
           tag: 'TIMED_CUE'
         },
       ];
@@ -449,7 +449,7 @@ describe('transcript-parser', () => {
           {
             end: 26.6,
             begin: 22.2,
-            text: 'Just before lunch one day, a puppet show was put on at school.',
+            text: 'Just before lunch one day, a puppet show <br>was put on at school.',
             tag: 'TIMED_CUE'
           },
           {
@@ -467,7 +467,7 @@ describe('transcript-parser', () => {
           {
             end: 41.3,
             begin: 36.1,
-            text: "In the puppet show, Mr. Bungle came to the boys' room on his way to lunch.",
+            text: "In the puppet show, Mr. Bungle came to the <br>boys' room on his way to lunch.",
             tag: 'TIMED_CUE'
           },
         ];
@@ -498,7 +498,7 @@ describe('transcript-parser', () => {
           {
             end: 26.6,
             begin: 22.2,
-            text: 'Just before lunch one day, a puppet show was put on at school.',
+            text: 'Just before lunch one day, a puppet show <br>was put on at school.',
             tag: 'TIMED_CUE'
           },
           {
@@ -516,7 +516,7 @@ describe('transcript-parser', () => {
           {
             end: 41.3,
             begin: 36.1,
-            text: "In the puppet show, Mr. Bungle came to the boys' room on his way to lunch.",
+            text: "In the puppet show, Mr. Bungle came to the <br>boys' room on his way to lunch.",
             tag: 'TIMED_CUE'
           },
         ];
@@ -775,7 +775,7 @@ describe('transcript-parser', () => {
             tag: 'TIMED_CUE'
           });
           expect(tData[4]).toEqual({
-            text: "In the puppet show, Mr. Bungle came to the boys' room on his way to lunch.",
+            text: "In the puppet show, Mr. Bungle came to the <br>boys' room on his way to lunch.",
             begin: 36.1,
             end: 41.3,
             tag: 'TIMED_CUE'
@@ -798,7 +798,7 @@ describe('transcript-parser', () => {
             tag: 'TIMED_CUE'
           });
           expect(tData[4]).toEqual({
-            text: "In the puppet show, Mr. Bungle came to the boys' room on his way to lunch.",
+            text: "In the puppet show, Mr. Bungle came to the <br>boys' room on his way to lunch.",
             begin: 36.1,
             end: 41.3,
             tag: 'TIMED_CUE'
@@ -821,7 +821,7 @@ describe('transcript-parser', () => {
             tag: 'TIMED_CUE'
           });
           expect(tData[4]).toEqual({
-            text: "In the puppet show, Mr. Bungle came to the boys' room on his way to lunch.",
+            text: "In the puppet show, Mr. Bungle came to the <br>boys' room on his way to lunch.",
             begin: 36.1,
             end: 41.3,
             tag: 'TIMED_CUE'
@@ -858,7 +858,7 @@ describe('transcript-parser', () => {
           tag: 'NOTE',
           begin: 0,
           end: 0,
-          text: 'NOTE This is a multi-line comment'
+          text: 'NOTE This is a multi-<br>line comment'
         });
         expect(tType).toEqual(transcriptParser.TRANSCRIPT_TYPES.timedText);
       });
@@ -872,13 +872,13 @@ describe('transcript-parser', () => {
 
         expect(tData).toHaveLength(5);
         expect(tData[1]).toEqual({
-          text: 'NOTE: Just before lunch one day, a puppet show was put on at school.',
+          text: 'NOTE: Just before lunch one day, a puppet show <br>was put on at school.',
           begin: 22.2,
           end: 26.6,
           tag: 'TIMED_CUE'
         });
         expect(tData[4]).toEqual({
-          text: 'In the puppet show, Mr. Bungle had a note to go to the boys\' room on his way to lunch.',
+          text: 'In the puppet show, Mr. Bungle had a <br>note to go to the boys\' room on his way to lunch.',
           begin: 36.1,
           end: 41.3,
           tag: 'TIMED_CUE'