@warmerdam-ai/ui

Web Component UI layer for WebPlayer -- player shell, controls, playlist, and video viewport.

Note: Most users should install the webplayer package instead, which bundles this package together with the core engine.

Install

npm install @warmerdam-ai/ui

Components

| Custom Element | Class | Description | | --------------------- | ----------------- | ------------------------------------ | | <wp-player> | WPPlayer | Top-level player shell | | <wp-controls> | WPControls | Playback controls (play, skip, volume)| | <wp-playlist> | WPPlaylist | Playlist container | | <wp-playlist-item> | WPPlaylistItem | Individual track row | | <wp-play-button> | WPPlayButton | Standalone play/pause button | | <wp-video-viewport> | WPVideoViewport | Video rendering surface | | <wp-overlay> | WPOverlay | Overlay for video or artwork display | | <wp-progress> | WPProgress | Seek bar / progress indicator | | <wp-track-info> | WPTrackInfo | Current track title and artist | | <wp-drawer> | WPDrawer | Collapsible drawer panel |

Usage

Register all custom elements at once:

import { registerAll } from '@warmerdam-ai/ui';

registerAll();

Or import and register individual components:

import { WPPlayer } from '@warmerdam-ai/ui';

if (!customElements.get('wp-player')) {
  customElements.define('wp-player', WPPlayer);
}

Links

• webplayer package -- the recommended install for most users
• Full documentation

License

MIT