src/utils/webvtt-parser.ts

import VTTParser from './vttparser';
import { utf8ArrayToStr } from '../demux/id3';
import { toMpegTsClockFromTimescale } from './timescale-conversion';
import type { VTTCCs } from '../types/vtt';

// String.prototype.startsWith is not supported in IE11
const startsWith = function (
  inputString: string,
  searchString: string,
  position: number = 0
) {
  return inputString.substr(position, searchString.length) === searchString;
};

const cueString2millis = function (timeString: string) {
  let ts = parseInt(timeString.substr(-3));
  const secs = parseInt(timeString.substr(-6, 2));
  const mins = parseInt(timeString.substr(-9, 2));
  const hours =
    timeString.length > 9
      ? parseInt(timeString.substr(0, timeString.indexOf(':')))
      : 0;

  if (
    !Number.isFinite(ts) ||
    !Number.isFinite(secs) ||
    !Number.isFinite(mins) ||
    !Number.isFinite(hours)
  ) {
    throw Error(`Malformed X-TIMESTAMP-MAP: Local:${timeString}`);
  }

  ts += 1000 * secs;
  ts += 60 * 1000 * mins;
  ts += 60 * 60 * 1000 * hours;

  return ts;
};

// From https://github.com/darkskyapp/string-hash
const hash = function (text: string) {
  let hash = 5381;
  let i = text.length;
  while (i) {
    hash = (hash * 33) ^ text.charCodeAt(--i);
  }

  return (hash >>> 0).toString();
};

const calculateOffset = function (vttCCs: VTTCCs, cc, presentationTime) {
  let currCC = vttCCs[cc];
  let prevCC = vttCCs[currCC.prevCC];

  // This is the first discontinuity or cues have been processed since the last discontinuity
  // Offset = current discontinuity time
  if (!prevCC || (!prevCC.new && currCC.new)) {
    vttCCs.ccOffset = vttCCs.presentationOffset = currCC.start;
    currCC.new = false;
    return;
  }

  // There have been discontinuities since cues were last parsed.
  // Offset = time elapsed
  while (prevCC?.new) {
    vttCCs.ccOffset += currCC.start - prevCC.start;
    currCC.new = false;
    currCC = prevCC;
    prevCC = vttCCs[currCC.prevCC];
  }

  vttCCs.presentationOffset = presentationTime;
};

// TODO(typescript-vttparser): When VTT parser is typed, errorCallback needs to get the proper typing here.
export function parseWebVTT(
  vttByteArray: ArrayBuffer,
  initPTS: number,
  timescale: number,
  vttCCs: VTTCCs,
  cc: number,
  callBack: (cues: VTTCue[]) => void,
  errorCallBack: (arg0: any) => void
) {
  // Convert byteArray into string, replacing any somewhat exotic linefeeds with "\n", then split on that character.
  const re = /\r\n|\n\r|\n|\r/g;
  // Uint8Array.prototype.reduce is not implemented in IE11
  const vttLines = utf8ArrayToStr(new Uint8Array(vttByteArray))
    .trim()
    .replace(re, '\n')
    .split('\n');

  let syncPTS = toMpegTsClockFromTimescale(initPTS, timescale);
  let cueTime = '00:00.000';
  let mpegTs = 0;
  let localTime = 0;
  let presentationTime = 0;
  const cues: VTTCue[] = [];
  let parsingError;
  let inHeader = true;
  let timestampMap = false;
  // let VTTCue = VTTCue || window.TextTrackCue;

  // Create parser object using VTTCue with TextTrackCue fallback on certain browsers.
  const parser = new VTTParser();

  parser.oncue = function (cue: VTTCue) {
    // Adjust cue timing; clamp cues to start no earlier than - and drop cues that don't end after - 0 on timeline.
    const currCC = vttCCs[cc];
    let cueOffset = vttCCs.ccOffset;

    // Update offsets for new discontinuities
    if (currCC?.new) {
      if (localTime !== undefined) {
        // When local time is provided, offset = discontinuity start time - local time
        cueOffset = vttCCs.ccOffset = currCC.start;
      } else {
        calculateOffset(vttCCs, cc, presentationTime);
      }
    }

    if (presentationTime) {
      // If we have MPEGTS, offset = presentation time + discontinuity offset
      cueOffset = presentationTime - vttCCs.presentationOffset;
    }

    if (timestampMap) {
      cue.startTime += cueOffset - localTime;
      cue.endTime += cueOffset - localTime;
    }

    // If the cue was not assigned an id from the VTT file (line above the content),
    // then create a unique hash id for a cue based on start/end times.
    // This helps timeline-controller to avoid showing repeated captions.
    if (!cue.id) {
      cue.id =
        hash(cue.startTime.toString()) +
        hash(cue.endTime.toString()) +
        hash(cue.text);
    }

    // Fix encoding of special characters
    cue.text = decodeURIComponent(encodeURIComponent(cue.text));
    if (cue.endTime > 0) {
      cues.push(cue);
    }
  };

  parser.onparsingerror = function (e) {
    parsingError = e;
  };

  parser.onflush = function () {
    if (parsingError && errorCallBack) {
      errorCallBack(parsingError);
      return;
    }
    callBack(cues);
  };

  // Go through contents line by line.
  vttLines.forEach((line) => {
    if (inHeader) {
      // Look for X-TIMESTAMP-MAP in header.
      if (startsWith(line, 'X-TIMESTAMP-MAP=')) {
        // Once found, no more are allowed anyway, so stop searching.
        inHeader = false;
        timestampMap = true;
        // Extract LOCAL and MPEGTS.
        line
          .substr(16)
          .split(',')
          .forEach((timestamp) => {
            if (startsWith(timestamp, 'LOCAL:')) {
              cueTime = timestamp.substr(6);
            } else if (startsWith(timestamp, 'MPEGTS:')) {
              mpegTs = parseInt(timestamp.substr(7));
            }
          });
        try {
          // Calculate subtitle offset in milliseconds.
          if (
            Math.abs(syncPTS - (vttCCs[cc].start * 90000 || 0)) > 4294967296
          ) {
            syncPTS += 8589934592;
          }
          // Adjust MPEGTS by sync PTS.
          mpegTs -= syncPTS;
          // Convert cue time to seconds
          localTime = cueString2millis(cueTime) / 1000;
          // Convert MPEGTS to seconds from 90kHz.
          presentationTime = mpegTs / 90000;
        } catch (e) {
          timestampMap = false;
          parsingError = e;
        }
        // Return without parsing X-TIMESTAMP-MAP line.
        return;
      } else if (line === '') {
        inHeader = false;
      }
    }
    // Parse line by default.
    parser.parse(line + '\n');
  });

  parser.flush();
}