@gcorevideo/player 2.24.2 → 2.24.5
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/big-mute-button/big-mute-button.ejs +2 -2
- package/dist/core.js +2 -2
- package/dist/index.css +418 -418
- package/dist/index.js +135 -112
- package/dist/player.d.ts +76 -30
- package/docs/api/player.bigmutebutton.md +13 -1
- package/docs/api/player.clapprstatssettings.md +51 -4
- package/docs/api/player.clapprstatssettings.runeach.md +16 -0
- package/docs/api/player.clipspluginsettings.md +1 -1
- package/docs/api/player.clipspluginsettings.text.md +1 -1
- package/docs/api/player.cmcdconfig.exportids.md +4 -0
- package/docs/api/player.cmcdconfig.md +19 -105
- package/docs/api/{player.cmcdconfig.version.md → player.cmcdconfigoptions.contentid.md} +5 -3
- package/docs/api/player.cmcdconfigoptions.md +79 -0
- package/docs/api/{player.cmcdconfigpluginsettings.md → player.cmcdconfigoptions.sessionid.md} +4 -6
- package/docs/api/player.extendedevents.md +9 -0
- package/docs/api/player.md +37 -31
- package/docs/api/player.mediacontrol.getavailableheight.md +24 -0
- package/docs/api/player.mediacontrol.md +14 -0
- package/docs/api/{player.cmcdconfig.name.md → player.posterpluginsettings.custom.md} +4 -3
- package/docs/api/player.posterpluginsettings.md +108 -7
- package/docs/api/player.posterpluginsettings.showfornoop.md +16 -0
- package/docs/api/player.posterpluginsettings.showonvideoend.md +16 -0
- package/docs/api/{player.cmcdconfig.bindevents.md → player.posterpluginsettings.url.md} +4 -7
- package/lib/Player.js +1 -1
- package/lib/index.embed.d.ts +30 -0
- package/lib/index.embed.d.ts.map +1 -0
- package/lib/index.embed.js +29 -0
- package/lib/plugins/big-mute-button/BigMuteButton.d.ts +18 -13
- package/lib/plugins/big-mute-button/BigMuteButton.d.ts.map +1 -1
- package/lib/plugins/big-mute-button/BigMuteButton.js +77 -83
- package/lib/plugins/clappr-stats/ClapprStats.d.ts +6 -2
- package/lib/plugins/clappr-stats/ClapprStats.d.ts.map +1 -1
- package/lib/plugins/click-to-pause/ClickToPause.js +1 -1
- package/lib/plugins/clips/Clips.d.ts +1 -1
- package/lib/plugins/clips/Clips.d.ts.map +1 -1
- package/lib/plugins/clips/Clips.js +2 -1
- package/lib/plugins/cmcd-config/CmcdConfig.d.ts +34 -11
- package/lib/plugins/cmcd-config/CmcdConfig.d.ts.map +1 -1
- package/lib/plugins/cmcd-config/CmcdConfig.js +28 -18
- package/lib/plugins/media-control/MediaControl.d.ts +4 -0
- package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
- package/lib/plugins/media-control/MediaControl.js +6 -1
- package/lib/plugins/poster/Poster.d.ts +7 -3
- package/lib/plugins/poster/Poster.d.ts.map +1 -1
- package/lib/plugins/source-controller/SourceController.d.ts +1 -0
- package/lib/plugins/source-controller/SourceController.d.ts.map +1 -1
- package/lib/plugins/source-controller/SourceController.js +22 -9
- package/lib/testUtils.d.ts +1 -0
- package/lib/testUtils.d.ts.map +1 -1
- package/lib/testUtils.js +1 -0
- package/package.json +1 -1
- package/src/Player.ts +1 -1
- package/src/index.embed.ts +29 -0
- package/src/plugins/big-mute-button/BigMuteButton.ts +84 -108
- package/src/plugins/big-mute-button/__tests__/BigMuteButton.test.ts +86 -0
- package/src/plugins/big-mute-button/__tests__/__snapshots__/BigMuteButton.test.ts.snap +8 -0
- package/src/plugins/clappr-stats/ClapprStats.ts +5 -1
- package/src/plugins/click-to-pause/ClickToPause.ts +1 -1
- package/src/plugins/clips/Clips.ts +3 -2
- package/src/plugins/cmcd-config/CmcdConfig.ts +33 -27
- package/src/plugins/media-control/MediaControl.ts +6 -1
- package/src/plugins/poster/Poster.ts +6 -2
- package/src/plugins/source-controller/SourceController.ts +27 -9
- package/src/plugins/source-controller/__tests__/SourceController.test.ts +28 -8
- package/src/testUtils.ts +5 -1
- package/temp/player.api.json +229 -154
- package/tsconfig.tsbuildinfo +1 -1
- package/docs/api/player.cmcdconfig.supportedversion.md +0 -14
package/dist/index.js
CHANGED
|
@@ -42836,7 +42836,7 @@ function registerPlaybacks() {
|
|
|
42836
42836
|
Loader.registerPlayback(DashPlayback);
|
|
42837
42837
|
}
|
|
42838
42838
|
|
|
42839
|
-
const T$k = '
|
|
42839
|
+
const T$k = 'gplayer';
|
|
42840
42840
|
const DEFAULT_OPTIONS = {
|
|
42841
42841
|
autoPlay: false,
|
|
42842
42842
|
debug: 'none',
|
|
@@ -43303,7 +43303,7 @@ class Player {
|
|
|
43303
43303
|
}
|
|
43304
43304
|
}
|
|
43305
43305
|
|
|
43306
|
-
var version$1 = "2.24.
|
|
43306
|
+
var version$1 = "2.24.5";
|
|
43307
43307
|
|
|
43308
43308
|
var packages = {
|
|
43309
43309
|
"node_modules/@clappr/core": {
|
|
@@ -43327,7 +43327,7 @@ function version() {
|
|
|
43327
43327
|
};
|
|
43328
43328
|
}
|
|
43329
43329
|
|
|
43330
|
-
const pluginHtml$
|
|
43330
|
+
const pluginHtml$6 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"><%= icon %></span>\n</button>\n<ul class='gcore-skin-bg-color menu hidden' id=\"audiotracks-select\" role=\"menu\">\n <% for (const track of tracks) { %>\n <li>\n <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n <%= track.label %>\n </a>\n </li>\n <% }; %>\n</ul>\n";
|
|
43331
43331
|
|
|
43332
43332
|
const audioArrow = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"9px\" height=\"6px\" viewBox=\"0 0 9 6\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->\n <title>quality-arrow</title>\n <desc>Created with Sketch.</desc>\n <defs></defs>\n <g id=\"quality-arrow\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M5.07079194,5.78553848 C4.91457318,5.94277844 4.70551573,6.00941824 4.50028717,5.99893557 C4.2950586,6.00941824 4.08676693,5.94277844 3.92978239,5.78553848 L0.221118462,1.2997069 C-0.0737061539,1.00469478 -0.0737061539,0.526236029 0.221118462,0.231972666 C0.515177299,-0.0630394586 1.23500883,0.00734414472 1.64852907,0.00734414472 L7.77475484,0.00734414472 C8.21201421,0.00734414472 8.48539703,-0.0630394586 8.77945587,0.231972666 C9.07351471,0.526236029 9.07351471,1.00469478 8.77945587,1.2997069 L5.07079194,5.78553848 Z\"\n fill=\"#FFFFFE\"></path>\n </g>\n</svg>\n";
|
|
43333
43333
|
|
|
@@ -43636,6 +43636,10 @@ const LEFT_ORDER = [
|
|
|
43636
43636
|
'duration',
|
|
43637
43637
|
'dvr',
|
|
43638
43638
|
];
|
|
43639
|
+
/**
|
|
43640
|
+
* Extended events for the {@link MediaControl} plugin
|
|
43641
|
+
* @beta
|
|
43642
|
+
*/
|
|
43639
43643
|
var ExtendedEvents;
|
|
43640
43644
|
(function (ExtendedEvents) {
|
|
43641
43645
|
ExtendedEvents["MEDIACONTROL_VOLUME"] = "mediacontrol:volume";
|
|
@@ -43916,6 +43920,7 @@ class MediaControl extends UICorePlugin {
|
|
|
43916
43920
|
onVolumeChanged() {
|
|
43917
43921
|
this.updateVolumeUI();
|
|
43918
43922
|
}
|
|
43923
|
+
// TODO check if CONTAINER_SETTINGSUPDATE handler is sufficient
|
|
43919
43924
|
onLoadedMetadata() {
|
|
43920
43925
|
const video = this.core.activePlayback?.el;
|
|
43921
43926
|
// video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
|
|
@@ -44056,7 +44061,7 @@ class MediaControl extends UICorePlugin {
|
|
|
44056
44061
|
return false;
|
|
44057
44062
|
}
|
|
44058
44063
|
togglePlayStop() {
|
|
44059
|
-
this.container.isPlaying() ? this.container.stop() : this.container.play();
|
|
44064
|
+
this.container.isPlaying() ? this.container.stop({ ui: true }) : this.container.play();
|
|
44060
44065
|
}
|
|
44061
44066
|
startSeekDrag(event) {
|
|
44062
44067
|
if (!this.settings.seekEnabled) {
|
|
@@ -44802,7 +44807,7 @@ class AudioTracks extends UICorePlugin {
|
|
|
44802
44807
|
static get version() {
|
|
44803
44808
|
return VERSION$7;
|
|
44804
44809
|
}
|
|
44805
|
-
static template = tmpl(pluginHtml$
|
|
44810
|
+
static template = tmpl(pluginHtml$6);
|
|
44806
44811
|
/**
|
|
44807
44812
|
* @internal
|
|
44808
44813
|
*/
|
|
@@ -44943,20 +44948,26 @@ class AudioTracks extends UICorePlugin {
|
|
|
44943
44948
|
}
|
|
44944
44949
|
}
|
|
44945
44950
|
|
|
44946
|
-
const
|
|
44951
|
+
const templateHtml$2 = "<div class=\"big-mute-icon-wrapper\" data-big-mute id=\"gplayer-big-mute-button\">\n <div class=\"big-mute-icon gcore-skin-border-color\" data-big-mute-icon id=\"gplayer-big-mute-icon\"></div>\n</div>\n";
|
|
44947
44952
|
|
|
44948
44953
|
const T$h = 'plugins.big_mute_button';
|
|
44949
44954
|
// TODO rewrite as a container plugin
|
|
44950
44955
|
/**
|
|
44951
|
-
* `PLUGIN` that displays a big mute button over the video when it's muted.
|
|
44952
|
-
* Once pressed, it unmutes the video.
|
|
44956
|
+
* `PLUGIN` that displays a big mute button over the video when it's being played muted.
|
|
44953
44957
|
* @beta
|
|
44958
|
+
* @remarks
|
|
44959
|
+
* When pressed, it unmutes the video.
|
|
44960
|
+
* @example
|
|
44961
|
+
* ```ts
|
|
44962
|
+
* import { BigMuteButton } from '@gcorevideo/player'
|
|
44963
|
+
* Player.registerPlugin(BigMuteButton)
|
|
44964
|
+
* ```
|
|
44954
44965
|
*/
|
|
44955
44966
|
class BigMuteButton extends UICorePlugin {
|
|
44956
|
-
|
|
44967
|
+
autoPlay = false;
|
|
44968
|
+
hidden = false;
|
|
44969
|
+
// TODO get back to the ads-related logic later
|
|
44957
44970
|
_adIsPlaying = false;
|
|
44958
|
-
$bigMuteBtnContainer = null;
|
|
44959
|
-
$bigMuteButton = null;
|
|
44960
44971
|
/**
|
|
44961
44972
|
* @internal
|
|
44962
44973
|
*/
|
|
@@ -44969,14 +44980,13 @@ class BigMuteButton extends UICorePlugin {
|
|
|
44969
44980
|
get supportedVersion() {
|
|
44970
44981
|
return { min: CLAPPR_VERSION$1 };
|
|
44971
44982
|
}
|
|
44972
|
-
static template = tmpl(
|
|
44983
|
+
static template = tmpl(templateHtml$2);
|
|
44973
44984
|
/**
|
|
44974
44985
|
* @internal
|
|
44975
44986
|
*/
|
|
44976
44987
|
get events() {
|
|
44977
44988
|
return {
|
|
44978
|
-
|
|
44979
|
-
'click .big-mute-icon-wrapper': 'destroyBigMuteBtn',
|
|
44989
|
+
click: 'clicked',
|
|
44980
44990
|
};
|
|
44981
44991
|
}
|
|
44982
44992
|
/**
|
|
@@ -44984,111 +44994,100 @@ class BigMuteButton extends UICorePlugin {
|
|
|
44984
44994
|
*/
|
|
44985
44995
|
bindEvents() {
|
|
44986
44996
|
this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
|
|
44997
|
+
this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
|
|
44987
44998
|
this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
|
|
44988
44999
|
this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
|
|
44989
|
-
trace(`${T$h} bindEvents`, {
|
|
44990
|
-
mediacontrol: !!this.core.mediaControl,
|
|
44991
|
-
});
|
|
44992
|
-
// TOOD use core.getPlugin('media_control')
|
|
44993
|
-
this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mediaControlRendered);
|
|
44994
45000
|
}
|
|
44995
|
-
onCoreReady() {
|
|
45001
|
+
onCoreReady() { }
|
|
45002
|
+
onContainerChanged() {
|
|
44996
45003
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_VOLUME, this.onContainerVolume);
|
|
44997
|
-
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_READY, this.onContainerStart);
|
|
44998
45004
|
this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_ENDED, this.onPlaybackEnded);
|
|
45005
|
+
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAY, this.onPlay);
|
|
45006
|
+
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_STOP, this.onStop);
|
|
45007
|
+
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PAUSE, this.onPause);
|
|
44999
45008
|
}
|
|
45000
|
-
|
|
45001
|
-
|
|
45002
|
-
|
|
45009
|
+
onPlay(_, { autoPlay }) {
|
|
45010
|
+
const container = this.core.activeContainer;
|
|
45011
|
+
const { volume } = container;
|
|
45012
|
+
const { wasMuted } = this.options;
|
|
45013
|
+
if (autoPlay) {
|
|
45014
|
+
this.autoPlay = true;
|
|
45015
|
+
}
|
|
45016
|
+
trace(`${T$h} onPlay`, {
|
|
45017
|
+
autoPlay: this.autoPlay,
|
|
45018
|
+
wasMuted,
|
|
45019
|
+
volume,
|
|
45020
|
+
});
|
|
45021
|
+
if (this.autoPlay && !wasMuted && volume === 0) {
|
|
45022
|
+
this.mount();
|
|
45023
|
+
}
|
|
45024
|
+
else {
|
|
45025
|
+
this.destroy();
|
|
45003
45026
|
}
|
|
45004
45027
|
}
|
|
45005
|
-
|
|
45006
|
-
|
|
45007
|
-
|
|
45028
|
+
onStop(_, { ui }) {
|
|
45029
|
+
trace(`${T$h} onStop`, { ui });
|
|
45030
|
+
if (ui) {
|
|
45031
|
+
this.destroy();
|
|
45008
45032
|
}
|
|
45009
45033
|
}
|
|
45010
|
-
|
|
45011
|
-
this.
|
|
45034
|
+
onPause() {
|
|
45035
|
+
this.destroy();
|
|
45012
45036
|
}
|
|
45013
|
-
|
|
45014
|
-
|
|
45015
|
-
|
|
45016
|
-
container: !!container,
|
|
45017
|
-
});
|
|
45018
|
-
if (container) {
|
|
45019
|
-
this.listenTo(container.playback, Events$1.PLAYBACK_PLAY, () => {
|
|
45020
|
-
trace(`${T$h} PLAYBACK_PLAY`);
|
|
45021
|
-
this.render();
|
|
45022
|
-
});
|
|
45037
|
+
onContainerVolume(value) {
|
|
45038
|
+
if (value !== 0) {
|
|
45039
|
+
this.destroy();
|
|
45023
45040
|
}
|
|
45024
45041
|
}
|
|
45042
|
+
onPlaybackEnded() {
|
|
45043
|
+
this.hide();
|
|
45044
|
+
}
|
|
45025
45045
|
onStartAd() {
|
|
45026
45046
|
this._adIsPlaying = true;
|
|
45027
|
-
|
|
45028
|
-
this.$bigMuteBtnContainer.addClass('hide');
|
|
45029
|
-
}
|
|
45047
|
+
this.hide();
|
|
45030
45048
|
}
|
|
45031
45049
|
onFinishAd() {
|
|
45032
45050
|
this._adIsPlaying = false;
|
|
45033
|
-
|
|
45034
|
-
this.$bigMuteBtnContainer.removeClass('hide');
|
|
45035
|
-
}
|
|
45036
|
-
}
|
|
45037
|
-
shouldRender() {
|
|
45038
|
-
const container = this.core.activeContainer;
|
|
45039
|
-
if (!container) {
|
|
45040
|
-
return false;
|
|
45041
|
-
}
|
|
45042
|
-
const { autoPlay, wasMuted } = this.options;
|
|
45043
|
-
const volume = container.volume;
|
|
45044
|
-
trace(`${T$h} shouldRender`, {
|
|
45045
|
-
autoPlay,
|
|
45046
|
-
wasMuted,
|
|
45047
|
-
volume,
|
|
45048
|
-
});
|
|
45049
|
-
return autoPlay && !wasMuted && volume === 0;
|
|
45051
|
+
this.show();
|
|
45050
45052
|
}
|
|
45051
45053
|
/**
|
|
45052
45054
|
* @internal
|
|
45053
45055
|
*/
|
|
45054
45056
|
render() {
|
|
45055
|
-
|
|
45056
|
-
|
|
45057
|
-
|
|
45058
|
-
|
|
45059
|
-
|
|
45060
|
-
this.$bigMuteBtnContainer = this.$el.find('.big-mute-icon-wrapper[data-big-mute]');
|
|
45061
|
-
this._adIsPlaying && this.$bigMuteBtnContainer.addClass('hide');
|
|
45062
|
-
this.$bigMuteButton = this.$bigMuteBtnContainer.find('.big-mute-icon');
|
|
45063
|
-
this.$bigMuteButton.append(volumeMuteIcon);
|
|
45064
|
-
const container = this.core.activeContainer;
|
|
45065
|
-
container.$el.append(this.$el.get(0));
|
|
45066
|
-
}
|
|
45057
|
+
trace(`${T$h} render`);
|
|
45058
|
+
this.$el.html(BigMuteButton.template());
|
|
45059
|
+
this.$el.find('#gplayer-big-mute-icon').append(volumeMuteIcon);
|
|
45060
|
+
// TODO
|
|
45061
|
+
// this._adIsPlaying && this.hide()
|
|
45067
45062
|
return this;
|
|
45068
45063
|
}
|
|
45069
|
-
|
|
45070
|
-
this.
|
|
45071
|
-
this
|
|
45064
|
+
mount() {
|
|
45065
|
+
this.core.activeContainer.$el.append(this.$el);
|
|
45066
|
+
this.show();
|
|
45072
45067
|
}
|
|
45073
|
-
|
|
45074
|
-
this.
|
|
45075
|
-
|
|
45076
|
-
this.$bigMuteBtnContainer.removeClass('hide');
|
|
45077
|
-
}
|
|
45068
|
+
hide() {
|
|
45069
|
+
this.hidden = true;
|
|
45070
|
+
this.$el.find('#gplayer-big-mute-button')?.addClass('hide');
|
|
45078
45071
|
}
|
|
45079
|
-
|
|
45080
|
-
this.
|
|
45081
|
-
|
|
45082
|
-
e.stopPropagation();
|
|
45083
|
-
}
|
|
45084
|
-
this.destroy();
|
|
45072
|
+
show() {
|
|
45073
|
+
this.hidden = false;
|
|
45074
|
+
this.$el.find('#gplayer-big-mute-button')?.removeClass('hide');
|
|
45085
45075
|
}
|
|
45086
45076
|
clicked(e) {
|
|
45077
|
+
trace(`${T$h} clicked`);
|
|
45078
|
+
const mediaControl = this.core.getPlugin('media_control');
|
|
45079
|
+
// TODO delegate to media_control plugin
|
|
45087
45080
|
const localVolume = Utils.Config.restore('volume');
|
|
45088
45081
|
const volume = !isNaN(localVolume) ? localVolume : 100;
|
|
45089
|
-
|
|
45090
|
-
|
|
45091
|
-
|
|
45082
|
+
const unmuted = volume === 0 ? 100 : volume;
|
|
45083
|
+
if (mediaControl) {
|
|
45084
|
+
mediaControl.setVolume(unmuted);
|
|
45085
|
+
}
|
|
45086
|
+
else {
|
|
45087
|
+
this.core.activeContainer.setVolume(unmuted);
|
|
45088
|
+
}
|
|
45089
|
+
e.stopPropagation?.();
|
|
45090
|
+
this.destroy();
|
|
45092
45091
|
}
|
|
45093
45092
|
}
|
|
45094
45093
|
|
|
@@ -45735,24 +45734,42 @@ const CMCD_KEYS = [
|
|
|
45735
45734
|
];
|
|
45736
45735
|
// const T = 'plugins.cmcd'
|
|
45737
45736
|
/**
|
|
45738
|
-
* A `PLUGIN` that configures CMCD for playback
|
|
45737
|
+
* A `PLUGIN` that configures {@link https://cdn.cta.tech/cta/media/media/resources/standards/pdfs/cta-5004-final.pdf | CMCD} for playback
|
|
45739
45738
|
* @beta
|
|
45740
45739
|
* @remarks
|
|
45741
|
-
* Configuration options
|
|
45742
|
-
*
|
|
45740
|
+
* Configuration options - {@link CmcdConfigOptions}.
|
|
45741
|
+
* @example
|
|
45742
|
+
* ```ts
|
|
45743
|
+
* import { CmcdConfig } from '@gcorevideo/player'
|
|
45744
|
+
* Player.registerPlugin(CmcdConfig)
|
|
45745
|
+
*
|
|
45746
|
+
* const player = new Player({
|
|
45747
|
+
* source: 'https://example.com/video.mp4',
|
|
45748
|
+
* cmcd: {
|
|
45749
|
+
* sessionId: '1234567890',
|
|
45750
|
+
* contentId: 'f572d396fae9206628714fb2ce00f72e94f2258f',
|
|
45751
|
+
* },
|
|
45752
|
+
* })
|
|
45753
|
+
* ```
|
|
45743
45754
|
*/
|
|
45744
45755
|
class CmcdConfig extends CorePlugin {
|
|
45745
45756
|
sid;
|
|
45746
45757
|
cid = '';
|
|
45747
45758
|
/**
|
|
45748
|
-
* @
|
|
45759
|
+
* @internal
|
|
45749
45760
|
*/
|
|
45750
45761
|
get name() {
|
|
45751
45762
|
return 'cmcd';
|
|
45752
45763
|
}
|
|
45764
|
+
/**
|
|
45765
|
+
* @internal
|
|
45766
|
+
*/
|
|
45753
45767
|
get version() {
|
|
45754
45768
|
return '0.1.0';
|
|
45755
45769
|
}
|
|
45770
|
+
/**
|
|
45771
|
+
* @internal
|
|
45772
|
+
*/
|
|
45756
45773
|
get supportedVersion() {
|
|
45757
45774
|
return CLAPPR_VERSION$1;
|
|
45758
45775
|
}
|
|
@@ -45762,11 +45779,16 @@ class CmcdConfig extends CorePlugin {
|
|
|
45762
45779
|
this.cid = this.options.cmcd?.contentId ?? this.generateContentId();
|
|
45763
45780
|
}
|
|
45764
45781
|
/**
|
|
45765
|
-
* @
|
|
45782
|
+
* @internal
|
|
45766
45783
|
*/
|
|
45767
45784
|
bindEvents() {
|
|
45768
45785
|
this.listenTo(this.core, Events$1.CORE_CONTAINERS_CREATED, () => this.updateSettings(this.core.containers[0]));
|
|
45769
45786
|
}
|
|
45787
|
+
/**
|
|
45788
|
+
* Returns the current `sid` and `cid` values.
|
|
45789
|
+
* Useful when the auto-generated values need to be known.
|
|
45790
|
+
* @returns `sid` and `cid` values
|
|
45791
|
+
*/
|
|
45770
45792
|
exportIds() {
|
|
45771
45793
|
return {
|
|
45772
45794
|
sid: this.sid,
|
|
@@ -45802,19 +45824,6 @@ class CmcdConfig extends CorePlugin {
|
|
|
45802
45824
|
break;
|
|
45803
45825
|
}
|
|
45804
45826
|
}
|
|
45805
|
-
updateHlsjsSettings(options, { cid, sid }) {
|
|
45806
|
-
$.extend(true, options, {
|
|
45807
|
-
playback: {
|
|
45808
|
-
hlsjsConfig: {
|
|
45809
|
-
cmcd: {
|
|
45810
|
-
includeKeys: CMCD_KEYS,
|
|
45811
|
-
sessionId: sid,
|
|
45812
|
-
contentId: cid,
|
|
45813
|
-
},
|
|
45814
|
-
},
|
|
45815
|
-
},
|
|
45816
|
-
});
|
|
45817
|
-
}
|
|
45818
45827
|
generateContentId() {
|
|
45819
45828
|
return new URL(this.core.options.source ?? this.core.options.sources[0].source).pathname.slice(0, 64);
|
|
45820
45829
|
}
|
|
@@ -48392,7 +48401,7 @@ class ClickToPause extends ContainerPlugin {
|
|
|
48392
48401
|
togglePlay(useStop) {
|
|
48393
48402
|
const isPlaying = this.container && this.container.isPlaying();
|
|
48394
48403
|
if (isPlaying) {
|
|
48395
|
-
useStop ? this.container.stop() : this.container.pause();
|
|
48404
|
+
useStop ? this.container.stop({ ui: true }) : this.container.pause();
|
|
48396
48405
|
}
|
|
48397
48406
|
else {
|
|
48398
48407
|
this.container.play();
|
|
@@ -48526,7 +48535,8 @@ class Clips extends UICorePlugin {
|
|
|
48526
48535
|
* @returns The text of the clip at the given time
|
|
48527
48536
|
*/
|
|
48528
48537
|
getText(time) {
|
|
48529
|
-
return this.clips.find((clip) => clip.start <= time && clip.end >= time)
|
|
48538
|
+
return this.clips.find((clip) => clip.start <= time && clip.end >= time)
|
|
48539
|
+
?.text;
|
|
48530
48540
|
}
|
|
48531
48541
|
onCoreReady() {
|
|
48532
48542
|
trace(`${T$d} onCoreReady`);
|
|
@@ -51322,6 +51332,7 @@ class SourceController extends CorePlugin {
|
|
|
51322
51332
|
currentSourceIndex = 0;
|
|
51323
51333
|
sourcesDelay = {};
|
|
51324
51334
|
active = false;
|
|
51335
|
+
autoPlay = false;
|
|
51325
51336
|
switching = false;
|
|
51326
51337
|
sync = noSync;
|
|
51327
51338
|
/**
|
|
@@ -51397,6 +51408,9 @@ class SourceController extends CorePlugin {
|
|
|
51397
51408
|
if (this.switching) {
|
|
51398
51409
|
return;
|
|
51399
51410
|
}
|
|
51411
|
+
// The autoPlay metadata flag is set between a call to play and the actual playback start event, after which the flag is cleared.
|
|
51412
|
+
this.autoPlay =
|
|
51413
|
+
!!this.core.activeContainer.actionsMetadata.playEvent?.autoPlay;
|
|
51400
51414
|
switch (error.code) {
|
|
51401
51415
|
case PlaybackErrorCode.MediaSourceUnavailable:
|
|
51402
51416
|
this.core.activeContainer?.getPlugin('poster')?.disable();
|
|
@@ -51415,6 +51429,12 @@ class SourceController extends CorePlugin {
|
|
|
51415
51429
|
this.core.activeContainer?.getPlugin('spinner')?.hide();
|
|
51416
51430
|
}
|
|
51417
51431
|
});
|
|
51432
|
+
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAY, (_, { autoPlay }) => {
|
|
51433
|
+
trace(`${T$4} onContainerPlay`, {
|
|
51434
|
+
autoPlay,
|
|
51435
|
+
});
|
|
51436
|
+
this.autoPlay = !!autoPlay;
|
|
51437
|
+
});
|
|
51418
51438
|
}
|
|
51419
51439
|
reset() {
|
|
51420
51440
|
this.active = false;
|
|
@@ -51432,17 +51452,20 @@ class SourceController extends CorePlugin {
|
|
|
51432
51452
|
trace(`${T$4} retryPlayback syncing...`, {
|
|
51433
51453
|
nextSource,
|
|
51434
51454
|
});
|
|
51435
|
-
const rnd = RETRY_DELAY_BLUR * Math.random();
|
|
51455
|
+
const rnd = Math.round(RETRY_DELAY_BLUR * Math.random());
|
|
51436
51456
|
this.sync(() => {
|
|
51437
|
-
trace(`${T$4} retryPlayback loading...`);
|
|
51438
51457
|
this.switching = false;
|
|
51439
51458
|
this.core.load(nextSource.source, nextSource.mimeType);
|
|
51440
51459
|
trace(`${T$4} retryPlayback loaded`, {
|
|
51441
51460
|
nextSource,
|
|
51442
51461
|
});
|
|
51443
51462
|
setTimeout(() => {
|
|
51444
|
-
|
|
51445
|
-
|
|
51463
|
+
trace(`${T$4} retryPlayback playing`, {
|
|
51464
|
+
autoPlay: this.autoPlay,
|
|
51465
|
+
});
|
|
51466
|
+
this.core.activeContainer.play({
|
|
51467
|
+
autoPlay: this.autoPlay,
|
|
51468
|
+
});
|
|
51446
51469
|
}, rnd);
|
|
51447
51470
|
});
|
|
51448
51471
|
});
|
package/dist/player.d.ts
CHANGED
|
@@ -109,15 +109,19 @@ export { AudioTracks as AudioSelector }
|
|
|
109
109
|
export { AudioTracks }
|
|
110
110
|
|
|
111
111
|
/**
|
|
112
|
-
* `PLUGIN` that displays a big mute button over the video when it's muted.
|
|
113
|
-
* Once pressed, it unmutes the video.
|
|
112
|
+
* `PLUGIN` that displays a big mute button over the video when it's being played muted.
|
|
114
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
|
+
* ```
|
|
115
121
|
*/
|
|
116
122
|
export declare class BigMuteButton extends UICorePlugin {
|
|
117
|
-
private
|
|
123
|
+
private hidden;
|
|
118
124
|
private _adIsPlaying;
|
|
119
|
-
private $bigMuteBtnContainer;
|
|
120
|
-
private $bigMuteButton;
|
|
121
125
|
/**
|
|
122
126
|
* @internal
|
|
123
127
|
*/
|
|
@@ -133,28 +137,26 @@ export declare class BigMuteButton extends UICorePlugin {
|
|
|
133
137
|
* @internal
|
|
134
138
|
*/
|
|
135
139
|
get events(): {
|
|
136
|
-
|
|
137
|
-
'click .big-mute-icon-wrapper': string;
|
|
140
|
+
click: string;
|
|
138
141
|
};
|
|
139
142
|
/**
|
|
140
143
|
* @internal
|
|
141
144
|
*/
|
|
142
145
|
bindEvents(): void;
|
|
143
146
|
private onCoreReady;
|
|
147
|
+
private onContainerChanged;
|
|
148
|
+
private onPlay;
|
|
144
149
|
private onContainerVolume;
|
|
145
|
-
private onContainerStart;
|
|
146
150
|
private onPlaybackEnded;
|
|
147
|
-
private mediaControlRendered;
|
|
148
151
|
private onStartAd;
|
|
149
152
|
private onFinishAd;
|
|
150
|
-
private shouldRender;
|
|
151
153
|
/**
|
|
152
154
|
* @internal
|
|
153
155
|
*/
|
|
154
156
|
render(): this;
|
|
155
|
-
private
|
|
156
|
-
private
|
|
157
|
-
private
|
|
157
|
+
private mount;
|
|
158
|
+
private hide;
|
|
159
|
+
private show;
|
|
158
160
|
private clicked;
|
|
159
161
|
}
|
|
160
162
|
|
|
@@ -302,6 +304,7 @@ export declare class BottomGear extends UICorePlugin {
|
|
|
302
304
|
private onCoreReady;
|
|
303
305
|
private onMediaControlRendered;
|
|
304
306
|
private mount;
|
|
307
|
+
private alignSubmenu;
|
|
305
308
|
}
|
|
306
309
|
|
|
307
310
|
/**
|
|
@@ -480,13 +483,17 @@ export declare type ClapprStatsMetrics = {
|
|
|
480
483
|
};
|
|
481
484
|
};
|
|
482
485
|
|
|
483
|
-
|
|
486
|
+
/**
|
|
487
|
+
* Config options for the {@link ClapprStats} plugin
|
|
488
|
+
* @beta
|
|
489
|
+
*/
|
|
490
|
+
export declare interface ClapprStatsSettings {
|
|
484
491
|
/**
|
|
485
492
|
* The interval in milliseconds of periodic measurements.
|
|
486
493
|
* The plugin will emit a {@link ClapprStatsEvents.REPORT} event with the collected metrics at the specified interval.
|
|
487
494
|
*/
|
|
488
495
|
runEach?: number;
|
|
489
|
-
}
|
|
496
|
+
}
|
|
490
497
|
|
|
491
498
|
/**
|
|
492
499
|
* A small `PLUGIN` that toggles the playback state on click over the video container
|
|
@@ -578,7 +585,7 @@ export declare class Clips extends UICorePlugin {
|
|
|
578
585
|
*/
|
|
579
586
|
export declare interface ClipsPluginSettings {
|
|
580
587
|
/**
|
|
581
|
-
* The compiled text of the clips description, one clip per line in format
|
|
588
|
+
* The compiled text of the clips description, one clip per line in format:
|
|
582
589
|
* `HH:MM:SS text` or `MM:SS text` or `SS text`
|
|
583
590
|
*/
|
|
584
591
|
text: string;
|
|
@@ -704,49 +711,72 @@ export declare type ClosedCaptionsPluginSettings = {
|
|
|
704
711
|
};
|
|
705
712
|
|
|
706
713
|
/**
|
|
707
|
-
* A `PLUGIN` that configures CMCD for playback
|
|
714
|
+
* A `PLUGIN` that configures {@link https://cdn.cta.tech/cta/media/media/resources/standards/pdfs/cta-5004-final.pdf | CMCD} for playback
|
|
708
715
|
* @beta
|
|
709
716
|
* @remarks
|
|
710
|
-
* Configuration options
|
|
711
|
-
*
|
|
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
|
+
* ```
|
|
712
731
|
*/
|
|
713
732
|
export declare class CmcdConfig extends CorePlugin {
|
|
714
733
|
private sid;
|
|
715
734
|
private cid;
|
|
716
735
|
/**
|
|
717
|
-
* @
|
|
736
|
+
* @internal
|
|
718
737
|
*/
|
|
719
738
|
get name(): string;
|
|
739
|
+
/**
|
|
740
|
+
* @internal
|
|
741
|
+
*/
|
|
720
742
|
get version(): string;
|
|
743
|
+
/**
|
|
744
|
+
* @internal
|
|
745
|
+
*/
|
|
721
746
|
get supportedVersion(): string;
|
|
722
747
|
constructor(core: Core);
|
|
723
748
|
/**
|
|
724
|
-
* @
|
|
749
|
+
* @internal
|
|
725
750
|
*/
|
|
726
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
|
+
*/
|
|
727
757
|
exportIds(): {
|
|
728
758
|
sid: string;
|
|
729
759
|
cid: string;
|
|
730
760
|
};
|
|
731
761
|
private updateSettings;
|
|
732
|
-
private updateHlsjsSettings;
|
|
733
762
|
private generateContentId;
|
|
734
763
|
}
|
|
735
764
|
|
|
736
765
|
/**
|
|
766
|
+
* Config options for the {@link CmcdConfig} plugin
|
|
737
767
|
* @beta
|
|
738
768
|
*/
|
|
739
|
-
export declare
|
|
769
|
+
export declare interface CmcdConfigOptions {
|
|
740
770
|
/**
|
|
741
|
-
*
|
|
771
|
+
* `sid` value. If ommitted, a random UUID will be generated
|
|
742
772
|
*/
|
|
743
|
-
sessionId
|
|
773
|
+
sessionId?: string;
|
|
744
774
|
/**
|
|
745
|
-
*
|
|
775
|
+
* `cid` value.
|
|
746
776
|
* If ommitted, the pathname part of the first source URL will be used
|
|
747
777
|
*/
|
|
748
778
|
contentId?: string;
|
|
749
|
-
}
|
|
779
|
+
}
|
|
750
780
|
|
|
751
781
|
/**
|
|
752
782
|
* @public
|
|
@@ -986,6 +1016,10 @@ export declare type ErrorScreenSettings = {
|
|
|
986
1016
|
noReload?: boolean;
|
|
987
1017
|
};
|
|
988
1018
|
|
|
1019
|
+
/**
|
|
1020
|
+
* Extended events for the {@link MediaControl} plugin
|
|
1021
|
+
* @beta
|
|
1022
|
+
*/
|
|
989
1023
|
export declare enum ExtendedEvents {
|
|
990
1024
|
MEDIACONTROL_VOLUME = "mediacontrol:volume",
|
|
991
1025
|
MEDIACONTROL_MENU_COLLAPSE = "mediacontrol:menu:collapse"
|
|
@@ -1287,6 +1321,13 @@ export declare class MediaControl extends UICorePlugin {
|
|
|
1287
1321
|
* Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
|
|
1288
1322
|
*/
|
|
1289
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;
|
|
1290
1331
|
/**
|
|
1291
1332
|
* Set the initial volume, which is preserved when playback is interrupted by an advertisement
|
|
1292
1333
|
*/
|
|
@@ -2348,7 +2389,11 @@ export declare class Poster extends UIContainerPlugin {
|
|
|
2348
2389
|
destroy(): this;
|
|
2349
2390
|
}
|
|
2350
2391
|
|
|
2351
|
-
|
|
2392
|
+
/**
|
|
2393
|
+
* Config options for the {@link Poster} plugin
|
|
2394
|
+
* @beta
|
|
2395
|
+
*/
|
|
2396
|
+
export declare interface PosterPluginSettings {
|
|
2352
2397
|
/**
|
|
2353
2398
|
* Custom CSS background
|
|
2354
2399
|
*/
|
|
@@ -2362,10 +2407,10 @@ export declare type PosterPluginSettings = {
|
|
|
2362
2407
|
*/
|
|
2363
2408
|
url?: string;
|
|
2364
2409
|
/**
|
|
2365
|
-
* Whether to show the poster after playback has ended
|
|
2410
|
+
* Whether to show the poster after playback has ended, by default `true`
|
|
2366
2411
|
*/
|
|
2367
2412
|
showOnVideoEnd?: boolean;
|
|
2368
|
-
}
|
|
2413
|
+
}
|
|
2369
2414
|
|
|
2370
2415
|
/**
|
|
2371
2416
|
* A level of quality within a media source/representation.
|
|
@@ -2706,6 +2751,7 @@ export declare class SourceController extends CorePlugin {
|
|
|
2706
2751
|
private currentSourceIndex;
|
|
2707
2752
|
private sourcesDelay;
|
|
2708
2753
|
private active;
|
|
2754
|
+
private autoPlay;
|
|
2709
2755
|
private switching;
|
|
2710
2756
|
private sync;
|
|
2711
2757
|
/**
|