Fixed Quality Setting

electron/src/iframeInjection.ts

@@ -1,13 +1,14 @@
-async function getElement(selector: string): Promise<HTMLElement> {
+const TRY_DURATION = 3000;
-    const element = document.querySelector(selector);
-    if (!element) {
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        return getElement(selector);
-    }
-    return element as HTMLElement;
-}
 
 function trySettingQuality() {
+    const hiddenSelectors = [".ytp-gradient-top", ".ytp-chrome-top.ytp-show-cards-title", ".ytp-gradient-bottom", ".ytp-chrome-bottom", ".branding-img-container", ".ytp-settings-menu"];
+    hiddenSelectors.forEach(selector => {
+        const element = document.querySelector(`${selector}`) as HTMLElement;
+        if (element) {
+            element.style.visibility = "hidden";
+        }
+    });
+
     const qualityMenu = document.querySelector(".ytp-settings-menu") as HTMLElement;
     if (!qualityMenu) {
         console.log("No settings menu found!");
@@ -15,7 +16,6 @@ function trySettingQuality() {
     }
     qualityMenu.style.height = "auto"
     qualityMenu.style.overflowX = "auto";
-    qualityMenu.style.visibility = "hidden";
 
     const settingsButton = document.querySelector(".ytp-settings-button") as HTMLElement;
     if (!settingsButton) {
@@ -28,6 +28,7 @@ function trySettingQuality() {
     const qualityButton = menuItems.find(item => {
         return item.innerHTML.includes("Qualität") || item.innerHTML.includes("Quality");
     });
+
     if (!qualityButton) {
         console.log("No quality buton found!");
         settingsButton.click();
@@ -61,17 +62,28 @@ function trySettingQuality() {
     }
     qualityElement.click();
 
-
     return true;
 }
 
-document.addEventListener("DOMContentLoaded", async () => {
+async function setQuality() {
-    console.log("Setting Quality...")
+    const start = Date.now();
-    while (!trySettingQuality()) {
+    let diff = 0;
+    while (!trySettingQuality() && diff < TRY_DURATION) {
+        console.log("Try Setting Quality...")
         await new Promise((resolve) => setTimeout(resolve, 300));
+        diff = Date.now() - start;
     }
 
-    const controls = await getElement(".ytp-chrome-bottom");
+    if (diff >= TRY_DURATION) {
-    controls.style.visibility = "hidden";
+        console.log("Setting Quality failed!");
-    console.log("Setting Quality done!");
+    } else {
+        console.log("Setting Quality done!");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", setQuality);
+window.addEventListener("message", ev => {
+    if (ev.data === "setQuality") {
+        setQuality();
+    }
 });

src/application/components/YoutubePlayer/YoutubePlayer.tsx

@@ -25,7 +25,11 @@ export const YoutubePlayer = withMemo(function YoutubePlayer({id}: YoutubePlayer
 
     // Callbacks
     const setIsNotPlaying = useCallback(() => setIsPlaying(false), []);
-    const setIsCurrentlyPlaying = useCallback(() => setIsPlaying(true), []);
+    const setIsCurrentlyPlaying = useCallback(() => {
+        setIsPlaying(true);
+        const iframe = document.querySelector("iframe");
+        iframe?.contentWindow?.postMessage("setQuality", "https://www.youtube.com");
+    }, []);
 
     const informAboutVideo = useCallback(() => {
         if (!player) {