fix: use globalThis i/o window

scripts/react/build.js

@@ -243,15 +243,13 @@ const setupGlobalsAsync = async () => {
   const customElementNames = await import(
     path.join(projectRoot, 'dist', 'utils', 'server-safe-globals.js')
   ).then((exports) => {
-    globalThis.window = exports.Window;
-    globalThis.document = exports.Document;
-    globalThis.window.document = globalThis.document;
-    window.customElementNames = [];
-    window.customElements.define = (name, _classRef) =>
-      window.customElementNames.push(name);
+    Object.assign(globalThis, exports.globalThis);
+    globalThis.customElementNames = [];
+    globalThis.customElements.define = (name, _classRef) =>
+      globalThis.customElementNames.push(name);
     // NOTE: The current implementation relies on the fact that `customElementNames` will be mutated
     // to add the Custom Element html name for every element that's defined as a result of loading/importing the entryPoints modules (CJP).
-    return window.customElementNames;
+    return globalThis.customElementNames;
   });
   return customElementNames;
 };

src/js/controller.js

@@ -1,4 +1,4 @@
-import { window, document } from './utils/server-safe-globals.js';
+import { globalThis, document } from './utils/server-safe-globals.js';
 import { fullscreenApi } from './utils/fullscreen-api.js';
 import { containsComposedNode } from './utils/element-utils.js';
 import {
@@ -511,7 +511,7 @@ export const MediaUIRequestHandlers = {
     if (!mediaController.hasAttribute('novolumepref')) {
       // Store the last set volume as a local preference, if ls is supported
       try {
-        window.localStorage.setItem(
+        globalThis.localStorage.setItem(
           'media-chrome-pref-volume',
           volume.toString()
         );
@@ -742,7 +742,7 @@ export const MediaUIRequestHandlers = {
     if (
       !(
         media.webkitShowPlaybackTargetPicker &&
-        window.WebKitPlaybackTargetAvailabilityEvent
+        globalThis.WebKitPlaybackTargetAvailabilityEvent
       )
     ) {
       console.warn(

src/js/experimental/media-captions-listbox.js

@@ -1,6 +1,6 @@
 import MediaChromeListbox from './media-chrome-listbox.js';
 import './media-chrome-listitem.js';
-import { window, document } from '../utils/server-safe-globals.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
 import { MediaUIAttributes, MediaUIEvents } from '../constants.js';
 import { parseTextTracksStr, formatTextTrackObj } from '../utils/captions.js';
 import { toggleSubsCaps } from '../utils/captions.js';
@@ -224,7 +224,7 @@ class MediaCaptionsListbox extends MediaChromeListbox {
 
     if (!selectedOption) return;
 
-    const event = new window.CustomEvent(
+    const event = new globalThis.CustomEvent(
       MediaUIEvents.MEDIA_SHOW_SUBTITLES_REQUEST,
       {
         composed: true,
@@ -236,8 +236,8 @@ class MediaCaptionsListbox extends MediaChromeListbox {
   }
 }
 
-if (!window.customElements.get('media-captions-listbox')) {
-  window.customElements.define('media-captions-listbox', MediaCaptionsListbox);
+if (!globalThis.customElements.get('media-captions-listbox')) {
+  globalThis.customElements.define('media-captions-listbox', MediaCaptionsListbox);
 }
 
 export default MediaCaptionsListbox;

src/js/experimental/media-captions-selectmenu.js

@@ -1,7 +1,7 @@
 import MediaChromeSelectMenu from './media-chrome-selectmenu.js';
 import '../media-captions-button.js';
 import './media-captions-listbox.js';
-import { window, document, } from '../utils/server-safe-globals.js';
+import { globalThis, document, } from '../utils/server-safe-globals.js';
 
 /**
  * @csspart button - The default button that's in the shadow DOM.
@@ -34,8 +34,8 @@ class MediaCaptionsSelectMenu extends MediaChromeSelectMenu {
   }
 }
 
-if (!window.customElements.get('media-captions-selectmenu')) {
-  window.customElements.define('media-captions-selectmenu', MediaCaptionsSelectMenu);
+if (!globalThis.customElements.get('media-captions-selectmenu')) {
+  globalThis.customElements.define('media-captions-selectmenu', MediaCaptionsSelectMenu);
 }
 
 export default MediaCaptionsSelectMenu;

src/js/experimental/media-chrome-listbox.js

@@ -1,5 +1,5 @@
 import { MediaStateReceiverAttributes } from '../constants.js';
-import { window, document } from '../utils/server-safe-globals.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
 
 const template = document.createElement('template');
 
@@ -67,7 +67,7 @@ template.innerHTML = /*html*/`
  * @cssproperty --media-font-size - `font-size` property.
  * @cssproperty --media-text-content-height - `line-height` of text.
  */
-class MediaChromeListbox extends window.HTMLElement {
+class MediaChromeListbox extends globalThis.HTMLElement {
   #keysSoFar = '';
   #clearKeysTimeout = null;
   #slot;
@@ -419,18 +419,18 @@ class MediaChromeListbox extends window.HTMLElement {
   }
 
   #clearKeysOnDelay() {
-    window.clearTimeout(this.#clearKeysTimeout);
+    globalThis.clearTimeout(this.#clearKeysTimeout);
     this.#clearKeysTimeout = null;
 
-    this.#clearKeysTimeout = window.setTimeout(() => {
+    this.#clearKeysTimeout = globalThis.setTimeout(() => {
       this.#keysSoFar = '';
       this.#clearKeysTimeout = null;
     }, 500);
   }
 }
 
-if (!window.customElements.get('media-chrome-listbox')) {
-  window.customElements.define('media-chrome-listbox', MediaChromeListbox);
+if (!globalThis.customElements.get('media-chrome-listbox')) {
+  globalThis.customElements.define('media-chrome-listbox', MediaChromeListbox);
 }
 
 export default MediaChromeListbox;

src/js/experimental/media-chrome-listitem.js

@@ -1,5 +1,5 @@
 import { MediaStateReceiverAttributes } from '../constants.js';
-import { window, document } from '../utils/server-safe-globals.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
 
 const template = document.createElement('template');
 
@@ -32,7 +32,7 @@ export const Attributes = {
  * @attr {boolean} disabled - The Boolean disabled attribute makes the element not mutable or focusable.
  * @attr {string} mediacontroller - The element `id` of the media controller to connect to (if not nested within).
  */
-class MediaChromeListitem extends window.HTMLElement {
+class MediaChromeListitem extends globalThis.HTMLElement {
   static get observedAttributes() {
     return [
       'disabled',
@@ -127,8 +127,8 @@ class MediaChromeListitem extends window.HTMLElement {
   handleClick() {}
 }
 
-if (!window.customElements.get('media-chrome-listitem')) {
-  window.customElements.define('media-chrome-listitem', MediaChromeListitem);
+if (!globalThis.customElements.get('media-chrome-listitem')) {
+  globalThis.customElements.define('media-chrome-listitem', MediaChromeListitem);
 }
 
 export default MediaChromeListitem;

src/js/experimental/media-chrome-selectmenu.js

@@ -1,6 +1,6 @@
 import '../media-chrome-button.js';
 import './media-chrome-listbox.js';
-import { window, document } from '../utils/server-safe-globals.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
 import { closestComposedNode, getOrInsertCSSRule } from '../utils/element-utils.js';
 import { MediaStateReceiverAttributes } from '../constants.js';
 
@@ -45,7 +45,7 @@ template.innerHTML = /*html*/`
  * @csspart button - The default button that's in the shadow DOM.
  * @csspart listbox - The default listbox that's in the shadow DOM.
  */
-class MediaChromeSelectMenu extends window.HTMLElement {
+class MediaChromeSelectMenu extends globalThis.HTMLElement {
   #handleClick;
   #handleChange;
   #enabledState = true;
@@ -302,8 +302,8 @@ class MediaChromeSelectMenu extends window.HTMLElement {
 
 }
 
-if (!window.customElements.get('media-chrome-selectmenu')) {
-  window.customElements.define('media-chrome-selectmenu', MediaChromeSelectMenu);
+if (!globalThis.customElements.get('media-chrome-selectmenu')) {
+  globalThis.customElements.define('media-chrome-selectmenu', MediaChromeSelectMenu);
 }
 
 export default MediaChromeSelectMenu;

src/js/experimental/media-playback-rate-listbox.js

@@ -1,5 +1,5 @@
 import MediaChromeListbox from './media-chrome-listbox.js';
-import { window, document } from '../utils/server-safe-globals.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
 import { MediaUIAttributes, MediaUIEvents } from '../constants.js';
 
 const slotTemplate = document.createElement('template');
@@ -58,7 +58,7 @@ class MediaPlaybackrateListbox extends MediaChromeListbox {
 
     if (!selectedOption) return;
 
-    const event = new window.CustomEvent(
+    const event = new globalThis.CustomEvent(
       MediaUIEvents.MEDIA_PLAYBACK_RATE_REQUEST,
       {
         composed: true,
@@ -70,8 +70,8 @@ class MediaPlaybackrateListbox extends MediaChromeListbox {
   }
 }
 
-if (!window.customElements.get('media-playback-rate-listbox')) {
-  window.customElements.define('media-playback-rate-listbox', MediaPlaybackrateListbox);
+if (!globalThis.customElements.get('media-playback-rate-listbox')) {
+  globalThis.customElements.define('media-playback-rate-listbox', MediaPlaybackrateListbox);
 }
 
 export default MediaPlaybackrateListbox;

src/js/experimental/media-playback-rate-selectmenu.js

@@ -2,7 +2,7 @@ import MediaChromeSelectMenu from './media-chrome-selectmenu.js';
 import './media-chrome-listitem.js';
 import { DEFAULT_RATES } from '../media-playback-rate-button.js';
 import './media-playback-rate-listbox.js';
-import { window, document, } from '../utils/server-safe-globals.js';
+import { globalThis, document, } from '../utils/server-safe-globals.js';
 
 const createItem = (rate) => {
   const item = document.createElement('media-chrome-listitem');
@@ -74,8 +74,8 @@ class MediaPlaybackrateSelectMenu extends MediaChromeSelectMenu {
   }
 }
 
-if (!window.customElements.get('media-playback-rate-selectmenu')) {
-  window.customElements.define('media-playback-rate-selectmenu', MediaPlaybackrateSelectMenu);
+if (!globalThis.customElements.get('media-playback-rate-selectmenu')) {
+  globalThis.customElements.define('media-playback-rate-selectmenu', MediaPlaybackrateSelectMenu);
 }
 
 export default MediaPlaybackrateSelectMenu;

src/js/experimental/media-settings-popup.js

@@ -1,6 +1,6 @@
 // Work in progress
 
-import { window, document } from '../utils/server-safe-globals.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
 
 const template = document.createElement('template');
 
@@ -38,7 +38,7 @@ template.innerHTML = `
   </media-chrome-menu>
 `;
 
-class MediaSettingsPopup extends window.HTMLElement {
+class MediaSettingsPopup extends globalThis.HTMLElement {
   constructor() {
     super();
 
@@ -47,8 +47,8 @@ class MediaSettingsPopup extends window.HTMLElement {
   }
 }
 
-if (!window.customElements.get('media-settings-popup')) {
-  window.customElements.define('media-settings-popup', MediaSettingsPopup);
+if (!globalThis.customElements.get('media-settings-popup')) {
+  globalThis.customElements.define('media-settings-popup', MediaSettingsPopup);
 }
 
 export default MediaSettingsPopup;

src/js/extras/media-clip-selector/index.js

@@ -1,4 +1,4 @@
-import { window, document } from '../../utils/server-safe-globals.js';
+import { globalThis, document } from '../../utils/server-safe-globals.js';
 import { MediaUIEvents, MediaUIAttributes } from '../../constants.js';
 
 const template = document.createElement('template');
@@ -138,7 +138,7 @@ template.innerHTML = `
 /**
  * @extends {HTMLElement}
  */
-class MediaClipSelector extends window.HTMLElement {
+class MediaClipSelector extends globalThis.HTMLElement {
   static get observedAttributes() {
     return [
       'thumbnails',
@@ -186,12 +186,12 @@ class MediaClipSelector extends window.HTMLElement {
     this.wrapper.addEventListener('click', this._clickHandler, false);
 
     this.wrapper.addEventListener('touchstart', this._dragStart, false);
-    window.addEventListener('touchend', this._dragEnd, false);
+    globalThis.window?.addEventListener('touchend', this._dragEnd, false);
     this.wrapper.addEventListener('touchmove', this._drag, false);
 
     this.wrapper.addEventListener('mousedown', this._dragStart, false);
-    window.addEventListener('mouseup', this._dragEnd, false);
-    window.addEventListener('mousemove', this._drag, false);
+    globalThis.window?.addEventListener('mouseup', this._dragEnd, false);
+    globalThis.window?.addEventListener('mousemove', this._drag, false);
 
     this.enableThumbnails();
   }
@@ -356,7 +356,7 @@ class MediaClipSelector extends window.HTMLElement {
      */
     if (this.isTimestampInBounds(timestampForClick)) {
       this.dispatchEvent(
-        new window.CustomEvent(MediaUIEvents.MEDIA_SEEK_REQUEST, {
+        new globalThis.CustomEvent(MediaUIEvents.MEDIA_SEEK_REQUEST, {
           composed: true,
           bubbles: true,
           detail: timestampForClick,
@@ -388,7 +388,7 @@ class MediaClipSelector extends window.HTMLElement {
         this.mediaCurrentTime > endTime
       ) {
         this.dispatchEvent(
-          new window.CustomEvent(MediaUIEvents.MEDIA_SEEK_REQUEST, {
+          new globalThis.CustomEvent(MediaUIEvents.MEDIA_SEEK_REQUEST, {
             composed: true,
             bubbles: true,
             detail: startTime,
@@ -407,8 +407,8 @@ class MediaClipSelector extends window.HTMLElement {
     this.wrapper.removeEventListener('touchmove', this._drag);
 
     this.wrapper.removeEventListener('mousedown', this._dragStart);
-    window.removeEventListener('mouseup', this._dragEnd);
-    window.removeEventListener('mousemove', this._drag);
+    globalThis.window?.removeEventListener('mouseup', this._dragEnd);
+    globalThis.window?.removeEventListener('mousemove', this._drag);
   }
 
   /*
@@ -444,18 +444,18 @@ class MediaClipSelector extends window.HTMLElement {
 
         this.thumbnailPreview.style.left = `${thumbnailLeft}px`;
         this.dispatchEvent(
-          new window.CustomEvent(MediaUIEvents.MEDIA_PREVIEW_REQUEST, {
+          new globalThis.CustomEvent(MediaUIEvents.MEDIA_PREVIEW_REQUEST, {
             composed: true,
             bubbles: true,
             detail: mousePercent * duration,
           })
         );
       };
-      window.addEventListener('mousemove', mouseMoveHandler, false);
+      globalThis.window?.addEventListener('mousemove', mouseMoveHandler, false);
     };
 
     const stopTrackingMouse = () => {
-      window.removeEventListener('mousemove', mouseMoveHandler);
+      globalThis.window?.removeEventListener('mousemove', mouseMoveHandler);
     };
 
     // Trigger when the mouse moves over the range
@@ -469,12 +469,12 @@ class MediaClipSelector extends window.HTMLElement {
         let offRangeHandler = (evt) => {
           if (evt.target != this && !this.contains(evt.target)) {
             this.thumbnailPreview.style.display = 'none';
-            window.removeEventListener('mousemove', offRangeHandler);
+            globalThis.window?.removeEventListener('mousemove', offRangeHandler);
             rangeEntered = false;
             stopTrackingMouse();
           }
         };
-        window.addEventListener('mousemove', offRangeHandler, false);
+        globalThis.window?.addEventListener('mousemove', offRangeHandler, false);
       }
 
       if (!this.mediaDuration) {
@@ -494,8 +494,8 @@ class MediaClipSelector extends window.HTMLElement {
   }
 }
 
-if (!window.customElements.get('media-clip-selector')) {
-  window.customElements.define('media-clip-selector', MediaClipSelector);
+if (!globalThis.customElements.get('media-clip-selector')) {
+  globalThis.customElements.define('media-clip-selector', MediaClipSelector);
 }
 
 export default MediaClipSelector;

src/js/media-airplay-button.js

@@ -1,5 +1,5 @@
 import { MediaChromeButton } from './media-chrome-button.js';
-import { window, document } from './utils/server-safe-globals.js';
+import { globalThis, document } from './utils/server-safe-globals.js';
 import { MediaUIEvents, MediaUIAttributes } from './constants.js';
 import { verbs } from './labels/labels.js';
 import { getStringAttr, setStringAttr } from './utils/element-utils.js';
@@ -52,16 +52,16 @@ class MediaAirplayButton extends MediaChromeButton {
   }
 
   handleClick() {
-    const evt = new window.CustomEvent(MediaUIEvents.MEDIA_AIRPLAY_REQUEST, {
+    const evt = new globalThis.CustomEvent(MediaUIEvents.MEDIA_AIRPLAY_REQUEST, {
       composed: true,
       bubbles: true,
     });
     this.dispatchEvent(evt);
   }
 }
 
-if (!window.customElements.get('media-airplay-button')) {
-  window.customElements.define('media-airplay-button', MediaAirplayButton);
+if (!globalThis.customElements.get('media-airplay-button')) {
+  globalThis.customElements.define('media-airplay-button', MediaAirplayButton);
 }
 
 export default MediaAirplayButton;