@gcorevideo/player 2.26.5 → 2.26.7

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.
Files changed (12) hide show
  1. package/assets/media-control/media-control.ejs +3 -3
  2. package/assets/media-control/media-control.scss +1 -6
  3. package/dist/core.js +19 -13
  4. package/dist/index.css +1027 -1031
  5. package/dist/index.embed.js +23 -21
  6. package/dist/index.js +24 -22
  7. package/lib/plugins/seek-time/SeekTime.d.ts.map +1 -1
  8. package/lib/plugins/seek-time/SeekTime.js +4 -8
  9. package/package.json +1 -1
  10. package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap +6 -6
  11. package/src/plugins/seek-time/SeekTime.ts +4 -12
  12. package/tsconfig.tsbuildinfo +1 -1
package/dist/index.embed.js CHANGED
@@ -6118,9 +6118,12 @@ var Core = /*#__PURE__*/function (_UIObject) {
6118
6118
  var _this3 = this;
6119
6119
  this.disableResizeObserver();
6120
6120
  var checkSizeCallback = function checkSizeCallback() {
6121
+ var _this3$el$clientWidth, _this3$el$clientHeigh;
6122
+ var width = (_this3$el$clientWidth = _this3.el.clientWidth) !== null && _this3$el$clientWidth !== void 0 ? _this3$el$clientWidth : _this3.options.width;
6123
+ var height = (_this3$el$clientHeigh = _this3.el.clientHeight) !== null && _this3$el$clientHeigh !== void 0 ? _this3$el$clientHeigh : _this3.options.height;
6121
6124
  _this3.triggerResize({
6122
- width: _this3.el.clientWidth,
6123
- height: _this3.el.clientHeight
6125
+ width: width,
6126
+ height: height
6124
6127
  });
6125
6128
  };
6126
6129
  this.resizeObserverInterval = setInterval(checkSizeCallback, 500);
@@ -6210,12 +6213,15 @@ var Core = /*#__PURE__*/function (_UIObject) {
6210
6213
  }, {
6211
6214
  key: "handleWindowResize",
6212
6215
  value: function handleWindowResize(event) {
6216
+ var _this$el$clientWidth, _this$el$clientHeight;
6213
6217
  var orientation = window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
6214
6218
  if (this._screenOrientation === orientation) return;
6215
6219
  this._screenOrientation = orientation;
6220
+ var width = (_this$el$clientWidth = this.el.clientWidth) !== null && _this$el$clientWidth !== void 0 ? _this$el$clientWidth : this.options.width;
6221
+ var height = (_this$el$clientHeight = this.el.clientHeight) !== null && _this$el$clientHeight !== void 0 ? _this$el$clientHeight : this.options.height;
6216
6222
  this.triggerResize({
6217
- width: this.el.clientWidth,
6218
- height: this.el.clientHeight
6223
+ width: width,
6224
+ height: height
6219
6225
  });
6220
6226
  this.trigger(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, {
6221
6227
  event: event,
@@ -6531,7 +6537,7 @@ var Loader = (function () {
6531
6537
  plugins: {},
6532
6538
  playbacks: []
6533
6539
  };
6534
- var currentVersion = "0.11.4";
6540
+ var currentVersion = "0.11.5";
6535
6541
  return /*#__PURE__*/function () {
6536
6542
  /**
6537
6543
  * builds the loader
@@ -7671,7 +7677,7 @@ var HTML5Video$1 = /*#__PURE__*/function (_Playback) {
7671
7677
  key: "supportedVersion",
7672
7678
  get: function get() {
7673
7679
  return {
7674
- min: "0.11.4"
7680
+ min: "0.11.5"
7675
7681
  };
7676
7682
  }
7677
7683
  }, {
@@ -8433,7 +8439,7 @@ var HTML5Audio = /*#__PURE__*/function (_HTML5Video) {
8433
8439
  key: "supportedVersion",
8434
8440
  get: function get() {
8435
8441
  return {
8436
- min: "0.11.4"
8442
+ min: "0.11.5"
8437
8443
  };
8438
8444
  }
8439
8445
  }, {
@@ -8490,7 +8496,7 @@ var HTMLImg = /*#__PURE__*/function (_Playback) {
8490
8496
  key: "supportedVersion",
8491
8497
  get: function get() {
8492
8498
  return {
8493
- min: "0.11.4"
8499
+ min: "0.11.5"
8494
8500
  };
8495
8501
  }
8496
8502
  }, {
@@ -8573,7 +8579,7 @@ var NoOp = /*#__PURE__*/function (_Playback) {
8573
8579
  key: "supportedVersion",
8574
8580
  get: function get() {
8575
8581
  return {
8576
- min: "0.11.4"
8582
+ min: "0.11.5"
8577
8583
  };
8578
8584
  }
8579
8585
  }, {
@@ -8699,7 +8705,7 @@ var Strings = /*#__PURE__*/function (_CorePlugin) {
8699
8705
  key: "supportedVersion",
8700
8706
  get: function get() {
8701
8707
  return {
8702
- min: "0.11.4"
8708
+ min: "0.11.5"
8703
8709
  };
8704
8710
  }
8705
8711
  }, {
@@ -8841,7 +8847,7 @@ var SourcesPlugin = /*#__PURE__*/function (_CorePlugin) {
8841
8847
  key: "supportedVersion",
8842
8848
  get: function get() {
8843
8849
  return {
8844
- min: "0.11.4"
8850
+ min: "0.11.5"
8845
8851
  };
8846
8852
  }
8847
8853
  }, {
@@ -43361,9 +43367,9 @@ const FullscreenIOS = {
43361
43367
  },
43362
43368
  };
43363
43369
 
43364
- insertStyle("[data-player] {\n --bottom-panel: 40px;\n}\n\n.container .media-control-notransition {\n transition: none !important;\n}\n.container .player-poster .play-wrapper {\n opacity: 1;\n}\n.container.crop-video [data-html5-video] {\n object-fit: cover;\n}\n.container .player-poster .circle-poster {\n top: 50%;\n margin-top: -60px;\n left: 50%;\n margin-left: -60px;\n position: absolute;\n width: 120px;\n height: 120px;\n border: 2px solid white;\n border-radius: 50%;\n filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n filter: alpha(opacity=60);\n opacity: 1;\n box-shadow: 0 0 1px 0 white;\n}\n.container .player-poster .circle-poster svg {\n margin-left: 5px;\n width: 80px;\n}\n.container .spinner-three-bounce[data-spinner] > div {\n background-color: #ff5700;\n}\n\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n transform: rotate(270deg);\n float: none;\n display: block;\n position: absolute;\n margin: 0;\n top: -40px;\n padding: 0;\n margin-left: -32px;\n margin-top: -3px;\n width: 80px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {\n position: absolute;\n width: 100%;\n height: 100%;\n left: -5px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n display: none;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {\n margin-left: 11px;\n top: 7px;\n width: 80px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {\n margin-left: 11px;\n top: 1px;\n}\n.media-control-skin-1.w270 .media-control-dd__popup {\n max-width: 114px;\n}\n\n.media-control-skin-1.w370 .media-control-cc {\n width: 28px;\n}\n.media-control-skin-1.w370 .media-control-cc svg {\n height: 17px;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container {\n top: calc(50% - 150px);\n left: calc(50% - 125px);\n width: 250px;\n height: calc(100% - 32px);\n max-height: 300px;\n transform: none;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container .share-container-header {\n border: none;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {\n visibility: hidden;\n}\n.media-control-skin-1.w370 .media-control-quality {\n display: block;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera {\n margin-top: 0;\n margin-right: 10px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button {\n height: 32px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button svg {\n height: 17px;\n margin: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] {\n padding-left: 10px;\n padding-right: 12px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator {\n line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n font-size: 11px;\n line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-button {\n margin-left: 10px;\n height: 32px;\n font-size: 12px;\n line-height: 32px;\n text-shadow: none;\n letter-spacing: 0.6px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-button::before {\n width: 8px;\n height: 8px;\n margin-right: 4px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-info {\n margin-left: 10px;\n height: 32px;\n font-size: 12px;\n line-height: 32px;\n text-shadow: none;\n letter-spacing: 0.6px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-info::before {\n width: 8px;\n height: 8px;\n margin-right: 4px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n height: 33px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button svg {\n height: 17px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n line-height: 33px;\n font-size: 11px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n max-width: 50px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] {\n height: 32px;\n margin-right: 8px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n height: 17px;\n margin-top: 5px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n display: none;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n width: 0;\n height: 12px;\n top: 9px;\n padding: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-item {\n height: 32px;\n}\n.media-control-skin-1.w370 .media-control-dd__popup {\n max-width: 150px;\n}\n\n:root {\n --font-size-media-controls: 14px;\n --font-size-media-controls-dropdown: 16px;\n --gplayer-mc-font-size-dropdown: 16px;\n --player-vod-color: #005aff;\n --player-dvr-color: #fff;\n --player-live-color: #ff0101;\n --player-seekbar-current-color: #ff5700;\n --player-seekbar-buffer-color: #fff;\n --gplayer-mc-text-color: #fff;\n --gplayer-mc-text-dim-color: #fffffe;\n --gplayer-mc-popup-border-color: rgb(255 255 255 / 10%);\n --gplayer-mc-popup-bg: rgb(74 74 74 / 60%);\n}\n\n.media-control-skin-1 {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 9999;\n pointer-events: none;\n font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n font-size: var(--font-size-media-controls);\n}\n.media-control-skin-1.dragging {\n pointer-events: auto;\n cursor: grabbing !important;\n cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1.dragging * {\n cursor: grabbing !important;\n cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1 .media-control-icon {\n line-height: 0;\n letter-spacing: 0;\n speak: none;\n color: var(--gplayer-mc-text-color);\n vertical-align: middle;\n text-align: left;\n transition: all 0.1s ease;\n}\n.media-control-skin-1 .media-control-icon:hover {\n color: white;\n}\n.media-control-skin-1.media-control-hide .media-control-background[data-background] {\n opacity: 0;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] {\n bottom: -50px;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {\n opacity: 0;\n}\n.media-control-skin-1 .media-control-layer[data-controls] {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 0 12px 0 8px;\n height: var(--bottom-panel);\n vertical-align: middle;\n pointer-events: auto;\n transition: bottom 0.4s ease-out;\n display: flex;\n justify-content: space-between;\n}\n.media-control-skin-1 .media-control-left-panel {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n justify-content: flex-start;\n}\n.media-control-skin-1 .media-control-button,\n.media-control-skin-1 .media-control-indicator,\n.media-control-skin-1 .media-control-item {\n order: 50;\n}\n.media-control-skin-1 .media-control-item {\n display: flex;\n align-items: center;\n}\n.media-control-skin-1 [data-playpause],\n.media-control-skin-1 [data-playstop] {\n order: 1;\n}\n.media-control-skin-1 [data-volume] {\n order: 2;\n}\n.media-control-skin-1 [data-position] {\n order: 3;\n}\n.media-control-skin-1 [data-duration] {\n order: 3;\n}\n.media-control-skin-1 .media-control-center-panel {\n height: 100%;\n text-align: center;\n line-height: var(--bottom-panel);\n}\n.media-control-skin-1 .media-control-right-panel {\n display: flex;\n align-items: center;\n gap: 1rem;\n justify-content: flex-end;\n}\n@media (max-width: 420px) {\n .media-control-skin-1 .media-control-right-panel {\n gap: 0.5rem;\n }\n}\n.media-control-skin-1 button.media-control-button {\n background-color: transparent;\n border: 0;\n padding: 0;\n cursor: pointer;\n display: inline-block;\n height: 20px;\n width: 24px;\n}\n.media-control-skin-1 button.media-control-button svg {\n height: 20px;\n}\n.media-control-skin-1 button.media-control-button svg path {\n fill: white;\n}\n.media-control-skin-1 button.media-control-button:focus {\n outline: none;\n}\n.media-control-skin-1 button.media-control-button[data-play] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-pause] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-stop] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-fullscreen] {\n order: 100;\n background-color: transparent;\n border: 0;\n height: 40px;\n}\n.media-control-skin-1 button.media-control-button[data-hd-indicator] {\n background-color: transparent;\n border: 0;\n cursor: default;\n display: none !important;\n float: right;\n height: 100%;\n}\n.media-control-skin-1 .media-control-indicator[data-position], .media-control-skin-1 .media-control-indicator[data-duration] {\n display: flex;\n color: white;\n cursor: default;\n line-height: var(--bottom-panel);\n position: relative;\n}\n.media-control-skin-1 .media-control-indicator[data-position] {\n margin: 1px 0 0 7px;\n}\n.media-control-skin-1 .media-control-indicator[data-duration] {\n color: rgb(255, 255, 255);\n opacity: 0.5;\n margin-top: 1px;\n margin-right: 6px;\n}\n.media-control-skin-1 .media-control-indicator[data-duration]::before {\n content: \"|\";\n margin-right: 7px;\n}\n.media-control-skin-1 .bar-container[data-seekbar] {\n position: absolute;\n top: -11px;\n left: 0;\n display: inline-block;\n vertical-align: middle;\n width: 100%;\n height: 20px;\n cursor: pointer;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] {\n width: 100%;\n height: 3px;\n position: relative;\n top: 8px;\n background-color: #666;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-seekbar-buffer-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-seekbar-current-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-container[data-seekbar].seek-disabled {\n cursor: default;\n display: none;\n}\n.media-control-skin-1 .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {\n cursor: default;\n display: none;\n}\n.media-control-skin-1 .bar-scrubber[data-seekbar] {\n position: absolute;\n transform: translateX(-50%);\n top: -11.5px;\n left: 0;\n width: 20px;\n height: 20px;\n opacity: 1;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {\n position: absolute;\n left: 4.5px;\n top: 4.5px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background-color: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] {\n display: flex;\n justify-content: flex-start;\n height: var(--bottom-panel);\n cursor: pointer;\n box-sizing: border-box;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n bottom: 0;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n background-color: transparent;\n border: 0;\n box-sizing: content-box;\n height: var(--bottom-panel);\n width: 20px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n height: 20px;\n position: relative;\n top: 3px;\n margin-top: 7px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n fill: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {\n margin-left: 2px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] {\n position: relative;\n margin-left: 10px;\n top: 8px;\n width: 80px;\n height: 23px;\n padding: 3px 0;\n transition: width 0.2s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {\n height: 3px;\n border-radius: 100px;\n position: relative;\n top: 7px;\n background-color: #666;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n border-radius: 100px;\n background-color: white;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-vod-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {\n position: absolute;\n transform: translateX(-50%);\n top: 3px;\n margin-left: 3px;\n width: 16px;\n height: 16px;\n opacity: 1;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {\n position: absolute;\n left: 3px;\n top: 5px;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {\n float: left;\n width: 4px;\n padding-left: 2px;\n height: 12px;\n opacity: 0.5;\n box-shadow: inset 2px 0 0 white;\n transition: transform 0.2s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {\n box-shadow: inset 2px 0 0 #fff;\n opacity: 1;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {\n padding-left: 0;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n transform: scaleY(1.5);\n}\n.media-control-skin-1 .seek-time {\n height: 26px;\n line-height: 26px;\n bottom: 52px;\n border-radius: 3px;\n background-color: rgba(74, 74, 74, 0.7);\n}\n.media-control-skin-1 .seek-time span {\n letter-spacing: 0.8px;\n font-size: 14px;\n font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n}\n.media-control-skin-1 .seek-time .seek-time__pos {\n padding-left: 8px;\n padding-right: 8px;\n}\n.media-control-skin-1 .media-control-dd {\n display: flex;\n height: 32px;\n line-height: 32px;\n align-items: baseline;\n gap: 4px;\n vertical-align: baseline;\n padding: 0;\n background-color: transparent;\n color: var(--gplayer-mc-text-color);\n -webkit-font-smoothing: antialiased;\n border: none;\n cursor: pointer;\n}\n.media-control-skin-1 .media-control-dd__text {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 100px;\n}\n.media-control-skin-1 .media-control-dd.changing {\n animation: pulse 0.5s infinite alternate;\n}\n.media-control-skin-1 .media-control-dd svg {\n fill: var(--gplayer-mc-text-color);\n}\n.media-control-skin-1 .media-control-dd__arrow {\n width: 9px;\n height: 6px;\n}\n.media-control-skin-1 .media-control-dd__wrap {\n position: relative;\n}\n.media-control-skin-1 .media-control-dd__popup {\n max-width: 200px;\n list-style-type: none;\n position: absolute;\n box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n border: none;\n min-width: 60px;\n border-radius: 4px;\n bottom: 40px;\n right: -2px;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 5px 0;\n}\n.media-control-skin-1 .media-control-dd__popup li {\n font-size: var(--gplayer-mc-font-size-dropdown);\n text-align: right;\n height: 30px;\n}\n.media-control-skin-1 .media-control-dd__popup li a {\n display: block;\n text-decoration: none;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n padding: 5px 10px;\n line-height: 20px;\n color: #fffffe;\n}\n.media-control-skin-1 .media-control-dd__popup li a:hover {\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.4);\n color: var(--gplayer-mc-text-color);\n}\n.media-control-skin-1 .media-control-dd__popup li.current a {\n color: #f00;\n}\n.media-control-skin-1 .media-control-dd__popup li:first-child a {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-dd__popup li:last-child a {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n\n@keyframes pulse {\n 0% {\n color: #fff;\n }\n 50% {\n color: #ff0101;\n }\n 100% {\n color: #B80000;\n }\n}");
43370
+ insertStyle("[data-player] {\n --bottom-panel: 40px;\n}\n\n.container .media-control-notransition {\n transition: none !important;\n}\n.container .player-poster .play-wrapper {\n opacity: 1;\n}\n.container.crop-video [data-html5-video] {\n object-fit: cover;\n}\n.container .player-poster .circle-poster {\n top: 50%;\n margin-top: -60px;\n left: 50%;\n margin-left: -60px;\n position: absolute;\n width: 120px;\n height: 120px;\n border: 2px solid white;\n border-radius: 50%;\n filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n filter: alpha(opacity=60);\n opacity: 1;\n box-shadow: 0 0 1px 0 white;\n}\n.container .player-poster .circle-poster svg {\n margin-left: 5px;\n width: 80px;\n}\n.container .spinner-three-bounce[data-spinner] > div {\n background-color: #ff5700;\n}\n\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n transform: rotate(270deg);\n float: none;\n display: block;\n position: absolute;\n margin: 0;\n top: -40px;\n padding: 0;\n margin-left: -32px;\n margin-top: -3px;\n width: 80px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {\n position: absolute;\n width: 100%;\n height: 100%;\n left: -5px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n display: none;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {\n margin-left: 11px;\n top: 7px;\n width: 80px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {\n margin-left: 11px;\n top: 1px;\n}\n.media-control-skin-1.w270 .media-control-dd__popup {\n max-width: 114px;\n}\n\n.media-control-skin-1.w370 .media-control-cc {\n width: 28px;\n}\n.media-control-skin-1.w370 .media-control-cc svg {\n height: 17px;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container {\n top: calc(50% - 150px);\n left: calc(50% - 125px);\n width: 250px;\n height: calc(100% - 32px);\n max-height: 300px;\n transform: none;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container .share-container-header {\n border: none;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {\n visibility: hidden;\n}\n.media-control-skin-1.w370 .media-control-quality {\n display: block;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera {\n margin-top: 0;\n margin-right: 10px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button {\n height: 32px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button svg {\n height: 17px;\n margin: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] {\n padding-left: 10px;\n padding-right: 12px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator {\n line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n font-size: 11px;\n line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-button {\n margin-left: 10px;\n height: 32px;\n font-size: 12px;\n line-height: 32px;\n text-shadow: none;\n letter-spacing: 0.6px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-button::before {\n width: 8px;\n height: 8px;\n margin-right: 4px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-info {\n margin-left: 10px;\n height: 32px;\n font-size: 12px;\n line-height: 32px;\n text-shadow: none;\n letter-spacing: 0.6px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-info::before {\n width: 8px;\n height: 8px;\n margin-right: 4px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n height: 33px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button svg {\n height: 17px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n line-height: 33px;\n font-size: 11px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n max-width: 50px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] {\n height: 32px;\n margin-right: 8px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n height: 17px;\n margin-top: 5px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n display: none;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n width: 0;\n height: 12px;\n top: 9px;\n padding: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-item {\n height: 32px;\n}\n.media-control-skin-1.w370 .media-control-dd__popup {\n max-width: 150px;\n}\n\n:root {\n --font-size-media-controls: 14px;\n --font-size-media-controls-dropdown: 16px;\n --gplayer-mc-font-size-dropdown: 16px;\n --player-vod-color: #005aff;\n --player-dvr-color: #fff;\n --player-live-color: #ff0101;\n --player-seekbar-current-color: #ff5700;\n --player-seekbar-buffer-color: #fff;\n --gplayer-mc-text-color: #fff;\n --gplayer-mc-text-dim-color: #fffffe;\n --gplayer-mc-popup-border-color: rgb(255 255 255 / 10%);\n --gplayer-mc-popup-bg: rgb(74 74 74 / 60%);\n}\n\n.media-control-skin-1 {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 9999;\n pointer-events: none;\n font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n font-size: var(--font-size-media-controls);\n}\n.media-control-skin-1.dragging {\n pointer-events: auto;\n cursor: grabbing !important;\n cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1.dragging * {\n cursor: grabbing !important;\n cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1 .media-control-icon {\n line-height: 0;\n letter-spacing: 0;\n speak: none;\n color: var(--gplayer-mc-text-color);\n vertical-align: middle;\n text-align: left;\n transition: all 0.1s ease;\n}\n.media-control-skin-1 .media-control-icon:hover {\n color: white;\n}\n.media-control-skin-1.media-control-hide .media-control-background[data-background] {\n opacity: 0;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] {\n bottom: -50px;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {\n opacity: 0;\n}\n.media-control-skin-1 .media-control-layer[data-controls] {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 0 12px 0 8px;\n height: var(--bottom-panel);\n vertical-align: middle;\n pointer-events: auto;\n transition: bottom 0.4s ease-out;\n display: flex;\n justify-content: space-between;\n}\n.media-control-skin-1 .media-control-left-panel {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n justify-content: flex-start;\n}\n.media-control-skin-1 .media-control-button,\n.media-control-skin-1 .media-control-indicator,\n.media-control-skin-1 .media-control-item {\n order: 50;\n}\n.media-control-skin-1 .media-control-item {\n display: flex;\n align-items: center;\n}\n.media-control-skin-1 [data-playpause],\n.media-control-skin-1 [data-playstop] {\n order: 1;\n}\n.media-control-skin-1 [data-volume] {\n order: 2;\n}\n.media-control-skin-1 [data-position] {\n order: 3;\n}\n.media-control-skin-1 [data-duration] {\n order: 3;\n}\n.media-control-skin-1 .media-control-center-panel {\n height: 100%;\n text-align: center;\n line-height: var(--bottom-panel);\n}\n.media-control-skin-1 .media-control-right-panel {\n display: flex;\n align-items: center;\n gap: 1rem;\n justify-content: flex-end;\n}\n@media (max-width: 420px) {\n .media-control-skin-1 .media-control-right-panel {\n gap: 0.5rem;\n }\n}\n.media-control-skin-1 button.media-control-button {\n background-color: transparent;\n border: 0;\n padding: 0;\n cursor: pointer;\n display: inline-block;\n height: 20px;\n width: 24px;\n}\n.media-control-skin-1 button.media-control-button svg {\n height: 20px;\n}\n.media-control-skin-1 button.media-control-button svg path {\n fill: white;\n}\n.media-control-skin-1 button.media-control-button:focus {\n outline: none;\n}\n.media-control-skin-1 button.media-control-button[data-play] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-pause] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-stop] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-fullscreen] {\n order: 100;\n background-color: transparent;\n border: 0;\n height: 40px;\n}\n.media-control-skin-1 button.media-control-button[data-hd-indicator] {\n background-color: transparent;\n border: 0;\n cursor: default;\n display: none !important;\n float: right;\n height: 100%;\n}\n.media-control-skin-1 .media-control-indicator[data-position], .media-control-skin-1 .media-control-indicator[data-duration] {\n display: flex;\n color: white;\n cursor: default;\n line-height: var(--bottom-panel);\n position: relative;\n}\n.media-control-skin-1 .media-control-indicator[data-position] {\n margin: 1px 0 0 7px;\n}\n.media-control-skin-1 .media-control-indicator[data-duration] {\n color: rgb(255, 255, 255);\n opacity: 0.5;\n margin-top: 1px;\n margin-right: 6px;\n}\n.media-control-skin-1 .media-control-indicator[data-duration]::before {\n content: \"|\";\n margin-right: 7px;\n}\n.media-control-skin-1 .bar-container[data-seekbar] {\n position: absolute;\n top: -11px;\n left: 0;\n display: inline-block;\n vertical-align: middle;\n width: 100%;\n height: 20px;\n cursor: pointer;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] {\n width: 100%;\n height: 3px;\n position: relative;\n top: 8px;\n background-color: #666;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-seekbar-buffer-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-seekbar-current-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-container[data-seekbar].seek-disabled {\n cursor: default;\n display: none;\n}\n.media-control-skin-1 .bar-scrubber[data-seekbar] {\n position: absolute;\n transform: translateX(-50%);\n top: 0;\n left: 0;\n width: 20px;\n height: 20px;\n opacity: 1;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {\n position: absolute;\n left: 4.5px;\n top: 4.5px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background-color: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] {\n display: flex;\n justify-content: flex-start;\n height: var(--bottom-panel);\n cursor: pointer;\n box-sizing: border-box;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n bottom: 0;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n background-color: transparent;\n border: 0;\n box-sizing: content-box;\n height: var(--bottom-panel);\n width: 20px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n height: 20px;\n position: relative;\n top: 3px;\n margin-top: 7px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n fill: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {\n margin-left: 2px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] {\n position: relative;\n margin-left: 10px;\n top: 8px;\n width: 80px;\n height: 23px;\n padding: 3px 0;\n transition: width 0.2s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {\n height: 3px;\n border-radius: 100px;\n position: relative;\n top: 7px;\n background-color: #666;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n border-radius: 100px;\n background-color: white;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-vod-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {\n position: absolute;\n transform: translateX(-50%);\n top: 3px;\n margin-left: 3px;\n width: 16px;\n height: 16px;\n opacity: 1;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {\n position: absolute;\n left: 3px;\n top: 5px;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {\n float: left;\n width: 4px;\n padding-left: 2px;\n height: 12px;\n opacity: 0.5;\n box-shadow: inset 2px 0 0 white;\n transition: transform 0.2s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {\n box-shadow: inset 2px 0 0 #fff;\n opacity: 1;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {\n padding-left: 0;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n transform: scaleY(1.5);\n}\n.media-control-skin-1 .seek-time {\n height: 26px;\n line-height: 26px;\n bottom: 52px;\n border-radius: 3px;\n background-color: rgba(74, 74, 74, 0.7);\n}\n.media-control-skin-1 .seek-time span {\n letter-spacing: 0.8px;\n font-size: 14px;\n font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n}\n.media-control-skin-1 .seek-time .seek-time__pos {\n padding-left: 8px;\n padding-right: 8px;\n}\n.media-control-skin-1 .media-control-dd {\n display: flex;\n height: 32px;\n line-height: 32px;\n align-items: baseline;\n gap: 4px;\n vertical-align: baseline;\n padding: 0;\n background-color: transparent;\n color: var(--gplayer-mc-text-color);\n -webkit-font-smoothing: antialiased;\n border: none;\n cursor: pointer;\n}\n.media-control-skin-1 .media-control-dd__text {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 100px;\n}\n.media-control-skin-1 .media-control-dd.changing {\n animation: pulse 0.5s infinite alternate;\n}\n.media-control-skin-1 .media-control-dd svg {\n fill: var(--gplayer-mc-text-color);\n}\n.media-control-skin-1 .media-control-dd__arrow {\n width: 9px;\n height: 6px;\n}\n.media-control-skin-1 .media-control-dd__wrap {\n position: relative;\n}\n.media-control-skin-1 .media-control-dd__popup {\n max-width: 200px;\n list-style-type: none;\n position: absolute;\n box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n border: none;\n min-width: 60px;\n border-radius: 4px;\n bottom: 40px;\n right: -2px;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 5px 0;\n}\n.media-control-skin-1 .media-control-dd__popup li {\n font-size: var(--gplayer-mc-font-size-dropdown);\n text-align: right;\n height: 30px;\n}\n.media-control-skin-1 .media-control-dd__popup li a {\n display: block;\n text-decoration: none;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n padding: 5px 10px;\n line-height: 20px;\n color: #fffffe;\n}\n.media-control-skin-1 .media-control-dd__popup li a:hover {\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.4);\n color: var(--gplayer-mc-text-color);\n}\n.media-control-skin-1 .media-control-dd__popup li.current a {\n color: #f00;\n}\n.media-control-skin-1 .media-control-dd__popup li:first-child a {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-dd__popup li:last-child a {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n\n@keyframes pulse {\n 0% {\n color: #fff;\n }\n 50% {\n color: #ff0101;\n }\n 100% {\n color: #B80000;\n }\n}");
43365
43371
 
43366
- 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 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\" || setting === \"clips\") {\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 ([\"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";
43372
+ 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 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 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 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\" || setting === \"clips\") {\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 ([\"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";
43367
43373
 
43368
43374
  const playIcon = "<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_1564)\">\n <path d=\"M6 3V20L19.3571 11.5L6 3Z\" fill=\"#C9C9C9\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_28_1564\">\n <rect width=\"24\" height=\"24\" fill=\"white\"/>\n </clipPath>\n </defs>\n</svg>\n";
43369
43375
 
@@ -49547,21 +49553,17 @@ class SeekTime extends UICorePlugin {
49547
49553
  this.duration = total;
49548
49554
  this.update();
49549
49555
  }
49550
- showTime(event) {
49556
+ showTime(_, pos) {
49551
49557
  this.hoveringOverSeekBar = true;
49552
- this.calculateHoverPosition(event);
49558
+ this.calculateHoverPosition(pos);
49553
49559
  this.update();
49554
49560
  }
49555
49561
  hideTime() {
49556
49562
  this.hoveringOverSeekBar = false;
49557
49563
  this.update();
49558
49564
  }
49559
- // TODO delegate calculation to the MediaControl plugin
49560
- calculateHoverPosition(event) {
49561
- const mediaControl = this.core.getPlugin('media_control');
49562
- const offset = event.pageX - mediaControl.$seekBarContainer.offset().left;
49563
- // proportion into the seek bar that the mouse is hovered over 0-1
49564
- this.hoverPosition = Math.min(1, Math.max(offset / mediaControl.$seekBarContainer.width(), 0));
49565
+ calculateHoverPosition(pos) {
49566
+ this.hoverPosition = pos;
49565
49567
  }
49566
49568
  getSeekTime() {
49567
49569
  return this.isLiveStreamWithDvr
package/dist/index.js CHANGED
@@ -6273,9 +6273,12 @@ var Core = /*#__PURE__*/function (_UIObject) {
6273
6273
  var _this3 = this;
6274
6274
  this.disableResizeObserver();
6275
6275
  var checkSizeCallback = function checkSizeCallback() {
6276
+ var _this3$el$clientWidth, _this3$el$clientHeigh;
6277
+ var width = (_this3$el$clientWidth = _this3.el.clientWidth) !== null && _this3$el$clientWidth !== void 0 ? _this3$el$clientWidth : _this3.options.width;
6278
+ var height = (_this3$el$clientHeigh = _this3.el.clientHeight) !== null && _this3$el$clientHeigh !== void 0 ? _this3$el$clientHeigh : _this3.options.height;
6276
6279
  _this3.triggerResize({
6277
- width: _this3.el.clientWidth,
6278
- height: _this3.el.clientHeight
6280
+ width: width,
6281
+ height: height
6279
6282
  });
6280
6283
  };
6281
6284
  this.resizeObserverInterval = setInterval(checkSizeCallback, 500);
@@ -6365,12 +6368,15 @@ var Core = /*#__PURE__*/function (_UIObject) {
6365
6368
  }, {
6366
6369
  key: "handleWindowResize",
6367
6370
  value: function handleWindowResize(event) {
6371
+ var _this$el$clientWidth, _this$el$clientHeight;
6368
6372
  var orientation = window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
6369
6373
  if (this._screenOrientation === orientation) return;
6370
6374
  this._screenOrientation = orientation;
6375
+ var width = (_this$el$clientWidth = this.el.clientWidth) !== null && _this$el$clientWidth !== void 0 ? _this$el$clientWidth : this.options.width;
6376
+ var height = (_this$el$clientHeight = this.el.clientHeight) !== null && _this$el$clientHeight !== void 0 ? _this$el$clientHeight : this.options.height;
6371
6377
  this.triggerResize({
6372
- width: this.el.clientWidth,
6373
- height: this.el.clientHeight
6378
+ width: width,
6379
+ height: height
6374
6380
  });
6375
6381
  this.trigger(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, {
6376
6382
  event: event,
@@ -6686,7 +6692,7 @@ var Loader = (function () {
6686
6692
  plugins: {},
6687
6693
  playbacks: []
6688
6694
  };
6689
- var currentVersion = "0.11.4";
6695
+ var currentVersion = "0.11.5";
6690
6696
  return /*#__PURE__*/function () {
6691
6697
  /**
6692
6698
  * builds the loader
@@ -7826,7 +7832,7 @@ var HTML5Video$1 = /*#__PURE__*/function (_Playback) {
7826
7832
  key: "supportedVersion",
7827
7833
  get: function get() {
7828
7834
  return {
7829
- min: "0.11.4"
7835
+ min: "0.11.5"
7830
7836
  };
7831
7837
  }
7832
7838
  }, {
@@ -8588,7 +8594,7 @@ var HTML5Audio = /*#__PURE__*/function (_HTML5Video) {
8588
8594
  key: "supportedVersion",
8589
8595
  get: function get() {
8590
8596
  return {
8591
- min: "0.11.4"
8597
+ min: "0.11.5"
8592
8598
  };
8593
8599
  }
8594
8600
  }, {
@@ -8645,7 +8651,7 @@ var HTMLImg = /*#__PURE__*/function (_Playback) {
8645
8651
  key: "supportedVersion",
8646
8652
  get: function get() {
8647
8653
  return {
8648
- min: "0.11.4"
8654
+ min: "0.11.5"
8649
8655
  };
8650
8656
  }
8651
8657
  }, {
@@ -8728,7 +8734,7 @@ var NoOp = /*#__PURE__*/function (_Playback) {
8728
8734
  key: "supportedVersion",
8729
8735
  get: function get() {
8730
8736
  return {
8731
- min: "0.11.4"
8737
+ min: "0.11.5"
8732
8738
  };
8733
8739
  }
8734
8740
  }, {
@@ -8854,7 +8860,7 @@ var Strings = /*#__PURE__*/function (_CorePlugin) {
8854
8860
  key: "supportedVersion",
8855
8861
  get: function get() {
8856
8862
  return {
8857
- min: "0.11.4"
8863
+ min: "0.11.5"
8858
8864
  };
8859
8865
  }
8860
8866
  }, {
@@ -8996,7 +9002,7 @@ var SourcesPlugin = /*#__PURE__*/function (_CorePlugin) {
8996
9002
  key: "supportedVersion",
8997
9003
  get: function get() {
8998
9004
  return {
8999
- min: "0.11.4"
9005
+ min: "0.11.5"
9000
9006
  };
9001
9007
  }
9002
9008
  }, {
@@ -43259,11 +43265,11 @@ class Player {
43259
43265
  }
43260
43266
  }
43261
43267
 
43262
- var version$1 = "2.26.5";
43268
+ var version$1 = "2.26.7";
43263
43269
 
43264
43270
  var packages = {
43265
43271
  "node_modules/@clappr/core": {
43266
- version: "0.11.4"},
43272
+ version: "0.11.5"},
43267
43273
  "node_modules/dashjs": {
43268
43274
  version: "4.7.4"},
43269
43275
  "node_modules/hls.js": {
@@ -43546,7 +43552,7 @@ const FullscreenIOS = {
43546
43552
  },
43547
43553
  };
43548
43554
 
43549
- 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 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\" || setting === \"clips\") {\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 ([\"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";
43555
+ 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 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 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 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\" || setting === \"clips\") {\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 ([\"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";
43550
43556
 
43551
43557
  const playIcon = "<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_1564)\">\n <path d=\"M6 3V20L19.3571 11.5L6 3Z\" fill=\"#C9C9C9\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_28_1564\">\n <rect width=\"24\" height=\"24\" fill=\"white\"/>\n </clipPath>\n </defs>\n</svg>\n";
43552
43558
 
@@ -50773,21 +50779,17 @@ class SeekTime extends UICorePlugin {
50773
50779
  this.duration = total;
50774
50780
  this.update();
50775
50781
  }
50776
- showTime(event) {
50782
+ showTime(_, pos) {
50777
50783
  this.hoveringOverSeekBar = true;
50778
- this.calculateHoverPosition(event);
50784
+ this.calculateHoverPosition(pos);
50779
50785
  this.update();
50780
50786
  }
50781
50787
  hideTime() {
50782
50788
  this.hoveringOverSeekBar = false;
50783
50789
  this.update();
50784
50790
  }
50785
- // TODO delegate calculation to the MediaControl plugin
50786
- calculateHoverPosition(event) {
50787
- const mediaControl = this.core.getPlugin('media_control');
50788
- const offset = event.pageX - mediaControl.$seekBarContainer.offset().left;
50789
- // proportion into the seek bar that the mouse is hovered over 0-1
50790
- this.hoverPosition = Math.min(1, Math.max(offset / mediaControl.$seekBarContainer.width(), 0));
50791
+ calculateHoverPosition(pos) {
50792
+ this.hoverPosition = pos;
50791
50793
  }
50792
50794
  getSeekTime() {
50793
50795
  return this.isLiveStreamWithDvr
package/lib/plugins/seek-time/SeekTime.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SeekTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/seek-time/SeekTime.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,YAAY,EAAmB,MAAM,cAAc,CAAA;AAO9E,OAAO,0CAA0C,CAAA;AAGjD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAMD;;;;;GAKG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD,IAAa,UAAU;;MAItB;IAED,OAAO,KAAK,mBAAmB,GAM9B;IAED,OAAO,KAAK,YAAY,GAKvB;IAED,OAAO,CAAC,mBAAmB,CAAQ;IAEnC,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,OAAO,CAAC,QAAQ,CAAI;IAEpB;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,MAAM;IA6Cd,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACM,MAAM;IAQf,OAAO,CAAC,KAAK;CAGd"}
1
+ {"version":3,"file":"SeekTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/seek-time/SeekTime.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,YAAY,EAAmB,MAAM,cAAc,CAAA;AAO9E,OAAO,0CAA0C,CAAA;AAGjD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAMD;;;;;GAKG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD,IAAa,UAAU;;MAItB;IAED,OAAO,KAAK,mBAAmB,GAM9B;IAED,OAAO,KAAK,YAAY,GAKvB;IAED,OAAO,CAAC,mBAAmB,CAAQ;IAEnC,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,OAAO,CAAC,QAAQ,CAAI;IAEpB;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,MAAM;IA6Cd,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACM,MAAM;IAQf,OAAO,CAAC,KAAK;CAGd"}
package/lib/plugins/seek-time/SeekTime.js CHANGED
@@ -63,21 +63,17 @@ export class SeekTime extends UICorePlugin {
63
63
  this.duration = total;
64
64
  this.update();
65
65
  }
66
- showTime(event) {
66
+ showTime(_, pos) {
67
67
  this.hoveringOverSeekBar = true;
68
- this.calculateHoverPosition(event);
68
+ this.calculateHoverPosition(pos);
69
69
  this.update();
70
70
  }
71
71
  hideTime() {
72
72
  this.hoveringOverSeekBar = false;
73
73
  this.update();
74
74
  }
75
- // TODO delegate calculation to the MediaControl plugin
76
- calculateHoverPosition(event) {
77
- const mediaControl = this.core.getPlugin('media_control');
78
- const offset = event.pageX - mediaControl.$seekBarContainer.offset().left;
79
- // proportion into the seek bar that the mouse is hovered over 0-1
80
- this.hoverPosition = Math.min(1, Math.max(offset / mediaControl.$seekBarContainer.width(), 0));
75
+ calculateHoverPosition(pos) {
76
+ this.hoverPosition = pos;
81
77
  }
82
78
  getSeekTime() {
83
79
  return this.isLiveStreamWithDvr
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gcorevideo/player",
3
- "version": "2.26.5",
3
+ "version": "2.26.7",
4
4
  "description": "Gcore JavaScript video player",
5
5
  "main": "dist/index.js",
6
6
  "type": "module",
package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap CHANGED
@@ -347,9 +347,9 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
347
347
  <div class="bar-fill-2 gcore-skin-main-color" data-seekbar="" style="width: 0%;"></div>
348
348
  <div class="bar-hover" data-seekbar=""></div>
349
349
  </div>
350
- </div>
351
- <div class="bar-scrubber" data-seekbar="" style="left: 0%;">
352
- <div class="bar-scrubber-icon gcore-skin-main-color" data-seekbar=""></div>
350
+ <div class="bar-scrubber" data-seekbar="" style="left: 0%;">
351
+ <div class="bar-scrubber-icon gcore-skin-main-color" data-seekbar=""></div>
352
+ </div>
353
353
  </div>
354
354
 
355
355
  </div>
@@ -413,9 +413,9 @@ exports[`MediaControl > seekbar > should render 1`] = `
413
413
  <div class="bar-fill-2 gcore-skin-main-color" data-seekbar="" style="width: 0%;"></div>
414
414
  <div class="bar-hover" data-seekbar=""></div>
415
415
  </div>
416
- </div>
417
- <div class="bar-scrubber" data-seekbar="" style="left: 0%;">
418
- <div class="bar-scrubber-icon gcore-skin-main-color" data-seekbar=""></div>
416
+ <div class="bar-scrubber" data-seekbar="" style="left: 0%;">
417
+ <div class="bar-scrubber-icon gcore-skin-main-color" data-seekbar=""></div>
418
+ </div>
419
419
  </div>
420
420
 
421
421
  </div>
package/src/plugins/seek-time/SeekTime.ts CHANGED
@@ -124,9 +124,9 @@ export class SeekTime extends UICorePlugin {
124
124
  this.update()
125
125
  }
126
126
 
127
- private showTime(event: MouseEvent) {
127
+ private showTime(_: MouseEvent, pos: number) {
128
128
  this.hoveringOverSeekBar = true
129
- this.calculateHoverPosition(event)
129
+ this.calculateHoverPosition(pos)
130
130
  this.update()
131
131
  }
132
132
 
@@ -135,16 +135,8 @@ export class SeekTime extends UICorePlugin {
135
135
  this.update()
136
136
  }
137
137
 
138
- // TODO delegate calculation to the MediaControl plugin
139
- private calculateHoverPosition(event: MouseEvent) {
140
- const mediaControl = this.core.getPlugin('media_control')
141
- const offset = event.pageX - mediaControl.$seekBarContainer.offset().left
142
-
143
- // proportion into the seek bar that the mouse is hovered over 0-1
144
- this.hoverPosition = Math.min(
145
- 1,
146
- Math.max(offset / mediaControl.$seekBarContainer.width(), 0),
147
- )
138
+ private calculateHoverPosition(pos: number) {
139
+ this.hoverPosition = pos
148
140
  }
149
141
 
150
142
  private getSeekTime() {