@livepeer-frameworks/player-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 +7 -9
- package/package.json +1 -1
- package/src/components/DevModePanel.tsx +244 -143
- package/src/components/Icons.tsx +105 -25
- package/src/components/IdleScreen.tsx +262 -128
- package/src/components/LoadingScreen.tsx +169 -151
- package/src/components/LogoOverlay.tsx +3 -6
- package/src/components/Player.tsx +84 -56
- package/src/components/PlayerControls.tsx +349 -256
- package/src/components/PlayerErrorBoundary.tsx +6 -13
- package/src/components/SeekBar.tsx +96 -88
- package/src/components/SkipIndicator.tsx +2 -12
- package/src/components/SpeedIndicator.tsx +2 -11
- package/src/components/StatsPanel.tsx +31 -22
- package/src/components/StreamStateOverlay.tsx +105 -49
- package/src/components/SubtitleRenderer.tsx +29 -29
- package/src/components/ThumbnailOverlay.tsx +5 -6
- package/src/components/TitleOverlay.tsx +2 -8
- package/src/components/players/DashJsPlayer.tsx +13 -11
- package/src/components/players/HlsJsPlayer.tsx +13 -11
- package/src/components/players/MewsWsPlayer/index.tsx +13 -11
- package/src/components/players/MistPlayer.tsx +13 -11
- package/src/components/players/MistWebRTCPlayer/index.tsx +19 -10
- package/src/components/players/NativePlayer.tsx +10 -12
- package/src/components/players/VideoJsPlayer.tsx +13 -11
- package/src/context/PlayerContext.tsx +4 -8
- package/src/context/index.ts +3 -3
- package/src/hooks/useMetaTrack.ts +27 -27
- package/src/hooks/usePlaybackQuality.ts +3 -3
- package/src/hooks/usePlayerController.ts +186 -138
- package/src/hooks/usePlayerSelection.ts +6 -6
- package/src/hooks/useStreamState.ts +51 -56
- package/src/hooks/useTelemetry.ts +18 -3
- package/src/hooks/useViewerEndpoints.ts +34 -23
- package/src/index.tsx +36 -28
- package/src/types.ts +8 -8
- package/src/ui/badge.tsx +6 -5
- package/src/ui/button.tsx +9 -8
- package/src/ui/context-menu.tsx +42 -61
- package/src/ui/select.tsx +13 -7
- package/src/ui/slider.tsx +18 -29
package/README.md
CHANGED
|
@@ -15,15 +15,15 @@ npm i @livepeer-frameworks/player-react
|
|
|
15
15
|
## Usage
|
|
16
16
|
|
|
17
17
|
```tsx
|
|
18
|
-
import { Player } from
|
|
18
|
+
import { Player } from "@livepeer-frameworks/player-react";
|
|
19
19
|
|
|
20
20
|
export default function App() {
|
|
21
21
|
return (
|
|
22
|
-
<div style={{ width:
|
|
22
|
+
<div style={{ width: "100%", height: 500 }}>
|
|
23
23
|
<Player
|
|
24
24
|
contentType="live"
|
|
25
25
|
contentId="pk_..." // playbackId
|
|
26
|
-
options={{ gatewayUrl:
|
|
26
|
+
options={{ gatewayUrl: "https://your-bridge/graphql" }}
|
|
27
27
|
/>
|
|
28
28
|
</div>
|
|
29
29
|
);
|
|
@@ -31,22 +31,19 @@ export default function App() {
|
|
|
31
31
|
```
|
|
32
32
|
|
|
33
33
|
Notes:
|
|
34
|
+
|
|
34
35
|
- There is **no default gateway**; provide `gatewayUrl` unless you pass `endpoints` or `mistUrl`.
|
|
35
36
|
|
|
36
37
|
### Direct MistServer Node (mistUrl)
|
|
37
38
|
|
|
38
39
|
```tsx
|
|
39
|
-
<Player
|
|
40
|
-
contentType="live"
|
|
41
|
-
contentId="pk_..."
|
|
42
|
-
options={{ mistUrl: 'https://edge.example.com' }}
|
|
43
|
-
/>
|
|
40
|
+
<Player contentType="live" contentId="pk_..." options={{ mistUrl: "https://edge.example.com" }} />
|
|
44
41
|
```
|
|
45
42
|
|
|
46
43
|
### Styles
|
|
47
44
|
|
|
48
45
|
```ts
|
|
49
|
-
import
|
|
46
|
+
import "@livepeer-frameworks/player-react/player.css";
|
|
50
47
|
```
|
|
51
48
|
|
|
52
49
|
## Controls & Shortcuts
|
|
@@ -75,6 +72,7 @@ The player ships with keyboard/mouse shortcuts when the player is focused (click
|
|
|
75
72
|
| Click/Tap and hold | 2x speed | Disabled on live-only |
|
|
76
73
|
|
|
77
74
|
**Constraints**
|
|
75
|
+
|
|
78
76
|
- Live-only streams disable seeking/skip/2x hold and frame-step.
|
|
79
77
|
- Live with DVR buffer enables the same shortcuts as VOD.
|
|
80
78
|
- Frame stepping only moves within already buffered ranges (no network seek). WebCodecs supports true frame stepping when paused.
|