@gcorevideo/player 2.19.15 → 2.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/level-selector/list.ejs +1 -1
- package/dist/core.js +2 -2
- package/dist/index.css +1634 -1634
- package/dist/index.js +585 -416
- package/dist/player.d.ts +268 -72
- package/dist/plugins/index.css +1567 -1567
- package/dist/plugins/index.js +526 -357
- package/docs/api/player.clapprnerdstats.md +12 -259
- package/docs/api/player.dvrcontrols.md +5 -1
- package/docs/api/player.errorscreen.attributes.md +3 -0
- package/docs/api/player.errorscreen.bindevents.md +3 -0
- package/docs/api/player.errorscreen.container.md +3 -0
- package/docs/api/player.errorscreen.hide.md +3 -0
- package/docs/api/player.errorscreen.md +27 -0
- package/docs/api/player.errorscreen.name.md +3 -0
- package/docs/api/player.errorscreen.render.md +3 -0
- package/docs/api/player.errorscreen.show.md +3 -0
- package/docs/api/player.errorscreen.supportedversion.md +3 -0
- package/docs/api/player.errorscreen.template.md +3 -0
- package/docs/api/player.errorscreen.unbindevents.md +3 -0
- package/docs/api/{player.playbackrate.template.md → player.initeventdata.event.md} +3 -3
- package/docs/api/{player.playbackrate.updateplaybackrate.md → player.initeventdata.md} +15 -11
- package/docs/api/player.md +88 -5
- package/docs/api/player.pictureinpicture.md +9 -197
- package/docs/api/player.playbackrate.md +10 -314
- package/docs/api/{player.playbackrate.onplay.md → player.stalleventdata.count.md} +5 -7
- package/docs/api/{player.playbackrate.name.md → player.stalleventdata.event.md} +3 -3
- package/docs/api/player.stalleventdata.md +112 -0
- package/docs/api/player.stalleventdata.time.md +13 -0
- package/docs/api/player.stalleventdata.total_ms.md +13 -0
- package/docs/api/{player.pluginsettings.md → player.starteventdata.event.md} +3 -5
- package/docs/api/{player.playbackrate.onrateselect.md → player.starteventdata.md} +15 -11
- package/docs/api/{player.statistics._constructor_.md → player.telemetry._constructor_.md} +6 -3
- package/docs/api/player.telemetry.md +146 -0
- package/docs/api/{player.volumefade.name.md → player.telemetry.name.md} +4 -2
- package/docs/api/{player.clapprnerdstats.supportedversion.md → player.telemetry.supportedversion.md} +4 -2
- package/docs/api/player.telemetryevent.md +89 -0
- package/docs/api/player.telemetryeventdata.md +15 -0
- package/docs/api/player.telemetrypluginsettings.md +57 -0
- package/docs/api/player.telemetrypluginsettings.send.md +13 -0
- package/docs/api/player.telemetryrecord.md +17 -0
- package/docs/api/player.volumefade.md +0 -93
- package/docs/api/{player.pictureinpicture.name.md → player.watcheventdata.event.md} +3 -3
- package/docs/api/{player.playbackrate.setselectedrate.md → player.watcheventdata.md} +15 -11
- package/lib/index.plugins.d.ts +2 -2
- package/lib/index.plugins.d.ts.map +1 -1
- package/lib/index.plugins.js +2 -2
- package/lib/playback/hls-playback/HlsPlayback.js +1 -1
- package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.d.ts +38 -5
- package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.d.ts.map +1 -1
- package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.js +63 -17
- package/lib/plugins/dvr-controls/DvrControls.d.ts +5 -2
- package/lib/plugins/dvr-controls/DvrControls.d.ts.map +1 -1
- package/lib/plugins/dvr-controls/DvrControls.js +5 -2
- package/lib/plugins/error-screen/ErrorScreen.d.ts +5 -0
- package/lib/plugins/error-screen/ErrorScreen.d.ts.map +1 -1
- package/lib/plugins/error-screen/ErrorScreen.js +5 -0
- package/lib/plugins/index.d.ts +2 -3
- package/lib/plugins/index.d.ts.map +1 -1
- package/lib/plugins/index.js +2 -3
- package/lib/plugins/picture-in-picture/PictureInPicture.d.ts +32 -4
- package/lib/plugins/picture-in-picture/PictureInPicture.d.ts.map +1 -1
- package/lib/plugins/picture-in-picture/PictureInPicture.js +30 -2
- package/lib/plugins/playback-rate/PlaybackRate.d.ts +47 -14
- package/lib/plugins/playback-rate/PlaybackRate.d.ts.map +1 -1
- package/lib/plugins/playback-rate/PlaybackRate.js +38 -9
- package/lib/plugins/statistics/Statistics.d.ts +38 -3
- package/lib/plugins/statistics/Statistics.d.ts.map +1 -1
- package/lib/plugins/statistics/Statistics.js +51 -9
- package/lib/plugins/telemetry/Telemetry.d.ts +135 -0
- package/lib/plugins/telemetry/Telemetry.d.ts.map +1 -0
- package/lib/plugins/telemetry/Telemetry.js +180 -0
- package/lib/plugins/volume-fade/VolumeFade.d.ts +7 -1
- package/lib/plugins/volume-fade/VolumeFade.d.ts.map +1 -1
- package/lib/plugins/volume-fade/VolumeFade.js +8 -1
- package/package.json +1 -1
- package/src/index.plugins.ts +2 -2
- package/src/playback/hls-playback/HlsPlayback.ts +1 -1
- package/src/plugins/clappr-nerd-stats/ClapprNerdStats.ts +240 -173
- package/src/plugins/dvr-controls/DvrControls.ts +5 -2
- package/src/plugins/error-screen/ErrorScreen.ts +5 -0
- package/src/plugins/index.ts +2 -3
- package/src/plugins/level-selector/__tests__/LevelSelector.test.ts +47 -26
- package/src/plugins/level-selector/__tests__/__snapshots__/LevelSelector.test.ts.snap +18 -18
- package/src/plugins/picture-in-picture/PictureInPicture.ts +35 -7
- package/src/plugins/playback-rate/PlaybackRate.ts +53 -24
- package/src/plugins/telemetry/Telemetry.ts +299 -0
- package/src/plugins/volume-fade/VolumeFade.ts +9 -2
- package/temp/player.api.json +2322 -3281
- package/tsconfig.tsbuildinfo +1 -1
- package/docs/api/player.clapprnerdstats.attributes.md +0 -17
- package/docs/api/player.clapprnerdstats.bindevents.md +0 -18
- package/docs/api/player.clapprnerdstats.events.md +0 -18
- package/docs/api/player.clapprnerdstats.name.md +0 -14
- package/docs/api/player.clapprnerdstats.playerheight.md +0 -14
- package/docs/api/player.clapprnerdstats.playerwidth.md +0 -14
- package/docs/api/player.clapprnerdstats.render.md +0 -18
- package/docs/api/player.clapprnerdstats.statsboxelem.md +0 -14
- package/docs/api/player.clapprnerdstats.statsboxwidththreshold.md +0 -14
- package/docs/api/player.clapprnerdstats.template.md +0 -14
- package/docs/api/player.pictureinpicture.bindevents.md +0 -15
- package/docs/api/player.pictureinpicture.events.md +0 -13
- package/docs/api/player.pictureinpicture.exitpictureinpicture.md +0 -15
- package/docs/api/player.pictureinpicture.render.md +0 -15
- package/docs/api/player.pictureinpicture.requestpictureinpicture.md +0 -15
- package/docs/api/player.pictureinpicture.supportedversion.md +0 -13
- package/docs/api/player.pictureinpicture.togglepictureinpicture.md +0 -15
- package/docs/api/player.pictureinpicture.version.md +0 -11
- package/docs/api/player.pictureinpicture.videoelement.md +0 -11
- package/docs/api/player.playbackrate.attributes.md +0 -14
- package/docs/api/player.playbackrate.bindevents.md +0 -15
- package/docs/api/player.playbackrate.events.md +0 -15
- package/docs/api/player.playbackrate.gettitle.md +0 -15
- package/docs/api/player.playbackrate.goback.md +0 -15
- package/docs/api/player.playbackrate.highlightcurrentrate.md +0 -15
- package/docs/api/player.playbackrate.onfinishad.md +0 -15
- package/docs/api/player.playbackrate.onshowmenu.md +0 -15
- package/docs/api/player.playbackrate.onstartad.md +0 -15
- package/docs/api/player.playbackrate.onstop.md +0 -15
- package/docs/api/player.playbackrate.reload.md +0 -15
- package/docs/api/player.playbackrate.render.md +0 -15
- package/docs/api/player.playbackrate.supportedversion.md +0 -13
- package/docs/api/player.playbackrate.unbindevents.md +0 -15
- package/docs/api/player.statistics.bindevents.md +0 -15
- package/docs/api/player.statistics.md +0 -141
- package/docs/api/player.statistics.name.md +0 -11
- package/docs/api/player.statistics.supportedversion.md +0 -13
- package/docs/api/player.volumefade.bindevents.md +0 -18
- package/docs/api/player.volumefade.unbindevents.md +0 -18
- package/src/plugins/statistics/Statistics.ts +0 -207
- /package/src/plugins/{statistics → telemetry}/Statistics copy.xts +0 -0
|
@@ -5,17 +5,39 @@ import pipIcon from '../../../assets/icons/new/pip.svg';
|
|
|
5
5
|
import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
|
|
6
6
|
import '../../../assets/picture-in-picture/button.scss';
|
|
7
7
|
const VERSION = '0.0.1';
|
|
8
|
-
const T = `plugins.
|
|
8
|
+
const T = `plugins.pip`;
|
|
9
|
+
/**
|
|
10
|
+
* Enables picture in picture mode.
|
|
11
|
+
* @beta
|
|
12
|
+
* @remarks
|
|
13
|
+
* Depends on:
|
|
14
|
+
*
|
|
15
|
+
* - {@link MediaControl}
|
|
16
|
+
*
|
|
17
|
+
* It renders a button to toggle picture in picture mode in the media control UI.
|
|
18
|
+
*/
|
|
9
19
|
export class PictureInPicture extends UICorePlugin {
|
|
20
|
+
/**
|
|
21
|
+
* @internal
|
|
22
|
+
*/
|
|
10
23
|
get name() {
|
|
11
|
-
return '
|
|
24
|
+
return 'pip';
|
|
12
25
|
}
|
|
26
|
+
/**
|
|
27
|
+
* @internal
|
|
28
|
+
*/
|
|
13
29
|
get supportedVersion() {
|
|
14
30
|
return { min: CLAPPR_VERSION };
|
|
15
31
|
}
|
|
32
|
+
/**
|
|
33
|
+
* @internal
|
|
34
|
+
*/
|
|
16
35
|
static get version() {
|
|
17
36
|
return VERSION;
|
|
18
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* @internal
|
|
40
|
+
*/
|
|
19
41
|
get events() {
|
|
20
42
|
return {
|
|
21
43
|
'click button': 'togglePictureInPicture',
|
|
@@ -24,6 +46,9 @@ export class PictureInPicture extends UICorePlugin {
|
|
|
24
46
|
get videoElement() {
|
|
25
47
|
return this.core.activePlayback.el;
|
|
26
48
|
}
|
|
49
|
+
/**
|
|
50
|
+
* @internal
|
|
51
|
+
*/
|
|
27
52
|
bindEvents() {
|
|
28
53
|
this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
|
|
29
54
|
}
|
|
@@ -34,6 +59,9 @@ export class PictureInPicture extends UICorePlugin {
|
|
|
34
59
|
});
|
|
35
60
|
return document.pictureInPictureEnabled && !!HTMLVideoElement.prototype.requestPictureInPicture;
|
|
36
61
|
}
|
|
62
|
+
/**
|
|
63
|
+
* @internal
|
|
64
|
+
*/
|
|
37
65
|
render() {
|
|
38
66
|
if (!this.isPiPSupported()) {
|
|
39
67
|
return this;
|
|
@@ -1,42 +1,75 @@
|
|
|
1
1
|
import { UICorePlugin } from '@clappr/core';
|
|
2
|
+
/**
|
|
3
|
+
* Allows changing the playback speed of the video.
|
|
4
|
+
* @beta
|
|
5
|
+
*
|
|
6
|
+
* @remarks
|
|
7
|
+
* Depends on:
|
|
8
|
+
*
|
|
9
|
+
* - {@link MediaControl | media_control}
|
|
10
|
+
*
|
|
11
|
+
* - {@link BottomGear | bottom_gear}
|
|
12
|
+
*
|
|
13
|
+
* It renders a button in the gear menu, which opens a dropdown with the available playback rates.
|
|
14
|
+
*/
|
|
2
15
|
export declare class PlaybackRate extends UICorePlugin {
|
|
3
16
|
private currentPlayback;
|
|
4
17
|
private playbackRates;
|
|
5
18
|
private prevSelectedRate;
|
|
6
19
|
private selectedRate;
|
|
20
|
+
/**
|
|
21
|
+
* @internal
|
|
22
|
+
*/
|
|
7
23
|
get name(): string;
|
|
24
|
+
/**
|
|
25
|
+
* @internal
|
|
26
|
+
*/
|
|
8
27
|
get supportedVersion(): {
|
|
9
28
|
min: string;
|
|
10
29
|
};
|
|
11
|
-
|
|
30
|
+
private static readonly template;
|
|
31
|
+
private static readonly buttonTemplate;
|
|
32
|
+
private static readonly listTemplate;
|
|
33
|
+
/**
|
|
34
|
+
* @internal
|
|
35
|
+
*/
|
|
12
36
|
get attributes(): {
|
|
13
37
|
class: string;
|
|
14
38
|
'data-playback-rate-select': string;
|
|
15
39
|
};
|
|
40
|
+
/**
|
|
41
|
+
* @internal
|
|
42
|
+
*/
|
|
16
43
|
get events(): {
|
|
17
44
|
'click .gear-sub-menu_btn': string;
|
|
18
45
|
'click .gear-option': string;
|
|
19
46
|
'click .go-back': string;
|
|
20
47
|
};
|
|
48
|
+
/**
|
|
49
|
+
* @internal
|
|
50
|
+
*/
|
|
21
51
|
bindEvents(): void;
|
|
22
|
-
unBindEvents
|
|
52
|
+
private unBindEvents;
|
|
23
53
|
private allRateElements;
|
|
24
54
|
private rateElement;
|
|
25
55
|
private onDashRateChange;
|
|
26
56
|
private updateLiveStatus;
|
|
27
|
-
reload
|
|
57
|
+
private reload;
|
|
28
58
|
private shouldRender;
|
|
59
|
+
/**
|
|
60
|
+
* @internal
|
|
61
|
+
*/
|
|
29
62
|
render(): this;
|
|
30
|
-
onStartAd
|
|
31
|
-
onFinishAd
|
|
32
|
-
onPlay
|
|
33
|
-
onStop
|
|
34
|
-
onRateSelect
|
|
35
|
-
onShowMenu
|
|
36
|
-
goBack
|
|
37
|
-
updatePlaybackRate
|
|
38
|
-
setSelectedRate
|
|
39
|
-
getTitle
|
|
40
|
-
highlightCurrentRate
|
|
63
|
+
private onStartAd;
|
|
64
|
+
private onFinishAd;
|
|
65
|
+
private onPlay;
|
|
66
|
+
private onStop;
|
|
67
|
+
private onRateSelect;
|
|
68
|
+
private onShowMenu;
|
|
69
|
+
private goBack;
|
|
70
|
+
private updatePlaybackRate;
|
|
71
|
+
private setSelectedRate;
|
|
72
|
+
private getTitle;
|
|
73
|
+
private highlightCurrentRate;
|
|
41
74
|
}
|
|
42
75
|
//# sourceMappingURL=PlaybackRate.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,MAAM,cAAc,CAAC;AAiCxE,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,eAAe,CAAyB;IAEhD,OAAO,CAAC,aAAa,CAAgD;IAErE,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,YAAY,CAAiC;IAErD,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,
|
|
1
|
+
{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,MAAM,cAAc,CAAC;AAiCxE;;;;;;;;;;;;GAYG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,eAAe,CAAyB;IAEhD,OAAO,CAAC,aAAa,CAAgD;IAErE,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,YAAY,CAAiC;IAErD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAwB;IAExD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAwB;IAE9D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAsB;IAE1D;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IAqBnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,YAAY;IAUpB;;OAEG;IACM,MAAM;IAuCf,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,MAAM;IAGd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,oBAAoB;CAS7B"}
|
|
@@ -19,26 +19,51 @@ const DEFAULT_PLAYBACK_RATES = [
|
|
|
19
19
|
const DEFAULT_PLAYBACK_RATE = '1.0';
|
|
20
20
|
// TODO
|
|
21
21
|
const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
|
|
22
|
+
/**
|
|
23
|
+
* Allows changing the playback speed of the video.
|
|
24
|
+
* @beta
|
|
25
|
+
*
|
|
26
|
+
* @remarks
|
|
27
|
+
* Depends on:
|
|
28
|
+
*
|
|
29
|
+
* - {@link MediaControl | media_control}
|
|
30
|
+
*
|
|
31
|
+
* - {@link BottomGear | bottom_gear}
|
|
32
|
+
*
|
|
33
|
+
* It renders a button in the gear menu, which opens a dropdown with the available playback rates.
|
|
34
|
+
*/
|
|
22
35
|
export class PlaybackRate extends UICorePlugin {
|
|
23
36
|
currentPlayback = null;
|
|
24
37
|
playbackRates = DEFAULT_PLAYBACK_RATES;
|
|
25
38
|
prevSelectedRate;
|
|
26
39
|
selectedRate = DEFAULT_PLAYBACK_RATE;
|
|
40
|
+
/**
|
|
41
|
+
* @internal
|
|
42
|
+
*/
|
|
27
43
|
get name() {
|
|
28
|
-
return '
|
|
44
|
+
return 'playback_rate';
|
|
29
45
|
}
|
|
46
|
+
/**
|
|
47
|
+
* @internal
|
|
48
|
+
*/
|
|
30
49
|
get supportedVersion() {
|
|
31
50
|
return { min: CLAPPR_VERSION };
|
|
32
51
|
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
52
|
+
static template = template(pluginHtml);
|
|
53
|
+
static buttonTemplate = template(buttonHtml);
|
|
54
|
+
static listTemplate = template(listHtml);
|
|
55
|
+
/**
|
|
56
|
+
* @internal
|
|
57
|
+
*/
|
|
36
58
|
get attributes() {
|
|
37
59
|
return {
|
|
38
60
|
'class': this.name,
|
|
39
61
|
'data-playback-rate-select': ''
|
|
40
62
|
};
|
|
41
63
|
}
|
|
64
|
+
/**
|
|
65
|
+
* @internal
|
|
66
|
+
*/
|
|
42
67
|
get events() {
|
|
43
68
|
return {
|
|
44
69
|
'click .gear-sub-menu_btn': 'onRateSelect',
|
|
@@ -46,8 +71,12 @@ export class PlaybackRate extends UICorePlugin {
|
|
|
46
71
|
'click .go-back': 'goBack',
|
|
47
72
|
};
|
|
48
73
|
}
|
|
74
|
+
/**
|
|
75
|
+
* @internal
|
|
76
|
+
*/
|
|
49
77
|
bindEvents() {
|
|
50
78
|
this.listenTo(this.core, 'gear:rendered', this.render);
|
|
79
|
+
// TODO this.core.getPlugin('media_control'), bottom_gear
|
|
51
80
|
this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
|
|
52
81
|
this.listenTo(this.core.mediaControl, MEDIACONTROL_PLAYBACKRATE, this.updatePlaybackRate);
|
|
53
82
|
this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
|
|
@@ -101,6 +130,9 @@ export class PlaybackRate extends UICorePlugin {
|
|
|
101
130
|
this.currentPlayback = this.core.activePlayback;
|
|
102
131
|
return !(this.currentPlayback?.tagName !== 'video' && this.currentPlayback?.tagName !== 'audio');
|
|
103
132
|
}
|
|
133
|
+
/**
|
|
134
|
+
* @internal
|
|
135
|
+
*/
|
|
104
136
|
render() {
|
|
105
137
|
const container = this.core.activeContainer;
|
|
106
138
|
if (this.core.getPlaybackType() === Playback.LIVE && !container.isDvrEnabled()) {
|
|
@@ -114,9 +146,7 @@ export class PlaybackRate extends UICorePlugin {
|
|
|
114
146
|
this.selectedRate = cfg.defaultValue || DEFAULT_PLAYBACK_RATE;
|
|
115
147
|
}
|
|
116
148
|
if (this.shouldRender()) {
|
|
117
|
-
const
|
|
118
|
-
// const html = t({ playbackRates: this.playbackRates, title: this.getTitle() });
|
|
119
|
-
const button = t({
|
|
149
|
+
const button = PlaybackRate.buttonTemplate({
|
|
120
150
|
title: this.getTitle(),
|
|
121
151
|
speedIcon,
|
|
122
152
|
arrowRightIcon,
|
|
@@ -164,8 +194,7 @@ export class PlaybackRate extends UICorePlugin {
|
|
|
164
194
|
return false;
|
|
165
195
|
}
|
|
166
196
|
onShowMenu() {
|
|
167
|
-
|
|
168
|
-
this.$el.html(t({
|
|
197
|
+
this.$el.html(PlaybackRate.listTemplate({
|
|
169
198
|
playbackRates: this.playbackRates,
|
|
170
199
|
arrowLeftIcon,
|
|
171
200
|
checkIcon,
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { Container, ContainerPlugin } from '@clappr/core';
|
|
2
|
-
import type { PlaybackType } from '
|
|
2
|
+
import type { PlaybackType } from '../../types';
|
|
3
3
|
type StatisticsEventData = Record<string, string | number | boolean>;
|
|
4
4
|
type StatisticsRecord = {
|
|
5
5
|
event: StatisticsEvent;
|
|
6
6
|
type: PlaybackType;
|
|
7
7
|
} & StatisticsEventData;
|
|
8
|
+
/**
|
|
9
|
+
* Plugin settings
|
|
10
|
+
*/
|
|
8
11
|
export type PluginSettings = {
|
|
9
12
|
/**
|
|
10
13
|
* Sends the statistics record to the storage.
|
|
@@ -14,8 +17,37 @@ export type PluginSettings = {
|
|
|
14
17
|
send: (data: StatisticsRecord) => void;
|
|
15
18
|
};
|
|
16
19
|
type StatisticsEvent = 'init' | 'start' | 'watch' | 'heatmap';
|
|
20
|
+
/**
|
|
21
|
+
* Collects and reports the performance statistics.
|
|
22
|
+
* @beta
|
|
23
|
+
* @example
|
|
24
|
+
* ```ts
|
|
25
|
+
* import { Statistics } from '@gcorevideo/player'
|
|
26
|
+
*
|
|
27
|
+
* Player.registerPlugin(Statistics)
|
|
28
|
+
*
|
|
29
|
+
* const player = new Player({
|
|
30
|
+
* statistics: {
|
|
31
|
+
* send: (data) => {
|
|
32
|
+
* fetch('/stats', {
|
|
33
|
+
* method: 'POST',
|
|
34
|
+
* body: JSON.stringify(data),
|
|
35
|
+
* headers: { 'content-type': 'application/json' },
|
|
36
|
+
* })
|
|
37
|
+
* }
|
|
38
|
+
* },
|
|
39
|
+
* ...
|
|
40
|
+
* })
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
17
43
|
export declare class Statistics extends ContainerPlugin {
|
|
44
|
+
/**
|
|
45
|
+
* The name of the plugin.
|
|
46
|
+
*/
|
|
18
47
|
get name(): string;
|
|
48
|
+
/**
|
|
49
|
+
* The supported version of the plugin.
|
|
50
|
+
*/
|
|
19
51
|
get supportedVersion(): {
|
|
20
52
|
min: string;
|
|
21
53
|
};
|
|
@@ -35,13 +67,16 @@ export declare class Statistics extends ContainerPlugin {
|
|
|
35
67
|
*/
|
|
36
68
|
private bufAccDuration;
|
|
37
69
|
constructor(container: Container);
|
|
70
|
+
/**
|
|
71
|
+
* @internal
|
|
72
|
+
*/
|
|
38
73
|
bindEvents(): void;
|
|
39
74
|
private startLevelSwitch;
|
|
40
|
-
private
|
|
75
|
+
private endLevelSwitch;
|
|
41
76
|
private onBuffering;
|
|
42
77
|
private onBufferFull;
|
|
43
78
|
private onReady;
|
|
44
|
-
private
|
|
79
|
+
private sendInit;
|
|
45
80
|
private sendMessage;
|
|
46
81
|
private send;
|
|
47
82
|
private sendHeatmap;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Statistics.d.ts","sourceRoot":"","sources":["../../../src/plugins/statistics/Statistics.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"Statistics.d.ts","sourceRoot":"","sources":["../../../src/plugins/statistics/Statistics.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAA;AAK3E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAY/C,KAAK,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;AAEpE,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,eAAe,CAAA;IACtB,IAAI,EAAE,YAAY,CAAA;CACnB,GAAG,mBAAmB,CAAA;AAEvB;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;OAIG;IACH,IAAI,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAA;CACvC,CAAA;AAED,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAA;AAE7D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,UAAW,SAAQ,eAAe;IAC7C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,SAAS,CAAI;IAErB,OAAO,CAAC,WAAW,CAAQ;IAE3B,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,WAAW,CAAQ;IAE3B,OAAO,CAAC,IAAI,CAAI;IAEhB;;OAEG;IACH,OAAO,CAAC,cAAc,CAAI;IAE1B;;OAEG;IACH,OAAO,CAAC,cAAc,CAAI;gBAEd,SAAS,EAAE,SAAS;IAShC;;OAEG;IACM,UAAU;IAoCnB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,IAAI;IAQZ,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,OAAO;CAOhB"}
|
|
@@ -1,16 +1,45 @@
|
|
|
1
1
|
// An example implementation of client side performancestatistics
|
|
2
2
|
import { ContainerPlugin, Events, Playback } from '@clappr/core';
|
|
3
|
-
import { reportError } from '@gcorevideo/utils';
|
|
3
|
+
import { reportError, trace } from '@gcorevideo/utils';
|
|
4
4
|
import assert from 'assert';
|
|
5
5
|
import { CLAPPR_VERSION } from '../../build.js';
|
|
6
|
-
const CUSTOM_EVENTS_CONTAINER_START = 'container:start'
|
|
6
|
+
// const CUSTOM_EVENTS_CONTAINER_START = 'container:start'
|
|
7
7
|
const WATCH_CUTOFF = 5;
|
|
8
8
|
const HEATMAP_INTERVAL = 10;
|
|
9
|
-
|
|
9
|
+
const T = 'plugins.statistics';
|
|
10
|
+
/**
|
|
11
|
+
* Collects and reports the performance statistics.
|
|
12
|
+
* @beta
|
|
13
|
+
* @example
|
|
14
|
+
* ```ts
|
|
15
|
+
* import { Statistics } from '@gcorevideo/player'
|
|
16
|
+
*
|
|
17
|
+
* Player.registerPlugin(Statistics)
|
|
18
|
+
*
|
|
19
|
+
* const player = new Player({
|
|
20
|
+
* statistics: {
|
|
21
|
+
* send: (data) => {
|
|
22
|
+
* fetch('/stats', {
|
|
23
|
+
* method: 'POST',
|
|
24
|
+
* body: JSON.stringify(data),
|
|
25
|
+
* headers: { 'content-type': 'application/json' },
|
|
26
|
+
* })
|
|
27
|
+
* }
|
|
28
|
+
* },
|
|
29
|
+
* ...
|
|
30
|
+
* })
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
10
33
|
export class Statistics extends ContainerPlugin {
|
|
34
|
+
/**
|
|
35
|
+
* The name of the plugin.
|
|
36
|
+
*/
|
|
11
37
|
get name() {
|
|
12
|
-
return '
|
|
38
|
+
return 'statistics';
|
|
13
39
|
}
|
|
40
|
+
/**
|
|
41
|
+
* The supported version of the plugin.
|
|
42
|
+
*/
|
|
14
43
|
get supportedVersion() {
|
|
15
44
|
return { min: CLAPPR_VERSION };
|
|
16
45
|
}
|
|
@@ -34,20 +63,27 @@ export class Statistics extends ContainerPlugin {
|
|
|
34
63
|
assert(this.options.statistics &&
|
|
35
64
|
typeof this.options.statistics.send === 'function', 'Statistics plugin requires statistics options');
|
|
36
65
|
}
|
|
66
|
+
/**
|
|
67
|
+
* @internal
|
|
68
|
+
*/
|
|
37
69
|
bindEvents() {
|
|
38
70
|
// TODO remove this
|
|
39
|
-
this.listenToOnce(
|
|
71
|
+
// this.listenToOnce(
|
|
72
|
+
// this.container,
|
|
73
|
+
// CUSTOM_EVENTS_CONTAINER_START,
|
|
74
|
+
// this.onStart,
|
|
75
|
+
// )
|
|
40
76
|
this.listenToOnce(this.container, Events.CONTAINER_READY, this.onReady);
|
|
41
77
|
this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERING, this.onBuffering);
|
|
42
78
|
this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERFULL, this.onBufferFull);
|
|
43
79
|
this.listenTo(this.container.playback, Events.PLAYBACK_TIMEUPDATE, this.onTimeUpdateLive);
|
|
44
80
|
this.listenTo(this.container.playback, Events.PLAYBACK_LEVEL_SWITCH_START, this.startLevelSwitch);
|
|
45
|
-
this.listenTo(this.container.playback, Events.PLAYBACK_LEVEL_SWITCH_END, this.
|
|
81
|
+
this.listenTo(this.container.playback, Events.PLAYBACK_LEVEL_SWITCH_END, this.endLevelSwitch);
|
|
46
82
|
}
|
|
47
83
|
startLevelSwitch() {
|
|
48
84
|
this.bufTracking = false;
|
|
49
85
|
}
|
|
50
|
-
|
|
86
|
+
endLevelSwitch() {
|
|
51
87
|
this.bufTracking = true;
|
|
52
88
|
}
|
|
53
89
|
onBuffering() {
|
|
@@ -63,12 +99,18 @@ export class Statistics extends ContainerPlugin {
|
|
|
63
99
|
this.bufTracking = true;
|
|
64
100
|
}
|
|
65
101
|
onReady() {
|
|
66
|
-
this.
|
|
102
|
+
this.sendInit();
|
|
103
|
+
trace(`${T} onReady`, {
|
|
104
|
+
autoPlay: this.options.autoPlay,
|
|
105
|
+
});
|
|
67
106
|
if (this.options.autoPlay) {
|
|
68
107
|
this.onStart();
|
|
69
108
|
}
|
|
109
|
+
else {
|
|
110
|
+
this.listenToOnce(this.container.playback, Events.PLAYBACK_PLAY_INTENT, this.onStart);
|
|
111
|
+
}
|
|
70
112
|
}
|
|
71
|
-
|
|
113
|
+
sendInit() {
|
|
72
114
|
this.sendMessage('init');
|
|
73
115
|
}
|
|
74
116
|
sendMessage(state) {
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { Container, ContainerPlugin } from '@clappr/core';
|
|
2
|
+
import type { PlaybackType } from '../../types.js';
|
|
3
|
+
/**
|
|
4
|
+
* Telemetry event data
|
|
5
|
+
*/
|
|
6
|
+
export type TelemetryEventData = StallEventData | InitEventData | StartEventData | WatchEventData;
|
|
7
|
+
/**
|
|
8
|
+
* Playback stall event data
|
|
9
|
+
*/
|
|
10
|
+
export interface StallEventData {
|
|
11
|
+
event: TelemetryEvent.Stall;
|
|
12
|
+
/**
|
|
13
|
+
* Accumulated buffering duration over the measurement interval, ms
|
|
14
|
+
*/
|
|
15
|
+
total_ms: number;
|
|
16
|
+
/**
|
|
17
|
+
* Number of stalls
|
|
18
|
+
*/
|
|
19
|
+
count: number;
|
|
20
|
+
/**
|
|
21
|
+
* Playback time when the stall is reported at the end of a stall measurement interval, s
|
|
22
|
+
*/
|
|
23
|
+
time: number;
|
|
24
|
+
}
|
|
25
|
+
export interface InitEventData {
|
|
26
|
+
event: TelemetryEvent.Init;
|
|
27
|
+
}
|
|
28
|
+
export interface StartEventData {
|
|
29
|
+
event: TelemetryEvent.Start;
|
|
30
|
+
}
|
|
31
|
+
export interface WatchEventData {
|
|
32
|
+
event: TelemetryEvent.Watch;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Telemetry record
|
|
36
|
+
*/
|
|
37
|
+
export type TelemetryRecord = {
|
|
38
|
+
type: PlaybackType;
|
|
39
|
+
} & TelemetryEventData;
|
|
40
|
+
/**
|
|
41
|
+
* Callback to send the telemetry record to the storage.
|
|
42
|
+
* @param data - The telemetry record to send.
|
|
43
|
+
*/
|
|
44
|
+
type TelemetrySendFn = (data: TelemetryRecord) => void;
|
|
45
|
+
/**
|
|
46
|
+
* Plugin settings
|
|
47
|
+
*/
|
|
48
|
+
export interface TelemetryPluginSettings {
|
|
49
|
+
/**
|
|
50
|
+
* Sends the statistics record to the storage.
|
|
51
|
+
* The actual delivery is presumably async and batched.
|
|
52
|
+
*/
|
|
53
|
+
send: TelemetrySendFn;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Telemetry event type
|
|
57
|
+
*/
|
|
58
|
+
export declare enum TelemetryEvent {
|
|
59
|
+
Init = 1,
|
|
60
|
+
Start = 2,
|
|
61
|
+
Watch = 3,
|
|
62
|
+
Stall = 4
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Collects and reports the performance statistics.
|
|
66
|
+
* @beta
|
|
67
|
+
* @remarks
|
|
68
|
+
* This plugin is experimental and its API is likely to change.
|
|
69
|
+
*
|
|
70
|
+
* Configuration options {@link TelemetryPluginSettings}
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
* ```ts
|
|
74
|
+
* import { Statistics } from '@gcorevideo/player'
|
|
75
|
+
*
|
|
76
|
+
* Player.registerPlugin(Statistics)
|
|
77
|
+
*
|
|
78
|
+
* const player = new Player({
|
|
79
|
+
* statistics: {
|
|
80
|
+
* send: (data) => {
|
|
81
|
+
* fetch('/stats', {
|
|
82
|
+
* method: 'POST',
|
|
83
|
+
* body: JSON.stringify(data),
|
|
84
|
+
* headers: { 'content-type': 'application/json' },
|
|
85
|
+
* })
|
|
86
|
+
* },
|
|
87
|
+
* },
|
|
88
|
+
* ...
|
|
89
|
+
* })
|
|
90
|
+
* ```
|
|
91
|
+
*/
|
|
92
|
+
export declare class Telemetry extends ContainerPlugin {
|
|
93
|
+
/**
|
|
94
|
+
* The name of the plugin.
|
|
95
|
+
*/
|
|
96
|
+
get name(): string;
|
|
97
|
+
/**
|
|
98
|
+
* The supported version of the plugin.
|
|
99
|
+
*/
|
|
100
|
+
get supportedVersion(): {
|
|
101
|
+
min: string;
|
|
102
|
+
};
|
|
103
|
+
private started;
|
|
104
|
+
private timeStart;
|
|
105
|
+
private stallSent;
|
|
106
|
+
private stallLastTime;
|
|
107
|
+
private watchSent;
|
|
108
|
+
private bufTracking;
|
|
109
|
+
private numStalls;
|
|
110
|
+
/**
|
|
111
|
+
* The time when buffering last started.
|
|
112
|
+
*/
|
|
113
|
+
private bufLastStarted;
|
|
114
|
+
/**
|
|
115
|
+
* The accumulated buffering duration.
|
|
116
|
+
*/
|
|
117
|
+
private stallAcc;
|
|
118
|
+
constructor(container: Container);
|
|
119
|
+
/**
|
|
120
|
+
* @internal
|
|
121
|
+
*/
|
|
122
|
+
bindEvents(): void;
|
|
123
|
+
private startLevelSwitch;
|
|
124
|
+
private endLevelSwitch;
|
|
125
|
+
private onBuffering;
|
|
126
|
+
private onBufferFull;
|
|
127
|
+
private onReady;
|
|
128
|
+
private sendInit;
|
|
129
|
+
private send;
|
|
130
|
+
private sendStall;
|
|
131
|
+
private onTimeUpdate;
|
|
132
|
+
private onStart;
|
|
133
|
+
}
|
|
134
|
+
export {};
|
|
135
|
+
//# sourceMappingURL=Telemetry.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Telemetry.d.ts","sourceRoot":"","sources":["../../../src/plugins/telemetry/Telemetry.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAU,MAAM,cAAc,CAAA;AAKjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAUlD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,CAAA;AAEjG;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAA;IAC3B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,cAAc,CAAC,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAA;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAA;CAC5B;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,YAAY,CAAA;CACnB,GAAG,kBAAkB,CAAC;AAEvB;;;GAGG;AACH,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;AAEtD;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,IAAI,EAAE,eAAe,CAAA;CACtB;AAED;;GAEG;AACH,oBAAY,cAAc;IACxB,IAAI,IAAI;IACR,KAAK,IAAA;IACL,KAAK,IAAA;IACL,KAAK,IAAA;CACN;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,SAAU,SAAQ,eAAe;IAC5C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,SAAS,CAAI;IAErB,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,WAAW,CAAQ;IAE3B,OAAO,CAAC,SAAS,CAAI;IAErB;;OAEG;IACH,OAAO,CAAC,cAAc,CAAI;IAE1B;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAI;gBAER,SAAS,EAAE,SAAS;IAUhC;;OAEG;IACM,UAAU;IAoCnB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,OAAO;CAShB"}
|