@desynova-digital/player 4.0.96 → 4.0.97

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 (3) hide show
  1. package/components/AudioMeter.js +2 -7
  2. package/components/Player.js +10 -9
  3. package/package.json +1 -1
package/components/AudioMeter.js CHANGED
@@ -40,9 +40,7 @@ var propTypes = {
40
40
  var defaultProps = {
41
41
  height: 0
42
42
  };
43
- var RangeBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n right: -12px;\n background-color: ", ";\n height: 100%;\n overflow: hidden;\n .range {\n color: #aaaaaa;\n font-family: SFUIText-Medium;\n text-align: right;\n font-size: 8px;\n box-sizing: border-box;\n }\n"])), function (props) {
44
- return props.isFullscreen ? '#000' : 'unset';
45
- });
43
+ var RangeBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n right: -12px;\n height: 100%;\n overflow: hidden;\n .range {\n color: #aaaaaa;\n font-family: SFUIText-Medium;\n text-align: right;\n font-size: 8px;\n box-sizing: border-box;\n }\n"])));
46
44
  var MeterBlock = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n .track-block {\n position: relative;\n width: 15px;\n height: 100%;\n overflow: visible;\n &.left-track,\n &.right-track {\n &:after {\n position: absolute;\n color: #aaaaaa;\n bottom: -12px;\n font-size: 10px;\n left: 50%;\n transform: translateX(-50%);\n font-family: SFUIText-Regular;\n }\n }\n &.left-track:after {\n content: 'L';\n }\n &.right-track:after {\n content: 'R';\n }\n }\n"])));
47
45
  var ColorMeter = (0, _styledComponents["default"])('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to top,\n #00c8e7,\n #00e6b9 57%,\n #ff8d29 83%,\n #f6462c\n );\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n .stack-block {\n height: 2px;\n margin-bottom: 3px;\n background: #000000;\n }\n"])));
48
46
  var BlackMeter = (0, _styledComponents["default"])('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n background: #000000;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n height: 100%;\n transition: all 0.25s ease-in-out;\n -moz-transition: all 0.25s ease-in-out;\n -webkit-transition: all 0.25s ease-in-out;\n -ms-transition: all 0.25s ease-in-out;\n -o-transition: all 0.25s ease-in-out;\n .stack-block {\n height: 2px;\n margin-bottom: 3px;\n background: #304153;\n }\n"])));
@@ -308,10 +306,7 @@ var AudioMeter = exports["default"] = /*#__PURE__*/function (_Component) {
308
306
  rangeArray = _this$state.rangeArray,
309
307
  unitBlockHeight = _this$state.unitBlockHeight,
310
308
  audioPan = _this$state.audioPan;
311
- var isFullscreen = this.props.isFullscreen;
312
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RangeBlock, {
313
- isFullscreen: isFullscreen
314
- }, rangeArray.map(function (range) {
309
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RangeBlock, null, rangeArray.map(function (range) {
315
310
  return /*#__PURE__*/_react["default"].createElement("div", {
316
311
  key: 'range' + range,
317
312
  style: {
package/components/Player.js CHANGED
@@ -158,7 +158,7 @@ var defaultProps = {
158
158
  onVolumeChange: null
159
159
  };
160
160
  var PlayerBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 100%;\n"])));
161
- var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n// .rightbar-visible .right-video-section {\n// display: block !important;\n// }\n\n.fullscreen-left-only .right-video-section {\n display: none !important;\n}\n\n.fullscreen-left-only .left-video-section {\n display: block !important;\n}\n &.fullscreen-left-only {\n .right-video-section {\n display: none !important;\n }\n .left-video-section {\n width: 100% !important;\n }\n}\n display: flex;\n justify-content: flex-start;\n background: #000000;\n height: ", ";\n .left-video-section {\n width: ", ";\n position: relative;\n height: ", ";\n }\n .audio-meter-block {\n position: relative;\n width: 0px;\n display: none;\n &.qc {\n width: 70px;\n display: block;\n }\n }\n .right-video-section {\n position: relative;\n width: ", ";\n"])), function (props) {
161
+ var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.fullscreen-left-only .right-video-section {\n display: none !important;\n}\n\n.fullscreen-left-only .left-video-section {\n display: block !important;\n}\n &.fullscreen-left-only {\n .right-video-section {\n display: none !important;\n }\n .left-video-section {\n width: 100% !important;\n }\n}\n display: flex;\n justify-content: flex-start;\n background: #000000;\n height: ", ";\n .left-video-section {\n width: ", ";\n position: relative;\n height: ", ";\n }\n .audio-meter-block {\n position: relative;\n width: 0px;\n display: none;\n &.qc {\n width: 70px;\n display: block;\n }\n }\n .right-video-section {\n position: relative;\n width: ", ";\n"])), function (props) {
162
162
  return props.noRightComponent && "calc(100% - 1px) !important;";
163
163
  }, function (props) {
164
164
  if (!props.isRightMenuVisible) {
@@ -172,9 +172,7 @@ var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_tem
172
172
  }, function (props) {
173
173
  return props.noRightComponent && '100%';
174
174
  }, function (props) {
175
- if (props.isFullscreen && props.playerType === 'qc') {
176
- return 'calc(38.1% - 70px)';
177
- } else if (props.playerType === 'qc') {
175
+ if (props.playerType === 'qc') {
178
176
  return 'calc(36.33% - 70px)';
179
177
  } else {
180
178
  return '36.33%';
@@ -481,6 +479,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
481
479
  key: "progress-control",
482
480
  order: 3
483
481
  })), /*#__PURE__*/_react["default"].createElement(_RenderCommentMarkers["default"], _extends({
482
+ key: "comment-markers-".concat(isRightMenuVisible),
484
483
  isRightMenuVisible: isRightMenuVisible,
485
484
  fullScreenRef: this.props.fullScreenRef,
486
485
  duration: fullProps === null || fullProps === void 0 || (_fullProps$player = fullProps.player) === null || _fullProps$player === void 0 ? void 0 : _fullProps$player.duration,
@@ -915,6 +914,10 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
915
914
  var newH = Math.max(videoHeight - reduceBy, 0);
916
915
  video.style.height = newH + 'px';
917
916
  }
917
+ if (isRightMenuVisible && playerType === 'qc' && audioMeterBlock && player.isFullscreen) {
918
+ var widths = totalWidth - audioMeterBlock.offsetWidth - rightSectionRef.offsetWidth;
919
+ video.style.width = widths + 'px';
920
+ }
918
921
  // this.video.handleResize();
919
922
  }
920
923
  }, {
@@ -942,8 +945,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
942
945
  key: "render",
943
946
  value: function render() {
944
947
  var _this5 = this,
945
- _props$player,
946
- _props$player2;
948
+ _props$player;
947
949
  var _this$manager$getStat4 = this.manager.getState(),
948
950
  player = _this$manager$getStat4.player;
949
951
  var props = _objectSpread(_objectSpread({}, this.props), {}, {
@@ -969,7 +971,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
969
971
  onBlur: this.handleBlur,
970
972
  tabIndex: "-1"
971
973
  }, /*#__PURE__*/_react["default"].createElement(PlayerContainer, _extends({
972
- className: "player-container",
974
+ className: "player-container ".concat(isFullscreen ? 'fullscreen-left-only' : ''),
973
975
  ref: function ref(playerContainer) {
974
976
  _this5._playerContainer = playerContainer;
975
977
  }
@@ -995,8 +997,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
995
997
  active: true
996
998
  }, /*#__PURE__*/_react["default"].createElement(_AudioMeter["default"], {
997
999
  player: props.player,
998
- height: this.meterHeight,
999
- isFullscreen: (_props$player2 = props.player) === null || _props$player2 === void 0 ? void 0 : _props$player2.isFullscreen
1000
+ height: this.meterHeight
1000
1001
  }))), rightSection ? /*#__PURE__*/_react["default"].createElement("div", {
1001
1002
  className: "right-video-section",
1002
1003
  ref: function ref(rightSectionRef) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.0.96",
3
+ "version": "4.0.97",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {