@gcorevideo/player 2.21.4 → 2.21.6
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/dvr-controls/dvr_controls.scss +7 -25
- package/assets/dvr-controls/index.ejs +2 -2
- package/assets/media-control/media-control.scss +8 -3
- package/assets/media-control/width370.scss +1 -1
- package/assets/style/theme.scss +1 -1
- package/dist/core.js +1 -1
- package/dist/index.css +603 -608
- package/dist/index.js +78 -77
- package/dist/plugins/index.css +1073 -1078
- package/dist/plugins/index.js +77 -74
- package/lib/plugins/dvr-controls/DvrControls.d.ts +0 -3
- package/lib/plugins/dvr-controls/DvrControls.d.ts.map +1 -1
- package/lib/plugins/dvr-controls/DvrControls.js +13 -38
- package/lib/plugins/media-control/MediaControl.d.ts +10 -14
- package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
- package/lib/plugins/media-control/MediaControl.js +63 -37
- package/lib/testUtils.d.ts +4 -1
- package/lib/testUtils.d.ts.map +1 -1
- package/lib/testUtils.js +10 -11
- package/package.json +1 -1
- package/src/plugins/dvr-controls/DvrControls.ts +16 -44
- package/src/plugins/dvr-controls/__tests__/DvrControls.test.ts +18 -22
- package/src/plugins/dvr-controls/__tests__/__snapshots__/DvrControls.test.ts.snap +6 -30
- package/src/plugins/media-control/MediaControl.ts +88 -50
- package/src/plugins/media-control/__tests__/MediaControl.test.ts +89 -0
- package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap +124 -0
- package/src/testUtils.ts +10 -11
- package/tsconfig.tsbuildinfo +1 -1
package/dist/plugins/index.js
CHANGED
|
@@ -10374,6 +10374,12 @@ const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
|
|
|
10374
10374
|
// Copyright 2014 Globo.com Player authors. All rights reserved.
|
|
10375
10375
|
// Use of this source code is governed by a BSD-style
|
|
10376
10376
|
// license that can be found in the {@link https://github.com/clappr/clappr-plugins/blob/master/LICENSE | LICENSE}.
|
|
10377
|
+
const DEFAULT_SETTINGS = {
|
|
10378
|
+
left: [],
|
|
10379
|
+
right: [],
|
|
10380
|
+
default: [],
|
|
10381
|
+
seekEnabled: true,
|
|
10382
|
+
};
|
|
10377
10383
|
/**
|
|
10378
10384
|
* Custom events emitted by the plugins to communicate with one another
|
|
10379
10385
|
* @beta
|
|
@@ -10388,7 +10394,8 @@ var MediaControlEvents;
|
|
|
10388
10394
|
const LEFT_ORDER = [
|
|
10389
10395
|
'playpause',
|
|
10390
10396
|
'playstop',
|
|
10391
|
-
'live',
|
|
10397
|
+
// 'live',
|
|
10398
|
+
'dvr',
|
|
10392
10399
|
'volume',
|
|
10393
10400
|
'position',
|
|
10394
10401
|
'duration',
|
|
@@ -10422,14 +10429,13 @@ class MediaControl extends UICorePlugin {
|
|
|
10422
10429
|
hideId = null;
|
|
10423
10430
|
hideVolumeId = null;
|
|
10424
10431
|
intendedVolume = 100;
|
|
10425
|
-
isHD = false;
|
|
10426
10432
|
keepVisible = false;
|
|
10427
10433
|
kibo;
|
|
10428
10434
|
lastMouseX = 0;
|
|
10429
10435
|
lastMouseY = 0;
|
|
10430
10436
|
persistConfig;
|
|
10431
10437
|
rendered = false;
|
|
10432
|
-
settings =
|
|
10438
|
+
settings = DEFAULT_SETTINGS;
|
|
10433
10439
|
userDisabled = false;
|
|
10434
10440
|
userKeepVisible = false;
|
|
10435
10441
|
verticalVolume = false;
|
|
@@ -10573,8 +10579,6 @@ class MediaControl extends UICorePlugin {
|
|
|
10573
10579
|
* @internal
|
|
10574
10580
|
*/
|
|
10575
10581
|
bindEvents() {
|
|
10576
|
-
// @ts-ignore
|
|
10577
|
-
this.stopListening();
|
|
10578
10582
|
this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
|
|
10579
10583
|
this.listenTo(this.core, Events.CORE_MOUSE_MOVE, this.show);
|
|
10580
10584
|
this.listenTo(this.core, Events.CORE_MOUSE_LEAVE, () => this.hide(this.options.hideMediaControlDelay));
|
|
@@ -10611,8 +10615,8 @@ class MediaControl extends UICorePlugin {
|
|
|
10611
10615
|
this.listenTo(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
|
|
10612
10616
|
this.listenTo(this.core.activeContainer, Events.CONTAINER_PROGRESS, this.updateProgressBar);
|
|
10613
10617
|
this.listenTo(this.core.activeContainer, Events.CONTAINER_SETTINGSUPDATE, this.updateSettings);
|
|
10614
|
-
this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.
|
|
10615
|
-
this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.
|
|
10618
|
+
this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
|
|
10619
|
+
this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.onHdUpdate);
|
|
10616
10620
|
this.listenTo(this.core.activeContainer, Events.CONTAINER_MEDIACONTROL_DISABLE, this.disable);
|
|
10617
10621
|
this.listenTo(this.core.activeContainer, Events.CONTAINER_MEDIACONTROL_ENABLE, this.enable);
|
|
10618
10622
|
this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.ended);
|
|
@@ -10658,7 +10662,13 @@ class MediaControl extends UICorePlugin {
|
|
|
10658
10662
|
// see https://github.com/clappr/clappr/issues/1127
|
|
10659
10663
|
if (!Fullscreen.fullscreenEnabled() && video.webkitSupportsFullscreen) {
|
|
10660
10664
|
this.fullScreenOnVideoTagSupported = true;
|
|
10661
|
-
|
|
10665
|
+
}
|
|
10666
|
+
this.updateSettings();
|
|
10667
|
+
if (this.core.activeContainer.getPlaybackType() === Playback.LIVE) {
|
|
10668
|
+
this.$el.addClass('live');
|
|
10669
|
+
}
|
|
10670
|
+
else {
|
|
10671
|
+
this.$el.removeClass('live');
|
|
10662
10672
|
}
|
|
10663
10673
|
}
|
|
10664
10674
|
updateVolumeUI() {
|
|
@@ -10667,8 +10677,6 @@ class MediaControl extends UICorePlugin {
|
|
|
10667
10677
|
return;
|
|
10668
10678
|
}
|
|
10669
10679
|
assert.ok(this.$volumeBarContainer, 'volume bar container must be present');
|
|
10670
|
-
// update volume bar scrubber/fill on bar mode
|
|
10671
|
-
// this.$volumeBarContainer.find('.bar-fill-2').css({});
|
|
10672
10680
|
const containerWidth = this.$volumeBarContainer.width();
|
|
10673
10681
|
assert.ok(this.$volumeBarBackground, 'volume bar background must be present');
|
|
10674
10682
|
const barWidth = this.$volumeBarBackground.width();
|
|
@@ -10856,17 +10864,18 @@ class MediaControl extends UICorePlugin {
|
|
|
10856
10864
|
// if the container is not ready etc
|
|
10857
10865
|
this.intendedVolume = value;
|
|
10858
10866
|
this.persistConfig && !isInitialVolume && Config.persist('volume', value);
|
|
10867
|
+
// TODO
|
|
10859
10868
|
const setWhenContainerReady = () => {
|
|
10860
|
-
if (this.
|
|
10861
|
-
this.
|
|
10869
|
+
if (this.core.activeContainer && this.core.activeContainer.isReady) {
|
|
10870
|
+
this.core.activeContainer.setVolume(value);
|
|
10862
10871
|
}
|
|
10863
10872
|
else {
|
|
10864
|
-
this.listenToOnce(this.
|
|
10865
|
-
this.
|
|
10873
|
+
this.listenToOnce(this.core.activeContainer, Events.CONTAINER_READY, () => {
|
|
10874
|
+
this.core.activeContainer.setVolume(value);
|
|
10866
10875
|
});
|
|
10867
10876
|
}
|
|
10868
10877
|
};
|
|
10869
|
-
if (!this.
|
|
10878
|
+
if (!this.core.activeContainer) {
|
|
10870
10879
|
this.listenToOnce(this, Events.MEDIACONTROL_CONTAINERCHANGED, () => setWhenContainerReady());
|
|
10871
10880
|
}
|
|
10872
10881
|
else {
|
|
@@ -10876,7 +10885,7 @@ class MediaControl extends UICorePlugin {
|
|
|
10876
10885
|
toggleFullscreen() {
|
|
10877
10886
|
if (!Browser.isMobile) {
|
|
10878
10887
|
this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name);
|
|
10879
|
-
this.
|
|
10888
|
+
this.core.activeContainer.fullscreen();
|
|
10880
10889
|
this.core.toggleFullscreen();
|
|
10881
10890
|
this.resetUserKeepVisible();
|
|
10882
10891
|
}
|
|
@@ -10888,6 +10897,7 @@ class MediaControl extends UICorePlugin {
|
|
|
10888
10897
|
this.changeTogglePlay();
|
|
10889
10898
|
this.bindContainerEvents();
|
|
10890
10899
|
this.updateSettings();
|
|
10900
|
+
// TODO remove
|
|
10891
10901
|
this.core.activeContainer.trigger(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
|
|
10892
10902
|
// TODO test
|
|
10893
10903
|
if (this.core.activeContainer.mediaControlDisabled) {
|
|
@@ -10958,9 +10968,9 @@ class MediaControl extends UICorePlugin {
|
|
|
10958
10968
|
}
|
|
10959
10969
|
// default to 100%
|
|
10960
10970
|
this.currentSeekBarPercentage = 100;
|
|
10961
|
-
if (this.
|
|
10962
|
-
(this.
|
|
10963
|
-
this.
|
|
10971
|
+
if (this.core.activeContainer &&
|
|
10972
|
+
(this.core.activeContainer.getPlaybackType() !== Playback.LIVE ||
|
|
10973
|
+
this.core.activeContainer.isDvrInUse())) {
|
|
10964
10974
|
this.currentSeekBarPercentage =
|
|
10965
10975
|
(this.currentPositionValue / this.currentDurationValue) * 100;
|
|
10966
10976
|
}
|
|
@@ -10987,16 +10997,10 @@ class MediaControl extends UICorePlugin {
|
|
|
10987
10997
|
const offsetX = MediaControl.getPageX(event) - this.$seekBarContainer.offset().left;
|
|
10988
10998
|
let pos = (offsetX / this.$seekBarContainer.width()) * 100;
|
|
10989
10999
|
pos = Math.min(100, Math.max(pos, 0));
|
|
10990
|
-
this.
|
|
11000
|
+
this.core.activeContainer && this.core.activeContainer.seekPercentage(pos);
|
|
10991
11001
|
this.setSeekPercentage(pos);
|
|
10992
11002
|
return false;
|
|
10993
11003
|
}
|
|
10994
|
-
setKeepVisible() {
|
|
10995
|
-
this.keepVisible = true;
|
|
10996
|
-
}
|
|
10997
|
-
resetKeepVisible() {
|
|
10998
|
-
this.keepVisible = false;
|
|
10999
|
-
}
|
|
11000
11004
|
setUserKeepVisible() {
|
|
11001
11005
|
this.userKeepVisible = true;
|
|
11002
11006
|
}
|
|
@@ -11074,7 +11078,12 @@ class MediaControl extends UICorePlugin {
|
|
|
11074
11078
|
default: [],
|
|
11075
11079
|
right: [],
|
|
11076
11080
|
}, this.core.activeContainer.settings);
|
|
11081
|
+
// TODO make order controlled via CSS
|
|
11077
11082
|
newSettings.left = orderByOrderPattern([...newSettings.left, 'clipsText', 'volume'], LEFT_ORDER);
|
|
11083
|
+
if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
|
|
11084
|
+
this.core.activePlayback.dvrEnabled) {
|
|
11085
|
+
newSettings.left.push('dvr');
|
|
11086
|
+
}
|
|
11078
11087
|
// actual order of the items appear rendered is controlled by CSS
|
|
11079
11088
|
newSettings.right = [
|
|
11080
11089
|
'fullscreen',
|
|
@@ -11096,17 +11105,18 @@ class MediaControl extends UICorePlugin {
|
|
|
11096
11105
|
}
|
|
11097
11106
|
removeArrayItem(newSettings.default, 'hd-indicator');
|
|
11098
11107
|
removeArrayItem(newSettings.left, 'hd-indicator');
|
|
11108
|
+
// TODO get from container's settings
|
|
11099
11109
|
if (this.core.activePlayback.name === 'html5_video') {
|
|
11100
11110
|
newSettings.seekEnabled = this.isSeekEnabledForHtml5Playback();
|
|
11101
11111
|
}
|
|
11102
|
-
const settingsChanged =
|
|
11112
|
+
const settingsChanged = serializeSettings(this.settings) !== serializeSettings(newSettings);
|
|
11103
11113
|
if (settingsChanged) {
|
|
11104
11114
|
this.settings = newSettings;
|
|
11105
11115
|
this.render();
|
|
11106
11116
|
}
|
|
11107
11117
|
}
|
|
11108
|
-
|
|
11109
|
-
|
|
11118
|
+
onHdUpdate(isHD) {
|
|
11119
|
+
// TODO render?
|
|
11110
11120
|
}
|
|
11111
11121
|
createCachedElements() {
|
|
11112
11122
|
const $layer = this.$el.find('.media-control-layer');
|
|
@@ -11168,7 +11178,7 @@ class MediaControl extends UICorePlugin {
|
|
|
11168
11178
|
const panel = this.getElementLocation(name);
|
|
11169
11179
|
if (panel) {
|
|
11170
11180
|
const current = panel.find(`[data-${name}]`);
|
|
11171
|
-
element.setAttribute(`data-${name}`,
|
|
11181
|
+
element.setAttribute(`data-${name}`, '');
|
|
11172
11182
|
// TODO test
|
|
11173
11183
|
if (current.length) {
|
|
11174
11184
|
if (current[0] === element) {
|
|
@@ -11182,16 +11192,16 @@ class MediaControl extends UICorePlugin {
|
|
|
11182
11192
|
}
|
|
11183
11193
|
}
|
|
11184
11194
|
/**
|
|
11185
|
-
*
|
|
11186
|
-
* @
|
|
11195
|
+
* Toggle the visibility of a media control element
|
|
11196
|
+
* @param name - The name of the media control element
|
|
11197
|
+
* @param show - Whether to show or hide the element
|
|
11187
11198
|
*/
|
|
11199
|
+
toggleElement(name, show) {
|
|
11200
|
+
this.$el.find(`[data-${name}]`).toggle(show);
|
|
11201
|
+
}
|
|
11188
11202
|
getRightPanel() {
|
|
11189
11203
|
return this.$el.find('.media-control-right-panel');
|
|
11190
11204
|
}
|
|
11191
|
-
/**
|
|
11192
|
-
* Get the left panel area to append custom elements to
|
|
11193
|
-
* @returns ZeptoSelector of the left panel element
|
|
11194
|
-
*/
|
|
11195
11205
|
getLeftPanel() {
|
|
11196
11206
|
return this.$el.find('.media-control-left-panel');
|
|
11197
11207
|
}
|
|
@@ -11390,7 +11400,6 @@ class MediaControl extends UICorePlugin {
|
|
|
11390
11400
|
this.hideVolumeBar(0);
|
|
11391
11401
|
}, 0);
|
|
11392
11402
|
this.parseColors();
|
|
11393
|
-
this.highDefinitionUpdate(this.isHD);
|
|
11394
11403
|
this.core.$el.append(this.el);
|
|
11395
11404
|
this.rendered = true;
|
|
11396
11405
|
this.updateVolumeUI();
|
|
@@ -11477,10 +11486,27 @@ class MediaControl extends UICorePlugin {
|
|
|
11477
11486
|
}
|
|
11478
11487
|
return null;
|
|
11479
11488
|
}
|
|
11489
|
+
onDvrStateChanged(dvrInUse) {
|
|
11490
|
+
if (dvrInUse) {
|
|
11491
|
+
this.$el.addClass('dvr');
|
|
11492
|
+
}
|
|
11493
|
+
else {
|
|
11494
|
+
this.$el.removeClass('dvr');
|
|
11495
|
+
}
|
|
11496
|
+
}
|
|
11480
11497
|
}
|
|
11481
11498
|
MediaControl.extend = function (properties) {
|
|
11482
11499
|
return extend(MediaControl, properties);
|
|
11483
11500
|
};
|
|
11501
|
+
function serializeSettings(s) {
|
|
11502
|
+
return s.left
|
|
11503
|
+
.slice()
|
|
11504
|
+
.sort()
|
|
11505
|
+
.concat(s.right.slice().sort())
|
|
11506
|
+
.concat(s.default.slice().sort())
|
|
11507
|
+
.concat([s.seekEnabled])
|
|
11508
|
+
.join(',');
|
|
11509
|
+
}
|
|
11484
11510
|
|
|
11485
11511
|
const VERSION$5 = '2.19.12';
|
|
11486
11512
|
// TODO disabled if no items added
|
|
@@ -14576,7 +14602,7 @@ class ClipsPlugin extends UICorePlugin {
|
|
|
14576
14602
|
|
|
14577
14603
|
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";
|
|
14578
14604
|
|
|
14579
|
-
var version$1 = "2.21.
|
|
14605
|
+
var version$1 = "2.21.6";
|
|
14580
14606
|
|
|
14581
14607
|
var packages = {
|
|
14582
14608
|
"node_modules/@clappr/core": {
|
|
@@ -14709,7 +14735,7 @@ class ContextMenu extends UIContainerPlugin {
|
|
|
14709
14735
|
};
|
|
14710
14736
|
}
|
|
14711
14737
|
|
|
14712
|
-
const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%=
|
|
14738
|
+
const dvrHTML = "<div class=\"live-info\" id=\"media-control-live\"><%= i18n.t('live') %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%= i18n.t('back_to_live') %>\" id=\"media-control-back-to-live\"><%= i18n.t('back_to_live') %></button>\n";
|
|
14713
14739
|
|
|
14714
14740
|
const T$b = 'plugins.dvr_controls';
|
|
14715
14741
|
/**
|
|
@@ -14754,7 +14780,6 @@ class DvrControls extends UICorePlugin {
|
|
|
14754
14780
|
get attributes() {
|
|
14755
14781
|
return {
|
|
14756
14782
|
class: 'dvr-controls',
|
|
14757
|
-
'data-dvr-controls': '',
|
|
14758
14783
|
};
|
|
14759
14784
|
}
|
|
14760
14785
|
/**
|
|
@@ -14762,37 +14787,17 @@ class DvrControls extends UICorePlugin {
|
|
|
14762
14787
|
*/
|
|
14763
14788
|
bindEvents() {
|
|
14764
14789
|
this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
|
|
14765
|
-
this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render);
|
|
14766
14790
|
this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
|
|
14767
14791
|
}
|
|
14768
14792
|
onCoreReady() {
|
|
14769
14793
|
const mediaControl = this.core.getPlugin('media_control');
|
|
14770
14794
|
assert(mediaControl, 'media_control plugin is required');
|
|
14771
|
-
this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.
|
|
14772
|
-
|
|
14795
|
+
this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
|
|
14796
|
+
// MediaControl has been rendered
|
|
14797
|
+
this.render();
|
|
14773
14798
|
}
|
|
14774
14799
|
bindContainerEvents() {
|
|
14775
14800
|
this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
|
|
14776
|
-
this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrChanged);
|
|
14777
|
-
}
|
|
14778
|
-
onDvrChanged(dvrInUse) {
|
|
14779
|
-
if (this.core.getPlaybackType() !== Playback.LIVE) {
|
|
14780
|
-
return;
|
|
14781
|
-
}
|
|
14782
|
-
this.render();
|
|
14783
|
-
const mediaControl = this.core.getPlugin('media_control');
|
|
14784
|
-
mediaControl.$el.addClass('live');
|
|
14785
|
-
if (dvrInUse) {
|
|
14786
|
-
mediaControl.$el
|
|
14787
|
-
.addClass('dvr')
|
|
14788
|
-
.find(
|
|
14789
|
-
// TODO add API, test
|
|
14790
|
-
'.media-control-indicator[data-position], .media-control-indicator[data-duration]')
|
|
14791
|
-
.hide();
|
|
14792
|
-
}
|
|
14793
|
-
else {
|
|
14794
|
-
mediaControl.$el.removeClass('dvr');
|
|
14795
|
-
}
|
|
14796
14801
|
}
|
|
14797
14802
|
click() {
|
|
14798
14803
|
const container = this.core.activeContainer;
|
|
@@ -14801,13 +14806,8 @@ class DvrControls extends UICorePlugin {
|
|
|
14801
14806
|
}
|
|
14802
14807
|
container.seek(container.getDuration());
|
|
14803
14808
|
}
|
|
14804
|
-
settingsUpdate() {
|
|
14805
|
-
this.core.getPlugin('media_control').$el.removeClass('live');
|
|
14806
|
-
this.render();
|
|
14807
|
-
}
|
|
14808
14809
|
shouldRender() {
|
|
14809
|
-
|
|
14810
|
-
return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
|
|
14810
|
+
return this.core.getPlaybackType() === Playback.LIVE;
|
|
14811
14811
|
}
|
|
14812
14812
|
/**
|
|
14813
14813
|
* @internal
|
|
@@ -14817,16 +14817,19 @@ class DvrControls extends UICorePlugin {
|
|
|
14817
14817
|
dvrEnabled: this.core.activePlayback?.dvrEnabled,
|
|
14818
14818
|
playbackType: this.core.getPlaybackType(),
|
|
14819
14819
|
});
|
|
14820
|
+
const mediaControl = this.core.getPlugin('media_control');
|
|
14821
|
+
if (!mediaControl) {
|
|
14822
|
+
return this;
|
|
14823
|
+
}
|
|
14820
14824
|
if (!this.shouldRender()) {
|
|
14821
14825
|
return this;
|
|
14822
14826
|
}
|
|
14827
|
+
mediaControl.toggleElement('duration', false);
|
|
14828
|
+
mediaControl.toggleElement('position', false);
|
|
14823
14829
|
this.$el.html(DvrControls.template({
|
|
14824
|
-
|
|
14825
|
-
backToLive: this.core.i18n.t('back_to_live'),
|
|
14830
|
+
i18n: this.core.i18n,
|
|
14826
14831
|
}));
|
|
14827
|
-
|
|
14828
|
-
mediaControl.$el.addClass('live');
|
|
14829
|
-
mediaControl.getLeftPanel().append(this.$el);
|
|
14832
|
+
mediaControl.putElement('dvr', this.el);
|
|
14830
14833
|
return this;
|
|
14831
14834
|
}
|
|
14832
14835
|
}
|
|
@@ -37,7 +37,6 @@ export declare class DvrControls extends UICorePlugin {
|
|
|
37
37
|
*/
|
|
38
38
|
get attributes(): {
|
|
39
39
|
class: string;
|
|
40
|
-
'data-dvr-controls': string;
|
|
41
40
|
};
|
|
42
41
|
/**
|
|
43
42
|
* @internal
|
|
@@ -45,9 +44,7 @@ export declare class DvrControls extends UICorePlugin {
|
|
|
45
44
|
bindEvents(): void;
|
|
46
45
|
private onCoreReady;
|
|
47
46
|
private bindContainerEvents;
|
|
48
|
-
private onDvrChanged;
|
|
49
47
|
private click;
|
|
50
|
-
private settingsUpdate;
|
|
51
48
|
private shouldRender;
|
|
52
49
|
/**
|
|
53
50
|
* @internal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DvrControls.d.ts","sourceRoot":"","sources":["../../../src/plugins/dvr-controls/DvrControls.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,YAAY,EAAY,MAAM,cAAc,CAAA;AAM7E,OAAO,gDAAgD,CAAA;AAMvD;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAEpD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACH,IAAa,UAAU
|
|
1
|
+
{"version":3,"file":"DvrControls.d.ts","sourceRoot":"","sources":["../../../src/plugins/dvr-controls/DvrControls.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,YAAY,EAAY,MAAM,cAAc,CAAA;AAM7E,OAAO,gDAAgD,CAAA;AAMvD;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAEpD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,YAAY;IAIpB;;OAEG;IACM,MAAM;CAyBhB"}
|
|
@@ -47,7 +47,6 @@ export class DvrControls extends UICorePlugin {
|
|
|
47
47
|
get attributes() {
|
|
48
48
|
return {
|
|
49
49
|
class: 'dvr-controls',
|
|
50
|
-
'data-dvr-controls': '',
|
|
51
50
|
};
|
|
52
51
|
}
|
|
53
52
|
/**
|
|
@@ -55,40 +54,18 @@ export class DvrControls extends UICorePlugin {
|
|
|
55
54
|
*/
|
|
56
55
|
bindEvents() {
|
|
57
56
|
this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
|
|
58
|
-
this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render);
|
|
59
57
|
this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
|
|
60
58
|
}
|
|
61
59
|
onCoreReady() {
|
|
62
60
|
const mediaControl = this.core.getPlugin('media_control');
|
|
63
61
|
assert(mediaControl, 'media_control plugin is required');
|
|
64
|
-
this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.
|
|
65
|
-
|
|
62
|
+
this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
|
|
63
|
+
// MediaControl has been rendered
|
|
64
|
+
this.render();
|
|
66
65
|
}
|
|
67
66
|
bindContainerEvents() {
|
|
67
|
+
trace(`${T} bindContainerEvents`);
|
|
68
68
|
this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
|
|
69
|
-
this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrChanged);
|
|
70
|
-
}
|
|
71
|
-
onDvrChanged(dvrInUse) {
|
|
72
|
-
trace(`${T} onDvrChanged`, {
|
|
73
|
-
dvrInUse,
|
|
74
|
-
});
|
|
75
|
-
if (this.core.getPlaybackType() !== Playback.LIVE) {
|
|
76
|
-
return;
|
|
77
|
-
}
|
|
78
|
-
this.render();
|
|
79
|
-
const mediaControl = this.core.getPlugin('media_control');
|
|
80
|
-
mediaControl.$el.addClass('live');
|
|
81
|
-
if (dvrInUse) {
|
|
82
|
-
mediaControl.$el
|
|
83
|
-
.addClass('dvr')
|
|
84
|
-
.find(
|
|
85
|
-
// TODO add API, test
|
|
86
|
-
'.media-control-indicator[data-position], .media-control-indicator[data-duration]')
|
|
87
|
-
.hide();
|
|
88
|
-
}
|
|
89
|
-
else {
|
|
90
|
-
mediaControl.$el.removeClass('dvr');
|
|
91
|
-
}
|
|
92
69
|
}
|
|
93
70
|
click() {
|
|
94
71
|
const container = this.core.activeContainer;
|
|
@@ -97,13 +74,8 @@ export class DvrControls extends UICorePlugin {
|
|
|
97
74
|
}
|
|
98
75
|
container.seek(container.getDuration());
|
|
99
76
|
}
|
|
100
|
-
settingsUpdate() {
|
|
101
|
-
this.core.getPlugin('media_control').$el.removeClass('live');
|
|
102
|
-
this.render();
|
|
103
|
-
}
|
|
104
77
|
shouldRender() {
|
|
105
|
-
|
|
106
|
-
return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
|
|
78
|
+
return this.core.getPlaybackType() === Playback.LIVE;
|
|
107
79
|
}
|
|
108
80
|
/**
|
|
109
81
|
* @internal
|
|
@@ -113,16 +85,19 @@ export class DvrControls extends UICorePlugin {
|
|
|
113
85
|
dvrEnabled: this.core.activePlayback?.dvrEnabled,
|
|
114
86
|
playbackType: this.core.getPlaybackType(),
|
|
115
87
|
});
|
|
88
|
+
const mediaControl = this.core.getPlugin('media_control');
|
|
89
|
+
if (!mediaControl) {
|
|
90
|
+
return this;
|
|
91
|
+
}
|
|
116
92
|
if (!this.shouldRender()) {
|
|
117
93
|
return this;
|
|
118
94
|
}
|
|
95
|
+
mediaControl.toggleElement('duration', false);
|
|
96
|
+
mediaControl.toggleElement('position', false);
|
|
119
97
|
this.$el.html(DvrControls.template({
|
|
120
|
-
|
|
121
|
-
backToLive: this.core.i18n.t('back_to_live'),
|
|
98
|
+
i18n: this.core.i18n,
|
|
122
99
|
}));
|
|
123
|
-
|
|
124
|
-
mediaControl.$el.addClass('live');
|
|
125
|
-
mediaControl.getLeftPanel().append(this.$el);
|
|
100
|
+
mediaControl.putElement('dvr', this.el);
|
|
126
101
|
return this;
|
|
127
102
|
}
|
|
128
103
|
}
|
|
@@ -5,7 +5,7 @@ import '../../../assets/media-control/media-control.scss';
|
|
|
5
5
|
* Media control elements, mount points for additional plugins
|
|
6
6
|
* @beta
|
|
7
7
|
*/
|
|
8
|
-
export type MediaControlElement = 'audiotracks' | 'clipText' | 'gear' | 'pip' | 'playbackRate' | '
|
|
8
|
+
export type MediaControlElement = 'audiotracks' | 'cc' | 'clipText' | 'dvr' | 'duration' | 'gear' | 'pip' | 'playbackRate' | 'position' | 'seekBarContainer';
|
|
9
9
|
/**
|
|
10
10
|
* Custom events emitted by the plugins to communicate with one another
|
|
11
11
|
* @beta
|
|
@@ -37,7 +37,6 @@ export declare class MediaControl extends UICorePlugin {
|
|
|
37
37
|
private hideId;
|
|
38
38
|
private hideVolumeId;
|
|
39
39
|
private intendedVolume;
|
|
40
|
-
private isHD;
|
|
41
40
|
private keepVisible;
|
|
42
41
|
private kibo;
|
|
43
42
|
private lastMouseX;
|
|
@@ -198,8 +197,6 @@ export declare class MediaControl extends UICorePlugin {
|
|
|
198
197
|
private renderSeekBar;
|
|
199
198
|
private drawDurationAndPosition;
|
|
200
199
|
private seek;
|
|
201
|
-
private setKeepVisible;
|
|
202
|
-
private resetKeepVisible;
|
|
203
200
|
private setUserKeepVisible;
|
|
204
201
|
private resetUserKeepVisible;
|
|
205
202
|
private isVisible;
|
|
@@ -207,7 +204,7 @@ export declare class MediaControl extends UICorePlugin {
|
|
|
207
204
|
private hide;
|
|
208
205
|
private updateCursorStyle;
|
|
209
206
|
private updateSettings;
|
|
210
|
-
private
|
|
207
|
+
private onHdUpdate;
|
|
211
208
|
private createCachedElements;
|
|
212
209
|
/**
|
|
213
210
|
* Get a media control element DOM node
|
|
@@ -231,16 +228,14 @@ export declare class MediaControl extends UICorePlugin {
|
|
|
231
228
|
getElement(name: MediaControlElement): ZeptoResult | null;
|
|
232
229
|
putElement(name: MediaControlElement, element: HTMLElement): void;
|
|
233
230
|
/**
|
|
234
|
-
*
|
|
235
|
-
* @
|
|
236
|
-
|
|
237
|
-
getRightPanel(): any;
|
|
238
|
-
/**
|
|
239
|
-
* Get the left panel area to append custom elements to
|
|
240
|
-
* @returns ZeptoSelector of the left panel element
|
|
231
|
+
* Toggle the visibility of a media control element
|
|
232
|
+
* @param name - The name of the media control element
|
|
233
|
+
* @param show - Whether to show or hide the element
|
|
241
234
|
*/
|
|
242
|
-
|
|
243
|
-
|
|
235
|
+
toggleElement(name: MediaControlElement, show: boolean): void;
|
|
236
|
+
private getRightPanel;
|
|
237
|
+
private getLeftPanel;
|
|
238
|
+
private getCenterPanel;
|
|
244
239
|
private resetIndicators;
|
|
245
240
|
private initializeIcons;
|
|
246
241
|
private setSeekPercentage;
|
|
@@ -275,5 +270,6 @@ export declare class MediaControl extends UICorePlugin {
|
|
|
275
270
|
disabledControlButton(): void;
|
|
276
271
|
private isSeekEnabledForHtml5Playback;
|
|
277
272
|
private getElementLocation;
|
|
273
|
+
private onDvrStateChanged;
|
|
278
274
|
}
|
|
279
275
|
//# sourceMappingURL=MediaControl.d.ts.map
|
|
@@ -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;AAG5C,OAAO,kDAAkD,CAAA;AAWzD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAC3B,aAAa,GACb,UAAU,GACV,MAAM,GACN,KAAK,GACL,cAAc,GACd,
|
|
1
|
+
{"version":3,"file":"MediaControl.d.ts","sourceRoot":"","sources":["../../../src/plugins/media-control/MediaControl.ts"],"names":[],"mappings":"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"}
|