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