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