@js-toolkit/web-utils

TypeScript utilities for the browser: media, WebSocket, WebRTC, fullscreen, platform detection, responsive helpers, events, DOM, service workers, and more.

Install

yarn add @js-toolkit/web-utils
# or
npm install @js-toolkit/web-utils

Import

Use subpath imports for tree-shaking:

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 |

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

import { FullscreenController } from '@js-toolkit/web-utils/FullscreenController';

const controller = new FullscreenController(document.getElementById('player')!);
await controller.requestFullscreen();
console.log(controller.isFullscreen);

Platform detection

import { isMobile } from '@js-toolkit/web-utils/platform/isMobile';
import { isSafari } from '@js-toolkit/web-utils/platform/isSafari';

if (isMobile()) {
  // mobile-specific logic
}
if (isSafari()) {
  // Safari workaround
}

Event awaiter

import { getEventAwaiter } from '@js-toolkit/web-utils/getEventAwaiter';

const video = document.querySelector('video')!;
await getEventAwaiter(video, 'canplay').wait();
video.play();

Dynamic script loading

import { loadScript } from '@js-toolkit/web-utils/loadScript';

await loadScript('https://cdn.example.com/sdk.js');

Repository

https://github.com/js-toolkit/web-utils