@livepeer-frameworks/player-react 0.0.3 → 0.0.4
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 +67 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @livepeer-frameworks/player-react
|
|
2
|
+
|
|
3
|
+
React wrapper for the FrameWorks player. Resolves endpoints via Gateway or Mist and renders the best available player (WebCodecs, HLS, etc).
|
|
4
|
+
|
|
5
|
+
**Docs:** `docs.frameworks.network`
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @livepeer-frameworks/player-react
|
|
11
|
+
# or
|
|
12
|
+
npm i @livepeer-frameworks/player-react
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Player } from '@livepeer-frameworks/player-react';
|
|
19
|
+
|
|
20
|
+
export default function App() {
|
|
21
|
+
return (
|
|
22
|
+
<div style={{ width: '100%', height: 500 }}>
|
|
23
|
+
<Player
|
|
24
|
+
contentType="live"
|
|
25
|
+
contentId="my-stream"
|
|
26
|
+
options={{ gatewayUrl: 'https://your-bridge/graphql' }}
|
|
27
|
+
/>
|
|
28
|
+
</div>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Styles
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import '@livepeer-frameworks/player-react/player.css';
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Controls & Shortcuts
|
|
40
|
+
|
|
41
|
+
The player ships with keyboard/mouse shortcuts when the player is focused (click/tap once).
|
|
42
|
+
|
|
43
|
+
**Keyboard**
|
|
44
|
+
| Shortcut | Action | Notes |
|
|
45
|
+
|---|---|---|
|
|
46
|
+
| Space | Play/Pause | Hold = 2x speed (when seekable) |
|
|
47
|
+
| K | Play/Pause | YouTube-style |
|
|
48
|
+
| J / Left | Skip back 10s | Disabled on live-only |
|
|
49
|
+
| L / Right | Skip forward 10s | Disabled on live-only |
|
|
50
|
+
| Up / Down | Volume +/-10% | - |
|
|
51
|
+
| M | Mute/Unmute | - |
|
|
52
|
+
| F | Fullscreen toggle | - |
|
|
53
|
+
| C | Captions toggle | - |
|
|
54
|
+
| 0-9 | Seek to 0-90% | Disabled on live-only |
|
|
55
|
+
| , / . | Prev/Next frame (paused) | WebCodecs = true step; others = buffered-only |
|
|
56
|
+
|
|
57
|
+
**Mouse / Touch**
|
|
58
|
+
| Gesture | Action | Notes |
|
|
59
|
+
|---|---|---|
|
|
60
|
+
| Double-click | Fullscreen toggle | Desktop |
|
|
61
|
+
| Double-tap (left/right) | Skip +/-10s | Touch only, disabled on live-only |
|
|
62
|
+
| Click/Tap and hold | 2x speed | Disabled on live-only |
|
|
63
|
+
|
|
64
|
+
**Constraints**
|
|
65
|
+
- Live-only streams disable seeking/skip/2x hold and frame-step.
|
|
66
|
+
- Live with DVR buffer enables the same shortcuts as VOD.
|
|
67
|
+
- Frame stepping only moves within already buffered ranges (no network seek). WebCodecs supports true frame stepping when paused.
|