@mottosports/motto-video-player 1.0.0
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 +233 -0
- package/dist/index.d.mts +499 -0
- package/dist/index.d.ts +499 -0
- package/dist/index.js +2631 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +2590 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +73 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,499 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import { QueryClient } from '@tanstack/react-query';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Unified events interface for both Player and Video wrapper
|
|
6
|
+
*/
|
|
7
|
+
interface PlayerEvents {
|
|
8
|
+
/**
|
|
9
|
+
* Callback when video starts playing
|
|
10
|
+
*/
|
|
11
|
+
onPlay?: () => void;
|
|
12
|
+
/**
|
|
13
|
+
* Callback when video is paused
|
|
14
|
+
*/
|
|
15
|
+
onPause?: () => void;
|
|
16
|
+
/**
|
|
17
|
+
* Callback when video ends
|
|
18
|
+
*/
|
|
19
|
+
onEnded?: () => void;
|
|
20
|
+
/**
|
|
21
|
+
* Callback when video loading starts
|
|
22
|
+
*/
|
|
23
|
+
onLoadStart?: () => void;
|
|
24
|
+
/**
|
|
25
|
+
* Callback when video has loaded enough to start playback
|
|
26
|
+
*/
|
|
27
|
+
onCanPlay?: () => void;
|
|
28
|
+
/**
|
|
29
|
+
* Callback when an error occurs
|
|
30
|
+
*/
|
|
31
|
+
onError?: (error: Error) => void;
|
|
32
|
+
/**
|
|
33
|
+
* Callback when Shaka Player is ready
|
|
34
|
+
*/
|
|
35
|
+
onPlayerReady?: (player: any) => void;
|
|
36
|
+
/**
|
|
37
|
+
* Callback when quality changes
|
|
38
|
+
*/
|
|
39
|
+
onQualityChange?: (quality: {
|
|
40
|
+
height: number;
|
|
41
|
+
bandwidth: number;
|
|
42
|
+
}) => void;
|
|
43
|
+
/**
|
|
44
|
+
* Callback when ads start
|
|
45
|
+
*/
|
|
46
|
+
onAdStart?: () => void;
|
|
47
|
+
/**
|
|
48
|
+
* Callback when ads complete
|
|
49
|
+
*/
|
|
50
|
+
onAdComplete?: () => void;
|
|
51
|
+
/**
|
|
52
|
+
* Callback when ad error occurs
|
|
53
|
+
*/
|
|
54
|
+
onAdError?: (error: any) => void;
|
|
55
|
+
/**
|
|
56
|
+
* Callback when Chromecast state changes
|
|
57
|
+
*/
|
|
58
|
+
onCastStateChange?: (isCasting: boolean) => void;
|
|
59
|
+
/**
|
|
60
|
+
* Callback when skip back is triggered
|
|
61
|
+
*/
|
|
62
|
+
onSkipBack?: (newTime: number) => void;
|
|
63
|
+
/**
|
|
64
|
+
* Callback when skip forward is triggered
|
|
65
|
+
*/
|
|
66
|
+
onSkipForward?: (newTime: number) => void;
|
|
67
|
+
/**
|
|
68
|
+
* Callback when Mux analytics is ready
|
|
69
|
+
*/
|
|
70
|
+
onMuxReady?: () => void;
|
|
71
|
+
/**
|
|
72
|
+
* Callback when Mux analytics updates data
|
|
73
|
+
*/
|
|
74
|
+
onMuxDataUpdate?: (data: MuxDataUpdatePayload) => void;
|
|
75
|
+
/**
|
|
76
|
+
* Callback when live state changes
|
|
77
|
+
*/
|
|
78
|
+
onLiveStateChange?: (isLive: boolean) => void;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Seekbar color configuration
|
|
82
|
+
*/
|
|
83
|
+
interface SeekbarConfig {
|
|
84
|
+
/**
|
|
85
|
+
* Color for the unbuffered track
|
|
86
|
+
*/
|
|
87
|
+
base?: string;
|
|
88
|
+
/**
|
|
89
|
+
* Color for the buffered but not played portion
|
|
90
|
+
*/
|
|
91
|
+
buffered?: string;
|
|
92
|
+
/**
|
|
93
|
+
* Color for the played/progress portion
|
|
94
|
+
*/
|
|
95
|
+
played?: string;
|
|
96
|
+
}
|
|
97
|
+
interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'onError'> {
|
|
98
|
+
/**
|
|
99
|
+
* The source URL of the video (DASH, HLS, or regular MP4)
|
|
100
|
+
*/
|
|
101
|
+
src: string;
|
|
102
|
+
/**
|
|
103
|
+
* Whether the video should autoplay
|
|
104
|
+
*/
|
|
105
|
+
autoPlay?: boolean;
|
|
106
|
+
/**
|
|
107
|
+
* Whether the video should loop
|
|
108
|
+
*/
|
|
109
|
+
loop?: boolean;
|
|
110
|
+
/**
|
|
111
|
+
* Whether the video should be muted
|
|
112
|
+
*/
|
|
113
|
+
muted?: boolean;
|
|
114
|
+
/**
|
|
115
|
+
* Whether to show video controls
|
|
116
|
+
*/
|
|
117
|
+
controls?: boolean;
|
|
118
|
+
/**
|
|
119
|
+
* Poster image to show before video plays
|
|
120
|
+
*/
|
|
121
|
+
poster?: string;
|
|
122
|
+
/**
|
|
123
|
+
* Video width
|
|
124
|
+
*/
|
|
125
|
+
width?: number | string;
|
|
126
|
+
/**
|
|
127
|
+
* Video height
|
|
128
|
+
*/
|
|
129
|
+
height?: number | string;
|
|
130
|
+
/**
|
|
131
|
+
* Aspect ratio for responsive sizing (e.g., 16/9, 4/3)
|
|
132
|
+
* If not provided, defaults to 16/9
|
|
133
|
+
* Only used when width/height are not specified
|
|
134
|
+
*/
|
|
135
|
+
aspectRatio?: number;
|
|
136
|
+
/**
|
|
137
|
+
* Shaka Player configuration options
|
|
138
|
+
*/
|
|
139
|
+
shakaConfig?: any;
|
|
140
|
+
/**
|
|
141
|
+
* DRM configuration for protected content
|
|
142
|
+
*/
|
|
143
|
+
drmConfig?: {
|
|
144
|
+
clearKeys?: {
|
|
145
|
+
[keyId: string]: string;
|
|
146
|
+
};
|
|
147
|
+
servers?: {
|
|
148
|
+
[keySystem: string]: string;
|
|
149
|
+
};
|
|
150
|
+
};
|
|
151
|
+
/**
|
|
152
|
+
* Mux Analytics configuration
|
|
153
|
+
*/
|
|
154
|
+
muxConfig?: MuxAnalyticsConfig;
|
|
155
|
+
/**
|
|
156
|
+
* IMA (Interactive Media Ads) configuration
|
|
157
|
+
*/
|
|
158
|
+
imaConfig?: {
|
|
159
|
+
/**
|
|
160
|
+
* Ad tag URL for client-side ads
|
|
161
|
+
*/
|
|
162
|
+
adTagUrl?: string;
|
|
163
|
+
/**
|
|
164
|
+
* Whether to enable server-side ad insertion (DAI)
|
|
165
|
+
*/
|
|
166
|
+
enableServerSideAds?: boolean;
|
|
167
|
+
/**
|
|
168
|
+
* Custom ads rendering settings
|
|
169
|
+
*/
|
|
170
|
+
adsRenderingSettings?: any;
|
|
171
|
+
/**
|
|
172
|
+
* Linear ad slot dimensions
|
|
173
|
+
*/
|
|
174
|
+
linearAdSlotWidth?: number;
|
|
175
|
+
linearAdSlotHeight?: number;
|
|
176
|
+
/**
|
|
177
|
+
* Non-linear ad slot dimensions
|
|
178
|
+
*/
|
|
179
|
+
nonLinearAdSlotWidth?: number;
|
|
180
|
+
nonLinearAdSlotHeight?: number;
|
|
181
|
+
};
|
|
182
|
+
/**
|
|
183
|
+
* Chromecast configuration
|
|
184
|
+
*/
|
|
185
|
+
chromecastConfig?: {
|
|
186
|
+
/**
|
|
187
|
+
* Whether to enable Chromecast support
|
|
188
|
+
*/
|
|
189
|
+
enabled?: boolean;
|
|
190
|
+
/**
|
|
191
|
+
* Custom receiver application ID
|
|
192
|
+
*/
|
|
193
|
+
receiverApplicationId?: string;
|
|
194
|
+
/**
|
|
195
|
+
* Whether to auto-join cast sessions
|
|
196
|
+
*/
|
|
197
|
+
autoJoinPolicy?: string;
|
|
198
|
+
};
|
|
199
|
+
/**
|
|
200
|
+
* Quality selection configuration
|
|
201
|
+
*/
|
|
202
|
+
qualityConfig?: {
|
|
203
|
+
/**
|
|
204
|
+
* Whether to enable adaptive quality selection
|
|
205
|
+
*/
|
|
206
|
+
enableAdaptation?: boolean;
|
|
207
|
+
/**
|
|
208
|
+
* Manual quality selection (height in pixels, 0 for auto)
|
|
209
|
+
*/
|
|
210
|
+
selectedQuality?: number;
|
|
211
|
+
/**
|
|
212
|
+
* Available quality levels override
|
|
213
|
+
*/
|
|
214
|
+
availableQualities?: Array<{
|
|
215
|
+
height: number;
|
|
216
|
+
bandwidth: number;
|
|
217
|
+
label: string;
|
|
218
|
+
}>;
|
|
219
|
+
};
|
|
220
|
+
/**
|
|
221
|
+
* Seekbar color configuration
|
|
222
|
+
*/
|
|
223
|
+
seekbarConfig?: SeekbarConfig;
|
|
224
|
+
/**
|
|
225
|
+
* Event callbacks
|
|
226
|
+
*/
|
|
227
|
+
events?: PlayerEvents;
|
|
228
|
+
/**
|
|
229
|
+
* CSS class name for the container element
|
|
230
|
+
*/
|
|
231
|
+
containerClassName?: string;
|
|
232
|
+
/**
|
|
233
|
+
* Optional manual override for stream start time
|
|
234
|
+
* If not provided, the player will attempt to auto-detect the stream start time
|
|
235
|
+
* from the manifest for live streams. When provided, shows elapsed time since
|
|
236
|
+
* stream started instead of the current playback position.
|
|
237
|
+
*/
|
|
238
|
+
streamStartDate?: Date;
|
|
239
|
+
}
|
|
240
|
+
/**
|
|
241
|
+
* Mux Analytics type definitions
|
|
242
|
+
*/
|
|
243
|
+
interface MuxMetadata {
|
|
244
|
+
viewer_user_id?: string;
|
|
245
|
+
experiment_name?: string;
|
|
246
|
+
sub_property_id?: string;
|
|
247
|
+
player_name?: string;
|
|
248
|
+
player_version?: string;
|
|
249
|
+
player_init_time?: number;
|
|
250
|
+
video_id?: string;
|
|
251
|
+
video_title?: string;
|
|
252
|
+
video_series?: string;
|
|
253
|
+
video_duration?: number;
|
|
254
|
+
video_stream_type?: 'live' | 'on-demand';
|
|
255
|
+
video_cdn?: string;
|
|
256
|
+
video_encoding_variant?: string;
|
|
257
|
+
video_content_type?: string;
|
|
258
|
+
video_language_code?: string;
|
|
259
|
+
video_variant_name?: string;
|
|
260
|
+
video_variant_id?: string;
|
|
261
|
+
custom_1?: string;
|
|
262
|
+
custom_2?: string;
|
|
263
|
+
custom_3?: string;
|
|
264
|
+
custom_4?: string;
|
|
265
|
+
custom_5?: string;
|
|
266
|
+
custom_6?: string;
|
|
267
|
+
custom_7?: string;
|
|
268
|
+
custom_8?: string;
|
|
269
|
+
custom_9?: string;
|
|
270
|
+
custom_10?: string;
|
|
271
|
+
custom_11?: string;
|
|
272
|
+
custom_12?: string;
|
|
273
|
+
custom_13?: string;
|
|
274
|
+
custom_14?: string;
|
|
275
|
+
custom_15?: string;
|
|
276
|
+
custom_16?: string;
|
|
277
|
+
custom_17?: string;
|
|
278
|
+
custom_18?: string;
|
|
279
|
+
custom_19?: string;
|
|
280
|
+
custom_20?: string;
|
|
281
|
+
}
|
|
282
|
+
interface MuxErrorTranslator {
|
|
283
|
+
(error: any): any | false;
|
|
284
|
+
}
|
|
285
|
+
interface MuxDataUpdatePayload {
|
|
286
|
+
player_error_code?: string;
|
|
287
|
+
player_error_message?: string;
|
|
288
|
+
video_bitrate?: number;
|
|
289
|
+
video_resolution_height?: number;
|
|
290
|
+
video_resolution_width?: number;
|
|
291
|
+
video_framerate?: number;
|
|
292
|
+
audio_bitrate?: number;
|
|
293
|
+
video_startup_time?: number;
|
|
294
|
+
page_load_time?: number;
|
|
295
|
+
player_load_time?: number;
|
|
296
|
+
[key: string]: any;
|
|
297
|
+
}
|
|
298
|
+
interface MuxAnalyticsConfig {
|
|
299
|
+
/**
|
|
300
|
+
* Mux environment key (required for analytics)
|
|
301
|
+
*/
|
|
302
|
+
envKey: string;
|
|
303
|
+
/**
|
|
304
|
+
* Whether to enable debug logging
|
|
305
|
+
*/
|
|
306
|
+
debug?: boolean;
|
|
307
|
+
/**
|
|
308
|
+
* Whether to disable cookies for privacy compliance
|
|
309
|
+
*/
|
|
310
|
+
disableCookies?: boolean;
|
|
311
|
+
/**
|
|
312
|
+
* Whether to respect "Do Not Track" browser setting
|
|
313
|
+
*/
|
|
314
|
+
respectDoNotTrack?: boolean;
|
|
315
|
+
/**
|
|
316
|
+
* Custom domain for beacon collection
|
|
317
|
+
*/
|
|
318
|
+
beaconCollectionDomain?: string;
|
|
319
|
+
/**
|
|
320
|
+
* Whether to disable automatic error tracking
|
|
321
|
+
*/
|
|
322
|
+
automaticErrorTracking?: boolean;
|
|
323
|
+
/**
|
|
324
|
+
* Custom error translator function
|
|
325
|
+
*/
|
|
326
|
+
errorTranslator?: MuxErrorTranslator;
|
|
327
|
+
/**
|
|
328
|
+
* Metadata for tracking (see Mux docs for all available fields)
|
|
329
|
+
*/
|
|
330
|
+
metadata?: MuxMetadata;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
declare const Player: React.ForwardRefExoticComponent<PlayerProps & React.RefAttributes<HTMLVideoElement>>;
|
|
334
|
+
|
|
335
|
+
interface VideoData {
|
|
336
|
+
id: string;
|
|
337
|
+
name?: string;
|
|
338
|
+
description?: string;
|
|
339
|
+
playlists?: Array<{
|
|
340
|
+
url: string;
|
|
341
|
+
format: string;
|
|
342
|
+
}>;
|
|
343
|
+
error?: string;
|
|
344
|
+
}
|
|
345
|
+
interface VideoListItem {
|
|
346
|
+
id: string;
|
|
347
|
+
name?: string;
|
|
348
|
+
description?: string;
|
|
349
|
+
playlists?: Array<{
|
|
350
|
+
url: string;
|
|
351
|
+
format: string;
|
|
352
|
+
}>;
|
|
353
|
+
error?: string;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
interface EventData {
|
|
357
|
+
id: string;
|
|
358
|
+
title: string;
|
|
359
|
+
description?: string;
|
|
360
|
+
startTime: string;
|
|
361
|
+
endTime?: string;
|
|
362
|
+
posterUrl?: string;
|
|
363
|
+
videoIds?: string[];
|
|
364
|
+
error?: string;
|
|
365
|
+
}
|
|
366
|
+
declare enum EventsSortDirection {
|
|
367
|
+
ASC = "asc",
|
|
368
|
+
DESC = "desc"
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
interface CreativeWorkData {
|
|
372
|
+
id: string;
|
|
373
|
+
title: string;
|
|
374
|
+
description?: string;
|
|
375
|
+
releaseTime: string;
|
|
376
|
+
endTime?: string;
|
|
377
|
+
posterUrl?: string;
|
|
378
|
+
videoIds?: string[];
|
|
379
|
+
error?: string;
|
|
380
|
+
}
|
|
381
|
+
declare enum CreativeWorksSortDirection {
|
|
382
|
+
ASC = "asc",
|
|
383
|
+
DESC = "desc"
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
interface VideoProps extends Omit<PlayerProps, 'src'> {
|
|
387
|
+
videoId?: string;
|
|
388
|
+
publicKey?: string;
|
|
389
|
+
mottoToken?: string;
|
|
390
|
+
videoData?: VideoData;
|
|
391
|
+
refetchInterval?: number;
|
|
392
|
+
playerName?: string;
|
|
393
|
+
locale?: string;
|
|
394
|
+
events?: {
|
|
395
|
+
onVideoData?: (video: VideoData) => void;
|
|
396
|
+
onEmptyPlaylists?: () => void;
|
|
397
|
+
onError?: (error: Error) => void;
|
|
398
|
+
onPlay?: () => void;
|
|
399
|
+
onPause?: () => void;
|
|
400
|
+
onEnded?: () => void;
|
|
401
|
+
onLoadStart?: () => void;
|
|
402
|
+
onCanPlay?: () => void;
|
|
403
|
+
onPlayerReady?: () => void;
|
|
404
|
+
};
|
|
405
|
+
children?: React.ReactNode;
|
|
406
|
+
className?: string;
|
|
407
|
+
queryOptions?: {
|
|
408
|
+
enabled?: boolean;
|
|
409
|
+
staleTime?: number;
|
|
410
|
+
cacheTime?: number;
|
|
411
|
+
retry?: number;
|
|
412
|
+
retryDelay?: number;
|
|
413
|
+
};
|
|
414
|
+
}
|
|
415
|
+
declare const Video: React.FC<VideoProps>;
|
|
416
|
+
|
|
417
|
+
interface EventProps extends Omit<PlayerProps, 'src'> {
|
|
418
|
+
publicKey: string;
|
|
419
|
+
eventId: string;
|
|
420
|
+
hideTitle?: boolean;
|
|
421
|
+
locale?: string;
|
|
422
|
+
filter?: string;
|
|
423
|
+
order?: EventsSortDirection;
|
|
424
|
+
events?: {
|
|
425
|
+
onEventData?: (event: EventData) => void;
|
|
426
|
+
onVideoData?: (video: VideoListItem) => void;
|
|
427
|
+
onEmptyPlaylists?: () => void;
|
|
428
|
+
onError?: (error: Error) => void;
|
|
429
|
+
onPlay?: () => void;
|
|
430
|
+
onPause?: () => void;
|
|
431
|
+
onEnded?: () => void;
|
|
432
|
+
onLoadStart?: () => void;
|
|
433
|
+
onCanPlay?: () => void;
|
|
434
|
+
onPlayerReady?: () => void;
|
|
435
|
+
};
|
|
436
|
+
className?: string;
|
|
437
|
+
settings?: {
|
|
438
|
+
backgroundImageUrl?: string;
|
|
439
|
+
showCountdownAnimation?: boolean;
|
|
440
|
+
};
|
|
441
|
+
auth?: {
|
|
442
|
+
mottoToken?: string;
|
|
443
|
+
userId?: string;
|
|
444
|
+
};
|
|
445
|
+
queryOptions?: {
|
|
446
|
+
enabled?: boolean;
|
|
447
|
+
staleTime?: number;
|
|
448
|
+
cacheTime?: number;
|
|
449
|
+
retry?: number;
|
|
450
|
+
retryDelay?: number;
|
|
451
|
+
};
|
|
452
|
+
}
|
|
453
|
+
declare const Event: React.FC<EventProps>;
|
|
454
|
+
|
|
455
|
+
interface CreativeWorkProps extends Omit<PlayerProps, 'src'> {
|
|
456
|
+
publicKey: string;
|
|
457
|
+
creativeWorkId: string;
|
|
458
|
+
hideTitle?: boolean;
|
|
459
|
+
locale?: string;
|
|
460
|
+
filter?: string;
|
|
461
|
+
order?: CreativeWorksSortDirection;
|
|
462
|
+
events?: {
|
|
463
|
+
onCreativeWorkData?: (creativeWork: CreativeWorkData) => void;
|
|
464
|
+
onVideoData?: (video: VideoListItem) => void;
|
|
465
|
+
onEmptyPlaylists?: () => void;
|
|
466
|
+
onError?: (error: Error) => void;
|
|
467
|
+
onPlay?: () => void;
|
|
468
|
+
onPause?: () => void;
|
|
469
|
+
onEnded?: () => void;
|
|
470
|
+
onLoadStart?: () => void;
|
|
471
|
+
onCanPlay?: () => void;
|
|
472
|
+
onPlayerReady?: () => void;
|
|
473
|
+
};
|
|
474
|
+
className?: string;
|
|
475
|
+
settings?: {
|
|
476
|
+
backgroundImageUrl?: string;
|
|
477
|
+
showCountdownAnimation?: boolean;
|
|
478
|
+
};
|
|
479
|
+
auth?: {
|
|
480
|
+
mottoToken?: string;
|
|
481
|
+
userId?: string;
|
|
482
|
+
};
|
|
483
|
+
queryOptions?: {
|
|
484
|
+
enabled?: boolean;
|
|
485
|
+
staleTime?: number;
|
|
486
|
+
cacheTime?: number;
|
|
487
|
+
retry?: number;
|
|
488
|
+
retryDelay?: number;
|
|
489
|
+
};
|
|
490
|
+
}
|
|
491
|
+
declare const CreativeWork: React.FC<CreativeWorkProps>;
|
|
492
|
+
|
|
493
|
+
declare const queryClient: QueryClient;
|
|
494
|
+
interface QueryProviderProps {
|
|
495
|
+
children: React.ReactNode;
|
|
496
|
+
}
|
|
497
|
+
declare const QueryProvider: React.FC<QueryProviderProps>;
|
|
498
|
+
|
|
499
|
+
export { CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, Player, type PlayerEvents, type PlayerProps, QueryProvider, Video, type VideoData, type VideoListItem, type VideoProps, queryClient };
|