@kkcompany/player 2.25.0-canary.17 → 2.25.0-canary.19

package/dist/index.mjs

@@ -812,7 +812,7 @@ function convertToSeconds(timeString) {
 function getVersion() {
   try {
     // eslint-disable-next-line no-undef
-    return "2.25.0-canary.17";
+    return "2.25.0-canary.19";
   } catch (e) {
     return undefined;
   }
@@ -1106,11 +1106,26 @@ const getSettingsData = ({
 const matchTracks = (tracks, sorted) => {
   var _tracks$;
 
-  return ((_tracks$ = tracks[0]) === null || _tracks$ === void 0 ? void 0 : _tracks$.type) === 'audio' && (sorted === null || sorted === void 0 ? void 0 : sorted.length) === 1 ? [{ ...tracks[0],
-    ...sorted[0]
-  }] : (sorted === null || sorted === void 0 ? void 0 : sorted.map(track => ({ ...tracks.find(t => t.language === track.language),
-    ...track
-  })).filter(Boolean)) || tracks;
+  const lookup = {};
+  tracks.forEach(track => {
+    lookup[`${track.language}|${track.label}`] = track;
+    lookup[`${track.language}|`] = track;
+    lookup[`|${track.label}`] = track;
+  });
+  const matched = sorted.map(info => {
+    const track = lookup[`${info.language}|${info.label}`] || lookup[`${info.language}|`];
+    return track && { ...track,
+      ...info
+    };
+  }).filter(Boolean);
+
+  if (((_tracks$ = tracks[0]) === null || _tracks$ === void 0 ? void 0 : _tracks$.type) === 'audio' && matched.length === 0) {
+    return [{ ...tracks[0],
+      ...sorted[0]
+    }];
+  }
+
+  return matched;
 };
 
 const getLanguageOptions = (player, sorted) => {
@@ -2331,7 +2346,7 @@ var ja = {
 	"KKS.QUALITY": "解像度",
 	"KKS.AUDIO": "音声",
 	"KKS.SETTING.OFF": "オフ",
-	"KKS.SETTING.none": "オフ",
+	"KKS.SETTING.none": "なし",
 	"KKS.SETTING.ja": "日本語",
 	"KKS.SETTING.en": "英語",
 	"KKS.SUBTITLES": "字幕",
@@ -3132,13 +3147,10 @@ const nativeTextStyle = {
 };
 const customTextStyle = {
   '.shaka-text-container': {
+    boxSizing: 'border-box',
     padding: '2cqmin',
     font: '3cqmin/1 sans-serif',
     color: '#ffffff',
-    fontFamily: 'system-ui-monospaced',
-    'unicode-bidi': 'plaintext',
-    'overflow-wrap': 'break-word',
-    textWrap: 'balance',
     textShadow: '1px 1px 0.2cqmin #000'
   },
   '.shaka-text-container > .shaka-cue-horizontal-tb': {
@@ -6007,7 +6019,7 @@ const makeResponse = (headers, data, status, uri, responseURL, requestType) => {
   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$1 = {
+const goog$2 = {
   asserts: {
     assert: () => {}
   }
@@ -6153,7 +6165,7 @@ class HttpFetchPlugin {
           }
 
           if (readObj.done) {
-            goog$1.asserts.assert(!readObj.value, 'readObj should be unset when "done" is true.');
+            goog$2.asserts.assert(!readObj.value, 'readObj should be unset when "done" is true.');
             controller.close();
           } else {
             controller.enqueue(readObj.value);
@@ -6392,6 +6404,664 @@ const fixDashManifest = (data, {
   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
@@ -7281,9 +7951,13 @@ class UITextDisplayer {
       } 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 (cue.displayAlign == Cue.displayAlign.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';
@@ -7656,6 +8330,7 @@ const loadShaka = async (videoElement, config = {}, options = {}) => {
     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));