npo-player-ui-core

npo-player-ui-core is the core library for the internal development of various UI distributions for the NPO Player. It provides shared logic, reusable components, and utilities that are used across different NPO Player UI implementations.

Features

• Reusable UI Components:
  Includes core UI elements such as play buttons, seek bars, and overlays, designed for consistency and easy integration. These are absent of styling, allowing for flexible design implementations.

• Event Listener Utilities:
  Provides logic for establishing and managing event listeners within the player UI, ensuring robust media state handling.

• Internationalization Support:
  Built-in i18n utilities to support multiple languages and localization needs.

• Constants and Shared Logic:
  Centralized constants and helper functions to avoid duplication and promote maintainability across UI projects.

Installation

Install via npm:

npm install @npo/player-ui-core

API Overview

Components

• PlayButton
  UI component for controlling media playback.

• SeekBar
  Interactive seek bar for media progress and live/VOD navigation.

• StateOverlay
  Overlay for displaying player states (e.g., loading, error).

Utilities

• Const
  Shared constants for ARIA labels and more.

• i18n
  Internationalization utility for language switching and translation.

• initMediaStateListeners
  Helper to initialize media state event listeners.

Example

import { PlayButton, SeekBar, StateOverlay, Const, i18n, initMediaStateListeners } from '@npo/player-ui-core';

const audio = document.querySelector('audio');
const container = document.getElementById('player-controls');

const playButton = new PlayButton(audio);
container.appendChild(playButton.render(container));

// Set up i18n
i18n.setLanguage('en');

// Initialize media state listeners
initMediaStateListeners(audio);

Contributing

1. Fork the repository and create your branch.
2. Run npm install to install dependencies.
3. Use npm run dev for development mode with watch.
4. Run tests with npm test.
5. Submit a pull request with a clear description of your changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.