@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/src/components/Icons.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
 
3
3
  interface IconProps {
4
4
  size?: number;
@@ -6,7 +6,11 @@ interface IconProps {
6
6
  className?: string;
7
7
  }
8
8
 
9
- export const PlayIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
9
+ export const PlayIcon: React.FC<IconProps> = ({
10
+ size = 16,
11
+ color = "currentColor",
12
+ className = "",
13
+ }) => (
10
14
  <svg
11
15
  width={size}
12
16
  height={size}
@@ -15,14 +19,15 @@ export const PlayIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor
15
19
  className={className}
16
20
  aria-hidden="true"
17
21
  >
18
- <path
19
- d="M8 5v14l11-7z"
20
- fill={color}
21
- />
22
+ <path d="M8 5v14l11-7z" fill={color} />
22
23
  </svg>
23
24
  );
24
25
 
25
- export const PauseIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
26
+ export const PauseIcon: React.FC<IconProps> = ({
27
+ size = 16,
28
+ color = "currentColor",
29
+ className = "",
30
+ }) => (
26
31
  <svg
27
32
  width={size}
28
33
  height={size}
@@ -36,7 +41,11 @@ export const PauseIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColo
36
41
  </svg>
37
42
  );
38
43
 
39
- export const SkipBackIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
44
+ export const SkipBackIcon: React.FC<IconProps> = ({
45
+ size = 16,
46
+ color = "currentColor",
47
+ className = "",
48
+ }) => (
40
49
  <svg
41
50
  width={size}
42
51
  height={size}
@@ -50,11 +59,17 @@ export const SkipBackIcon: React.FC<IconProps> = ({ size = 16, color = 'currentC
50
59
  d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
51
60
  fill={color}
52
61
  />
53
- <text x="12" y="15" fontSize="7" fontWeight="bold" fill={color} textAnchor="middle">10</text>
62
+ <text x="12" y="15" fontSize="7" fontWeight="bold" fill={color} textAnchor="middle">
63
+ 10
64
+ </text>
54
65
  </svg>
55
66
  );
56
67
 
57
- export const SkipForwardIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
68
+ export const SkipForwardIcon: React.FC<IconProps> = ({
69
+ size = 16,
70
+ color = "currentColor",
71
+ className = "",
72
+ }) => (
58
73
  <svg
59
74
  width={size}
60
75
  height={size}
@@ -68,11 +83,17 @@ export const SkipForwardIcon: React.FC<IconProps> = ({ size = 16, color = 'curre
68
83
  d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"
69
84
  fill={color}
70
85
  />
71
- <text x="12" y="15" fontSize="7" fontWeight="bold" fill={color} textAnchor="middle">10</text>
86
+ <text x="12" y="15" fontSize="7" fontWeight="bold" fill={color} textAnchor="middle">
87
+ 10
88
+ </text>
72
89
  </svg>
73
90
  );
74
91
 
75
- export const VolumeUpIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
92
+ export const VolumeUpIcon: React.FC<IconProps> = ({
93
+ size = 16,
94
+ color = "currentColor",
95
+ className = "",
96
+ }) => (
76
97
  <svg
77
98
  width={size}
78
99
  height={size}
@@ -92,7 +113,11 @@ export const VolumeUpIcon: React.FC<IconProps> = ({ size = 16, color = 'currentC
92
113
  </svg>
93
114
  );
94
115
 
95
- export const VolumeOffIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
116
+ export const VolumeOffIcon: React.FC<IconProps> = ({
117
+ size = 16,
118
+ color = "currentColor",
119
+ className = "",
120
+ }) => (
96
121
  <svg
97
122
  width={size}
98
123
  height={size}
@@ -107,7 +132,11 @@ export const VolumeOffIcon: React.FC<IconProps> = ({ size = 16, color = 'current
107
132
  </svg>
108
133
  );
109
134
 
110
- export const FullscreenIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
135
+ export const FullscreenIcon: React.FC<IconProps> = ({
136
+ size = 16,
137
+ color = "currentColor",
138
+ className = "",
139
+ }) => (
111
140
  <svg
112
141
  width={size}
113
142
  height={size}
@@ -126,7 +155,11 @@ export const FullscreenIcon: React.FC<IconProps> = ({ size = 16, color = 'curren
126
155
  </svg>
127
156
  );
128
157
 
129
- export const FullscreenExitIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
158
+ export const FullscreenExitIcon: React.FC<IconProps> = ({
159
+ size = 16,
160
+ color = "currentColor",
161
+ className = "",
162
+ }) => (
130
163
  <svg
131
164
  width={size}
132
165
  height={size}
@@ -145,7 +178,11 @@ export const FullscreenExitIcon: React.FC<IconProps> = ({ size = 16, color = 'cu
145
178
  </svg>
146
179
  );
147
180
 
148
- export const PictureInPictureIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
181
+ export const PictureInPictureIcon: React.FC<IconProps> = ({
182
+ size = 16,
183
+ color = "currentColor",
184
+ className = "",
185
+ }) => (
149
186
  <svg
150
187
  width={size}
151
188
  height={size}
@@ -154,12 +191,26 @@ export const PictureInPictureIcon: React.FC<IconProps> = ({ size = 16, color = '
154
191
  className={className}
155
192
  aria-hidden="true"
156
193
  >
157
- <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke={color} strokeWidth="2" fill="none" />
194
+ <rect
195
+ x="2"
196
+ y="3"
197
+ width="20"
198
+ height="14"
199
+ rx="2"
200
+ ry="2"
201
+ stroke={color}
202
+ strokeWidth="2"
203
+ fill="none"
204
+ />
158
205
  <rect x="8" y="10" width="10" height="6" rx="1" ry="1" fill={color} />
159
206
  </svg>
160
207
  );
161
208
 
162
- export const ClosedCaptionsIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
209
+ export const ClosedCaptionsIcon: React.FC<IconProps> = ({
210
+ size = 16,
211
+ color = "currentColor",
212
+ className = "",
213
+ }) => (
163
214
  <svg
164
215
  width={size}
165
216
  height={size}
@@ -168,7 +219,17 @@ export const ClosedCaptionsIcon: React.FC<IconProps> = ({ size = 16, color = 'cu
168
219
  className={className}
169
220
  aria-hidden="true"
170
221
  >
171
- <rect x="2" y="4" width="20" height="16" rx="2" ry="2" stroke={color} strokeWidth="2" fill="none" />
222
+ <rect
223
+ x="2"
224
+ y="4"
225
+ width="20"
226
+ height="16"
227
+ rx="2"
228
+ ry="2"
229
+ stroke={color}
230
+ strokeWidth="2"
231
+ fill="none"
232
+ />
172
233
  <path
173
234
  d="M8 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v4c0 .6-.4 1-1 1H9c-.6 0-1-.4-1-1v-4zM14 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v4c0 .6-.4 1-1 1h-1c-.6 0-1-.4-1-1v-4z"
174
235
  fill={color}
@@ -176,7 +237,11 @@ export const ClosedCaptionsIcon: React.FC<IconProps> = ({ size = 16, color = 'cu
176
237
  </svg>
177
238
  );
178
239
 
179
- export const LiveIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
240
+ export const LiveIcon: React.FC<IconProps> = ({
241
+ size = 16,
242
+ color = "currentColor",
243
+ className = "",
244
+ }) => (
180
245
  <svg
181
246
  width={size}
182
247
  height={size}
@@ -195,7 +260,11 @@ export const LiveIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor
195
260
  </svg>
196
261
  );
197
262
 
198
- export const SettingsIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
263
+ export const SettingsIcon: React.FC<IconProps> = ({
264
+ size = 16,
265
+ color = "currentColor",
266
+ className = "",
267
+ }) => (
199
268
  <svg
200
269
  width={size}
201
270
  height={size}
@@ -244,12 +313,19 @@ interface FullscreenToggleIconProps extends IconProps {
244
313
  isFullscreen?: boolean;
245
314
  }
246
315
 
247
- export const FullscreenToggleIcon: React.FC<FullscreenToggleIconProps> = ({ isFullscreen, ...props }) => {
316
+ export const FullscreenToggleIcon: React.FC<FullscreenToggleIconProps> = ({
317
+ isFullscreen,
318
+ ...props
319
+ }) => {
248
320
  return isFullscreen ? <FullscreenExitIcon {...props} /> : <FullscreenIcon {...props} />;
249
321
  };
250
322
 
251
323
  // Stats icon (bar chart style - recognizable for "stats for nerds")
252
- export const StatsIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
324
+ export const StatsIcon: React.FC<IconProps> = ({
325
+ size = 16,
326
+ color = "currentColor",
327
+ className = "",
328
+ }) => (
253
329
  <svg
254
330
  width={size}
255
331
  height={size}
@@ -265,7 +341,11 @@ export const StatsIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColo
265
341
  );
266
342
 
267
343
  // Seek to live/end icon (skip-to-end style: play triangle + bar)
268
- export const SeekToLiveIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
344
+ export const SeekToLiveIcon: React.FC<IconProps> = ({
345
+ size = 16,
346
+ color = "currentColor",
347
+ className = "",
348
+ }) => (
269
349
  <svg
270
350
  width={size}
271
351
  height={size}
@@ -279,4 +359,4 @@ export const SeekToLiveIcon: React.FC<IconProps> = ({ size = 16, color = 'curren
279
359
  {/* End bar */}
280
360
  <rect x="17" y="5" width="3" height="14" fill={color} />
281
361
  </svg>
282
- );
362
+ );