@desynova-digital/player 4.0.97 → 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/Player.js

@@ -236,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");
@@ -850,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) {
@@ -871,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') {
@@ -888,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) {
@@ -956,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;

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.97",
+  "version": "4.0.98",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {