@lumra/react 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +153 -0
- package/package.json +4 -2
package/README.md
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
# @lumra/react
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @lumra/react @lumra/core
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Basic usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { LumraPlayer } from '@lumra/react'
|
|
15
|
+
|
|
16
|
+
export function VideoPage() {
|
|
17
|
+
return (
|
|
18
|
+
<LumraPlayer
|
|
19
|
+
src="https://example.com/stream.m3u8"
|
|
20
|
+
poster="https://example.com/thumb.jpg"
|
|
21
|
+
style={{ width: '100%', aspectRatio: '16/9' }}
|
|
22
|
+
onPlay={() => console.log('play')}
|
|
23
|
+
onEnded={() => console.log('ended')}
|
|
24
|
+
/>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## With paywall
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { LumraPlayer } from '@lumra/react'
|
|
33
|
+
import { useFluxaPaywall } from '@lumra/sdk' // optional SDK hook
|
|
34
|
+
|
|
35
|
+
export function VideoPage({ videoId, src }) {
|
|
36
|
+
const { locked, unlock } = useFluxaPaywall(videoId)
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<LumraPlayer
|
|
40
|
+
src={src}
|
|
41
|
+
paywall={{
|
|
42
|
+
locked,
|
|
43
|
+
title: 'Unlock this video',
|
|
44
|
+
subtitle: 'One-time purchase',
|
|
45
|
+
options: [
|
|
46
|
+
{ id: 'buy', label: 'Buy', badge: '$9.99', description: 'Own forever', onSelect: () => unlock('buy') },
|
|
47
|
+
{ id: 'rent', label: 'Rent', badge: '$2.99', description: '48-hour stream', onSelect: () => unlock('rent') },
|
|
48
|
+
],
|
|
49
|
+
onUnlock: () => unlock(),
|
|
50
|
+
}}
|
|
51
|
+
style={{ width: '100%', aspectRatio: '16/9' }}
|
|
52
|
+
/>
|
|
53
|
+
)
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## With chapters
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
<LumraPlayer
|
|
61
|
+
src="https://example.com/stream.m3u8"
|
|
62
|
+
chapters={[
|
|
63
|
+
{ at: 0, title: 'Intro' },
|
|
64
|
+
{ at: 30, title: 'Act 1' },
|
|
65
|
+
{ at: 120, title: 'Climax' },
|
|
66
|
+
]}
|
|
67
|
+
style={{ width: '100%', aspectRatio: '16/9' }}
|
|
68
|
+
/>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## With subtitle tracks
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
<LumraPlayer
|
|
75
|
+
src="https://example.com/stream.m3u8"
|
|
76
|
+
tracks={[
|
|
77
|
+
{ src: '/captions/en.vtt', kind: 'captions', srcLang: 'en', label: 'English', default: true },
|
|
78
|
+
{ src: '/captions/es.vtt', kind: 'captions', srcLang: 'es', label: 'Spanish' },
|
|
79
|
+
]}
|
|
80
|
+
style={{ width: '100%', aspectRatio: '16/9' }}
|
|
81
|
+
/>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## With media info overlay
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
<LumraPlayer
|
|
88
|
+
src="https://example.com/stream.m3u8"
|
|
89
|
+
mediaInfo={{
|
|
90
|
+
title: 'Episode 1',
|
|
91
|
+
creator: { name: 'Studio Name', avatarUrl: '/avatars/studio.jpg' },
|
|
92
|
+
}}
|
|
93
|
+
style={{ width: '100%', aspectRatio: '16/9' }}
|
|
94
|
+
/>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Global config (optional)
|
|
98
|
+
|
|
99
|
+
Wrap your app with `LumraConfigProvider` to set theme, controls, and ad config once:
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
import { LumraConfigProvider, defineLumraConfig } from '@lumra/react'
|
|
103
|
+
|
|
104
|
+
const config = defineLumraConfig({
|
|
105
|
+
theme: {
|
|
106
|
+
accentColor: '#a89ef9',
|
|
107
|
+
borderRadius: '12px',
|
|
108
|
+
},
|
|
109
|
+
controls: {
|
|
110
|
+
pip: true,
|
|
111
|
+
fullscreen: true,
|
|
112
|
+
autoHide: true,
|
|
113
|
+
autoHideDelay: 3000,
|
|
114
|
+
},
|
|
115
|
+
paywall: {
|
|
116
|
+
previewDuration: 10, // seconds of free preview
|
|
117
|
+
},
|
|
118
|
+
})
|
|
119
|
+
|
|
120
|
+
export function App() {
|
|
121
|
+
return (
|
|
122
|
+
<LumraConfigProvider config={config}>
|
|
123
|
+
<YourApp />
|
|
124
|
+
</LumraConfigProvider>
|
|
125
|
+
)
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Props reference
|
|
130
|
+
|
|
131
|
+
| Prop | Type | Description |
|
|
132
|
+
|---|---|---|
|
|
133
|
+
| `src` | `string` | Video URL — MP4, HLS (`.m3u8`), WebM |
|
|
134
|
+
| `poster` | `string` | Thumbnail image shown before playback |
|
|
135
|
+
| `autoplay` | `boolean` | Autoplay on load (browser may require `muted`) |
|
|
136
|
+
| `muted` | `boolean` | Start muted |
|
|
137
|
+
| `loop` | `boolean` | Loop playback |
|
|
138
|
+
| `mediaInfo` | `{ title?, creator? }` | Overlay title and creator info |
|
|
139
|
+
| `tracks` | `LumraTrack[]` | WebVTT subtitle / caption tracks |
|
|
140
|
+
| `chapters` | `{ at: number; title: string }[]` | Chapter markers on the seek bar |
|
|
141
|
+
| `heatmapData` | `number[]` | View-count array for heatmap bar (requires license) |
|
|
142
|
+
| `paywall` | `LumraPlayerPaywall` | Lock overlay with buy/rent options |
|
|
143
|
+
| `plugins` | `Plugin[]` | Additional plugins to attach |
|
|
144
|
+
| `onPlay` | `() => void` | Play event callback |
|
|
145
|
+
| `onPause` | `() => void` | Pause event callback |
|
|
146
|
+
| `onEnded` | `() => void` | Ended event callback |
|
|
147
|
+
| `onTimeUpdate` | `(t, dur) => void` | Time update callback |
|
|
148
|
+
| `onError` | `(code, msg) => void` | Error callback |
|
|
149
|
+
|
|
150
|
+
---
|
|
151
|
+
|
|
152
|
+
© 2026 Reel Foundry AU. All rights reserved.
|
|
153
|
+
MIT License — see [LICENSE](../../LICENSE)
|
package/package.json
CHANGED