From cda2063309342b48359c5d5046afbee4a379553f Mon Sep 17 00:00:00 2001
From: RocketBoy <91538975+ApeDevOne@users.noreply.github.com>
Date: Mon, 23 Sep 2024 22:45:33 +0530
Subject: [PATCH] Update popup.js

---
 popup.js | 44 +++++++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/popup.js b/popup.js
index e85a85d..1a05ff2 100644
--- a/popup.js
+++ b/popup.js
@@ -51,27 +51,33 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 });
 
+
+
 function changeSubtitleStyle(size, font, opacity) {
-  const textContainer = document.querySelector('.shaka-text-container');
-  if (textContainer) {
-    const observer = new MutationObserver(() => {
-      const textRegions = document.querySelectorAll('.shaka-text-region');
-      textRegions.forEach(region => {
-        const textSpans = region.querySelectorAll('span span');
-        textSpans.forEach(span => {
-          span.classList.add('custom-subtitle-style');
-        });
+  const observer = new MutationObserver(() => {
+    const textContainers = document.querySelectorAll('div[class^="mui-style-"][class$="-subtitlesContainer"]');
+    textContainers.forEach(container => {
+      const textSpans = container.querySelectorAll('span');
+      textSpans.forEach(span => {
+        span.classList.add('custom-subtitle-style');
       });
-      const style = document.createElement('style');
-      style.innerHTML = `
-        .shaka-text-region span span.custom-subtitle-style {
-          font-size: ${size}px !important;
-          font-family: ${font} !important;
-          background-color: rgba(0, 0, 0, ${opacity}) !important;
-        }
-      `;
-      document.head.appendChild(style);
     });
-    observer.observe(textContainer, { childList: true, subtree: true });
+
+    const style = document.createElement('style');
+    style.innerHTML = `
+      div[class^="mui-style-"][class$="-subtitlesContainer"] span.custom-subtitle-style {
+        font-size: ${size}px !important;
+        font-family: ${font} !important;
+        background-color: rgba(0, 0, 0, ${opacity}) !important;
+      }
+    `;
+    document.head.appendChild(style);
+  });
+
+  const subtitleContainer = document.querySelector('#subtitle-1');
+  if (subtitleContainer) {
+    observer.observe(subtitleContainer, { childList: true, subtree: true });
   }
 }
+
+