@js-toolkit/web-utils 1.66.0 → 1.68.0

package/iframe/getOriginFromMessage.js

@@ -1 +1,3 @@
-export function getOriginFromMessage({origin:n}){return n&&"null"!==n&&"undefined"!==n?n:"*"}
+export function getOriginFromMessage({ origin }) {
+    return !origin || origin === 'null' || origin === 'undefined' ? '*' : origin;
+}

package/iframe/isIframeLoaded.js

@@ -1 +1,9 @@
-export function isIframeLoaded(e,{blank:t,complete:n}={}){if(!e.contentDocument)return!1;const{documentURI:o,readyState:c}=e.contentDocument;return(t||!!o&&"about:blank"!==o)&&(n?"complete"===c:"interactive"===c||"complete"===c)}
+export function isIframeLoaded(iframe, { blank, complete } = {}) {
+    if (!iframe.contentDocument)
+        return false;
+    const { documentURI, readyState } = iframe.contentDocument;
+    return ((blank || (!!documentURI && documentURI !== 'about:blank')) &&
+        (complete
+            ? readyState === 'complete'
+            : readyState === 'interactive' || readyState === 'complete'));
+}

package/iframe/messages.d.ts

@@ -1,11 +1,11 @@
 export declare const IFRAME_PING = "@_IFRAME_PING";
 export declare const IFRAME_HOST_READY = "@_IFRAME_HOST_READY";
 export declare const IFRAME_CLIENT_READY = "@_IFRAME_CLIENT_READY";
-export type MessagesTypes = {
+export interface MessagesTypes {
     readonly Ping: string;
     readonly TargetReady: string;
     readonly SelfReady: string;
-};
+}
 export declare function getHostMessages(): MessagesTypes;
 export declare function getClientMessages(): MessagesTypes;
 export interface IframeMessage<T extends keyof MessagesTypes = keyof MessagesTypes> {

package/iframe/messages.js

@@ -1 +1,50 @@
-export const IFRAME_PING="@_IFRAME_PING";export const IFRAME_HOST_READY="@_IFRAME_HOST_READY";export const IFRAME_CLIENT_READY="@_IFRAME_CLIENT_READY";export function getHostMessages(){return{Ping:IFRAME_PING,SelfReady:IFRAME_HOST_READY,TargetReady:IFRAME_CLIENT_READY}}export function getClientMessages(){return{Ping:IFRAME_PING,SelfReady:IFRAME_CLIENT_READY,TargetReady:IFRAME_HOST_READY}}export function isPingMessage(e,t){return!!e&&e.type===t.Ping}export function isTargetReadyMessage(e,t){return!!e&&e.type===t.TargetReady}
+export const IFRAME_PING = '@_IFRAME_PING';
+export const IFRAME_HOST_READY = '@_IFRAME_HOST_READY';
+export const IFRAME_CLIENT_READY = '@_IFRAME_CLIENT_READY';
+export function getHostMessages() {
+    return {
+        Ping: IFRAME_PING,
+        SelfReady: IFRAME_HOST_READY,
+        TargetReady: IFRAME_CLIENT_READY,
+    };
+}
+export function getClientMessages() {
+    return {
+        Ping: IFRAME_PING,
+        SelfReady: IFRAME_CLIENT_READY,
+        TargetReady: IFRAME_HOST_READY,
+    };
+}
+// export type IframePingMessage = IframeMessage<'Ping'>;
+// export interface IframeHostReadyMessage<T> extends IframeDataMessage<'HostReady', T> {}
+// export interface IframeClientReadyMessage<T> extends IframeDataMessage<'ClientReady', T> {}
+// export function isIframeMessage<T extends keyof MessagesTypes>(
+//   data: unknown,
+//   validType: T
+// ): data is IframeMessage<T> {
+//   return !!data && (data as IframeMessage<T>).type === validType;
+// }
+// export function isIframeDataMessage<T extends string, D>(
+//   data: unknown,
+//   validType: T
+// ): data is IframeDataMessage<T, D> {
+//   return !!data && (data as IframeDataMessage<T, D>).type === validType;
+// }
+export function isPingMessage(data, messagesTypes) {
+    return data != null && data.type === messagesTypes.Ping;
+}
+export function isTargetReadyMessage(data, messagesTypes) {
+    return data != null && data.type === messagesTypes.TargetReady;
+}
+// export function isHostReadyMessage<T>(
+//   data: unknown,
+//   messagesTypes: MessagesTypes
+// ): data is IframeDataMessage<'HostReady', T> {
+//   return !!data && (data as IframeDataMessage).type === messagesTypes.HostReady;
+// }
+// export function isClientReadyMessage<T>(
+//   data: unknown,
+//   messagesTypes: MessagesTypes
+// ): data is IframeDataMessage<'ClientReady', T> {
+//   return !!data && (data as IframeDataMessage).type === messagesTypes.ClientReady;
+// }

package/iframe/utils.js

@@ -1 +1,33 @@
-export function findTarget(e,n){const{length:t}=n;for(let o=0;o<t;o+=1){const t=n[o];if((t instanceof HTMLIFrameElement?t.contentWindow:t)===e)return t}}export function isWindowProxy(e){return!(void 0!==window.MessagePort&&e instanceof MessagePort||void 0!==window.ServiceWorker&&e instanceof ServiceWorker)}export function readTargets(e){const n=new Array,{length:t}=e;for(let o=0;o<t;o+=1){const t=e[o],r=t instanceof HTMLIFrameElement?t.contentWindow:t;r&&n.push(r)}return n}
+export function findTarget(source, targets
+// logger: Pick<Console, 'warn'> | undefined = console
+) {
+    const { length } = targets;
+    for (let i = 0; i < length; i += 1) {
+        const frame = targets[i];
+        const window = frame instanceof HTMLIFrameElement ? frame.contentWindow : frame;
+        if (window === source)
+            return frame;
+        // if (window == null) {
+        //   logger.warn(`Search target: <iframe>(#${frame.id}) contentWindow is undefined.`);
+        // }
+    }
+    return undefined;
+}
+export function isWindowProxy(target) {
+    return !((window.MessagePort !== undefined && target instanceof MessagePort) ||
+        (window.ServiceWorker !== undefined && target instanceof ServiceWorker));
+}
+export function readTargets(list) {
+    // const result = new Array<Window>(list.length);
+    const result = new Array();
+    const { length } = list;
+    for (let i = 0; i < length; i += 1) {
+        const frame = list[i];
+        const window = frame instanceof HTMLIFrameElement ? frame.contentWindow : frame;
+        if (window) {
+            result.push(window);
+            // result[i] = window;
+        }
+    }
+    return result;
+}

package/imageToBlob.js

@@ -1 +1,20 @@
-import{get2dContextError}from"./takeScreenshot";export function imageToBlob(t){return new Promise((e,o)=>{const r=document.createElement("canvas");r.width=t.width,r.height=t.height;const n=r.getContext("2d");if(!n)throw get2dContextError();n.drawImage(t,0,0),r.toBlob(t=>{t?e(t):o(new Error("Unable to get blob from image."))})})}
+import { get2dContextError } from './takeScreenshot';
+export function imageToBlob(image) {
+    return new Promise((resolve, reject) => {
+        const canvas = document.createElement('canvas');
+        canvas.width = image.width;
+        canvas.height = image.height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            throw get2dContextError();
+        ctx.drawImage(image, 0, 0);
+        canvas.toBlob((blob) => {
+            if (blob) {
+                resolve(blob);
+            }
+            else {
+                reject(new Error('Unable to get blob from image.'));
+            }
+        });
+    });
+}

package/isImageTypeSupported.js

@@ -1 +1,8 @@
-export function isImageTypeSupported(t){try{return document.createElement("canvas").toDataURL(t).startsWith(`data:${t}`)}catch{return!1}}
+export function isImageTypeSupported(mimeType) {
+    try {
+        return document.createElement('canvas').toDataURL(mimeType).startsWith(`data:${mimeType}`);
+    }
+    catch {
+        return false;
+    }
+}

package/isWebPSupported.js

@@ -1 +1,15 @@
-export async function isWebPSupported(A="lossy"){const Q={lossy:"UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",lossless:"UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",alpha:"UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",animation:"UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"},o=new Image;return new Promise(l=>{o.onload=()=>l(o.width>0&&o.height>0),o.onerror=()=>l(!1),o.src=`data:image/webp;base64,${Q[A]}`})}
+// https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp
+export async function isWebPSupported(feature = 'lossy') {
+    const testImages = {
+        lossy: 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
+        lossless: 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==',
+        alpha: 'UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==',
+        animation: 'UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA',
+    };
+    const img = new Image();
+    return new Promise((resolve) => {
+        img.onload = () => resolve(img.width > 0 && img.height > 0);
+        img.onerror = () => resolve(false);
+        img.src = `data:image/webp;base64,${testImages[feature]}`;
+    });
+}

package/loadImage.js

@@ -1 +1,29 @@
-export function loadImage(o){return new Promise((n,r)=>{const e=new Image;if(e.onload=()=>{e.onload=null,e.onerror=null,n(e)},e.onerror=o=>{e.onload=null,e.onerror=null,r(o)},"string"==typeof o)e.src=o;else{const{crossOrigin:n,...r}=o;void 0!==n&&(e.crossOrigin=n),Object.assign(e,r)}})}
+/** Don't worry, it uses cached by browser image if url already loaded previously otherwise cache the image. */
+export function loadImage(src
+// crossOrigin?: HTMLImageElement['crossOrigin'] | undefined
+) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            img.onload = null;
+            img.onerror = null;
+            resolve(img);
+        };
+        img.onerror = (event) => {
+            img.onload = null;
+            img.onerror = null;
+            // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
+            reject(event);
+        };
+        if (typeof src === 'string') {
+            img.src = src;
+        }
+        else {
+            const { crossOrigin, ...rest } = src;
+            if (crossOrigin !== undefined) {
+                img.crossOrigin = crossOrigin;
+            }
+            Object.assign(img, rest);
+        }
+    });
+}

package/loadScript.d.ts

@@ -8,4 +8,4 @@ export interface LoadScriptOptions extends Partial<Pick<HTMLScriptElement, 'id'>
     /** Defaults to `true`. */
     waitDomReady?: boolean | undefined;
 }
-export declare function loadScript(url: string, { id, keepScript, async, defer, waitDomReady, }?: LoadScriptOptions, isExecuted?: (() => boolean) | undefined): Promise<void>;
+export declare function loadScript(url: string, { id, keepScript, async, defer, waitDomReady, }?: LoadScriptOptions, isExecuted?: () => boolean): Promise<void>;

package/loadScript.js

@@ -1 +1,67 @@
-import{onDOMReady}from"./onDOMReady";function findScript(e){const r=e.startsWith("//")?window.location.protocol+e:e,{length:t}=document.scripts;for(let e=0;e<t;e+=1)if(document.scripts[e].src===r)return document.scripts[e]}function load(e,{id:r,keepScript:t,async:n,defer:o},c,d,i){try{const s=r?document.scripts.namedItem(r):findScript(e);if(s&&(!c||c()))return void d();const a=s??document.createElement("script"),p=()=>{a.removeEventListener("load",m),a.removeEventListener("error",f),t||s||a.remove()},m=()=>{p(),d()},f=r=>{p();const t=r instanceof ErrorEvent?r:new Error(`Unable to load script by url ${e}.`,{cause:r});i(t)};a.addEventListener("load",m,{once:!0}),a.addEventListener("error",f,{once:!0}),s||(r&&(a.id=r),a.async=n,a.defer=o,a.src=e,document.head.appendChild(a))}catch(e){i(e)}}export function loadScript(e,{id:r,keepScript:t=!1,async:n=!0,defer:o=!1,waitDomReady:c=!0}={},d=void 0){return new Promise((i,s)=>{c?onDOMReady(()=>{load(e,{id:r??"",keepScript:t,async:n,defer:o},d,i,s)}):load(e,{id:r??"",keepScript:t,async:n,defer:o},d,i,s)})}
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { onDOMReady } from './onDOMReady';
+function findScript(src) {
+    const url = src.startsWith('//') ? window.location.protocol + src : src;
+    const { length } = document.scripts;
+    for (let i = 0; i < length; i += 1) {
+        if (document.scripts[i].src === url) {
+            return document.scripts[i];
+        }
+    }
+    return undefined;
+}
+function load(url, { id, keepScript, async, defer }, isExecuted, resolve, reject) {
+    try {
+        const addedScript = id ? document.scripts.namedItem(id) : findScript(url);
+        if (addedScript && (!isExecuted || isExecuted())) {
+            resolve();
+            return;
+        }
+        const scriptElement = addedScript ?? document.createElement('script');
+        const done = () => {
+            scriptElement.removeEventListener('load', onLoad);
+            scriptElement.removeEventListener('error', onError);
+            if (!keepScript && !addedScript) {
+                scriptElement.remove();
+            }
+        };
+        const onLoad = () => {
+            done();
+            resolve();
+        };
+        const onError = (error) => {
+            done();
+            const ex = error instanceof ErrorEvent
+                ? error
+                : new Error(`Unable to load script by url ${url}.`, { cause: error });
+            reject(ex);
+        };
+        // Subscribe in any way because the script may be already added but not executed/loaded yet.
+        scriptElement.addEventListener('load', onLoad, { once: true });
+        scriptElement.addEventListener('error', onError, { once: true });
+        if (!addedScript) {
+            if (id) {
+                scriptElement.id = id;
+            }
+            scriptElement.async = async;
+            scriptElement.defer = defer;
+            scriptElement.src = url;
+            document.head.appendChild(scriptElement);
+        }
+    }
+    catch (error) {
+        reject(error);
+    }
+}
+export function loadScript(url, { id, keepScript = false, async = true, defer = false, waitDomReady = true, } = {}, isExecuted) {
+    return new Promise((resolve, reject) => {
+        if (waitDomReady) {
+            onDOMReady(() => {
+                load(url, { id: id ?? '', keepScript, async, defer }, isExecuted, resolve, reject);
+            });
+        }
+        else {
+            load(url, { id: id ?? '', keepScript, async, defer }, isExecuted, resolve, reject);
+        }
+    });
+}

package/media/Capabilities.js

@@ -1 +1,44 @@
-import{getMediaSource}from"./getMediaSource";export class Capabilities{static supportMap=new Map;static canPlayMap=new Map;static tmpVideo;static cacheTimer;static isCanPlayType(t){if(this.canPlayMap.has(t))return!!this.canPlayMap.get(t);this.tmpVideo||(this.tmpVideo=document.getElementsByTagName("video")[0]||document.createElement("video"),window.clearTimeout(this.cacheTimer),this.cacheTimer=window.setTimeout(()=>{this.tmpVideo=void 0},1e3));const e=!!this.tmpVideo.canPlayType(t);return this.supportMap.set(t,e),e}static isTypeSupported(t,e){if(this.supportMap.has(t))return!!this.supportMap.get(t);const i=getMediaSource(e);if(i){const e=i.isTypeSupported(t);return this.supportMap.set(t,e),e}return!1}static reset(){window.clearTimeout(this.cacheTimer),this.tmpVideo=void 0,this.supportMap.clear(),this.canPlayMap.clear()}}
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+import { getMediaSource } from './getMediaSource';
+export class Capabilities {
+    static supportMap = new Map();
+    static canPlayMap = new Map();
+    static tmpVideo;
+    static cacheTimer;
+    /** Check video element. Mime type and optional codecs. */
+    static isCanPlayType(type) {
+        if (this.canPlayMap.has(type)) {
+            return !!this.canPlayMap.get(type);
+        }
+        if (!this.tmpVideo) {
+            this.tmpVideo = document.getElementsByTagName('video')[0] ?? document.createElement('video');
+            // Release handle for GC work.
+            window.clearTimeout(this.cacheTimer);
+            this.cacheTimer = window.setTimeout(() => {
+                this.tmpVideo = undefined;
+            }, 1000);
+        }
+        const support = !!this.tmpVideo.canPlayType(type);
+        this.supportMap.set(type, support);
+        return support;
+    }
+    /** Check MediaSource. */
+    static isTypeSupported(type, managedMediaSource) {
+        if (this.supportMap.has(type)) {
+            return !!this.supportMap.get(type);
+        }
+        const mediaSource = getMediaSource(managedMediaSource);
+        if (mediaSource) {
+            const support = mediaSource.isTypeSupported(type);
+            this.supportMap.set(type, support);
+            return support;
+        }
+        return false;
+    }
+    static reset() {
+        window.clearTimeout(this.cacheTimer);
+        this.tmpVideo = undefined;
+        this.supportMap.clear();
+        this.canPlayMap.clear();
+    }
+}

package/media/MediaNotAttachedError.d.ts

@@ -1,4 +1,4 @@
 import { ErrorCompat } from '@js-toolkit/utils/ErrorCompat';
 export declare class MediaNotAttachedError extends ErrorCompat {
-    constructor(message?: string, options?: ErrorOptions | undefined);
+    constructor(message?: string, options?: ErrorOptions);
 }

package/media/MediaNotAttachedError.js

@@ -1 +1,6 @@
-import{ErrorCompat}from"@js-toolkit/utils/ErrorCompat";export class MediaNotAttachedError extends ErrorCompat{constructor(t="Media element is not attached yet.",r=void 0){super(MediaNotAttachedError,t,{...r,name:"MediaNotAttachedError "})}}
+import { ErrorCompat } from '@js-toolkit/utils/ErrorCompat';
+export class MediaNotAttachedError extends ErrorCompat {
+    constructor(message = 'Media element is not attached yet.', options) {
+        super(MediaNotAttachedError, message, { ...options, name: 'MediaNotAttachedError ' });
+    }
+}

package/media/MediaStreamController.js

@@ -1 +1,84 @@
-import{resetMedia}from"./resetMedia";export function attachMediaStream(e,t){t&&t.active&&e.muted&&0===t.getVideoTracks().filter(e=>!e.getSettings().displaySurface).length?e.srcObject=null:e.srcObject=t&&t.active?t:null}export function removeTrack(e,t){e.removeTrack(t),e.dispatchEvent(new MediaStreamTrackEvent("removetrack",{track:t}))}export function addTrack(e,t,a){e.addTrack(t),e.dispatchEvent(new MediaStreamTrackEvent("addtrack",{track:t})),t.addEventListener("ended",()=>{removeTrack(e,t),a&&a()},{once:!0})}export class MediaStreamController{mediaStream;media;constructor(e){this.mediaStream=e}attach(e){this.media=e,attachMediaStream(e,this.mediaStream)}detach(){if(this.media){const{media:e}=this;this.media=void 0,resetMedia(e)}}updateStream(e){if(this.mediaStream===e)return;const{media:t}=this;this.mediaStream=e,t&&this.attach(t)}removeTrack(e){removeTrack(this.mediaStream,e)}addTrack(e,t){addTrack(this.mediaStream,e,()=>{this.removeTrack(e),t&&t()})}reset(){this.mediaStream.getTracks().forEach(e=>{e.stop(),this.removeTrack(e)})}destroy(){this.detach(),this.reset()}[Symbol.dispose](){this.destroy()}}
+import { resetMedia } from './resetMedia';
+export function attachMediaStream(media, stream) {
+    // Reassign stream will trigger events onEmptied, onLoadStart and so on.
+    // If stream is empty or has only audio and muted then will fire onLoadStart and stop on it,
+    // so we need assign null instead of empty stream in order for fire onEmptied and stop on it.
+    if (stream &&
+        stream.active &&
+        media.muted &&
+        // Assign null if screen sharing (especially for local stream)
+        stream.getVideoTracks().filter((t) => !t.getSettings().displaySurface).length === 0) {
+        media.srcObject = null;
+        return;
+    }
+    media.srcObject = stream?.active ? stream : null;
+}
+export function removeTrack(mediaStream, track) {
+    mediaStream.removeTrack(track);
+    // Dispatch event manually because on local stream it not fired
+    mediaStream.dispatchEvent(new MediaStreamTrackEvent('removetrack', { track }));
+}
+export function addTrack(mediaStream, track, onEnded) {
+    mediaStream.addTrack(track);
+    // Dispatch event manually because on local stream it not fired
+    mediaStream.dispatchEvent(new MediaStreamTrackEvent('addtrack', { track }));
+    // When track is uncontrolled ended then remove it from stream
+    track.addEventListener('ended', () => {
+        removeTrack(mediaStream, track);
+        if (onEnded)
+            onEnded();
+    }, { once: true });
+}
+export class MediaStreamController {
+    mediaStream;
+    media;
+    constructor(mediaStream) {
+        this.mediaStream = mediaStream;
+    }
+    attach(media) {
+        // if (this.media !== media) {
+        //   this.detachMedia();
+        // }
+        this.media = media;
+        attachMediaStream(media, this.mediaStream);
+    }
+    detach() {
+        if (this.media) {
+            const { media } = this;
+            this.media = undefined;
+            resetMedia(media);
+        }
+    }
+    updateStream(stream) {
+        if (this.mediaStream === stream)
+            return;
+        const { media } = this;
+        // this.detachMedia();
+        this.mediaStream = stream;
+        if (media)
+            this.attach(media);
+    }
+    removeTrack(track) {
+        removeTrack(this.mediaStream, track);
+    }
+    addTrack(track, onEnded) {
+        addTrack(this.mediaStream, track, () => {
+            this.removeTrack(track);
+            if (onEnded)
+                onEnded();
+        });
+    }
+    reset() {
+        this.mediaStream.getTracks().forEach((track) => {
+            track.stop();
+            this.removeTrack(track);
+        });
+    }
+    destroy() {
+        this.detach();
+        this.reset();
+    }
+    [Symbol.dispose]() {
+        this.destroy();
+    }
+}

package/media/PipController.d.ts

@@ -29,9 +29,9 @@ export declare namespace PipController {
     enum Events {
         Change = "change"
     }
-    type EventMap = {
+    type EventMap = EventEmitter.EventMap<DefineAll<Events, {
         [Events.Change]: [{
             pip: boolean;
         }];
-    };
+    }>, PipController>;
 }

package/media/PipController.js

@@ -1 +1,140 @@
-import{EventEmitter}from"@js-toolkit/utils/EventEmitter";import{EventEmitterListener}from"../EventEmitterListener";import{toggleNativeSubtitles}from"./toggleNativeSubtitles";const getPipUnavailableError=()=>new Error("PiP is not available");export class PipController extends EventEmitter{options;static isApiEnabled(){return!!HTMLVideoElement.prototype.requestPictureInPicture&&!!document.exitPictureInPicture&&!!document.pictureInPictureEnabled}static isWebkitApiEnabled(e){return!!e.webkitSupportsPresentationMode&&e.webkitSupportsPresentationMode("picture-in-picture")}static isAvailable(e){return this.isApiEnabled()&&!e.disablePictureInPicture||this.isWebkitApiEnabled(e)}get Events(){return PipController.Events}listener;constructor(e,t={}){if(super(),this.options=t,this.listener=new EventEmitterListener(e),PipController.isAvailable(e)){const e=(()=>{const e=()=>{e.nativeSubtitles=this.options.toggleNativeSubtitles&&this.listener.target.textTracks.length>0,e.nativeSubtitles&&toggleNativeSubtitles(!0,this.listener.target.textTracks),this.emit(this.Events.Change,{pip:!0})};return e.nativeSubtitles=void 0,e})(),t=()=>{e.nativeSubtitles&&toggleNativeSubtitles(!1,this.listener.target.textTracks),this.emit(this.Events.Change,{pip:!1})};PipController.isApiEnabled()?(this.listener.on("enterpictureinpicture",e),this.listener.on("leavepictureinpicture",t)):this.listener.on("webkitpresentationmodechanged",(()=>{let i=this.listener.target.webkitPresentationMode;return()=>{"picture-in-picture"===this.listener.target.webkitPresentationMode?e():"picture-in-picture"===i&&t(),i=this.listener.target.webkitPresentationMode}})(),!0)}}isPip(){return PipController.isApiEnabled()?document.pictureInPictureElement===this.listener.target:"picture-in-picture"===this.listener.target.webkitPresentationMode}getCurrentElement(){return this.isPip()?this.listener.target:null}request(){return new Promise((e,t)=>{if(this.isPip())e();else{if(!PipController.isAvailable(this.listener.target))throw getPipUnavailableError();PipController.isApiEnabled()?this.listener.target.requestPictureInPicture().then(()=>e(),t):(this.listener.once("webkitpresentationmodechanged",()=>{"picture-in-picture"===this.listener.target.webkitPresentationMode?e():t(new Error("Something went wrong."))},!0),this.listener.target.webkitSetPresentationMode("picture-in-picture"))}})}exit(){return new Promise((e,t)=>{if(this.isPip()){if(!PipController.isAvailable(this.listener.target))throw getPipUnavailableError();PipController.isApiEnabled()?document.exitPictureInPicture().then(e,t):(this.listener.once("webkitpresentationmodechanged",()=>{"picture-in-picture"!==this.listener.target.webkitPresentationMode?e():t(new Error("Something went wrong."))},!0),this.listener.target.webkitSetPresentationMode("inline"))}else e()})}destroy(){return this.exit().finally(()=>{this.removeAllListeners(),this.listener.removeAllListeners()})}[Symbol.asyncDispose](){return this.destroy()}}!function(e){let t;!function(e){e.Change="change"}(t=e.Events||(e.Events={}))}(PipController||(PipController={}));
+/* eslint-disable @typescript-eslint/no-unnecessary-type-conversion */
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import { EventEmitter } from '@js-toolkit/utils/EventEmitter';
+import { EventEmitterListener } from '../EventEmitterListener';
+import { toggleNativeSubtitles } from './toggleNativeSubtitles';
+const getPipUnavailableError = () => new Error('PiP is not available');
+export class PipController extends EventEmitter {
+    options;
+    static isApiEnabled() {
+        return (!!HTMLVideoElement.prototype.requestPictureInPicture &&
+            !!document.exitPictureInPicture &&
+            !!document.pictureInPictureEnabled);
+    }
+    // Only able to call on instance
+    static isWebkitApiEnabled(media) {
+        return (!!media.webkitSupportsPresentationMode &&
+            media.webkitSupportsPresentationMode('picture-in-picture'));
+    }
+    static isAvailable(video) {
+        return ((this.isApiEnabled() && !video.disablePictureInPicture) || this.isWebkitApiEnabled(video));
+    }
+    // eslint-disable-next-line class-methods-use-this
+    get Events() {
+        return PipController.Events;
+    }
+    listener;
+    constructor(video, options = {}) {
+        super();
+        this.options = options;
+        this.listener = new EventEmitterListener(video);
+        if (PipController.isAvailable(video)) {
+            const enterPipHandler = (() => {
+                const handler = () => {
+                    handler.nativeSubtitles =
+                        this.options.toggleNativeSubtitles && this.listener.target.textTracks.length > 0;
+                    if (handler.nativeSubtitles) {
+                        toggleNativeSubtitles(true, this.listener.target.textTracks);
+                    }
+                    this.emit(this.Events.Change, { pip: true });
+                };
+                handler.nativeSubtitles = undefined;
+                return handler;
+            })();
+            const exitPipHandler = () => {
+                if (enterPipHandler.nativeSubtitles) {
+                    toggleNativeSubtitles(false, this.listener.target.textTracks);
+                }
+                this.emit(this.Events.Change, { pip: false });
+            };
+            if (PipController.isApiEnabled()) {
+                this.listener.on('enterpictureinpicture', enterPipHandler);
+                this.listener.on('leavepictureinpicture', exitPipHandler);
+            }
+            else {
+                this.listener.on('webkitpresentationmodechanged', (() => {
+                    let lastMode = this.listener.target.webkitPresentationMode;
+                    return () => {
+                        if (this.listener.target.webkitPresentationMode === 'picture-in-picture') {
+                            enterPipHandler();
+                        }
+                        else if (lastMode === 'picture-in-picture') {
+                            exitPipHandler();
+                        }
+                        lastMode = this.listener.target.webkitPresentationMode;
+                    };
+                })(), true);
+            }
+        }
+    }
+    isPip() {
+        return PipController.isApiEnabled()
+            ? document.pictureInPictureElement === this.listener.target
+            : this.listener.target.webkitPresentationMode === 'picture-in-picture';
+    }
+    getCurrentElement() {
+        return this.isPip() ? this.listener.target : null;
+    }
+    request() {
+        return new Promise((resolve, reject) => {
+            if (this.isPip()) {
+                resolve();
+                return;
+            }
+            if (!PipController.isAvailable(this.listener.target)) {
+                throw getPipUnavailableError();
+            }
+            if (PipController.isApiEnabled()) {
+                void this.listener.target.requestPictureInPicture().then(() => resolve(), reject);
+            }
+            else {
+                this.listener.once('webkitpresentationmodechanged', () => {
+                    if (this.listener.target.webkitPresentationMode === 'picture-in-picture')
+                        resolve();
+                    else
+                        reject(new Error('Something went wrong.'));
+                }, true);
+                this.listener.target.webkitSetPresentationMode('picture-in-picture');
+            }
+        });
+    }
+    exit() {
+        return new Promise((resolve, reject) => {
+            if (!this.isPip()) {
+                resolve();
+                return;
+            }
+            if (!PipController.isAvailable(this.listener.target)) {
+                throw getPipUnavailableError();
+            }
+            if (PipController.isApiEnabled()) {
+                void document.exitPictureInPicture().then(resolve, reject);
+            }
+            else {
+                this.listener.once('webkitpresentationmodechanged', () => {
+                    if (this.listener.target.webkitPresentationMode !== 'picture-in-picture')
+                        resolve();
+                    else
+                        reject(new Error('Something went wrong.'));
+                }, true);
+                this.listener.target.webkitSetPresentationMode('inline');
+            }
+        });
+    }
+    destroy() {
+        return this.exit().finally(() => {
+            this.removeAllListeners();
+            this.listener.removeAllListeners();
+        });
+    }
+    [Symbol.asyncDispose]() {
+        return this.destroy();
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-namespace
+(function (PipController) {
+    let Events;
+    (function (Events) {
+        Events["Change"] = "change";
+    })(Events = PipController.Events || (PipController.Events = {}));
+})(PipController || (PipController = {}));

package/media/TextTracksController/TextTracksController.d.ts

@@ -6,9 +6,6 @@ declare global {
     interface TextTrack {
         native?: boolean | undefined;
     }
-    interface TextTrackList {
-        [index: number]: TextTrack | undefined;
-    }
 }
 interface TextTracksEventMap {
     texttracklistchange: CustomEvent<TextTracksController.EventMap[TextTracksController.Events.TextTrackListChanged][0]>;