feat(FEC-13664): Add the ability to configure default alignment of captions on the player #

docs/configuration.md

@@ -36,7 +36,6 @@ var config = {
   text: {
     enableCEA708Captions: true,
     useNativeTextTrack: false,
-    forceCenter: false,
     captionsTextTrack1Label: 'English',
     captionsTextTrack1LanguageCode: 'en',
     captionsTextTrack2Label: 'Spanish',
@@ -544,7 +543,6 @@ var config = {
 > {
 >  useNativeTextTrack: boolean,
 >  enableCEA708Captions: boolean,
->  forceCenter: boolean,
 >  textTrackDisplaySetting: PKTextTrackDisplaySettingObject,
 >  textStyle: TextStyle,
 >  captionsTextTrack1Label: string,
@@ -560,7 +558,6 @@ var config = {
 > {
 >  useNativeTextTrack: false,
 >  enableCEA708Captions: true,
->  forceCenter: false,
 >  captionsTextTrack1Label: "English",
 >  captionsTextTrack1LanguageCode: "en",
 >  captionsTextTrack2Label: "Spanish",
@@ -592,16 +589,6 @@ var config = {
 >
 > ##
 >
-> > ### config.text.forceCenter
-> >
-> > ##### Type: `Object`
-> >
-> > ##### Default: `false`
-> >
-> > ##### Description: set the forceCenter to true will override the position, align and size in textTrackDisplaySetting
->
-> ##
->
 > > ### config.text.textTrackDisplaySetting
 > >
 > > ##### Type: `PKTextTrackDisplaySettingObject`
@@ -616,7 +603,6 @@ var config = {
 > {
 >   line: string | number, // [-16 .. 16]
 >   lineAlign: string, // ['start', 'center', 'end']
->   align: string, // ['start', 'center', 'end', 'left', 'right']
 >   position: number, //[0 .. 100]
 >   positionAlign: string, // ['line-left', 'center', 'line-right']
 >   snapToLines: boolean, // [true, false]
@@ -633,10 +619,6 @@ var config = {
 > >
 > > An alignment for the cue box’s line, one of start/center/end alignment
 > >
-> > ##### align
-> >
-> > An alignment for all lines of text within the cue box, in the dimension of the writing direction
-> >
 > > ##### snapToLines
 > >
 > > is a boolean indicating whether the line is an integer number of lines (using the line dimensions of the first line of the cue), or whether it is a percentage of the dimension of the video. The flag is set to true when lines are counted, and false otherwise.
@@ -678,6 +660,7 @@ var config = {
 > > ```js
 > > {
 > >   fontSize?: '50%' | '75%' | '100%' | '200%' | '300%' | '400%'
+> >   textAlign?: string, // ['center', 'left', 'right']
 > >   fontScale?: -2 | -1 | 0 | 2 | 3 | 4
 > >   fontFamily?: string, // font family available in browser
 > >   fontColor?: [number, number, number], // RGB
@@ -693,6 +676,10 @@ var config = {
 > > }
 > > ```
 > >
+> > ##### textAlign
+> >
+> > An alignment for all lines of text within the cue box, in the dimension of the writing direction
+> >
 > > ##### fontSize
 > >
 > > Percentage unit relative to the parent element's font

flow-typed/types/text-config.js

@@ -7,7 +7,6 @@ declare type PKTextConfigObject = {
   useNativeTextTrack: boolean,
   textTrackDisplaySetting: PKTextTrackDisplaySettingObject,
   textStyle: PKTextStyleObject,
-  forceCenter: boolean,
   captionsTextTrack1Label: string,
   captionsTextTrack1LanguageCode: string,
   captionsTextTrack2Label: string,

flow-typed/types/text-track-display-setting.js

@@ -2,7 +2,6 @@
 declare type PKTextTrackDisplaySettingObject = {
   line: string | number,
   lineAlign: string,
-  align: string,
   position: number,
   positionAlign: string,
   snapToLines: boolean,

src/player-config.js

@@ -7,7 +7,6 @@ const DefaultConfig = {
   text: {
     enableCEA708Captions: true,
     useNativeTextTrack: false,
-    forceCenter: false,
     captionsTextTrack1Label: 'English',
     captionsTextTrack1LanguageCode: 'en',
     captionsTextTrack2Label: 'Spanish',

src/player.ts

@@ -30,7 +30,7 @@ import {EngineProvider} from './engines/engine-provider';
 import {ExternalCaptionsHandler} from './track/external-captions-handler';
 import {AdBreakType} from './ads/ad-break-type';
 import {AdTagType} from './ads/ad-tag-type';
-import {ResizeWatcher} from './utils';
+import {ResizeWatcher, getSubtitleStyleSheet, resetSubtitleStyleSheet} from './utils';
 import {FullscreenController} from './fullscreen/fullscreen-controller';
 import {EngineDecorator, EngineDecoratorType} from './engines/engine-decorator';
 import {LabelOptions} from './track/label-options';
@@ -78,13 +78,6 @@ const POSTER_CLASS_NAME: string = 'playkit-poster';
  */
 const ENGINE_CLASS_NAME: string = 'playkit-engine';
 
-/**
- * The text style class name.
- * @type {string}
- * @const
- */
-const SUBTITLES_STYLE_CLASS_NAME: string = 'playkit-subtitles-style';
-
 /**
  * The subtitles class name.
  * @type {string}
@@ -471,7 +464,7 @@ export default class Player extends FakeEventTarget {
   public configure(config: any = {}): void {
     this._setConfigLogLevel(config);
     Utils.Object.mergeDeep(this._config, config);
-    this._applyTextTrackConfig(config);
+    this._applyTextTrackConfig();
     this._applyABRRestriction(config);
   }
 
@@ -1473,24 +1466,24 @@ export default class Player extends FakeEventTarget {
    * @param {Object} config - new config which configure for checking if it relevant config has changed
    * @private
    */
-  private _applyTextTrackConfig(config: any): void {
-    if (Utils.Object.hasPropertyPath(config, 'text.textTrackDisplaySetting') || Utils.Object.getPropertyPath(config, 'text.forceCenter')) {
-      let textDisplaySettings: any = {};
-      if (Utils.Object.hasPropertyPath(this._config, 'text.textTrackDisplaySetting')) {
-        textDisplaySettings = Utils.Object.mergeDeep(textDisplaySettings, this._config.text.textTrackDisplaySetting);
-      }
+  private _applyTextTrackConfig(): void {
+    const textTrackDisplaySetting = Utils.Object.getPropertyPath(this._config, 'text.textTrackDisplaySetting');
+    const textStyle = Utils.Object.getPropertyPath(this._config, 'text.textStyle');
+    if (textTrackDisplaySetting) {
+      const textDisplaySettings: any = Utils.Object.mergeDeep({}, textTrackDisplaySetting, {
+        position: 'auto',
+        // align - backward compatibility || new caption alignment API || default value
+        align: textTrackDisplaySetting?.align || textStyle?.textAlign || 'center'
+      });
+      // backward compatibility for `text.forceCenter`
       if (Utils.Object.getPropertyPath(this._config, 'text.forceCenter')) {
-        textDisplaySettings = Utils.Object.mergeDeep(textDisplaySettings, {
-          position: 'auto',
-          align: 'center',
-          size: '100'
-        });
+        textDisplaySettings.align = 'center';
       }
       this.setTextDisplaySettings(textDisplaySettings);
     }
     try {
-      if (Utils.Object.hasPropertyPath(config, 'text.textStyle')) {
-        this.textStyle = TextStyle.fromJson(this._config.text.textStyle);
+      if (textStyle) {
+        this.textStyle = TextStyle.fromJson(textStyle);
       }
     } catch (e) {
       Player._logger.warn(e);
@@ -1542,23 +1535,13 @@ export default class Player extends FakeEventTarget {
     if (!(style instanceof TextStyle)) {
       throw new Error('Style must be instance of TextStyle');
     }
-    let element = Utils.Dom.getElementBySelector(`.${this._playerId}.${SUBTITLES_STYLE_CLASS_NAME}`);
-    if (!element) {
-      element = Utils.Dom.createElement('style');
-      Utils.Dom.addClassName(element, this._playerId);
-      Utils.Dom.addClassName(element, SUBTITLES_STYLE_CLASS_NAME);
-      Utils.Dom.appendChild(document.head, element);
-    }
-    const sheet = element.sheet;
 
-    while (sheet.cssRules.length) {
-      sheet.deleteRule(0);
-    }
+    resetSubtitleStyleSheet(this._playerId);
 
     try {
       this._textStyle = style;
       if (this._config.text.useNativeTextTrack) {
-        sheet.insertRule(`#${this._playerId} video.${ENGINE_CLASS_NAME}::cue { ${style.toCSS()} }`, 0);
+        this._applyCustomSubtitleStyles();
       } else if (this._engine) {
         this._engine.resetAllCues();
         this._externalCaptionsHandler.resetAllCues();
@@ -1716,6 +1699,24 @@ export default class Player extends FakeEventTarget {
     return this._engine.getDrmInfo();
   }
 
+  private _applyCustomSubtitleStyles(): void {
+    try {
+      const containerId = this._el?.parentElement?.id || this._playerId;
+      if (this._config.text.useNativeTextTrack && !this._config.text.useShakaTextTrackDisplay) {
+        const sheet = getSubtitleStyleSheet(this._playerId);
+        ExternalCaptionsHandler.applyNativeTextTrackStyles(sheet, this._textStyle, containerId, ENGINE_CLASS_NAME);
+      } else if (this._config.text.useShakaTextTrackDisplay) {
+        resetSubtitleStyleSheet(this._playerId);
+        const sheet = getSubtitleStyleSheet(this._playerId);
+        // eslint-disable-next-line  @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this._engine._mediaSourceAdapter?.applyTextTrackStyles?.(sheet, this._textStyle, containerId);
+      }
+    } catch (e) {
+      Player._logger.error(`Failed to add custom text style: ${e.message}`);
+    }
+  }
+
   /**
    * Remove the current text track from the player view.
    * @returns {void}
@@ -2564,6 +2565,9 @@ export default class Player extends FakeEventTarget {
    * @returns {void}
    */
   private _updateTextDisplay(cues: Array<VTTCue>): void {
+    if (this._config.text.useShakaTextTrackDisplay) {
+      this._applyCustomSubtitleStyles();
+    }
     if (!this._config.text.useNativeTextTrack && !this._config.text.useShakaTextTrackDisplay) {
       processCues(window, cues, this._textDisplayEl, this._textStyle);
     }

src/track/external-captions-handler.ts

@@ -2,6 +2,7 @@ import Error from '../error/error';
 import * as Utils from '../utils/util';
 import {Parser, StringDecoder} from './text-track-display';
 import TextTrack, {getActiveCues} from './text-track';
+import TextStyle from './text-style';
 import Track from './track';
 import {CustomEventType, Html5EventType} from '../event/event-type';
 import { FakeEvent } from '../event/fake-event';
@@ -29,6 +30,12 @@ const SRT_POSTFIX: string = 'srt';
 const VTT_POSTFIX: string = 'vtt';
 
 class ExternalCaptionsHandler extends FakeEventTarget {
+
+  public static applyNativeTextTrackStyles(sheet: CSSStyleSheet, styles: TextStyle, containerId: string, engineClassName: string): void {
+    sheet.insertRule(`#${containerId} video.${engineClassName}::-webkit-media-text-track-display { text-align: ${styles.textAlign}!important; }`, 0);
+    sheet.insertRule(`#${containerId} video.${engineClassName}::cue { ${styles.toCSS()} }`, 0);
+  }
+
   /**
    * The external captions handler class logger.
    * @type {any}

src/track/text-style.ts

@@ -6,7 +6,7 @@
  * font size.
  * @type {number}
  */
-import {FontScaleOptions, FontSizeOptions, PKTextStyleObject} from '../types';
+import { FontScaleOptions, FontSizeOptions, PKTextStyleObject, FontAlignmentOptions } from '../types';
 
 const IMPLICIT_SCALE_PERCENTAGE: number = 0.25;
 
@@ -130,6 +130,24 @@ class TextStyle {
     }
   ];
 
+  /**
+   * Possible font alignments are left, center, right
+   */
+  public static FontAlignment: { label: string; value: FontAlignmentOptions }[] = [
+    {
+      label: 'Left',
+      value: 'left'
+    },
+    {
+      label: 'Center',
+      value: 'center'
+    },
+    {
+      label: 'Right',
+      value: 'right'
+    }
+  ];
+
   /**
    * Creates a CSS RGBA sctring for a given color and opacity values
    * @param {TextStyle.StandardColors} color - color value in RGB
@@ -149,6 +167,7 @@ class TextStyle {
     const textStyle = new TextStyle();
     textStyle.fontEdge = getValue(setting.fontEdge, textStyle.fontEdge);
     textStyle.fontSize = getValue(setting.fontSize, textStyle.fontSize);
+    textStyle.textAlign = getValue(setting.textAlign, textStyle.textAlign);
     textStyle.fontScale = getValue(setting.fontScale, textStyle.fontScale);
     textStyle.fontColor = getValue(setting.fontColor, textStyle.fontColor);
     textStyle.fontOpacity = getValue(setting.fontOpacity, textStyle.fontOpacity);
@@ -162,6 +181,7 @@ class TextStyle {
     return {
       fontEdge: text.fontEdge,
       fontSize: text.fontSize,
+      textAlign: text.textAlign,
       fontScale: text.fontScale,
       fontColor: text.fontColor,
       fontOpacity: text.fontOpacity,
@@ -180,6 +200,8 @@ class TextStyle {
     }
   }
 
+  public textAlign: FontAlignmentOptions = TextStyle.FontAlignment[1].value;
+
   /**
    * Percentage string matching a FontSizes entry
    */
@@ -254,6 +276,7 @@ class TextStyle {
    */
   public toCSS(): string {
     const attributes: Array<string> = [];
+    attributes.push('text-align: ' + this.textAlign);
     attributes.push('font-family: ' + this.fontFamily);
     attributes.push('color: ' + TextStyle.toRGBA(this.fontColor, this.fontOpacity));
     attributes.push('background-color: ' + TextStyle.toRGBA(this.backgroundColor, this.backgroundOpacity));

src/track/text-track-display.ts

@@ -212,7 +212,7 @@ function parseCue(input, cue, regionList) {
             settings.percent(k, v);
             break;
           case 'align':
-            settings.alt(k, v, ['start', 'center', 'end', 'left', 'right']);
+            settings.alt(k, v, ['center', 'left', 'right']);
             break;
         }
       },
@@ -641,7 +641,7 @@ class CueStyleBox extends StyleBox {
     // mirrors of them except "middle" which is "center" in CSS.
     this.div = window.document.createElement('div');
     styles = {
-      textAlign: cue.align === 'middle' ? 'center' : cue.align,
+      textAlign: styleOptions.textAlign,
       font: styleOptions.font,
       whiteSpace: 'pre-line',
       position: 'absolute'
@@ -661,19 +661,14 @@ class CueStyleBox extends StyleBox {
     // position of the cue box. The reference edge will be resolved later when
     // the box orientation styles are applied.
     let textPos = 0;
-    let align = cue.positionAlign || cue.align;
-    switch (align) {
-      case 'start':
+    switch (styleOptions.textAlign) {
       case 'left':
-      case 'line-left':
         textPos = cue.position;
         break;
       case 'center':
         textPos = cue.position - cue.size / 2;
         break;
-      case 'end':
       case 'right':
-      case 'line-right':
         textPos = cue.position - cue.size;
         break;
     }
@@ -982,7 +977,6 @@ function convertCueToDOMTree(window, cuetext) {
 }
 
 const FONT_SIZE_PERCENT = 0.058;
-const FONT_STYLE = 'sans-serif';
 const CUE_BACKGROUND_PADDING = '1.5%';
 
 // Runs the processing model over the cues and regions passed to it.
@@ -1033,6 +1027,7 @@ function processCues(window, cues, overlay, style) {
     fontSize = Math.round(dimensionSize * FONT_SIZE_PERCENT * 100) / 100;
   let styleOptions = {
     font: fontSize * fontScale * style.implicitFontScale + 'px ' + style.fontFamily,
+    textAlign: style.textAlign,
     color: TextStyle.toRGBA(style.fontColor, style.fontOpacity),
     backgroundColor: TextStyle.toRGBA(style.backgroundColor, style.backgroundOpacity),
     textShadow: style.getTextShadow()

src/track/track.ts

@@ -30,7 +30,7 @@ export default class Track {
   private static _langComparer(inputLanguages: [string, (string | undefined)], trackLang: string, equal?: boolean): boolean {
     //first check is there is a complete match
     for(const language of inputLanguages) {
-      if(language?.trim() !== "") {
+      if(language?.trim() !== '') {
         if (equal) {
           if(this._isLangEqual(language, trackLang))
             return true;

src/types/text-config.ts

@@ -7,7 +7,6 @@ export interface PKTextConfigObject {
   useNativeTextTrack: boolean;
   textTrackDisplaySetting: PKTextTrackDisplaySettingObject;
   textStyle: PKTextStyleObject;
-  forceCenter: boolean;
   captionsTextTrack1Label: string;
   captionsTextTrack1LanguageCode: string;
   captionsTextTrack2Label: string;