address comments

kaltura · Mar 5, 2024 · bc2756c · bc2756c
1 parent d3c69ec
commit bc2756c
Showing 1 changed file with 7 additions and 12 deletions.
diff --git a/src/player.ts b/src/player.ts
@@ -120,14 +120,6 @@ const DURATION_OFFSET: number = 0.1;
  */
 const LIVE_EDGE_THRESHOLD: number = 1;
 
-// TODO: move custom subtitles styling into engines
-/**
- *  Shaka player subtitles container class
- *  @type {string}
- *  @const
- */
-const SHAKA_TEXT_CONTAINER_CLASSNAME = "shaka-text-container"
-
 /**
  * The HTML5 player class.
  * @classdesc
@@ -1731,11 +1723,14 @@ export default class Player extends FakeEventTarget {
   }
 
   private _applyCustomSubtitleStyles(): void {
+    // TODO: move custom subtitles styling into engines
+    const SHAKA_TEXT_CONTAINER_CLASSNAME = "shaka-text-container";
     try {
+      const containerId = this._el?.parentElement?.id || this._playerId;
       if (this._config.text.useNativeTextTrack && !this._config.text.useShakaTextTrackDisplay) {
         const sheet = this._getSubtitleStyleSheet();
-        sheet.insertRule(`#${this._playerId} video.${ENGINE_CLASS_NAME}::-webkit-media-text-track-display { text-align: ${this._textStyle.textAlign}!important; }`, 0);
-        sheet.insertRule(`#${this._playerId} video.${ENGINE_CLASS_NAME}::cue { ${this._textStyle.toCSS()} }`, 0);
+        sheet.insertRule(`#${containerId} video.${ENGINE_CLASS_NAME}::-webkit-media-text-track-display { text-align: ${this._textStyle.textAlign}!important; }`, 0);
+        sheet.insertRule(`#${containerId} video.${ENGINE_CLASS_NAME}::cue { ${this._textStyle.toCSS()} }`, 0);
       } else if (this._config.text.useShakaTextTrackDisplay) {
         this._resetCustomSubtitleStyles();
         const sheet = this._getSubtitleStyleSheet();
@@ -1744,8 +1739,8 @@ export default class Player extends FakeEventTarget {
           center: 'center',
           right: 'flex-end',
         }
-        sheet.insertRule(`#${this._playerId} .${SHAKA_TEXT_CONTAINER_CLASSNAME} { padding: 0px 16px; align-items: ${flexAlignment[this._textStyle.textAlign]}!important; }`, 0);
-        sheet.insertRule(`#${this._playerId} .${SHAKA_TEXT_CONTAINER_CLASSNAME} > * { ${this._textStyle.toCSS()} }`, 0);
+        sheet.insertRule(`#${containerId} .${SHAKA_TEXT_CONTAINER_CLASSNAME} { padding: 0px 16px; align-items: ${flexAlignment[this._textStyle.textAlign]}!important; }`, 0);
+        sheet.insertRule(`#${containerId} .${SHAKA_TEXT_CONTAINER_CLASSNAME} > * { ${this._textStyle.toCSS()} }`, 0);
       }
     } catch (e) {
       Player._logger.error(`Failed to add custom text style: ${e.message}`);