@lumra/react

React component and hooks for the Lumra media player. Wraps @lumra/core with a full-featured <LumraPlayer> component including paywall overlay, subtitle tracks, chapter markers, and ad support.

Install

npm install @lumra/react @lumra/core

Basic usage

import { LumraPlayer } from '@lumra/react'

export function VideoPage() {
  return (
    <LumraPlayer
      src="https://example.com/stream.m3u8"
      poster="https://example.com/thumb.jpg"
      style={{ width: '100%', aspectRatio: '16/9' }}
      onPlay={() => console.log('play')}
      onEnded={() => console.log('ended')}
    />
  )
}

With paywall

import { LumraPlayer } from '@lumra/react'
import { useLumraPaywall } from '@lumra/sdk'   // optional SDK hook

export function VideoPage({ videoId, src }) {
  const { locked, unlock } = useLumraPaywall(videoId)

  return (
    <LumraPlayer
      src={src}
      paywall={{
        locked,
        title: 'Unlock this video',
        subtitle: 'One-time purchase',
        options: [
          { id: 'buy',  label: 'Buy',  badge: '$9.99', description: 'Own forever',    onSelect: () => unlock('buy') },
          { id: 'rent', label: 'Rent', badge: '$2.99', description: '48-hour stream', onSelect: () => unlock('rent') },
        ],
        onUnlock: () => unlock(),
      }}
      style={{ width: '100%', aspectRatio: '16/9' }}
    />
  )
}

With chapters

<LumraPlayer
  src="https://example.com/stream.m3u8"
  chapters={[
    { at: 0,   title: 'Intro' },
    { at: 30,  title: 'Act 1' },
    { at: 120, title: 'Climax' },
  ]}
  style={{ width: '100%', aspectRatio: '16/9' }}
/>

With subtitle tracks

<LumraPlayer
  src="https://example.com/stream.m3u8"
  tracks={[
    { src: '/captions/en.vtt', kind: 'captions', srcLang: 'en', label: 'English', default: true },
    { src: '/captions/es.vtt', kind: 'captions', srcLang: 'es', label: 'Spanish' },
  ]}
  style={{ width: '100%', aspectRatio: '16/9' }}
/>

With media info overlay

<LumraPlayer
  src="https://example.com/stream.m3u8"
  mediaInfo={{
    title: 'Episode 1',
    creator: { name: 'Studio Name', avatarUrl: '/avatars/studio.jpg' },
  }}
  style={{ width: '100%', aspectRatio: '16/9' }}
/>

Global config (optional)

Wrap your app with LumraConfigProvider to set theme, controls, and ad config once:

import { LumraConfigProvider, defineLumraConfig } from '@lumra/react'

const config = defineLumraConfig({
  theme: {
    accentColor: '#a89ef9',
    borderRadius: '12px',
  },
  controls: {
    pip: true,
    fullscreen: true,
    autoHide: true,
    autoHideDelay: 3000,
  },
  paywall: {
    previewDuration: 10,   // seconds of free preview
  },
})

export function App() {
  return (
    <LumraConfigProvider config={config}>
      <YourApp />
    </LumraConfigProvider>
  )
}

Props reference

| Prop | Type | Description | |---|---|---| | src | string | Video URL — MP4, HLS (.m3u8), WebM | | poster | string | Thumbnail image shown before playback | | autoplay | boolean | Autoplay on load (browser may require muted) | | muted | boolean | Start muted | | loop | boolean | Loop playback | | mediaInfo | { title?, creator? } | Overlay title and creator info | | tracks | LumraTrack[] | WebVTT subtitle / caption tracks | | chapters | { at: number; title: string }[] | Chapter markers on the seek bar | | heatmapData | number[] | View-count array for heatmap bar (requires license) | | paywall | LumraPlayerPaywall | Lock overlay with buy/rent options | | plugins | Plugin[] | Additional plugins to attach | | onPlay | () => void | Play event callback | | onPause | () => void | Pause event callback | | onEnded | () => void | Ended event callback | | onTimeUpdate | (t, dur) => void | Time update callback | | onError | (code, msg) => void | Error callback |

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