@js-toolkit/web-utils 1.67.0 → 1.68.0

package/README.md

@@ -1,12 +1,11 @@
-# Web Utils
+# @js-toolkit/web-utils
 
 [![npm package](https://img.shields.io/npm/v/@js-toolkit/web-utils.svg?style=flat-square)](https://www.npmjs.org/package/@js-toolkit/web-utils)
+[![license](https://img.shields.io/npm/l/@js-toolkit/web-utils.svg?style=flat-square)](https://www.npmjs.org/package/@js-toolkit/web-utils)
 
-A lightweight utility library for common operations in the browser environment. This package simplifies tasks such as DOM manipulation, event handling, and other browser-related utilities.
+TypeScript utilities for the browser: media, WebSocket, WebRTC, fullscreen, platform detection, responsive helpers, events, DOM, service workers, and more.
 
-## Installation
-
-Install the library via npm:
+## Install
 
 ```bash
 yarn add @js-toolkit/web-utils
@@ -14,28 +13,168 @@ yarn add @js-toolkit/web-utils
 npm install @js-toolkit/web-utils
 ```
 
-# Usage
+## Import
 
-Here’s an example of how to use the library:
+Use subpath imports for tree-shaking:
 
-```ts
+```typescript
+import { FullscreenController } from '@js-toolkit/web-utils/FullscreenController';
 import { getRandomID } from '@js-toolkit/web-utils/getRandomID';
+import { isMobile } from '@js-toolkit/web-utils/platform/isMobile';
+```
+
+## API Overview
+
+### Media and Video
+
+| Module | Description |
+|--------|-------------|
+| `media/TextTracksController` | HTML5 video text tracks management |
+| `media/PipController` | Picture-in-Picture controller |
+| `media/MediaStreamController` | MediaStream attach/detach |
+| `media/Capabilities` | Media type support detection |
+| `media/timeRanges` | TimeRanges utilities |
+| `media/resetMedia` | Reset media element and clear decoder buffer |
+| `media/getMediaSource` | Get MediaSource or ManagedMediaSource |
+| `media/getSourceBuffer` | Get SourceBuffer or ManagedSourceBuffer |
+| `media/parseCueText` | WebVTT cue text parser |
+
+### WebSocket and WebRTC
+
+| Module | Description |
+|--------|-------------|
+| `ws/WSController` | WebSocket controller with auto-reconnect |
+| `webrtc/PeerConnection` | RTCPeerConnection wrapper |
+| `webrtc/sdputils` | SDP manipulation utilities |
+
+### Fullscreen
+
+| Module | Description |
+|--------|-------------|
+| `FullscreenController` | Fullscreen API controller with fallback |
+| `fullscreen` | Cross-browser fullscreen utilities |
+| `fullscreenUtils` | Pseudo-fullscreen helpers |
+
+### Platform Detection
+
+| Module | Description |
+|--------|-------------|
+| `platform/getPlatformInfo` | Browser/platform detection (ua-parser-js) |
+| `platform/isSafari`, `isChrome` | Browser detection |
+| `platform/isIOS`, `isAndroid`, `isMacOS` | OS detection |
+| `platform/isMobile` | Mobile device detection |
+| `platform/isTouchSupported` | Touch support detection |
+| `platform/isMSESupported` | Media Source Extensions support |
+| `platform/isEMESupported` | Encrypted Media Extensions support |
+| `platform/isAirPlayAvailable` | AirPlay availability |
+| `platform/Semver` | Semantic version parser |
+
+### Responsive
+
+| Module | Description |
+|--------|-------------|
+| `responsive/MediaQueryListener` | Media query change listener |
+| `responsive/MediaQuery` | Static media query utilities |
+| `responsive/ViewSize` | Viewport size enum and helpers |
+
+### Events
+
+| Module | Description |
+|--------|-------------|
+| `EventEmitterListener` | Unified listener for DOM/EventEmitter/EventTarget |
+| `EventListeners` | Multi-target event listener manager |
+| `getEventAwaiter` | Promise-based event waiting |
+
+### DOM
+
+| Module | Description |
+|--------|-------------|
+| `onDOMReady` | Execute callback when DOM is ready |
+| `onPageReady` | Execute callback when page is loaded |
+| `getInnerRect` | Element inner dimensions |
+| `toLocalPoint` | Convert coordinates to local element space |
+| `loadScript` | Dynamic script loading with deduplication |
+| `copyToClipboard` | Copy text to clipboard |
+
+### Files and Blobs
+
+| Module | Description |
+|--------|-------------|
+| `saveFileAs` | Trigger file download |
+| `loadImage` | Load image with caching |
+| `blobToDataUrl`, `dataUrlToBlob` | Blob/DataURL conversions |
+| `toBase64`, `fromBase64` | Unicode-safe base64 encoding |
+| `takeScreenshot` | Capture screenshot from CanvasImageSource |
 
-const id = getRandomID();
+### Animation
+
+| Module | Description |
+|--------|-------------|
+| `createLoop` | Interval-based loop with RAF throttling |
+| `createRafLoop` | RequestAnimationFrame loop |
+
+### Metrics
+
+| Module | Description |
+|--------|-------------|
+| `metrics/ga/*` | Google Analytics helpers |
+| `metrics/yandex/*` | Yandex Metrica helpers |
+
+### Other
+
+| Module | Description |
+|--------|-------------|
+| `getRandomID` | Random ID via crypto API |
+| `getBrowserLanguage` | Browser language detection |
+| `WakeLockController` | Screen wake lock |
+| `serviceWorker/ServiceWorkerInstaller` | Service worker registration |
+| `iframe/*` | Iframe parent-child communication |
+| `viewableTracker` | Element visibility tracking |
+
+## Usage Examples
+
+### FullscreenController
+
+```typescript
+import { FullscreenController } from '@js-toolkit/web-utils/FullscreenController';
+
+const controller = new FullscreenController(document.getElementById('player')!);
+await controller.requestFullscreen();
+console.log(controller.isFullscreen);
 ```
 
-# Features
+### Platform detection
 
-- Simplifies common browser tasks
-- Lightweight and fast
-- Easy to integrate with other JavaScript projects
+```typescript
+import { isMobile } from '@js-toolkit/web-utils/platform/isMobile';
+import { isSafari } from '@js-toolkit/web-utils/platform/isSafari';
 
-# Contributing
+if (isMobile()) {
+  // mobile-specific logic
+}
+if (isSafari()) {
+  // Safari workaround
+}
+```
+
+### Event awaiter
+
+```typescript
+import { getEventAwaiter } from '@js-toolkit/web-utils/getEventAwaiter';
+
+const video = document.querySelector('video')!;
+await getEventAwaiter(video, 'canplay').wait();
+video.play();
+```
+
+### Dynamic script loading
+
+```typescript
+import { loadScript } from '@js-toolkit/web-utils/loadScript';
+
+await loadScript('https://cdn.example.com/sdk.js');
+```
 
-Contributions are welcome! Please follow these steps:
+## Repository
 
-1. Fork the repository.
-1. Create a new branch (git checkout -b feature/my-feature-name).
-1. Commit your changes (git commit -m 'Add some feature').
-1. Push the branch (git push origin feature/my-feature-name).
-1. Open a pull request.
+[https://github.com/js-toolkit/web-utils](https://github.com/js-toolkit/web-utils)

package/WakeLockController.js

@@ -1 +1,76 @@
-import{EventEmitter}from"@js-toolkit/utils/EventEmitter";import{hasIn}from"@js-toolkit/utils/hasIn";export class WakeLockController extends EventEmitter{static isApiAvailable(){return hasIn(navigator,"wakeLock")&&null!=navigator.wakeLock}wakelock;releasing=!1;relockOnVisible=!1;restoreWakeLock=()=>{"visible"===document.visibilityState&&this.relockOnVisible&&(this.relockOnVisible=!1,this.request().catch(e=>this.emit("error",{error:e})))};onRelease=()=>{this.wakelock&&(this.wakelock.removeEventListener("release",this.onRelease),this.wakelock=void 0,this.releasing?document.removeEventListener("visibilitychange",this.restoreWakeLock):"hidden"===document.visibilityState&&(this.relockOnVisible=!0,document.addEventListener("visibilitychange",this.restoreWakeLock)),this.emit("deactivated"))};isActive(){return!!this.wakelock&&!this.wakelock.released}async request(){if(!this.wakelock){try{this.wakelock=await navigator.wakeLock.request("screen")}catch(e){if("visible"===document.visibilityState)throw e;return this.relockOnVisible=!0,document.addEventListener("visibilitychange",this.restoreWakeLock),void this.emit("error",{error:e})}this.relockOnVisible=!1,this.wakelock.addEventListener("release",this.onRelease),this.emit("activated")}}async release(){if(this.wakelock&&!this.wakelock.released)try{this.releasing=!0,await this.wakelock.release(),this.relockOnVisible=!1}finally{this.releasing=!1}}async destroy(){await this.release(),this.removeAllListeners()}[Symbol.asyncDispose](){return this.destroy()}}
+import { EventEmitter } from '@js-toolkit/utils/EventEmitter';
+import { hasIn } from '@js-toolkit/utils/hasIn';
+export class WakeLockController extends EventEmitter {
+    static isApiAvailable() {
+        return hasIn(navigator, 'wakeLock') && navigator.wakeLock != null;
+    }
+    wakelock;
+    releasing = false;
+    /** Lock when document will be visible. */
+    relockOnVisible = false;
+    restoreWakeLock = () => {
+        if (document.visibilityState === 'visible' && this.relockOnVisible) {
+            this.relockOnVisible = false;
+            this.request().catch((error) => this.emit('error', { error }));
+        }
+    };
+    onRelease = () => {
+        if (!this.wakelock)
+            return;
+        this.wakelock.removeEventListener('release', this.onRelease);
+        this.wakelock = undefined;
+        // Unsubscribe only if document is visible else keep subscription to re-lock when document will be visible again.
+        // Release the wakelock happens before `visibilitychange` callback.
+        if (this.releasing) {
+            document.removeEventListener('visibilitychange', this.restoreWakeLock);
+        }
+        // If not releasing via api
+        else if (document.visibilityState === 'hidden') {
+            this.relockOnVisible = true;
+            document.addEventListener('visibilitychange', this.restoreWakeLock);
+        }
+        this.emit('deactivated');
+    };
+    isActive() {
+        return !!this.wakelock && !this.wakelock.released;
+    }
+    async request() {
+        if (this.wakelock)
+            return;
+        try {
+            this.wakelock = await navigator.wakeLock.request('screen');
+        }
+        catch (error) {
+            // Probably do not have permissions.
+            if (document.visibilityState === 'visible')
+                throw error;
+            // If trying to wakelock when document inactive.
+            this.relockOnVisible = true;
+            document.addEventListener('visibilitychange', this.restoreWakeLock);
+            this.emit('error', { error });
+            return;
+        }
+        this.relockOnVisible = false;
+        this.wakelock.addEventListener('release', this.onRelease);
+        this.emit('activated');
+    }
+    async release() {
+        if (!this.wakelock || this.wakelock.released)
+            return;
+        try {
+            this.releasing = true;
+            await this.wakelock.release();
+            this.relockOnVisible = false;
+        }
+        finally {
+            this.releasing = false;
+        }
+    }
+    async destroy() {
+        await this.release();
+        this.removeAllListeners();
+    }
+    [Symbol.asyncDispose]() {
+        return this.destroy();
+    }
+}

package/base64ToDataUrl.js

@@ -1 +1,3 @@
-export function base64ToDataUrl(a,e="image/png"){return`data:${e};base64,${a}`}
+export function base64ToDataUrl(base64, type = 'image/png') {
+    return `data:${type};base64,${base64}`;
+}

package/blobToDataUrl.js

@@ -1 +1,10 @@
-export function blobToDataUrl(e){return new Promise((r,o)=>{const n=new FileReader;n.onload=()=>{r(n.result)},n.onerror=o,n.readAsDataURL(e)})}
+export function blobToDataUrl(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            resolve(reader.result);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+    });
+}

package/checkPermission.js

@@ -1 +1,8 @@
-export async function checkPermission(t){try{return(await(navigator.permissions?.query?.({name:t}))).state}catch{}}
+export async function checkPermission(name) {
+    try {
+        const result = await navigator.permissions?.query?.({ name });
+        return result.state;
+    }
+    catch { }
+    return undefined;
+}

package/copyToClipboard.js

@@ -1 +1,37 @@
-export function copyToClipboard(e){return navigator.clipboard?navigator.clipboard.writeText(e):new Promise((o,t)=>{const n=document.createElement("textarea");n.textContent=e,n.style.position="fixed",n.style.bottom="-100px",n.readOnly=!0,document.body.appendChild(n);const c=document.createRange();c.selectNode(n);const a=window.getSelection();if(a){a.removeAllRanges(),a.addRange(c),n.setSelectionRange(0,999999);try{document.execCommand("copy",!1),o()}catch(e){t(e)}finally{a.removeAllRanges(),document.body.removeChild(n)}}else t(new Error("No selection for copy to clipboard."))})}
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+/* eslint-disable @typescript-eslint/prefer-promise-reject-errors */
+/* eslint-disable @typescript-eslint/no-deprecated */
+export function copyToClipboard(text) {
+    if (navigator.clipboard) {
+        return navigator.clipboard.writeText(text);
+    }
+    return new Promise((resolve, reject) => {
+        const textarea = document.createElement('textarea');
+        textarea.textContent = text;
+        textarea.style.position = 'fixed';
+        textarea.style.bottom = '-100px';
+        textarea.readOnly = true; // To avoid showing keyboard;
+        document.body.appendChild(textarea);
+        const range = document.createRange();
+        range.selectNode(textarea);
+        const selection = window.getSelection();
+        if (!selection) {
+            reject(new Error('No selection for copy to clipboard.'));
+            return;
+        }
+        selection.removeAllRanges();
+        selection.addRange(range);
+        textarea.setSelectionRange(0, 999999);
+        try {
+            document.execCommand('copy', false);
+            resolve();
+        }
+        catch (err) {
+            reject(err);
+        }
+        finally {
+            selection.removeAllRanges();
+            document.body.removeChild(textarea);
+        }
+    });
+}

package/createLoop.js

@@ -1 +1,30 @@
-export function createLoop(){let e,t,n,a=!1;const r=()=>{a&&n&&(t&&cancelAnimationFrame(t),t=requestAnimationFrame(n))};return{start:(t,i)=>{n=t,a||(a=!0,e=window.setInterval(r,i))},stop:()=>{a&&(a=!1,window.clearInterval(e),t&&cancelAnimationFrame(t))},call:r,isActive:()=>a}}
+export function createLoop() {
+    let timer;
+    let raf;
+    let active = false;
+    let rafCallback;
+    const call = () => {
+        if (active && rafCallback) {
+            raf != null && cancelAnimationFrame(raf);
+            raf = requestAnimationFrame(rafCallback);
+        }
+    };
+    return {
+        start: (callback, wait) => {
+            rafCallback = callback;
+            if (!active) {
+                active = true;
+                timer = window.setInterval(call, wait);
+            }
+        },
+        stop: () => {
+            if (active) {
+                active = false;
+                window.clearInterval(timer);
+                raf != null && cancelAnimationFrame(raf);
+            }
+        },
+        call,
+        isActive: () => active,
+    };
+}

package/createRafLoop.js

@@ -1 +1,56 @@
-export function createRafLoop(){let e,t,o,i=!1,n=0,a=window;const r=()=>{a.clearTimeout(e),t&&a.cancelAnimationFrame(t),t=void 0,n=0,e=void 0},s=()=>{t=a.requestAnimationFrame(u)},u=u=>{o&&(i?(o(u),n>0?e=a.setTimeout(s,n):s()):null==t&&null==e||(r(),o(u)))};return{start:(e,{suspendTimeout:t=0,scope:r=window}={})=>{o=e,n=t,a=r,i||(i=!0,s())},stop:e=>{i&&(i=!1,e||r())},isActive:()=>i}}
+export function createRafLoop() {
+    let active = false;
+    let timer;
+    let raf;
+    let suspendTimeout = 0;
+    let scope = window;
+    let rafCallback;
+    const reset = () => {
+        scope.clearTimeout(timer);
+        raf != null && scope.cancelAnimationFrame(raf);
+        raf = undefined;
+        suspendTimeout = 0;
+        timer = undefined;
+    };
+    const call = () => {
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        raf = scope.requestAnimationFrame(step);
+    };
+    const step = (time) => {
+        if (!rafCallback)
+            return;
+        if (active) {
+            rafCallback(time);
+            if (suspendTimeout > 0) {
+                timer = scope.setTimeout(call, suspendTimeout);
+            }
+            else {
+                call();
+            }
+        }
+        // Wait last call
+        else if (raf != null || timer != null) {
+            reset();
+            rafCallback(time);
+        }
+    };
+    return {
+        start: (callback, { suspendTimeout: _suspendTimeout = 0, scope: _scope = window } = {}) => {
+            rafCallback = callback;
+            suspendTimeout = _suspendTimeout;
+            scope = _scope;
+            if (!active) {
+                active = true;
+                call();
+            }
+        },
+        stop: (waitLast) => {
+            if (active) {
+                active = false;
+                if (!waitLast)
+                    reset();
+            }
+        },
+        isActive: () => active,
+    };
+}

package/dataUrlToBlob.js

@@ -1 +1,13 @@
-export function dataUrlToBlob(t){const[e,n]=t.split(","),r=window.atob(n),o=e.split(":")[1].split(";")[0],l=new ArrayBuffer(r.length),a=new Uint8Array(l),{length:i}=r;for(let t=0;t<i;t+=1)a[t]=r.charCodeAt(t);return new Blob([l],{type:o})}
+// https://stackoverflow.com/a/12300351
+export function dataUrlToBlob(dataUrl) {
+    const [type, base64] = dataUrl.split(',');
+    const byteString = window.atob(base64);
+    const mimeString = type.split(':')[1].split(';')[0];
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    const { length } = byteString;
+    for (let i = 0; i < length; i += 1) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([ab], { type: mimeString });
+}

package/fromBase64.js

@@ -1 +1,10 @@
-export function fromBase64(e){const o=window.atob(e);return window.TextDecoder?(new TextDecoder).decode(Uint8Array.from(o,e=>e.codePointAt(0))):decodeURIComponent(escape(o))}
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-deprecated */
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+/** Safe for unicode string. */
+export function fromBase64(str) {
+    const binString = window.atob(str);
+    return window.TextDecoder
+        ? new TextDecoder().decode(Uint8Array.from(binString, (m) => m.codePointAt(0)))
+        : decodeURIComponent(escape(binString));
+}

package/fullscreen.js

@@ -1 +1,167 @@
-import{es5ErrorCompat}from"@js-toolkit/utils/es5ErrorCompat";import{promisify}from"@js-toolkit/utils/promisify";export class FullscreenUnavailableError extends Error{constructor(){super("Fullscreen is not available"),es5ErrorCompat(this,FullscreenUnavailableError)}}export var fullscreen;!function(e){e.names=[{requestFullscreenName:"requestFullscreen",exitFullscreenName:"exitFullscreen",fullscreenElementName:"fullscreenElement",fullscreenEnabledName:"fullscreenEnabled",changeEventName:"fullscreenchange",errorEventName:"fullscreenerror"},{requestFullscreenName:"webkitRequestFullscreen",exitFullscreenName:"webkitExitFullscreen",fullscreenElementName:"webkitFullscreenElement",fullscreenEnabledName:"webkitFullscreenEnabled",changeEventName:"webkitfullscreenchange",errorEventName:"webkitfullscreenerror"},{requestFullscreenName:"webkitRequestFullScreen",exitFullscreenName:"webkitCancelFullScreen",fullscreenElementName:"webkitCurrentFullScreenElement",fullscreenEnabledName:"webkitCancelFullScreen",changeEventName:"webkitfullscreenchange",errorEventName:"webkitfullscreenerror"},{requestFullscreenName:"mozRequestFullScreen",exitFullscreenName:"mozCancelFullScreen",fullscreenElementName:"mozFullScreenElement",fullscreenEnabledName:"mozFullScreenEnabled",changeEventName:"mozfullscreenchange",errorEventName:"mozfullscreenerror"},{requestFullscreenName:"msRequestFullscreen",exitFullscreenName:"msExitFullscreen",fullscreenElementName:"msFullscreenElement",fullscreenEnabledName:"msFullscreenEnabled",changeEventName:"MSFullscreenChange",errorEventName:"MSFullscreenError"}].find(({exitFullscreenName:e})=>e in document);const n={change:e.names?.changeEventName,error:e.names?.errorEventName};function r(){if(!e.names)throw new e.UnavailableError;return Boolean(document[e.names.fullscreenElementName])}function l(e,r,l){const a=n[e];a&&document.addEventListener(a,r,l)}function a(e,r,l){const a=n[e];a&&document.removeEventListener(a,r,l)}function t(n,r){return new Promise((t,s)=>{if(!e.names)throw new e.UnavailableError;const c=()=>{a("change",c),a("error",u),t()},u=e=>{a("change",c),a("error",u),s(e)};l("change",c),l("error",u),n[e.names.requestFullscreenName](r)})}function s(){return new Promise((n,t)=>{if(!e.names)throw new e.UnavailableError;if(!r())return void n();const s=()=>{a("change",s),a("error",c),n()},c=e=>{a("change",s),a("error",c),t(e)};l("change",s),l("error",c),document[e.names.exitFullscreenName]()})}e.UnavailableError=FullscreenUnavailableError,e.isApiAvailable=function(){return!!e.names},e.isApiEnabled=function(){return!!e.names&&Boolean(document[e.names.fullscreenEnabledName])},e.isFullscreen=r,e.getElement=function(){if(!e.names)throw new e.UnavailableError;return document[e.names.fullscreenElementName]},e.on=l,e.off=a,e.request=t,e.exit=s,e.toggle=function(e){return promisify(()=>r()?s():t(e))},e.onChange=function(e){l("change",e)},e.onError=function(e){l("error",e)}}(fullscreen||(fullscreen={}));
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/prefer-promise-reject-errors */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { es5ErrorCompat } from '@js-toolkit/utils/es5ErrorCompat';
+import { promisify } from '@js-toolkit/utils/promisify';
+export class FullscreenUnavailableError extends Error {
+    constructor() {
+        super('Fullscreen is not available');
+        es5ErrorCompat(this, FullscreenUnavailableError);
+    }
+}
+export var fullscreen;
+(function (fullscreen) {
+    fullscreen.names = (() => {
+        const fnNames = [
+            {
+                requestFullscreenName: 'requestFullscreen',
+                exitFullscreenName: 'exitFullscreen',
+                fullscreenElementName: 'fullscreenElement',
+                fullscreenEnabledName: 'fullscreenEnabled',
+                changeEventName: 'fullscreenchange',
+                errorEventName: 'fullscreenerror',
+            },
+            // New WebKit
+            {
+                requestFullscreenName: 'webkitRequestFullscreen',
+                exitFullscreenName: 'webkitExitFullscreen',
+                fullscreenElementName: 'webkitFullscreenElement',
+                fullscreenEnabledName: 'webkitFullscreenEnabled',
+                changeEventName: 'webkitfullscreenchange',
+                errorEventName: 'webkitfullscreenerror',
+            },
+            // Old WebKit
+            {
+                requestFullscreenName: 'webkitRequestFullScreen',
+                exitFullscreenName: 'webkitCancelFullScreen',
+                fullscreenElementName: 'webkitCurrentFullScreenElement',
+                fullscreenEnabledName: 'webkitCancelFullScreen',
+                changeEventName: 'webkitfullscreenchange',
+                errorEventName: 'webkitfullscreenerror',
+            },
+            {
+                requestFullscreenName: 'mozRequestFullScreen',
+                exitFullscreenName: 'mozCancelFullScreen',
+                fullscreenElementName: 'mozFullScreenElement',
+                fullscreenEnabledName: 'mozFullScreenEnabled',
+                changeEventName: 'mozfullscreenchange',
+                errorEventName: 'mozfullscreenerror',
+            },
+            {
+                requestFullscreenName: 'msRequestFullscreen',
+                exitFullscreenName: 'msExitFullscreen',
+                fullscreenElementName: 'msFullscreenElement',
+                fullscreenEnabledName: 'msFullscreenEnabled',
+                changeEventName: 'MSFullscreenChange',
+                errorEventName: 'MSFullscreenError',
+            },
+        ];
+        return fnNames.find(({ exitFullscreenName }) => exitFullscreenName in document);
+    })();
+    const eventNameMap = {
+        change: fullscreen.names?.changeEventName,
+        error: fullscreen.names?.errorEventName,
+    };
+    fullscreen.UnavailableError = FullscreenUnavailableError;
+    function isApiAvailable() {
+        return !!fullscreen.names;
+    }
+    fullscreen.isApiAvailable = isApiAvailable;
+    function isApiEnabled() {
+        // Coerce to boolean in case of old WebKit
+        return !!fullscreen.names && Boolean(document[fullscreen.names.fullscreenEnabledName]);
+    }
+    fullscreen.isApiEnabled = isApiEnabled;
+    function isFullscreen() {
+        if (!fullscreen.names)
+            throw new fullscreen.UnavailableError();
+        return Boolean(document[fullscreen.names.fullscreenElementName]);
+    }
+    fullscreen.isFullscreen = isFullscreen;
+    function getElement() {
+        if (!fullscreen.names)
+            throw new fullscreen.UnavailableError();
+        return document[fullscreen.names.fullscreenElementName];
+    }
+    fullscreen.getElement = getElement;
+    function on(type, listener, options) {
+        const eventName = eventNameMap[type];
+        if (eventName)
+            document.addEventListener(eventName, listener, options);
+    }
+    fullscreen.on = on;
+    function off(type, listener, options) {
+        const eventName = eventNameMap[type];
+        if (eventName)
+            document.removeEventListener(eventName, listener, options);
+    }
+    fullscreen.off = off;
+    function request(elem, options) {
+        return new Promise((resolve, reject) => {
+            if (!fullscreen.names) {
+                throw new fullscreen.UnavailableError();
+            }
+            const onFullScreenEntered = () => {
+                off('change', onFullScreenEntered);
+                off('error', onFullScreenError);
+                resolve();
+            };
+            const onFullScreenError = (event) => {
+                off('change', onFullScreenEntered);
+                off('error', onFullScreenError);
+                reject(event);
+            };
+            on('change', onFullScreenEntered);
+            on('error', onFullScreenError);
+            void elem[fullscreen.names.requestFullscreenName](options);
+            // const result = ((elem as AnyObject)[names.requestFullscreenName] as AnyAsyncFunction)(
+            //   options
+            // );
+            // if (result instanceof Promise) {
+            //   result.then(onFullScreenEntered).catch(onFullScreenError);
+            // }
+        });
+    }
+    fullscreen.request = request;
+    function exit() {
+        return new Promise((resolve, reject) => {
+            if (!fullscreen.names) {
+                throw new fullscreen.UnavailableError();
+            }
+            if (!isFullscreen()) {
+                resolve();
+                return;
+            }
+            const onFullScreenExited = () => {
+                off('change', onFullScreenExited);
+                off('error', onFullScreenError);
+                resolve();
+            };
+            const onFullScreenError = (event) => {
+                off('change', onFullScreenExited);
+                off('error', onFullScreenError);
+                reject(event);
+            };
+            on('change', onFullScreenExited);
+            on('error', onFullScreenError);
+            void document[fullscreen.names.exitFullscreenName]();
+            // const result = ((document as AnyObject)[names.exitFullscreenName] as AnyAsyncFunction)();
+            // if (result instanceof Promise) {
+            //   result.then(onFullScreenExited).catch(onFullScreenError);
+            // }
+        });
+    }
+    fullscreen.exit = exit;
+    function toggle(elem) {
+        return promisify(() => (isFullscreen() ? exit() : request(elem)));
+    }
+    fullscreen.toggle = toggle;
+    function onChange(listener) {
+        on('change', listener);
+    }
+    fullscreen.onChange = onChange;
+    function onError(listener) {
+        on('error', listener);
+    }
+    fullscreen.onError = onError;
+})(fullscreen || (fullscreen = {}));