Revert "feat(FEC-13664): Add the ability to configure alignment of ca…

…ptions (#770) This reverts commit cb0ba18. ### Description of the Changes Please add a detailed description of the change, whether it's an enhancement or a bugfix. If the PR is related to an open issue please link to it. ### CheckLists - [ ] changes have been done against master branch, and PR does not conflict - [ ] new unit / functional tests have been added (whenever applicable) - [ ] test are passing in local environment - [ ] Travis tests are passing (or test results are not worse than on master branch :)) - [ ] Docs have been updated Co-authored-by: Sergey Marchenko <[email protected]>
kaltura · Mar 27, 2024 · 3515e1e · 3515e1e
1 parent cb0ba18
commit 3515e1e
Show file tree

Hide file tree

Showing 19 changed files with 114 additions and 158 deletions.
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -36,6 +36,7 @@ var config = {
   text: {
     enableCEA708Captions: true,
     useNativeTextTrack: false,
+    forceCenter: false,
     captionsTextTrack1Label: 'English',
     captionsTextTrack1LanguageCode: 'en',
     captionsTextTrack2Label: 'Spanish',
@@ -543,6 +544,7 @@ var config = {
 > {
 >  useNativeTextTrack: boolean,
 >  enableCEA708Captions: boolean,
+>  forceCenter: boolean,
 >  textTrackDisplaySetting: PKTextTrackDisplaySettingObject,
 >  textStyle: TextStyle,
 >  captionsTextTrack1Label: string,
@@ -558,6 +560,7 @@ var config = {
 > {
 >  useNativeTextTrack: false,
 >  enableCEA708Captions: true,
+>  forceCenter: false,
 >  captionsTextTrack1Label: "English",
 >  captionsTextTrack1LanguageCode: "en",
 >  captionsTextTrack2Label: "Spanish",
@@ -589,6 +592,16 @@ 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`
@@ -603,6 +616,7 @@ 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]
@@ -619,6 +633,10 @@ 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.
@@ -660,7 +678,6 @@ 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
@@ -676,10 +693,6 @@ 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

diff --git a/flow-typed/types/text-config.js b/flow-typed/types/text-config.js
@@ -7,6 +7,7 @@ declare type PKTextConfigObject = {
   useNativeTextTrack: boolean,
   textTrackDisplaySetting: PKTextTrackDisplaySettingObject,
   textStyle: PKTextStyleObject,
+  forceCenter: boolean,
   captionsTextTrack1Label: string,
   captionsTextTrack1LanguageCode: string,
   captionsTextTrack2Label: string,

diff --git a/flow-typed/types/text-track-display-setting.js b/flow-typed/types/text-track-display-setting.js
@@ -2,6 +2,7 @@
 declare type PKTextTrackDisplaySettingObject = {
   line: string | number,
   lineAlign: string,
+  align: string,
   position: number,
   positionAlign: string,
   snapToLines: boolean,

diff --git a/src/engines/html5/html5.ts b/src/engines/html5/html5.ts
@@ -262,15 +262,6 @@ export default class Html5 extends FakeEventTarget implements IEngine {
     }
   }
 
-  /**
-   * Get the engine mediaSourceAdapter
-   * @public
-   * @returns {IMediaSourceAdapter | null}
-   */
-  public get mediaSourceAdapter(): IMediaSourceAdapter | null {
-    return this._mediaSourceAdapter;
-  }
-
   /**
    * Get the engine's id
    * @public

diff --git a/src/engines/html5/media-source/base-media-source-adapter.ts b/src/engines/html5/media-source/base-media-source-adapter.ts
@@ -4,7 +4,6 @@ import Error from '../../../error/error';
 import { CustomEventType, Html5EventType } from '../../../event/event-type';
 import getLogger from '../../../utils/logger';
 import Track from '../../../track/track';
-import TextStyle from '../../../track/text-style';
 import VideoTrack from '../../../track/video-track';
 import AudioTrack from '../../../track/audio-track';
 import PKTextTrack from '../../../track/text-track';
@@ -178,11 +177,6 @@ export default class BaseMediaSourceAdapter extends FakeEventTarget implements I
     return BaseMediaSourceAdapter._throwNotImplementedError('static canPlayType');
   }
 
-  // eslint-disable-next-line
-  public applyTextTrackStyles(sheet: CSSStyleSheet, styles: TextStyle, containerId: string, engineClassName?: string): void {
-    return BaseMediaSourceAdapter._throwNotImplementedError('applyTextTrackStyles');
-  }
-
   public load(): Promise<{ tracks: Track[] }> {
     return BaseMediaSourceAdapter._throwNotImplementedError('load');
   }

diff --git a/src/player-config.js b/src/player-config.js
@@ -7,6 +7,7 @@ const DefaultConfig = {
   text: {
     enableCEA708Captions: true,
     useNativeTextTrack: false,
+    forceCenter: false,
     captionsTextTrack1Label: 'English',
     captionsTextTrack1LanguageCode: 'en',
     captionsTextTrack2Label: 'Spanish',

diff --git a/src/player.ts b/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, getSubtitleStyleSheet, resetSubtitleStyleSheet} from './utils';
+import {ResizeWatcher} from './utils';
 import {FullscreenController} from './fullscreen/fullscreen-controller';
 import {EngineDecorator, EngineDecoratorType} from './engines/engine-decorator';
 import {LabelOptions} from './track/label-options';
@@ -78,6 +78,13 @@ 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}
@@ -464,7 +471,7 @@ export default class Player extends FakeEventTarget {
   public configure(config: any = {}): void {
     this._setConfigLogLevel(config);
     Utils.Object.mergeDeep(this._config, config);
-    this._applyTextTrackConfig();
+    this._applyTextTrackConfig(config);
     this._applyABRRestriction(config);
   }
 
@@ -1466,24 +1473,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(): 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`
+  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);
+      }
       if (Utils.Object.getPropertyPath(this._config, 'text.forceCenter')) {
-        textDisplaySettings.align = 'center';
+        textDisplaySettings = Utils.Object.mergeDeep(textDisplaySettings, {
+          position: 'auto',
+          align: 'center',
+          size: '100'
+        });
       }
       this.setTextDisplaySettings(textDisplaySettings);
     }
     try {
-      if (textStyle) {
-        this.textStyle = TextStyle.fromJson(textStyle);
+      if (Utils.Object.hasPropertyPath(config, 'text.textStyle')) {
+        this.textStyle = TextStyle.fromJson(this._config.text.textStyle);
       }
     } catch (e) {
       Player._logger.warn(e);
@@ -1535,13 +1542,23 @@ 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;
 
-    resetSubtitleStyleSheet(this._playerId);
+    while (sheet.cssRules.length) {
+      sheet.deleteRule(0);
+    }
 
     try {
       this._textStyle = style;
       if (this._config.text.useNativeTextTrack) {
-        this._applyCustomSubtitleStyles();
+        sheet.insertRule(`#${this._playerId} video.${ENGINE_CLASS_NAME}::cue { ${style.toCSS()} }`, 0);
       } else if (this._engine) {
         this._engine.resetAllCues();
         this._externalCaptionsHandler.resetAllCues();
@@ -1699,22 +1716,6 @@ 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);
-        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}
@@ -2563,9 +2564,6 @@ 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);
     }

diff --git a/src/track/external-captions-handler.ts b/src/track/external-captions-handler.ts
@@ -2,7 +2,6 @@ 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';
@@ -30,12 +29,6 @@ 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}

diff --git a/src/track/text-style.ts b/src/track/text-style.ts
@@ -6,7 +6,7 @@
  * font size.
  * @type {number}
  */
-import { FontScaleOptions, FontSizeOptions, PKTextStyleObject, FontAlignmentOptions } from '../types';
+import {FontScaleOptions, FontSizeOptions, PKTextStyleObject} from '../types';
 
 const IMPLICIT_SCALE_PERCENTAGE: number = 0.25;
 
@@ -130,24 +130,6 @@ 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
@@ -167,7 +149,6 @@ 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);
@@ -181,7 +162,6 @@ class TextStyle {
     return {
       fontEdge: text.fontEdge,
       fontSize: text.fontSize,
-      textAlign: text.textAlign,
       fontScale: text.fontScale,
       fontColor: text.fontColor,
       fontOpacity: text.fontOpacity,
@@ -200,8 +180,6 @@ class TextStyle {
     }
   }
 
-  public textAlign: FontAlignmentOptions = TextStyle.FontAlignment[1].value;
-
   /**
    * Percentage string matching a FontSizes entry
    */
@@ -276,7 +254,6 @@ 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));