{
  // на пятой секунде 2 реплики
  5: [1, 2]
  // на седьмой секунде 3 короткие реплики
  7: [3, 4, 5]
}

// Объект реплики: порядковый номер, время начала отображения (в миллисекундах), время конца отображения, текст
class Cue {
  public readonly index: number;
  public readonly startTime: number;
  public readonly endTime: number;
  public readonly text: string;
  constructor(index: number, startTime: number, endTime: number, text: string) {
    this.index = index;
    this.startTime = startTime;
    this.endTime = endTime;
    this.text = text;
  }
}
interface CueIndex {
  // Ключ индекса это целая секунда (без миллисекунд) и массив порядковых номеров реплик,
  // которые начинают или заканчиваются в течение этой секунды
  [key: number]: number[];
}
class SubtitlesTrack {
  private readonly cues: Cue[];
  private index: CueIndex = {};
  constructor(cues: Cue[]) {
    this.cues = cues;
    // На входе у нас просто массив реплик, нужно проиндексировать
    this.indexCues();
  }
  private indexCues() {
    this.cues.forEach((cue: Cue) => {
      // Переводим время начала и конца реплики из миллисекунд в секунды и берём только целую часть
      const startSecond = Math.floor(cue.startTime / 1000);
      const endSecond = Math.floor(cue.endTime / 1000);
      // Добавляем реплику (её порядковый номер) в индекс
      this.addToIndex(startSecond, cue);
      // Бывает, что реплика началась в одной секунде, и отображается до следующей или даже держится несколько секунд
      // Такую реплику следуют добавить также в индекс секунды окончания
      if (endSecond !== startSecond) {
        this.addToIndex(endSecond, cue);
      }
    });
  }
  private addToIndex(secondNumber: number, cue: Cue): void {
    // Если это первая реплика в данной секунде, инициализируем ключ индекса пустым массивом
    if (!this.index[secondNumber]) {
      this.index[secondNumber] = [];
    }
    // Затем в массив реплик добавим порядковый номер новой реплики
    this.index[secondNumber].push(cue.index);
  }
  // Метод поиска реплики
  public findCueForTime(timeInSeconds: number): Cue|null {
    // Событие плеера timeupdate присылает время сразу в секундах
    // Поэтому сразу берём целую часть
    const flooredTime = Math.floor(timeInSeconds);
    // Выбираем проиндексированные реплики для этой секунды
    const cues = this.index[flooredTime];
    let currentCue = null;
    // Если на данной секунде есть реплики
    if (cues) {
      // Проходимся по каждой
      for (let index of cues) {
        const cue = this.cues[index];
        // И смотрим, совпадает ли интервал времени начала и конца реплики с текущем временем в плеере
        if (this.isCueInTime(timeInSeconds, cue)) {
          // Если да, то устанавливаем значение текущей реплики и останавливаем цикл
          currentCue = cue;
          break;
        }
      }
    }
    // Вернём текущую реплику или null, если для данного времени реплики нет
    return currentCue;
  }
  public isCueInTime(timeInSeconds: number, cue: Cue): boolean {
    const timeInMilliseconds: number = timeInSeconds * 1000;
    return timeInMilliseconds >= cue.startTime && timeInMilliseconds <= cue.endTime;
  }
}

import Tokenizer from 'sentence-tokenizer';
function formatCue(text: string): string {
  const brMark: string = '[br]';
  const tokenizer = new Tokenizer();
  // Заменяем переносы строк на псевдотэг для удобной работы с переносами в дальнейшем
  text = text
    .replace(/\r\n/g, ` ${brMark}`)
    .replace(/\r/g, ` ${brMark}`)
    .replace(/\n/g, ` ${brMark}`);
  // Устанавливаем text как сущность для обработки
  tokenizer.setEntry(text);
  // Разбиваем текст на предложения
  const sentenceTokens: string[] = tokenizer.getSentences();
  // Проходимся по предложениям
  const sentencesHtml: string[] = sentenceTokens.map((sentenceToken: string, index: number) => {
    // Разбиваем предложение по словам
    const wordTokens: string[] = tokenizer.getTokens(index);
    // Идём по каждому слову
    const wordsHtml: string[] = wordTokens.map((wordToken: string) => {
      let brTag: string = '';
      // Если после слова есть псевдотэг переноса, удаляем его и устанавливаем html тэг переноса строки
      if (wordToken.includes(brMark)) {
        wordToken = wordToken.replace(brMark, '');
        brTag = '<br/>';
      }
      // Оборачиваем слово в span с классом word и добавляем тэг br, если надо
      return `${brTag}<span class="word">${wordToken}</span>`;
    });
    // Склеиваем слова обратно, в строку, оборачиваем предложение в в span с классом sentence
    return `<span class="sentence">${wordsHtml.join(' ')}</span>`;
  });
  // Склеиваем предложение обратно в строку
  const html: string = sentencesHtml.join(' ');
  return html;
}