@desynova-digital/player 4.0.77 → 4.0.79

package/components/control-bar/ZoomMenuButton.js

@@ -31,7 +31,9 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
 var propTypes = {
   player: _propTypes.PropTypes.instanceOf(Object),
   actions: _propTypes.PropTypes.instanceOf(Object),
-  style: _propTypes.PropTypes.instanceOf(Object)
+  style: _propTypes.PropTypes.instanceOf(Object),
+  enablePlayerActions: _propTypes.PropTypes.string,
+  playerType: _propTypes.PropTypes.string
 };
 var defaultProps = {
   player: {},
@@ -60,9 +62,10 @@ var ZoomMenuButton = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         style = _this$props.style,
-        playerType = _this$props.playerType;
+        playerType = _this$props.playerType,
+        enablePlayerActions = _this$props.enablePlayerActions;
       var vertical = false;
-      return playerType === 'subtitle' && /*#__PURE__*/_react["default"].createElement(ZoomMenu, {
+      return (playerType === 'subtitle' || enablePlayerActions.includes('zoomMenuButton')) && /*#__PURE__*/_react["default"].createElement(ZoomMenu, {
         style: style
       }, /*#__PURE__*/_react["default"].createElement(ZoomButton, {
         display: "rounded",

package/components/settings-menu-control/ChildMenuComponent.js

@@ -11,6 +11,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _components = require("@desynova-digital/components");
 var _tokens = require("@desynova-digital/tokens");
 var _SafeAreaControl = _interopRequireDefault(require("./SafeAreaControl"));
+var _PlaybackRateControl = _interopRequireDefault(require("./PlaybackRateControl"));
 var _templateObject, _templateObject2;
 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); }
@@ -146,9 +147,11 @@ var ChildMenuButton = /*#__PURE__*/function (_Component) {
             }), /*#__PURE__*/_react["default"].createElement("p", {
               style: activeChild && activeChild === subtitle.title ? {
                 color: theme ? " ".concat(_tokens.colors[theme].videoPlayer.themeColor) : '#00cec6',
-                pointerEvents: 'none'
+                pointerEvents: 'none',
+                textAlign: 'left'
               } : {
-                color: '#333333'
+                color: '#333333',
+                textAlign: 'left'
               }
             }, subtitle.title), subtitle.srt_file_name && /*#__PURE__*/_react["default"].createElement("div", {
               className: "icon-wrapper"
@@ -176,7 +179,8 @@ var ChildMenuButton = /*#__PURE__*/function (_Component) {
         case 'Grid Area':
           return subtitleData && subtitleData.map(function (border, index) {
             return /*#__PURE__*/_react["default"].createElement(MainMenuBlock, {
-              theme: theme
+              theme: theme,
+              mainHeader: mainHeader
               // onClick={() => this.changeCaption(subtitle)}
               ,
               role: "presentation"
@@ -191,8 +195,31 @@ var ChildMenuButton = /*#__PURE__*/function (_Component) {
               actions: actions
             }));
           });
-        case 'PlayBack Speed':
-          return; /* JSX for Audio */
+        case 'Playback Speed':
+          return subtitleData.map(function (subtitle, index) {
+            return /*#__PURE__*/_react["default"].createElement(MainMenuBlock, {
+              theme: theme,
+              mainHeader: mainHeader
+              // onClick={() => this.changeCaption(subtitle)}
+              ,
+              role: "presentation",
+              key: index,
+              style: activeChild && activeChild === subtitle.keyData ? {
+                pointerEvents: 'none'
+              } : null
+            }, /*#__PURE__*/_react["default"].createElement("div", {
+              style: {
+                width: '100%'
+              }
+            }, /*#__PURE__*/_react["default"].createElement(_PlaybackRateControl["default"], {
+              theme: theme,
+              player: player,
+              actions: actions,
+              disablePlayerActions: _this2.props.disablePlayerActions,
+              playerType: _this2.props.playerType,
+              playRate: subtitle.keyData
+            })));
+          });
         default:
           return /*#__PURE__*/_react["default"].createElement("p", null, "Unsupported type: ", mainHeader);
       }

package/components/settings-menu-control/ParentMenuComponent.js

@@ -38,10 +38,10 @@ var propTypes = {
   hasChild: _propTypes.PropTypes.bool,
   iconName: _propTypes.PropTypes.string
 };
-var ParentMenuBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  background: transparent;\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  text-transform: uppercase;\n  justify-content: flex-start;\n  align-items: center;\n  &:hover {\n    background: ", ";\n  }\n\n  p {\n    margin-left: 10px;\n    white-space: nowrap;\n  }\n"])), function (props) {
+var ParentMenuBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  background: transparent;\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  justify-content: flex-start;\n  align-items: center;\n  &:hover {\n    background: ", ";\n  }\n\n  p {\n    margin-left: 10px;\n    white-space: nowrap;\n  }\n"])), function (props) {
   return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.rgbaThemeColor) : 'rgba(0, 206, 198, 0.1)';
 });
-var RightContent = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute; /* Position absolutely */\n  right: 0; /* Align to the right */\n  display: flex;\n  align-items: center;\n  p {\n    font-family: SFUIText-Medium;\n    margin-right: 10px;\n    white-space: nowrap;\n  }\n  i {\n    display: flex;\n    align-items:center\n  }\n"])));
+var RightContent = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute; /* Position absolutely */\n  right: 0; /* Align to the right */\n  display: flex;\n  align-items: center;\n  p {\n    font-family: SFUIText-Medium;\n    margin-right: 10px;\n    white-space: nowrap;\n  }\n  i {\n    display: flex;\n    align-items: center;\n  }\n"])));
 var ParentMenuControl = exports["default"] = /*#__PURE__*/function (_Component) {
   function ParentMenuControl(props) {
     var _this;

package/components/settings-menu-control/PlaybackRateControl.js

@@ -33,7 +33,7 @@ var propTypes = {
   theme: _propTypes.PropTypes.string,
   playerType: _propTypes.PropTypes.string
 };
-var PlaybackRateBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  background: transparent;\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  text-transform: uppercase;\n  align-items: center;\n  padding: 0 !important;\n  .playback-block {\n    display: flex;\n    justify-content: flex-start;\n    border-bottom: 1px solid #eeeeee;\n    p {\n      margin-left: 10px;\n      white-space: nowrap;\n    }\n  }\n  .playback-rate-body {\n    padding: 0 !important;\n    display: flex;\n    justify-content: space-between;\n    .playback-rate {\n      border-right: 1px solid #eeeeee;\n      &:last-child {\n        border: none;\n      }\n      &:hover {\n        background: ", ";\n      }\n      &.active {\n        pointer-events: none;\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
+var PlaybackRateBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  text-transform: lowercase;\n  \n  .playback-rate-body {\n    .playback-rate {\n      border-right: 1px solid #eeeeee;\n      margin: 0;\n      padding-top: 17px;\n      padding-bottom: 12px;\n      padding-left: 15px;\n      padding-right: 0;\n      &:last-child {\n        border: none;\n      }\n      &:hover {\n        background: ", ";\n      }\n      &.active {\n        pointer-events: none;\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
   return props.disablePlayerActions.includes('playback_rate') ? '' : props.theme ? "".concat(_tokens.colors[props.theme].videoPlayer.rgbaThemeColor) : 'rgba(0, 206, 198, 0.1)';
 }, function (props) {
   return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.themeColor) : '#00cec6';
@@ -79,54 +79,22 @@ var PlaybackRateControl = exports["default"] = /*#__PURE__*/function (_Component
       var _this$props2 = this.props,
         player = _this$props2.player,
         disablePlayerActions = _this$props2.disablePlayerActions,
-        theme = _this$props2.theme;
+        theme = _this$props2.theme,
+        playRate = _this$props2.playRate;
       return /*#__PURE__*/_react["default"].createElement(PlaybackRateBlock, {
         theme: theme,
         disablePlayerActions: disablePlayerActions
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "playback-block"
-      }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
-        name: "playback-rate",
-        width: 14,
-        height: 14,
-        color: "#182738"
-      }), /*#__PURE__*/_react["default"].createElement("p", {
-        style: {
-          color: '#182738'
+        className: "playback-rate-body",
+        onClick: function onClick() {
+          return _this2.changePlaybackRate(playRate);
         }
-      }, "Playback Speed")), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "playback-rate-body"
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: player.playbackRate === 0.5 ? 'playback-rate active' : 'playback-rate',
-        onClick: function onClick() {
-          return _this2.changePlaybackRate(0.5);
-        },
-        role: "presentation"
-      }, "0.5x"), /*#__PURE__*/_react["default"].createElement("div", {
-        className: player.playbackRate === 1 ? 'playback-rate active' : 'playback-rate',
-        onClick: function onClick() {
-          return _this2.changePlaybackRate(1);
-        },
-        role: "presentation"
-      }, "1x"), /*#__PURE__*/_react["default"].createElement("div", {
-        className: player.playbackRate === 1.5 ? 'playback-rate active' : 'playback-rate',
-        onClick: function onClick() {
-          return _this2.changePlaybackRate(1.5);
-        },
-        role: "presentation"
-      }, "1.5x"), /*#__PURE__*/_react["default"].createElement("div", {
-        className: player.playbackRate === 2 ? 'playback-rate active' : 'playback-rate',
-        onClick: function onClick() {
-          return _this2.changePlaybackRate(2);
-        },
-        role: "presentation"
-      }, "2x"), /*#__PURE__*/_react["default"].createElement("div", {
-        className: player.playbackRate === 4 ? 'playback-rate active' : 'playback-rate',
-        onClick: function onClick() {
-          return _this2.changePlaybackRate(4);
-        },
+        className: player.playbackRate === Number(playRate) ? 'playback-rate active' : 'playback-rate'
+        // onClick={() => this.changePlaybackRate(playRate)}
+        ,
         role: "presentation"
-      }, "4x")));
+      }, playRate, "x")));
     }
   }]);
 }(_react.Component);

package/components/settings-menu-control/SettingsMenu.js

@@ -41,10 +41,11 @@ var propTypes = {
   theme: _propTypes.PropTypes.string,
   playerType: _propTypes.PropTypes.string
 };
-var SettingsMenuContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  min-width: 250px;\n  position: relative;\n  .parent-area{\n    cursor: pointer;\n  }\n  .safe-area {\n    cursor: pointer;\n  }\n  .settings-menu-tile {\n    background: transparent;\n    div {\n      padding: 15px;\n    }\n  }\n  .playback {\n    cursor: ", ";\n  }\n"])), function (props) {
+var SettingsMenuContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  min-width: 250px;\n  position: relative;\n  .parent-area {\n    cursor: pointer;\n  }\n  .safe-area {\n    cursor: pointer;\n  }\n  .settings-menu-tile {\n    background: transparent;\n    div {\n      padding: 15px;\n    }\n  }\n  .playback {\n    cursor: ", ";\n  }\n"])), function (props) {
   return props.disablePlayerActions.includes('playback_rate') ? 'not-allowed' : 'pointer';
 });
 function SettingsMenu(_ref) {
+  var _player$playbackRate;
   var player = _ref.player,
     actions = _ref.actions,
     style = _ref.style,
@@ -73,10 +74,11 @@ function SettingsMenu(_ref) {
     setActiveHeader = _useState6[1];
   var activeCaptionValue = player.activeCaption;
   if (!player.SubtitleStatus) {
-    activeCaptionValue = "Off";
+    activeCaptionValue = 'Off';
   }
   var activeSafeMargins = player.fourThreeSafeArea ? '4:3' : player.sixteenNineSafeArea ? '16:9' : 'Off';
   var activeGridArea = player.SDBorderActive ? '4:3' : player.HDBorderActive ? '16:9' : 'Off';
+  var activePlaybackRate = (_player$playbackRate = player.playbackRate) !== null && _player$playbackRate !== void 0 ? _player$playbackRate : player.defaultPlaybackRate;
   var handleSubtitleStatus = function handleSubtitleStatus(statusKey) {
     setSettingStatus(function (prevSettingStatus) {
       return !prevSettingStatus;
@@ -87,27 +89,63 @@ function SettingsMenu(_ref) {
     statusKey && setActiveHeader(statusKey);
   };
   var dataOptions = {
-    "Safe Margins": [{
-      "title": "16:9",
-      "keyData": "fourThreeSafeArea",
-      "siblingData": "sixteenNineSafeArea",
-      "name": "4:3"
+    'Safe Margins': [{
+      title: '16:9',
+      keyData: 'fourThreeSafeArea',
+      siblingData: 'sixteenNineSafeArea',
+      name: '4:3'
     }, {
-      "title": "4:3",
-      "keyData": "sixteenNineSafeArea",
-      "siblingData": "fourThreeSafeArea",
-      "name": "16:9"
+      title: '4:3',
+      keyData: 'sixteenNineSafeArea',
+      siblingData: 'fourThreeSafeArea',
+      name: '16:9'
     }],
-    "Grid Area": [{
-      "title": "16:9",
-      "keyData": "SDBorderActive",
-      "siblingData": "HDBorderActive",
-      "name": "4:3"
+    'Grid Area': [{
+      title: '16:9',
+      keyData: 'SDBorderActive',
+      siblingData: 'HDBorderActive',
+      name: '4:3'
     }, {
-      "title": "4:3",
-      "keyData": "HDBorderActive",
-      "siblingData": "SDBorderActive",
-      "name": "16:9"
+      title: '4:3',
+      keyData: 'HDBorderActive',
+      siblingData: 'SDBorderActive',
+      name: '16:9'
+    }],
+    'Playback Speed': [{
+      title: '0.5x',
+      keyData: '0.5',
+      siblingData: '',
+      name: '0.5x'
+    }, {
+      title: '0.75x',
+      keyData: '0.75',
+      siblingData: '',
+      name: '1x'
+    }, {
+      title: '1x',
+      keyData: '1',
+      siblingData: '',
+      name: '1x'
+    }, {
+      title: '1.25x',
+      keyData: '1.25',
+      siblingData: '',
+      name: '1.25x'
+    }, {
+      title: '1.5x',
+      keyData: '1.5',
+      siblingData: '',
+      name: '1.5x'
+    }, {
+      title: '2x',
+      keyData: '2',
+      siblingData: '',
+      name: '2x'
+    }, {
+      title: '4x',
+      keyData: '4',
+      siblingData: '',
+      name: '4x'
     }]
   };
   (0, _react.useEffect)(function () {
@@ -126,49 +164,53 @@ function SettingsMenu(_ref) {
     data: subtitleData,
     iconName: 'subtitle-on-off',
     hasChild: true,
-    heading: "Subtitle",
+    heading: 'Subtitle',
     theme: theme,
     player: player,
     actions: actions,
     activeChild: activeCaptionValue,
     handleStatus: function handleStatus(e) {
-      return handleSubtitleStatus("Subtitle");
+      return handleSubtitleStatus('Subtitle');
     }
   })), settingStatus && /*#__PURE__*/_react["default"].createElement(_ParentMenuComponent["default"], _extends({}, props, {
-    data: ["16:9"],
+    data: ['16:9'],
     iconName: 'safe-margins',
     hasChild: true,
-    heading: "Safe Margins",
+    heading: 'Safe Margins',
     theme: theme,
     player: player,
     actions: actions,
     activeChild: activeSafeMargins,
     handleStatus: function handleStatus(e) {
-      return handleSubtitleStatus("Safe Margins");
+      return handleSubtitleStatus('Safe Margins');
     }
   })), settingStatus && /*#__PURE__*/_react["default"].createElement(_ParentMenuComponent["default"], _extends({}, props, {
-    data: ["16:9"],
+    data: ['16:9'],
     iconName: 'safe-area',
     hasChild: true,
-    heading: "Grid Area",
+    heading: 'Grid Area',
     theme: theme,
     player: player,
     actions: actions,
     activeChild: activeGridArea,
     handleStatus: function handleStatus(e) {
-      return handleSubtitleStatus("Grid Area");
+      return handleSubtitleStatus('Grid Area');
     }
-  }))), settingStatus && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "settings-menu-tile playback"
-  }, /*#__PURE__*/_react["default"].createElement(_PlaybackRateControl["default"], {
+  })), settingStatus && /*#__PURE__*/_react["default"].createElement(_ParentMenuComponent["default"], _extends({}, props, {
+    data: [1],
+    iconName: 'playback-rate',
+    hasChild: true,
+    heading: 'Playback Speed',
     theme: theme,
     player: player,
     actions: actions,
-    disablePlayerActions: disablePlayerActions,
-    playerType: playerType
-  }))), subtitleChildStatus && /*#__PURE__*/_react["default"].createElement(_ChildMenuComponent["default"], _extends({}, props, {
+    activeChild: "".concat(activePlaybackRate, "x"),
+    handleStatus: function handleStatus(e) {
+      return handleSubtitleStatus('Playback Speed');
+    }
+  })))), subtitleChildStatus && /*#__PURE__*/_react["default"].createElement(_ChildMenuComponent["default"], _extends({}, props, {
     stop: activeHeader === 'Subtitle',
-    iconName: "child-close-button",
+    iconName: 'child-close-button',
     mainHeader: activeHeader
     // subtitleData={[{"title": "16:9"}, {"title": "4:3"}]}
     ,
@@ -178,7 +220,9 @@ function SettingsMenu(_ref) {
     actions: actions,
     handleStatus: handleSubtitleStatus,
     handleValueChange: actions.handleCaptionTrackChange,
-    activeChild: activeCaptionValue
+    activeChild: activeCaptionValue,
+    disablePlayerActions: disablePlayerActions,
+    playerType: playerType
   })));
 }
 SettingsMenu.propTypes = propTypes;

package/package.json

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