From bc2756c16a36bfec5ddb0d136a5ab04405cb7976 Mon Sep 17 00:00:00 2001
From: Sergey Marchenko <sergey.dnepro@gmail.com>
Date: Tue, 5 Mar 2024 15:07:33 +0200
Subject: [PATCH] address comments

---
 src/player.ts | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/player.ts b/src/player.ts
index 487eed44..b077da08 100644
--- 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}`);