Fix errors that occur when the html element was replaced in the document

WesselKroos · May 9, 2024 · e400b8a · e400b8a
1 parent 48dc9ee
commit e400b8a
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/src/scripts/libs/ambientlight.js b/src/scripts/libs/ambientlight.js
@@ -1,4 +1,4 @@
-import { html, on, off, raf, ctxOptions, Canvas, SafeOffscreenCanvas, setTimeout, wrapErrorHandler, readyStateToString, networkStateToString, mediaErrorToString, requestIdleCallback, isWatchPageUrl, watchSelectors, isEmbedPageUrl } from './generic'
+import { on, off, raf, ctxOptions, Canvas, SafeOffscreenCanvas, setTimeout, wrapErrorHandler, readyStateToString, networkStateToString, mediaErrorToString, requestIdleCallback, isWatchPageUrl, watchSelectors, isEmbedPageUrl } from './generic'
 import SentryReporter, { parseSettingsToSentry } from './sentry-reporter'
 import BarDetection from './bar-detection'
 import Settings, { FRAMESYNC_DECODEDFRAMES, FRAMESYNC_DISPLAYFRAMES, FRAMESYNC_VIDEOFRAMES } from './settings'
@@ -3002,6 +3002,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
     this.clear()
     this.stats.hide()
 
+    const html = document.documentElement
     html.removeAttribute('data-ambientlight-enabled')
     html.removeAttribute('data-ambientlight-hide-scrollbar')
     html.removeAttribute('data-ambientlight-related-scrollbar')
@@ -3012,7 +3013,8 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
   }
 
   updateLayoutPerformanceImprovements = wrapErrorHandler(() => {
-    const liveChatHtml = this.theming.liveChatIframe?.contentDocument?.documentElement;
+    const html = document.documentElement
+    const liveChatHtml = this.theming.liveChatIframe?.contentDocument?.documentElement
     const enabled = this.settings.enabled && !this.isHidden && this.settings.layoutPerformanceImprovements
     if(enabled) {
       html.setAttribute('data-ambientlight-layout-performance-improvements', true)
@@ -3038,6 +3040,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
     (async () => {
       await new Promise(resolve => raf(resolve))
 
+      const html = document.documentElement
       html.setAttribute('data-ambientlight-enabled', true)
       if(this.settings.hideScrollbar) html.setAttribute('data-ambientlight-hide-scrollbar', true)
       if(this.settings.relatedScrollbar) html.setAttribute('data-ambientlight-related-scrollbar', true)
@@ -3077,6 +3080,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
 
   updateImmersiveMode() {
     this.immersiveTheater = (this.settings.immersiveTheaterView && this.view === VIEW_THEATER)
+    const html = document.documentElement
     const changed = (html.getAttribute('data-ambientlight-immersive') === 'true') !== this.immersiveTheater
     if(!changed) return false
 

diff --git a/src/scripts/libs/generic.js b/src/scripts/libs/generic.js
@@ -198,8 +198,6 @@ export function off(elem, eventNames, callback) {
   }
 }
 
-export const html = document.documentElement
-
 export const raf = (callback) => requestAnimationFrame(wrapErrorHandler(callback))
 
 const colorSpace = (

diff --git a/src/scripts/libs/sentry-reporter.js b/src/scripts/libs/sentry-reporter.js
@@ -3,7 +3,7 @@ import { Dedupe as DedupeIntegration } from "@sentry/browser/esm/integrations/de
 import { Hub, makeMain, getCurrentHub } from '@sentry/core/esm/hub';
 import { Scope } from '@sentry/core/esm/scope';
 
-import { html, isEmbedPageUrl, mediaErrorToString, networkStateToString, on, readyStateToString, uuidv4, watchSelectors } from './generic';
+import { isEmbedPageUrl, mediaErrorToString, networkStateToString, on, readyStateToString, uuidv4, watchSelectors } from './generic';
 import { contentScript } from './messaging';
 import SettingsConfig from './settings-config';
 
@@ -417,7 +417,7 @@ export default class SentryReporter {
 
         try {
           setExtra('YouTube', {
-            dark: !!html?.attributes?.dark,
+            dark: !!document.documentElement?.attributes?.dark,
             loggedIn: (window.yt)
               ? !!window.yt?.config_?.LOGGED_IN
               : (document.querySelector('ytd-topbar-menu-button-renderer') ? !!document.querySelector('#avatar-btn') : undefined)

diff --git a/src/scripts/libs/settings.js b/src/scripts/libs/settings.js
@@ -1,4 +1,4 @@
-import { html, on, off, setTimeout, supportsWebGL, raf, supportsColorMix } from './generic'
+import { on, off, setTimeout, supportsWebGL, raf, supportsColorMix } from './generic'
 import SentryReporter from './sentry-reporter'
 import { contentScript } from './messaging'
 import { getBrowser } from './utils'
@@ -200,7 +200,7 @@ export default class Settings {
 
     await this.flushPendingStorageEntries() // Complete migrations
 
-    if(this.enabled) html.setAttribute('data-ambientlight-hide-scrollbar', this.hideScrollbar)
+    if(this.enabled) document.documentElement.setAttribute('data-ambientlight-hide-scrollbar', this.hideScrollbar)
   }
 
   migrate(storedSettings) {
@@ -887,6 +887,7 @@ export default class Settings {
             this.ambientlight.updateLayoutPerformanceImprovements()
           }
 
+          const html = document.documentElement
           if (setting.name === 'relatedScrollbar' && this.enabled) {
             if(value)
               html.setAttribute('data-ambientlight-related-scrollbar', true)

diff --git a/src/scripts/libs/theming.js b/src/scripts/libs/theming.js
@@ -1,4 +1,4 @@
-import { getCookie, html, isEmbedPageUrl, isWatchPageUrl, on, requestIdleCallback, wrapErrorHandler } from "./generic"
+import { getCookie, isEmbedPageUrl, isWatchPageUrl, on, requestIdleCallback, wrapErrorHandler } from "./generic"
 import { contentScript } from "./messaging"
 import SentryReporter from "./sentry-reporter"
 
@@ -66,7 +66,7 @@ export default class Theming {
       this.updateTheme()
       if(themeCorrections === 5) this.themeObserver.disconnect()
     }))
-    this.themeObserver.observe(html, {
+    this.themeObserver.observe(document.documentElement, {
       attributes: true,
       attributeOldValue: true,
       attributeFilter: ['dark']
@@ -94,7 +94,7 @@ export default class Theming {
     return THEME_LIGHT
   }
 
-  isDarkTheme = () => (html.getAttribute('dark') !== null)
+  isDarkTheme = () => (document.documentElement.getAttribute('dark') !== null)
 
   shouldBeDarkTheme = () => {
     const toTheme = (!this.settings.enabled || this.ambientlight.isHidden || this.settings.theme === THEME_DEFAULT)
-Original file line number
+Diff line change
@@ Expand Up / @@ -198,8 +198,6 @@ export function off(elem, eventNames, callback) { @@
       }
     }
-    export const html = document.documentElement
     export const raf = (callback) => requestAnimationFrame(wrapErrorHandler(callback))
     const colorSpace = (
@@ Expand Down @@