@kkcompany/player 2.25.0-canary.24 → 2.25.0-canary.26

package/dist/core.mjs

@@ -1,3075 +0,0 @@
-import UAParser from 'ua-parser-js';
-
-/* eslint-disable no-plusplus */
-new UAParser();
-
-const isSafari = () => /^((?!chrome|android|X11|Linux).)*(safari|iPad|iPhone|Version)/i.test(navigator.userAgent);
-// navigator.maxTouchPoints() is not supported in Safari 11, iOS Safari 11.0-11.2  compat/compat
-
-
-const isIOS = () => /iPad|iPhone|iPod/.test(navigator.platform) || navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
-
-const on = (target, name, handler, ...rest) => {
-  target.addEventListener(name, handler, ...rest);
-  return () => target.removeEventListener(name, handler, ...rest);
-};
-
-const once = (target, name, handler) => {
-  const oneTime = (...args) => {
-    handler(...args);
-    target.removeEventListener(name, oneTime);
-  };
-
-  target.addEventListener(name, oneTime);
-  return () => target.removeEventListener(name, oneTime);
-};
-
-const waitFor = (check, handler) => {
-  const checkInterval = setInterval(() => {
-    if (check()) {
-      clearInterval(checkInterval);
-      handler();
-    }
-  }, 50);
-  return () => clearInterval(checkInterval);
-};
-
-function getVersion() {
-  try {
-    // eslint-disable-next-line no-undef
-    return "2.25.0-canary.24";
-  } catch (e) {
-    return undefined;
-  }
-}
-
-const printVersion = () => {
-  console.log([`%KKCompany Web Player SDK\n-----------\nVersion: ${getVersion()}`, `We are hiring, and looking for geeks like you! please join us at https://www.kkcompany.com/zh-tw/career/`].join('\n'), 'color: #0E78F4');
-};
-
-/* eslint-disable no-param-reassign */
-const loadNative = ({
-  videoElement
-}) => ({
-  load: ({
-    native: url
-  }) => {
-    videoElement.src = url;
-    videoElement.style.height = '100%';
-    videoElement.style.width = '100%';
-  },
-  play: () => videoElement.play(),
-  pause: () => videoElement.pause(),
-  seek: time => {
-    videoElement.currentTime = time;
-  },
-  getVideoElement: () => videoElement,
-  getVideoQuality: () => ({}),
-  destroy: () => {}
-});
-
-/*
-  We overwrite standard function for getting mediaSource object
-  because Chrome supports VideoTrack only in experiment mode.
-*/
-const getUrlObject = fn => {
-  const createObjectURL = window.URL.createObjectURL.bind();
-
-  window.URL.createObjectURL = blob => {
-    if (blob.addSourceBuffer) {
-      fn(blob);
-    }
-
-    return createObjectURL(blob);
-  };
-};
-
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-let shaka$1;
-const shakaLog$1 = {
-  v1: () => {}
-};
-
-const asMap = object => {
-  const map = new Map();
-
-  for (const key of Object.keys(object)) {
-    map.set(key, object[key]);
-  }
-
-  return map;
-};
-
-const makeResponse = (headers, data, status, uri, responseURL, requestType) => {
-  if (status >= 200 && status <= 299 && status != 202) {
-    // Most 2xx HTTP codes are success cases.
-
-    /** @type {shaka.extern.Response} */
-    const response = {
-      uri: responseURL || uri,
-      originalUri: uri,
-      data,
-      status,
-      headers,
-      fromCache: !!headers['x-shaka-from-cache']
-    };
-    return response;
-  }
-
-  let responseText = null;
-
-  try {
-    responseText = shaka$1.util.StringUtils.fromBytesAutoDetect(data); // eslint-disable-next-line no-empty
-  } catch (exception) {}
-
-  const severity = status == 401 || status == 403 ? shaka$1.util.Error.Severity.CRITICAL : shaka$1.util.Error.Severity.RECOVERABLE;
-  throw new shaka$1.util.Error(severity, shaka$1.util.Error.Category.NETWORK, shaka$1.util.Error.Code.BAD_HTTP_STATUS, uri, status, responseText, headers, requestType);
-};
-
-const goog$2 = {
-  asserts: {
-    assert: () => {}
-  }
-};
-/**
- * @summary A networking plugin to handle http and https URIs via the Fetch API.
- * @export
- */
-
-class HttpFetchPlugin {
-  /**
-   * @param {string} uri
-   * @param {shaka.extern.Request} request
-   * @param {shaka.net.NetworkingEngine.RequestType} requestType
-   * @param {shaka.extern.ProgressUpdated} progressUpdated Called when a
-   *   progress event happened.
-   * @param {shaka.extern.HeadersReceived} headersReceived Called when the
-   *   headers for the download are received, but before the body is.
-   * @return {!shaka.extern.IAbortableOperation.<shaka.extern.Response>}
-   * @export
-   */
-  static parse(uri, request, requestType, progressUpdated, headersReceived) {
-    const headers = new HttpFetchPlugin.Headers_();
-    asMap(request.headers).forEach((value, key) => {
-      headers.append(key, value);
-    });
-    const controller = new HttpFetchPlugin.AbortController_();
-    /** @type {!RequestInit} */
-
-    const init = {
-      // Edge does not treat null as undefined for body; https://bit.ly/2luyE6x
-      body: request.body || undefined,
-      headers,
-      method: request.method,
-      signal: controller.signal,
-      credentials: request.allowCrossSiteCredentials ? 'include' : undefined
-    };
-    /** @type {shaka.net.HttpFetchPlugin.AbortStatus} */
-
-    const abortStatus = {
-      canceled: false,
-      timedOut: false
-    };
-    const pendingRequest = HttpFetchPlugin.request_(uri, requestType, init, abortStatus, progressUpdated, headersReceived, request.streamDataCallback);
-    /** @type {!shaka.util.AbortableOperation} */
-
-    const op = new shaka$1.util.AbortableOperation(pendingRequest, () => {
-      abortStatus.canceled = true;
-      controller.abort();
-      return Promise.resolve();
-    }); // The fetch API does not timeout natively, so do a timeout manually using
-    // the AbortController.
-
-    const timeoutMs = request.retryParameters.timeout;
-
-    if (timeoutMs) {
-      const timer = new shaka$1.util.Timer(() => {
-        abortStatus.timedOut = true;
-        controller.abort();
-      });
-      timer.tickAfter(timeoutMs / 1000); // To avoid calling |abort| on the network request after it finished, we
-      // will stop the timer when the requests resolves/rejects.
-
-      op.finally(() => {
-        timer.stop();
-      });
-    }
-
-    return op;
-  }
-  /**
-   * @param {string} uri
-   * @param {shaka.net.NetworkingEngine.RequestType} requestType
-   * @param {!RequestInit} init
-   * @param {shaka.net.HttpFetchPlugin.AbortStatus} abortStatus
-   * @param {shaka.extern.ProgressUpdated} progressUpdated
-   * @param {shaka.extern.HeadersReceived} headersReceived
-   * @param {?function(BufferSource):!Promise} streamDataCallback
-   * @return {!Promise<!shaka.extern.Response>}
-   * @private
-   */
-
-
-  static async request_(uri, requestType, init, abortStatus, progressUpdated, headersReceived, streamDataCallback) {
-    const fetch = HttpFetchPlugin.fetch_;
-    const ReadableStream = HttpFetchPlugin.ReadableStream_;
-    let response;
-    let arrayBuffer;
-    let loaded = 0;
-    let lastLoaded = 0; // Last time stamp when we got a progress event.
-
-    let lastTime = Date.now();
-
-    try {
-      // The promise returned by fetch resolves as soon as the HTTP response
-      // headers are available. The download itself isn't done until the promise
-      // for retrieving the data (arrayBuffer, blob, etc) has resolved.
-      response = await fetch(uri, init); // At this point in the process, we have the headers of the response, but
-      // not the body yet.
-
-      headersReceived(HttpFetchPlugin.headersToGenericObject_(response.headers)); // Getting the reader in this way allows us to observe the process of
-      // downloading the body, instead of just waiting for an opaque promise to
-      // resolve.
-      // We first clone the response because calling getReader locks the body
-      // stream; if we didn't clone it here, we would be unable to get the
-      // response's arrayBuffer later.
-
-      const reader = response.clone().body.getReader();
-      const contentLengthRaw = response.headers.get('Content-Length');
-      const contentLength = contentLengthRaw ? parseInt(contentLengthRaw, 10) : 0;
-
-      const start = controller => {
-        const push = async () => {
-          let readObj;
-
-          try {
-            readObj = await reader.read();
-          } catch (e) {
-            // If we abort the request, we'll get an error here.  Just ignore it
-            // since real errors will be reported when we read the buffer below.
-            shakaLog$1.v1('error reading from stream', e.message);
-            return;
-          }
-
-          if (!readObj.done) {
-            loaded += readObj.value.byteLength; // streamDataCallback adds stream data to buffer for low latency mode
-            // 4xx response means a segment is not ready and can retry soon
-            // only successful response data should be added, or playback freezes
-
-            if (response.status === 200 && streamDataCallback) {
-              await streamDataCallback(readObj.value);
-            }
-          }
-
-          const currentTime = Date.now(); // If the time between last time and this time we got progress event
-          // is long enough, or if a whole segment is downloaded, call
-          // progressUpdated().
-
-          if (currentTime - lastTime > 100 || readObj.done) {
-            progressUpdated(currentTime - lastTime, loaded - lastLoaded, contentLength - loaded);
-            lastLoaded = loaded;
-            lastTime = currentTime;
-          }
-
-          if (readObj.done) {
-            goog$2.asserts.assert(!readObj.value, 'readObj should be unset when "done" is true.');
-            controller.close();
-          } else {
-            controller.enqueue(readObj.value);
-            push();
-          }
-        };
-
-        push();
-      }; // Create a ReadableStream to use the reader. We don't need to use the
-      // actual stream for anything, though, as we are using the response's
-      // arrayBuffer method to get the body, so we don't store the
-      // ReadableStream.
-
-
-      new ReadableStream({
-        start
-      }); // eslint-disable-line no-new
-
-      arrayBuffer = await response.arrayBuffer();
-    } catch (error) {
-      if (abortStatus.canceled) {
-        throw new shaka$1.util.Error(shaka$1.util.Error.Severity.RECOVERABLE, shaka$1.util.Error.Category.NETWORK, shaka$1.util.Error.Code.OPERATION_ABORTED, uri, requestType);
-      } else if (abortStatus.timedOut) {
-        throw new shaka$1.util.Error(shaka$1.util.Error.Severity.RECOVERABLE, shaka$1.util.Error.Category.NETWORK, shaka$1.util.Error.Code.TIMEOUT, uri, requestType);
-      } else {
-        throw new shaka$1.util.Error(shaka$1.util.Error.Severity.RECOVERABLE, shaka$1.util.Error.Category.NETWORK, shaka$1.util.Error.Code.HTTP_ERROR, uri, error, requestType);
-      }
-    }
-
-    const headers = HttpFetchPlugin.headersToGenericObject_(response.headers);
-    return makeResponse(headers, arrayBuffer, response.status, uri, response.url, requestType);
-  }
-  /**
-   * @param {!Headers} headers
-   * @return {!Object.<string, string>}
-   * @private
-   */
-
-
-  static headersToGenericObject_(headers) {
-    const headersObj = {};
-    headers.forEach((value, key) => {
-      // Since Edge incorrectly return the header with a leading new line
-      // character ('\n'), we trim the header here.
-      headersObj[key.trim()] = value;
-    });
-    return headersObj;
-  }
-
-}
-
-HttpFetchPlugin.register = shakaNamespace => {
-  shaka$1 = shakaNamespace;
-  /**
-   * Overridden in unit tests, but compiled out in production.
-   *
-   * @const {function(string, !RequestInit)}
-   * @private
-   */
-
-  HttpFetchPlugin.fetch_ = window.fetch;
-  /**
-   * Overridden in unit tests, but compiled out in production.
-   *
-   * @const {function(new: AbortController)}
-   * @private
-   */
-
-  HttpFetchPlugin.AbortController_ = window.AbortController;
-  /**
-   * Overridden in unit tests, but compiled out in production.
-   *
-   * @const {function(new: ReadableStream, !Object)}
-   * @private
-   */
-
-  HttpFetchPlugin.ReadableStream_ = window.ReadableStream;
-  /**
-   * Overridden in unit tests, but compiled out in production.
-   *
-   * @const {function(new: Headers)}
-   * @private
-   */
-
-  HttpFetchPlugin.Headers_ = window.Headers;
-  shaka$1.net.NetworkingEngine.registerScheme('http', HttpFetchPlugin.parse);
-  shaka$1.net.NetworkingEngine.registerScheme('https', HttpFetchPlugin.parse);
-  shaka$1.net.NetworkingEngine.registerScheme('blob', HttpFetchPlugin.parse);
-};
-
-const defaultInitDataTransform = (initData, initDataType, drmInfo) => {
-  if (initDataType === 'skd') {
-    const {
-      defaultGetContentId,
-      initDataTransform
-    } = shaka.util.FairPlayUtils;
-    const cert = drmInfo.serverCertificate;
-    const contentId = defaultGetContentId(initData);
-    return initDataTransform(initData, contentId, cert);
-  }
-
-  return initData;
-};
-
-const wrapFairplayLicenseRequest = request => {
-  const base64Payload = encodeURIComponent(btoa(String.fromCharCode(...new Uint8Array(request.body))));
-  const contentId = encodeURIComponent(new TextDecoder('utf-8').decode(request.initData).slice(6));
-  request.headers['Content-Type'] = 'application/x-www-form-urlencoded';
-  request.body = `spc=${base64Payload}&asset_id=${contentId}`;
-};
-
-const requestHandler = (type, request, player, extensionOptions) => {
-  const {
-    LICENSE,
-    SERVER_CERTIFICATE
-  } = shaka.net.NetworkingEngine.RequestType;
-
-  if (type === SERVER_CERTIFICATE) {
-    var _extensionOptions$drm;
-
-    Object.assign(request.headers, (_extensionOptions$drm = extensionOptions.drm[player.drmInfo().keySystem]) === null || _extensionOptions$drm === void 0 ? void 0 : _extensionOptions$drm.headers);
-  }
-
-  if (type === LICENSE) {
-    wrapFairplayLicenseRequest(request);
-  }
-
-  return request;
-};
-
-const stripResponseCkc = (type, response) => {
-  if (type !== shaka.net.NetworkingEngine.RequestType.LICENSE) {
-    return response;
-  }
-
-  const keyMessage = new TextDecoder('utf-8').decode(response.data).trim();
-
-  if (keyMessage.slice(0, 5) === '<ckc>' && keyMessage.slice(-6) === '</ckc>') {
-    response.data = Uint8Array.from(atob(keyMessage.slice(5, -6)), c => c.charCodeAt(0));
-  }
-
-  return response;
-};
-
-const setupKKFariplay = (player, extensionOptions) => {
-  if (!window.WebKitMediaKeys) {
-    return;
-  }
-
-  shaka.polyfill.PatchedMediaKeysApple.install();
-  player.configure({
-    drm: {
-      initDataTransform: defaultInitDataTransform
-    }
-  });
-  extensionOptions.requestHandlers.push(requestHandler);
-  extensionOptions.responseHandlers.push(stripResponseCkc);
-};
-
-/**
- * Parses an XML duration string.
- * Negative values are not supported. Years and months are treated as exactly
- * 365 and 30 days respectively.
- * @param {string} durationString The duration string, e.g., "PT1H3M43.2S",
- *   which means 1 hour, 3 minutes, and 43.2 seconds.
- * @return {?number} The parsed duration in seconds on success; otherwise,
- *   return null.
- * @see {@link http://www.datypic.com/sc/xsd/t-xsd_duration.html}
- */
-const parseDuration = durationString => {
-  if (!durationString) {
-    return null;
-  }
-
-  const re = '^P(?:([0-9]*)Y)?(?:([0-9]*)M)?(?:([0-9]*)D)?' + '(?:T(?:([0-9]*)H)?(?:([0-9]*)M)?(?:([0-9.]*)S)?)?$';
-  const matches = new RegExp(re).exec(durationString);
-
-  if (!matches) {
-    console.warning('Invalid duration string:', durationString);
-    return null;
-  } // Note: Number(null) == 0 but Number(undefined) == NaN.
-
-
-  const years = Number(matches[1] || null);
-  const months = Number(matches[2] || null);
-  const days = Number(matches[3] || null);
-  const hours = Number(matches[4] || null);
-  const minutes = Number(matches[5] || null);
-  const seconds = Number(matches[6] || null); // Assume a year always has 365 days and a month always has 30 days.
-
-  const d = 60 * 60 * 24 * 365 * years + 60 * 60 * 24 * 30 * months + 60 * 60 * 24 * days + 60 * 60 * hours + 60 * minutes + seconds;
-  return Number.isFinite(d) ? d : null;
-};
-
-const normalize = (doc, template, period) => {
-  const segmentDuration = parseFloat(template.getAttribute('duration'), 10);
-
-  if (!segmentDuration) {
-    return;
-  }
-
-  const timescale = parseFloat(template.getAttribute('timescale'), 10);
-  const periodDuration = parseDuration(period.getAttribute('duration'));
-  const item = doc.createElement('S');
-  item.setAttribute('d', segmentDuration);
-  item.setAttribute('r', Math.ceil(periodDuration * timescale / segmentDuration) - 1);
-  const timeline = doc.createElement('SegmentTimeline');
-  timeline.appendChild(item);
-  template.appendChild(timeline);
-  template.removeAttribute('duration');
-};
-
-const fixDashManifest = (data, {
-  minTimeShiftBufferDepth
-} = {}) => {
-  const doc = new DOMParser().parseFromString(data, 'text/xml'); // only dynamic manifest needs timeShiftBufferDepth
-
-  const root = doc.children[0];
-
-  if (root.getAttribute('type') === 'dynamic') {
-    if (root.getAttribute('timeShiftBufferDepth') < minTimeShiftBufferDepth) {
-      root.setAttribute('timeShiftBufferDepth', minTimeShiftBufferDepth);
-    }
-  } else if (root.hasAttribute('timeShiftBufferDepth')) {
-    root.removeAttribute('timeShiftBufferDepth');
-  } // workaround multi-period segment template bug, normalize to segment timelines
-
-
-  if (doc.querySelectorAll('Period').length > 1) {
-    Array.from(doc.querySelectorAll('Period')).forEach(period => {
-      Array.from(period.querySelectorAll('SegmentTemplate')).forEach(template => normalize(doc, template, period));
-    });
-  }
-
-  window.manifestDoc = doc;
-  return new XMLSerializer().serializeToString(doc);
-};
-
-/* eslint-disable no-cond-assign */
-
-/* eslint-disable prefer-destructuring */
-
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-const goog$1 = {
-  asserts: {
-    assert: (condition, message) => {
-      if (!condition) {
-        console.warn('GOOG Assert!', message);
-      }
-    }
-  }
-};
-
-const addDefaultTextColor = styles => {
-  const textColor = shaka.text.Cue.defaultTextColor;
-
-  for (const [key, value] of Object.entries(textColor)) {
-    const cue = new shaka.text.Cue(0, 0, '');
-    cue.color = value;
-    styles.set(`.${key}`, cue);
-  }
-
-  const bgColor = shaka.text.Cue.defaultTextBackgroundColor;
-
-  for (const [key, value] of Object.entries(bgColor)) {
-    const cue = new shaka.text.Cue(0, 0, '');
-    cue.backgroundColor = value;
-    styles.set(`.${key}`, cue);
-  }
-};
-
-const parseTime = text => {
-  var _Array$from;
-
-  const timeFormat = /(?:(\d{1,}):)?(\d{2}):(\d{2})((\.(\d{1,3})))?/g;
-  const results = (_Array$from = Array.from(text.matchAll(timeFormat))) === null || _Array$from === void 0 ? void 0 : _Array$from[0];
-
-  if (results == null) {
-    return null;
-  } // This capture is optional, but will still be in the array as undefined,
-  // in which case it is 0.
-
-
-  const hours = Number(results[1]) || 0;
-  const minutes = Number(results[2]);
-  const seconds = Number(results[3]);
-  const milliseconds = Number(results[6]) || 0;
-
-  if (minutes > 59 || seconds > 59) {
-    return null;
-  }
-
-  return milliseconds / 1000 + seconds + minutes * 60 + hours * 3600;
-};
-
-const parseRegion = block => {
-  if (block[0].trim() !== 'REGION') {
-    return [];
-  }
-
-  const region = new shaka.text.CueRegion();
-  block.slice(1).forEach(word => {
-    let results = null;
-
-    if (results = /^id:(.*)$/.exec(word)) {
-      region.id = results[1];
-    } else if (results = /^width:(\d{1,2}|100)%$/.exec(word)) {
-      region.width = Number(results[1]);
-    } else if (results = /^lines:(\d+)$/.exec(word)) {
-      region.height = Number(results[1]);
-      region.heightUnits = shaka.text.CueRegion.units.LINES;
-    } else if (results = /^regionanchor:(\d{1,2}|100)%,(\d{1,2}|100)%$/.exec(word)) {
-      region.regionAnchorX = Number(results[1]);
-      region.regionAnchorY = Number(results[2]);
-    } else if (results = /^viewportanchor:(\d{1,2}|100)%,(\d{1,2}|100)%$/.exec(word)) {
-      region.viewportAnchorX = Number(results[1]);
-      region.viewportAnchorY = Number(results[2]);
-    } else if (results = /^scroll:up$/.exec(word)) {
-      region.scroll = shaka.text.CueRegion.scrollMode.UP;
-    } else {
-      shaka.log.warning('VTT parser encountered an invalid VTTRegion setting: ', word, ' The setting will be ignored.');
-    }
-  });
-  return [region];
-};
-/**
- * @implements {shaka.extern.TextParser}
- * @export
- */
-
-
-class VttTextParser {
-  /** Constructs a VTT parser. */
-  constructor() {
-    /** @private {boolean} */
-    this.sequenceMode_ = false;
-    /** @private {string} */
-
-    this.manifestType_ = shaka.media.ManifestParser.UNKNOWN;
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  parseInit() {
-    goog$1.asserts.assert(false, 'VTT does not have init segments');
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  setSequenceMode(sequenceMode) {
-    this.sequenceMode_ = sequenceMode;
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  setManifestType(manifestType) {
-    this.manifestType_ = manifestType;
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  parseMedia(data, time) {
-    // Get the input as a string.  Normalize newlines to \n.
-    let str = shaka.util.StringUtils.fromUTF8(data);
-    str = str.replace(/\r\n|\r(?=[^\n]|$)/gm, '\n');
-    const blocks = str.split(/\n{2,}/m);
-
-    if (!/^WEBVTT($|[ \t\n])/m.test(blocks[0])) {
-      throw new shaka.util.Error(shaka.util.Error.Severity.CRITICAL, shaka.util.Error.Category.TEXT, shaka.util.Error.Code.INVALID_TEXT_HEADER);
-    } // Depending on "segmentRelativeVttTiming" configuration,
-    // "vttOffset" will correspond to either "periodStart" (default)
-    // or "segmentStart", for segmented VTT where timings are relative
-    // to the beginning of each segment.
-    // NOTE: "periodStart" is the timestamp offset applied via TextEngine.
-    // It is no longer closely tied to periods, but the name stuck around.
-    // NOTE: This offset and the flag choosing its meaning have no effect on
-    // HLS content, which should use X-TIMESTAMP-MAP and periodStart instead.
-
-
-    let offset = time.vttOffset;
-
-    if (this.manifestType_ == shaka.media.ManifestParser.HLS) {
-      // Only use 'X-TIMESTAMP-MAP' with HLS.
-      if (blocks[0].includes('X-TIMESTAMP-MAP')) {
-        offset = this.computeHlsOffset_(blocks[0], time);
-      } else if (time.periodStart && time.vttOffset == time.periodStart) {
-        // In the case where X-TIMESTAMP-MAP is not used and it is HLS, we
-        // should not use offset unless segment-relative times are used.
-        offset = 0;
-      }
-    }
-
-    const regions = [];
-    /** @type {!Map<string, !shaka.text.Cue>} */
-
-    const styles = new Map();
-    addDefaultTextColor(styles); // Parse cues.
-
-    const ret = [];
-
-    for (const block of blocks.slice(1)) {
-      const lines = block.split('\n');
-      VttTextParser.parseStyle_(lines, styles);
-      regions.push(...parseRegion(lines));
-      const cue = VttTextParser.parseCue_(lines, offset, regions, styles);
-
-      if (cue) {
-        ret.push(cue);
-      }
-    }
-
-    return ret;
-  }
-  /**
-   * @param {string} headerBlock Contains X-TIMESTAMP-MAP.
-   * @param {shaka.extern.TextParser.TimeContext} time
-   * @return {number}
-   * @private
-   */
-
-
-  computeHlsOffset_(headerBlock, time) {
-    // https://bit.ly/2K92l7y
-    // The 'X-TIMESTAMP-MAP' header is used in HLS to align text with
-    // the rest of the media.
-    // The header format is 'X-TIMESTAMP-MAP=MPEGTS:n,LOCAL:m'
-    // (the attributes can go in any order)
-    // where n is MPEG-2 time and m is cue time it maps to.
-    // For example 'X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000'
-    // means an offset of 10 seconds
-    // 900000/MPEG_TIMESCALE - cue time.
-    const cueTimeMatch = headerBlock.match(/LOCAL:((?:(\d{1,}):)?(\d{2}):(\d{2})\.(\d{3}))/m);
-    const mpegTimeMatch = headerBlock.match(/MPEGTS:(\d+)/m);
-
-    if (!cueTimeMatch || !mpegTimeMatch) {
-      throw new shaka.util.Error(shaka.util.Error.Severity.CRITICAL, shaka.util.Error.Category.TEXT, shaka.util.Error.Code.INVALID_TEXT_HEADER);
-    }
-
-    const cueTime = parseTime(cueTimeMatch[1]);
-
-    if (cueTime == null) {
-      throw new shaka.util.Error(shaka.util.Error.Severity.CRITICAL, shaka.util.Error.Category.TEXT, shaka.util.Error.Code.INVALID_TEXT_HEADER);
-    }
-
-    let mpegTime = Number(mpegTimeMatch[1]);
-    const mpegTimescale = VttTextParser.MPEG_TIMESCALE_;
-    const rolloverSeconds = VttTextParser.TS_ROLLOVER_ / mpegTimescale;
-    let segmentStart = time.segmentStart - time.periodStart;
-
-    while (segmentStart >= rolloverSeconds) {
-      segmentStart -= rolloverSeconds;
-      mpegTime += VttTextParser.TS_ROLLOVER_;
-    }
-
-    return time.periodStart + mpegTime / mpegTimescale - cueTime;
-  }
-  /**
-   * Parses a style block into a Cue object.
-   *
-   * @param {!Array<string>} text
-   * @param {!Map<string, !shaka.text.Cue>} styles
-   * @private
-   */
-
-
-  static parseStyle_(text, styles) {
-    // Skip empty blocks.
-    if (text.length == 1 && !text[0]) {
-      return;
-    } // Skip comment blocks.
-
-
-    if (/^NOTE($|[ \t])/.test(text[0])) {
-      return;
-    } // Only style block are allowed.
-
-
-    if (text[0] != 'STYLE') {
-      return;
-    }
-    /** @type {!Array<!Array<string>>} */
-
-
-    const styleBlocks = [];
-    let lastBlockIndex = -1;
-
-    for (let i = 1; i < text.length; i++) {
-      if (text[i].includes('::cue')) {
-        styleBlocks.push([]);
-        lastBlockIndex = styleBlocks.length - 1;
-      }
-
-      if (lastBlockIndex == -1) {
-        continue;
-      }
-
-      styleBlocks[lastBlockIndex].push(text[i]);
-
-      if (text[i].includes('}')) {
-        lastBlockIndex = -1;
-      }
-    }
-
-    for (const styleBlock of styleBlocks) {
-      let styleSelector = 'global'; // Look for what is within parentheses. For example:
-      // <code>:: cue (b) {</code>, what we are looking for is <code>b</code>
-
-      const selector = styleBlock[0].match(/\((.*)\)/);
-
-      if (selector) {
-        styleSelector = selector.pop();
-      } // We start at 1 to avoid '::cue' and end earlier to avoid '}'
-
-
-      let propertyLines = styleBlock.slice(1, -1);
-
-      if (styleBlock[0].includes('}')) {
-        const payload = /\{(.*?)\}/.exec(styleBlock[0]);
-
-        if (payload) {
-          propertyLines = payload[1].split(';');
-        }
-      } // Continue styles over multiple selectors if necessary.
-      // For example,
-      //   ::cue(b) { background: white; } ::cue(b) { color: blue; }
-      // should set both the background and foreground of bold tags.
-
-
-      let cue = styles.get(styleSelector);
-
-      if (!cue) {
-        cue = new shaka.text.Cue(0, 0, '');
-      }
-
-      let validStyle = false;
-
-      for (let i = 0; i < propertyLines.length; i++) {
-        // We look for CSS properties. As a general rule they are separated by
-        // <code>:</code>. Eg: <code>color: red;</code>
-        const lineParts = /^\s*([^:]+):\s*(.*)/.exec(propertyLines[i]);
-
-        if (lineParts) {
-          const name = lineParts[1].trim();
-          const value = lineParts[2].trim().replace(';', '');
-
-          switch (name) {
-            case 'background-color':
-            case 'background':
-              validStyle = true;
-              cue.backgroundColor = value;
-              break;
-
-            case 'color':
-              validStyle = true;
-              cue.color = value;
-              break;
-
-            case 'font-family':
-              validStyle = true;
-              cue.fontFamily = value;
-              break;
-
-            case 'font-size':
-              validStyle = true;
-              cue.fontSize = value;
-              break;
-
-            case 'font-weight':
-              if (parseInt(value, 10) >= 700 || value == 'bold') {
-                validStyle = true;
-                cue.fontWeight = shaka.text.Cue.fontWeight.BOLD;
-              }
-
-              break;
-
-            case 'font-style':
-              switch (value) {
-                case 'normal':
-                  validStyle = true;
-                  cue.fontStyle = shaka.text.Cue.fontStyle.NORMAL;
-                  break;
-
-                case 'italic':
-                  validStyle = true;
-                  cue.fontStyle = shaka.text.Cue.fontStyle.ITALIC;
-                  break;
-
-                case 'oblique':
-                  validStyle = true;
-                  cue.fontStyle = shaka.text.Cue.fontStyle.OBLIQUE;
-                  break;
-              }
-
-              break;
-
-            case 'opacity':
-              validStyle = true;
-              cue.opacity = parseFloat(value);
-              break;
-
-            case 'text-combine-upright':
-              validStyle = true;
-              cue.textCombineUpright = value;
-              break;
-
-            case 'text-shadow':
-              validStyle = true;
-              cue.textShadow = value;
-              break;
-
-            case 'white-space':
-              validStyle = true;
-              cue.wrapLine = value != 'noWrap';
-              break;
-
-            default:
-              shaka.log.warning('VTT parser encountered an unsupported style: ', lineParts);
-              break;
-          }
-        }
-      }
-
-      if (validStyle) {
-        styles.set(styleSelector, cue);
-      }
-    }
-  }
-  /**
-   * Parses a text block into a Cue object.
-   *
-   * @param {!Array<string>} text
-   * @param {number} timeOffset
-   * @param {!Array<!shaka.text.CueRegion>} regions
-   * @param {!Map<string, !shaka.text.Cue>} styles
-   * @return {shaka.text.Cue}
-   * @private
-   */
-
-
-  static parseCue_(text, timeOffset, regions, styles) {
-    // Skip empty blocks.
-    if (text.length == 1 && !text[0]) {
-      return null;
-    } // Skip comment blocks.
-
-
-    if (/^NOTE($|[ \t])/.test(text[0])) {
-      return null;
-    } // Skip style and region blocks.
-
-
-    if (text[0] == 'STYLE' || text[0] == 'REGION') {
-      return null;
-    }
-
-    const skipIndex = text.findIndex(line => /^#/.test(line.trim()));
-
-    if (skipIndex > 0) {
-      text = text.slice(skipIndex);
-    }
-
-    if (text.length < 2) {
-      return;
-    }
-
-    let id = null;
-
-    if (!text[0].includes('-->')) {
-      id = text[0];
-      text.splice(0, 1);
-    } // Parse the times.
-
-
-    let [start, end] = text[0].split('-->').map(part => parseTime(part.trim()));
-
-    if (start == null || end == null) {
-      shaka.log.alwaysWarn('Failed to parse VTT time code. Cue skipped:', id, text);
-      return null;
-    }
-
-    start += timeOffset;
-    end += timeOffset; // Get the payload.
-
-    const payload = text.slice(1).join('\n').trim();
-    let cue = null;
-
-    if (styles.has('global')) {
-      cue = styles.get('global').clone();
-      cue.startTime = start;
-      cue.endTime = end;
-      cue.payload = payload;
-    } else {
-      cue = new shaka.text.Cue(start, end, payload);
-    } // Parse optional settings.
-
-
-    text[0].split(/\s+/g).slice(3).forEach(word => {
-      if (!word.trim()) {
-        return;
-      }
-
-      if (!VttTextParser.parseCueSetting(cue, word, regions)) {
-        shaka.log.warning('VTT parser encountered an invalid VTT setting: ', word, ' The setting will be ignored.');
-      }
-    });
-    shaka.text.Cue.parseCuePayload(cue, styles);
-
-    if (id != null) {
-      cue.id = id;
-    }
-
-    return cue;
-  }
-  /**
-   * Parses a WebVTT setting from the given word.
-   *
-   * @param {!shaka.text.Cue} cue
-   * @param {string} word
-   * @param {!Array<!shaka.text.CueRegion>} regions
-   * @return {boolean} True on success.
-   */
-
-
-  static parseCueSetting(cue, word, regions) {
-    let results = null;
-
-    if (results = /^align:(start|middle|center|end|left|right)$/.exec(word)) {
-      VttTextParser.setTextAlign_(cue, results[1]);
-    } else if (results = /^vertical:(lr|rl)$/.exec(word)) {
-      VttTextParser.setVerticalWritingMode_(cue, results[1]);
-    } else if (results = /^size:([\d.]+)%$/.exec(word)) {
-      cue.size = Number(results[1]);
-    } else if (results = /^position:([\d.]+)%(?:,(line-left|line-right|middle|center|start|end|auto))?$/.exec(word)) {
-      cue.position = Number(results[1]);
-
-      if (results[2]) {
-        VttTextParser.setPositionAlign_(cue, results[2]);
-      }
-    } else if (results = /^region:(.*)$/.exec(word)) {
-      const region = VttTextParser.getRegionById_(regions, results[1]);
-
-      if (region) {
-        cue.region = region;
-      }
-    } else {
-      return VttTextParser.parsedLineValueAndInterpretation_(cue, word);
-    }
-
-    return true;
-  }
-  /**
-   *
-   * @param {!Array<!shaka.text.CueRegion>} regions
-   * @param {string} id
-   * @return {?shaka.text.CueRegion}
-   * @private
-   */
-
-
-  static getRegionById_(regions, id) {
-    const regionsWithId = regions.filter(region => region.id == id);
-
-    if (!regionsWithId.length) {
-      shaka.log.warning('VTT parser could not find a region with id: ', id, ' The region will be ignored.');
-      return null;
-    }
-
-    goog$1.asserts.assert(regionsWithId.length == 1, 'VTTRegion ids should be unique!');
-    return regionsWithId[0];
-  }
-  /**
-   * @param {!shaka.text.Cue} cue
-   * @param {string} align
-   * @private
-   */
-
-
-  static setTextAlign_(cue, align) {
-    const Cue = shaka.text.Cue;
-
-    if (align == 'middle') {
-      cue.textAlign = Cue.textAlign.CENTER;
-    } else {
-      goog$1.asserts.assert(align.toUpperCase() in Cue.textAlign, `${align.toUpperCase()} Should be in Cue.textAlign values!`);
-      cue.textAlign = Cue.textAlign[align.toUpperCase()];
-    }
-  }
-  /**
-   * @param {!shaka.text.Cue} cue
-   * @param {string} align
-   * @private
-   */
-
-
-  static setPositionAlign_(cue, align) {
-    const Cue = shaka.text.Cue;
-
-    if (align == 'line-left' || align == 'start') {
-      cue.positionAlign = Cue.positionAlign.LEFT;
-    } else if (align == 'line-right' || align == 'end') {
-      cue.positionAlign = Cue.positionAlign.RIGHT;
-    } else if (align == 'center' || align == 'middle') {
-      cue.positionAlign = Cue.positionAlign.CENTER;
-    } else {
-      cue.positionAlign = Cue.positionAlign.AUTO;
-    }
-  }
-  /**
-   * @param {!shaka.text.Cue} cue
-   * @param {string} value
-   * @private
-   */
-
-
-  static setVerticalWritingMode_(cue, value) {
-    const Cue = shaka.text.Cue;
-
-    if (value == 'lr') {
-      cue.writingMode = Cue.writingMode.VERTICAL_LEFT_TO_RIGHT;
-    } else {
-      cue.writingMode = Cue.writingMode.VERTICAL_RIGHT_TO_LEFT;
-    }
-  }
-  /**
-   * @param {!shaka.text.Cue} cue
-   * @param {string} word
-   * @return {boolean}
-   * @private
-   */
-
-
-  static parsedLineValueAndInterpretation_(cue, word) {
-    const Cue = shaka.text.Cue;
-    let results = null;
-
-    if (results = /^line:([\d.]+)%(?:,(start|end|center))?$/.exec(word)) {
-      cue.lineInterpretation = Cue.lineInterpretation.PERCENTAGE;
-      cue.line = Number(results[1]);
-
-      if (results[2]) {
-        goog$1.asserts.assert(results[2].toUpperCase() in Cue.lineAlign, `${results[2].toUpperCase()} Should be in Cue.lineAlign values!`);
-        cue.lineAlign = Cue.lineAlign[results[2].toUpperCase()];
-      }
-    } else if (results = /^line:(-?\d+)(?:,(start|end|center))?$/.exec(word)) {
-      cue.lineInterpretation = Cue.lineInterpretation.LINE_NUMBER;
-      cue.line = Number(results[1]);
-
-      if (results[2]) {
-        goog$1.asserts.assert(results[2].toUpperCase() in Cue.lineAlign, `${results[2].toUpperCase()} Should be in Cue.lineAlign values!`);
-        cue.lineAlign = Cue.lineAlign[results[2].toUpperCase()];
-      }
-    } else {
-      return false;
-    }
-
-    return true;
-  }
-
-}
-/**
- * @const {number}
- * @private
- */
-
-
-VttTextParser.MPEG_TIMESCALE_ = 90000;
-/**
- * At this value, timestamps roll over in TS content.
- * @const {number}
- * @private
- */
-
-VttTextParser.TS_ROLLOVER_ = 0x200000000;
-
-VttTextParser.register = shakaNameSpace => {
-  shakaNameSpace.text.TextEngine.registerParser('text/vtt', () => new VttTextParser());
-  shakaNameSpace.text.TextEngine.registerParser('text/vtt; codecs="vtt"', () => new VttTextParser());
-  shakaNameSpace.text.TextEngine.registerParser('text/vtt; codecs="wvtt"', () => new VttTextParser());
-};
-
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-const shakaLog = {
-  debug: (...messages) => console.warn(...messages),
-  error: (...messages) => console.warn(...messages),
-  info: (...messages) => console.warn(...messages),
-  warning: (...messages) => console.warn(...messages),
-  alwaysWarn: (...messages) => console.warn(...messages)
-};
-const goog = {
-  asserts: {
-    assert: (result, message) => {
-      result || console.warn(message);
-    }
-  }
-};
-/**
- * Returns info about provided lengthValue
- * @example 100px => { value: 100, unit: 'px' }
- * @param {?string} lengthValue
- *
- * @return {?{ value: number, unit: string }}
- * @private
- */
-
-const getLengthValueInfo_ = lengthValue => {
-  const matches = /(\d*\.?\d+)([a-z]+|%+)/.exec(lengthValue);
-
-  if (!matches) {
-    return null;
-  }
-
-  return {
-    value: Number(matches[1]),
-    unit: matches[2]
-  };
-};
-/**
- * Returns computed absolute length value in pixels based on cell
- * and a video container size
- * @param {number} value
- * @param {!shaka.text.Cue} cue
- * @param {HTMLElement} videoContainer
- * @return {string}
- *
- * @private
- */
-
-
-const getAbsoluteLengthInPixels_ = (value, cue, videoContainer) => {
-  const containerHeight = videoContainer.clientHeight;
-  return `${containerHeight * value / cue.cellResolution.rows}px`;
-};
-/**
- * Inherits a property from the parent Cue elements.  If the value is falsy,
- * it is assumed to be inherited from the parent. This returns null if the
- * value isn't found.
- *
- * @param {!Array<!shaka.text.Cue>} parents
- * @param {function(!shaka.text.Cue):?T} cb
- * @return {?T}
- * @template T
- * @private
- */
-
-
-const inheritProperty_ = (parents, cb) => {
-  for (let i = parents.length - 1; i >= 0; i--) {
-    const val = cb(parents[i]);
-
-    if (val || val === 0) {
-      return val;
-    }
-  }
-
-  return null;
-};
-/**
- * Converts length value to an absolute value in pixels.
- * If lengthValue is already an absolute value it will not
- * be modified. Relative lengthValue will be converted to an
- * absolute value in pixels based on Computed Cell Size
- *
- * @param {string} lengthValue
- * @param {!shaka.text.Cue} cue
- * @param {HTMLElement} videoContainer
- * @return {string}
- * @private
- */
-
-
-const convertLengthValue_ = (lengthValue, cue, videoContainer) => {
-  const lengthValueInfo = getLengthValueInfo_(lengthValue);
-
-  if (!lengthValueInfo) {
-    return lengthValue;
-  }
-
-  const {
-    unit,
-    value
-  } = lengthValueInfo;
-
-  switch (unit) {
-    case '%':
-      return getAbsoluteLengthInPixels_(value / 100, cue, videoContainer);
-
-    case 'c':
-      return getAbsoluteLengthInPixels_(value, cue, videoContainer);
-
-    default:
-      return lengthValue;
-  }
-};
-
-const removeDuplicates = cues => {
-  const uniqueCues = [];
-
-  for (const cue of cues) {
-    const isValid = !uniqueCues.some(existingCue => shaka.text.Cue.equal(cue, existingCue));
-
-    if (isValid) {
-      uniqueCues.push(cue);
-    }
-  }
-
-  return uniqueCues;
-};
-/**
- * The text displayer plugin for the Shaka Player UI.  Can also be used directly
- * by providing an appropriate container element.
- *
- * @implements {shaka.extern.TextDisplayer}
- * @final
- * @export
- */
-
-
-class UITextDisplayer {
-  /**
-   * Constructor.
-   * @param {HTMLMediaElement} video
-   * @param {HTMLElement} videoContainer
-   */
-  constructor(video, videoContainer) {
-    window.shaka.log = shakaLog;
-    goog.asserts.assert(videoContainer, 'videoContainer should be valid.');
-
-    if (!document.fullscreenEnabled) {
-      shaka.log.alwaysWarn('Using UITextDisplayer in a browser without ' + 'Fullscreen API support causes subtitles to not be rendered in ' + 'fullscreen');
-    }
-    /** @private {boolean} */
-
-
-    this.isTextVisible_ = false;
-    /** @private {!Array<!shaka.text.Cue>} */
-
-    this.cues_ = [];
-    /** @private {HTMLMediaElement} */
-
-    this.video_ = video;
-    /** @private {HTMLElement} */
-
-    this.videoContainer_ = videoContainer;
-    /** @private {?number} */
-
-    this.aspectRatio_ = null;
-    /** @private {?shaka.extern.TextDisplayerConfiguration} */
-
-    this.config_ = null;
-    /** @type {HTMLElement} */
-
-    this.textContainer_ = document.createElement('div');
-    this.textContainer_.classList.add('shaka-text-container'); // Set the subtitles text-centered by default.
-
-    this.textContainer_.style.textAlign = 'center'; // Set the captions in the middle horizontally by default.
-
-    this.textContainer_.style.display = 'flex';
-    this.textContainer_.style.flexDirection = 'column';
-    this.textContainer_.style.alignItems = 'center'; // Set the captions at the bottom by default.
-
-    this.textContainer_.style.justifyContent = 'flex-end';
-    this.videoContainer_.appendChild(this.textContainer_);
-    /** @private {shaka.util.Timer} */
-
-    this.captionsTimer_ = new shaka.util.Timer(() => {
-      if (!this.video_.paused) {
-        this.updateCaptions_();
-      }
-    });
-    this.configureCaptionsTimer_();
-    /**
-     * Maps cues to cue elements. Specifically points out the wrapper element of
-     * the cue (e.g. the HTML element to put nested cues inside).
-     * @private {Map<!shaka.text.Cue, !{
-     *   cueElement: !HTMLElement,
-     *   regionElement: HTMLElement,
-     *   wrapper: !HTMLElement
-     * }>}
-     */
-
-    this.currentCuesMap_ = new Map();
-    /** @private {shaka.util.EventManager} */
-
-    this.eventManager_ = new shaka.util.EventManager();
-    this.eventManager_.listen(document, 'fullscreenchange', () => {
-      this.updateCaptions_(
-      /* forceUpdate= */
-      true);
-    });
-    this.eventManager_.listen(this.video_, 'seeking', () => {
-      this.updateCaptions_(
-      /* forceUpdate= */
-      true);
-    });
-    this.eventManager_.listen(this.video_, 'ratechange', () => {
-      this.configureCaptionsTimer_();
-    }); // From: https://html.spec.whatwg.org/multipage/media.html#dom-video-videowidth
-    // Whenever the natural width or natural height of the video changes
-    // (including, for example, because the selected video track was changed),
-    // if the element's readyState attribute is not HAVE_NOTHING, the user
-    // agent must queue a media element task given the media element to fire an
-    // event named resize at the media element.
-
-    this.eventManager_.listen(this.video_, 'resize', () => {
-      const element =
-      /** @type {!HTMLVideoElement} */
-      this.video_;
-      const width = element.videoWidth;
-      const height = element.videoHeight;
-
-      if (width && height) {
-        this.aspectRatio_ = width / height;
-      } else {
-        this.aspectRatio_ = null;
-      }
-    });
-    /** @private {ResizeObserver} */
-
-    this.resizeObserver_ = null;
-
-    if ('ResizeObserver' in window) {
-      this.resizeObserver_ = new ResizeObserver(() => {
-        this.updateCaptions_(
-        /* forceUpdate= */
-        true);
-      });
-      this.resizeObserver_.observe(this.textContainer_);
-    }
-    /** @private {Map<string, !HTMLElement>} */
-
-
-    this.regionElements_ = new Map();
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  configure(config) {
-    this.config_ = config;
-    this.configureCaptionsTimer_();
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  append(cues) {
-    // Clone the cues list for performance optimization. We can avoid the cues
-    // list growing during the comparisons for duplicate cues.
-    // See: https://github.com/shaka-project/shaka-player/issues/3018
-    const cuesList = [...this.cues_];
-
-    for (const cue of removeDuplicates(cues)) {
-      // When a VTT cue spans a segment boundary, the cue will be duplicated
-      // into two segments.
-      // To avoid displaying duplicate cues, if the current cue list already
-      // contains the cue, skip it.
-      const containsCue = cuesList.some(cueInList => shaka.text.Cue.equal(cueInList, cue));
-
-      if (!containsCue) {
-        this.cues_.push(cue);
-      }
-    }
-
-    this.updateCaptions_();
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  destroy() {
-    // Return resolved promise if destroy() has been called.
-    if (!this.textContainer_) {
-      return Promise.resolve();
-    } // Remove the text container element from the UI.
-
-
-    this.videoContainer_.removeChild(this.textContainer_);
-    this.textContainer_ = null;
-    this.isTextVisible_ = false;
-    this.cues_ = [];
-
-    if (this.captionsTimer_) {
-      this.captionsTimer_.stop();
-      this.captionsTimer_ = null;
-    }
-
-    this.currentCuesMap_.clear(); // Tear-down the event manager to ensure messages stop moving around.
-
-    if (this.eventManager_) {
-      this.eventManager_.release();
-      this.eventManager_ = null;
-    }
-
-    if (this.resizeObserver_) {
-      this.resizeObserver_.disconnect();
-      this.resizeObserver_ = null;
-    }
-
-    return Promise.resolve();
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  remove(start, end) {
-    // Return false if destroy() has been called.
-    if (!this.textContainer_) {
-      return false;
-    } // Remove the cues out of the time range.
-
-
-    const oldNumCues = this.cues_.length;
-    this.cues_ = this.cues_.filter(cue => cue.startTime < start || cue.endTime >= end); // If anything was actually removed in this process, force the captions to
-    // update. This makes sure that the currently-displayed cues will stop
-    // displaying if removed (say, due to the user changing languages).
-
-    const forceUpdate = oldNumCues > this.cues_.length;
-    this.updateCaptions_(forceUpdate);
-    return true;
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  isTextVisible() {
-    return this.isTextVisible_;
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  setTextVisibility(on) {
-    this.isTextVisible_ = on;
-    this.updateCaptions_(
-    /* forceUpdate= */
-    true);
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  setTextLanguage(language) {
-    if (language && language != 'und') {
-      this.textContainer_.setAttribute('lang', language);
-    } else {
-      this.textContainer_.setAttribute('lang', '');
-    }
-  }
-  /**
-   * @override
-   * @export
-   */
-
-
-  enableTextDisplayer() {}
-  /**
-   * @private
-   */
-
-
-  configureCaptionsTimer_() {
-    if (this.captionsTimer_) {
-      const captionsUpdatePeriod = this.config_ ? this.config_.captionsUpdatePeriod : 0.25;
-      const updateTime = captionsUpdatePeriod / Math.max(1, Math.abs(this.video_.playbackRate));
-      this.captionsTimer_.tickEvery(updateTime);
-    }
-  }
-  /**
-   * @private
-   */
-
-
-  isElementUnderTextContainer_(elemToCheck) {
-    while (elemToCheck != null) {
-      if (elemToCheck == this.textContainer_) {
-        return true;
-      }
-
-      elemToCheck = elemToCheck.parentElement;
-    }
-
-    return false;
-  }
-  /**
-   * @param {!Array<!shaka.text.Cue>} cues
-   * @param {!HTMLElement} container
-   * @param {number} currentTime
-   * @param {!Array<!shaka.text.Cue>} parents
-   * @private
-   */
-
-
-  updateCuesRecursive_(cues, container, currentTime, parents) {
-    // Set to true if the cues have changed in some way, which will require
-    // DOM changes. E.g. if a cue was added or removed.
-    let updateDOM = false;
-    /**
-     * The elements to remove from the DOM.
-     * Some of these elements may be added back again, if their corresponding
-     * cue is in toPlant.
-     * These elements are only removed if updateDOM is true.
-     * @type {!Array<!HTMLElement>}
-     */
-
-    const toUproot = [];
-    /**
-     * The cues whose corresponding elements should be in the DOM.
-     * Some of these might be new, some might have been displayed beforehand.
-     * These will only be added if updateDOM is true.
-     * @type {!Array<!shaka.text.Cue>}
-     */
-
-    const toPlant = [];
-
-    for (const cue of cues) {
-      parents.push(cue);
-      let cueRegistry = this.currentCuesMap_.get(cue);
-      const shouldBeDisplayed = cue.startTime <= currentTime && cue.endTime > currentTime;
-      let wrapper = cueRegistry ? cueRegistry.wrapper : null;
-
-      if (cueRegistry) {
-        // If the cues are replanted, all existing cues should be uprooted,
-        // even ones which are going to be planted again.
-        toUproot.push(cueRegistry.cueElement); // Also uproot all displayed region elements.
-
-        if (cueRegistry.regionElement) {
-          toUproot.push(cueRegistry.regionElement);
-        } // If the cue should not be displayed, remove it entirely.
-
-
-        if (!shouldBeDisplayed) {
-          // Since something has to be removed, we will need to update the DOM.
-          updateDOM = true;
-          this.currentCuesMap_.delete(cue);
-          cueRegistry = null;
-        }
-      }
-
-      if (shouldBeDisplayed) {
-        toPlant.push(cue);
-
-        if (!cueRegistry) {
-          // The cue has to be made!
-          this.createCue_(cue, parents);
-          cueRegistry = this.currentCuesMap_.get(cue);
-          wrapper = cueRegistry.wrapper;
-          updateDOM = true;
-        } else if (!this.isElementUnderTextContainer_(wrapper)) {
-          // We found that the wrapper needs to be in the DOM
-          updateDOM = true;
-        }
-      } // Recursively check the nested cues, to see if they need to be added or
-      // removed.
-      // If wrapper is null, that means that the cue is not only not being
-      // displayed currently, it also was not removed this tick. So it's
-      // guaranteed that the children will neither need to be added nor removed.
-
-
-      if (cue.nestedCues.length > 0 && wrapper) {
-        this.updateCuesRecursive_(cue.nestedCues, wrapper, currentTime, parents);
-      }
-
-      const topCue = parents.pop();
-      goog.asserts.assert(topCue == cue, 'Parent cues should be kept in order');
-    }
-
-    if (updateDOM) {
-      for (const element of toUproot) {
-        // NOTE: Because we uproot shared region elements, too, we might hit an
-        // element here that has no parent because we've already processed it.
-        if (element.parentElement) {
-          element.parentElement.removeChild(element);
-        }
-      }
-
-      toPlant.sort((a, b) => {
-        if (a.startTime != b.startTime) {
-          return a.startTime - b.startTime;
-        }
-
-        return a.endTime - b.endTime;
-      });
-
-      for (const cue of toPlant) {
-        const cueRegistry = this.currentCuesMap_.get(cue);
-        goog.asserts.assert(cueRegistry, 'cueRegistry should exist.');
-
-        if (cueRegistry.regionElement) {
-          if (cueRegistry.regionElement.contains(container)) {
-            cueRegistry.regionElement.removeChild(container);
-          }
-
-          container.appendChild(cueRegistry.regionElement);
-          cueRegistry.regionElement.appendChild(cueRegistry.cueElement);
-        } else {
-          container.appendChild(cueRegistry.cueElement);
-        }
-      }
-    }
-  }
-  /**
-   * Display the current captions.
-   * @param {boolean=} forceUpdate
-   * @private
-   */
-
-
-  updateCaptions_(forceUpdate = false) {
-    if (!this.textContainer_) {
-      return;
-    }
-
-    const {
-      currentTime
-    } = this.video_;
-
-    if (!this.isTextVisible_ || forceUpdate) {
-      // Remove child elements from all regions.
-      for (const regionElement of this.regionElements_.values()) {
-        regionElement.replaceChildren();
-      } // Remove all top-level elements in the text container.
-
-
-      this.textContainer_.replaceChildren(); // Clear the element maps.
-
-      this.currentCuesMap_.clear();
-      this.regionElements_.clear();
-    }
-
-    if (this.isTextVisible_) {
-
-
-      this.updateCuesRecursive_(this.cues_, this.textContainer_, currentTime,
-      /* parents= */
-      []);
-    }
-  }
-  /**
-   * Compute a unique internal id:
-   * Regions can reuse the id but have different dimensions, we need to
-   * consider those differences
-   * @param {shaka.text.CueRegion} region
-   * @private
-   */
-
-
-  generateRegionId_(region) {
-    const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
-    const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
-    const viewportAnchorUnit = region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
-    const uniqueRegionId = `${region.id}_${region.width}x${region.height}${heightUnit}-${region.viewportAnchorX}x${region.viewportAnchorY}${viewportAnchorUnit}`;
-    return uniqueRegionId;
-  }
-  /**
-   * Get or create a region element corresponding to the cue region.  These are
-   * cached by ID.
-   *
-   * @param {!shaka.text.Cue} cue
-   * @return {!HTMLElement}
-   * @private
-   */
-
-
-  getRegionElement_(cue) {
-    const {
-      region
-    } = cue; // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#caption-window-size
-    // if aspect ratio is 4/3, use that value, otherwise, use the 16:9 value
-
-    const lineWidthMultiple = this.aspectRatio_ === 4 / 3 ? 2.5 : 1.9;
-    const lineHeightMultiple = 5.33;
-    const regionId = this.generateRegionId_(region);
-
-    if (this.regionElements_.has(regionId)) {
-      return this.regionElements_.get(regionId);
-    }
-
-    const regionElement = document.createElement('span');
-    const linesUnit = shaka.text.CueRegion.units.LINES;
-    const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
-    const pixelUnit = shaka.text.CueRegion.units.PX;
-    let heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
-    let widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
-    const viewportAnchorUnit = region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
-    regionElement.id = `shaka-text-region---${regionId}`;
-    regionElement.classList.add('shaka-text-region');
-    regionElement.style.position = 'absolute';
-    let regionHeight = region.height;
-    let regionWidth = region.width;
-
-    if (region.heightUnits === linesUnit) {
-      regionHeight = region.height * lineHeightMultiple;
-      heightUnit = '%';
-    }
-
-    if (region.widthUnits === linesUnit) {
-      regionWidth = region.width * lineWidthMultiple;
-      widthUnit = '%';
-    }
-
-    regionElement.style.height = regionHeight + heightUnit;
-    regionElement.style.width = regionWidth + widthUnit;
-
-    if (region.viewportAnchorUnits === linesUnit) {
-      // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-708
-      let top = region.viewportAnchorY / 75 * 100;
-      const windowWidth = this.aspectRatio_ === 4 / 3 ? 160 : 210;
-      let left = region.viewportAnchorX / windowWidth * 100; // adjust top and left values based on the region anchor and window size
-
-      top -= region.regionAnchorY * regionHeight / 100;
-      left -= region.regionAnchorX * regionWidth / 100;
-      regionElement.style.top = `${top}%`;
-      regionElement.style.left = `${left}%`;
-    } else {
-      regionElement.style.top = region.viewportAnchorY - region.regionAnchorY * regionHeight / 100 + viewportAnchorUnit;
-      regionElement.style.left = region.viewportAnchorX - region.regionAnchorX * regionWidth / 100 + viewportAnchorUnit;
-    }
-
-    if (region.heightUnits !== pixelUnit && region.widthUnits !== pixelUnit && region.viewportAnchorUnits !== pixelUnit) {
-      // Clip region
-      const top = parseInt(regionElement.style.top.slice(0, -1), 10) || 0;
-      const left = parseInt(regionElement.style.left.slice(0, -1), 10) || 0;
-      const height = parseInt(regionElement.style.height.slice(0, -1), 10) || 0;
-      const width = parseInt(regionElement.style.width.slice(0, -1), 10) || 0;
-      const realTop = Math.max(0, Math.min(100 - height, top));
-      const realLeft = Math.max(0, Math.min(100 - width, left));
-      regionElement.style.top = `${realTop}%`;
-      regionElement.style.left = `${realLeft}%`;
-    }
-
-    regionElement.style.display = 'flex';
-    regionElement.style.flexDirection = 'column';
-    regionElement.style.alignItems = 'center';
-
-    if (cue.displayAlign == shaka.text.Cue.displayAlign.BEFORE) {
-      regionElement.style.justifyContent = 'flex-start';
-    } else if (cue.displayAlign == shaka.text.Cue.displayAlign.CENTER) {
-      regionElement.style.justifyContent = 'center';
-    } else {
-      regionElement.style.justifyContent = 'flex-end';
-    }
-
-    this.regionElements_.set(regionId, regionElement);
-    return regionElement;
-  }
-  /**
-   * Creates the object for a cue.
-   *
-   * @param {!shaka.text.Cue} cue
-   * @param {!Array<!shaka.text.Cue>} parents
-   * @private
-   */
-
-
-  createCue_(cue, parents) {
-    const isNested = parents.length > 1;
-    let type = isNested ? 'span' : 'div';
-
-    if (cue.lineBreak) {
-      type = 'br';
-    }
-
-    if (cue.rubyTag) {
-      type = cue.rubyTag;
-    }
-
-    const needWrapper = !isNested && cue.nestedCues.length > 0; // Nested cues are inline elements.  Top-level cues are block elements.
-
-    const cueElement = document.createElement(type);
-
-    if (type != 'br') {
-      this.setCaptionStyles_(cueElement, cue, parents, needWrapper);
-
-      if (!cue.line) {
-        cueElement.classList.add(`shaka-cue-${cue.writingMode}`);
-      }
-    }
-
-    let regionElement = null;
-
-    if (cue.region && cue.region.id) {
-      regionElement = this.getRegionElement_(cue);
-    }
-
-    let wrapper = cueElement;
-
-    if (needWrapper) {
-      // Create a wrapper element which will serve to contain all children into
-      // a single item.  This ensures that nested span elements appear
-      // horizontally and br elements occupy no vertical space.
-      wrapper = document.createElement('span');
-      wrapper.classList.add('shaka-text-wrapper');
-      wrapper.style.backgroundColor = cue.backgroundColor;
-      wrapper.style.lineHeight = 'normal';
-      cueElement.appendChild(wrapper);
-    }
-
-    this.currentCuesMap_.set(cue, {
-      cueElement,
-      wrapper,
-      regionElement
-    });
-  }
-  /**
-   * Compute cue position alignment
-   * See https://www.w3.org/TR/webvtt1/#webvtt-cue-position-alignment
-   *
-   * @param {!shaka.text.Cue} cue
-   * @private
-   */
-
-
-  computeCuePositionAlignment_(cue) {
-    const {
-      Cue
-    } = shaka.text;
-    const {
-      direction,
-      positionAlign,
-      textAlign
-    } = cue;
-
-    if (positionAlign !== Cue.positionAlign.AUTO) {
-      // Position align is not AUTO: use it
-      return positionAlign;
-    } // Position align is AUTO: use text align to compute its value
-
-
-    if (textAlign === Cue.textAlign.LEFT || textAlign === Cue.textAlign.START && direction === Cue.direction.HORIZONTAL_LEFT_TO_RIGHT || textAlign === Cue.textAlign.END && direction === Cue.direction.HORIZONTAL_RIGHT_TO_LEFT) {
-      return Cue.positionAlign.LEFT;
-    }
-
-    if (textAlign === Cue.textAlign.RIGHT || textAlign === Cue.textAlign.START && direction === Cue.direction.HORIZONTAL_RIGHT_TO_LEFT || textAlign === Cue.textAlign.END && direction === Cue.direction.HORIZONTAL_LEFT_TO_RIGHT) {
-      return Cue.positionAlign.RIGHT;
-    }
-
-    return Cue.positionAlign.CENTER;
-  }
-  /**
-   * @param {!HTMLElement} cueElement
-   * @param {!shaka.text.Cue} cue
-   * @param {!Array<!shaka.text.Cue>} parents
-   * @param {boolean} hasWrapper
-   * @private
-   */
-
-
-  setCaptionStyles_(cueElement, cue, parents, hasWrapper) {
-    const {
-      Cue
-    } = shaka.text;
-
-    const inherit = cb => inheritProperty_(parents, cb);
-
-    const {
-      style
-    } = cueElement;
-    const isLeaf = cue.nestedCues.length == 0;
-    const isNested = parents.length > 1; // TODO: wrapLine is not yet supported.  Lines always wrap.
-    // White space should be preserved if emitted by the text parser.  It's the
-    // job of the parser to omit any whitespace that should not be displayed.
-    // Using 'pre-wrap' means that whitespace is preserved even at the end of
-    // the text, but that lines which overflow can still be broken.
-
-    style.whiteSpace = 'pre-wrap'; // Using 'break-spaces' would be better, as it would preserve even trailing
-    // spaces, but that only shipped in Chrome 76.  As of July 2020, Safari
-    // still has not implemented break-spaces, and the original Chromecast will
-    // never have this feature since it no longer gets firmware updates.
-    // So we need to replace trailing spaces with non-breaking spaces.
-
-    const text = cue.payload.replace(/\s+$/g, match => {
-      const nonBreakingSpace = '\xa0';
-      return nonBreakingSpace.repeat(match.length);
-    });
-    style.webkitTextStrokeColor = cue.textStrokeColor;
-    style.webkitTextStrokeWidth = cue.textStrokeWidth;
-    style.color = cue.color;
-    style.direction = cue.direction;
-    style.opacity = cue.opacity;
-    style.paddingLeft = convertLengthValue_(cue.linePadding, cue, this.videoContainer_);
-    style.paddingRight = convertLengthValue_(cue.linePadding, cue, this.videoContainer_);
-    style.textCombineUpright = cue.textCombineUpright;
-    style.textShadow = cue.textShadow;
-
-    if (cue.backgroundImage) {
-      style.backgroundImage = `url('${cue.backgroundImage}')`;
-      style.backgroundRepeat = 'no-repeat';
-      style.backgroundSize = 'contain';
-      style.backgroundPosition = 'center';
-
-      if (cue.backgroundColor) {
-        style.backgroundColor = cue.backgroundColor;
-      } // Quoting https://www.w3.org/TR/ttml-imsc1.2/:
-      // "The width and height (in pixels) of the image resource referenced by
-      // smpte:backgroundImage SHALL be equal to the width and height expressed
-      // by the tts:extent attribute of the region in which the div element is
-      // presented".
-
-
-      style.width = '100%';
-      style.height = '100%';
-    } else {
-      // If we have both text and nested cues, then style everything; otherwise
-      // place the text in its own <span> so the background doesn't fill the
-      // whole region.
-      let elem;
-
-      if (cue.nestedCues.length) {
-        elem = cueElement;
-      } else {
-        elem = document.createElement('span');
-        cueElement.appendChild(elem);
-      }
-
-      if (cue.border) {
-        elem.style.border = cue.border;
-      }
-
-      if (!hasWrapper) {
-        const bgColor = inherit(c => c.backgroundColor);
-
-        if (bgColor) {
-          elem.style.backgroundColor = bgColor;
-        } else if (text) {
-          // If there is no background, default to a semi-transparent black.
-          // Only do this for the text itself.
-          elem.style.backgroundColor = 'rgba(0, 0, 0, 0)';
-        }
-      }
-
-      if (text) {
-        elem.textContent = text;
-      }
-    } // The displayAlign attribute specifies the vertical alignment of the
-    // captions inside the text container. Before means at the top of the
-    // text container, and after means at the bottom.
-
-
-    if (/ruby|rt/i.test(cueElement.tagName)) ; else if (isNested && !parents[parents.length - 1].isContainer) {
-      style.display = 'inline';
-    } else {
-      style.display = 'flex';
-      style.flexDirection = 'column';
-      style.alignItems = 'center';
-
-      if (cue.textAlign == Cue.textAlign.LEFT || cue.textAlign == Cue.textAlign.START) {
-        style.width = '100%';
-        style.alignItems = 'start';
-      } else if (cue.textAlign == Cue.textAlign.RIGHT || cue.textAlign == Cue.textAlign.END) {
-        style.width = '100%';
-        style.alignItems = 'end';
-      } // in VTT displayAlign can't be set, it defaults to 'after',
-      // but for vertical, it should be 'before'
-
-
-      if (/vertical/.test(cue.writingMode)) {
-        style.justifyContent = 'flex-start';
-      } else if (cue.displayAlign == Cue.displayAlign.BEFORE) {
-        style.justifyContent = 'flex-start';
-      } else if (cue.displayAlign == Cue.displayAlign.CENTER) {
-        style.justifyContent = 'center';
-      } else {
-        style.justifyContent = 'flex-end';
-      }
-    }
-
-    if (!isLeaf) {
-      style.margin = '0';
-    }
-
-    style.fontFamily = cue.fontFamily;
-    style.fontWeight = cue.fontWeight.toString();
-    style.fontStyle = cue.fontStyle;
-    style.letterSpacing = cue.letterSpacing;
-    style.fontSize = convertLengthValue_(cue.fontSize, cue, this.videoContainer_); // The line attribute defines the positioning of the text container inside
-    // the video container.
-    // - The line offsets the text container from the top, the right or left of
-    //   the video viewport as defined by the writing direction.
-    // - The value of the line is either as a number of lines, or a percentage
-    //   of the video viewport height or width.
-    // The lineAlign is an alignment for the text container's line.
-    // - The Start alignment means the text container’s top side (for horizontal
-    //   cues), left side (for vertical growing right), or right side (for
-    //   vertical growing left) is aligned at the line.
-    // - The Center alignment means the text container is centered at the line
-    //   (to be implemented).
-    // - The End Alignment means The text container’s bottom side (for
-    //   horizontal cues), right side (for vertical growing right), or left side
-    //   (for vertical growing left) is aligned at the line.
-    // TODO: Implement line alignment with line number.
-    // TODO: Implement lineAlignment of 'CENTER'.
-
-    let line = !isNested && /vertical/.test(cue.writingMode) && cue.line == null ? 0 : cue.line;
-
-    if (line != null) {
-      let {
-        lineInterpretation
-      } = cue; // HACK: the current implementation of UITextDisplayer only handled
-      // PERCENTAGE, so we need convert LINE_NUMBER to PERCENTAGE
-
-      if (lineInterpretation == Cue.lineInterpretation.LINE_NUMBER) {
-        lineInterpretation = Cue.lineInterpretation.PERCENTAGE;
-        let maxLines = 16; // The maximum number of lines is different if it is a vertical video.
-
-        if (this.aspectRatio_ && this.aspectRatio_ < 1) {
-          maxLines = 32;
-        }
-
-        if (line < 0) {
-          line = 100 + line / maxLines * 100;
-        } else {
-          line = line / maxLines * 100;
-        }
-      }
-
-      if (lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
-        style.position = 'absolute';
-
-        if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
-          style.width = '100%';
-
-          if (cue.lineAlign == Cue.lineAlign.START) {
-            style.top = `${line}%`;
-          } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.bottom = `${100 - line}%`;
-          }
-        } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
-          style.height = '100%';
-
-          if (cue.lineAlign == Cue.lineAlign.START) {
-            style.left = `${3 + line}%`;
-          } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.right = `${97 - line}%`;
-          }
-        } else {
-          style.height = '100%';
-
-          if (cue.lineAlign == Cue.lineAlign.START) {
-            style.right = `${3 + line}%`;
-          } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.left = `${97 - line}%`;
-          }
-        }
-      }
-    }
-
-    style.lineHeight = cue.lineHeight; // The positionAlign attribute is an alignment for the text container in
-    // the dimension of the writing direction.
-
-    if (!isNested && /vertical/.test(cue.writingMode) && cue.position == null) {
-      cue.position = 1;
-    }
-
-    const computedPositionAlign = this.computeCuePositionAlignment_(cue);
-    const computedCuePosition = !isNested && /vertical/.test(cue.writingMode) && cue.position == null ? 1 : cue.position;
-
-    if (/ruby|rt/i.test(cueElement.tagName)) ; else if (computedPositionAlign == Cue.positionAlign.LEFT) {
-      style.cssFloat = 'left';
-
-      if (computedCuePosition !== null) {
-        style.position = 'absolute';
-
-        if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
-          style.left = `${computedCuePosition}%`;
-          style.width = 'auto';
-        } else {
-          style.top = `${computedCuePosition}%`;
-        }
-      }
-    } else if (computedPositionAlign == Cue.positionAlign.RIGHT) {
-      style.cssFloat = 'right';
-
-      if (computedCuePosition !== null) {
-        style.position = 'absolute';
-
-        if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
-          style.right = `${100 - computedCuePosition}%`;
-          style.width = 'auto';
-        } else {
-          style.bottom = `${computedCuePosition}%`;
-        }
-      }
-    } else if (computedCuePosition !== null && computedCuePosition != 50) {
-      style.position = 'absolute';
-
-      if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
-        style.left = `${computedCuePosition}%`;
-        style.width = 'auto';
-      } else {
-        style.top = `${computedCuePosition}%`;
-      }
-    }
-
-    style.textAlign = cue.textAlign;
-    style.textDecoration = cue.textDecoration.join(' ');
-    style.writingMode = cue.writingMode; // Old versions of Chromium, which may be found in certain versions of Tizen
-    // and WebOS, may require the prefixed version: webkitWritingMode.
-    // https://caniuse.com/css-writing-mode
-    // However, testing shows that Tizen 3, at least, has a 'writingMode'
-    // property, but the setter for it does nothing.  Therefore we need to
-    // detect that and fall back to the prefixed version in this case, too.
-
-    if (!('writingMode' in document.documentElement.style) || style.writingMode != cue.writingMode) {
-      // Note that here we do not bother to check for webkitWritingMode support
-      // explicitly.  We try the unprefixed version, then fall back to the
-      // prefixed version unconditionally.
-      style.webkitWritingMode = cue.writingMode;
-    } // The size is a number giving the size of the text container, to be
-    // interpreted as a percentage of the video, as defined by the writing
-    // direction.
-
-
-    if (cue.size) {
-      if (cue.writingMode != Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
-        style.height = `${cue.size}%`;
-      }
-    }
-  }
-
-}
-
-/* eslint-disable eqeqeq */
-
-const getQualityItem = track => ({
-  id: track.originalVideoId,
-  bitrate: track.videoBandwidth,
-  width: track.width,
-  height: track.height,
-  codec: track.videoCodec,
-  frameRate: track.frameRate
-});
-
-const rewriteDashManifest = (type, response) => {
-  const {
-    MANIFEST
-  } = window.shaka.net.NetworkingEngine.RequestType;
-
-  if (type !== MANIFEST) {
-    return response;
-  }
-
-  const data = new TextDecoder().decode(response.data);
-
-  if (/<MPD/i.test(data)) {
-    response.data = new TextEncoder().encode(fixDashManifest(data));
-  }
-
-  return response;
-};
-
-const sleep = ms => new Promise(r => {
-  setTimeout(r, ms);
-});
-
-const MAX_ERROR_RETRY = 3;
-const RETRY_DELAY = 5000; // waiting for media server (shaka-package) to reset
-
-const isSegmentNotFound = detail => (detail === null || detail === void 0 ? void 0 : detail.code) === window.shaka.util.Error.Code.BAD_HTTP_STATUS && detail.severity === window.shaka.util.Error.Severity.RECOVERABLE && (detail === null || detail === void 0 ? void 0 : detail.data[1]) === 404;
-
-const syncStartOver = (media, player) => {
-  media.addEventListener('timeupdate', () => {
-    const {
-      start,
-      end
-    } = player.seekRange();
-    const defaultLiveOffset = end - Date.now() / 1000;
-    const seekDurationDiff = end - start - Date.now() / 1000;
-
-    if (media.defaultLiveOffset && Math.abs(defaultLiveOffset - media.defaultLiveOffset) + Math.abs(seekDurationDiff - media.seekDurationDiff) > 7) {
-      media.defaultLiveOffset = defaultLiveOffset;
-      media.seekDurationDiff = seekDurationDiff;
-    }
-  });
-}; // TODO: we avoid depending on base player instance, but playlog things should be in playlog place
-
-
-const proxyTextTrackEvents = (media, {
-  player
-}) => {
-  const handleTextTrackChange = () => media.dispatchEvent(new CustomEvent('textTrackChange', {
-    detail: {
-      getTextTracks: () => player.isTextTrackVisible() ? player.getTextTracks() : []
-    }
-  }));
-
-  player.addEventListener('texttrackvisibility', handleTextTrackChange);
-  player.addEventListener('textchange', handleTextTrackChange);
-};
-
-const loadShaka = async (videoElement, config = {}, options = {}) => {
-  window.shakaMediaKeysPolyfill = true;
-  const shakaModule = await import('shaka-player');
-  const shaka = shakaModule.default || shakaModule;
-  window.shaka = shaka;
-  shaka.polyfill.installAll();
-  const player = new shaka.Player();
-  getUrlObject(mediaSource => {
-    if (player) {
-      player.mediaSource = mediaSource;
-    }
-  });
-  player.attach(videoElement);
-  player.configure({ ...config,
-    manifest: {
-      dash: {
-        ignoreSuggestedPresentationDelay: true
-      },
-      retryParameters: {
-        maxAttempts: 6
-      },
-      ...config.manifest
-    },
-    streaming: {
-      autoLowLatencyMode: true,
-      // To reduce the unseekable range at the start of the manifests.
-      // See: https://github.com/shaka-project/shaka-player/issues/3526
-      safeSeekOffset: 0,
-      rebufferingGoal: 0,
-      ...(isSafari() && {
-        preferNativeHls: true
-      }),
-      ...config.streaming
-    },
-    // iPhone Safari is video only fullscreen must use native text display
-    ...(options.container && document.fullscreenEnabled && {
-      textDisplayFactory: () => new UITextDisplayer(videoElement, options.container)
-    })
-  });
-  syncStartOver(videoElement, player);
-  player.addEventListener('error', event => {
-    var _detail$data, _detail$data$some, _detail$message, _window$Sentry;
-
-    console.log(event);
-    const {
-      detail = {}
-    } = event;
-    const error = new Error(`Player: ${detail.code}/${detail.name}`);
-
-    if (!detail || /The video element has thrown a media error|Video element triggered an Error/.test(detail.message) || (_detail$data = detail.data) !== null && _detail$data !== void 0 && (_detail$data$some = _detail$data.some) !== null && _detail$data$some !== void 0 && _detail$data$some.call(_detail$data, message => /Unsupported source type/i.test(message))) {
-      return;
-    }
-
-    if (detail.code == 3016) {
-      return;
-    } // Handle D3 edge case: we don't fetch segments due to wrong index.
-
-
-    if (isSegmentNotFound(detail)) {
-      setTimeout(() => {
-        if (player.errorRetry < MAX_ERROR_RETRY) {
-          player.errorRetry += 1;
-          player.reload();
-        }
-      }, RETRY_DELAY);
-      return;
-    }
-
-    videoElement.dispatchEvent(Object.assign(new CustomEvent('error'), {
-      error: detail,
-      message: `Player Error: ${detail.code}/${(_detail$message = detail.message) === null || _detail$message === void 0 ? void 0 : _detail$message.split(' ', 3)[2]}`
-    }));
-
-    if (detail.code === 1001 || detail.severity === 2) {
-      console.info('Stream unavailable, unload source');
-      player.unload();
-    }
-
-    (_window$Sentry = window.Sentry) === null || _window$Sentry === void 0 ? void 0 : _window$Sentry.captureException(error);
-  });
-  player.addEventListener('loaded', () => {
-    videoElement.dispatchEvent(new CustomEvent('canplay', {}));
-  });
-  player.addEventListener('adaptation', event => {
-    const {
-      videoBandwidth,
-      width,
-      height
-    } = event.newTrack;
-
-    if (event.oldTrack.height !== height) {
-      videoElement.dispatchEvent(new CustomEvent('downloadQualityChange', {
-        detail: {
-          bitrate: parseInt(videoBandwidth / 1000, 10),
-          height,
-          width
-        }
-      }));
-    }
-  });
-  player.addEventListener('variantchanged', event => {
-    const {
-      language
-    } = event.newTrack;
-
-    if (event.oldTrack.language !== language) {
-      videoElement.dispatchEvent(new CustomEvent('audioTrackChange', {
-        detail: {
-          lang: language
-        }
-      }));
-    }
-  });
-  proxyTextTrackEvents(videoElement, {
-    player
-  });
-  const extensionOptions = {
-    requestHandlers: [],
-    responseHandlers: [rewriteDashManifest]
-  };
-
-  if (isSafari()) {
-    setupKKFariplay(player, extensionOptions);
-  }
-
-  const getAvailableVideoQualities = () => player.getVariantTracks().reduce((trackList, currentTrack) => {
-    const keepOrignalTrack = trackList.find(track => track.height === currentTrack.height);
-
-    if (!keepOrignalTrack) {
-      trackList.push(getQualityItem(currentTrack));
-    }
-
-    return trackList;
-  }, []);
-
-  const getVideoQuality = () => {
-    const activeTrack = player.getVariantTracks().find(track => track.active);
-    if (!activeTrack) return {};
-    return getQualityItem(activeTrack);
-  };
-
-  VttTextParser.register(shaka);
-  HttpFetchPlugin.register(shaka);
-  const networkEngine = player.getNetworkingEngine();
-  networkEngine.registerRequestFilter((type, request) => extensionOptions.requestHandlers.reduce((merged, handler) => handler(type, merged, player, extensionOptions), request));
-  networkEngine.registerResponseFilter((type, response) => extensionOptions.responseHandlers.reduce((merged, handler) => handler(type, merged, player, extensionOptions), response));
-  const load = player.load.bind(player); // refactor suggestion: don't add things to extensions unless there's no other way,
-  // if something needs to be changed, extract it first.
-
-  const extensions = {
-    shaka,
-    errorRetry: 0,
-    lastLoad: {},
-
-    get mediaSource() {
-      return player.mediaSource;
-    },
-
-    configureExtensions: ({
-      drm
-    } = {}) => {
-      extensionOptions.drm = drm;
-    },
-    load: async (assetUri, startTime, mimeType) => {
-      await sleep(0);
-      player.lastLoad = {
-        assetUri,
-        startTime,
-        mimeType
-      };
-      return load(assetUri, startTime, mimeType);
-    },
-    reload: async () => {
-      await player.unload();
-      const {
-        assetUri,
-        startTime,
-        mimeType
-      } = player.lastLoad;
-      return player.load(assetUri, startTime, mimeType);
-    },
-    getPlaybackSpeed: () => videoElement.playbackRate,
-    getVideoElement: () => videoElement,
-    getVideoQuality,
-    getAvailableVideoQualities,
-    isAlive: () => player.getLoadMode() !== shaka.Player.LoadMode.DESTROYED,
-    on: player.addEventListener.bind(player)
-  };
-  Object.assign(player, extensions);
-  return player;
-};
-
-const protocolExtensions = {
-  hls: 'm3u8',
-  dash: 'mpd'
-};
-const mimeTypes = {
-  hls: 'application/x-mpegurl',
-  dash: 'application/dash+xml'
-};
-
-const matchType = (source, manifestType) => {
-  var _source$type, _source$type2, _ref, _ref$endsWith;
-
-  return ((_source$type = source.type) === null || _source$type === void 0 ? void 0 : _source$type.toLowerCase().includes(manifestType)) || ((_source$type2 = source.type) === null || _source$type2 === void 0 ? void 0 : _source$type2.toLowerCase()) === mimeTypes[manifestType] || ((_ref = source.src || source) === null || _ref === void 0 ? void 0 : (_ref$endsWith = _ref.endsWith) === null || _ref$endsWith === void 0 ? void 0 : _ref$endsWith.call(_ref, protocolExtensions[manifestType]));
-};
-
-const getDrmOptions$1 = fallbackDrm => {
-  if (!(fallbackDrm !== null && fallbackDrm !== void 0 && fallbackDrm.url)) {
-    return;
-  }
-
-  const drmOptions = {
-    licenseUri: fallbackDrm.url,
-    headers: fallbackDrm.headers
-  };
-  return {
-    widevine: drmOptions,
-    fairplay: { ...drmOptions,
-      certificateUri: `${fallbackDrm.url}/fairplay_cert`,
-      ...fallbackDrm.fairplay
-    },
-    playready: drmOptions
-  };
-};
-/**
- * @typedef {{src: string, type: string}} SourceObject
- * @typedef {{hls: string, dash: string}} SourceObjectAlt backward compatiable form
- *
- * @param {SourceObject[]|SourceObject|SourceObjectAlt|string} sourceOptions
- * @param {{preferManifestType?: ('dash'|'hls'|'platform')}} options
- * @return {{src: string, type: string, drm: Object}}
- */
-
-
-const getSource = (sourceOptions, {
-  preferManifestType,
-  fallbackDrm
-} = {}) => {
-  if (sourceOptions.dash || sourceOptions.hls) {
-    const {
-      dash,
-      hls
-    } = sourceOptions;
-    return getSource([hls && {
-      src: hls,
-      type: mimeTypes.hls
-    }, dash && {
-      src: dash,
-      type: mimeTypes.dash
-    }].filter(Boolean), {
-      preferManifestType,
-      fallbackDrm
-    });
-  }
-
-  if (!Array.isArray(sourceOptions)) {
-    return getSource([sourceOptions], {
-      preferManifestType,
-      fallbackDrm
-    });
-  }
-
-  if (fallbackDrm) {
-    return getSource(sourceOptions.map(option => ({ ...(option.src ? option : {
-        src: option
-      }),
-      drm: getDrmOptions$1(fallbackDrm)
-    })), {
-      preferManifestType
-    });
-  }
-
-  const targetType = preferManifestType !== 'platform' ? preferManifestType : isSafari() ? 'hls' : 'dash';
-  const matched = sourceOptions.find(source => matchType(source, targetType));
-  const selected = matched || sourceOptions[0];
-
-  if (!selected) {
-    return;
-  }
-
-  const type = matched && preferManifestType === 'hls' && mimeTypes.hls;
-  return { ...(selected.src ? selected : {
-      src: selected
-    }),
-    type
-  };
-};
-
-const getSourceText = source => [].concat(source).filter(item => item.type === 'text/vtt');
-
-/* eslint-disable no-param-reassign */
-const keySystems = {
-  widevine: 'com.widevine.alpha',
-  fairplay: 'com.apple.fps.1_0',
-  playready: 'com.microsoft.playready'
-}; // TODO widevine levels
-
-const getDrmOptions = source => {
-  const drm = source.drm && Object.entries(source.drm).reduce((result, [keySystemId, options]) => {
-    const uri = typeof options === 'string' ? options : options.licenseUri;
-
-    if (uri) {
-      const keySystemName = keySystems[keySystemId] || keySystemId;
-      result.servers[keySystemName] = uri;
-      const {
-        headers,
-        certificateUri
-      } = options;
-      const advanced = [headers && {
-        headers
-      }, certificateUri && {
-        serverCertificateUri: certificateUri
-      }].filter(Boolean);
-
-      if (advanced.length > 0) {
-        result.advanced[keySystemName] = Object.assign({}, ...advanced);
-      }
-    }
-
-    return result;
-  }, {
-    servers: {},
-    advanced: {}
-  });
-  const extensions = source.drm && Object.entries(source.drm).reduce((result, [keySystemId, options]) => {
-    const keySystemName = keySystems[keySystemId] || keySystemId;
-
-    if (options.headers || options.certificateHeaders) {
-      result[keySystemName] = {
-        headers: options.headers,
-        ...(options.certificateHeaders && {
-          certificateHeaders: options.certificateHeaders
-        })
-      };
-    }
-
-    return result;
-  }, {});
-  return [drm, {
-    drm: extensions
-  }];
-};
-
-/* eslint-disable no-param-reassign */
-// when the gap is small enough, we consider it is on edge.
-// The magic number 10s comes from observation of YouTube
-
-const LIVE_EDGE_GAP = 10; // In shaka, duration is always 2^32 in live.
-
-const SHAKA_LIVE_DURATION = 4294967296;
-
-const isLiveDuration = duration => duration >= SHAKA_LIVE_DURATION;
-
-const isEnded = media => !isLiveDuration(media.initialDuration) && media.initialDuration - media.currentTime < 1; // When donwload bandwidth is low, Safari may report time update while buffering, ignore it.
-
-
-const isBuffered = media => isSafari() || Array.from({
-  length: media.buffered.length
-}, (_, index) => ({
-  start: media.buffered.start(index),
-  end: media.buffered.end(index)
-})).some( // in Safari buffered is clipped to integer
-range => range.start <= media.currentTime && media.currentTime <= range.end + 1);
-
-const getLiveTime = (media, {
-  player
-}) => {
-  const now = Date.now() / 1000;
-  const currentOffset = media.currentTime - media.defaultLiveOffset - now;
-  const seekDuration = media.seekDurationDiff + now;
-  const {
-    start,
-    end
-  } = player.seekRange();
-  return {
-    streamType: 'live',
-    startTime: -seekDuration,
-    currentTime: currentOffset < -LIVE_EDGE_GAP ? currentOffset : 0,
-    duration: end - start > 5 * LIVE_EDGE_GAP ? seekDuration : 0
-  };
-};
-
-const getMediaTime = (media, {
-  player,
-  plugins = []
-}) => {
-  const {
-    duration,
-    ...data
-  } = Object.assign(isLiveDuration(media.initialDuration) ? getLiveTime(media, {
-    player,
-    plugins
-  }) : {
-    currentTime: media.currentTime,
-    bufferTime: Math.max(...Array.from({
-      length: media.buffered.length
-    }, (_, index) => media.buffered.end(index))),
-    duration: media.initialDuration // monkey patched, duration may change for DASH playback
-
-  }, ...plugins.map(plugin => {
-    var _plugin$getPlaybackSt;
-
-    return (_plugin$getPlaybackSt = plugin.getPlaybackStatus) === null || _plugin$getPlaybackSt === void 0 ? void 0 : _plugin$getPlaybackSt.call(plugin);
-  }));
-  return { ...data,
-    ...((isLiveDuration(media.initialDuration) || Math.abs(media.duration - media.initialDuration) < 0.5) && {
-      duration
-    })
-  };
-};
-
-const HAVE_METADATA = 1;
-
-const getCurrentPlaybackState = media => media.autoplay ? 'playing' : 'paused';
-
-const subscribePlaybackState = (media, updateState, {
-  iOSFullscreenDetectThreshold = 500
-} = {}) => {
-  const lastUpdate = {
-    state: '',
-    time: 0
-  };
-
-  const updateIfChanged = (event, state) => {
-    // Safari may report abnormal currentTime, safe to ignore
-    if (media.currentTime > 1e13) {
-      return;
-    }
-
-    lastUpdate.time = media.currentTime;
-    lastUpdate.eventTime = Date.now();
-    lastUpdate.eventType = event.type;
-
-    if (state !== lastUpdate.state) {
-      lastUpdate.state = state; // don't sync while in iOS/iPhone video only fullscreen, until exit
-
-      lastUpdate.batched = media.webkitDisplayingFullscreen;
-
-      if (!lastUpdate.batched) {
-        updateState(event, state);
-      }
-    }
-  };
-
-  const updateBufferingState = event => {
-    if (!media.paused && !media.ended) {
-      updateIfChanged(event, 'buffering');
-    }
-  };
-
-  const updatePlaybackTime = event => {
-    if (!media.paused && isBuffered(media) && media.currentTime - lastUpdate.time > 0.01) {
-      updateIfChanged(event, 'playing');
-    }
-  };
-
-  const updateEnd = event => {
-    if (event.type === 'emptied' && lastUpdate.state !== 'loading') {
-      updateIfChanged(event, 'emptied');
-      return true;
-    }
-
-    if (isEnded(media) || event.type === 'ended') {
-      updateIfChanged(event, 'ended');
-      return true;
-    }
-  };
-
-  const registered = [on(media, 'error', event => updateIfChanged(event, 'error')), on(media, 'waiting', updateBufferingState), on(media, 'loadsource', event => updateIfChanged(event, 'loading')), on(media, 'loadedmetadata', event => setTimeout(() => {
-    if (media.paused && !(media.readyState > HAVE_METADATA)) {
-      updateIfChanged(event, getCurrentPlaybackState(media));
-    }
-  }, 1500)), on(media, 'loadeddata', event => setTimeout(() => {
-    if (media.paused && !event.defaultPrevented) {
-      updateIfChanged(event, getCurrentPlaybackState(media));
-    }
-  }, 1)), on(media, 'canplay', event => {
-    if (media.paused && (lastUpdate.state !== 'loading' || isIOS())) {
-      updateIfChanged(event, getCurrentPlaybackState(media));
-    }
-
-    updatePlaybackTime(event);
-  }), on(media, 'pause', event => {
-    // TODO extract iOS fullscreen handling
-    // there's 1 system triggered pause, ignore once to keep playing
-    if (Date.now() - lastUpdate.endFullscreenAt < 5 * iOSFullscreenDetectThreshold) {
-      lastUpdate.endFullscreenAt = 0;
-      media.play();
-      console.debug('Ignore pause from iOS exit fullscreen');
-      return;
-    }
-
-    if (!updateEnd(event)) {
-      updateIfChanged(event, 'paused');
-    }
-  }), on(media, 'seeking', updateBufferingState), on(media, 'seeked', event => {
-    if (lastUpdate.state === 'loading') {
-      updateIfChanged(event, getCurrentPlaybackState(media));
-    }
-  }), on(media, 'timeupdate', updatePlaybackTime), on(media, 'ended', updateEnd), on(media, 'emptied', updateEnd), on(media, 'webkitendfullscreen', event => {
-    // paused by native exit fullscreen button, should resume playing
-    if (lastUpdate.state === 'paused' && Date.now() - lastUpdate.eventTime < iOSFullscreenDetectThreshold) {
-      lastUpdate.endFullscreenAt = Date.now();
-      waitFor(() => !media.webkitDisplayingFullscreen, () => updateState(event, 'playing'));
-    } else {
-      // sync back current playback state in fullscreen
-      updateState(event, lastUpdate.state);
-    }
-  })];
-  return () => registered.forEach(off => off());
-};
-
-const seek = async (media, {
-  player,
-  plugins = []
-}, time, issuer) => {
-  if (media.readyState < HAVE_METADATA) {
-    await new Promise(resolve => {
-      media.addEventListener('loadeddata', resolve, {
-        once: true
-      });
-    });
-  } // TODO skip seeking to too near point, consider SSAI cases
-
-
-  const seekPlugin = plugins.find(plugin => typeof plugin.handleSeek === 'function' && plugin.isActive());
-
-  const seekInternal = seekTime => {
-    var _player$isLive, _player$seek;
-
-    // seeking to end video may cause Shaka glich, so move back a little
-    if (seekTime <= media.duration + 7 && seekTime >= media.duration - 1.0) {
-      return seekInternal(media.duration - 1.1);
-    }
-
-    player.shouldPlayFromEdge = false;
-    const seekOrigin = (_player$isLive = player.isLive) !== null && _player$isLive !== void 0 && _player$isLive.call(player) ? media.defaultLiveOffset + Date.now() / 1000 : 0; // when playing in Bitmovin, must call player.seek to sync internal time
-
-    (_player$seek = player.seek) === null || _player$seek === void 0 ? void 0 : _player$seek.call(player, seekTime, issuer); // player.seek sets time after adding segments,
-    // set again to reflect instantly
-
-    if (Math.abs(seekTime) <= LIVE_EDGE_GAP && seekOrigin !== 0) {
-      player.goToLive();
-    } else {
-      media.currentTime = seekTime + seekOrigin;
-    }
-
-    once(media, 'seeked', () => {
-      // when seeking to the end it may result in a few seconds earlier
-      if (Math.abs(seekTime + seekOrigin - media.currentTime) > 0.5) {
-        media.currentTime = seekTime + seekOrigin;
-      }
-    });
-  };
-
-  if (seekPlugin) {
-    seekPlugin.handleSeek(time, seekInternal);
-  } else {
-    seekInternal(time);
-  }
-};
-
-const load = async (media, {
-  player,
-  startTime,
-  plugins = []
-}, source) => {
-  const preferred = getSource(source, {
-    preferManifestType: 'platform'
-  }); // There's no use case that changing DRM options without changing manifest URL, just skip
-
-  if (player.lastSrc === (preferred === null || preferred === void 0 ? void 0 : preferred.src)) {
-    console.info('src is unchanged, skip load', preferred.src);
-    return;
-  }
-
-  player.lastSrc = preferred === null || preferred === void 0 ? void 0 : preferred.src; // playlog v2 depends on this event
-
-  media.dispatchEvent(new CustomEvent('loadsource'));
-  const merged = await plugins.reduce(async (loadChain, plugin) => {
-    var _plugin$load;
-
-    const currentSource = await loadChain;
-    const overrides = await ((_plugin$load = plugin.load) === null || _plugin$load === void 0 ? void 0 : _plugin$load.call(plugin, currentSource, {
-      video: media,
-      player,
-      source: currentSource,
-      startTime,
-      streamFormat: source.type,
-      reload: async () => {
-        // Bitmovin unexpectedly restores muted state, so save to restore
-        const restoreMuted = player.isMuted && {
-          muted: player.isMuted()
-        };
-        player.lastSrc = '';
-        await load(media, {
-          player,
-          startTime,
-          plugins
-        }, source);
-
-        if (restoreMuted) {
-          player[restoreMuted.muted ? 'mute' : 'unmute']();
-        }
-      }
-    }));
-    return overrides ? { ...currentSource,
-      ...(overrides.url && {
-        src: overrides.url
-      }),
-      ...(overrides.startTime >= 0 && {
-        startTime: overrides.startTime
-      })
-    } : currentSource;
-  }, { ...preferred,
-    startTime
-  });
-  media.addEventListener('durationchange', () => {
-    // media duration may change when playing VOD to live or SSAI streams, save it here for convenience
-    media.initialDuration = media.duration;
-  }, {
-    once: true
-  });
-  once(media, 'loadeddata', () => {
-    const seekToStart = (delay = 1) => {
-      if (merged.startTime > 0 || merged.startTime < 0) {
-        // Safari may glitch if seek immediately, so wait a little bit
-        setTimeout(() => seek(media, {
-          player,
-          plugins
-        }, merged.startTime), delay);
-      }
-    };
-
-    if (player.isLive()) {
-      player.shouldPlayFromEdge = player.isLive() && !(merged.startTime < 0);
-      once(media, 'timeupdate', () => {
-        player.shouldPlayFromEdge = false;
-        const {
-          start,
-          end
-        } = player.seekRange();
-        media.defaultLiveOffset = media.currentTime - Date.now() / 1000;
-        media.seekDurationDiff = end - start - Date.now() / 1000;
-        seekToStart();
-      });
-    } else {
-      seekToStart();
-    }
-  });
-  const [drmOptions, extensions] = getDrmOptions(preferred);
-  player.configure({
-    drm: drmOptions
-  });
-  player.configureExtensions(extensions);
-  let loadStartTime; // TODO unset or find a proper start time for live streams
-
-  if (merged.type !== 'application/x-mpegurl') {
-    loadStartTime = merged.startTime;
-  }
-
-  return player.unload().then(() => player.load(merged.src, loadStartTime, merged.type)).then(loadResult => {
-    getSourceText(source).forEach(({
-      src,
-      language = 'en',
-      type = 'text/vtt',
-      label = language
-    }) => player.addTextTrackAsync(src, language, 'subtitles', type, '', label).catch(error => console.warn('Failed to add text track', error)));
-    return loadResult;
-  }).catch(error => {
-    media.dispatchEvent(Object.assign(new CustomEvent('error'), {
-      error
-    }));
-  });
-};
-
-const reloadOnLiveStall = (media, {
-  reload,
-  stallDuration = 6000
-}) => {
-  const getBufferedEnd = () => {
-    var _media$buffered;
-
-    return Math.max(0, ...Array.from({
-      length: ((_media$buffered = media.buffered) === null || _media$buffered === void 0 ? void 0 : _media$buffered.length) || 0
-    }, (_, i) => media.buffered.end(i)));
-  };
-
-  let checkTimer;
-  const state = {
-    lastBufferedEnd: 0
-  };
-  const removeListener = on(media, 'loadeddata', () => {
-    if (!isLiveDuration(media.duration)) {
-      return;
-    }
-
-    const checkStall = () => {
-      const currentBufferedEnd = getBufferedEnd();
-
-      if (!media.paused && state.lastBufferedEnd === currentBufferedEnd && ( // playback position may move to edge on SegmentTemplate manifest update,
-      // in this case buffer is empty
-      media.buffered.length < 1 || state.lastPlayed === media.currentTime)) {
-        console.warn('Live stream stall, reload to recover');
-        state.lastBufferedEnd = 0;
-        reload();
-      }
-
-      state.lastBufferedEnd = currentBufferedEnd;
-      state.lastPlayed = media.currentTime;
-      clearTimeout(checkTimer);
-      checkTimer = setTimeout(checkStall, stallDuration);
-    };
-
-    clearTimeout(checkTimer);
-    checkTimer = setTimeout(checkStall, stallDuration);
-  });
-  return () => {
-    removeListener();
-    clearTimeout(checkTimer);
-  };
-};
-
-const loadPlayer = async (videoElement, {
-  container,
-  source,
-  shaka,
-  bitmovin
-}) => {
-  // TODO unsubscribe to release the video element
-  // when resuming from background, video may play without no media events
-  // on some iOS devices, pause again to workaround
-  if (isIOS()) {
-    on(document, 'visibilitychange', () => setTimeout(() => videoElement.pause(), 50));
-  }
-
-  printVersion();
-  let player;
-
-  if (source !== null && source !== void 0 && source.native) {
-    player = await loadNative({
-      videoElement
-    });
-  } // default to Shaka
-  else if (shaka || !bitmovin) {
-    player = await loadShaka(videoElement, shaka, {
-      container
-    });
-    videoElement.dispatchEvent(new CustomEvent('playerStarted'));
-  } // use external load function to avoid Bitmovin dependency, TODO docs to be added
-  else if (bitmovin !== null && bitmovin !== void 0 && bitmovin.load) {
-    player = await bitmovin.load({
-      container,
-      videoElement,
-      config: bitmovin
-    });
-    videoElement.dispatchEvent(new CustomEvent('playerStarted'));
-  } // TODO load other players: dash.js, hls.js
-
-
-  reloadOnLiveStall(videoElement, {
-    reload: () => player.reload()
-  });
-  player.preferredSettings = {}; // TODO load built-in modules here
-
-  player.modules = {};
-  return player;
-};
-
-var loadPlayer$1 = loadPlayer;
-
-export { getMediaTime, isLiveDuration, load, loadPlayer$1 as loadPlayer, seek, subscribePlaybackState };