@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.
@@ -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 = {}; // TODO & seekEnabled: boolean, ...
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.updateSettings);
10615
- this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
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
- this.updateSettings();
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.container && this.container.isReady) {
10861
- this.container.setVolume(value);
10869
+ if (this.core.activeContainer && this.core.activeContainer.isReady) {
10870
+ this.core.activeContainer.setVolume(value);
10862
10871
  }
10863
10872
  else {
10864
- this.listenToOnce(this.container, Events.CONTAINER_READY, () => {
10865
- this.container.setVolume(value);
10873
+ this.listenToOnce(this.core.activeContainer, Events.CONTAINER_READY, () => {
10874
+ this.core.activeContainer.setVolume(value);
10866
10875
  });
10867
10876
  }
10868
10877
  };
10869
- if (!this.container) {
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.container.fullscreen();
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.container &&
10962
- (this.container.getPlaybackType() !== Playback.LIVE ||
10963
- this.container.isDvrInUse())) {
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.container && this.container.seekPercentage(pos);
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 = JSON.stringify(this.settings) !== JSON.stringify(newSettings);
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
- highDefinitionUpdate(isHD) {
11109
- this.isHD = isHD;
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
- * Get the right panel area to append custom elements to
11186
- * @returns ZeptoSelector of the right panel element
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.4";
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=\"<%= backToLive %>\"><%= backToLive %></button>\n";
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.settingsUpdate);
14772
- this.settingsUpdate();
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
- const useDvrControls = this.core.options.useDvrControls !== false;
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
- live: this.core.i18n.t('live'),
14825
- backToLive: this.core.i18n.t('back_to_live'),
14830
+ i18n: this.core.i18n,
14826
14831
  }));
14827
- const mediaControl = this.core.getPlugin('media_control');
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;;;MAKtB;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;IAKpB;;OAEG;IACM,MAAM;CAoBhB"}
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.settingsUpdate);
65
- this.settingsUpdate();
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
- const useDvrControls = this.core.options.useDvrControls !== false;
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
- live: this.core.i18n.t('live'),
121
- backToLive: this.core.i18n.t('back_to_live'),
98
+ i18n: this.core.i18n,
122
99
  }));
123
- const mediaControl = this.core.getPlugin('media_control');
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' | 'seekBarContainer' | 'cc';
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 highDefinitionUpdate;
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
- * Get the right panel area to append custom elements to
235
- * @returns ZeptoSelector of the right panel element
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
- getLeftPanel(): any;
243
- getCenterPanel(): any;
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":"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"}
1
+ {"version":3,"file":"MediaControl.d.ts","sourceRoot":"","sources":["../../../src/plugins/media-control/MediaControl.ts"],"names":[],"mappings":"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"}