@desynova-digital/player 4.0.96 → 4.0.98

package/actions/player.js

@@ -301,11 +301,12 @@ function toggleFullscreen(player) {
 // }
 
 function toggleRightBar(player, showRightMenu) {
+  var _right$offsetWidth;
   var root = document.querySelector('.player-container');
   var right = document.querySelector('.right-video-section');
-  var sidebarWidth = right.offsetWidth; // actual width of sidebar
+  var sidebarWidth = (_right$offsetWidth = right === null || right === void 0 ? void 0 : right.offsetWidth) !== null && _right$offsetWidth !== void 0 ? _right$offsetWidth : 0; // actual width of sidebar
   // Already fullscreen → toggle UI only (NO EXIT)
-  if (_fullscreen["default"].isFullscreen) {
+  if (_fullscreen["default"].isFullscreen && right) {
     right.style.transition = 'transform 0.4s ease, opacity 0.3s ease';
     if (showRightMenu) {
       root.classList.add('rightbar-visible');

package/components/AudioMeter.js

@@ -40,9 +40,7 @@ var propTypes = {
 var defaultProps = {
   height: 0
 };
-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) {
-  return props.isFullscreen ? '#000' : 'unset';
-});
+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"])));
 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"])));
 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"])));
 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) {
         rangeArray = _this$state.rangeArray,
         unitBlockHeight = _this$state.unitBlockHeight,
         audioPan = _this$state.audioPan;
-      var isFullscreen = this.props.isFullscreen;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RangeBlock, {
-        isFullscreen: isFullscreen
-      }, rangeArray.map(function (range) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RangeBlock, null, rangeArray.map(function (range) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: 'range' + range,
           style: {

package/components/Player.js

@@ -158,7 +158,7 @@ var defaultProps = {
   onVolumeChange: null
 };
 var PlayerBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n"])));
-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) {
+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) {
   return props.noRightComponent && "calc(100% - 1px) !important;";
 }, function (props) {
   if (!props.isRightMenuVisible) {
@@ -172,9 +172,7 @@ var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_tem
 }, function (props) {
   return props.noRightComponent && '100%';
 }, function (props) {
-  if (props.isFullscreen && props.playerType === 'qc') {
-    return 'calc(38.1% - 70px)';
-  } else if (props.playerType === 'qc') {
+  if (props.playerType === 'qc') {
     return 'calc(36.33% - 70px)';
   } else {
     return '36.33%';
@@ -238,7 +236,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       var newHeight;
       var isFS = _fullscreen["default"].isFullscreen;
       _this.actions.handleFullscreenChange(isFS);
-      if (isFS) {
+      if (isFS && rightSectionRef) {
         rightSectionRef.style.position = 'relative';
         newHeight = totalHeight - headerHeight;
         rightSectionRef.style.top = "".concat(headerHeight, "px");
@@ -481,6 +479,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         key: "progress-control",
         order: 3
       })), /*#__PURE__*/_react["default"].createElement(_RenderCommentMarkers["default"], _extends({
+        key: "comment-markers-".concat(isRightMenuVisible),
         isRightMenuVisible: isRightMenuVisible,
         fullScreenRef: this.props.fullScreenRef,
         duration: fullProps === null || fullProps === void 0 || (_fullProps$player = fullProps.player) === null || _fullProps$player === void 0 ? void 0 : _fullProps$player.duration,
@@ -851,7 +850,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video.classList.add('ratio-border');
       }
       // Fullscreen mode with right section consideration
-      else if (player.isFullscreen) {
+      else if (player.isFullscreen && rightSectionRef) {
         // Calculate available width considering right section
         var availableWidth = totalWidth;
         if (isRightMenuVisible) {
@@ -872,6 +871,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video.style.margin = '0 auto';
         video.classList.add('ratio-border');
       } else if (window.innerHeight < 1024 && (playerContainer.offsetHeight > window.innerHeight || window.innerHeight > playerContainer.offsetHeight)) {
+        var _this$props6;
         var playlistMinHeight = 150;
         if (controlType === 'default') {
           if (fileType === 'image') {
@@ -889,7 +889,10 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         }
         video.style.paddingTop = '0';
         video.style.width = videoWidth + 'px';
-        video.style.height = videoHeight + 'px';
+        if (!((_this$props6 = this.props) !== null && _this$props6 !== void 0 && _this$props6.noRightComponent)) {
+          video.style.height = videoHeight + 'px';
+        }
+        ;
         video.style.margin = '0 auto';
         video.classList.add('ratio-border');
       } else if (window.innerHeight >= 900) {
@@ -915,6 +918,10 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         var newH = Math.max(videoHeight - reduceBy, 0);
         video.style.height = newH + 'px';
       }
+      if (isRightMenuVisible && playerType === 'qc' && audioMeterBlock && player.isFullscreen) {
+        var widths = totalWidth - audioMeterBlock.offsetWidth - rightSectionRef.offsetWidth;
+        video.style.width = widths + 'px';
+      }
       // this.video.handleResize();
     }
   }, {
@@ -942,8 +949,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this5 = this,
-        _props$player,
-        _props$player2;
+        _props$player;
       var _this$manager$getStat4 = this.manager.getState(),
         player = _this$manager$getStat4.player;
       var props = _objectSpread(_objectSpread({}, this.props), {}, {
@@ -954,12 +960,12 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video: this.video ? this.video.video : null
       });
       var childrensLeft = this.getChildren(props, 'left');
-      var _this$props6 = this.props,
-        rightSection = _this$props6.rightSection,
-        playerType = _this$props6.playerType,
-        isFullscreen = _this$props6.isFullscreen,
-        tabMetadata = _this$props6.tabMetadata,
-        isRightMenuVisible = _this$props6.isRightMenuVisible;
+      var _this$props7 = this.props,
+        rightSection = _this$props7.rightSection,
+        playerType = _this$props7.playerType,
+        isFullscreen = _this$props7.isFullscreen,
+        tabMetadata = _this$props7.tabMetadata,
+        isRightMenuVisible = _this$props7.isRightMenuVisible;
       return /*#__PURE__*/_react["default"].createElement(PlayerBlock, {
         ref: function ref(c) {
           _this5.manager.rootElement = c;
@@ -969,7 +975,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         onBlur: this.handleBlur,
         tabIndex: "-1"
       }, /*#__PURE__*/_react["default"].createElement(PlayerContainer, _extends({
-        className: "player-container",
+        className: "player-container ".concat(isFullscreen ? 'fullscreen-left-only' : ''),
         ref: function ref(playerContainer) {
           _this5._playerContainer = playerContainer;
         }
@@ -995,8 +1001,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         active: true
       }, /*#__PURE__*/_react["default"].createElement(_AudioMeter["default"], {
         player: props.player,
-        height: this.meterHeight,
-        isFullscreen: (_props$player2 = props.player) === null || _props$player2 === void 0 ? void 0 : _props$player2.isFullscreen
+        height: this.meterHeight
       }))), rightSection ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "right-video-section",
         ref: function ref(rightSectionRef) {

package/components/PlayerHeader.js

@@ -225,7 +225,8 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
         openSharePopup = _this$props6.openSharePopup,
         isShareAvailable = _this$props6.isShareAvailable,
         isUserGuest = _this$props6.isUserGuest,
-        isRightMenuVisible = _this$props6.isRightMenuVisible;
+        isRightMenuVisible = _this$props6.isRightMenuVisible,
+        noRightComponent = _this$props6.noRightComponent;
       var _this$state = this.state,
         versionIndex = _this$state.versionIndex,
         updatedVersionsList = _this$state.updatedVersionsList;
@@ -367,7 +368,7 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
         style: {
           pointerEvents: 'none'
         }
-      }, this.props)) : null, isFullscreen ? /*#__PURE__*/_react["default"].createElement(IconButton, {
+      }, this.props)) : null, isFullscreen && !noRightComponent ? /*#__PURE__*/_react["default"].createElement(IconButton, {
         isRightMenuVisible: isRightMenuVisible,
         display: "rounded",
         appearance: "cta",

package/components/control-bar/ControlBar.js

@@ -27,7 +27,8 @@ var _SubtitleMovementMenu = _interopRequireDefault(require("./SubtitleMovementMe
 var _ZoomMenuButton = _interopRequireDefault(require("./ZoomMenuButton"));
 var _colors = _interopRequireDefault(require("../../colors"));
 var _TimecodeFormatSelector = _interopRequireDefault(require("../marking-controls/TimecodeFormatSelector"));
-var _templateObject, _templateObject2; // import CommentsButton from './CommentsButton';
+var _components = require("@desynova-digital/components");
+var _templateObject, _templateObject2, _templateObject3; // import CommentsButton from './CommentsButton';
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -65,6 +66,7 @@ var PlayerControlBlock = _styledComponents["default"].div(_templateObject || (_t
   return props.player === 'panel' ? '0px' : 'initial';
 }, _colors["default"].common.base.black);
 var VideoControlBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n"])));
+var DownloadButton = (0, _styledComponents["default"])(_components.Button)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0px;\n  &:hover,\n  &:focus {\n    background: transparent;\n  }\n"])));
 var defaultProps = {
   autoHide: false,
   className: ''
@@ -82,8 +84,12 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
   return _createClass(ControlBar, [{
     key: "getDefaultChildren",
     value: function getDefaultChildren() {
-      var playerType = this.props.playerType;
-      return [/*#__PURE__*/_react["default"].createElement(_PlayToggle["default"], _extends({}, this.props, {
+      var _this$props2;
+      var _this$props = this.props,
+        playerType = _this$props.playerType,
+        theme = _this$props.theme,
+        handleShareDownload = _this$props.handleShareDownload;
+      var arr = [/*#__PURE__*/_react["default"].createElement(_PlayToggle["default"], _extends({}, this.props, {
         key: "play-toggle",
         order: 2
       })), /*#__PURE__*/_react["default"].createElement(_ReplayControl["default"], _extends({}, this.props, {
@@ -130,7 +136,7 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
         }
       }, this.props, {
         key: "volume-menu-button",
-        order: 7
+        order: 8
       })),
       /*#__PURE__*/
       //Added to show camera button on fullscreen too
@@ -145,12 +151,12 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
       //   order={7}
       // />,
       _react["default"].createElement(_CaptionControlMenuButton["default"], _extends({}, this.props, {
-        order: 7,
+        order: 8,
         playerType: playerType,
         key: "caption-control-menu-button"
       })), /*#__PURE__*/_react["default"].createElement(_AudioTracksMenuButton["default"], _extends({}, this.props, {
         key: "audio-tracks-menu-button",
-        order: 7
+        order: 8
       })), /*#__PURE__*/_react["default"].createElement(_SettingsMenuButton["default"], _extends({}, this.props, {
         key: "settings-menu-button",
         order: 9
@@ -161,6 +167,25 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
           marginRight: '10px'
         }
       }))];
+      if (this.props.noRightComponent && (_this$props2 = this.props) !== null && _this$props2 !== void 0 && (_this$props2 = _this$props2.videoData) !== null && _this$props2 !== void 0 && (_this$props2 = _this$props2.asset_actions) !== null && _this$props2 !== void 0 && _this$props2.includes('download_shared_asset')) {
+        arr.push(/*#__PURE__*/_react["default"].createElement(DownloadButton, {
+          theme: theme,
+          display: "rounded",
+          appearance: "cta",
+          icon: "download",
+          iconWidth: 18,
+          iconHeight: 18,
+          width: 20,
+          height: 20,
+          order: 9,
+          onClick: handleShareDownload,
+          key: "download-button",
+          style: {
+            marginLeft: '10px'
+          }
+        }));
+      }
+      return arr;
     }
   }, {
     key: "getAdvancedChildren",
@@ -268,11 +293,11 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "getChildren",
     value: function getChildren() {
-      var _this$props = this.props,
-        controlType = _this$props.controlType,
-        children = _this$props.children,
-        fileType = _this$props.fileType,
-        player = _this$props.player;
+      var _this$props3 = this.props,
+        controlType = _this$props3.controlType,
+        children = _this$props3.children,
+        fileType = _this$props3.fileType,
+        player = _this$props3.player;
       var childrens = _react["default"].Children.toArray(children);
       var defaultChildren = [];
       if (fileType === 'image') {
@@ -286,9 +311,9 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var children = this.getChildren();
-      var _this$props2 = this.props,
-        userActivity = _this$props2.player.userActivity,
-        playerType = _this$props2.playerType;
+      var _this$props4 = this.props,
+        userActivity = _this$props4.player.userActivity,
+        playerType = _this$props4.playerType;
       return /*#__PURE__*/_react["default"].createElement(PlayerControlBlock, {
         active: userActivity,
         player: playerType

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "4.0.96",
+  "version": "4.0.98",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {