@lumra/ui

Pre-built React UI components for the Lumra player. All components are optional — use them or replace them with your own.

Install

npm install @lumra/ui @lumra/core @lumra/react

Components

PaywallOverlay

Full-screen paywall with title, subtitle, and one or more purchase buttons.

import { PaywallOverlay } from '@lumra/ui'

<PaywallOverlay
  locked={true}
  title="Unlock this video"
  subtitle="One-time purchase — watch forever"
  options={[
    { id: 'buy',  label: 'Buy',  badge: '$9.99', description: 'Own forever',    onSelect: () => handleBuy() },
    { id: 'rent', label: 'Rent', badge: '$2.99', description: '48-hour stream', onSelect: () => handleRent() },
  ]}
  onUnlock={() => handleUnlock()}
/>

MediaInfoOverlay

Title and creator name / avatar overlay (shown in the top-left corner of the player).

import { MediaInfoOverlay } from '@lumra/ui'

<MediaInfoOverlay
  title="Episode 1"
  creator={{ name: 'Studio Name', avatarUrl: '/avatars/studio.jpg' }}
/>

ControlsBar

The full player controls bar: play/pause, seek bar, volume, time, PiP, fullscreen.

import { ControlsBar } from '@lumra/ui'

<ControlsBar
  player={playerInstance}
  chapters={[{ at: 0, title: 'Intro' }, { at: 60, title: 'Act 1' }]}
/>

SeekBar

Standalone seek bar with chapter markers and optional heatmap overlay.

import { SeekBar } from '@lumra/ui'

<SeekBar
  currentTime={30}
  duration={600}
  onSeek={(t) => player.seek(t)}
  chapters={[{ at: 0, title: 'Intro' }, { at: 60, title: 'Act 1' }]}
  heatmapData={[0.1, 0.4, 0.9, 0.7, 0.3]}   // normalised 0–1
/>

PlayButton / VolumeButton / FullscreenButton

Individual control buttons for custom layouts.

import { PlayButton, VolumeButton, FullscreenButton } from '@lumra/ui'

<PlayButton player={playerInstance} />
<VolumeButton player={playerInstance} />
<FullscreenButton containerRef={wrapperRef} />

© 2026 Reel Foundry AU. All rights reserved.
MIT License — see LICENSE