@gcorevideo/player 2.22.1 → 2.22.3
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 +1427 -1427
- package/dist/index.js +111 -33
- package/dist/player.d.ts +243 -95
- package/dist/plugins/index.css +350 -350
- package/dist/plugins/index.js +111 -33
- package/docs/api/player.bottomgear.additem.md +95 -0
- package/docs/api/player.bottomgear.md +63 -19
- package/docs/api/player.bottomgear.refresh.md +5 -1
- package/docs/api/player.clapprnerdstats.md +0 -2
- package/docs/api/player.clicktopause.md +1 -1
- package/docs/api/player.closedcaptions.md +2 -2
- package/docs/api/player.closedcaptionspluginsettings.md +5 -0
- package/docs/api/player.errorscreen.md +18 -4
- package/docs/api/player.errorscreenpluginsettings.md +1 -4
- package/docs/api/player.errorscreensettings.md +15 -0
- package/docs/api/{player.mediacontrolevents.md → player.gearevents.md} +7 -7
- package/docs/api/player.levelselector.events.md +0 -1
- package/docs/api/player.levelselector.md +1 -1
- package/docs/api/player.md +33 -36
- package/docs/api/{player.bottomgear.setcontent.md → player.mediacontrol.handlecustomarea.md} +5 -9
- package/docs/api/player.mediacontrol.md +15 -1
- package/docs/api/player.mediacontrol.putelement.md +2 -2
- package/docs/api/player.mediacontrol.toggleelement.md +2 -4
- package/docs/api/player.mediacontrolelement.md +1 -1
- package/docs/api/player.playbackrate.md +22 -3
- package/docs/api/{player.gearoptionsitem.md → player.playbackrateoption.md} +6 -4
- package/docs/api/player.playbackratesettings.md +20 -0
- package/docs/api/player.sourcecontroller._constructor_.md +49 -0
- package/docs/api/player.sourcecontroller.md +70 -7
- package/docs/api/player.spinnerevents.md +1 -4
- package/docs/api/player.spinnerthreebounce._constructor_.md +0 -3
- package/docs/api/player.spinnerthreebounce.hide.md +0 -3
- package/docs/api/player.spinnerthreebounce.md +6 -9
- package/docs/api/player.spinnerthreebounce.show.md +2 -5
- package/lib/index.plugins.d.ts +1 -0
- package/lib/index.plugins.d.ts.map +1 -1
- package/lib/index.plugins.js +1 -0
- package/lib/internal.types.d.ts +5 -0
- package/lib/internal.types.d.ts.map +1 -1
- package/lib/playback.types.d.ts +0 -5
- package/lib/playback.types.d.ts.map +1 -1
- package/lib/plugins/bottom-gear/BottomGear.d.ts +35 -13
- package/lib/plugins/bottom-gear/BottomGear.d.ts.map +1 -1
- package/lib/plugins/bottom-gear/BottomGear.js +35 -3
- package/lib/plugins/click-to-pause/ClickToPause.d.ts +1 -1
- package/lib/plugins/click-to-pause/ClickToPause.d.ts.map +1 -1
- package/lib/plugins/click-to-pause/ClickToPause.js +3 -2
- package/lib/plugins/error-screen/ErrorScreen.d.ts +29 -4
- package/lib/plugins/error-screen/ErrorScreen.d.ts.map +1 -1
- package/lib/plugins/error-screen/ErrorScreen.js +17 -2
- package/lib/plugins/media-control/MediaControl.d.ts +0 -11
- package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
- package/lib/plugins/media-control/MediaControl.js +0 -12
- package/lib/plugins/source-controller/SourceController.d.ts +40 -4
- package/lib/plugins/source-controller/SourceController.d.ts.map +1 -1
- package/lib/plugins/source-controller/SourceController.js +41 -4
- package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts +9 -6
- package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts.map +1 -1
- package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.js +11 -6
- package/lib/plugins/subtitles/ClosedCaptions.d.ts +7 -7
- package/lib/plugins/subtitles/ClosedCaptions.d.ts.map +1 -1
- package/lib/plugins/subtitles/ClosedCaptions.js +2 -2
- package/package.json +1 -1
- package/src/index.plugins.ts +1 -0
- package/src/internal.types.ts +6 -0
- package/src/playback.types.ts +0 -5
- package/src/plugins/bottom-gear/BottomGear.ts +35 -16
- package/src/plugins/click-to-pause/ClickToPause.ts +3 -2
- package/src/plugins/error-screen/ErrorScreen.ts +30 -4
- package/src/plugins/media-control/MediaControl.ts +0 -12
- package/src/plugins/source-controller/SourceController.ts +41 -4
- package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts +11 -6
- package/src/plugins/subtitles/ClosedCaptions.ts +8 -9
- package/temp/player.api.json +260 -299
- package/tsconfig.tsbuildinfo +1 -1
- package/assets/bottom-gear/bottomgear copy.ejs +0 -10
- package/docs/api/player.bottomgear.getelement.md +0 -56
- package/docs/api/player.gearitemelement.md +0 -18
- package/docs/api/player.subtitlespluginsettings.md +0 -18
- package/docs/api/player.texttrackitem.id.md +0 -11
- package/docs/api/player.texttrackitem.md +0 -87
- package/docs/api/player.texttrackitem.name.md +0 -11
- package/docs/api/player.texttrackitem.track.md +0 -11
package/dist/plugins/index.js
CHANGED
|
@@ -10100,16 +10100,24 @@ const gearIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"n
|
|
|
10100
10100
|
const gearHdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_28_1567)\">\n <path\n d=\"M19.14 12.94C19.18 12.64 19.2 12.33 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.16 9.47999C21.34 9.33999 21.39 9.06999 21.28 8.86999L19.36 5.54999C19.24 5.32999 18.99 5.25999 18.77 5.32999L16.38 6.28999C15.88 5.90999 15.35 5.58999 14.76 5.34999L14.4 2.80999C14.36 2.56999 14.16 2.39999 13.92 2.39999H10.08C9.83999 2.39999 9.64999 2.56999 9.60999 2.80999L9.24999 5.34999C8.65999 5.58999 8.11999 5.91999 7.62999 6.28999L5.23999 5.32999C5.01999 5.24999 4.76999 5.32999 4.64999 5.54999L2.73999 8.86999C2.61999 9.07999 2.65999 9.33999 2.85999 9.47999L4.88999 11.06C4.83999 11.36 4.79999 11.69 4.79999 12C4.79999 12.31 4.81999 12.64 4.86999 12.94L2.83999 14.52C2.65999 14.66 2.60999 14.93 2.71999 15.13L4.63999 18.45C4.75999 18.67 5.00999 18.74 5.22999 18.67L7.61999 17.71C8.11999 18.09 8.64999 18.41 9.23999 18.65L9.59999 21.19C9.64999 21.43 9.83999 21.6 10.08 21.6H13.92C14.16 21.6 14.36 21.43 14.39 21.19L14.75 18.65C15.34 18.41 15.88 18.09 16.37 17.71L18.76 18.67C18.98 18.75 19.23 18.67 19.35 18.45L21.27 15.13C21.39 14.91 21.34 14.66 21.15 14.52L19.14 12.94ZM12 15.6C10.02 15.6 8.39999 13.98 8.39999 12C8.39999 10.02 10.02 8.39999 12 8.39999C13.98 8.39999 15.6 10.02 15.6 12C15.6 13.98 13.98 15.6 12 15.6Z\"\n fill=\"#C9C9C9\"/>\n <rect x=\"13\" width=\"11\" height=\"7\" rx=\"1\" fill=\"#F6413B\"/>\n <path\n d=\"M14.6962 6V1.63636H15.3546V3.53267H17.53V1.63636H18.1905V6H17.53V4.0973H15.3546V6H14.6962ZM20.562 6H19.1493V1.63636H20.6067C21.0343 1.63636 21.4015 1.72372 21.7083 1.89844C22.0151 2.07173 22.2502 2.32102 22.4135 2.64631C22.5783 2.97017 22.6607 3.35866 22.6607 3.81179C22.6607 4.26634 22.5776 4.65696 22.4114 4.98366C22.2466 5.31037 22.008 5.56179 21.6955 5.73793C21.383 5.91264 21.0051 6 20.562 6ZM19.8077 5.42472H20.5257C20.8581 5.42472 21.1344 5.36222 21.3546 5.23722C21.5748 5.1108 21.7395 4.92827 21.8489 4.68963C21.9583 4.44957 22.013 4.15696 22.013 3.81179C22.013 3.46946 21.9583 3.17898 21.8489 2.94034C21.7409 2.7017 21.5797 2.5206 21.3652 2.39702C21.1507 2.27344 20.8844 2.21165 20.5662 2.21165H19.8077V5.42472Z\"\n fill=\"#C9C9C9\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_28_1567\">\n <rect width=\"24\" height=\"24\" fill=\"white\"/>\n </clipPath>\n </defs>\n</svg>\n";
|
|
10101
10101
|
|
|
10102
10102
|
const VERSION$5 = '2.19.12';
|
|
10103
|
+
/**
|
|
10104
|
+
* Events triggered by the plugin
|
|
10105
|
+
* @beta
|
|
10106
|
+
*/
|
|
10103
10107
|
var GearEvents;
|
|
10104
10108
|
(function (GearEvents) {
|
|
10109
|
+
/**
|
|
10110
|
+
* Use this event to accurately attach an item to the gear menu
|
|
10111
|
+
*/
|
|
10105
10112
|
GearEvents["RENDERED"] = "rendered";
|
|
10106
10113
|
})(GearEvents || (GearEvents = {}));
|
|
10107
10114
|
// TODO disabled if no items added
|
|
10108
10115
|
/**
|
|
10109
|
-
* `PLUGIN` that adds
|
|
10116
|
+
* `PLUGIN` that adds a button to extend the media controls UI with extra options.
|
|
10110
10117
|
* @beta
|
|
10111
10118
|
* @remarks
|
|
10112
|
-
* The
|
|
10119
|
+
* The plugin renders small gear icon to the right of the media controls.
|
|
10120
|
+
* It provides a base for attaching custom settings UI in the gear menu
|
|
10113
10121
|
*
|
|
10114
10122
|
* Depends on:
|
|
10115
10123
|
*
|
|
@@ -10216,6 +10224,28 @@ class BottomGear extends UICorePlugin {
|
|
|
10216
10224
|
this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
|
|
10217
10225
|
this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
|
|
10218
10226
|
}
|
|
10227
|
+
/**
|
|
10228
|
+
* Adds a custom option to the gear menu
|
|
10229
|
+
* @param name - A unique name of the option
|
|
10230
|
+
* @param $subMenu - The submenu to attach to the option
|
|
10231
|
+
* @returns The added item placeholder to attach custom markup
|
|
10232
|
+
* @remarks
|
|
10233
|
+
* When called with $submenu param, a click on the added item will toggle the submenu visibility.
|
|
10234
|
+
*
|
|
10235
|
+
* When added without submenu, it's responsibility of the caller to handle the click event however needed.
|
|
10236
|
+
* @example
|
|
10237
|
+
* ```ts
|
|
10238
|
+
* class MyPlugin extends UICorePlugin {
|
|
10239
|
+
* override render() {
|
|
10240
|
+
* this.$el.html('<div class="my-awesome-settings">...</div>')
|
|
10241
|
+
* this.core.getPlugin('bottom_gear')
|
|
10242
|
+
* ?.addItem('custom', this.$el)
|
|
10243
|
+
* .html($('<button>Custom settings</button>'))
|
|
10244
|
+
* return this
|
|
10245
|
+
* }
|
|
10246
|
+
* }
|
|
10247
|
+
* ```
|
|
10248
|
+
*/
|
|
10219
10249
|
addItem(name, $subMenu) {
|
|
10220
10250
|
const $existingItem = this.$el.find(`#gear-options li[data-${name}`);
|
|
10221
10251
|
if ($existingItem.length) {
|
|
@@ -10268,7 +10298,9 @@ class BottomGear extends UICorePlugin {
|
|
|
10268
10298
|
return this;
|
|
10269
10299
|
}
|
|
10270
10300
|
/**
|
|
10271
|
-
* Collapses any submenu open back to the gear menu
|
|
10301
|
+
* Collapses any submenu open back to the gear menu.
|
|
10302
|
+
* @remarks
|
|
10303
|
+
* Should be called by the UI plugin that added a gear item with a submenu when the latter is closed (e.g., when a "back" button is clicked).
|
|
10272
10304
|
*/
|
|
10273
10305
|
refresh() {
|
|
10274
10306
|
this.$el.find('.gear-sub-menu-wrapper').hide();
|
|
@@ -13037,11 +13069,12 @@ class ClapprStats extends ContainerPlugin {
|
|
|
13037
13069
|
// ClapprStats.REPORT_EVENT = 'clappr:stats:report';
|
|
13038
13070
|
// ClapprStats.PERCENTAGE_EVENT = 'clappr:stats:percentage';
|
|
13039
13071
|
|
|
13040
|
-
//
|
|
13072
|
+
// This work is based on the original work of the following authors:
|
|
13073
|
+
// Copyright 2014 Globo.com Player authors. All rights reserved.
|
|
13041
13074
|
// Use of this source code is governed by a BSD-style
|
|
13042
13075
|
// license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE.
|
|
13043
13076
|
/**
|
|
13044
|
-
* `PLUGIN` that
|
|
13077
|
+
* A small `PLUGIN` that toggles the playback state on click over the video container
|
|
13045
13078
|
* @beta
|
|
13046
13079
|
*/
|
|
13047
13080
|
class ClickToPause extends ContainerPlugin {
|
|
@@ -13325,7 +13358,7 @@ class ClipsPlugin extends UICorePlugin {
|
|
|
13325
13358
|
|
|
13326
13359
|
const templateHtml$1 = "<ul class=\"context-menu-list\">\n <% if(options) { %>\n <% for (var i = 0; i < options.length; i++) { %>\n <li class=\"context-menu-list-item <%= options[i].class %>\"\n data-<%= options[i].name %>><%= options[i].label %></li>\n <% } %>\n <% } %>\n</ul>\n";
|
|
13327
13360
|
|
|
13328
|
-
var version$1 = "2.22.
|
|
13361
|
+
var version$1 = "2.22.3";
|
|
13329
13362
|
|
|
13330
13363
|
var packages = {
|
|
13331
13364
|
"node_modules/@clappr/core": {
|
|
@@ -13563,8 +13596,23 @@ const templateHtml = "<div class=\"player-error-screen__content\" data-error-scr
|
|
|
13563
13596
|
|
|
13564
13597
|
const T$b = 'plugins.error_screen';
|
|
13565
13598
|
/**
|
|
13566
|
-
* `PLUGIN` that displays errors nicely in the overlay on top of the player.
|
|
13567
|
-
* @
|
|
13599
|
+
* `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
|
|
13600
|
+
* @public
|
|
13601
|
+
* @remarks
|
|
13602
|
+
* A fatal error is an error that prevents the player from playing the content.
|
|
13603
|
+
* It's usually a network error that persists after multiple retries.
|
|
13604
|
+
*
|
|
13605
|
+
* The error screen should not be confused with the content stub that is shown when no media sources are available.
|
|
13606
|
+
* This can happen due to the lack of the support of the given sources type or because the sources are misconfigured (e.g., omitted).
|
|
13607
|
+
*
|
|
13608
|
+
* Configuration options - {@link ErrorScreenPluginSettings}
|
|
13609
|
+
*
|
|
13610
|
+
* @example
|
|
13611
|
+
* ```ts
|
|
13612
|
+
* import { ErrorScreen, Player } from '@gcorevideo/player'
|
|
13613
|
+
*
|
|
13614
|
+
* Player.registerPlugin(ErrorScreen)
|
|
13615
|
+
* ```
|
|
13568
13616
|
*/
|
|
13569
13617
|
class ErrorScreen extends UICorePlugin {
|
|
13570
13618
|
err = null;
|
|
@@ -14599,18 +14647,6 @@ const DEFAULT_SETTINGS = {
|
|
|
14599
14647
|
default: [],
|
|
14600
14648
|
seekEnabled: true,
|
|
14601
14649
|
};
|
|
14602
|
-
/**
|
|
14603
|
-
* Custom events emitted by the plugins to communicate with one another
|
|
14604
|
-
* @beta
|
|
14605
|
-
* @deprecated
|
|
14606
|
-
*/
|
|
14607
|
-
var MediaControlEvents;
|
|
14608
|
-
(function (MediaControlEvents) {
|
|
14609
|
-
/**
|
|
14610
|
-
* Emitted when the gear menu is rendered
|
|
14611
|
-
*/
|
|
14612
|
-
MediaControlEvents["MEDIACONTROL_GEAR_RENDERED"] = "mediacontrol:gear:rendered";
|
|
14613
|
-
})(MediaControlEvents || (MediaControlEvents = {}));
|
|
14614
14650
|
const T$9 = 'plugins.media_control';
|
|
14615
14651
|
const LEFT_ORDER = [
|
|
14616
14652
|
'playpause',
|
|
@@ -17105,27 +17141,30 @@ var PlaybackErrorCode;
|
|
|
17105
17141
|
|
|
17106
17142
|
const spinnerHTML = "<div data-bounce1></div>\n<div data-bounce2></div>\n<div data-bounce3></div>\n";
|
|
17107
17143
|
|
|
17144
|
+
// This work is based on the original work of Globo.com
|
|
17108
17145
|
// Copyright 2014 Globo.com Player authors. All rights reserved.
|
|
17109
17146
|
// Use of this source code is governed by a BSD-style
|
|
17110
17147
|
// license that can be found in the LICENSE file.
|
|
17148
|
+
// https://github.com/clappr/clappr-plugins/blob/ffaa9d27005fa5a8a7c243ffc47eb5655b84b371/LICENSE
|
|
17111
17149
|
const T$4 = 'plugins.spinner';
|
|
17112
17150
|
/**
|
|
17113
17151
|
* Custom events emitted by the plugin
|
|
17114
|
-
* @
|
|
17152
|
+
* @public
|
|
17115
17153
|
*/
|
|
17116
17154
|
var SpinnerEvents;
|
|
17117
17155
|
(function (SpinnerEvents) {
|
|
17118
17156
|
/**
|
|
17119
17157
|
* Emitted at the end of the spinner animation cycle to facilitate smooth UI updates,
|
|
17120
|
-
*
|
|
17158
|
+
* for instance, {@link SourceController} listens to this event to reload the source when the spinner is hidden
|
|
17121
17159
|
*/
|
|
17122
17160
|
SpinnerEvents["SYNC"] = "plugins:spinner:sync";
|
|
17123
17161
|
})(SpinnerEvents || (SpinnerEvents = {}));
|
|
17124
17162
|
/**
|
|
17125
|
-
* `PLUGIN` that shows a pending operation indicator when playback is buffering or in a similar state
|
|
17126
|
-
* @
|
|
17163
|
+
* `PLUGIN` that shows a pending operation indicator when playback is buffering or in a similar state.
|
|
17164
|
+
* @public
|
|
17127
17165
|
* @remarks
|
|
17128
|
-
*
|
|
17166
|
+
* It is aliased as `Spinner` for convenience.
|
|
17167
|
+
* Events emitted - {@link SpinnerEvents}
|
|
17129
17168
|
* Other plugins can use {@link SpinnerThreeBounce.show | show} and {@link SpinnerThreeBounce.hide | hide} methods to
|
|
17130
17169
|
* implement custom pending/progress indication scenarios.
|
|
17131
17170
|
*/
|
|
@@ -17196,7 +17235,9 @@ class SpinnerThreeBounce extends UIContainerPlugin {
|
|
|
17196
17235
|
/**
|
|
17197
17236
|
* Shows the spinner.
|
|
17198
17237
|
*
|
|
17199
|
-
*
|
|
17238
|
+
* The method call prevents spinner's built-in logic from automatically hiding it until {@link SpinnerThreeBounce.hide} is called
|
|
17239
|
+
*
|
|
17240
|
+
* @param delay - The delay in milliseconds before the spinner is shown.
|
|
17200
17241
|
*/
|
|
17201
17242
|
show(delay = 300) {
|
|
17202
17243
|
this.userShown = true;
|
|
@@ -17262,11 +17303,47 @@ function noSync(cb) {
|
|
|
17262
17303
|
queueMicrotask(cb);
|
|
17263
17304
|
}
|
|
17264
17305
|
/**
|
|
17265
|
-
* `PLUGIN` that is
|
|
17266
|
-
* @
|
|
17306
|
+
* `PLUGIN` that is managing the automatic failover between media sources.
|
|
17307
|
+
* @public
|
|
17267
17308
|
* @remarks
|
|
17268
17309
|
* Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
|
|
17269
|
-
* on how sources ordering and selection works.
|
|
17310
|
+
* on how sources ordering and selection works. Below is a simplified diagram:
|
|
17311
|
+
*
|
|
17312
|
+
* ```markdown
|
|
17313
|
+
* sources_list:
|
|
17314
|
+
* - a.mpd | +--------------------+
|
|
17315
|
+
* - b.m3u8 |--->| init |
|
|
17316
|
+
* - ... | |--------------------|
|
|
17317
|
+
* | current_source = 0 |
|
|
17318
|
+
* +--------------------+
|
|
17319
|
+
* |
|
|
17320
|
+
* | source = a.mpd
|
|
17321
|
+
* | playback = dash.js
|
|
17322
|
+
* v
|
|
17323
|
+
* +------------------+
|
|
17324
|
+
* +-->| load source |
|
|
17325
|
+
* | +---------|--------+
|
|
17326
|
+
* | v
|
|
17327
|
+
* | +------------------+
|
|
17328
|
+
* | | play |
|
|
17329
|
+
* | +---------|--------+
|
|
17330
|
+
* | |
|
|
17331
|
+
* | v
|
|
17332
|
+
* | +-----------------------+
|
|
17333
|
+
* | | on playback_error |
|
|
17334
|
+
* | |-----------------------|
|
|
17335
|
+
* | | current_source = |
|
|
17336
|
+
* | | (current_source + 1) |
|
|
17337
|
+
* | | % len sources_list |
|
|
17338
|
+
* | | |
|
|
17339
|
+
* | | delay 1..3s |
|
|
17340
|
+
* | +---------------|-------+
|
|
17341
|
+
* | |
|
|
17342
|
+
* | source=b.m3u8 |
|
|
17343
|
+
* | playback=hls.js |
|
|
17344
|
+
* +-------------------+
|
|
17345
|
+
*
|
|
17346
|
+
* ```
|
|
17270
17347
|
*
|
|
17271
17348
|
* This plugin does not expose any public methods apart from required by the Clappr plugin interface.
|
|
17272
17349
|
* It is supposed to work autonomously.
|
|
@@ -17316,6 +17393,7 @@ class SourceController extends CorePlugin {
|
|
|
17316
17393
|
* | playback=hls.js |
|
|
17317
17394
|
* +-------------------+
|
|
17318
17395
|
*
|
|
17396
|
+
* As can be seen from the diagram, the plugin will endless try to load the next sources rotating between them in round-robin manner.
|
|
17319
17397
|
*/
|
|
17320
17398
|
sourcesList = [];
|
|
17321
17399
|
currentSourceIndex = 0;
|
|
@@ -17336,7 +17414,7 @@ class SourceController extends CorePlugin {
|
|
|
17336
17414
|
return { min: CLAPPR_VERSION };
|
|
17337
17415
|
}
|
|
17338
17416
|
/**
|
|
17339
|
-
* @
|
|
17417
|
+
* @param core - The Clappr core instance.
|
|
17340
17418
|
*/
|
|
17341
17419
|
constructor(core) {
|
|
17342
17420
|
super(core);
|
|
@@ -17471,7 +17549,7 @@ const T$2 = 'plugins.cc';
|
|
|
17471
17549
|
* @beta
|
|
17472
17550
|
*
|
|
17473
17551
|
* @remarks
|
|
17474
|
-
* The plugin is activated when closed captions tracks are
|
|
17552
|
+
* The plugin is activated when closed captions tracks are detected in the media source.
|
|
17475
17553
|
* It shows a familiar "CC" button with a dropdown menu to select the subtitles language.
|
|
17476
17554
|
*
|
|
17477
17555
|
* Depends on:
|
|
@@ -17488,7 +17566,7 @@ const T$2 = 'plugins.cc';
|
|
|
17488
17566
|
* new Player({
|
|
17489
17567
|
* ...
|
|
17490
17568
|
* cc: {
|
|
17491
|
-
* language: '
|
|
17569
|
+
* language: 'pt-BR',
|
|
17492
17570
|
* },
|
|
17493
17571
|
* })
|
|
17494
17572
|
* ```
|
|
@@ -18626,4 +18704,4 @@ class VolumeFade extends UICorePlugin {
|
|
|
18626
18704
|
}
|
|
18627
18705
|
}
|
|
18628
18706
|
|
|
18629
|
-
export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, LevelSelector, Logo, MediaControl,
|
|
18707
|
+
export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, LevelSelector, Logo, MediaControl, MultiCamera, PictureInPicture, PlaybackRate, Poster, SeekTime, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [BottomGear](./player.bottomgear.md) > [addItem](./player.bottomgear.additem.md)
|
|
4
|
+
|
|
5
|
+
## BottomGear.addItem() method
|
|
6
|
+
|
|
7
|
+
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
|
+
>
|
|
9
|
+
|
|
10
|
+
Adds a custom option to the gear menu
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
addItem(name: string, $subMenu?: ZeptoResult): ZeptoResult;
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Parameters
|
|
19
|
+
|
|
20
|
+
<table><thead><tr><th>
|
|
21
|
+
|
|
22
|
+
Parameter
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
</th><th>
|
|
26
|
+
|
|
27
|
+
Type
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
</th><th>
|
|
31
|
+
|
|
32
|
+
Description
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
</th></tr></thead>
|
|
36
|
+
<tbody><tr><td>
|
|
37
|
+
|
|
38
|
+
name
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
</td><td>
|
|
42
|
+
|
|
43
|
+
string
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
</td><td>
|
|
47
|
+
|
|
48
|
+
A unique name of the option
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
</td></tr>
|
|
52
|
+
<tr><td>
|
|
53
|
+
|
|
54
|
+
$subMenu
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
</td><td>
|
|
58
|
+
|
|
59
|
+
[ZeptoResult](./player.zeptoresult.md)
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
</td><td>
|
|
63
|
+
|
|
64
|
+
_(Optional)_ The submenu to attach to the option
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
</td></tr>
|
|
68
|
+
</tbody></table>
|
|
69
|
+
**Returns:**
|
|
70
|
+
|
|
71
|
+
[ZeptoResult](./player.zeptoresult.md)
|
|
72
|
+
|
|
73
|
+
The added item placeholder to attach custom markup
|
|
74
|
+
|
|
75
|
+
## Remarks
|
|
76
|
+
|
|
77
|
+
When called with $submenu param, a click on the added item will toggle the submenu visibility.
|
|
78
|
+
|
|
79
|
+
When added without submenu, it's responsibility of the caller to handle the click event however needed.
|
|
80
|
+
|
|
81
|
+
## Example
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
```ts
|
|
85
|
+
class MyPlugin extends UICorePlugin {
|
|
86
|
+
override render() {
|
|
87
|
+
this.$el.html('<div class="my-awesome-settings">...</div>')
|
|
88
|
+
this.core.getPlugin('bottom_gear')
|
|
89
|
+
?.addItem('custom', this.$el)
|
|
90
|
+
.html($('<button>Custom settings</button>'))
|
|
91
|
+
return this
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
8
|
>
|
|
9
9
|
|
|
10
|
-
`PLUGIN` that adds
|
|
10
|
+
`PLUGIN` that adds a button to extend the media controls UI with extra options.
|
|
11
11
|
|
|
12
12
|
**Signature:**
|
|
13
13
|
|
|
@@ -18,12 +18,70 @@ export declare class BottomGear extends UICorePlugin
|
|
|
18
18
|
|
|
19
19
|
## Remarks
|
|
20
20
|
|
|
21
|
-
The
|
|
21
|
+
The plugin renders small gear icon to the right of the media controls. It provides a base for attaching custom settings UI in the gear menu
|
|
22
22
|
|
|
23
23
|
Depends on:
|
|
24
24
|
|
|
25
25
|
- [MediaControl](./player.mediacontrol.md)
|
|
26
26
|
|
|
27
|
+
## Example
|
|
28
|
+
|
|
29
|
+
You can use bottom gear to add custom settings UI to the gear menu.
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
import { BottomGear } from '@gcorevideo/player/plugins/bottom-gear';
|
|
33
|
+
|
|
34
|
+
class CustomOptionsPlugin extends UICorePlugin {
|
|
35
|
+
// ...
|
|
36
|
+
|
|
37
|
+
override get events() {
|
|
38
|
+
return {
|
|
39
|
+
'click #my-button': 'doMyAction',
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
private doMyAction() {
|
|
44
|
+
// ...
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
override render() {
|
|
48
|
+
const bottomGear = this.core.getPlugin('bottom_gear');
|
|
49
|
+
if (!bottomGear) {
|
|
50
|
+
return this;
|
|
51
|
+
}
|
|
52
|
+
this.$el.html('<button class="custom-option">Custom option</button>');
|
|
53
|
+
// Put rendered element into the gear menu
|
|
54
|
+
bottomGear.addItem('custom').html(this.$el)
|
|
55
|
+
return this;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// alternatively, add an option with a submenu
|
|
59
|
+
override render() {
|
|
60
|
+
this.$el.html(template(templateHtml)({
|
|
61
|
+
// ...
|
|
62
|
+
})));
|
|
63
|
+
return this;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
private addGearOption() {
|
|
67
|
+
this.core.getPlugin('bottom_gear')
|
|
68
|
+
.addItem('custom', this.$el)
|
|
69
|
+
.html($('<button class="custom-option">Custom option</button>'))
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
override bindEvents() {
|
|
73
|
+
this.listenToOnce(this.core, ClapprEvents.CORE_READY, () => {
|
|
74
|
+
const bottomGear = this.core.getPlugin('bottom_gear');
|
|
75
|
+
assert(bottomGear, 'bottom_gear plugin is required');
|
|
76
|
+
// simple case
|
|
77
|
+
this.listenTo(bottomGear, GearEvents.RENDERED, this.render);
|
|
78
|
+
// or with a submenu
|
|
79
|
+
this.listenTo(bottomGear, GearEvents.RENDERED, this.addGearOption);
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
27
85
|
## Methods
|
|
28
86
|
|
|
29
87
|
<table><thead><tr><th>
|
|
@@ -44,7 +102,7 @@ Description
|
|
|
44
102
|
</th></tr></thead>
|
|
45
103
|
<tbody><tr><td>
|
|
46
104
|
|
|
47
|
-
[
|
|
105
|
+
[addItem(name, $subMenu)](./player.bottomgear.additem.md)
|
|
48
106
|
|
|
49
107
|
|
|
50
108
|
</td><td>
|
|
@@ -52,7 +110,7 @@ Description
|
|
|
52
110
|
|
|
53
111
|
</td><td>
|
|
54
112
|
|
|
55
|
-
**_(BETA)_**
|
|
113
|
+
**_(BETA)_** Adds a custom option to the gear menu
|
|
56
114
|
|
|
57
115
|
|
|
58
116
|
</td></tr>
|
|
@@ -66,21 +124,7 @@ Description
|
|
|
66
124
|
|
|
67
125
|
</td><td>
|
|
68
126
|
|
|
69
|
-
**_(BETA)_**
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
</td></tr>
|
|
73
|
-
<tr><td>
|
|
74
|
-
|
|
75
|
-
[setContent(content)](./player.bottomgear.setcontent.md)
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
</td><td>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
</td><td>
|
|
82
|
-
|
|
83
|
-
**_(BETA)_** Replaces the content of the gear menu
|
|
127
|
+
**_(BETA)_** Collapses any submenu open back to the gear menu.
|
|
84
128
|
|
|
85
129
|
|
|
86
130
|
</td></tr>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
8
|
>
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Collapses any submenu open back to the gear menu.
|
|
11
11
|
|
|
12
12
|
**Signature:**
|
|
13
13
|
|
|
@@ -18,3 +18,7 @@ refresh(): void;
|
|
|
18
18
|
|
|
19
19
|
void
|
|
20
20
|
|
|
21
|
+
## Remarks
|
|
22
|
+
|
|
23
|
+
Should be called by the UI plugin that added a gear item with a submenu when the latter is closed (e.g., when a "back" button is clicked).
|
|
24
|
+
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
8
|
>
|
|
9
9
|
|
|
10
|
-
`PLUGIN` that
|
|
10
|
+
A small `PLUGIN` that toggles the playback state on click over the video container
|
|
11
11
|
|
|
12
12
|
**Signature:**
|
|
13
13
|
|
|
@@ -18,7 +18,7 @@ export declare class ClosedCaptions extends UICorePlugin
|
|
|
18
18
|
|
|
19
19
|
## Remarks
|
|
20
20
|
|
|
21
|
-
The plugin is activated when closed captions tracks are
|
|
21
|
+
The plugin is activated when closed captions tracks are detected in the media source. It shows a familiar "CC" button with a dropdown menu to select the subtitles language.
|
|
22
22
|
|
|
23
23
|
Depends on:
|
|
24
24
|
|
|
@@ -37,7 +37,7 @@ Player.registerPlugin(ClosedCaptions)
|
|
|
37
37
|
new Player({
|
|
38
38
|
...
|
|
39
39
|
cc: {
|
|
40
|
-
language: '
|
|
40
|
+
language: 'pt-BR',
|
|
41
41
|
},
|
|
42
42
|
})
|
|
43
43
|
```
|
|
@@ -4,6 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
## ClosedCaptionsPluginSettings type
|
|
6
6
|
|
|
7
|
+
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
|
+
>
|
|
9
|
+
|
|
10
|
+
Configuration options for the [ClosedCaptions](./player.closedcaptions.md) plugin.
|
|
11
|
+
|
|
7
12
|
**Signature:**
|
|
8
13
|
|
|
9
14
|
```typescript
|
|
@@ -4,10 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## ErrorScreen class
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
>
|
|
9
|
-
|
|
10
|
-
`PLUGIN` that displays errors nicely in the overlay on top of the player.
|
|
7
|
+
`PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
|
|
11
8
|
|
|
12
9
|
**Signature:**
|
|
13
10
|
|
|
@@ -16,3 +13,20 @@ export declare class ErrorScreen extends UICorePlugin
|
|
|
16
13
|
```
|
|
17
14
|
**Extends:** UICorePlugin
|
|
18
15
|
|
|
16
|
+
## Remarks
|
|
17
|
+
|
|
18
|
+
A fatal error is an error that prevents the player from playing the content. It's usually a network error that persists after multiple retries.
|
|
19
|
+
|
|
20
|
+
The error screen should not be confused with the content stub that is shown when no media sources are available. This can happen due to the lack of the support of the given sources type or because the sources are misconfigured (e.g., omitted).
|
|
21
|
+
|
|
22
|
+
Configuration options - [ErrorScreenPluginSettings](./player.errorscreenpluginsettings.md)
|
|
23
|
+
|
|
24
|
+
## Example
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import { ErrorScreen, Player } from '@gcorevideo/player'
|
|
29
|
+
|
|
30
|
+
Player.registerPlugin(ErrorScreen)
|
|
31
|
+
```
|
|
32
|
+
|
|
@@ -4,10 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## ErrorScreenPluginSettings type
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
>
|
|
9
|
-
|
|
10
|
-
Configuration options for the [error screen](./player.errorscreen.md) plugin.
|
|
7
|
+
Configuration options for the [ErrorScreen](./player.errorscreen.md) plugin.
|
|
11
8
|
|
|
12
9
|
**Signature:**
|
|
13
10
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [ErrorScreenSettings](./player.errorscreensettings.md)
|
|
4
|
+
|
|
5
|
+
## ErrorScreenSettings type
|
|
6
|
+
|
|
7
|
+
Settings for the [ErrorScreen](./player.errorscreen.md) plugin.
|
|
8
|
+
|
|
9
|
+
**Signature:**
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
export type ErrorScreenSettings = {
|
|
13
|
+
noReload?: boolean;
|
|
14
|
+
};
|
|
15
|
+
```
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
2
|
|
|
3
|
-
[Home](./index.md) > [@gcorevideo/player](./player.md) > [
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [GearEvents](./player.gearevents.md)
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## GearEvents enum
|
|
6
6
|
|
|
7
7
|
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
8
|
>
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Events triggered by the plugin
|
|
11
11
|
|
|
12
12
|
**Signature:**
|
|
13
13
|
|
|
14
14
|
```typescript
|
|
15
|
-
export declare enum
|
|
15
|
+
export declare enum GearEvents
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
## Enumeration Members
|
|
@@ -35,17 +35,17 @@ Description
|
|
|
35
35
|
</th></tr></thead>
|
|
36
36
|
<tbody><tr><td>
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
RENDERED
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
</td><td>
|
|
42
42
|
|
|
43
|
-
`"
|
|
43
|
+
`"rendered"`
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
</td><td>
|
|
47
47
|
|
|
48
|
-
**_(BETA)_**
|
|
48
|
+
**_(BETA)_** Use this event to accurately attach an item to the gear menu
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
</td></tr>
|