Support live updates on firefox

7 files changed, 56 insertions, 19 deletions

diff --git a/src/content.ts b/src/content.ts
index 28c87aad..555401e2 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -45,6 +45,9 @@ import * as documentScript from "../dist/js/document.js";
 import { Tooltip } from "./render/Tooltip";
 import { isDeArrowInstalled } from "./utils/crossExtension";
 import { runCompatibilityChecks } from "./utils/compatibility";
+import { cleanPage } from "./utils/pageCleaner";
+
+cleanPage();
 
 const utils = new Utils();
 
@@ -1356,18 +1359,20 @@ async function channelIDChange(channelIDInfo: ChannelIDInfo) {
 }
 
 function videoElementChange(newVideo: boolean): void {
-    if (newVideo) {
-        setupVideoListeners();
-        setupSkipButtonControlBar();
-        setupCategoryPill();
-    }
-
-    checkPreviewbarState();
-
-    // Incase the page is still transitioning, check again in a few seconds
-    setTimeout(checkPreviewbarState, 100);
-    setTimeout(checkPreviewbarState, 1000);
-    setTimeout(checkPreviewbarState, 5000);
+    waitFor(() => Config.isReady()).then(() => {
+        if (newVideo) {
+            setupVideoListeners();
+            setupSkipButtonControlBar();
+            setupCategoryPill();
+        }
+    
+        checkPreviewbarState();
+    
+        // Incase the page is still transitioning, check again in a few seconds
+        setTimeout(checkPreviewbarState, 100);
+        setTimeout(checkPreviewbarState, 1000);
+        setTimeout(checkPreviewbarState, 5000);
+    })
 }
 
 function checkPreviewbarState(): void {
@@ -2331,11 +2336,17 @@ function previousChapter(): void {
 function addHotkeyListener(): void {
     document.addEventListener("keydown", hotkeyListener);
 
-    document.addEventListener("DOMContentLoaded", () => {
+    const onLoad = () => {
         // Allow us to stop propagation to YouTube by being deeper
         document.removeEventListener("keydown", hotkeyListener);
         document.body.addEventListener("keydown", hotkeyListener);
-    });
+    };
+
+    if (document.readyState === "complete") {
+        onLoad();
+    } else {
+        document.addEventListener("DOMContentLoaded", onLoad);
+    }
 }
 
 function hotkeyListener(e: KeyboardEvent): void {
@@ -2392,7 +2403,7 @@ function hotkeyListener(e: KeyboardEvent): void {
  */
 function addCSS() {
     if (!isFirefoxOrSafari() && Config.config.invidiousInstances.includes(new URL(document.URL).hostname)) {
-        window.addEventListener("DOMContentLoaded", () => {
+        const onLoad = () => {
             const head = document.getElementsByTagName("head")[0];
 
             for (const file of utils.css) {
@@ -2404,7 +2415,13 @@ function addCSS() {
 
                 head.appendChild(fileref);
             }
-        });
+        };
+
+        if (document.readyState === "complete") {
+            onLoad();
+        } else {
+            document.addEventListener("DOMContentLoaded", onLoad);
+        }
     }
 }
 
diff --git a/src/help.ts b/src/help.ts
index c5de3470..4fe729df 100644
--- a/src/help.ts
+++ b/src/help.ts
@@ -4,7 +4,11 @@ import { showDonationLink } from "./utils/configUtils";
 
 import { waitFor } from "./maze-utils";
 
-window.addEventListener('DOMContentLoaded', init);
+if (document.readyState === "complete") {
+    init();
+} else {
+    document.addEventListener("DOMContentLoaded", init);
+}
 
 async function init() {
     localizeHtmlPage();
diff --git a/src/options.ts b/src/options.ts
index 039d7d7e..6e0cb6e0 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -24,7 +24,11 @@ let embed = false;
 const categoryChoosers: CategoryChooser[] = [];
 const unsubmittedVideos: UnsubmittedVideos[] = [];
 
-window.addEventListener('DOMContentLoaded', init);
+if (document.readyState === "complete") {
+    init();
+} else {
+    document.addEventListener("DOMContentLoaded", init);
+}
 
 async function init() {
     localizeHtmlPage();
diff --git a/src/permissions.ts b/src/permissions.ts
index fdb311dc..e55b197f 100644
--- a/src/permissions.ts
+++ b/src/permissions.ts
@@ -7,7 +7,11 @@ const utils = new Utils();
 // Probably due to cyclic dependencies
 Config.config;
 
-window.addEventListener('DOMContentLoaded', init);
+if (document.readyState === "complete") {
+    init();
+} else {
+    document.addEventListener("DOMContentLoaded", init);
+}
 
 async function init() {
     localizeHtmlPage();
diff --git a/src/render/GenericNotice.tsx b/src/render/GenericNotice.tsx
index d3dc4f95..d1a4443c 100644
--- a/src/render/GenericNotice.tsx
+++ b/src/render/GenericNotice.tsx
@@ -47,6 +47,7 @@ export default class GenericNotice {
         const referenceNode = options.referenceNode ?? utils.findReferenceNode();
     
         this.noticeElement = document.createElement("div");
+        this.noticeElement.className = "sponsorSkipNoticeContainer";
         this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
         referenceNode.prepend(this.noticeElement);
diff --git a/src/render/SkipNotice.tsx b/src/render/SkipNotice.tsx
index b1be46a2..a5c83fd9 100644
--- a/src/render/SkipNotice.tsx
+++ b/src/render/SkipNotice.tsx
@@ -38,6 +38,7 @@ class SkipNotice {
         idSuffix += amountOfPreviousNotices;
 
         this.noticeElement = document.createElement("div");
+        this.noticeElement.className = "sponsorSkipNoticeContainer";
         this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
         referenceNode.prepend(this.noticeElement);
diff --git a/src/utils/pageCleaner.ts b/src/utils/pageCleaner.ts
new file mode 100644
index 00000000..9ddb17a6
--- /dev/null
+++ b/src/utils/pageCleaner.ts
@@ -0,0 +1,6 @@
+export function cleanPage() {
+    // For live-updates
+    for (const element of document.querySelectorAll("#categoryPillParent, .playerButton, .sponsorThumbnailLabel, #submissionNoticeContainer, .sponsorSkipNoticeContainer, #sponsorBlockPopupContainer")) {
+        element.remove();
+    }
+}
\ No newline at end of file