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