FIX: gaps between captions

Author: hosuaby

dist/editor/index.js.map

@@ -19,6 +19,33 @@ export interface Caption {
     words: Word[];
 }
 
+/**
+ * Groups captions with same words into groups.
+ * @param captions captions
+ * @returns groups of captions with same words
+ */
+export function captionGroups(captions: Caption[]): Caption[][] {
+    const groups: Caption[][] = [];
+    let lastCaption: Caption | null = null;
+    let lastGroup: Caption[] = [];
+
+    for (const caption of captions) {
+        if (lastCaption && !haveSameWords(caption, lastCaption!)) {
+            groups.push(lastGroup);
+            lastGroup = [];
+        }
+
+        lastGroup.push(caption);
+        lastCaption = caption;
+    }
+
+    if (lastGroup.length) {
+        groups.push(lastGroup);
+    }
+
+    return groups;
+}
+
 export function haveSameWords(caption1: Caption, caption2: Caption): boolean {
     if (caption1.words.length != caption2.words.length) {
         return false;

dist/player/index.js.map

@@ -1,7 +1,7 @@
 import * as puppeteer from 'puppeteer';
 import * as cliProgress from 'cli-progress';
 import {PNG, PNGWithMetadata} from 'pngjs';
-import {Caption} from '../common/captions';
+import {Caption, captionGroups} from '../common/captions';
 import {StepRenderer} from './step-renderer';
 import {Args} from './cli';
 import {AbstractRecorder} from './abstract-recorder';
@@ -15,6 +15,8 @@ export class StepRecorder extends AbstractRecorder {
     }
 
     public async recordCaptionsVideo(indexHtml: string) {
+        const groups = captionGroups(this.captions);
+
         this.progressBar.start(this.captions.length, 0);
 
         try {
@@ -26,23 +28,27 @@ export class StepRecorder extends AbstractRecorder {
             const beginningTime = this.captions[0].startTimeMs;
             this.renderer.addEmptyFrame(beginningTime);
 
-            for (let i = 0; i < this.captions.length; i++) {
-                const caption = this.captions[i];
+            for (let i = 0; i < groups.length; i++) {
+                const captionGroup = StepRecorder.adjustCaptionsDuration(groups[i]);
 
-                await this.nextStep();
+                for (const caption of captionGroup) {
+                    await this.nextStep();
+                    const screenShot = await this.takeScreenShot(videoElem!);
+                    this.renderer.addFrame(caption, screenShot);
+                    this.progressBar.increment();
+                }
 
-                const screenShot = await this.takeScreenShot(videoElem!);
-                this.renderer.addFrame(caption, screenShot);
+                // Add delay before the next caption group
+                if (i < groups.length - 1) {
+                    const nextCaptionGroup = groups[i + 1];
+                    const lastCaption = captionGroup[captionGroup.length - 1];
+                    const nextCaption = nextCaptionGroup[0];
 
-                // Add delay before the next frame
-                if (i < this.captions.length - 1) {
-                    const idleDelay = this.captions[i + 1].startTimeMs - caption.endTimeMs;
+                    const idleDelay = nextCaption.startTimeMs - lastCaption.endTimeMs;
                     if (idleDelay) {
                         this.renderer.addEmptyFrame(idleDelay);
                     }
                 }
-
-                this.progressBar.increment();
             }
 
             this.progressBar.stop();
@@ -67,4 +73,23 @@ export class StepRecorder extends AbstractRecorder {
         });
         return PNG.sync.read(Buffer.from(screenshotBuffer));
     }
+
+    private static adjustCaptionsDuration(captionGroup: Caption[]): Caption[] {
+        if (captionGroup.length < 2) {
+            return captionGroup;
+        }
+
+        const adjustedGroup: Caption[] = [];
+
+        for (let i = 0; i < captionGroup.length - 1; i++) {
+            const caption = Object.assign({}, captionGroup[i]);
+            const nextCaption = captionGroup[i + 1];
+            caption.endTimeMs = nextCaption.startTimeMs;
+            adjustedGroup.push(caption);
+        }
+
+        adjustedGroup.push(captionGroup[captionGroup.length - 1]);
+
+        return adjustedGroup;
+    }
 }

dist/script/index.js

@@ -1,5 +1,8 @@
 import {expect} from 'chai';
-import {Caption, haveSameWords, readWords, splitText} from '../../src/common/captions';
+import {Caption, captionGroups, haveSameWords, readCaptions, readWords, splitText} from '../../src/common/captions';
+import {readFileSync} from 'fs';
+
+const exampleSrt = readFileSync('test/resources/example.srt', 'utf-8');
 
 it('haveSameWords', () => {
     // Given
@@ -208,3 +211,18 @@ describe('readCaptions', () => {
         ]);
     });
 });
+
+it('captionGroups', () => {
+    // Given
+    const captions = readCaptions(exampleSrt);
+
+    // When
+    const groups = captionGroups(captions);
+
+    // Then
+    console.dir(groups[0], {depth:null});
+    console.dir(groups[1], {depth:null});
+
+    expect(groups[0]).to.have.lengthOf(1);
+    expect(groups[1]).to.have.lengthOf(4);
+});