@gcorevideo/player 2.28.30 → 2.28.35
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/core.js +1 -1
- package/dist/index.css +208 -208
- package/dist/index.embed.js +34 -21
- package/dist/index.js +93 -82
- package/docs/api/player.closedcaptionspluginsettings.md +1 -0
- package/docs/api/player.md +9 -0
- package/docs/api/player.mediacontrol.md +16 -0
- package/docs/api/player.thumbnails.md +1 -1
- package/lib/Player.d.ts.map +1 -1
- package/lib/plugins/subtitles/ClosedCaptions.d.ts +6 -2
- package/lib/plugins/subtitles/ClosedCaptions.d.ts.map +1 -1
- package/lib/plugins/subtitles/ClosedCaptions.js +37 -23
- package/package.json +4 -1
- package/src/Player.ts +12 -12
- package/src/plugins/subtitles/ClosedCaptions.ts +42 -28
- package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts +293 -6
- package/tsconfig.tsbuildinfo +1 -1
package/dist/index.js
CHANGED
|
@@ -12917,7 +12917,7 @@ var PlaybackEvents;
|
|
|
12917
12917
|
// https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
|
|
12918
12918
|
const AUTO$1 = -1;
|
|
12919
12919
|
const { now: now$2 } = Utils;
|
|
12920
|
-
const T$
|
|
12920
|
+
const T$e = 'playback.dash';
|
|
12921
12921
|
class DashPlayback extends BasePlayback {
|
|
12922
12922
|
_levels = [];
|
|
12923
12923
|
_currentLevel = AUTO$1;
|
|
@@ -13203,7 +13203,7 @@ class DashPlayback extends BasePlayback {
|
|
|
13203
13203
|
this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
|
|
13204
13204
|
}
|
|
13205
13205
|
_onPlaybackError = (event) => {
|
|
13206
|
-
trace(`${T$
|
|
13206
|
+
trace(`${T$e} _onPlaybackError`, { type: event.type, code: event.error.code, message: event.error.message });
|
|
13207
13207
|
};
|
|
13208
13208
|
_onDASHJSSError = (event) => {
|
|
13209
13209
|
this._stopTimeUpdateTimer();
|
|
@@ -50103,7 +50103,7 @@ const { now } = Utils;
|
|
|
50103
50103
|
const AUTO = -1;
|
|
50104
50104
|
const DEFAULT_RECOVER_ATTEMPTS = 16;
|
|
50105
50105
|
Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
|
|
50106
|
-
const T$
|
|
50106
|
+
const T$d = 'playback.hls';
|
|
50107
50107
|
class HlsPlayback extends BasePlayback {
|
|
50108
50108
|
_ccTracksUpdated = false;
|
|
50109
50109
|
_currentFragment = null;
|
|
@@ -50428,7 +50428,7 @@ class HlsPlayback extends BasePlayback {
|
|
|
50428
50428
|
}
|
|
50429
50429
|
else {
|
|
50430
50430
|
Log.error('hlsjs: failed to recover', { evt, data });
|
|
50431
|
-
trace(`${T$
|
|
50431
|
+
trace(`${T$d} _recover failed to recover`, {
|
|
50432
50432
|
type: data.type,
|
|
50433
50433
|
details: data.details,
|
|
50434
50434
|
});
|
|
@@ -50515,7 +50515,7 @@ class HlsPlayback extends BasePlayback {
|
|
|
50515
50515
|
this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
|
|
50516
50516
|
}
|
|
50517
50517
|
_onHLSJSError(evt, data) {
|
|
50518
|
-
trace(`${T$
|
|
50518
|
+
trace(`${T$d} _onHLSJSError`, {
|
|
50519
50519
|
fatal: data.fatal,
|
|
50520
50520
|
type: data.type,
|
|
50521
50521
|
details: data.details,
|
|
@@ -50563,7 +50563,7 @@ class HlsPlayback extends BasePlayback {
|
|
|
50563
50563
|
evt,
|
|
50564
50564
|
data,
|
|
50565
50565
|
});
|
|
50566
|
-
trace(`${T$
|
|
50566
|
+
trace(`${T$d} _onHLSJSError trying to recover from network error`, {
|
|
50567
50567
|
details: data.details,
|
|
50568
50568
|
});
|
|
50569
50569
|
error.level = PlayerError.Levels.WARN;
|
|
@@ -50576,7 +50576,7 @@ class HlsPlayback extends BasePlayback {
|
|
|
50576
50576
|
evt,
|
|
50577
50577
|
data,
|
|
50578
50578
|
});
|
|
50579
|
-
trace(`${T$
|
|
50579
|
+
trace(`${T$d} _onHLSJSError trying to recover from media error`, {
|
|
50580
50580
|
details: data.details,
|
|
50581
50581
|
});
|
|
50582
50582
|
error.level = PlayerError.Levels.WARN;
|
|
@@ -50606,7 +50606,7 @@ class HlsPlayback extends BasePlayback {
|
|
|
50606
50606
|
return;
|
|
50607
50607
|
}
|
|
50608
50608
|
Log.warn('hlsjs: non-fatal error occurred', { evt, data });
|
|
50609
|
-
trace(`${T$
|
|
50609
|
+
trace(`${T$d} _onHLSJSError non-fatal error occurred`, {
|
|
50610
50610
|
type: data.type,
|
|
50611
50611
|
details: data.details,
|
|
50612
50612
|
});
|
|
@@ -50947,7 +50947,7 @@ class HlsPlayback extends BasePlayback {
|
|
|
50947
50947
|
this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack));
|
|
50948
50948
|
}
|
|
50949
50949
|
_onAudioTrackSwitched(_, data) {
|
|
50950
|
-
trace(`${T$
|
|
50950
|
+
trace(`${T$d} onAudioTrackSwitched`);
|
|
50951
50951
|
// @ts-ignore
|
|
50952
50952
|
const track = this._hls.audioTracks[data.id];
|
|
50953
50953
|
this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
|
|
@@ -50988,7 +50988,7 @@ function toClapprTrack(t) {
|
|
|
50988
50988
|
};
|
|
50989
50989
|
}
|
|
50990
50990
|
|
|
50991
|
-
const T$
|
|
50991
|
+
const T$c = 'playback.html5_video';
|
|
50992
50992
|
const STALL_TIMEOUT = 15000;
|
|
50993
50993
|
class HTML5Video extends BasePlayback {
|
|
50994
50994
|
stallTimerId = null;
|
|
@@ -51089,7 +51089,7 @@ class HTML5Video extends BasePlayback {
|
|
|
51089
51089
|
switchAudioTrack(id) {
|
|
51090
51090
|
const tracks = this.el.audioTracks;
|
|
51091
51091
|
const supported = !!tracks;
|
|
51092
|
-
trace(`${T$
|
|
51092
|
+
trace(`${T$c} switchAudioTrack`, {
|
|
51093
51093
|
supported,
|
|
51094
51094
|
});
|
|
51095
51095
|
if (supported) {
|
|
@@ -51108,7 +51108,7 @@ function registerPlaybacks() {
|
|
|
51108
51108
|
Loader.registerPlayback(DashPlayback);
|
|
51109
51109
|
}
|
|
51110
51110
|
|
|
51111
|
-
const T$
|
|
51111
|
+
const T$b = 'gplayer';
|
|
51112
51112
|
const DEFAULT_OPTIONS = {
|
|
51113
51113
|
autoPlay: false,
|
|
51114
51114
|
debug: 'none',
|
|
@@ -51444,7 +51444,7 @@ class Player {
|
|
|
51444
51444
|
}
|
|
51445
51445
|
}
|
|
51446
51446
|
triggerAutoPlay() {
|
|
51447
|
-
trace(`${T$
|
|
51447
|
+
trace(`${T$b} triggerAutoPlay`);
|
|
51448
51448
|
setTimeout(() => {
|
|
51449
51449
|
this.player?.play({
|
|
51450
51450
|
autoPlay: true,
|
|
@@ -51462,7 +51462,7 @@ class Player {
|
|
|
51462
51462
|
// TODO test
|
|
51463
51463
|
events = {
|
|
51464
51464
|
onReady: () => {
|
|
51465
|
-
trace(`${T$
|
|
51465
|
+
trace(`${T$b} onReady`, {
|
|
51466
51466
|
ready: this.ready,
|
|
51467
51467
|
});
|
|
51468
51468
|
if (this.ready) {
|
|
@@ -51496,7 +51496,7 @@ class Player {
|
|
|
51496
51496
|
buildCoreOptions(rootNode) {
|
|
51497
51497
|
const sources = this.buildMediaSourcesList();
|
|
51498
51498
|
const source = sources[0];
|
|
51499
|
-
trace(`${T$
|
|
51499
|
+
trace(`${T$b} buildCoreOptions`, {
|
|
51500
51500
|
source,
|
|
51501
51501
|
sources,
|
|
51502
51502
|
});
|
|
@@ -51573,7 +51573,7 @@ class Player {
|
|
|
51573
51573
|
}
|
|
51574
51574
|
}
|
|
51575
51575
|
|
|
51576
|
-
var version$1 = "2.28.
|
|
51576
|
+
var version$1 = "2.28.35";
|
|
51577
51577
|
|
|
51578
51578
|
var packages = {
|
|
51579
51579
|
"node_modules/@clappr/core": {
|
|
@@ -52006,7 +52006,7 @@ const INITIAL_SETTINGS = {
|
|
|
52006
52006
|
default: [],
|
|
52007
52007
|
seekEnabled: false,
|
|
52008
52008
|
};
|
|
52009
|
-
const T$
|
|
52009
|
+
const T$a = 'plugins.media_control';
|
|
52010
52010
|
/**
|
|
52011
52011
|
* Extended events for the {@link MediaControl} plugin
|
|
52012
52012
|
* @public
|
|
@@ -52299,7 +52299,7 @@ class MediaControl extends UICorePlugin {
|
|
|
52299
52299
|
* Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
|
|
52300
52300
|
*/
|
|
52301
52301
|
enable() {
|
|
52302
|
-
trace(`${T$
|
|
52302
|
+
trace(`${T$a} enable`, {
|
|
52303
52303
|
chromeless: this.options.chromeless,
|
|
52304
52304
|
userDisabled: this.userDisabled,
|
|
52305
52305
|
});
|
|
@@ -52456,7 +52456,7 @@ class MediaControl extends UICorePlugin {
|
|
|
52456
52456
|
this.$el.removeClass('w370');
|
|
52457
52457
|
this.$el.removeClass('w270');
|
|
52458
52458
|
this.verticalVolume = false;
|
|
52459
|
-
trace(`${T$
|
|
52459
|
+
trace(`${T$a} playerResize`, {
|
|
52460
52460
|
size,
|
|
52461
52461
|
width: this.container.$el.width(),
|
|
52462
52462
|
height: this.container.$el.height(),
|
|
@@ -53458,7 +53458,7 @@ class AudioTracks extends UICorePlugin {
|
|
|
53458
53458
|
|
|
53459
53459
|
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";
|
|
53460
53460
|
|
|
53461
|
-
const T$
|
|
53461
|
+
const T$9 = 'plugins.big_mute_button';
|
|
53462
53462
|
// TODO rewrite as a container plugin
|
|
53463
53463
|
/**
|
|
53464
53464
|
* `PLUGIN` that displays a big mute button over the video when it's being played muted.
|
|
@@ -53521,7 +53521,7 @@ class BigMuteButton extends UICorePlugin {
|
|
|
53521
53521
|
if (autoPlay) {
|
|
53522
53522
|
this.autoPlay = true;
|
|
53523
53523
|
}
|
|
53524
|
-
trace(`${T$
|
|
53524
|
+
trace(`${T$9} onPlay`, {
|
|
53525
53525
|
autoPlay: this.autoPlay,
|
|
53526
53526
|
wasMuted,
|
|
53527
53527
|
volume,
|
|
@@ -53535,7 +53535,7 @@ class BigMuteButton extends UICorePlugin {
|
|
|
53535
53535
|
}
|
|
53536
53536
|
onStop(_, metadata) {
|
|
53537
53537
|
const ui = metadata?.ui;
|
|
53538
|
-
trace(`${T$
|
|
53538
|
+
trace(`${T$9} onStop`, { ui });
|
|
53539
53539
|
if (ui) {
|
|
53540
53540
|
this.destroy();
|
|
53541
53541
|
}
|
|
@@ -56499,7 +56499,7 @@ const PLAYBACK_NAMES = {
|
|
|
56499
56499
|
hls: 'HLS.js',
|
|
56500
56500
|
html5_video: 'Native',
|
|
56501
56501
|
};
|
|
56502
|
-
const T$
|
|
56502
|
+
const T$8 = 'plugins.nerd_stats';
|
|
56503
56503
|
/**
|
|
56504
56504
|
* `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
|
|
56505
56505
|
* @public
|
|
@@ -56636,7 +56636,7 @@ class NerdStats extends UICorePlugin {
|
|
|
56636
56636
|
return super.destroy();
|
|
56637
56637
|
}
|
|
56638
56638
|
toggle = () => {
|
|
56639
|
-
trace(`${T$
|
|
56639
|
+
trace(`${T$8} toggle`, {
|
|
56640
56640
|
open: this.open,
|
|
56641
56641
|
});
|
|
56642
56642
|
if (this.open) {
|
|
@@ -56656,14 +56656,14 @@ class NerdStats extends UICorePlugin {
|
|
|
56656
56656
|
})
|
|
56657
56657
|
.catch((e) => {
|
|
56658
56658
|
reportError(e);
|
|
56659
|
-
trace(`${T$
|
|
56659
|
+
trace(`${T$8} speedtest error`, {
|
|
56660
56660
|
error: e,
|
|
56661
56661
|
});
|
|
56662
56662
|
this.disable();
|
|
56663
56663
|
});
|
|
56664
56664
|
}
|
|
56665
56665
|
hide() {
|
|
56666
|
-
trace(`${T$
|
|
56666
|
+
trace(`${T$8} hide`);
|
|
56667
56667
|
this.$el.hide();
|
|
56668
56668
|
this.open = false;
|
|
56669
56669
|
stopSpeedtest();
|
|
@@ -57396,7 +57396,7 @@ const reloadIcon = "<svg fill=\"#FFFFFF\" height=\"24\" viewBox=\"0 0 24 24\" wi
|
|
|
57396
57396
|
|
|
57397
57397
|
const templateHtml = "<div class=\"player-error-screen__content\" data-error-screen>\n <% if (icon) { %>\n <div class=\"player-error-screen__icon\" data-error-screen><%= icon %></div>\n <% } %>\n <div class=\"player-error-screen__title\" data-error-screen><%= title %></div>\n <% if (message) { %>\n <div class=\"player-error-screen__message\" data-error-screen><%= message %></div>\n <% } %>\n <% if (code) { %>\n <div class=\"player-error-screen__code\" data-error-screen><%= i18n.t('error_code') %>: <%= code %></div>\n <% } %>\n <% if (reloadIcon) { %>\n <div class=\"player-error-screen__reload\" data-error-screen><%= reloadIcon %></div>\n <% } %>\n</div>\n";
|
|
57398
57398
|
|
|
57399
|
-
const T$
|
|
57399
|
+
const T$7 = 'plugins.error_screen';
|
|
57400
57400
|
/**
|
|
57401
57401
|
* `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
|
|
57402
57402
|
* @public
|
|
@@ -57448,11 +57448,11 @@ class ErrorScreen extends UICorePlugin {
|
|
|
57448
57448
|
this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
|
|
57449
57449
|
}
|
|
57450
57450
|
onPlay() {
|
|
57451
|
-
trace(`${T$
|
|
57451
|
+
trace(`${T$7} onPlay`);
|
|
57452
57452
|
this.unmount();
|
|
57453
57453
|
}
|
|
57454
57454
|
unmount() {
|
|
57455
|
-
trace(`${T$
|
|
57455
|
+
trace(`${T$7} unmount`);
|
|
57456
57456
|
this.err = null;
|
|
57457
57457
|
this.$el.remove();
|
|
57458
57458
|
}
|
|
@@ -57465,7 +57465,7 @@ class ErrorScreen extends UICorePlugin {
|
|
|
57465
57465
|
};
|
|
57466
57466
|
}
|
|
57467
57467
|
reload() {
|
|
57468
|
-
trace(`${T$
|
|
57468
|
+
trace(`${T$7} reload`);
|
|
57469
57469
|
setTimeout(() => {
|
|
57470
57470
|
this.core.configure({
|
|
57471
57471
|
reloading: true,
|
|
@@ -57488,7 +57488,7 @@ class ErrorScreen extends UICorePlugin {
|
|
|
57488
57488
|
}
|
|
57489
57489
|
}
|
|
57490
57490
|
onError(err) {
|
|
57491
|
-
trace(`${T$
|
|
57491
|
+
trace(`${T$7} onError`, { err });
|
|
57492
57492
|
if (err.UI) {
|
|
57493
57493
|
if (this.err) {
|
|
57494
57494
|
this.unmount();
|
|
@@ -57973,7 +57973,7 @@ const streamsMomentoIcon = "<svg id=\"Слой_1\" data-name=\"Слой 1\" xmln
|
|
|
57973
57973
|
const streamsWhiteNightsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"50\" height=\"50\" viewBox=\"0 0 50 50\">\n <defs>\n <clipPath id=\"clip-Icon\">\n <rect width=\"50\" height=\"50\"/>\n </clipPath>\n </defs>\n <g id=\"Icon\" clip-path=\"url(#clip-Icon)\">\n <g id=\"icon2\" transform=\"translate(-0.041 0)\">\n <path id=\"Контур_77\" data-name=\"Контур 77\" d=\"M6.493,13v8.266h6.275V19.74H8.31V17.714h4.006V16.3H8.31V14.53h4.365V13Zm7.5,0v8.266h1.7V15.732h.023l3.438,5.534h1.818V13h-1.7v5.545h-.023L15.8,13Z\" fill=\"#fff\"/>\n <path id=\"Контур_76\" data-name=\"Контур 76\" d=\"M29.949,29.1V26.774H31.94a1.4,1.4,0,0,1,.938.272,1.1,1.1,0,0,1,.313.874,1.155,1.155,0,0,1-.313.9,1.375,1.375,0,0,1-.938.278ZM28.132,25.36v8.266h1.817V30.4h1.818a1.353,1.353,0,0,1,.984.3,1.637,1.637,0,0,1,.394.949c.046.333.079.681.1,1.042a3.2,3.2,0,0,0,.185.938h1.819a1.218,1.218,0,0,1-.191-.423,3.611,3.611,0,0,1-.093-.527c-.019-.185-.033-.367-.041-.544s-.016-.332-.023-.463a5.052,5.052,0,0,0-.087-.625,2.109,2.109,0,0,0-.2-.573,1.586,1.586,0,0,0-.359-.451,1.414,1.414,0,0,0-.556-.284v-.023a1.926,1.926,0,0,0,1-.81,2.494,2.494,0,0,0,.307-1.262,2.308,2.308,0,0,0-.165-.88,2.128,2.128,0,0,0-.486-.724,2.3,2.3,0,0,0-.764-.492,2.67,2.67,0,0,0-1-.179ZM43.506,30.5V25.36H41.689V30.5a2.065,2.065,0,0,1-.37,1.36,1.7,1.7,0,0,1-1.343.434,2.086,2.086,0,0,1-.886-.156,1.283,1.283,0,0,1-.758-.978,3.748,3.748,0,0,1-.058-.66V25.36H36.456V30.5a3.16,3.16,0,0,0,.92,2.5,3.807,3.807,0,0,0,2.6.81,3.82,3.82,0,0,0,2.593-.816,3.132,3.132,0,0,0,.937-2.492Z\" fill=\"#fff\"/>\n <path id=\"Контур_80\" data-name=\"Контур 80\" d=\"M22.646,31.2H4.689a4.505,4.505,0,0,1-4.5-4.5V8.5A4.505,4.505,0,0,1,4.689,4h18.2a4.505,4.505,0,0,1,4.5,4.5v8.445l-.893.1a3.184,3.184,0,0,0-2.846,3.177V30.5l-.465.7ZM4.689,6a2.5,2.5,0,0,0-2.5,2.5V26.7a2.5,2.5,0,0,0,2.5,2.5H21.65V20.22a5.18,5.18,0,0,1,3.739-4.992V8.5a2.5,2.5,0,0,0-2.5-2.5Z\" fill=\"#fff\"/>\n <path id=\"Контур_81\" data-name=\"Контур 81\" d=\"M30.127,47.884a1,1,0,0,1-1-1V43.267H26.846a5.206,5.206,0,0,1-5.2-5.2V20.222a5.206,5.206,0,0,1,5.2-5.2H44.692a5.206,5.206,0,0,1,5.2,5.2V38.068a5.206,5.206,0,0,1-5.2,5.2H35.058l-4.216,4.316A1,1,0,0,1,30.127,47.884ZM26.846,17.022a3.2,3.2,0,0,0-3.2,3.2V38.067a3.2,3.2,0,0,0,3.2,3.2h3.281a1,1,0,0,1,1,1v2.162l2.8-2.86a1,1,0,0,1,.715-.3H44.692a3.2,3.2,0,0,0,3.2-3.2V20.222a3.2,3.2,0,0,0-3.2-3.2Z\" fill=\"#fff\"/>\n </g>\n </g>\n</svg>\n";
|
|
57974
57974
|
|
|
57975
57975
|
const VERSION$4 = '0.0.1';
|
|
57976
|
-
const T$
|
|
57976
|
+
const T$6 = 'plugins.multicamera';
|
|
57977
57977
|
/**
|
|
57978
57978
|
* `PLUGIN` that adds support for loading multiple streams and switching between them using the media control UI.
|
|
57979
57979
|
* @beta
|
|
@@ -58130,7 +58130,7 @@ class MultiCamera extends UICorePlugin {
|
|
|
58130
58130
|
onCameraSelect(event) {
|
|
58131
58131
|
const value = event.currentTarget.dataset
|
|
58132
58132
|
.multicameraSelectorSelect;
|
|
58133
|
-
trace(`${T$
|
|
58133
|
+
trace(`${T$6} onCameraSelect`, { value });
|
|
58134
58134
|
if (value !== undefined) {
|
|
58135
58135
|
this.changeById(parseInt(value, 10));
|
|
58136
58136
|
}
|
|
@@ -58256,13 +58256,13 @@ class MultiCamera extends UICorePlugin {
|
|
|
58256
58256
|
}
|
|
58257
58257
|
}
|
|
58258
58258
|
changeById(id) {
|
|
58259
|
-
trace(`${T$
|
|
58259
|
+
trace(`${T$6} changeById`, { id });
|
|
58260
58260
|
queueMicrotask(() => {
|
|
58261
58261
|
const playbackOptions = this.core.options.playback || {};
|
|
58262
58262
|
// TODO figure out what this does
|
|
58263
58263
|
playbackOptions.recycleVideo = Browser.isMobile;
|
|
58264
58264
|
this.currentCamera = this.findElementById(id) ?? null;
|
|
58265
|
-
trace(`${T$
|
|
58265
|
+
trace(`${T$6} changeById`, {
|
|
58266
58266
|
id,
|
|
58267
58267
|
currentCamera: this.currentCamera,
|
|
58268
58268
|
multicamera: this.multicamera,
|
|
@@ -58283,7 +58283,7 @@ class MultiCamera extends UICorePlugin {
|
|
|
58283
58283
|
// TODO remove?
|
|
58284
58284
|
// for html5 playback:
|
|
58285
58285
|
this.options.dvrEnabled = this.currentCamera.dvr;
|
|
58286
|
-
trace(`${T$
|
|
58286
|
+
trace(`${T$6} changeById`, { currentCamera: this.currentCamera });
|
|
58287
58287
|
// TODO
|
|
58288
58288
|
this.core.configure({
|
|
58289
58289
|
playback: playbackOptions,
|
|
@@ -58346,7 +58346,7 @@ const pipIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"no
|
|
|
58346
58346
|
const buttonHtml$2 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n <%= pipIcon %>\n</button>\n";
|
|
58347
58347
|
|
|
58348
58348
|
const VERSION$3 = '0.0.1';
|
|
58349
|
-
const T$
|
|
58349
|
+
const T$5 = `plugins.pip`;
|
|
58350
58350
|
/**
|
|
58351
58351
|
* `PLUGIN` that enables picture-in-picture mode.
|
|
58352
58352
|
* @public
|
|
@@ -58404,7 +58404,7 @@ class PictureInPicture extends UICorePlugin {
|
|
|
58404
58404
|
});
|
|
58405
58405
|
}
|
|
58406
58406
|
isPiPSupported() {
|
|
58407
|
-
trace(`${T$
|
|
58407
|
+
trace(`${T$5} isPiPSupported`, {
|
|
58408
58408
|
pictureInPictureEnabled: !!document.pictureInPictureEnabled,
|
|
58409
58409
|
requestPictureInPicture: !!HTMLVideoElement.prototype.requestPictureInPicture,
|
|
58410
58410
|
});
|
|
@@ -58426,7 +58426,7 @@ class PictureInPicture extends UICorePlugin {
|
|
|
58426
58426
|
return this;
|
|
58427
58427
|
}
|
|
58428
58428
|
togglePictureInPicture() {
|
|
58429
|
-
trace(`${T$
|
|
58429
|
+
trace(`${T$5} togglePictureInPicture`);
|
|
58430
58430
|
if (this.videoElement !== document.pictureInPictureElement) {
|
|
58431
58431
|
this.requestPictureInPicture();
|
|
58432
58432
|
}
|
|
@@ -58435,13 +58435,13 @@ class PictureInPicture extends UICorePlugin {
|
|
|
58435
58435
|
}
|
|
58436
58436
|
}
|
|
58437
58437
|
requestPictureInPicture() {
|
|
58438
|
-
trace(`${T$
|
|
58438
|
+
trace(`${T$5} requestPictureInPicture`, {
|
|
58439
58439
|
videoElement: !!this.videoElement,
|
|
58440
58440
|
});
|
|
58441
58441
|
this.videoElement.requestPictureInPicture();
|
|
58442
58442
|
}
|
|
58443
58443
|
exitPictureInPicture() {
|
|
58444
|
-
trace(`${T$
|
|
58444
|
+
trace(`${T$5} exitPictureInPicture`);
|
|
58445
58445
|
document.exitPictureInPicture();
|
|
58446
58446
|
}
|
|
58447
58447
|
}
|
|
@@ -58468,7 +58468,7 @@ const DEFAULT_PLAYBACK_RATES = [
|
|
|
58468
58468
|
{ value: 2.0, label: '2x' },
|
|
58469
58469
|
];
|
|
58470
58470
|
const DEFAULT_PLAYBACK_RATE = 1;
|
|
58471
|
-
const T$
|
|
58471
|
+
const T$4 = 'plugins.playback_rate';
|
|
58472
58472
|
/**
|
|
58473
58473
|
* `PLUGIN` that allows changing the playback speed of the video.
|
|
58474
58474
|
* @public
|
|
@@ -58554,7 +58554,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
58554
58554
|
this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
|
|
58555
58555
|
}
|
|
58556
58556
|
onCoreReady() {
|
|
58557
|
-
trace(`${T$
|
|
58557
|
+
trace(`${T$4} onCoreReady`);
|
|
58558
58558
|
const mediaControl = this.core.getPlugin('media_control');
|
|
58559
58559
|
assert(mediaControl, 'media_control plugin is required');
|
|
58560
58560
|
const gear = this.core.getPlugin('bottom_gear');
|
|
@@ -58563,7 +58563,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
58563
58563
|
this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered);
|
|
58564
58564
|
}
|
|
58565
58565
|
onActiveContainerChange() {
|
|
58566
|
-
trace(`${T$
|
|
58566
|
+
trace(`${T$4} onActiveContainerChange`);
|
|
58567
58567
|
this.metadataLoaded = false;
|
|
58568
58568
|
this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_STOP, this.onStop);
|
|
58569
58569
|
this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_PLAY, this.onPlay);
|
|
@@ -58571,15 +58571,15 @@ class PlaybackRate extends UICorePlugin {
|
|
|
58571
58571
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_LOADEDMETADATA, this.onMetaDataLoaded);
|
|
58572
58572
|
}
|
|
58573
58573
|
onMediaControlRendered() {
|
|
58574
|
-
trace(`${T$
|
|
58574
|
+
trace(`${T$4} onMediaControlRendered`);
|
|
58575
58575
|
this.render();
|
|
58576
58576
|
}
|
|
58577
58577
|
onGearRendered() {
|
|
58578
|
-
trace(`${T$
|
|
58578
|
+
trace(`${T$4} onGearRendered`);
|
|
58579
58579
|
this.mount();
|
|
58580
58580
|
}
|
|
58581
58581
|
mount() {
|
|
58582
|
-
trace(`${T$
|
|
58582
|
+
trace(`${T$4} mount`, {
|
|
58583
58583
|
shouldMount: this.shouldMount(),
|
|
58584
58584
|
});
|
|
58585
58585
|
if (!this.shouldMount()) {
|
|
@@ -58596,7 +58596,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
58596
58596
|
})));
|
|
58597
58597
|
}
|
|
58598
58598
|
onMetaDataLoaded() {
|
|
58599
|
-
trace(`${T$
|
|
58599
|
+
trace(`${T$4} onMetaDataLoaded`, {
|
|
58600
58600
|
playbackType: this.core.activePlayback.getPlaybackType(),
|
|
58601
58601
|
dvrEnabled: this.core.activePlayback.dvrEnabled,
|
|
58602
58602
|
});
|
|
@@ -58618,7 +58618,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
58618
58618
|
this.core.activePlayback?.setPlaybackRate(this.selectedRate);
|
|
58619
58619
|
}
|
|
58620
58620
|
else {
|
|
58621
|
-
trace(`${T$
|
|
58621
|
+
trace(`${T$4} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
|
|
58622
58622
|
playbackRate,
|
|
58623
58623
|
selectedRate: this.selectedRate,
|
|
58624
58624
|
});
|
|
@@ -58681,13 +58681,13 @@ class PlaybackRate extends UICorePlugin {
|
|
|
58681
58681
|
}
|
|
58682
58682
|
}
|
|
58683
58683
|
syncRate() {
|
|
58684
|
-
trace(`${T$
|
|
58684
|
+
trace(`${T$4} syncRate`, {
|
|
58685
58685
|
selectedRate: this.selectedRate,
|
|
58686
58686
|
});
|
|
58687
58687
|
this.core.activePlayback?.setPlaybackRate(this.selectedRate);
|
|
58688
58688
|
}
|
|
58689
58689
|
resetPlaybackRate() {
|
|
58690
|
-
trace(`${T$
|
|
58690
|
+
trace(`${T$4} resetPlaybackRate`, {
|
|
58691
58691
|
selectedRate: this.selectedRate,
|
|
58692
58692
|
});
|
|
58693
58693
|
this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
|
|
@@ -58722,7 +58722,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
58722
58722
|
?.label || `x${rate}`);
|
|
58723
58723
|
}
|
|
58724
58724
|
highlightCurrentRate() {
|
|
58725
|
-
trace(`${T$
|
|
58725
|
+
trace(`${T$4} highlightCurrentRate`, {
|
|
58726
58726
|
selectedRate: this.selectedRate,
|
|
58727
58727
|
});
|
|
58728
58728
|
this.allRateElements().removeClass('current');
|
|
@@ -59758,7 +59758,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
|
|
|
59758
59758
|
}
|
|
59759
59759
|
}
|
|
59760
59760
|
|
|
59761
|
-
const T$
|
|
59761
|
+
const T$3 = 'plugins.source_controller';
|
|
59762
59762
|
const INITIAL_RETRY_DELAY = 1000;
|
|
59763
59763
|
const MAX_RETRY_DELAY = 5000;
|
|
59764
59764
|
const RETRY_DELAY_BLUR = 500;
|
|
@@ -59934,7 +59934,7 @@ class SourceController extends CorePlugin {
|
|
|
59934
59934
|
}
|
|
59935
59935
|
bindContainerEventListeners() {
|
|
59936
59936
|
this.core.activePlayback.on(Events$1.PLAYBACK_ERROR, (error) => {
|
|
59937
|
-
trace(`${T$
|
|
59937
|
+
trace(`${T$3} on PLAYBACK_ERROR`, {
|
|
59938
59938
|
error: {
|
|
59939
59939
|
code: error?.code,
|
|
59940
59940
|
description: error?.description,
|
|
@@ -59958,7 +59958,7 @@ class SourceController extends CorePlugin {
|
|
|
59958
59958
|
}
|
|
59959
59959
|
});
|
|
59960
59960
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAY, (_, { autoPlay }) => {
|
|
59961
|
-
trace(`${T$
|
|
59961
|
+
trace(`${T$3} onContainerPlay`, {
|
|
59962
59962
|
autoPlay,
|
|
59963
59963
|
currentSource: this.sourcesList[this.currentSourceIndex],
|
|
59964
59964
|
retrying: this.active,
|
|
@@ -59976,7 +59976,7 @@ class SourceController extends CorePlugin {
|
|
|
59976
59976
|
this.sourcesDelay = {};
|
|
59977
59977
|
}
|
|
59978
59978
|
retryPlayback() {
|
|
59979
|
-
trace(`${T$
|
|
59979
|
+
trace(`${T$3} retryPlayback enter`, {
|
|
59980
59980
|
currentSourceIndex: this.currentSourceIndex,
|
|
59981
59981
|
currentSource: this.sourcesList[this.currentSourceIndex],
|
|
59982
59982
|
});
|
|
@@ -59984,18 +59984,18 @@ class SourceController extends CorePlugin {
|
|
|
59984
59984
|
this.switching = true;
|
|
59985
59985
|
this.core.activeContainer?.getPlugin('spinner')?.show(0);
|
|
59986
59986
|
this.getNextMediaSource().then((nextSource) => {
|
|
59987
|
-
trace(`${T$
|
|
59987
|
+
trace(`${T$3} retryPlayback syncing...`, {
|
|
59988
59988
|
nextSource,
|
|
59989
59989
|
});
|
|
59990
59990
|
const rnd = Math.round(RETRY_DELAY_BLUR * Math.random());
|
|
59991
59991
|
this.sync(() => {
|
|
59992
59992
|
this.switching = false;
|
|
59993
59993
|
this.core.load(nextSource.source, nextSource.mimeType);
|
|
59994
|
-
trace(`${T$
|
|
59994
|
+
trace(`${T$3} retryPlayback loaded`, {
|
|
59995
59995
|
nextSource,
|
|
59996
59996
|
});
|
|
59997
59997
|
setTimeout(() => {
|
|
59998
|
-
trace(`${T$
|
|
59998
|
+
trace(`${T$3} retryPlayback playing`, {
|
|
59999
59999
|
autoPlay: this.autoPlay,
|
|
60000
60000
|
nextSource,
|
|
60001
60001
|
});
|
|
@@ -60033,8 +60033,6 @@ const comboboxHTML = "<button\n class='media-control-button media-control-ico
|
|
|
60033
60033
|
const stringHTML = "<div class=\"gplayer-cc-line\" id=\"gplayer-cc-line\">\n <p></p>\n</div>\n";
|
|
60034
60034
|
|
|
60035
60035
|
const VERSION = '2.19.14';
|
|
60036
|
-
const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
|
|
60037
|
-
const T$3 = 'plugins.cc';
|
|
60038
60036
|
/**
|
|
60039
60037
|
* `PLUGIN` that provides a UI to select the subtitles when available.
|
|
60040
60038
|
* @public
|
|
@@ -60071,9 +60069,10 @@ const T$3 = 'plugins.cc';
|
|
|
60071
60069
|
* ```
|
|
60072
60070
|
*/
|
|
60073
60071
|
class ClosedCaptions extends UICorePlugin {
|
|
60074
|
-
|
|
60072
|
+
isSelectedApplied = false;
|
|
60075
60073
|
active = false;
|
|
60076
60074
|
open = false;
|
|
60075
|
+
userSelectedItemId = -1;
|
|
60077
60076
|
track = null;
|
|
60078
60077
|
tracks = [];
|
|
60079
60078
|
$line = null;
|
|
@@ -60171,10 +60170,9 @@ class ClosedCaptions extends UICorePlugin {
|
|
|
60171
60170
|
video.classList.remove('ios-fullscreen');
|
|
60172
60171
|
}
|
|
60173
60172
|
});
|
|
60174
|
-
this.
|
|
60173
|
+
this.isSelectedApplied = false;
|
|
60175
60174
|
}
|
|
60176
60175
|
onPlaybackReady() {
|
|
60177
|
-
trace(`${T$3} onPlaybackReady`);
|
|
60178
60176
|
this.core.activePlayback.oncueenter = (e) => {
|
|
60179
60177
|
this.setSubtitleText(e.text);
|
|
60180
60178
|
};
|
|
@@ -60195,7 +60193,7 @@ class ClosedCaptions extends UICorePlugin {
|
|
|
60195
60193
|
this.activateTrack(id);
|
|
60196
60194
|
}
|
|
60197
60195
|
activateTrack(id) {
|
|
60198
|
-
if (['dash', 'hls'].includes(this.core.activePlayback
|
|
60196
|
+
if (this.core.activePlayback && ['dash', 'hls'].includes(this.core.activePlayback.name)) {
|
|
60199
60197
|
this.core.activePlayback.setTextTrack(id);
|
|
60200
60198
|
return;
|
|
60201
60199
|
}
|
|
@@ -60233,7 +60231,7 @@ class ClosedCaptions extends UICorePlugin {
|
|
|
60233
60231
|
try {
|
|
60234
60232
|
// TODO ensure to apply only once
|
|
60235
60233
|
this.currentTracks = this.core.activePlayback.closedCaptionsTracks;
|
|
60236
|
-
this.
|
|
60234
|
+
this.applySelectedSubtitles();
|
|
60237
60235
|
this.render();
|
|
60238
60236
|
}
|
|
60239
60237
|
catch (error) {
|
|
@@ -60340,22 +60338,36 @@ class ClosedCaptions extends UICorePlugin {
|
|
|
60340
60338
|
}
|
|
60341
60339
|
onItemSelect(event) {
|
|
60342
60340
|
// event.target does not exist for some reason in tests
|
|
60343
|
-
const id = (event.target ?? event.currentTarget).dataset?.item ??
|
|
60344
|
-
'-1';
|
|
60345
|
-
|
|
60346
|
-
|
|
60341
|
+
const id = Number((event.target ?? event.currentTarget).dataset?.item ??
|
|
60342
|
+
'-1');
|
|
60343
|
+
// TODO review, make configurable, and emit event in addition
|
|
60344
|
+
// localStorage.setItem(LOCAL_STORAGE_CC_ID, id) // TODO store language instead?
|
|
60345
|
+
this.userSelectedItemId = id;
|
|
60346
|
+
this.selectItem(this.findById(id));
|
|
60347
60347
|
this.hideMenu();
|
|
60348
60348
|
return false;
|
|
60349
60349
|
}
|
|
60350
|
-
|
|
60351
|
-
if (
|
|
60352
|
-
|
|
60353
|
-
|
|
60354
|
-
|
|
60355
|
-
|
|
60356
|
-
|
|
60357
|
-
|
|
60350
|
+
applySelectedSubtitles() {
|
|
60351
|
+
if (this.isSelectedApplied) {
|
|
60352
|
+
return;
|
|
60353
|
+
}
|
|
60354
|
+
this.isSelectedApplied = true;
|
|
60355
|
+
// If user selected a language, activate that
|
|
60356
|
+
// Otherwise, if there is no configured language, then let the engine decide
|
|
60357
|
+
// To hide the subtitles initially forcefully, set the language to 'none'
|
|
60358
|
+
let matcher;
|
|
60359
|
+
if (this.userSelectedItemId !== -1) {
|
|
60360
|
+
matcher = (track) => track.id === this.userSelectedItemId;
|
|
60358
60361
|
}
|
|
60362
|
+
else if (this.preselectedLanguage) {
|
|
60363
|
+
matcher = (track) => this.isPreselectedLanguage(track.track.language);
|
|
60364
|
+
}
|
|
60365
|
+
else {
|
|
60366
|
+
return;
|
|
60367
|
+
}
|
|
60368
|
+
setTimeout(() => {
|
|
60369
|
+
this.selectItem(this.tracks.find(matcher) ?? null);
|
|
60370
|
+
}, 0);
|
|
60359
60371
|
}
|
|
60360
60372
|
hideMenu() {
|
|
60361
60373
|
this.open = false;
|
|
@@ -60389,10 +60401,9 @@ class ClosedCaptions extends UICorePlugin {
|
|
|
60389
60401
|
return this.$el.find('#gplayer-cc-menu li'); // TODO fix semantically
|
|
60390
60402
|
}
|
|
60391
60403
|
selectSubtitles() {
|
|
60392
|
-
|
|
60393
|
-
|
|
60394
|
-
|
|
60395
|
-
// this.core.activePlayback.closedCaptionsTrackId = -1
|
|
60404
|
+
if (this.currentTrack) {
|
|
60405
|
+
this.core.activePlayback.closedCaptionsTrackId = this.currentTrack.id;
|
|
60406
|
+
}
|
|
60396
60407
|
}
|
|
60397
60408
|
getSubtitleText(track) {
|
|
60398
60409
|
const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
|
package/docs/api/player.md
CHANGED
|
@@ -274,6 +274,22 @@ Mounts a media control element at a specific location
|
|
|
274
274
|
Set the initial volume, which is preserved when playback is interrupted by an advertisement
|
|
275
275
|
|
|
276
276
|
|
|
277
|
+
</td></tr>
|
|
278
|
+
<tr><td>
|
|
279
|
+
|
|
280
|
+
[setKeepVisible(keepVisible)](./player.mediacontrol.setkeepvisible.md)
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
</td><td>
|
|
284
|
+
|
|
285
|
+
|
|
286
|
+
</td><td>
|
|
287
|
+
|
|
288
|
+
Set or reset the keep visibility state
|
|
289
|
+
|
|
290
|
+
Keep visibility state controls whether the media control is hidden automatically after a delay, which is a default behaviour.
|
|
291
|
+
|
|
292
|
+
|
|
277
293
|
</td></tr>
|
|
278
294
|
<tr><td>
|
|
279
295
|
|
|
@@ -15,7 +15,7 @@ export declare class Thumbnails extends UICorePlugin
|
|
|
15
15
|
|
|
16
16
|
## Remarks
|
|
17
17
|
|
|
18
|
-
The plugin needs specially crafted VTT file with a thumbnail sprite sheet to work. The VTT
|
|
18
|
+
The plugin needs specially crafted VTT file with a thumbnail sprite sheet to work. The VTT cues refer to a thumbnail, an area within the sprite sheet, to associate with a time span.
|
|
19
19
|
|
|
20
20
|
Configuration options - [ThumbnailsPluginSettings](./player.thumbnailspluginsettings.md)
|
|
21
21
|
|