@gcorevideo/player 2.28.3 → 2.28.6

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 (52) hide show
  1. package/dist/core.js +1 -1
  2. package/dist/index.css +507 -507
  3. package/dist/index.js +1 -1
  4. package/package.json +2 -2
  5. package/tsconfig.tsbuildinfo +1 -1
  6. package/coverage/clover.xml +0 -6
  7. package/coverage/coverage-final.json +0 -1
  8. package/coverage/lcov-report/base.css +0 -224
  9. package/coverage/lcov-report/block-navigation.js +0 -87
  10. package/coverage/lcov-report/favicon.png +0 -0
  11. package/coverage/lcov-report/index.html +0 -101
  12. package/coverage/lcov-report/prettify.css +0 -1
  13. package/coverage/lcov-report/prettify.js +0 -2
  14. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  15. package/coverage/lcov-report/sorter.js +0 -196
  16. package/coverage/lcov.info +0 -0
  17. package/dist/player.d.ts +0 -3369
  18. package/lib/playback/utils.d.ts +0 -2
  19. package/lib/playback/utils.d.ts.map +0 -1
  20. package/lib/playback/utils.js +0 -1
  21. package/lib/plugins/audio-selector/AudioSelector.d.ts +0 -67
  22. package/lib/plugins/audio-selector/AudioSelector.d.ts.map +0 -1
  23. package/lib/plugins/audio-selector/AudioSelector.js +0 -172
  24. package/lib/plugins/build.d.ts +0 -2
  25. package/lib/plugins/build.d.ts.map +0 -1
  26. package/lib/plugins/build.js +0 -1
  27. package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.d.ts +0 -83
  28. package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.d.ts.map +0 -1
  29. package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.js +0 -339
  30. package/lib/plugins/disable-controls/DisableControls.d.ts +0 -15
  31. package/lib/plugins/disable-controls/DisableControls.d.ts.map +0 -1
  32. package/lib/plugins/disable-controls/DisableControls.js +0 -67
  33. package/lib/plugins/index.d.ts +0 -35
  34. package/lib/plugins/index.d.ts.map +0 -1
  35. package/lib/plugins/index.js +0 -37
  36. package/lib/plugins/level-selector/LevelSelector.d.ts +0 -112
  37. package/lib/plugins/level-selector/LevelSelector.d.ts.map +0 -1
  38. package/lib/plugins/level-selector/LevelSelector.js +0 -280
  39. package/lib/plugins/statistics/Statistics.d.ts +0 -87
  40. package/lib/plugins/statistics/Statistics.d.ts.map +0 -1
  41. package/lib/plugins/statistics/Statistics.js +0 -172
  42. package/lib/plugins/subtitles/Subtitles.d.ts +0 -115
  43. package/lib/plugins/subtitles/Subtitles.d.ts.map +0 -1
  44. package/lib/plugins/subtitles/Subtitles.js +0 -345
  45. package/lib/tsdoc-metadata.json +0 -11
  46. package/lib/utils/fullscreen.d.ts +0 -3
  47. package/lib/utils/fullscreen.d.ts.map +0 -1
  48. package/lib/utils/fullscreen.js +0 -2
  49. package/release.txt +0 -395
  50. package/release_notes +0 -297
  51. package/src/plugins/telemetry/Statistics copy.js +0 -296
  52. package/temp/player.api.json +0 -10275
package/dist/player.d.ts DELETED
@@ -1,3369 +0,0 @@
1
- /**
2
- * Video player for the Gcore streaming platform
3
- *
4
- * @remarks
5
- * This package provides a video player for the Gcore streaming platform.
6
- * It is built on top of the {@link https://github.com/clappr/clappr | Clappr} library and provides a framework for building custom integrations.
7
- * Start with {@link Player} for more information.
8
- *
9
- * Various plugins (marked with `PLUGIN` keyword) are available to extend the core functionality with additional features.
10
- * @example
11
- * ```ts
12
- * import { Player, MediaControl, ErrorScreen } from '@gcorevideo/player'
13
- *
14
- * Player.registerPlugin(MediaControl)
15
- * Player.registerPlugin(ErrorScreen)
16
- *
17
- * const player = new Player({
18
- * autoPlay: true,
19
- * mute: true,
20
- * sources: [{ source: 'https://example.com/a.mpd', mimeType: 'application/dash+xml' }],
21
- * })
22
- *
23
- * player.attachTo(document.getElementById('container'))
24
- * ```
25
- *
26
- * @packageDocumentation
27
- */
28
-
29
- import { $ } from '@clappr/core';
30
- import { Container } from '@clappr/core';
31
- import { ContainerPlugin } from '@clappr/core';
32
- import { Core } from '@clappr/core';
33
- import { CorePlugin } from '@clappr/core';
34
- import { Logger } from '@gcorevideo/utils';
35
- import { LogTracer } from '@gcorevideo/utils';
36
- import { reportError as reportError_2 } from '@gcorevideo/utils';
37
- import { SentryTracer } from '@gcorevideo/utils';
38
- import { setTracer } from '@gcorevideo/utils';
39
- import { trace } from '@gcorevideo/utils';
40
- import { UIContainerPlugin } from '@clappr/core';
41
- import { UICorePlugin } from '@clappr/core';
42
- import { UIObject } from '@clappr/core';
43
-
44
- /**
45
- * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
46
- * @public
47
- * @remarks
48
- * The plugin is activated when there are multiple audio tracks available.
49
- * The plugin adds a button showing the current audio track and a dropdown to switch to another audio track.
50
- * Depends on:
51
- *
52
- * - {@link MediaControl}
53
- */
54
- declare class AudioTracks extends UICorePlugin {
55
- private currentTrack;
56
- private open;
57
- private tracks;
58
- /**
59
- * @internal
60
- */
61
- get name(): string;
62
- /**
63
- * @internal
64
- */
65
- get supportedVersion(): {
66
- min: string;
67
- };
68
- /**
69
- * @internal
70
- */
71
- static get version(): string;
72
- private static readonly template;
73
- /**
74
- * @internal
75
- */
76
- get attributes(): {
77
- class: string;
78
- };
79
- /**
80
- * @internal
81
- */
82
- get events(): {
83
- 'click #gplayer-audiotracks-menu [data-item]': string;
84
- 'click #gplayer-audiotracks-button': string;
85
- };
86
- /**
87
- * @internal
88
- */
89
- bindEvents(): void;
90
- private onCoreReady;
91
- private onActiveContainerChanged;
92
- private shouldRender;
93
- /**
94
- * @internal
95
- */
96
- render(): this;
97
- private onTrackSelect;
98
- private selectAudioTrack;
99
- private hideMenu;
100
- private toggleMenu;
101
- private buttonElement;
102
- private buttonElementText;
103
- private trackElement;
104
- private getTitle;
105
- private startTrackSwitching;
106
- private updateText;
107
- private highlightCurrentTrack;
108
- private mount;
109
- }
110
- export { AudioTracks as AudioSelector }
111
- export { AudioTracks }
112
-
113
- /**
114
- * `PLUGIN` that displays a big mute button over the video when it's being played muted.
115
- * @public
116
- * @remarks
117
- * When pressed, it unmutes the video.
118
- * @example
119
- * ```ts
120
- * import { BigMuteButton } from '@gcorevideo/player'
121
- * Player.registerPlugin(BigMuteButton)
122
- * ```
123
- */
124
- export declare class BigMuteButton extends UICorePlugin {
125
- private autoPlay;
126
- private hidden;
127
- private _adIsPlaying;
128
- /**
129
- * @internal
130
- */
131
- get name(): string;
132
- /**
133
- * @internal
134
- */
135
- get supportedVersion(): {
136
- min: string;
137
- };
138
- private static readonly template;
139
- /**
140
- * @internal
141
- */
142
- get events(): {
143
- click: string;
144
- };
145
- /**
146
- * @internal
147
- */
148
- bindEvents(): void;
149
- private onCoreReady;
150
- private onContainerChanged;
151
- private onPlay;
152
- private onStop;
153
- private onPause;
154
- private onContainerVolume;
155
- private onPlaybackEnded;
156
- private onStartAd;
157
- private onFinishAd;
158
- /**
159
- * @internal
160
- */
161
- render(): this;
162
- private mount;
163
- private hide;
164
- private show;
165
- private clicked;
166
- }
167
-
168
- /**
169
- * `PLUGIN` that adds a button to extend the media controls UI with extra options.
170
- * @public
171
- * @remarks
172
- * The plugin renders small gear icon to the right of the media controls.
173
- * It provides a base for attaching custom settings UI in the gear menu
174
- *
175
- * Depends on:
176
- *
177
- * - {@link MediaControl}
178
- *
179
- * @example
180
- * You can use bottom gear to add custom settings UI to the gear menu.
181
- *
182
- * ```ts
183
- * import { BottomGear } from '@gcorevideo/player/plugins/bottom-gear';
184
- *
185
- * class CustomOptionsPlugin extends UICorePlugin {
186
- * // ...
187
- *
188
- * override get events() {
189
- * return {
190
- * 'click #my-button': 'doMyAction',
191
- * }
192
- * }
193
- *
194
- * private doMyAction() {
195
- * // ...
196
- * }
197
- *
198
- * override render() {
199
- * const bottomGear = this.core.getPlugin('bottom_gear');
200
- * if (!bottomGear) {
201
- * return this;
202
- * }
203
- * this.$el.html('<button class="custom-option">Custom option</button>');
204
- * // Put rendered element into the gear menu
205
- * bottomGear.addItem('custom').html(this.$el)
206
- * return this;
207
- * }
208
- *
209
- * // alternatively, add an option with a submenu
210
- * override render() {
211
- * this.$el.html(template(templateHtml)({
212
- * // ...
213
- * })));
214
- * return this;
215
- * }
216
- *
217
- * private addGearOption() {
218
- * this.core.getPlugin('bottom_gear')
219
- * .addItem('custom', this.$el)
220
- * .html($('<button class="custom-option">Custom option</button>'))
221
- * }
222
- *
223
- * override bindEvents() {
224
- * this.listenToOnce(this.core, ClapprEvents.CORE_READY, () => {
225
- * const bottomGear = this.core.getPlugin('bottom_gear');
226
- * assert(bottomGear, 'bottom_gear plugin is required');
227
- * // simple case
228
- * this.listenTo(bottomGear, GearEvents.RENDERED, this.render);
229
- * // or with a submenu
230
- * this.listenTo(bottomGear, GearEvents.RENDERED, this.addGearOption);
231
- * });
232
- * }
233
- * }
234
- * ```
235
- */
236
- export declare class BottomGear extends UICorePlugin {
237
- private hd;
238
- private numItems;
239
- private collapsed;
240
- /**
241
- * @internal
242
- */
243
- get name(): string;
244
- /**
245
- * @internal
246
- */
247
- get supportedVersion(): {
248
- min: string;
249
- };
250
- /**
251
- * @internal
252
- */
253
- static get version(): string;
254
- private static readonly template;
255
- /**
256
- * @internal
257
- */
258
- get attributes(): {
259
- class: string;
260
- };
261
- /**
262
- * @internal
263
- */
264
- get events(): {
265
- 'click #gear-button': string;
266
- };
267
- /**
268
- * @internal
269
- */
270
- bindEvents(): void;
271
- /**
272
- * Adds a custom option to the gear menu
273
- * @param name - A unique name of the option
274
- * @param $subMenu - The submenu to attach to the option
275
- * @returns The added item placeholder to attach custom markup
276
- * @remarks
277
- * When called with $submenu param, a click on the added item will toggle the submenu visibility.
278
- *
279
- * When added without submenu, it's responsibility of the caller to handle the click event however needed.
280
- * @example
281
- * ```ts
282
- * class MyPlugin extends UICorePlugin {
283
- * override render() {
284
- * this.$el.html('<div class="my-awesome-settings">...</div>')
285
- * this.core.getPlugin('bottom_gear')
286
- * ?.addItem('custom', this.$el)
287
- * .html($('<button>Custom settings</button>'))
288
- * return this
289
- * }
290
- * }
291
- * ```
292
- */
293
- addItem(name: string, $subMenu?: ZeptoResult): ZeptoResult;
294
- private bindContainerEvents;
295
- private highDefinitionUpdate;
296
- /**
297
- * @internal
298
- */
299
- render(): this;
300
- /**
301
- * Collapses any submenu open back to the gear menu.
302
- * @remarks
303
- * Should be called by the UI plugin that added a gear item with a submenu when the latter is closed (e.g., when a "back" button is clicked).
304
- */
305
- refresh(): void;
306
- private collapseSubmenus;
307
- private toggleMenu;
308
- private collapse;
309
- private onCoreReady;
310
- private onMediaControlRendered;
311
- private mount;
312
- private clampPopup;
313
- }
314
-
315
- /**
316
- * `PLUGIN` that measures data about playback, which can be useful for analyzing performance and UX.
317
- * @public
318
- * @remarks
319
- * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.
320
- *
321
- * @see {@link NerdStats} - a plugin that visualises the playback metrics
322
- *
323
- * Configuration options - {@link ClapprStatsSettings}
324
- *
325
- * Events - {@link ClapprStatsEvents}
326
- */
327
- export declare class ClapprStats extends ContainerPlugin {
328
- private timerId;
329
- private lastDecodedFramesCount;
330
- private metrics;
331
- private timers;
332
- private runEach;
333
- /**
334
- * @internal
335
- */
336
- get name(): string;
337
- /**
338
- * @internal
339
- */
340
- get supportedVersion(): {
341
- min: string;
342
- };
343
- private get playbackName();
344
- private get playbackType();
345
- private now;
346
- private inc;
347
- private start;
348
- private stop;
349
- constructor(container: Container);
350
- /**
351
- * @internal
352
- */
353
- bindEvents(): void;
354
- /**
355
- * @internal
356
- */
357
- destroy(): void;
358
- /**
359
- * Returns the collected metrics.
360
- * @returns {@link ClapprStatsMetrics | Measurements} collected so far
361
- */
362
- exportMetrics(): ClapprStatsMetrics;
363
- clearMetrics(): void;
364
- private onBitrate;
365
- private stopReporting;
366
- private startTimers;
367
- private onFirstPlaying;
368
- private playAfterPause;
369
- private onPlay;
370
- private onPause;
371
- private onSeek;
372
- private onTimeUpdate;
373
- private onContainerUpdateWhilePlaying;
374
- private onBuffering;
375
- private onBufferfull;
376
- private onProgress;
377
- private onCompletion;
378
- private buildReport;
379
- private fetchFPS;
380
- private calcBitrates;
381
- private calcBufferingPercentage;
382
- private html5FetchFPS;
383
- }
384
-
385
- /**
386
- * @public
387
- */
388
- export declare type ClapprStatsBitrateTrack = {
389
- start: number;
390
- end?: number;
391
- time?: number;
392
- bitrate: number;
393
- };
394
-
395
- /**
396
- * @public
397
- */
398
- export declare enum ClapprStatsChronograph {
399
- Startup = "startup",
400
- Watch = "watch",
401
- Pause = "pause",
402
- Buffering = "buffering",
403
- Session = "session"
404
- }
405
-
406
- /**
407
- * @public
408
- */
409
- export declare enum ClapprStatsCounter {
410
- Play = "play",
411
- Pause = "pause",
412
- Error = "error",
413
- Buffering = "buffering",
414
- DecodedFrames = "decodedFrames",
415
- DroppedFrames = "droppedFrames",
416
- Fps = "fps",
417
- ChangeLevel = "changeLevel",
418
- Seek = "seek",
419
- Fullscreen = "fullscreen",
420
- DvrUsage = "dvrUsage"
421
- }
422
-
423
- /**
424
- * @public
425
- */
426
- export declare enum ClapprStatsEvents {
427
- /**
428
- * Emitted periodically with current measurements.
429
- */
430
- REPORT = "clappr:stats:report"
431
- }
432
-
433
- /**
434
- * @public
435
- */
436
- export declare type ClapprStatsMetrics = {
437
- /**
438
- * Events count counters
439
- */
440
- counters: {
441
- /**
442
- *
443
- */
444
- [ClapprStatsCounter.Play]: number;
445
- [ClapprStatsCounter.Pause]: number;
446
- [ClapprStatsCounter.Error]: number;
447
- [ClapprStatsCounter.Buffering]: number;
448
- [ClapprStatsCounter.DecodedFrames]: number;
449
- [ClapprStatsCounter.DroppedFrames]: number;
450
- [ClapprStatsCounter.Fps]: number;
451
- [ClapprStatsCounter.ChangeLevel]: number;
452
- [ClapprStatsCounter.Seek]: number;
453
- [ClapprStatsCounter.Fullscreen]: number;
454
- [ClapprStatsCounter.DvrUsage]: number;
455
- };
456
- /**
457
- * Time measurements - accumulated duration of time-based activities
458
- */
459
- chrono: {
460
- /**
461
- * Time spent in the startup phase
462
- */
463
- [ClapprStatsChronograph.Startup]: number;
464
- /**
465
- * Total time spent in the watch phase
466
- */
467
- [ClapprStatsChronograph.Watch]: number;
468
- /**
469
- *
470
- */
471
- [ClapprStatsChronograph.Pause]: number;
472
- [ClapprStatsChronograph.Buffering]: number;
473
- [ClapprStatsChronograph.Session]: number;
474
- };
475
- extra: {
476
- playbackName: string;
477
- playbackType: string;
478
- bitratesHistory: ClapprStatsBitrateTrack[];
479
- bitrateWeightedMean: number;
480
- bitrateMostUsed: number;
481
- buffersize: number;
482
- watchHistory: Array<[number, number]>;
483
- watchedPercentage: number;
484
- bufferingPercentage: number;
485
- bandwidth: number;
486
- duration: number;
487
- currentTime: number;
488
- };
489
- };
490
-
491
- /**
492
- * Config options for the {@link ClapprStats} plugin
493
- * @public
494
- */
495
- export declare interface ClapprStatsSettings {
496
- /**
497
- * The interval in milliseconds of periodic measurements.
498
- * The plugin will emit a {@link ClapprStatsEvents.REPORT} event with the collected metrics at the specified interval.
499
- */
500
- runEach?: number;
501
- }
502
-
503
- /**
504
- * A small `PLUGIN` that toggles the playback state on click over the video container
505
- * @public
506
- */
507
- export declare class ClickToPause extends ContainerPlugin {
508
- private pointerEnabled;
509
- private timer;
510
- /**
511
- * @internal
512
- */
513
- get name(): string;
514
- /**
515
- * @internal
516
- */
517
- get supportedVersion(): {
518
- min: string;
519
- };
520
- /**
521
- * @internal
522
- */
523
- bindEvents(): void;
524
- private click;
525
- private settingsUpdate;
526
- private togglePlay;
527
- private clearTimer;
528
- }
529
-
530
- /**
531
- * `PLUGIN` that allows marking up the timeline of the video
532
- * @public
533
- * @remarks
534
- * The plugin decorates the seekbar with notches to indicate the clips of the video and displays current clip text in the left panel
535
- *
536
- * Depends on:
537
- *
538
- * - {@link MediaControl}
539
- *
540
- * Configuration options - {@link ClipsPluginSettings}
541
- */
542
- export declare class Clips extends UICorePlugin {
543
- private barStyle;
544
- private clips;
545
- private oldContainer;
546
- private svgMask;
547
- private static readonly template;
548
- /**
549
- * @internal
550
- */
551
- get name(): string;
552
- /**
553
- * @internal
554
- */
555
- get attributes(): {
556
- class: string;
557
- };
558
- get version(): string;
559
- get supportedVersion(): {
560
- min: string;
561
- };
562
- /**
563
- * @internal
564
- */
565
- bindEvents(): void;
566
- render(): this;
567
- destroy(): UIObject;
568
- disable(): void;
569
- enable(): void;
570
- /**
571
- * Get the text of the clip at the given time
572
- * @param time - The time to get the text for
573
- * @returns The text of the clip at the given time
574
- */
575
- getText(time: TimeValue): string | undefined;
576
- private onCoreReady;
577
- private onMcRender;
578
- private onContainerChanged;
579
- private playerResize;
580
- private toggleCompact;
581
- private onTimeUpdate;
582
- private parseClips;
583
- private makeSvg;
584
- private setSVGMask;
585
- private setClipText;
586
- }
587
-
588
- /**
589
- * Configuration options for the {@link Clips} plugin.
590
- * @public
591
- */
592
- export declare interface ClipsPluginSettings {
593
- /**
594
- * The compiled text of the clips description, one clip per line in format:
595
- * `HH:MM:SS text` or `MM:SS text` or `SS text`
596
- */
597
- text: string;
598
- }
599
-
600
- /**
601
- * `PLUGIN` that provides a UI to select the subtitles when available.
602
- * @public
603
- *
604
- * @remarks
605
- * The plugin is activated when closed captions tracks are detected in the media source.
606
- * It shows a familiar "CC" button with a dropdown menu to select the subtitles language.
607
- *
608
- * Depends on:
609
- *
610
- * - {@link MediaControl}
611
- *
612
- * Configuration options - {@link ClosedCaptionsPluginSettings}
613
- *
614
- * Known issues:
615
- *
616
- * 1. When media source changes, the subtitles tracks aren't reloaded. Possible solution: use `playback.recycleVideo = false`
617
- * {@link PlayerConfig | main config option}, which will force new video element creation every time media source changes.
618
- * However, this may lead to other issues, such as autoplay not working (after media source has been changed).
619
- * {@link https://github.com/video-dev/hls.js/issues/2198 | related discussion}
620
- *
621
- * @example
622
- * ```ts
623
- * import { ClosedCaptions } from '@gcorevideo/player'
624
- *
625
- * Player.registerPlugin(ClosedCaptions)
626
- *
627
- * new Player({
628
- * ...
629
- * cc: {
630
- * language: 'pt-BR',
631
- * },
632
- * })
633
- * ```
634
- */
635
- declare class ClosedCaptions extends UICorePlugin {
636
- private isPreselectedApplied;
637
- private active;
638
- private open;
639
- private track;
640
- private tracks;
641
- private $line;
642
- /**
643
- * @internal
644
- */
645
- get name(): string;
646
- /**
647
- * @internal
648
- */
649
- get supportedVersion(): {
650
- min: string;
651
- };
652
- /**
653
- * @internal
654
- */
655
- static get version(): string;
656
- private static readonly templateControl;
657
- private static readonly templateLine;
658
- /**
659
- * @internal
660
- */
661
- get attributes(): {
662
- class: string;
663
- };
664
- /**
665
- * @internal
666
- */
667
- get events(): {
668
- 'click #gplayer-cc-menu [data-item]': string;
669
- 'click #gplayer-cc-button': string;
670
- };
671
- private get preselectedLanguage();
672
- /**
673
- * @internal
674
- */
675
- bindEvents(): void;
676
- private onCoreReady;
677
- private onContainerChanged;
678
- private onSubtitleAvailable;
679
- private onSubtitleChanged;
680
- private applyTracks;
681
- private onStartAd;
682
- private onFinishAd;
683
- private onContainerResize;
684
- /**
685
- * Hides the subtitles menu and the subtitles.
686
- */
687
- hide(): void;
688
- /**
689
- * Shows the subtitles menu and the subtitles.
690
- */
691
- show(): void;
692
- private shouldRender;
693
- private resizeFont;
694
- /**
695
- * @internal
696
- */
697
- render(): this;
698
- private findById;
699
- private selectItem;
700
- private onItemSelect;
701
- private applyPreselectedSubtitles;
702
- private hideMenu;
703
- private toggleMenu;
704
- private itemElement;
705
- private allItemElements;
706
- private selectSubtitles;
707
- private getSubtitleText;
708
- private setSubtitleText;
709
- private clearSubtitleText;
710
- private updateSelection;
711
- private highlightCurrentSubtitles;
712
- private renderIcon;
713
- private clampPopup;
714
- private mount;
715
- }
716
- export { ClosedCaptions }
717
- export { ClosedCaptions as Subtitles }
718
-
719
- /**
720
- * Configuration options for the {@link ClosedCaptions} plugin.
721
- * @public
722
- */
723
- export declare type ClosedCaptionsPluginSettings = {
724
- /**
725
- * Initially selected subtitles language.
726
- */
727
- language?: string;
728
- };
729
-
730
- /**
731
- * A `PLUGIN` that configures {@link https://cdn.cta.tech/cta/media/media/resources/standards/pdfs/cta-5004-final.pdf | CMCD} for playback
732
- * @public
733
- * @remarks
734
- * Configuration options - {@link CmcdConfigOptions}.
735
- * @example
736
- * ```ts
737
- * import { CmcdConfig } from '@gcorevideo/player'
738
- * Player.registerPlugin(CmcdConfig)
739
- *
740
- * const player = new Player({
741
- * source: 'https://example.com/video.mp4',
742
- * cmcd: {
743
- * sessionId: '1234567890',
744
- * contentId: 'f572d396fae9206628714fb2ce00f72e94f2258f',
745
- * },
746
- * })
747
- * ```
748
- */
749
- export declare class CmcdConfig extends CorePlugin {
750
- private sid;
751
- private cid;
752
- /**
753
- * @internal
754
- */
755
- get name(): string;
756
- /**
757
- * @internal
758
- */
759
- get version(): string;
760
- /**
761
- * @internal
762
- */
763
- get supportedVersion(): string;
764
- constructor(core: Core);
765
- /**
766
- * @internal
767
- */
768
- bindEvents(): void;
769
- /**
770
- * Returns the current `sid` and `cid` values.
771
- * Useful when the auto-generated values need to be known.
772
- * @returns `sid` and `cid` values
773
- */
774
- exportIds(): {
775
- sid: string;
776
- cid: string;
777
- };
778
- private updateSettings;
779
- private generateContentId;
780
- private setContentId;
781
- }
782
-
783
- /**
784
- * Config options for the {@link CmcdConfig} plugin
785
- * @public
786
- */
787
- export declare interface CmcdConfigOptions {
788
- /**
789
- * `sid` value. If ommitted, a random UUID will be generated
790
- */
791
- sessionId?: string;
792
- /**
793
- * `cid` value.
794
- * If ommitted, the pathname part of the first source URL will be used
795
- */
796
- contentId?: string;
797
- }
798
-
799
- /**
800
- * @public
801
- */
802
- export declare type ContainerPluginConstructor = {
803
- new (container: Container): PlayerPlugin;
804
- type: string;
805
- };
806
-
807
- /**
808
- * Dimensions of the player container DOM element.
809
- * @public
810
- */
811
- export declare type ContainerSize = {
812
- width: number;
813
- height: number;
814
- };
815
-
816
- /**
817
- * `PLUGIN` that displays a small context menu when clicked on the player container.
818
- * @public
819
- * @remarks
820
- * Configuration options - {@link ContextMenuPluginSettings}
821
- *
822
- * Should not be used together with {@link ClickToPause} plugin
823
- */
824
- export declare class ContextMenu extends UIContainerPlugin {
825
- private open;
826
- /**
827
- * @internal
828
- */
829
- get name(): string;
830
- /**
831
- * @internal
832
- */
833
- get supportedVersion(): {
834
- min: string;
835
- };
836
- /**
837
- * @internal
838
- */
839
- get attributes(): {
840
- class: string;
841
- };
842
- private static readonly template;
843
- /**
844
- * @internal
845
- */
846
- get events(): {
847
- 'click [role="menuitem"]': string;
848
- };
849
- constructor(container: Container);
850
- /**
851
- * @internal
852
- */
853
- bindEvents(): void;
854
- /**
855
- * @internal
856
- */
857
- destroy(): UIObject;
858
- private onContainerClick;
859
- private onContextMenu;
860
- private show;
861
- private hide;
862
- private runAction;
863
- /**
864
- * @internal
865
- */
866
- render(): this;
867
- private hideOnBodyClick;
868
- }
869
-
870
- /**
871
- * Context menu plugin settings
872
- * @public
873
- */
874
- export declare interface ContextMenuPluginSettings {
875
- options?: MenuOption[];
876
- }
877
-
878
- /**
879
- * @public
880
- */
881
- export declare type CorePluginConstructor = {
882
- new (core: Core): PlayerPlugin;
883
- type: string;
884
- };
885
-
886
- /**
887
- * A plain JS object that must conform to the DASH.js settings schema.
888
- * @public
889
- * {@link https://cdn.dashjs.org/latest/jsdoc/module-Settings.html | DASH.js settings}
890
- */
891
- export declare type DashSettings = Record<string, unknown>;
892
-
893
- /**
894
- * `PLUGIN` that adds the DVR controls to the media control UI
895
- *
896
- * @public
897
- *
898
- * @remarks
899
- * Depends on:
900
- *
901
- * - {@link MediaControl}
902
- *
903
- * The plugin renders live stream indicator.
904
- * If DVR is enabled, the indicator shows whether the current position is at the live edge of the stream or not.
905
- * In the latter case, the indicator can be clicked to seek to the live edge.
906
- */
907
- export declare class DvrControls extends UICorePlugin {
908
- private static readonly template;
909
- /**
910
- * @internal
911
- */
912
- get name(): string;
913
- /**
914
- * @internal
915
- */
916
- get supportedVersion(): {
917
- min: string;
918
- };
919
- /**
920
- * @internal
921
- */
922
- get events(): {
923
- 'click #gplayer-mc-back-to-live': string;
924
- };
925
- /**
926
- * @internal
927
- */
928
- get attributes(): {
929
- class: string;
930
- 'data-dvr': string;
931
- };
932
- /**
933
- * @internal
934
- */
935
- bindEvents(): void;
936
- private onCoreReady;
937
- private onActiveContainerChanged;
938
- private clicked;
939
- /**
940
- * @internal
941
- */
942
- render(): this;
943
- private onMetadataLoaded;
944
- private mount;
945
- private onDvrStateChanged;
946
- private toggleState;
947
- }
948
-
949
- /**
950
- * Levels of severity of errors. Non-fatal errors usually can be ignored.
951
- * @public
952
- */
953
- export declare type ErrorLevel = 'FATAL' | 'WARN' | 'INFO';
954
-
955
- /**
956
- * `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
957
- * @public
958
- * @remarks
959
- * A fatal error is an error that prevents the player from playing the content.
960
- * It's usually a network error that persists after multiple retries.
961
- *
962
- * The error screen should not be confused with the content stub that is shown when no media sources are available.
963
- * This can happen due to the lack of the support of the given sources type or because the sources are misconfigured (e.g., omitted).
964
- *
965
- * Configuration options - {@link ErrorScreenPluginSettings}
966
- *
967
- * @example
968
- * ```ts
969
- * import { ErrorScreen, Player } from '@gcorevideo/player'
970
- *
971
- * Player.registerPlugin(ErrorScreen)
972
- * ```
973
- */
974
- export declare class ErrorScreen extends UICorePlugin {
975
- private err;
976
- /**
977
- * @internal
978
- */
979
- get name(): string;
980
- /**
981
- * @internal
982
- */
983
- get supportedVersion(): {
984
- min: string;
985
- };
986
- private static readonly template;
987
- /**
988
- * @internal
989
- */
990
- get attributes(): {
991
- class: string;
992
- 'data-error-screen': string;
993
- };
994
- /**
995
- * @internal
996
- */
997
- bindEvents(): void;
998
- private onPlay;
999
- private unmount;
1000
- /**
1001
- * @internal
1002
- */
1003
- get events(): {
1004
- 'click .player-error-screen__reload': string;
1005
- };
1006
- private reload;
1007
- private onActiveContainerChanged;
1008
- private onError;
1009
- /**
1010
- * @internal
1011
- */
1012
- render(): this;
1013
- }
1014
-
1015
- /**
1016
- * Configuration options for the {@link ErrorScreen} plugin.
1017
- * @public
1018
- */
1019
- export declare type ErrorScreenPluginSettings = {
1020
- /**
1021
- * Whether to hide the reload button.
1022
- */
1023
- noReload?: boolean;
1024
- };
1025
-
1026
- /**
1027
- * Settings for the {@link ErrorScreen} plugin.
1028
- * @public
1029
- */
1030
- export declare type ErrorScreenSettings = {
1031
- /**
1032
- * Whether to hide the reload button. The reload button triggers reload of the current source.
1033
- */
1034
- noReload?: boolean;
1035
- };
1036
-
1037
- /**
1038
- * Extended events for the {@link MediaControl} plugin
1039
- * @public
1040
- */
1041
- export declare enum ExtendedEvents {
1042
- MEDIACONTROL_VOLUME = "mediacontrol:volume",
1043
- MEDIACONTROL_MENU_COLLAPSE = "mediacontrol:menu:collapse"
1044
- }
1045
-
1046
- /**
1047
- * `PLUGIN` that changes the favicon according to the player's state.
1048
- * @public
1049
- * @remarks
1050
- * There are three states: stopped, playing and paused.
1051
- */
1052
- export declare class Favicon extends CorePlugin {
1053
- private oldIcon;
1054
- private playIcon;
1055
- private pauseIcon;
1056
- private stopIcon;
1057
- /**
1058
- * @internal
1059
- */
1060
- get name(): string;
1061
- /**
1062
- * @internal
1063
- */
1064
- get supportedVersion(): {
1065
- min: string;
1066
- };
1067
- /**
1068
- * @internal
1069
- */
1070
- constructor(core: Core);
1071
- /**
1072
- * @internal
1073
- */
1074
- bindEvents(): void;
1075
- private containerChanged;
1076
- /**
1077
- * @internal
1078
- */
1079
- disable(): void;
1080
- /**
1081
- * @internal
1082
- */
1083
- destroy(): void;
1084
- private createIcon;
1085
- private setPlayIcon;
1086
- private setPauseIcon;
1087
- private resetIcon;
1088
- private changeIcon;
1089
- }
1090
-
1091
- /**
1092
- * @public
1093
- */
1094
- export declare interface FaviconPluginSettings {
1095
- /**
1096
- * CSS color of the favicon.
1097
- */
1098
- faviconColor?: string;
1099
- }
1100
-
1101
- /**
1102
- * Events triggered by the plugin
1103
- * @public
1104
- */
1105
- export declare enum GearEvents {
1106
- /**
1107
- * Subscribe to this event to accurately attach an item to the gear menu
1108
- */
1109
- RENDERED = "rendered"
1110
- }
1111
-
1112
- /**
1113
- * `PLUGIN` that integrates with Google Analytics
1114
- * @beta
1115
- */
1116
- export declare class GoogleAnalytics extends ContainerPlugin {
1117
- private account;
1118
- private trackerName;
1119
- private domainName;
1120
- private currentHDState;
1121
- get name(): string;
1122
- get supportedVersion(): {
1123
- min: string;
1124
- };
1125
- constructor(container: Container);
1126
- embedScript(): void;
1127
- addEventListeners(): void;
1128
- onReady(): void;
1129
- onPlay(): void;
1130
- onStop(): void;
1131
- onEnded(): void;
1132
- onBuffering(): void;
1133
- onBufferFull(): void;
1134
- onError(): void;
1135
- onHD(isHD: boolean): void;
1136
- private onPlaybackChanged;
1137
- onDVR(dvrInUse: boolean): void;
1138
- onPause(): void;
1139
- onSeek(): void;
1140
- onVolumeChanged(): void;
1141
- onFullscreen(): void;
1142
- push(array: string[]): void;
1143
- }
1144
-
1145
- /**
1146
- * Telemetry init event data
1147
- * @beta
1148
- */
1149
- export declare interface InitEventData {
1150
- event: TelemetryEvent.Init;
1151
- }
1152
-
1153
- /**
1154
- * An ISO 639-1 language code.
1155
- * @example `pt`
1156
- * @public
1157
- */
1158
- export declare type LangTag = string;
1159
-
1160
- export { Logger }
1161
-
1162
- /**
1163
- * `PLUGIN` that adds custom logo to the player.
1164
- * @beta
1165
- */
1166
- export declare class Logo extends UIContainerPlugin {
1167
- private hasStartedPlaying;
1168
- private $logoContainer;
1169
- get name(): string;
1170
- get supportedVersion(): {
1171
- min: string;
1172
- };
1173
- get template(): any;
1174
- get attributes(): {
1175
- class: string;
1176
- 'data-logo': string;
1177
- };
1178
- private get shouldRender();
1179
- bindEvents(): void;
1180
- stopListening(): this;
1181
- private onPlay;
1182
- private onStop;
1183
- private update;
1184
- constructor(container: Container);
1185
- render(): this;
1186
- private setLogoImgAttrs;
1187
- private setLogoWidth;
1188
- private setPosition;
1189
- private setStyles;
1190
- private setStyle;
1191
- }
1192
-
1193
- export { LogTracer }
1194
-
1195
- /**
1196
- * `PLUGIN` that provides framework for building media control UI.
1197
- * @public
1198
- * @remarks
1199
- * The methods exposed are to be used by the other plugins that extend the media control UI.
1200
- *
1201
- * Configuration options (root level)
1202
- *
1203
- * - `hideMediaControlDelay`: number - specifies the delay in milliseconds before the media control UI is hidden after the last user interaction
1204
- *
1205
- * - `mediaControl`: {@link MediaControlSettings} - specifies the media control dashboard layout
1206
- *
1207
- * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
1208
- *
1209
- * - `chromeless`: boolean - `common` option, hides the media control UI
1210
- */
1211
- export declare class MediaControl extends UICorePlugin {
1212
- private buttonsColor;
1213
- private currentDurationValue;
1214
- private currentPositionValue;
1215
- private currentSeekBarPercentage;
1216
- private displayedDuration;
1217
- private displayedPosition;
1218
- private displayedSeekBarPercentage;
1219
- private draggingSeekBar;
1220
- private draggingVolumeBar;
1221
- private fullScreenOnVideoTagSupported;
1222
- private hideId;
1223
- private hideVolumeId;
1224
- private intendedVolume;
1225
- private keepVisible;
1226
- private kibo;
1227
- private lastMouseX;
1228
- private lastMouseY;
1229
- private metadataLoaded;
1230
- private hasUpdate;
1231
- private persistConfig;
1232
- private renderTimerId;
1233
- private rendered;
1234
- private settings;
1235
- private userDisabled;
1236
- private userKeepVisible;
1237
- private verticalVolume;
1238
- private $duration;
1239
- private $fullscreenToggle;
1240
- private $playPauseToggle;
1241
- private $playStopToggle;
1242
- private $position;
1243
- private $seekBarContainer;
1244
- private $seekBarHover;
1245
- private $seekBarLoaded;
1246
- private $seekBarPosition;
1247
- private $seekBarScrubber;
1248
- private $volumeBarContainer;
1249
- private $volumeBarBackground;
1250
- private $volumeBarFill;
1251
- private $volumeBarScrubber;
1252
- private $volumeContainer;
1253
- private $volumeIcon;
1254
- private static readonly template;
1255
- /**
1256
- * @internal
1257
- */
1258
- get name(): string;
1259
- /**
1260
- * @internal
1261
- */
1262
- get supportedVersion(): {
1263
- min: string;
1264
- };
1265
- /**
1266
- * @returns Default media control layout settings
1267
- * @remarks
1268
- * The method can be used to change the default dashboard layout, for example, removing the standard UI elements
1269
- * @example
1270
- * ```ts
1271
- * const settings = MediaControl.defaultSettings()
1272
- * settings.left = settings.filter(item => item !== 'playpause' && item !== 'playstop')
1273
- * ...
1274
- * new Player({
1275
- * mediaControl: settings,
1276
- * })
1277
- * ```
1278
- */
1279
- static defaultSettings(): any;
1280
- /**
1281
- * Extend the default media control layout settings
1282
- * @param settings - Additional settings
1283
- * @returns The extended settings
1284
- * @remarks
1285
- * This method allows adding custom elements to the media control dashboard.
1286
- * The default settings are not modified.
1287
- * @example
1288
- * ```ts
1289
- * new Player({
1290
- * mediaControl: MediaControl.extendSettings({
1291
- * left: ['*'], // add all custom elements to the left panel
1292
- * }),
1293
- * })
1294
- * ```
1295
- */
1296
- static extendSettings(settings: Partial<MediaControlSettings>): {
1297
- left: string[];
1298
- right: string[];
1299
- default: string[];
1300
- };
1301
- private get disabled();
1302
- /**
1303
- * Use in mediacontrol-based plugins to access the active container
1304
- * @internal
1305
- */
1306
- get container(): any;
1307
- /**
1308
- * @internal
1309
- * @deprecated Use core.activePlayback directly
1310
- */
1311
- get playback(): any;
1312
- /**
1313
- * @internal
1314
- */
1315
- get attributes(): {
1316
- class: string;
1317
- 'data-media-control-skin-1': string;
1318
- };
1319
- /**
1320
- * @internal
1321
- */
1322
- get events(): {
1323
- 'click [data-play]': string;
1324
- 'click [data-pause]': string;
1325
- 'click [data-playpause]': string;
1326
- 'click [data-stop]': string;
1327
- 'click [data-playstop]': string;
1328
- 'click [data-fullscreen]': string;
1329
- 'click .bar-container[data-volume]': string;
1330
- 'click .drawer-icon[data-volume]': string;
1331
- 'mouseenter .drawer-container[data-volume]': string;
1332
- 'mouseleave .drawer-container[data-volume]': string;
1333
- 'mousedown .bar-container[data-volume]': string;
1334
- 'touchstart .bar-container[data-volume]': string;
1335
- 'mousemove .bar-container[data-volume]': string;
1336
- 'touchmove .bar-container[data-volume]': string;
1337
- 'mousedown .bar-scrubber[data-seekbar]': string;
1338
- 'mousedown .bar-container[data-seekbar]': string;
1339
- 'touchstart .bar-scrubber[data-seekbar]': string;
1340
- 'touchstart .bar-container[data-seekbar]': string;
1341
- 'mousemove .bar-container[data-seekbar]': string;
1342
- 'touchmove .bar-container[data-seekbar]': string;
1343
- 'mouseleave .bar-container[data-seekbar]': string;
1344
- 'touchend .bar-container[data-seekbar]': string;
1345
- 'mouseenter .media-control-layer[data-controls]': string;
1346
- 'mouseleave .media-control-layer[data-controls]': string;
1347
- };
1348
- get currentSeekPos(): number;
1349
- /**
1350
- * Current volume [0..100]
1351
- */
1352
- get volume(): number;
1353
- /**
1354
- * Muted state
1355
- */
1356
- get muted(): boolean;
1357
- constructor(core: Core);
1358
- /**
1359
- * @internal
1360
- */
1361
- getExternalInterface(): {
1362
- setVolume: (value: number, isInitialVolume?: boolean) => void;
1363
- getVolume: () => number;
1364
- };
1365
- /**
1366
- * @internal
1367
- */
1368
- bindEvents(): void;
1369
- private bindContainerEvents;
1370
- /**
1371
- * Hides the media control UI
1372
- */
1373
- disable(): void;
1374
- /**
1375
- * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
1376
- */
1377
- enable(): void;
1378
- /**
1379
- *
1380
- * @returns Vertical space available to render something on top of the container.
1381
- * @remarks
1382
- * This takes into account the container height and excludes the height of the controls bar
1383
- */
1384
- getAvailableHeight(): number;
1385
- /**
1386
- * @returns Vertical space available to render a popup menu
1387
- */
1388
- getAvailablePopupHeight(): number;
1389
- /**
1390
- * Set the initial volume, which is preserved when playback is interrupted by an advertisement
1391
- */
1392
- setInitialVolume(): void;
1393
- private onVolumeChanged;
1394
- private onLoadedMetadata;
1395
- private updateVolumeUI;
1396
- private changeTogglePlay;
1397
- private mousemoveOnSeekBar;
1398
- private mouseleaveOnSeekBar;
1399
- private onVolumeClick;
1400
- private mousemoveOnVolumeBar;
1401
- private playerResize;
1402
- private togglePlayPause;
1403
- private togglePlayStop;
1404
- private startSeekDrag;
1405
- private startVolumeDrag;
1406
- private stopDrag;
1407
- private updateDrag;
1408
- private getVolumeFromUIEvent;
1409
- private toggleMute;
1410
- /**
1411
- * Set the volume
1412
- * @param value - The volume value
1413
- * @param isInitialVolume - save as the initial volume
1414
- * @remarks
1415
- * Initial volume can be restored later
1416
- */
1417
- setVolume(value: number, isInitialVolume?: boolean): void;
1418
- private toggleFullscreen;
1419
- private onActiveContainerChanged;
1420
- private showVolumeBar;
1421
- private hideVolumeBar;
1422
- private ended;
1423
- private updateProgressBar;
1424
- private onTimeUpdate;
1425
- private renderSeekBar;
1426
- private drawDurationAndPosition;
1427
- private seek;
1428
- private setUserKeepVisible;
1429
- private resetUserKeepVisible;
1430
- private isVisible;
1431
- private show;
1432
- private hide;
1433
- private updateCursorStyle;
1434
- private updateSettings;
1435
- private onHdUpdate;
1436
- private createCachedElements;
1437
- /**
1438
- * Mount a media control to its configured location
1439
- * @param name - The name of the media control element
1440
- * @param element - The DOM node/fragment to mount
1441
- * @remarks
1442
- * Media controls layout is configured via {@link MediaControlSettings}.
1443
- * A plugin implementing custom elements on the media control dashboard,
1444
- * should use this method to mount the element to the correct location.
1445
- * The actual location is defined by the occurence of the element token in the `left`, `right` or `default` section
1446
- * of the {@link MediaControlSettings}.
1447
- * @example
1448
- * ```ts
1449
- * class MyPlugin extends UICorePlugin {
1450
- * override render() {
1451
- * // mount the element where it is configured in the layout
1452
- * this.core.getPlugin('media_control').slot('my-element', this.$el)
1453
- * }
1454
- * }
1455
- * ...
1456
- * Player.registerPlugin(MyPlugin)
1457
- * ...
1458
- * // Configuration of the media control layout
1459
- * new Player({
1460
- * mediaControl: {
1461
- * left: ['my-element'], // the element will be mounted to the left panel
1462
- * },
1463
- * })
1464
- * ```
1465
- */
1466
- slot(name: MediaControlElement, element: ZeptoResult): void;
1467
- /**
1468
- * Mounts a media control element at a specific location
1469
- * @param name - The location to mount the element
1470
- * @param element - The element to mount
1471
- * @remarks
1472
- * Use this method to render custom media control UI in a plugin
1473
- * @example
1474
- * ```ts
1475
- * class MyPlugin extends UICorePlugin {
1476
- * override render() {
1477
- * this.$el.html('<div id="my-element" class="my-class">Here we go</div>')
1478
- * this.core.getPlugin('media_control').mount('left', this.$el)
1479
- * return this
1480
- * }
1481
- * }
1482
- * ```
1483
- */
1484
- mount(name: MediaControlSlotMountPoint, element: ZeptoResult): void;
1485
- private getMountParent;
1486
- /**
1487
- * Toggle the visibility of a media control element
1488
- * @param name - The name of the media control element
1489
- * @param show - Visibility state
1490
- */
1491
- toggleElement(area: MediaControlElement, show: boolean): void;
1492
- private getRightPanel;
1493
- private getLeftPanel;
1494
- private getCenterPanel;
1495
- private resetIndicators;
1496
- private initializeIcons;
1497
- private setSeekPercentage;
1498
- private seekRelative;
1499
- private bindKeyAndShow;
1500
- private bindKeyEvents;
1501
- private unbindKeyEvents;
1502
- private parseColors;
1503
- private applyButtonStyle;
1504
- /**
1505
- * @internal
1506
- */
1507
- destroy(): UIObject;
1508
- private cancelRenderTimer;
1509
- private configure;
1510
- /**
1511
- * @internal
1512
- */
1513
- render(): this;
1514
- private handleFullScreenOnBtn;
1515
- private onStartAd;
1516
- private onFinishAd;
1517
- private hideControllAds;
1518
- private static getPageX;
1519
- private static getPageY;
1520
- private isSeekEnabledForHtml5Playback;
1521
- private getElementLocation;
1522
- private onDvrStateChanged;
1523
- }
1524
-
1525
- /**
1526
- * Media control element.
1527
- * Each element's token in the media control layout settings determines where the element is rendered.
1528
- * @public
1529
- * @remarks
1530
- * Standard media control elements are defined in the {@link StandardMediaControlElement} type.
1531
- * Custom media control elements can be identified by a unique token.
1532
- */
1533
- export declare type MediaControlElement = string;
1534
-
1535
- /**
1536
- * Specifies the layout of media control elements.
1537
- * Actual elements will be rendered according to the playback settings. Custom elements rendered by the plugins
1538
- * will be mounted at the specified locations.
1539
- * @public
1540
- */
1541
- export declare type MediaControlSettings = {
1542
- left: MediaControlElement[];
1543
- right: MediaControlElement[];
1544
- default: MediaControlElement[];
1545
- seekEnabled: boolean;
1546
- };
1547
-
1548
- /**
1549
- * Identifies a location for mounting custom media control elements.
1550
- * @public
1551
- */
1552
- export declare type MediaControlSlotMountPoint = 'root' | 'base' | 'left' | 'right' | 'center' | 'seekbar';
1553
-
1554
- /**
1555
- * @public
1556
- */
1557
- export declare type MenuOption = {
1558
- /**
1559
- * Menu item label text. One of `label` or `labelKey` must be specified.
1560
- */
1561
- label?: string;
1562
- /**
1563
- * Menu item label localisation key, if specified, the `label` will be ignored
1564
- */
1565
- labelKey?: string;
1566
- /**
1567
- * Menu item name. Must be unique.
1568
- */
1569
- name: string;
1570
- /**
1571
- * Menu item handler function
1572
- */
1573
- handler?: () => void;
1574
- /**
1575
- * Menu item icon, plain HTML string
1576
- */
1577
- icon?: string;
1578
- };
1579
-
1580
- /**
1581
- * `PLUGIN` that adds support for loading multiple streams and switching between them using the media control UI.
1582
- * @beta
1583
- */
1584
- export declare class MultiCamera extends UICorePlugin {
1585
- private currentCamera;
1586
- private currentTime;
1587
- private playing;
1588
- private multicamera;
1589
- private noActiveStreams;
1590
- get name(): string;
1591
- get supportedVersion(): {
1592
- min: string;
1593
- };
1594
- static get version(): string;
1595
- get template(): any;
1596
- get attributes(): {
1597
- class: string;
1598
- 'data-multicamera': string;
1599
- };
1600
- get events(): {
1601
- 'click [data-multicamera-selector-select]': string;
1602
- 'click [data-multicamera-button]': string;
1603
- };
1604
- constructor(core: Core);
1605
- bindEvents(): void;
1606
- unBindEvents(): void;
1607
- private onPlay;
1608
- private bindPlaybackEvents;
1609
- private reload;
1610
- private shouldRender;
1611
- render(): this;
1612
- private onCameraSelect;
1613
- activeById(id: number, active: boolean): void;
1614
- private setLiveStatus;
1615
- private behaviorLive;
1616
- private behaviorOne;
1617
- private behaviorAll;
1618
- private findAndInitNextStream;
1619
- private showError;
1620
- private hideError;
1621
- private changeById;
1622
- private getCamerasList;
1623
- private getCurrentCamera;
1624
- private findElementById;
1625
- private findIndexById;
1626
- private onShowLevelSelectMenu;
1627
- private hideSelectLevelMenu;
1628
- private toggleContextMenu;
1629
- private levelElement;
1630
- private highlightCurrentLevel;
1631
- }
1632
-
1633
- /**
1634
- * `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
1635
- * @public
1636
- *
1637
- * @remarks
1638
- * Depends on:
1639
- *
1640
- * - {@link BottomGear} - where the button is attached
1641
- *
1642
- * - {@link ClapprStats} - to get the metrics from
1643
- *
1644
- * The plugin is rendered as an item in the gear menu.
1645
- *
1646
- * When clicked, it shows an overlay window with the information about the network speed, latency, etc,
1647
- * and recommended quality level.
1648
- */
1649
- declare class NerdStats extends UICorePlugin {
1650
- private container;
1651
- private speedtestMetrics;
1652
- private metrics;
1653
- private open;
1654
- private shortcut;
1655
- private iconPosition;
1656
- private static readonly buttonTemplate;
1657
- /**
1658
- * @internal
1659
- */
1660
- get name(): string;
1661
- /**
1662
- * @internal
1663
- */
1664
- get supportedVersion(): {
1665
- min: string;
1666
- };
1667
- private static readonly template;
1668
- /**
1669
- * @internal
1670
- */
1671
- get attributes(): {
1672
- class: string;
1673
- };
1674
- /**
1675
- * @internal
1676
- */
1677
- get events(): {
1678
- click: string;
1679
- 'click #nerd-stats-close': string;
1680
- 'click #nerd-stats-refresh': string;
1681
- };
1682
- private clicked;
1683
- private get statsBoxElem();
1684
- private get statsBoxWidthThreshold();
1685
- private get playerWidth();
1686
- private get playerHeight();
1687
- constructor(core: Core);
1688
- /**
1689
- * @internal
1690
- */
1691
- bindEvents(): void;
1692
- private onCoreReady;
1693
- private onActiveContainerChanged;
1694
- /**
1695
- * @internal
1696
- */
1697
- destroy(): UIObject;
1698
- private toggle;
1699
- private show;
1700
- private hide;
1701
- private onPlayerResize;
1702
- private updateResolution;
1703
- private estimateQuality;
1704
- private updateMetrics;
1705
- private updateCustomMetrics;
1706
- private updateEstimatedQuality;
1707
- private setStatsBoxSize;
1708
- /**
1709
- * @internal
1710
- */
1711
- render(): this;
1712
- private attach;
1713
- private clearSpeedtestMetrics;
1714
- private refreshSpeedTest;
1715
- private formatPlaybackName;
1716
- }
1717
- export { NerdStats as ClapprNerdStats }
1718
- export { NerdStats }
1719
-
1720
- /**
1721
- * `PLUGIN` that enables picture-in-picture mode.
1722
- * @public
1723
- * @remarks
1724
- * Depends on:
1725
- *
1726
- * - {@link MediaControl}
1727
- *
1728
- * It renders a button to toggle picture-in-picture mode in the media control UI.
1729
- */
1730
- export declare class PictureInPicture extends UICorePlugin {
1731
- /**
1732
- * @internal
1733
- */
1734
- get name(): string;
1735
- /**
1736
- * @internal
1737
- */
1738
- get supportedVersion(): {
1739
- min: string;
1740
- };
1741
- /**
1742
- * @internal
1743
- */
1744
- static get version(): string;
1745
- private static buttonTemplate;
1746
- /**
1747
- * @internal
1748
- */
1749
- get events(): {
1750
- 'click button': string;
1751
- };
1752
- get attributes(): {
1753
- class: string;
1754
- };
1755
- private get videoElement();
1756
- /**
1757
- * @internal
1758
- */
1759
- bindEvents(): void;
1760
- private isPiPSupported;
1761
- /**
1762
- * @internal
1763
- */
1764
- render(): this;
1765
- private togglePictureInPicture;
1766
- private requestPictureInPicture;
1767
- private exitPictureInPicture;
1768
- }
1769
-
1770
- /**
1771
- * An error occurred during the playback.
1772
- * @public
1773
- */
1774
- export declare interface PlaybackError {
1775
- /**
1776
- * Error code.
1777
- */
1778
- code: PlaybackErrorCode;
1779
- /**
1780
- * Detailed description of the error.
1781
- */
1782
- description: string;
1783
- /**
1784
- * Level of severity of the error.
1785
- */
1786
- level: ErrorLevel;
1787
- /**
1788
- * Error message. Non-fatal usually can be ignored.
1789
- */
1790
- message: string;
1791
- /**
1792
- * Name of the component that originated the error.
1793
- * @example
1794
- * - 'core'
1795
- * - 'dash'
1796
- * - 'media_control'
1797
- */
1798
- origin: string;
1799
- /**
1800
- * Component subsystem of the error origin, together with the `origin` uniquely identifies the originating component.
1801
- */
1802
- scope: PlayerComponentType;
1803
- /**
1804
- * UI description of the error.
1805
- */
1806
- UI?: {
1807
- title: string;
1808
- message: string;
1809
- icon?: string;
1810
- };
1811
- }
1812
-
1813
- /**
1814
- * Codes of errors occurring within the playback component.
1815
- * @public
1816
- */
1817
- export declare enum PlaybackErrorCode {
1818
- /**
1819
- * An unknown or uncategorised error.
1820
- */
1821
- Generic = "GENERIC_ERROR",
1822
- /**
1823
- * The media source is not available. Typically a network error.
1824
- */
1825
- MediaSourceUnavailable = "MEDIA_SOURCE_UNAVAILABLE",
1826
- /**
1827
- * The media source is not accessible due to some protection policy.
1828
- */
1829
- MediaSourceAccessDenied = "MEDIA_SOURCE_ACCESS_DENIED"
1830
- }
1831
-
1832
- /**
1833
- * Module to perform the playback.
1834
- * @public
1835
- */
1836
- export declare type PlaybackModule = 'dash' | 'hls' | 'html5_video';
1837
-
1838
- /**
1839
- * `PLUGIN` that allows changing the playback speed of the video.
1840
- * @public
1841
- *
1842
- * @remarks
1843
- * Depends on:
1844
- *
1845
- * - {@link MediaControl}
1846
- *
1847
- * - {@link BottomGear}
1848
- *
1849
- * It renders an option in the gear menu, which opens a dropdown with the options to change the playback rate.
1850
- * Note that the playback rate change is supported only for VOD or DVR-enabled live streams.
1851
- *
1852
- * Plugin settings - {@link PlaybackRateSettings}
1853
- *
1854
- * @example
1855
- * ```ts
1856
- * import { Player, PlaybackRateSettings } from '@gcorevideo/player'
1857
- * Player.registerPlugin(PlaybackRate)
1858
- * const player = new Player({
1859
- * playbackRate: {
1860
- * options: [
1861
- * { value: 0.5, label: '0.5x' },
1862
- * { value: 1, label: '1x' },
1863
- * ],
1864
- * defaultValue: 1,
1865
- * },
1866
- * })
1867
- * ```
1868
- */
1869
- export declare class PlaybackRate extends UICorePlugin {
1870
- private selectedRate;
1871
- private metadataLoaded;
1872
- private mountTimerId;
1873
- /**
1874
- * @internal
1875
- */
1876
- get name(): string;
1877
- /**
1878
- * @internal
1879
- */
1880
- get supportedVersion(): {
1881
- min: string;
1882
- };
1883
- private static readonly buttonTemplate;
1884
- private static readonly listTemplate;
1885
- constructor(core: Core);
1886
- private get playbackRates();
1887
- /**
1888
- * @internal
1889
- */
1890
- get attributes(): {
1891
- class: string;
1892
- };
1893
- /**
1894
- * @internal
1895
- */
1896
- get events(): {
1897
- 'click [data-rate]': string;
1898
- 'click #playback-rate-back-button': string;
1899
- };
1900
- /**
1901
- * @internal
1902
- */
1903
- bindEvents(): void;
1904
- private onCoreReady;
1905
- private onActiveContainerChange;
1906
- private onMediaControlRendered;
1907
- private onGearRendered;
1908
- private mount;
1909
- private onMetaDataLoaded;
1910
- private allRateElements;
1911
- private rateElement;
1912
- private onPlaybackRateChange;
1913
- private shouldMount;
1914
- /**
1915
- * @internal
1916
- */
1917
- render(): this;
1918
- /**
1919
- * @internal
1920
- */
1921
- destroy(): UIObject;
1922
- private onPlay;
1923
- private syncRate;
1924
- private resetPlaybackRate;
1925
- private onStop;
1926
- private onSelect;
1927
- private goBack;
1928
- private setSelectedRate;
1929
- private getTitle;
1930
- private highlightCurrentRate;
1931
- private updateGearOptionLabel;
1932
- }
1933
-
1934
- /**
1935
- * @public
1936
- */
1937
- export declare type PlaybackRateOption = {
1938
- value: number;
1939
- label: string;
1940
- };
1941
-
1942
- /**
1943
- * @public
1944
- */
1945
- export declare type PlaybackRateSettings = {
1946
- options?: PlaybackRateOption[];
1947
- defaultValue?: number;
1948
- };
1949
-
1950
- /**
1951
- * Type of a stream
1952
- * @public
1953
- */
1954
- export declare type PlaybackType = 'live' | 'vod';
1955
-
1956
- /**
1957
- * `MAIN` component to use in the application code.
1958
- * @public
1959
- * @remarks
1960
- * The Player object provides very basic API to control playback.
1961
- * To build a sophisticated UI, use the plugins framework to tap into the Clappr core.
1962
- * {@link https://github.com/clappr/clappr/wiki/Architecture}
1963
- */
1964
- export declare class Player {
1965
- private config;
1966
- private emitter;
1967
- private player;
1968
- private ready;
1969
- private rootNode;
1970
- constructor(config: PlayerConfig);
1971
- /**
1972
- * Adds a listener to a player event
1973
- * @param event - event type, see {@link PlayerEvent}
1974
- * @param handler - a callback function to handle the event
1975
- */
1976
- on<E extends PlayerEvent>(event: E, handler: PlayerEventHandler<E>): void;
1977
- /**
1978
- * Removes a previously added event listener
1979
- * @param event - See {@link PlayerEvent}
1980
- * @param handler - a callback attached earlier to that event type
1981
- */
1982
- off<E extends PlayerEvent>(event: E, handler: PlayerEventHandler<E>): void;
1983
- /**
1984
- * Configures the player.
1985
- *
1986
- * @param config - complete or partial configuration
1987
- * @remarks
1988
- * Can be called multiple times.
1989
- * Each consequent call extends the previous configuration with only the new keys overridden.
1990
- *
1991
- * After a reconfiguration, if something significant has changed, it might make sense reinitialize the player (i.e, a `.destroy()` followed by an `.init()` call).
1992
- */
1993
- configure(config: Partial<PlayerConfig>): void;
1994
- /**
1995
- * Initializes the player at the given container element.
1996
- * @param playerElement - DOM element to host the player
1997
- * @remarks
1998
- * The player will be initialized and attached to the given element.
1999
- *
2000
- * All the core plugins will be initialized at this point.
2001
- *
2002
- * If no sources were configured, it will trigger an error.
2003
- *
2004
- * The player container will be initialized and then all the registered UI plugins.
2005
- *
2006
- * If the `autoPlay` option is set, then it will trigger playback immediately.
2007
- *
2008
- * It is an error to call this method twice. If you need to attache player to another DOM element,
2009
- * first call {@link Player.destroy} and then {@link Player.attachTo}.
2010
- *
2011
- * @example
2012
- * ```ts
2013
- * const player = new Player({
2014
- * sources: [{ source: 'https://example.com/a.mpd', mimeType: 'application/dash+xml' }],
2015
- * })
2016
- * document.addEventListener('DOMContentLoaded', () => {
2017
- * player.attachTo(document.getElementById('video-container'))
2018
- * })
2019
- * ```
2020
- */
2021
- attachTo(playerElement: HTMLElement): void;
2022
- /**
2023
- * Destroys the player, releasing all resources and unmounting its UI from the DOM.
2024
- */
2025
- destroy(): void;
2026
- /**
2027
- * Current playback (time since the beginning of the stream), if appropriate.
2028
- *
2029
- * @returns Time in seconds
2030
- * @remarks
2031
- * For live streams, it returns the current time within the current segment.
2032
- */
2033
- getCurrentTime(): number;
2034
- /**
2035
- * Duration of the current media in seconds, if appropriate.
2036
- *
2037
- * @returns Time in seconds
2038
- * @remarks
2039
- * For live streams, it returns the duration of the current segment.
2040
- */
2041
- getDuration(): number;
2042
- /**
2043
- * Indicates whether DVR is enabled.
2044
- */
2045
- isDvrEnabled(): boolean;
2046
- /**
2047
- * Indicates whether DVR is in use.
2048
- * @remarks
2049
- * DVR mode, if it is enabled, is triggered we a user seeks behind the live edge.
2050
- */
2051
- isDvrInUse(): boolean;
2052
- /**
2053
- * Indicates muted state of the video.
2054
- * @remarks
2055
- * Note that muted state is independent from the volume level.
2056
- * See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted}
2057
- */
2058
- isMuted(): boolean;
2059
- /**
2060
- * Indicates the playing state.
2061
- */
2062
- isPlaying(): boolean;
2063
- /**
2064
- * Loads new media source
2065
- * @param mediaSources - list of media sources to use
2066
- * @beta
2067
- */
2068
- load(mediaSources: PlayerMediaSource[]): void;
2069
- /**
2070
- * Mutes the sound of the video.
2071
- */
2072
- mute(): void;
2073
- /**
2074
- * Unmutes the video sound.
2075
- */
2076
- unmute(): void;
2077
- /**
2078
- * Pauses playback.
2079
- */
2080
- pause(): void;
2081
- /**
2082
- * Starts playback.
2083
- */
2084
- play(): void;
2085
- /**
2086
- * Resizes the player container element and everything within it.
2087
- * @param newSize - new size of the player
2088
- * @remarks
2089
- * Use this method when the player itself does not detect properly the change in size of its container element.
2090
- * It can be a case for orientation change on some mobile devices.
2091
- */
2092
- resize(newSize: ContainerSize): void;
2093
- /**
2094
- * Seeks to the given time.
2095
- * @param time - time to seek to in seconds (since the beginning of the stream)
2096
- */
2097
- seek(time: number): void;
2098
- /**
2099
- * Gets the current volume of the media content being played.
2100
- * @returns a number between 0 and 1
2101
- */
2102
- getVolume(): number;
2103
- /**
2104
- * Sets the current volume of the media content being played.
2105
- * @param volume - a number between 0 and 1
2106
- */
2107
- setVolume(volume: number): void;
2108
- /**
2109
- * Stops playback.
2110
- */
2111
- stop(): void;
2112
- /**
2113
- * Registers a plugin.
2114
- * @param plugin - a plugin class
2115
- * @remarks
2116
- * Use this method to extend the player with custom behavior.
2117
- * The plugin class must inherit from one of the Clappr UIPlugin, UIContainerPlugin or CorePlugin classes.
2118
- * A core plugin will be initialized and attached to the player when the player is initialized.
2119
- * A UI plugin will be initialized and attached to the player container is initialized.
2120
- *
2121
- * @see {@link https://github.com/clappr/clappr/wiki/Architecture}
2122
- * @example
2123
- * ```ts
2124
- * import MyPlugin from './MyPlugin.js'
2125
- *
2126
- * Player.registerPlugin(MyPlugin)
2127
- * ```
2128
- */
2129
- static registerPlugin(plugin: PlayerPluginConstructor): void;
2130
- /**
2131
- * Unregisters a plugin registered earlier with {@link Player.registerPlugin}.
2132
- * @remarks
2133
- * It can be also used to unregister a built-in default plugin.
2134
- *
2135
- * Currently, the plugins that are always registered are:
2136
- *
2137
- * - {@link https://github.com/clappr/clappr-core/blob/3126c3a38a6eee9d5aba3918b194e6380fa1178c/src/plugins/strings/strings.js | 'strings'}, which supports internationalization of the player UI
2138
- *
2139
- * - {@link https://github.com/clappr/clappr-core/blob/3126c3a38a6eee9d5aba3918b194e6380fa1178c/src/plugins/sources/sources.js | 'sources'}, which lets to specify multiple media sources and selects the first suitable playback module
2140
- *
2141
- * @param name - name of the plugin
2142
- */
2143
- static unregisterPlugin(name: string): void;
2144
- private static getRegisteredPlugins;
2145
- private static corePlugins;
2146
- private setConfig;
2147
- private initPlayer;
2148
- private tuneIn;
2149
- private triggerAutoPlay;
2150
- private safeTriggerEvent;
2151
- private events;
2152
- private buildCoreOptions;
2153
- private configurePlaybacks;
2154
- private buildMediaSourcesList;
2155
- private bindContainerEventListeners;
2156
- private bindCoreListeners;
2157
- }
2158
-
2159
- /**
2160
- * Subsystems of a player component.
2161
- * @public
2162
- */
2163
- export declare type PlayerComponentType = 'container' | 'core' | 'playback';
2164
-
2165
- /**
2166
- * Configuration options for the player
2167
- *
2168
- * @remarks
2169
- * You can specify multiple sources, each in two forms: just a plain URL or a full object with `source` and `mimeType` fields {@link PlayerMediaSource}.
2170
- * The player will pick the first viable media source according to the source availability, and either the transport preference or standard transport selection order.
2171
- *
2172
- * `priorityTransport` is used to specify the preferred transport protocol
2173
- * when multiple sources are available.
2174
- * It will first try to use the transport specified if it's supported (by a playback engine) and the source is available.
2175
- * Otherwise it will try the other transports in the regular order (dash, hls, mpegts).
2176
- *
2177
- * The `autoPlay` option should be used together with the {@link PlayerConfig.mute | mute} to avoid issues with the browsers' autoplay policies.
2178
- *
2179
- * Note that the `playbackType` is specified explicitly in the examle below, but a playback engine might be able to detect the type of the stream automatically.
2180
- *
2181
- * A plugin options can be specified in the configuration object under a unique key, typically corresponding to the plugin name.
2182
- * The plugin object will have access to the internal normalized configuration object that contains all the custom options.
2183
- * in the examle below, the `poster` field is the `Poster` plugin configuration options.
2184
- *
2185
- * @example
2186
- * ```ts
2187
- * {
2188
- * autoPlay: true,
2189
- * mute: true,
2190
- * playbackType: 'live',
2191
- * priorityTransport: 'dash',
2192
- * sources: [{
2193
- * source: 'https://example.com/myownair66.mpd',
2194
- * mimeType: 'application/dash+xml',
2195
- * }, {
2196
- * source: 'https://example.com/myownair66.m3u8',
2197
- * mimeType: 'application/x-mpegURL',
2198
- * }],
2199
- * poster: {
2200
- * url: settings.poster,
2201
- * },
2202
- * }
2203
- * ```
2204
- * @public
2205
- */
2206
- export declare interface PlayerConfig extends Record<string, unknown> {
2207
- /**
2208
- * Start playback automatically when the player is ready
2209
- * @defaultValue false
2210
- */
2211
- autoPlay?: boolean;
2212
- /**
2213
- * Configuration settings for the DASH playback engine
2214
- * @defaultValue \{\}
2215
- * {@link https://cdn.dashjs.org/latest/jsdoc/module-Settings.html}
2216
- */
2217
- dash?: DashSettings;
2218
- /**
2219
- * Controls the debug output level
2220
- * @defaultValue 'none'
2221
- */
2222
- debug?: PlayerDebugSettings;
2223
- /**
2224
- * A language code for the player UI, for example, `es`. Must reference a key in the {@link PlayerConfig.strings | strings} record.
2225
- * @defaultValue 'en'
2226
- */
2227
- language?: string;
2228
- /**
2229
- * Repeat playback when the media ends.
2230
- * Is used with the `vod` {@link PlayerConfig.playbackType | playbackType}
2231
- * @defaultValue false
2232
- */
2233
- loop?: boolean;
2234
- /**
2235
- * Mute the audio output in order to comply with browsers' autoplay policy.
2236
- * @defaultValue false
2237
- */
2238
- mute?: boolean;
2239
- /**
2240
- * Stream type.
2241
- * @remarks
2242
- * Should only be set if known in advance, as it should not change once determined.
2243
- * Otherwise it might cause inconsistencies in the UI plugins behavior, for instance, glitches with rendering of the DVR controls or seek bar.
2244
- */
2245
- playbackType?: PlaybackType;
2246
- /**
2247
- * Preferred transport protocol when multiple sources are available.
2248
- * @defaultValue 'dash'
2249
- */
2250
- priorityTransport?: TransportPreference;
2251
- /**
2252
- * List of media sources, at least one is required.
2253
- */
2254
- sources: PlayerMediaSource[];
2255
- /**
2256
- * Localization strings for the player UI.
2257
- */
2258
- strings?: TranslationSettings;
2259
- }
2260
-
2261
- /**
2262
- * @remarks `true` is equivalent to `'all'`, `false` is equivalent to `'none'`
2263
- * @public
2264
- */
2265
- export declare type PlayerDebugSettings = PlayerDebugTag | boolean;
2266
-
2267
- /**
2268
- * Debug output category selector
2269
- * @public
2270
- */
2271
- export declare type PlayerDebugTag = 'all' | 'clappr' | 'dash' | 'hls' | 'none';
2272
-
2273
- /**
2274
- * A top-level event on the player object
2275
- * @public
2276
- */
2277
- export declare enum PlayerEvent {
2278
- /**
2279
- * Playback has reached the end of the media.
2280
- */
2281
- Ended = "ended",
2282
- /**
2283
- * An error occurred.
2284
- * Parameters: {@link PlaybackError}
2285
- */
2286
- Error = "error",
2287
- /**
2288
- * The player has switched to or from the fullscreen mode.
2289
- * Parameters:`boolean` isFullscreen
2290
- */
2291
- Fullscreen = "fullscreen",
2292
- /**
2293
- * The player is ready to use.
2294
- */
2295
- Ready = "ready",
2296
- /**
2297
- * Playback has started.
2298
- */
2299
- Play = "play",
2300
- /**
2301
- * Playback has been paused.
2302
- */
2303
- Pause = "pause",
2304
- /**
2305
- * The player's container has been resized.
2306
- * Parameters: {@link ContainerSize}
2307
- */
2308
- Resize = "resize",
2309
- /**
2310
- * The player is seeking to a new position.
2311
- */
2312
- Seek = "seek",
2313
- /**
2314
- * Playback has been stopped.
2315
- */
2316
- Stop = "stop",
2317
- /**
2318
- * The current playback time has changed.
2319
- * Parameters: {@link TimePosition}
2320
- */
2321
- TimeUpdate = "timeupdate",
2322
- /**
2323
- * The volume has changed.
2324
- * Parameters: `number` volume in the range 0..1
2325
- */
2326
- VolumeUpdate = "volumeupdate"
2327
- }
2328
-
2329
- /**
2330
- * Type of a listener callback function for a player event.
2331
- * See the description of the event parameters in {@link PlayerEvent}.
2332
- * @public
2333
- */
2334
- export declare type PlayerEventHandler<E extends PlayerEvent> = (...args: PlayerEventParams<E>) => void;
2335
-
2336
- /**
2337
- * @public
2338
- */
2339
- export declare type PlayerEventParams<E extends PlayerEvent> = E extends PlayerEvent.Seek ? [number] : E extends PlayerEvent.VolumeUpdate ? [number] : E extends PlayerEvent.TimeUpdate ? [TimePosition] : E extends PlayerEvent.Resize ? [{
2340
- width: number;
2341
- height: number;
2342
- }] : E extends PlayerEvent.Fullscreen ? [boolean] : E extends PlayerEvent.Error ? [PlaybackError] : [];
2343
-
2344
- /**
2345
- * A media source to fetch the media data from
2346
- * @public
2347
- */
2348
- export declare type PlayerMediaSource = string | PlayerMediaSourceDesc;
2349
-
2350
- /**
2351
- * Describes a media source with its MIME type and URL.
2352
- *
2353
- * @remarks
2354
- * When the MIME type is provided, it helps the player determine the appropriate playback engine.
2355
- * If omitted, the player will attempt to detect the type from the source URL extension.
2356
- * @public
2357
- */
2358
- export declare interface PlayerMediaSourceDesc {
2359
- /**
2360
- * The MIME type of the media source (e.g. `"video/mp4"`, `"application/x-mpegURL"`).
2361
- * Necessary if the type cannot be detected from file extension of the source URL.
2362
- */
2363
- mimeType?: string;
2364
- /**
2365
- * URL of the media source
2366
- */
2367
- source: string;
2368
- }
2369
-
2370
- /**
2371
- * @public
2372
- * @see {@link https://clappr.github.io/classes/UIContainerPlugin.html},
2373
- * {@link https://clappr.github.io/classes/ContainerPlugin.html}
2374
- */
2375
- export declare type PlayerPlugin = {
2376
- name: string;
2377
- };
2378
-
2379
- /**
2380
- * @public
2381
- */
2382
- export declare type PlayerPluginConstructor = CorePluginConstructor | ContainerPluginConstructor;
2383
-
2384
- /**
2385
- * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped
2386
- * @public
2387
- * @remarks
2388
- * When the playback is stopped or not yet started, the media control UI is disabled and hidden.
2389
- * Media control gets activated once the metadata is loaded after playback is initiated.
2390
- * This plugin displays a big play button on top of the poster image to allow user to start playback.
2391
- * Note that the poster image, if specified via the player config, will be used to update video element's poster attribute by the
2392
- * HTML5-video-based playback module.
2393
- *
2394
- * Configuration options - {@link PosterPluginSettings}
2395
- *
2396
- * @example
2397
- * ```ts
2398
- * new Player({
2399
- * ...
2400
- * poster: {
2401
- * showForNoOp: true,
2402
- * url: 'https://via.placeholder.com/150.png',
2403
- * }
2404
- * })
2405
- * ```
2406
- */
2407
- export declare class Poster extends UIContainerPlugin {
2408
- private hasFatalError;
2409
- private playing;
2410
- private playRequested;
2411
- private $playButton;
2412
- /**
2413
- * @internal
2414
- */
2415
- get name(): string;
2416
- /**
2417
- * @internal
2418
- */
2419
- get supportedVersion(): {
2420
- min: string;
2421
- };
2422
- private static readonly template;
2423
- private get shouldRender();
2424
- private get isNoOp();
2425
- /**
2426
- * @internal
2427
- */
2428
- get attributes(): {
2429
- class: string;
2430
- };
2431
- /**
2432
- * @internal
2433
- */
2434
- get events(): {
2435
- click: string;
2436
- };
2437
- /**
2438
- * @internal
2439
- */
2440
- bindEvents(): void;
2441
- /**
2442
- * Reenables earlier disabled plugin
2443
- */
2444
- enable(): void;
2445
- /**
2446
- * Disables the plugin, unmounting it from the DOM
2447
- */
2448
- disable(): void;
2449
- private onError;
2450
- private onPlay;
2451
- private onPlayIntent;
2452
- private onStop;
2453
- private updatePlayButton;
2454
- private showPlayButton;
2455
- private hidePlayButton;
2456
- private clicked;
2457
- private shouldHideOnPlay;
2458
- private update;
2459
- private updatePoster;
2460
- private showPoster;
2461
- private hidePoster;
2462
- /**
2463
- * @internal
2464
- */
2465
- render(): this;
2466
- /**
2467
- * @internal
2468
- */
2469
- destroy(): this;
2470
- }
2471
-
2472
- /**
2473
- * Config options for the {@link Poster} plugin
2474
- * @public
2475
- */
2476
- export declare interface PosterPluginSettings {
2477
- /**
2478
- * Custom CSS background
2479
- */
2480
- custom?: string;
2481
- /**
2482
- * Whether to show the poster image when the playback is noop (i.e., when there is no appropriate video playback engine for current media sources set or the media sources are not set at all)
2483
- */
2484
- showForNoOp?: boolean;
2485
- /**
2486
- * Poster image URL
2487
- */
2488
- url?: string;
2489
- /**
2490
- * Whether to show the poster after playback has ended, by default `true`
2491
- */
2492
- showOnVideoEnd?: boolean;
2493
- }
2494
-
2495
- /**
2496
- * A level of quality within a media source/representation.
2497
- * @public
2498
- */
2499
- export declare interface QualityLevel {
2500
- /**
2501
- * Zero-based index of the quality level.
2502
- * Quality levels go from low to high
2503
- */
2504
- level: number;
2505
- /**
2506
- * Width of the video frame, pixels.
2507
- */
2508
- width: number;
2509
- /**
2510
- * Height of the video frame, pixels.
2511
- */
2512
- height: number;
2513
- /**
2514
- * Bitrate of the video, bps.
2515
- */
2516
- bitrate: number;
2517
- }
2518
-
2519
- /**
2520
- * `PLUGIN` that provides a UI to select the desired quality level of the playback.
2521
- * @public
2522
- *
2523
- * @remarks
2524
- * Depends on:
2525
- *
2526
- * - {@link MediaControl}
2527
- *
2528
- * - {@link BottomGear}
2529
- *
2530
- * The plugin is rendered as an item in the gear menu, which, when clicked, shows a list of quality levels to choose from.
2531
- *
2532
- * Configuration options - {@link QualityLevelsPluginSettings}
2533
- *
2534
- * @example
2535
- * ```ts
2536
- * new Player({
2537
- * qualityLevels: {
2538
- * restrictResolution: 360,
2539
- * labels: { 360: 'SD', 720: 'HD' },
2540
- * },
2541
- * })
2542
- * ```
2543
- */
2544
- declare class QualityLevels extends UICorePlugin {
2545
- private levels;
2546
- private levelLabels;
2547
- private removeAuto;
2548
- private isHd;
2549
- private currentText;
2550
- private selectedLevelId;
2551
- private static readonly buttonTemplate;
2552
- private static readonly listTemplate;
2553
- /**
2554
- * @internal
2555
- */
2556
- get name(): string;
2557
- /**
2558
- * @internal
2559
- */
2560
- get supportedVersion(): {
2561
- min: string;
2562
- };
2563
- /**
2564
- * @internal
2565
- */
2566
- static get version(): string;
2567
- /**
2568
- * @internal
2569
- */
2570
- get attributes(): {
2571
- class: string;
2572
- 'data-level-selector': string;
2573
- };
2574
- get events(): {
2575
- 'click .gear-sub-menu_btn': string;
2576
- 'click .go-back': string;
2577
- };
2578
- /**
2579
- * @internal
2580
- */
2581
- bindEvents(): void;
2582
- private onCoreReady;
2583
- private onGearRendered;
2584
- private onActiveContainerChange;
2585
- private updateHd;
2586
- private onStop;
2587
- private shouldRender;
2588
- /**
2589
- * @internal
2590
- */
2591
- render(): this;
2592
- private renderDropdown;
2593
- private updateButton;
2594
- private get pluginOptions();
2595
- private get maxLevel();
2596
- private onLevelsAvailable;
2597
- private makeLevelsLabels;
2598
- private onSelect;
2599
- private goBack;
2600
- private setLevel;
2601
- private allLevelElements;
2602
- private levelElement;
2603
- private onLevelSwitchStart;
2604
- private onLevelSwitchEnd;
2605
- private updateText;
2606
- private getLevelLabel;
2607
- private onBitrate;
2608
- private highlightCurrentLevel;
2609
- }
2610
- export { QualityLevels as LevelSelector }
2611
- export { QualityLevels }
2612
-
2613
- /**
2614
- * Configuration options for the {@link QualityLevels} plugin.
2615
- * @public
2616
- */
2617
- export declare interface QualityLevelsPluginSettings {
2618
- /**
2619
- * The maximum resolution to allow in the level selector.
2620
- */
2621
- restrictResolution?: number;
2622
- /**
2623
- * The labels to show in the level selector.
2624
- * @example
2625
- * ```ts
2626
- * { 360: 'SD', 720: 'HD' }
2627
- * ```
2628
- */
2629
- labels?: Record<number, string>;
2630
- }
2631
-
2632
- export { reportError_2 as reportError }
2633
-
2634
- /**
2635
- * `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
2636
- * @public
2637
- * @remarks
2638
- * Configuration options - {@link SeekTimeSettings}
2639
- */
2640
- export declare class SeekTime extends UICorePlugin {
2641
- get name(): string;
2642
- get supportedVersion(): {
2643
- min: string;
2644
- };
2645
- private static readonly template;
2646
- get attributes(): {
2647
- class: string;
2648
- };
2649
- private get isLiveStreamWithDvr();
2650
- private get showDuration();
2651
- private hoveringOverSeekBar;
2652
- private hoverPosition;
2653
- private displayedDuration;
2654
- private displayedSeekTime;
2655
- private duration;
2656
- /**
2657
- * @internal
2658
- */
2659
- bindEvents(): void;
2660
- private onCoreReady;
2661
- private onContainerChanged;
2662
- private onTimeUpdate;
2663
- private showTime;
2664
- private hideTime;
2665
- private calculateHoverPosition;
2666
- private getSeekTime;
2667
- private update;
2668
- private shouldBeVisible;
2669
- /**
2670
- * @internal
2671
- */
2672
- render(): this;
2673
- private mount;
2674
- }
2675
-
2676
- /**
2677
- * Configuration options for the SeekTime plugin.
2678
- * @public
2679
- */
2680
- export declare type SeekTimeSettings = {
2681
- /**
2682
- * Whether to show the duration of the video. Applies only to the VOD streams.
2683
- */
2684
- duration?: boolean;
2685
- };
2686
-
2687
- export { SentryTracer }
2688
-
2689
- export { setTracer }
2690
-
2691
- /**
2692
- * `PLUGIN` that adds a share button to the media control UI.
2693
- * @beta
2694
- */
2695
- export declare class Share extends UICorePlugin {
2696
- private hide;
2697
- private container;
2698
- get name(): string;
2699
- get supportedVersion(): {
2700
- min: string;
2701
- };
2702
- get template(): any;
2703
- get attributes(): {
2704
- class: string;
2705
- 'data-share': string;
2706
- };
2707
- get events(): {
2708
- 'click [data-share-button]': string;
2709
- 'click [data-share-close]': string;
2710
- 'click [data-share-fb]': string;
2711
- 'click [data-share-tw]': string;
2712
- 'click [data-share-link]': string;
2713
- 'click [data-share-embed]': string;
2714
- };
2715
- bindEvents(): void;
2716
- unBindEvents(): void;
2717
- canShowShare(): void;
2718
- private onReady;
2719
- render(): this;
2720
- hideShare(): void;
2721
- showShare(): void;
2722
- initializeIcons(): void;
2723
- onShareShow(): void;
2724
- onShareHide(): void;
2725
- onShareFB(): void;
2726
- onShareTW(): void;
2727
- onShareLinkClick(): void;
2728
- onShareEmbedClick(): void;
2729
- }
2730
-
2731
- /**
2732
- * `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
2733
- * @public
2734
- */
2735
- export declare class SkipTime extends UICorePlugin {
2736
- get name(): string;
2737
- get supportedVersion(): {
2738
- min: string;
2739
- };
2740
- get container(): any;
2741
- private static readonly template;
2742
- /**
2743
- * @internal
2744
- */
2745
- get attributes(): {
2746
- class: string;
2747
- };
2748
- private position;
2749
- /**
2750
- * @internal
2751
- */
2752
- get events(): {
2753
- 'click #mc-skip-left': string;
2754
- 'click #mc-skip-mid': string;
2755
- 'click #mc-skip-right': string;
2756
- };
2757
- /**
2758
- * @internal
2759
- */
2760
- bindEvents(): void;
2761
- private onContainerChanged;
2762
- private setBack;
2763
- private handleRewindClicks;
2764
- private handleSkip;
2765
- private setMidClick;
2766
- private setForward;
2767
- private toggleFullscreen;
2768
- /**
2769
- * @internal
2770
- */
2771
- render(): this;
2772
- private mount;
2773
- }
2774
-
2775
- /**
2776
- * `PLUGIN` that is managing the automatic failover between media sources.
2777
- * @public
2778
- * @remarks
2779
- * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
2780
- * on how sources ordering and selection works. Below is a simplified diagram:
2781
- *
2782
- * ```markdown
2783
- * sources_list:
2784
- * - a.mpd | +--------------------+
2785
- * - b.m3u8 |--->| init |
2786
- * - ... | |--------------------|
2787
- * | current_source = 0 |
2788
- * +--------------------+
2789
- * |
2790
- * | source = a.mpd
2791
- * | playback = dash.js
2792
- * v
2793
- * +------------------+
2794
- * +-->| load source |
2795
- * | +---------|--------+
2796
- * | v
2797
- * | +------------------+
2798
- * | | play |
2799
- * | +---------|--------+
2800
- * | |
2801
- * | v
2802
- * | +-----------------------+
2803
- * | | on playback_error |
2804
- * | |-----------------------|
2805
- * | | current_source = |
2806
- * | | (current_source + 1) |
2807
- * | | % len sources_list |
2808
- * | | |
2809
- * | | delay 1..3s |
2810
- * | +---------------|-------+
2811
- * | |
2812
- * | source=b.m3u8 |
2813
- * | playback=hls.js |
2814
- * +-------------------+
2815
- *
2816
- * ```
2817
- *
2818
- * @example
2819
- * ```ts
2820
- * import { SourceController } from '@gcorevideo/player'
2821
- *
2822
- * Player.registerPlugin(SourceController)
2823
- * ```
2824
- */
2825
- export declare class SourceController extends CorePlugin {
2826
- private sourcesList;
2827
- private currentSourceIndex;
2828
- private sourcesDelay;
2829
- private active;
2830
- private autoPlay;
2831
- private switching;
2832
- private sync;
2833
- /**
2834
- * @internal
2835
- */
2836
- get name(): string;
2837
- /**
2838
- * @internal
2839
- */
2840
- get supportedVersion(): {
2841
- min: string;
2842
- };
2843
- /**
2844
- * @param core - The Clappr core instance.
2845
- */
2846
- constructor(core: Core);
2847
- /**
2848
- * Set new media source.
2849
- *
2850
- * @param sourcesList - The list of new media source URLs
2851
- * @beta
2852
- * @remarks
2853
- * Triggers a reload of the playback module, container and all container plugins.
2854
- */
2855
- setMediaSource(sourcesList: PlayerMediaSourceDesc[]): void;
2856
- /**
2857
- * @internal
2858
- */
2859
- bindEvents(): void;
2860
- private onCoreReady;
2861
- private onActiveContainerChanged;
2862
- private bindContainerEventListeners;
2863
- private reset;
2864
- private retryPlayback;
2865
- private getNextMediaSource;
2866
- /**
2867
- * @internal
2868
- */
2869
- static get version(): string;
2870
- }
2871
-
2872
- /**
2873
- * Custom events emitted by the plugin
2874
- * @public
2875
- */
2876
- export declare enum SpinnerEvents {
2877
- /**
2878
- * Emitted at the end of the spinner animation cycle to facilitate smooth UI updates,
2879
- * for instance, {@link SourceController} listens to this event to reload the source when the spinner is hidden
2880
- */
2881
- SYNC = "plugins:spinner:sync"
2882
- }
2883
-
2884
- /**
2885
- * `PLUGIN` that shows a pending operation indicator when playback is buffering or in a similar state.
2886
- * @public
2887
- * @remarks
2888
- * It is aliased as `Spinner` for convenience.
2889
- * Events emitted - {@link SpinnerEvents}
2890
- * Other plugins can use {@link SpinnerThreeBounce.show | show} and {@link SpinnerThreeBounce.hide | hide} methods to
2891
- * implement custom pending/progress indication scenarios.
2892
- */
2893
- declare class SpinnerThreeBounce extends UIContainerPlugin {
2894
- private userShown;
2895
- /**
2896
- * @internal
2897
- */
2898
- get name(): string;
2899
- /**
2900
- * @internal
2901
- */
2902
- get supportedVersion(): {
2903
- min: string;
2904
- };
2905
- /**
2906
- * @internal
2907
- */
2908
- get attributes(): {
2909
- 'data-spinner': string;
2910
- class: string;
2911
- };
2912
- private showTimeout;
2913
- private template;
2914
- private hasFatalError;
2915
- private hasBuffering;
2916
- constructor(container: Container);
2917
- private onBuffering;
2918
- private onBufferFull;
2919
- private onPlay;
2920
- private onStop;
2921
- private onError;
2922
- /**
2923
- * Shows the spinner.
2924
- *
2925
- * The method call prevents spinner's built-in logic from automatically hiding it until {@link SpinnerThreeBounce.hide} is called
2926
- *
2927
- * @param delay - The delay in milliseconds before the spinner is shown.
2928
- */
2929
- show(delay?: number): void;
2930
- /**
2931
- * Hides the spinner.
2932
- */
2933
- hide(): void;
2934
- private _show;
2935
- private _hide;
2936
- /**
2937
- * @internal
2938
- */
2939
- render(): this;
2940
- }
2941
- export { SpinnerThreeBounce as Spinner }
2942
- export { SpinnerThreeBounce }
2943
-
2944
- /**
2945
- * Playback stall event data
2946
- * @beta
2947
- */
2948
- export declare interface StallEventData {
2949
- event: TelemetryEvent.Stall;
2950
- /**
2951
- * Accumulated buffering duration over the measurement interval, ms
2952
- */
2953
- total_ms: number;
2954
- /**
2955
- * Number of stalls
2956
- */
2957
- count: number;
2958
- /**
2959
- * Playback time when the stall is reported at the end of a stall measurement interval, s
2960
- */
2961
- time: number;
2962
- }
2963
-
2964
- /**
2965
- * Built-in media control elements.
2966
- * @public
2967
- */
2968
- export declare type StandardMediaControlElement = 'duration' | 'fullscreen' | 'hd-indicator' | 'playpause' | 'playstop' | 'position' | 'seekbar' | 'volume';
2969
-
2970
- /**
2971
- * Telemetry start event data
2972
- * @beta
2973
- */
2974
- export declare interface StartEventData {
2975
- event: TelemetryEvent.Start;
2976
- }
2977
-
2978
- /**
2979
- * `PLUGIN` that collects and reports the performance statistics.
2980
- * @beta
2981
- * @remarks
2982
- * This plugin is experimental and its API is likely to change.
2983
- *
2984
- * Configuration options {@link TelemetryPluginSettings}
2985
- *
2986
- * @example
2987
- * ```ts
2988
- * import { Statistics } from '@gcorevideo/player'
2989
- *
2990
- * Player.registerPlugin(Statistics)
2991
- *
2992
- * const player = new Player({
2993
- * statistics: {
2994
- * send: (data) => {
2995
- * fetch('/stats', {
2996
- * method: 'POST',
2997
- * body: JSON.stringify(data),
2998
- * headers: { 'content-type': 'application/json' },
2999
- * })
3000
- * },
3001
- * },
3002
- * ...
3003
- * })
3004
- * ```
3005
- */
3006
- export declare class Telemetry extends ContainerPlugin {
3007
- /**
3008
- * The name of the plugin.
3009
- */
3010
- get name(): string;
3011
- /**
3012
- * The supported version of the plugin.
3013
- */
3014
- get supportedVersion(): {
3015
- min: string;
3016
- };
3017
- private started;
3018
- private timeStart;
3019
- private stallSent;
3020
- private stallLastTime;
3021
- private watchSent;
3022
- private bufTracking;
3023
- private numStalls;
3024
- /**
3025
- * The time when buffering last started.
3026
- */
3027
- private bufLastStarted;
3028
- /**
3029
- * The accumulated buffering duration.
3030
- */
3031
- private stallAcc;
3032
- constructor(container: Container);
3033
- /**
3034
- * @internal
3035
- */
3036
- bindEvents(): void;
3037
- private startLevelSwitch;
3038
- private endLevelSwitch;
3039
- private onBuffering;
3040
- private onBufferFull;
3041
- private onReady;
3042
- private sendInit;
3043
- private send;
3044
- private sendStall;
3045
- private onTimeUpdate;
3046
- private onStart;
3047
- }
3048
-
3049
- /**
3050
- * Telemetry event type
3051
- * @beta
3052
- */
3053
- export declare enum TelemetryEvent {
3054
- Init = 1,
3055
- Start = 2,
3056
- Watch = 3,
3057
- Stall = 4
3058
- }
3059
-
3060
- /**
3061
- * Telemetry event data
3062
- * @beta
3063
- */
3064
- export declare type TelemetryEventData = StallEventData | InitEventData | StartEventData | WatchEventData;
3065
-
3066
- /**
3067
- * Plugin settings
3068
- * @beta
3069
- */
3070
- export declare interface TelemetryPluginSettings {
3071
- /**
3072
- * Sends the statistics record to the storage.
3073
- * The actual delivery is presumably async and batched.
3074
- */
3075
- send: TelemetrySendFn;
3076
- }
3077
-
3078
- /**
3079
- * Telemetry record
3080
- * @beta
3081
- */
3082
- export declare type TelemetryRecord = {
3083
- type: PlaybackType;
3084
- } & TelemetryEventData;
3085
-
3086
- /**
3087
- * Callback to send the telemetry record to the storage.
3088
- * @param data - The telemetry record to send.
3089
- * @beta
3090
- */
3091
- export declare type TelemetrySendFn = (data: TelemetryRecord) => void;
3092
-
3093
- /**
3094
- * `PLUGIN` that displays the thumbnails of the video when available.
3095
- * @public
3096
- * @remarks
3097
- * The plugin needs specially crafted VTT file with a thumbnail sprite sheet to work.
3098
- * The VTT consist of timestamp records followed by a thumbnail area
3099
- *
3100
- * Configuration options - {@link ThumbnailsPluginSettings}
3101
- *
3102
- * @example
3103
- * ```ts
3104
- * import { Thumbnails } from '@gcorevideo/player'
3105
- *
3106
- * Player.registerPlugin(Thumbnails)
3107
- *
3108
- * new Player({
3109
- * thumbnails: {
3110
- * backdropHeight: 200,
3111
- * backdropMinOpacity: 0.9,
3112
- * backdropMaxOpacity: 0.99,
3113
- * spotlightHeight: 100,
3114
- * vtt: '1\n00:00:00,000 --> 00:00:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,0,100,56\n\n2\n00:00:10,000 --> 00:00:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,0,100,56\n\n3\n00:00:20,000 --> 00:00:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,0,100,56\n\n4\n00:00:30,000 --> 00:00:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,0,100,56\n\n5\n00:00:40,000 --> 00:00:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,0,100,56\n\n6\n00:00:50,000 --> 00:01:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,0,100,56\n\n7\n00:01:00,000 --> 00:01:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,0,100,56\n\n8\n00:01:10,000 --> 00:01:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,56,100,56\n\n9\n00:01:20,000 --> 00:01:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,56,100,56\n\n10\n00:01:30,000 --> 00:01:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,56,100,56\n\n11\n00:01:40,000 --> 00:01:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,56,100,56\n\n12\n00:01:50,000 --> 00:02:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,56,100,56\n\n13\n00:02:00,000 --> 00:02:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,56,100,56\n\n14\n00:02:10,000 --> 00:02:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,56,100,56\n\n15\n00:02:20,000 --> 00:02:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,112,100,56\n\n16\n00:02:30,000 --> 00:02:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,112,100,56\n\n17\n00:02:40,000 --> 00:02:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,112,100,56\n\n18\n00:02:50,000 --> 00:03:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,112,100,56\n\n19\n00:03:00,000 --> 00:03:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,112,100,56\n\n20\n00:03:10,000 --> 00:03:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,112,100,56\n\n21\n00:03:20,000 --> 00:03:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,112,100,56\n\n22\n00:03:30,000 --> 00:03:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,168,100,56\n\n23\n00:03:40,000 --> 00:03:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,168,100,56\n\n24\n00:03:50,000 --> 00:04:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,168,100,56\n\n25\n00:04:00,000 --> 00:04:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,168,100,56\n\n26\n00:04:10,000 --> 00:04:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,168,100,56\n\n27\n00:04:20,000 --> 00:04:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,168,100,56\n\n28\n00:04:30,000 --> 00:04:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,168,100,56\n\n29\n00:04:40,000 --> 00:04:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,224,100,56\n\n30\n00:04:50,000 --> 00:05:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,224,100,56\n\n31\n00:05:00,000 --> 00:05:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,224,100,56\n\n32\n00:05:10,000 --> 00:05:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,224,100,56\n\n33\n00:05:20,000 --> 00:05:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,224,100,56\n\n34\n00:05:30,000 --> 00:05:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,224,100,56\n\n35\n00:05:40,000 --> 00:05:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,224,100,56\n\n36\n00:05:50,000 --> 00:06:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,280,100,56\n\n37\n00:06:00,000 --> 00:06:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,280,100,56\n\n38\n00:06:10,000 --> 00:06:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,280,100,56\n\n39\n00:06:20,000 --> 00:06:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,280,100,56\n\n40\n00:06:30,000 --> 00:06:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,280,100,56\n\n41\n00:06:40,000 --> 00:06:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,280,100,56\n\n42\n00:06:50,000 --> 00:07:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,280,100,56\n\n43\n00:07:00,000 --> 00:07:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,336,100,56\n\n44\n00:07:10,000 --> 00:07:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,336,100,56\n\n45\n00:07:20,000 --> 00:07:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,336,100,56\n\n46\n00:07:30,000 --> 00:07:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,336,100,56\n\n47\n00:07:40,000 --> 00:07:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,336,100,56\n\n48\n00:07:50,000 --> 00:08:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,336,100,56\n\n49\n00:08:00,000 --> 00:08:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,336,100,56\n',
3115
- * sprite:
3116
- * 'https://static.gvideo.co/videoplatform/sprites/2675/2452164_3dk4NsRt6vWsffEr.mp4_sprite.jpg',
3117
- * },
3118
- * })
3119
-
3120
- * ```
3121
- */
3122
- export declare class Thumbnails extends UICorePlugin {
3123
- private $backdropCarouselImgs;
3124
- private spriteSheetHeight;
3125
- private spriteSheetWidth;
3126
- private hoverPosition;
3127
- private showing;
3128
- private thumbsLoaded;
3129
- private spotlightHeight;
3130
- private backdropHeight;
3131
- private thumbs;
3132
- /**
3133
- * @internal
3134
- */
3135
- get name(): string;
3136
- /**
3137
- * @internal
3138
- */
3139
- get supportedVersion(): {
3140
- min: string;
3141
- };
3142
- /**
3143
- * @internal
3144
- */
3145
- get attributes(): {
3146
- class: string;
3147
- };
3148
- private static readonly template;
3149
- constructor(core: Core);
3150
- private buildSpriteConfig;
3151
- /**
3152
- * @internal
3153
- */
3154
- bindEvents(): void;
3155
- private bindContainerEvents;
3156
- private onCoreReady;
3157
- private loadSpriteSheet;
3158
- private onContainerChanged;
3159
- private init;
3160
- private mount;
3161
- private onMouseMoveSeekbar;
3162
- private onMouseLeave;
3163
- private buildThumbImage;
3164
- private loadBackdrop;
3165
- private setText;
3166
- private updateCarousel;
3167
- private updateSpotlightThumb;
3168
- private getThumbIndexForTime;
3169
- private update;
3170
- private fixElements;
3171
- private get shouldRender();
3172
- render(): this;
3173
- }
3174
-
3175
- /**
3176
- * Plugin configuration options for the thumbnails plugin.
3177
- * @public
3178
- * @remarks
3179
- * Example of a VTT file:
3180
- * ```text
3181
- * 1
3182
- * 00:00:00,000 --> 00:00:10,000
3183
- * 3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,0,100,56
3184
- *
3185
- * 2
3186
- * 00:00:10,000 --> 00:00:20,000
3187
- * 3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,0,100,56
3188
- *
3189
- * ```
3190
- */
3191
- export declare interface ThumbnailsPluginSettings {
3192
- backdropHeight?: number;
3193
- backdropMaxOpacity?: number;
3194
- backdropMinOpacity?: number;
3195
- spotlightHeight?: number;
3196
- sprite: string;
3197
- /**
3198
- * The VTT file to use for the thumbnails.
3199
- */
3200
- vtt: string;
3201
- }
3202
-
3203
- /**
3204
- * Current playback time and total duration of the media.
3205
- * @public
3206
- */
3207
- export declare interface TimePosition {
3208
- /**
3209
- * Current playback time, 0..duration
3210
- */
3211
- current: TimeValue;
3212
- /**
3213
- * Total duration of the media content (or DVR window size or segment duration for live streams)
3214
- */
3215
- total: TimeValue;
3216
- }
3217
-
3218
- /**
3219
- * Time progress information indicated by Clappr CONTAINER_PROGRESS and PLAYBACK_PROGRESS events.
3220
- * @beta
3221
- */
3222
- export declare type TimeProgress = {
3223
- /**
3224
- * Current playback time
3225
- */
3226
- start: TimeValue;
3227
- /**
3228
- * Current buffer length beginning from the start (=current) time
3229
- */
3230
- current: TimeValue;
3231
- /**
3232
- * Total duration of the media content
3233
- */
3234
- total: TimeValue;
3235
- };
3236
-
3237
- /**
3238
- * For the plugin development
3239
- * @beta
3240
- * @deprecated Use TimePosition instead
3241
- */
3242
- export declare type TimeUpdate = TimePosition;
3243
-
3244
- /**
3245
- * Playback time position in seconds since the beginning of the stream.
3246
- * For the live streams this is limited to the length of a segment. When DVR is enabled, this refers to the
3247
- * @public
3248
- */
3249
- export declare type TimeValue = number;
3250
-
3251
- export { trace }
3252
-
3253
- /**
3254
- * @public
3255
- */
3256
- export declare type TranslationKey = string;
3257
-
3258
- /**
3259
- * Localization strings for the player UI.
3260
- * @remarks
3261
- * The keys are language codes, and the values are objects with keys being the translation keys and values being the translations.
3262
- *
3263
- * This dictionary is used to localize the player UI, including the error messages and is shared across all the player components (including the plugins).
3264
- *
3265
- * @example
3266
- * ```
3267
- * {
3268
- * en: {
3269
- * play: 'Play',
3270
- * ...
3271
- * },
3272
- * es: {
3273
- * play: 'Reproducir',
3274
- * ...
3275
- * },
3276
- * ...
3277
- * }
3278
- * ```
3279
- *
3280
- * @public
3281
- */
3282
- export declare type TranslationSettings = Partial<Record<LangTag, Record<TranslationKey, string>>>;
3283
-
3284
- /**
3285
- * Preferred streaming media delivery protocol
3286
- * @public
3287
- */
3288
- export declare type TransportPreference = 'dash' | 'hls';
3289
-
3290
- /**
3291
- * Version information about the gplayer and its main dependencies
3292
- * @returns Version information about the gplayer and its main dependencies
3293
- * @beta
3294
- */
3295
- export declare function version(): {
3296
- gplayer: string;
3297
- clappr: string;
3298
- dashjs: string;
3299
- hlsjs: string;
3300
- };
3301
-
3302
- /**
3303
- * `PLUGIN` that mutes the sound and fades it in when the mouse is over the player.
3304
- * @public
3305
- *
3306
- * @remarks
3307
- * When the user moves the mouse over and away from the player, the sound is unmuted and unmuted with a fade effect.
3308
- *
3309
- * Depends on {@link MediaControl} plugin.
3310
- * Configuration options - {@link VolumeFadeSettings}
3311
- */
3312
- export declare class VolumeFade extends UICorePlugin {
3313
- private activeVolume;
3314
- private duration;
3315
- private timerId;
3316
- /**
3317
- * @internal
3318
- */
3319
- get name(): string;
3320
- constructor(core: Core);
3321
- /**
3322
- * @internal
3323
- */
3324
- bindEvents(): void;
3325
- private onCoreReady;
3326
- private onVolumeChange;
3327
- private onEnter;
3328
- private onLeave;
3329
- private fade;
3330
- private stopFade;
3331
- }
3332
-
3333
- /**
3334
- * Events emitted by the VolumeFade plugin.
3335
- * @public
3336
- */
3337
- export declare enum VolumeFadeEvents {
3338
- FADE = "core:volume:fade"
3339
- }
3340
-
3341
- /**
3342
- * @public
3343
- */
3344
- export declare type VolumeFadeSettings = {
3345
- /**
3346
- * Initial active volume level, effective until volume is changed via media control
3347
- */
3348
- level?: number;
3349
- /**
3350
- * Fade duration, ms
3351
- */
3352
- duration?: number;
3353
- };
3354
-
3355
- /**
3356
- * Telemetry watch event data
3357
- * @beta
3358
- */
3359
- export declare interface WatchEventData {
3360
- event: TelemetryEvent.Watch;
3361
- }
3362
-
3363
- /**
3364
- * {@link https://zeptojs.com/#$() | Zepto query result}
3365
- * @public
3366
- */
3367
- export declare type ZeptoResult = ReturnType<typeof $>;
3368
-
3369
- export { }