@gcorevideo/player 2.22.5 → 2.22.8
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/media-control/media-control.ejs +1 -2
- package/dist/core.js +7 -2
- package/dist/index.css +881 -881
- package/dist/index.js +132 -91
- package/dist/plugins/index.css +418 -418
- package/dist/plugins/index.js +123 -86
- package/lib/playback/dash-playback/DashPlayback.d.ts.map +1 -1
- package/lib/playback/dash-playback/DashPlayback.js +6 -1
- package/lib/plugins/bottom-gear/BottomGear.d.ts.map +1 -1
- package/lib/plugins/bottom-gear/BottomGear.js +2 -2
- package/lib/plugins/media-control/MediaControl.d.ts +37 -6
- package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
- package/lib/plugins/media-control/MediaControl.js +54 -36
- package/lib/plugins/playback-rate/PlaybackRate.d.ts +5 -4
- package/lib/plugins/playback-rate/PlaybackRate.d.ts.map +1 -1
- package/lib/plugins/playback-rate/PlaybackRate.js +46 -24
- package/lib/plugins/subtitles/ClosedCaptions.js +1 -1
- package/lib/plugins/utils/fullscreen.d.ts +4 -0
- package/lib/plugins/utils/fullscreen.d.ts.map +1 -0
- package/lib/plugins/utils/fullscreen.js +30 -0
- package/lib/plugins/utils.d.ts +0 -1
- package/lib/plugins/utils.d.ts.map +1 -1
- package/lib/plugins/utils.js +0 -28
- package/lib/utils/fullscreen.d.ts +3 -0
- package/lib/utils/fullscreen.d.ts.map +1 -0
- package/lib/utils/fullscreen.js +2 -0
- package/package.json +1 -1
- package/src/playback/dash-playback/DashPlayback.ts +6 -4
- package/src/plugins/bottom-gear/BottomGear.ts +2 -2
- package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts +15 -3
- package/src/plugins/media-control/MediaControl.ts +111 -62
- package/src/plugins/media-control/__tests__/MediaControl.test.ts +118 -8
- package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap +149 -5
- package/src/plugins/playback-rate/PlaybackRate.ts +48 -26
- package/src/plugins/playback-rate/__tests__/PlaybackRate.test.ts +125 -55
- package/src/plugins/playback-rate/__tests__/__snapshots__/PlaybackRate.test.ts.snap +1 -1
- package/src/plugins/subtitles/ClosedCaptions.ts +1 -1
- package/src/plugins/utils/fullscreen.ts +34 -0
- package/src/plugins/utils.ts +0 -31
- package/tsconfig.tsbuildinfo +1 -1
package/dist/plugins/index.js
CHANGED
|
@@ -10278,7 +10278,6 @@ class BottomGear extends UICorePlugin {
|
|
|
10278
10278
|
.find('#gear-sub-menu-wrapper')
|
|
10279
10279
|
.hide();
|
|
10280
10280
|
// TODO make non-clickable when there are no items
|
|
10281
|
-
mediaControl.putElement('gear', this.$el);
|
|
10282
10281
|
setTimeout(() => {
|
|
10283
10282
|
this.trigger(GearEvents.RENDERED);
|
|
10284
10283
|
}, 0);
|
|
@@ -10306,7 +10305,8 @@ class BottomGear extends UICorePlugin {
|
|
|
10306
10305
|
this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hide);
|
|
10307
10306
|
}
|
|
10308
10307
|
onMediaControlRendered() {
|
|
10309
|
-
this.
|
|
10308
|
+
const mediaControl = this.core.getPlugin('media_control');
|
|
10309
|
+
mediaControl.putElement('gear', this.$el);
|
|
10310
10310
|
}
|
|
10311
10311
|
}
|
|
10312
10312
|
|
|
@@ -13153,31 +13153,6 @@ function strtimeToMiliseconds(str) {
|
|
|
13153
13153
|
}
|
|
13154
13154
|
return (h + m + s);
|
|
13155
13155
|
}
|
|
13156
|
-
// TODO refactor
|
|
13157
|
-
function isFullscreen(el) {
|
|
13158
|
-
const video = el.nodeName === "video" ? el : el.querySelector('video');
|
|
13159
|
-
if (!video) {
|
|
13160
|
-
return false;
|
|
13161
|
-
}
|
|
13162
|
-
if (Browser.isiOS) {
|
|
13163
|
-
return FullscreenIOS.isFullscreen(video);
|
|
13164
|
-
}
|
|
13165
|
-
return !!(document.fullscreenElement);
|
|
13166
|
-
}
|
|
13167
|
-
const FullscreenIOS = {
|
|
13168
|
-
isFullscreen: function (el) {
|
|
13169
|
-
try {
|
|
13170
|
-
// @ts-ignore
|
|
13171
|
-
if (el.webkitDisplayingFullscreen !== undefined) {
|
|
13172
|
-
// @ts-ignore
|
|
13173
|
-
return !!(el.webkitDisplayingFullscreen);
|
|
13174
|
-
}
|
|
13175
|
-
}
|
|
13176
|
-
catch (e) {
|
|
13177
|
-
}
|
|
13178
|
-
return false;
|
|
13179
|
-
}
|
|
13180
|
-
};
|
|
13181
13156
|
function getPageX(event) {
|
|
13182
13157
|
if (event.pageX) {
|
|
13183
13158
|
return event.pageX;
|
|
@@ -13345,7 +13320,7 @@ class ClipsPlugin extends UICorePlugin {
|
|
|
13345
13320
|
|
|
13346
13321
|
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";
|
|
13347
13322
|
|
|
13348
|
-
var version$1 = "2.22.
|
|
13323
|
+
var version$1 = "2.22.8";
|
|
13349
13324
|
|
|
13350
13325
|
var packages = {
|
|
13351
13326
|
"node_modules/@clappr/core": {
|
|
@@ -14334,7 +14309,35 @@ function keyName(keyCode) {
|
|
|
14334
14309
|
return KEY_NAMES_BY_CODE[keyCode] || '';
|
|
14335
14310
|
}
|
|
14336
14311
|
|
|
14337
|
-
const
|
|
14312
|
+
const fullscreenEnabled = Utils.Fullscreen.fullscreenEnabled;
|
|
14313
|
+
function isFullscreen(el) {
|
|
14314
|
+
const video = el.nodeName === 'video'
|
|
14315
|
+
? el
|
|
14316
|
+
: el.querySelector('video');
|
|
14317
|
+
if (!video) {
|
|
14318
|
+
return false;
|
|
14319
|
+
}
|
|
14320
|
+
if (Browser.isiOS) {
|
|
14321
|
+
return FullscreenIOS.isFullscreen(video);
|
|
14322
|
+
}
|
|
14323
|
+
return !!document.fullscreenElement;
|
|
14324
|
+
}
|
|
14325
|
+
const FullscreenIOS = {
|
|
14326
|
+
isFullscreen: function (el) {
|
|
14327
|
+
try {
|
|
14328
|
+
// @ts-ignore
|
|
14329
|
+
if (el.webkitDisplayingFullscreen !== undefined) {
|
|
14330
|
+
// @ts-ignore
|
|
14331
|
+
return !!el.webkitDisplayingFullscreen;
|
|
14332
|
+
}
|
|
14333
|
+
}
|
|
14334
|
+
catch (e) {
|
|
14335
|
+
}
|
|
14336
|
+
return false;
|
|
14337
|
+
},
|
|
14338
|
+
};
|
|
14339
|
+
|
|
14340
|
+
const mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n\n<div class=\"media-control-layer gcore-skin-bg-color\" data-controls>\n <% var renderBar = function(name) { %>\n <div class=\"bar-container\" data-<%= name %>>\n <div class=\"bar-background\" data-<%= name %>>\n <div class=\"bar-fill-1\" data-<%= name %>></div>\n <div class=\"bar-fill-2 gcore-skin-main-color\" data-<%= name %>></div>\n <div class=\"bar-hover\" data-<%= name %>></div>\n </div>\n </div>\n <div class=\"bar-scrubber\" data-<%= name %>>\n <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n </div>\n <% }; %>\n <% var renderSegmentedBar = function(name, segments) {\n segments = segments || 10; %>\n <div class=\"bar-container\" data-<%= name %>>\n <div class=\"bar-background\" data-<%= name %>>\n <div class=\"bar-fill-1 gcore-skin-main-color\" data-<%= name %>></div>\n </div>\n <div class=\"bar-scrubber\" data-<%= name %>>\n <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n </div>\n </div>\n <% }; %>\n <% var renderDrawer = function(name, renderContent) { %>\n <div class=\"drawer-container\" data-<%= name %>>\n <div class=\"drawer-icon-container\" data-<%= name %>>\n <div class=\"drawer-icon media-control-icon gcore-skin-button-color\" data-<%= name %>></div>\n <span class=\"drawer-text\" data-<%= name %>></span>\n </div>\n <% renderContent(name); %>\n </div>\n <% }; %>\n <% var renderIndicator = function(name) { %>\n <div class=\"media-control-indicator gcore-skin-text-color\" data-<%= name %>></div>\n <% }; %>\n <% var renderQuality = function(name) { %>\n <div class=\"media-control-quality\" data-<%= name %>></div>\n <% }; %>\n <% var renderNerd = function(name) { %>\n <div class=\"media-control-nerd\" data-<%= name %>></div>\n <% }; %>\n <% var renderMultiCamera = function(name) { %>\n <div class=\"media-control-multicamera\" data-<%= name %>></div>\n <% }; %>\n <% var renderClipsText = function(name) { %>\n <div class=\"media-clip-container gcore-skin-text-color\" data-<%= name %>>\n <div class=\"media-clip-point gcore-skin-text-color\" data-<%= name %>>•</div>\n <div class=\"media-clip-text gcore-skin-text-color\" data-<%= name %>></div>\n </div>\n <% }; %>\n <% var renderVR = function(name) { %>\n <div class=\"media-control-vr\" data-<%= name %>></div>\n <% }; %>\n <% var renderButton = function(name) { %>\n <button type=\"button\" class=\"media-control-button media-control-icon gcore-skin-button-color\" data-<%= name %>\n aria-label=\"<%= name %>\"></button>\n <% }; %>\n\n <% var templates = {\n bar: renderBar,\n segmentedBar: renderSegmentedBar,\n };\n var render = function (settingsList) {\n settingsList.forEach(function (setting) {\n\n if (setting === \"seekbar\") {\n renderBar(setting);\n } else if (setting === \"volume\") {\n renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {\n return renderSegmentedBar(name);\n });\n } else if (setting === \"duration\" || setting === \"position\") {\n renderIndicator(setting);\n } else if (setting === \"quality\") {\n renderQuality(setting)\n } else if (setting === \"nerd\") {\n renderNerd(setting)\n } else if (setting === \"multicamera\") {\n renderMultiCamera(setting)\n } else if (setting === \"vr\") {\n renderVR(setting)\n } else if (setting === \"clipsText\") {\n renderClipsText(setting)\n } else if ([\"playpause\", \"playstop\", \"fullscreen\"].includes(setting)) {\n renderButton(setting);\n }\n });\n }; %>\n <% if (settings.left && settings.left.length) { %>\n <div class=\"media-control-left-panel\" data-media-control>\n <% render(settings.left); %>\n </div>\n <% } %>\n <% if (settings.default && settings.default.length) { %>\n <div class=\"media-control-center-panel\" data-media-control>\n <% render(settings.default); %>\n </div>\n <% } %>\n <% if (settings.right && settings.right.length) { %>\n <div class=\"media-control-right-panel\" data-media-control>\n <% render(settings.right); %>\n </div>\n <% } %>\n</div>\n";
|
|
14338
14341
|
|
|
14339
14342
|
const volumeMaxIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14.187 7.71405C13.759 8.06405 13.697 8.69307 14.046 9.12107C14.662 9.87207 15 10.8941 15 11.9961C15 13.0991 14.662 14.1201 14.046 14.8711C13.697 15.2991 13.759 15.9291 14.187 16.2781C14.373 16.4311 14.597 16.5051 14.82 16.5051C15.109 16.5051 15.396 16.3801 15.594 16.1391C16.501 15.0301 17 13.5601 17 11.9961C17 10.4331 16.501 8.96207 15.594 7.85407C15.245 7.42707 14.614 7.36405 14.187 7.71405ZM19.772 5.14408C19.443 4.70008 18.816 4.60907 18.374 4.94007C17.931 5.27007 17.839 5.89605 18.169 6.33905C19.367 7.94705 20 9.90307 20 11.9961C20 14.0891 19.367 16.0451 18.169 17.6531C17.839 18.0971 17.931 18.7231 18.374 19.0531C18.553 19.1871 18.762 19.2511 18.97 19.2511C19.275 19.2511 19.576 19.1121 19.772 18.8491C21.23 16.8921 22 14.5231 22 11.9961C22 9.47007 21.23 7.10108 19.772 5.14408ZM12 3.85108V20.1421C12 20.4881 11.793 20.7971 11.473 20.9291C11.368 20.9721 11.258 20.9921 11.149 20.9921C10.926 20.9921 10.708 20.9031 10.544 20.7371L6.317 16.4431C6.038 16.1591 5.648 15.9961 5.249 15.9961H3.5C2.673 15.9961 2 15.3231 2 14.4961V9.49607C2 8.66907 2.673 7.99607 3.5 7.99607H5.249C5.648 7.99607 6.038 7.83308 6.317 7.54908L10.544 3.25507C10.787 3.00807 11.151 2.93206 11.473 3.06406C11.793 3.19506 12 3.50408 12 3.85108Z\"\n fill=\"#C9C9C9\"/>\n</svg>\n";
|
|
14340
14343
|
|
|
@@ -14348,19 +14351,22 @@ const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
|
|
|
14348
14351
|
// Use of this source code is governed by a BSD-style
|
|
14349
14352
|
// license that can be found in the {@link https://github.com/clappr/clappr-plugins/blob/master/LICENSE | LICENSE}.
|
|
14350
14353
|
const DEFAULT_SETTINGS = {
|
|
14351
|
-
left: [],
|
|
14352
14354
|
right: [
|
|
14355
|
+
'audiotracks',
|
|
14356
|
+
'cc',
|
|
14357
|
+
// 'dvr',
|
|
14358
|
+
// 'duration',
|
|
14353
14359
|
'fullscreen',
|
|
14354
|
-
'pip',
|
|
14355
14360
|
'gear',
|
|
14356
|
-
'cc',
|
|
14357
14361
|
'multicamera',
|
|
14358
|
-
|
|
14362
|
+
'pip',
|
|
14359
14363
|
'vr',
|
|
14360
|
-
|
|
14361
|
-
|
|
14364
|
+
]};
|
|
14365
|
+
const INITIAL_SETTINGS = {
|
|
14366
|
+
left: [],
|
|
14367
|
+
right: [],
|
|
14362
14368
|
default: [],
|
|
14363
|
-
seekEnabled:
|
|
14369
|
+
seekEnabled: false,
|
|
14364
14370
|
};
|
|
14365
14371
|
const T$a = 'plugins.media_control';
|
|
14366
14372
|
const LEFT_ORDER = [
|
|
@@ -14383,11 +14389,17 @@ function orderByOrderPattern(arr, order) {
|
|
|
14383
14389
|
* @beta
|
|
14384
14390
|
* @remarks
|
|
14385
14391
|
* The methods exposed are to be used by the other plugins that extend the media control UI.
|
|
14392
|
+
*
|
|
14393
|
+
* Configuration options:
|
|
14394
|
+
*
|
|
14395
|
+
* - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
|
|
14396
|
+
*
|
|
14397
|
+
* - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
|
|
14398
|
+
*
|
|
14399
|
+
* - `chromeless`: boolean
|
|
14386
14400
|
*/
|
|
14387
14401
|
class MediaControl extends UICorePlugin {
|
|
14388
14402
|
// private advertisementPlaying = false
|
|
14389
|
-
customAreaElements = {};
|
|
14390
|
-
customAreaHandler;
|
|
14391
14403
|
buttonsColor = null;
|
|
14392
14404
|
currentDurationValue = 0;
|
|
14393
14405
|
currentPositionValue = 0;
|
|
@@ -14398,7 +14410,7 @@ class MediaControl extends UICorePlugin {
|
|
|
14398
14410
|
displayedSeekBarPercentage = null;
|
|
14399
14411
|
draggingSeekBar = false;
|
|
14400
14412
|
draggingVolumeBar = false;
|
|
14401
|
-
fullScreenOnVideoTagSupported =
|
|
14413
|
+
fullScreenOnVideoTagSupported = false;
|
|
14402
14414
|
hideId = null;
|
|
14403
14415
|
hideVolumeId = null;
|
|
14404
14416
|
intendedVolume = 100;
|
|
@@ -14406,9 +14418,10 @@ class MediaControl extends UICorePlugin {
|
|
|
14406
14418
|
kibo;
|
|
14407
14419
|
lastMouseX = 0;
|
|
14408
14420
|
lastMouseY = 0;
|
|
14421
|
+
needsUpdate = false;
|
|
14409
14422
|
persistConfig;
|
|
14410
14423
|
rendered = false;
|
|
14411
|
-
settings =
|
|
14424
|
+
settings = INITIAL_SETTINGS;
|
|
14412
14425
|
userDisabled = false;
|
|
14413
14426
|
userKeepVisible = false;
|
|
14414
14427
|
verticalVolume = false;
|
|
@@ -14419,7 +14432,6 @@ class MediaControl extends UICorePlugin {
|
|
|
14419
14432
|
$multiCameraSelector = null;
|
|
14420
14433
|
$playPauseToggle = null;
|
|
14421
14434
|
$playStopToggle = null;
|
|
14422
|
-
$playbackRate = null;
|
|
14423
14435
|
$position = null;
|
|
14424
14436
|
$seekBarContainer = null;
|
|
14425
14437
|
$seekBarHover = null;
|
|
@@ -14631,7 +14643,8 @@ class MediaControl extends UICorePlugin {
|
|
|
14631
14643
|
const video = this.core.activePlayback?.el;
|
|
14632
14644
|
// video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
|
|
14633
14645
|
// see https://github.com/clappr/clappr/issues/1127
|
|
14634
|
-
if (!
|
|
14646
|
+
if (!fullscreenEnabled() && video.webkitSupportsFullscreen) {
|
|
14647
|
+
// TODO sort out, use single utility function
|
|
14635
14648
|
this.fullScreenOnVideoTagSupported = true;
|
|
14636
14649
|
}
|
|
14637
14650
|
this.updateSettings();
|
|
@@ -14862,22 +14875,21 @@ class MediaControl extends UICorePlugin {
|
|
|
14862
14875
|
}
|
|
14863
14876
|
}
|
|
14864
14877
|
onActiveContainerChanged() {
|
|
14865
|
-
this.fullScreenOnVideoTagSupported =
|
|
14878
|
+
this.fullScreenOnVideoTagSupported = false;
|
|
14866
14879
|
// set the new container to match the volume of the last one
|
|
14867
14880
|
this.setInitialVolume();
|
|
14868
14881
|
this.changeTogglePlay();
|
|
14869
14882
|
this.bindContainerEvents();
|
|
14883
|
+
// TODO remove?
|
|
14870
14884
|
this.updateSettings();
|
|
14871
|
-
// TODO
|
|
14872
|
-
this.core.activeContainer.trigger(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
|
|
14873
|
-
// TODO test
|
|
14885
|
+
// TODO test, figure out if this is needed
|
|
14874
14886
|
if (this.core.activeContainer.mediaControlDisabled) {
|
|
14875
14887
|
this.disable();
|
|
14876
14888
|
}
|
|
14877
14889
|
else {
|
|
14878
14890
|
this.enable();
|
|
14879
14891
|
}
|
|
14880
|
-
this.trigger(Events.MEDIACONTROL_CONTAINERCHANGED); // TODO
|
|
14892
|
+
this.trigger(Events.MEDIACONTROL_CONTAINERCHANGED); // TODO figure out
|
|
14881
14893
|
if (this.core.activeContainer.$el) {
|
|
14882
14894
|
this.core.activeContainer.$el.addClass('container-skin-1');
|
|
14883
14895
|
}
|
|
@@ -15048,6 +15060,7 @@ class MediaControl extends UICorePlugin {
|
|
|
15048
15060
|
}
|
|
15049
15061
|
}
|
|
15050
15062
|
updateSettings() {
|
|
15063
|
+
trace(`${T$a} updateSettings`, { settings: this.settings });
|
|
15051
15064
|
const newSettings = $.extend(true, {
|
|
15052
15065
|
left: [],
|
|
15053
15066
|
default: [],
|
|
@@ -15060,10 +15073,14 @@ class MediaControl extends UICorePlugin {
|
|
|
15060
15073
|
newSettings.left.push('dvr');
|
|
15061
15074
|
}
|
|
15062
15075
|
// actual order of the items appear rendered is controlled by CSS
|
|
15063
|
-
newSettings.right = DEFAULT_SETTINGS.right;
|
|
15076
|
+
newSettings.right = DEFAULT_SETTINGS.right; // TODO get from the options
|
|
15064
15077
|
if ((!this.fullScreenOnVideoTagSupported &&
|
|
15065
|
-
!
|
|
15078
|
+
!fullscreenEnabled()) ||
|
|
15066
15079
|
this.options.fullscreenDisable) {
|
|
15080
|
+
trace(`${T$a} updateSettings removing fullscreen`, {
|
|
15081
|
+
supported: this.fullScreenOnVideoTagSupported,
|
|
15082
|
+
optionsDisable: this.options.fullscreenDisable,
|
|
15083
|
+
});
|
|
15067
15084
|
// remove fullscreen from settings if it is not available
|
|
15068
15085
|
removeArrayItem(newSettings.default, 'fullscreen');
|
|
15069
15086
|
removeArrayItem(newSettings.left, 'fullscreen');
|
|
@@ -15078,6 +15095,7 @@ class MediaControl extends UICorePlugin {
|
|
|
15078
15095
|
const settingsChanged = serializeSettings(this.settings) !== serializeSettings(newSettings);
|
|
15079
15096
|
if (settingsChanged) {
|
|
15080
15097
|
this.settings = newSettings;
|
|
15098
|
+
this.needsUpdate = true;
|
|
15081
15099
|
this.render();
|
|
15082
15100
|
}
|
|
15083
15101
|
}
|
|
@@ -15102,7 +15120,6 @@ class MediaControl extends UICorePlugin {
|
|
|
15102
15120
|
this.$volumeBarBackground = this.$el.find('.bar-background[data-volume]');
|
|
15103
15121
|
this.$volumeBarFill = this.$el.find('.bar-fill-1[data-volume]');
|
|
15104
15122
|
this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]');
|
|
15105
|
-
this.$playbackRate = this.$el.find('.media-control-playbackrate[data-playbackrate]');
|
|
15106
15123
|
this.$multiCameraSelector = this.$el.find('.media-control-multicamera[data-multicamera]');
|
|
15107
15124
|
this.$clipText = this.$el.find('.media-clip-text[data-clipstext]'); // TODO
|
|
15108
15125
|
this.$clipTextContainer = this.$el.find('.media-clip-container[data-clipstext]');
|
|
@@ -15134,8 +15151,6 @@ class MediaControl extends UICorePlugin {
|
|
|
15134
15151
|
return null;
|
|
15135
15152
|
case 'clipText':
|
|
15136
15153
|
return this.$clipText;
|
|
15137
|
-
case 'playbackRate':
|
|
15138
|
-
return this.$playbackRate;
|
|
15139
15154
|
case 'seekBarContainer':
|
|
15140
15155
|
return this.$seekBarContainer;
|
|
15141
15156
|
}
|
|
@@ -15158,13 +15173,6 @@ class MediaControl extends UICorePlugin {
|
|
|
15158
15173
|
return;
|
|
15159
15174
|
}
|
|
15160
15175
|
}
|
|
15161
|
-
handleCustomArea(handler) {
|
|
15162
|
-
this.customAreaHandler = handler;
|
|
15163
|
-
Object.entries(this.customAreaElements).forEach(([name, element]) => {
|
|
15164
|
-
handler(name, element);
|
|
15165
|
-
});
|
|
15166
|
-
this.customAreaElements = {};
|
|
15167
|
-
}
|
|
15168
15176
|
/**
|
|
15169
15177
|
* Toggle the visibility of a media control element
|
|
15170
15178
|
* @param name - The name of the media control element
|
|
@@ -15262,8 +15270,8 @@ class MediaControl extends UICorePlugin {
|
|
|
15262
15270
|
keys.forEach((i) => {
|
|
15263
15271
|
this.bindKeyAndShow(i, () => {
|
|
15264
15272
|
this.settings.seekEnabled &&
|
|
15265
|
-
this.
|
|
15266
|
-
this.
|
|
15273
|
+
this.core.activeContainer &&
|
|
15274
|
+
this.core.activeContainer.seekPercentage(Number(i) * 10);
|
|
15267
15275
|
return false;
|
|
15268
15276
|
});
|
|
15269
15277
|
});
|
|
@@ -15329,9 +15337,12 @@ class MediaControl extends UICorePlugin {
|
|
|
15329
15337
|
* @internal
|
|
15330
15338
|
*/
|
|
15331
15339
|
render() {
|
|
15340
|
+
trace(`${T$a} render`, { needsUpdate: this.needsUpdate });
|
|
15341
|
+
if (!this.needsUpdate) {
|
|
15342
|
+
return this;
|
|
15343
|
+
}
|
|
15332
15344
|
const timeout = this.options.hideMediaControlDelay || 2000;
|
|
15333
|
-
|
|
15334
|
-
this.$el.html(html);
|
|
15345
|
+
this.$el.html(MediaControl.template({ settings: this.settings }));
|
|
15335
15346
|
// const style = Styler.getStyleFor(mediaControlStyle, { baseUrl: this.options.baseUrl });
|
|
15336
15347
|
// this.$el.append(style[0]);
|
|
15337
15348
|
this.createCachedElements();
|
|
@@ -15377,7 +15388,8 @@ class MediaControl extends UICorePlugin {
|
|
|
15377
15388
|
this.core.$el.append(this.el);
|
|
15378
15389
|
this.rendered = true;
|
|
15379
15390
|
this.updateVolumeUI();
|
|
15380
|
-
|
|
15391
|
+
this.needsUpdate = false;
|
|
15392
|
+
// TODO setTimeout?
|
|
15381
15393
|
this.trigger(Events.MEDIACONTROL_RENDERED);
|
|
15382
15394
|
return this;
|
|
15383
15395
|
}
|
|
@@ -15443,6 +15455,7 @@ class MediaControl extends UICorePlugin {
|
|
|
15443
15455
|
element.el.css({ 'pointer-events': 'none' });
|
|
15444
15456
|
});
|
|
15445
15457
|
}
|
|
15458
|
+
// TODO drop
|
|
15446
15459
|
isSeekEnabledForHtml5Playback() {
|
|
15447
15460
|
if (this.core.getPlaybackType() === Playback.LIVE) {
|
|
15448
15461
|
return this.options.dvrEnabled;
|
|
@@ -15996,12 +16009,11 @@ const T$7 = 'plugins.playback_rate';
|
|
|
15996
16009
|
* { value: 1, label: '1x' },
|
|
15997
16010
|
* ],
|
|
15998
16011
|
* defaultValue: 1,
|
|
15999
|
-
* }
|
|
16012
|
+
* },
|
|
16000
16013
|
* })
|
|
16001
16014
|
* ```
|
|
16002
16015
|
*/
|
|
16003
16016
|
class PlaybackRate extends UICorePlugin {
|
|
16004
|
-
playbackRates = DEFAULT_PLAYBACK_RATES;
|
|
16005
16017
|
// Saved when an ad starts to restore after it finishes
|
|
16006
16018
|
// private prevSelectedRate: string | undefined
|
|
16007
16019
|
selectedRate = DEFAULT_PLAYBACK_RATE;
|
|
@@ -16021,10 +16033,12 @@ class PlaybackRate extends UICorePlugin {
|
|
|
16021
16033
|
static listTemplate = tmpl(listHtml$1);
|
|
16022
16034
|
constructor(core) {
|
|
16023
16035
|
super(core);
|
|
16024
|
-
this.
|
|
16025
|
-
core.options.playbackRate
|
|
16026
|
-
|
|
16027
|
-
|
|
16036
|
+
if (this.core.options.playbackRate?.defaultValue) {
|
|
16037
|
+
this.setSelectedRate(this.core.options.playbackRate.defaultValue);
|
|
16038
|
+
}
|
|
16039
|
+
}
|
|
16040
|
+
get playbackRates() {
|
|
16041
|
+
return this.core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
|
|
16028
16042
|
}
|
|
16029
16043
|
/**
|
|
16030
16044
|
* @internal
|
|
@@ -16068,9 +16082,15 @@ class PlaybackRate extends UICorePlugin {
|
|
|
16068
16082
|
this.render();
|
|
16069
16083
|
}
|
|
16070
16084
|
onGearRendered() {
|
|
16071
|
-
this.
|
|
16085
|
+
this.mount();
|
|
16072
16086
|
}
|
|
16073
|
-
|
|
16087
|
+
mount() {
|
|
16088
|
+
trace(`${T$7} mount`, {
|
|
16089
|
+
shouldMount: this.shouldMount(),
|
|
16090
|
+
});
|
|
16091
|
+
if (!this.shouldMount()) {
|
|
16092
|
+
return;
|
|
16093
|
+
}
|
|
16074
16094
|
this.core
|
|
16075
16095
|
.getPlugin('bottom_gear')
|
|
16076
16096
|
?.addItem('rate', this.$el)
|
|
@@ -16101,7 +16121,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
16101
16121
|
});
|
|
16102
16122
|
}
|
|
16103
16123
|
}
|
|
16104
|
-
|
|
16124
|
+
shouldMount() {
|
|
16105
16125
|
if (!this.core.activePlayback) {
|
|
16106
16126
|
return false;
|
|
16107
16127
|
}
|
|
@@ -16116,11 +16136,8 @@ class PlaybackRate extends UICorePlugin {
|
|
|
16116
16136
|
*/
|
|
16117
16137
|
render() {
|
|
16118
16138
|
trace(`${T$7} render`, {
|
|
16119
|
-
|
|
16139
|
+
shouldMount: this.shouldMount(),
|
|
16120
16140
|
});
|
|
16121
|
-
if (!this.shouldRender()) {
|
|
16122
|
-
return this;
|
|
16123
|
-
}
|
|
16124
16141
|
this.$el.html(PlaybackRate.listTemplate({
|
|
16125
16142
|
arrowLeftIcon,
|
|
16126
16143
|
checkIcon,
|
|
@@ -16128,7 +16145,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
16128
16145
|
i18n: this.core.i18n,
|
|
16129
16146
|
playbackRates: this.playbackRates,
|
|
16130
16147
|
}));
|
|
16131
|
-
this.
|
|
16148
|
+
this.mount();
|
|
16132
16149
|
return this;
|
|
16133
16150
|
}
|
|
16134
16151
|
// private onStartAd() {
|
|
@@ -16151,11 +16168,21 @@ class PlaybackRate extends UICorePlugin {
|
|
|
16151
16168
|
this.resetPlaybackRate();
|
|
16152
16169
|
}
|
|
16153
16170
|
else {
|
|
16154
|
-
this.
|
|
16171
|
+
this.syncRate();
|
|
16155
16172
|
}
|
|
16156
16173
|
}
|
|
16174
|
+
syncRate() {
|
|
16175
|
+
trace(`${T$7} syncRate`, {
|
|
16176
|
+
selectedRate: this.selectedRate,
|
|
16177
|
+
});
|
|
16178
|
+
this.core.activePlayback?.setPlaybackRate(this.selectedRate);
|
|
16179
|
+
}
|
|
16157
16180
|
resetPlaybackRate() {
|
|
16158
|
-
|
|
16181
|
+
trace(`${T$7} resetPlaybackRate`, {
|
|
16182
|
+
selectedRate: this.selectedRate,
|
|
16183
|
+
});
|
|
16184
|
+
this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
|
|
16185
|
+
this.selectedRate = DEFAULT_PLAYBACK_RATE;
|
|
16159
16186
|
}
|
|
16160
16187
|
onStop() { }
|
|
16161
16188
|
onSelect(event) {
|
|
@@ -16163,8 +16190,6 @@ class PlaybackRate extends UICorePlugin {
|
|
|
16163
16190
|
const rate = parseFloat(event.currentTarget.dataset.rate || '');
|
|
16164
16191
|
if (rate) {
|
|
16165
16192
|
this.setSelectedRate(rate);
|
|
16166
|
-
this.highlightCurrentRate();
|
|
16167
|
-
this.updateGearOptionLabel();
|
|
16168
16193
|
}
|
|
16169
16194
|
return false;
|
|
16170
16195
|
}
|
|
@@ -16174,14 +16199,23 @@ class PlaybackRate extends UICorePlugin {
|
|
|
16174
16199
|
}, 0);
|
|
16175
16200
|
}
|
|
16176
16201
|
setSelectedRate(rate) {
|
|
16177
|
-
this.
|
|
16202
|
+
if (rate === this.selectedRate) {
|
|
16203
|
+
return;
|
|
16204
|
+
}
|
|
16178
16205
|
this.selectedRate = rate;
|
|
16206
|
+
this.syncRate();
|
|
16207
|
+
this.highlightCurrentRate();
|
|
16208
|
+
this.updateGearOptionLabel();
|
|
16179
16209
|
}
|
|
16180
16210
|
getTitle() {
|
|
16181
|
-
|
|
16182
|
-
|
|
16211
|
+
const rate = this.selectedRate;
|
|
16212
|
+
return (this.playbackRates.find((r) => r.value === rate)?.label ||
|
|
16213
|
+
`x${rate}`);
|
|
16183
16214
|
}
|
|
16184
16215
|
highlightCurrentRate() {
|
|
16216
|
+
trace(`${T$7} highlightCurrentRate`, {
|
|
16217
|
+
selectedRate: this.selectedRate,
|
|
16218
|
+
});
|
|
16185
16219
|
this.allRateElements().removeClass('current');
|
|
16186
16220
|
this.allRateElements().find('a').removeClass('gcore-skin-active');
|
|
16187
16221
|
this.rateElement(this.selectedRate)
|
|
@@ -16190,7 +16224,10 @@ class PlaybackRate extends UICorePlugin {
|
|
|
16190
16224
|
.addClass('gcore-skin-active');
|
|
16191
16225
|
}
|
|
16192
16226
|
updateGearOptionLabel() {
|
|
16193
|
-
|
|
16227
|
+
trace(`${T$7} updateGearOptionLabel`, {
|
|
16228
|
+
selectedRate: this.selectedRate,
|
|
16229
|
+
});
|
|
16230
|
+
this.mount();
|
|
16194
16231
|
}
|
|
16195
16232
|
}
|
|
16196
16233
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashPlayback.d.ts","sourceRoot":"","sources":["../../../src/playback/dash-playback/DashPlayback.ts"],"names":[],"mappings":"AAKA,OAAO,EAAe,QAAQ,EAAyB,MAAM,cAAc,CAAA;AAG3E,OAAO,MAAM,EAAE,EAIb,KAAK,WAAW,IAAI,eAAe,EAEnC,aAAa,EACd,MAAM,QAAQ,CAAA;AAEf,OAAO,EAGL,YAAY,EACZ,YAAY,EAEZ,SAAS,EACV,MAAM,yBAAyB,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAA;AAMzE,KAAK,YAAY,GACb,OAAO,QAAQ,CAAC,GAAG,GACnB,OAAO,QAAQ,CAAC,IAAI,GACpB,OAAO,QAAQ,CAAC,GAAG,GACnB,OAAO,QAAQ,CAAC,KAAK,CAAA;AAEzB,KAAK,YAAY,GAAG,MAAM,CAAA;AAE1B,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAID,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,YAAY;IACpD,OAAO,EAAE,YAAY,EAAE,GAAG,IAAI,CAAO;IAErC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAO;IAKnC,mCAAmC,EAAE,OAAO,CAAQ;IAEpD,aAAa,EAAE,OAAO,CAAQ;IAI9B,uBAAuB,EAAE,MAAM,CAAI;IASnC,wBAAwB,EAAE,MAAM,CAAI;IAEpC,aAAa,EAAE,YAAY,CAAe;IAG1C,aAAa,EAAE,YAAY,GAAG,IAAI,CAAO;IAGzC,gBAAgB,EAAE,SAAS,CAAI;IAE/B,KAAK,EAAE,MAAM,CAAC,gBAAgB,GAAG,IAAI,CAAO;IAE5C,2BAA2B,EAAE,MAAM,CAAI;IAEvC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAEtC,eAAe,EAAE,YAAY,CAA2B;IAIxD,0BAA0B,EAAE,oBAAoB,GAAG,IAAI,CAAO;IAI9D,wBAAwB,EAAE,oBAAoB,GAAG,IAAI,CAAO;IAE5D,kBAAkB,UAAQ;IAE1B,YAAY,EAAE,aAAa,GAAG,IAAI,CAAO;IAEzC,gBAAgB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,GAAG,IAAI,CAAO;IAE9D,IAAI,IAAI,WAEP;IAED,IAAI,MAAM,IAAI,YAAY,EAAE,CAE3B;IAED,IAAI,YAAY,IAAI,MAAM,CAMzB;IAED,IAAI,OAAO,YAEV;IAED,IAAI,YAAY,CAAC,EAAE,EAAE,MAAM,EAoC1B;IAED,IAAI,UAAU,WASb;IAED,IAAI,IAAI,WAEP;IAID,IAAI,sBAAsB,WAczB;IAID,IAAI,oBAAoB,WAgBvB;IAED,IAAI,SAAS,WAKZ;gBAEW,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,GAAG;IAOzD,MAAM;IA6FN,MAAM;IAMN,MAAM;YAMW,SAAS;IAI1B,qBAAqB;IAQrB,oBAAoB;IAMpB,kBAAkB;IAOlB,WAAW,IAAI,SAAS;IAQxB,cAAc,IAAI,SAAS;IAO3B,kBAAkB,IAAI,SAAS;IAItB,cAAc,CAAC,UAAU,EAAE,MAAM;IAejC,IAAI,CAAC,IAAI,EAAE,SAAS;IAgB7B,eAAe;IAIf,UAAU,CAAC,MAAM,EAAE,OAAO;IAMjB,eAAe;IAgBxB,OAAO,CAAC,gBAAgB,CAGvB;IAED,OAAO,CAAC,eAAe,CAmCtB;IAED,OAAO,CAAC,YAAY;IAmBX,aAAa;IAqBb,iBAAiB;IAW1B,IAAI,UAAU,
|
|
1
|
+
{"version":3,"file":"DashPlayback.d.ts","sourceRoot":"","sources":["../../../src/playback/dash-playback/DashPlayback.ts"],"names":[],"mappings":"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"}
|
|
@@ -368,6 +368,11 @@ export default class DashPlayback extends BasePlayback {
|
|
|
368
368
|
trace(`${T} dvrEnable no dash player instance`);
|
|
369
369
|
return false;
|
|
370
370
|
}
|
|
371
|
+
trace(`${T} get.dvrEnabled`, {
|
|
372
|
+
dvrWindowSize: this._dash?.getDVRWindowSize(),
|
|
373
|
+
minDvrSize: this._minDvrSize,
|
|
374
|
+
playbackType: this.getPlaybackType(),
|
|
375
|
+
});
|
|
371
376
|
return (this._dash?.getDVRWindowSize() >= this._minDvrSize &&
|
|
372
377
|
this.getPlaybackType() === Playback.LIVE);
|
|
373
378
|
}
|
|
@@ -423,8 +428,8 @@ export default class DashPlayback extends BasePlayback {
|
|
|
423
428
|
return super.destroy();
|
|
424
429
|
}
|
|
425
430
|
_updatePlaybackType() {
|
|
426
|
-
assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to update the playback type');
|
|
427
431
|
const prevPlaybackType = this._playbackType;
|
|
432
|
+
// @ts-ignore
|
|
428
433
|
this._playbackType = this._dash.isDynamic() ? Playback.LIVE : Playback.VOD;
|
|
429
434
|
if (prevPlaybackType !== this._playbackType) {
|
|
430
435
|
this._updateSettings();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAOhF,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAM5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAQ;IAEpB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IAyB1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;
|
|
1
|
+
{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAOhF,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAM5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAQ;IAEpB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IAyB1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAqBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,sBAAsB;CAK/B"}
|
|
@@ -207,7 +207,6 @@ export class BottomGear extends UICorePlugin {
|
|
|
207
207
|
.find('#gear-sub-menu-wrapper')
|
|
208
208
|
.hide();
|
|
209
209
|
// TODO make non-clickable when there are no items
|
|
210
|
-
mediaControl.putElement('gear', this.$el);
|
|
211
210
|
setTimeout(() => {
|
|
212
211
|
this.trigger(GearEvents.RENDERED);
|
|
213
212
|
}, 0);
|
|
@@ -237,6 +236,7 @@ export class BottomGear extends UICorePlugin {
|
|
|
237
236
|
}
|
|
238
237
|
onMediaControlRendered() {
|
|
239
238
|
trace(`${T} onMediaControlRendered`);
|
|
240
|
-
this.
|
|
239
|
+
const mediaControl = this.core.getPlugin('media_control');
|
|
240
|
+
mediaControl.putElement('gear', this.$el);
|
|
241
241
|
}
|
|
242
242
|
}
|
|
@@ -2,19 +2,51 @@ import { UICorePlugin, Core } from '@clappr/core';
|
|
|
2
2
|
import { ZeptoResult } from '../../types.js';
|
|
3
3
|
import '../../../assets/media-control/media-control.scss';
|
|
4
4
|
/**
|
|
5
|
-
* Media control elements
|
|
5
|
+
* Media control elements that appear in the left area.
|
|
6
6
|
* @beta
|
|
7
7
|
*/
|
|
8
|
-
export type
|
|
8
|
+
export type MediaControlLeftElement = 'clipText' | 'duration' | 'dvr' | 'playpause' | 'playstop' | 'position' | 'volume';
|
|
9
|
+
/**
|
|
10
|
+
* Media control elements that appear in main layer, spanning the entire width of the player.
|
|
11
|
+
* @beta
|
|
12
|
+
*/
|
|
13
|
+
export type MediaControlLayerElement = 'seekbar' | 'seekBarContainer';
|
|
14
|
+
/**
|
|
15
|
+
* Media control elements that appear in the right area.
|
|
16
|
+
* @beta
|
|
17
|
+
*/
|
|
18
|
+
export type MediaControlRightElement = 'audiotracks' | 'cc' | 'fullscreen' | 'hd-indicator' | 'gear' | 'multicamera' | 'pip' | 'vr';
|
|
19
|
+
/**
|
|
20
|
+
* Built-in media control elements.
|
|
21
|
+
* @beta
|
|
22
|
+
*/
|
|
23
|
+
export type MediaControlElement = MediaControlLeftElement | MediaControlLayerElement | MediaControlRightElement;
|
|
24
|
+
/**
|
|
25
|
+
* Specifies the allowed media control elements in each area.
|
|
26
|
+
* Can be used to restrict rendered media control elements.
|
|
27
|
+
* @beta
|
|
28
|
+
*/
|
|
29
|
+
export type MediaControlSettings = {
|
|
30
|
+
left: MediaControlLeftElement[];
|
|
31
|
+
right: MediaControlRightElement[];
|
|
32
|
+
default: MediaControlLayerElement[];
|
|
33
|
+
seekEnabled: boolean;
|
|
34
|
+
};
|
|
9
35
|
/**
|
|
10
36
|
* `PLUGIN` that provides basic playback controls UI and a foundation for developing custom UI.
|
|
11
37
|
* @beta
|
|
12
38
|
* @remarks
|
|
13
39
|
* The methods exposed are to be used by the other plugins that extend the media control UI.
|
|
40
|
+
*
|
|
41
|
+
* Configuration options:
|
|
42
|
+
*
|
|
43
|
+
* - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
|
|
44
|
+
*
|
|
45
|
+
* - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
|
|
46
|
+
*
|
|
47
|
+
* - `chromeless`: boolean
|
|
14
48
|
*/
|
|
15
49
|
export declare class MediaControl extends UICorePlugin {
|
|
16
|
-
private customAreaElements;
|
|
17
|
-
private customAreaHandler?;
|
|
18
50
|
private buttonsColor;
|
|
19
51
|
private currentDurationValue;
|
|
20
52
|
private currentPositionValue;
|
|
@@ -33,6 +65,7 @@ export declare class MediaControl extends UICorePlugin {
|
|
|
33
65
|
private kibo;
|
|
34
66
|
private lastMouseX;
|
|
35
67
|
private lastMouseY;
|
|
68
|
+
private needsUpdate;
|
|
36
69
|
private persistConfig;
|
|
37
70
|
private rendered;
|
|
38
71
|
private settings;
|
|
@@ -46,7 +79,6 @@ export declare class MediaControl extends UICorePlugin {
|
|
|
46
79
|
private $multiCameraSelector;
|
|
47
80
|
private $playPauseToggle;
|
|
48
81
|
private $playStopToggle;
|
|
49
|
-
private $playbackRate;
|
|
50
82
|
private $position;
|
|
51
83
|
private $seekBarContainer;
|
|
52
84
|
private $seekBarHover;
|
|
@@ -217,7 +249,6 @@ export declare class MediaControl extends UICorePlugin {
|
|
|
217
249
|
*/
|
|
218
250
|
getElement(name: MediaControlElement): ZeptoResult | null;
|
|
219
251
|
putElement(name: MediaControlElement, element: ZeptoResult): void;
|
|
220
|
-
handleCustomArea(handler: (name: string, content: HTMLElement) => void): void;
|
|
221
252
|
/**
|
|
222
253
|
* Toggle the visibility of a media control element
|
|
223
254
|
* @param name - The name of the media control element
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaControl.d.ts","sourceRoot":"","sources":["../../../src/plugins/media-control/MediaControl.ts"],"names":[],"mappings":"AAOA,OAAO,EAEL,YAAY,EAMZ,IAAI,EACL,MAAM,cAAc,CAAA;AASrB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"MediaControl.d.ts","sourceRoot":"","sources":["../../../src/plugins/media-control/MediaControl.ts"],"names":[],"mappings":"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"}
|