@desynova-digital/player 4.0.30 → 4.0.32

package/components/Player.js

@@ -212,11 +212,74 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   }
   _inherits(Player, _Component);
   return _createClass(Player, [{
+    key: "handleMarginsAndGrid",
+    value: function handleMarginsAndGrid() {
+      if (["snp_edit", "promo_review", "pgm_edit", "dubbing_review"].includes(this.props.playerType)) {
+        this.actions.handleSDBorderChange({
+          key: "fourThreeSafeArea",
+          value: false
+        });
+        this.actions.handleSDBorderChange({
+          key: "SDBorderActive",
+          value: false
+        });
+        this.actions.handleSDBorderChange({
+          key: "HDBorderActive",
+          value: false
+        });
+        this.actions.handleSDBorderChange({
+          key: "sixteenNineSafeArea",
+          value: false
+        });
+      } else if (this.props.playerType === 'qc') {
+        if (this.props.quality === 'hd') {
+          this.actions.handleSDBorderChange({
+            key: "fourThreeSafeArea",
+            value: false
+          });
+          this.actions.handleSDBorderChange({
+            key: "SDBorderActive",
+            value: false
+          });
+        } else if (this.props.quality === 'sd') {
+          this.actions.handleSDBorderChange({
+            key: "HDBorderActive",
+            value: false
+          });
+          this.actions.handleSDBorderChange({
+            key: "sixteenNineSafeArea",
+            value: false
+          });
+        }
+      } else {
+        this.actions.handleSDBorderChange({
+          key: "fourThreeSafeArea",
+          value: false
+        });
+        this.actions.handleSDBorderChange({
+          key: "sixteenNineSafeArea",
+          value: false
+        });
+        if (this.props.quality === 'hd') {
+          this.actions.handleSDBorderChange({
+            key: "SDBorderActive",
+            value: false
+          });
+        } else if (this.props.quality === 'sd') {
+          this.actions.handleSDBorderChange({
+            key: "HDBorderActive",
+            value: false
+          });
+        }
+      }
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.handleResize();
       window.addEventListener('resize', this.handleResize);
       _fullscreen["default"].addEventListener(this.handleFullScreenChange);
+      this.handleMarginsAndGrid();
       /*
        * const { player } = this.manager.getState();
        * this.actions.toggleFullscreen(player);
@@ -234,6 +297,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       }
       if (playerType !== prevProps.playerType) {
         this.actions.handleZoomChange(0);
+        this.handleMarginsAndGrid();
       }
     }
   }, {

package/components/SDOutline.js

@@ -15,17 +15,29 @@ var propTypes = {
   player: _propTypes.PropTypes.instanceOf(Object),
   actions: _propTypes.PropTypes.instanceOf(Object)
 };
-var SDPlayerBorder = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  opacity: 0.3;\n  border: solid 1px ", ";\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  -o-transform: translate(-50%, -50%);\n  -moz-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  position: absolute;\n  padding-left: 75%;\n  height: 100%;\n"])), _colors["default"].common.base.white);
+var SDPlayerBorder = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  opacity: 0.3;\n  border: solid 1px ", ";\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  -o-transform: translate(-50%, -50%);\n  -moz-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  position: absolute;\n  // padding-left: 75%;\n  // height: 100%;\n  height: ", ";\n  padding-left: ", "\n"])), _colors["default"].common.base.white, function (props) {
+  return props.heightRatio ? "calc(100% * ".concat(props.heightRatio, ")") : '100%';
+}, function (props) {
+  return props.paddingLeftPercent ? "calc(".concat(props.paddingLeftPercent, " * ").concat(props.paddingLeftRatio, ")") : '75%';
+});
 var SDBorderText = (0, _styledComponents["default"])('p')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: #fff;\n  padding-top: 25%;\n  position: absolute;\n  font-family: SFUIText-Regular;\n  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);\n  font-size: 12px;\n  top: 20%;\n  transform: translate(-50%, -50%) rotate(-90deg);\n"])));
 function SDOutline(_ref) {
   var player = _ref.player,
-    actions = _ref.actions;
+    actions = _ref.actions,
+    heightRatio = _ref.heightRatio,
+    paddingLeftPercent = _ref.paddingLeftPercent,
+    paddingLeftRatio = _ref.paddingLeftRatio,
+    text = _ref.text,
+    keyData = _ref.keyData;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SDPlayerBorder, {
-    style: !player.SDBorderActive ? {
+    style: !player[keyData] ? {
       display: 'none'
     } : {
       display: 'block'
     },
+    heightRatio: heightRatio,
+    paddingLeftPercent: paddingLeftPercent,
+    paddingLeftRatio: paddingLeftRatio,
     onClick: function onClick() {
       if (player.paused) {
         actions.play();
@@ -34,13 +46,13 @@ function SDOutline(_ref) {
       }
       actions.handleVideoRewind(false);
     }
-  }), /*#__PURE__*/_react["default"].createElement(SDBorderText, {
+  }), text && /*#__PURE__*/_react["default"].createElement(SDBorderText, {
     style: !player.SDBorderActive ? {
       display: 'none'
     } : {
       display: 'block'
     }
-  }, "4:3 Safe Area"));
+  }, text));
 }
 SDOutline.propTypes = propTypes;
 SDOutline.displayName = 'SDOutline';

package/components/Video.js

@@ -100,7 +100,7 @@ var defaultProps = {
 var SubTitleSection = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  font-family: SFUIText-Regular;\n  font-size: 16px;\n  bottom: 20px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  color: #ffffff;\n  height: 90%;\n  align-items: center;\n\n  .subtitleContainer {\n    border-radius: 4px;\n    width: fit-content;\n    background: #000000;\n    opacity: 0.9;\n    padding: ", ";\n    line-height: 20px;\n    position: absolute;\n\n    i,em {\n      font-style: italic; /* Override the font style for <em> tags inside elements with the class .someClass */\n    }\n\n    strong{\n      font-weight: bold; \n    }\n    \n  }\n  .longSubtitleStyles {\n    overflow-y: auto;\n    height: fit-content;\n    max-height: 70px;\n    max-width: 75%;\n    width: fit-content;\n  }\n"])), function (props) {
   return props.currentSubtitleObj && props.currentSubtitleObj.line1 ? '8px 10px' : '0px';
 });
-var VideoBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  &.video-react-player-block {\n    position: relative;\n    transition: all 0.1s ease-in-out;\n    -moz-transition: all 0.1s ease-in-out;\n    -webkit-transition: all 0.1s ease-in-out;\n    -ms-transition: all 0.1s ease-in-out;\n    -o-transition: all 0.1s ease-in-out;\n    video {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      right: 0;\n      bottom: 0;\n    }\n    .audio-tracks {\n      position: relative;\n      display: flex;\n      background: rgba(0, 0, 0, 0.5);\n      color: #fff;\n      z-index: 10;\n      position: absolute;\n      width: 100%;\n      bottom: 0;\n      p {\n        cursor: pointer;\n        padding: 10px;\n      }\n    }\n    .loader-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      z-index: 10;\n      background: rgba(0, 0, 0, 0.5);\n    }\n  }\n  &.ratio-border {\n    border: 1px solid rgba(255, 255, 255, 0.5);\n    &:after {\n      content: '16:9 Safe Area';\n      position: absolute;\n      color: #fff;\n      font-family: SFUIText-Regular;\n      font-size: 12px;\n      transform: rotate(-90deg);\n      top: 20%;\n      left: -50px;\n    }\n  }\n"])));
+var VideoBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  &.video-react-player-block {\n    position: relative;\n    transition: all 0.1s ease-in-out;\n    -moz-transition: all 0.1s ease-in-out;\n    -webkit-transition: all 0.1s ease-in-out;\n    -ms-transition: all 0.1s ease-in-out;\n    -o-transition: all 0.1s ease-in-out;\n    video {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      right: 0;\n      bottom: 0;\n    }\n    .audio-tracks {\n      position: relative;\n      display: flex;\n      background: rgba(0, 0, 0, 0.5);\n      color: #fff;\n      z-index: 10;\n      position: absolute;\n      width: 100%;\n      bottom: 0;\n      p {\n        cursor: pointer;\n        padding: 10px;\n      }\n    }\n    .loader-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      z-index: 10;\n      background: rgba(0, 0, 0, 0.5);\n    }\n  }\n  &.ratio-border {\n    // border: 1px solid rgba(255, 255, 255, 0.5);\n    &:after {\n      content: '16:9 Safe Area';\n      position: absolute;\n      color: #fff;\n      font-family: SFUIText-Regular;\n      font-size: 12px;\n      transform: rotate(-90deg);\n      top: 20%;\n      left: -50px;\n    }\n  }\n"])));
 var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   function Video(props) {
     var _this;
@@ -288,8 +288,49 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         key: "poster-image",
         order: 1.0
       }, props)), /*#__PURE__*/_react["default"].createElement(_SDOutline["default"], _extends({
-        key: "sd-outline",
-        order: 2.0
+        key: "sd-outline-1",
+        order: 2.0,
+        text: "4:3 Safe Area",
+        keyData: "SDBorderActive"
+      }, props)), /*#__PURE__*/_react["default"].createElement(_SDOutline["default"], _extends({
+        key: "sd-outline-3",
+        order: 3.0,
+        paddingLeftPercent: "100%",
+        paddingLeftRatio: " 0.998",
+        text: "",
+        keyData: "HDBorderActive"
+      }, props)), /*#__PURE__*/_react["default"].createElement(_SDOutline["default"], _extends({
+        key: "sd-outline-3",
+        order: 3.0,
+        heightRatio: "0.8",
+        paddingLeftPercent: "75%",
+        paddingLeftRatio: " 0.85",
+        text: "",
+        keyData: "fourThreeSafeArea"
+      }, props)), /*#__PURE__*/_react["default"].createElement(_SDOutline["default"], _extends({
+        key: "sd-outline-4",
+        order: 3.0,
+        heightRatio: "0.9",
+        paddingLeftPercent: "75%",
+        paddingLeftRatio: " 0.95",
+        text: "",
+        keyData: "fourThreeSafeArea"
+      }, props)), /*#__PURE__*/_react["default"].createElement(_SDOutline["default"], _extends({
+        key: "sd-outline-5",
+        order: 3.0,
+        heightRatio: "0.8",
+        paddingLeftPercent: "100%",
+        paddingLeftRatio: " 0.8",
+        text: "",
+        keyData: "sixteenNineSafeArea"
+      }, props)), /*#__PURE__*/_react["default"].createElement(_SDOutline["default"], _extends({
+        key: "sd-outline-6",
+        order: 3.0,
+        heightRatio: "0.9",
+        paddingLeftPercent: "100%",
+        paddingLeftRatio: " 0.9",
+        text: "",
+        keyData: "sixteenNineSafeArea"
       }, props)), /*#__PURE__*/_react["default"].createElement(_BigPlayButton["default"], _extends({
         key: "big-play-button",
         order: 5.0

package/components/marking-controls/MarkInControl.js

@@ -89,7 +89,8 @@ var MarkInControl = exports["default"] = /*#__PURE__*/function (_Component) {
         player = _this$props2.player,
         actions = _this$props2.actions,
         onAddMarker = _this$props2.onAddMarker,
-        frameRate = _this$props2.frameRate;
+        frameRate = _this$props2.frameRate,
+        playerType = _this$props2.playerType;
       if (["snp_edit", "promo_review", "pgm_edit", "dubbing_review"].includes(playerType)) {
         var currentAdjustedTime = (0, _utils.handleAdjustingVideoAsPerFrame)(player.currentTime, frameRate);
         var data = {

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

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _components = require("@desynova-digital/components");
 var _tokens = require("@desynova-digital/tokens");
+var _SafeAreaControl = _interopRequireDefault(require("./SafeAreaControl"));
 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); }
@@ -51,7 +52,7 @@ var IconButtonStyles = (0, _styledComponents["default"])(_components.Button)(_te
   var hoverColor = _ref2.hoverColor;
   return hoverColor;
 });
-var MainMenuBlock = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid #eeeeee;\n  display: flex;\n  text-align: left;\n  background: transparent;\n  cursor: pointer;\n  align-items: center; // Ensure alignment of children vertically\n  justify-content: space-between; // Spreads out the children across the main axis\n  &:last-child {\n    border: none;\n  }\n  &:hover,\n  &:focus {\n    background: ", ";\n  }\n  p {\n    font-size: 12px;\n    line-height: 12px;\n    padding-top: 17px;\n    padding-bottom: 12px;\n    padding-left: 14px;\n    padding-right: 18px;\n    margin: 0;\n    font-family: SFUIText-Medium;\n    white-space: nowrap;\n  }\n  .icon-wrapper-left {\n    margin: 0;\n    padding-top: 17px;\n    padding-bottom: 12px;\n    padding-left: 15px;\n    padding-right: 0;\n  }\n  .icon-wrapper {\n    margin: 0;\n    padding-top: 12px;\n    padding-bottom: 8px;\n    margin-left: auto; // Automatically pushes the element to the right\n    margin-right: 20px; // Maintains 20px distance from the right edge\n  }\n"])), function (props) {
+var MainMenuBlock = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid #eeeeee;\n  display: flex;\n  text-align: left;\n  background: transparent;\n  cursor: pointer;\n  align-items: center; // Ensure alignment of children vertically\n  justify-content: space-between; // Spreads out the children across the main axis\n  &:last-child {\n    border: none;\n  }\n  &:hover,\n  &:focus {\n    background: ", ";\n  }\n  p {\n    font-size: 12px;\n    line-height: 12px;\n    padding-top: 17px;\n    padding-bottom: 12px;\n    padding-left: 14px;\n    padding-right: 18px;\n    margin: 0;\n    font-family: SFUIText-Medium;\n    white-space: nowrap;\n  }\n  .icon-wrapper-left {\n    margin: 0;\n    padding-top: 17px;\n    padding-bottom: 12px;\n    padding-left: 15px;\n    padding-right: 0;\n    i {\n      display: flex;\n      align-items: center;\n    }\n  }\n  .icon-wrapper {\n    margin: 0;\n    padding-top: 12px;\n    padding-bottom: 8px;\n    margin-left: auto; // Automatically pushes the element to the right\n    margin-right: 20px; // Maintains 20px distance from the right edge\n  }\n"])), function (props) {
   return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.rgbaThemeColor) : 'rgba(0, 206, 198, 0.1)';
 });
 var ChildMenuButton = /*#__PURE__*/function (_Component) {
@@ -170,6 +171,25 @@ var ChildMenuButton = /*#__PURE__*/function (_Component) {
               }
             })));
           });
+        case 'Safe Margins':
+        case 'Grid Area':
+          return subtitleData && subtitleData.map(function (border, index) {
+            return /*#__PURE__*/_react["default"].createElement(MainMenuBlock, {
+              theme: theme
+              // onClick={() => this.changeCaption(subtitle)}
+              ,
+              role: "presentation"
+            }, /*#__PURE__*/_react["default"].createElement("div", {
+              className: "icon-wrapper-left"
+            }), /*#__PURE__*/_react["default"].createElement(_SafeAreaControl["default"], {
+              keyData: border.keyData,
+              siblingData: border.siblingData,
+              name: border.name,
+              theme: theme,
+              player: player,
+              actions: actions
+            }));
+          });
         case 'PlayBack Speed':
           return; /* JSX for Audio */
         default:

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

@@ -41,7 +41,7 @@ var propTypes = {
 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) {
   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"])));
+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/SettingsMenu.js

@@ -41,7 +41,7 @@ var propTypes = {
   theme: _propTypes.PropTypes.string,
   playerType: _propTypes.PropTypes.string
 };
-var SettingsMenuContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\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) {
@@ -67,17 +67,48 @@ function SettingsMenu(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     subtitleChildStatus = _useState4[0],
     setSubtitleChildStatus = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeHeader = _useState6[0],
+    setActiveHeader = _useState6[1];
   var activeCaptionValue = player.activeCaption;
   if (!player.SubtitleStatus) {
     activeCaptionValue = "Off";
   }
-  var handleSubtitleStatus = function handleSubtitleStatus() {
+  var activeSafeMargins = player.fourThreeSafeArea ? '4:3' : player.sixteenNineSafeArea ? '16:9' : 'Off';
+  var activeGridArea = player.SDBorderActive ? '4:3' : player.HDBorderActive ? '16:9' : 'Off';
+  var handleSubtitleStatus = function handleSubtitleStatus(statusKey) {
     setSettingStatus(function (prevSettingStatus) {
       return !prevSettingStatus;
     });
     setSubtitleChildStatus(function (prevSubtitleChildStatus) {
       return !prevSubtitleChildStatus;
     });
+    statusKey && setActiveHeader(statusKey);
+  };
+  var dataOptions = {
+    "Safe Margins": [{
+      "title": "16:9",
+      "keyData": "fourThreeSafeArea",
+      "siblingData": "sixteenNineSafeArea",
+      "name": "4:3"
+    }, {
+      "title": "4:3",
+      "keyData": "sixteenNineSafeArea",
+      "siblingData": "fourThreeSafeArea",
+      "name": "16:9"
+    }],
+    "Grid Area": [{
+      "title": "16:9",
+      "keyData": "SDBorderActive",
+      "siblingData": "HDBorderActive",
+      "name": "4:3"
+    }, {
+      "title": "4:3",
+      "keyData": "HDBorderActive",
+      "siblingData": "SDBorderActive",
+      "name": "16:9"
+    }]
   };
   var playerValue = playerType === 'default';
   var settingShow = settingStatus || !playerValue;
@@ -96,14 +127,34 @@ function SettingsMenu(_ref) {
     player: player,
     actions: actions,
     activeChild: activeCaptionValue,
-    handleStatus: handleSubtitleStatus
-  }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "settings-menu-tile safe-area"
-  }, /*#__PURE__*/_react["default"].createElement(_SafeAreaControl["default"], {
+    handleStatus: function handleStatus(e) {
+      return handleSubtitleStatus("Subtitle");
+    }
+  })), settingStatus && /*#__PURE__*/_react["default"].createElement(_ParentMenuComponent["default"], _extends({}, props, {
+    data: ["16:9"],
+    iconName: 'safe-margins',
+    hasChild: true,
+    heading: "Safe Margins",
     theme: theme,
     player: player,
-    actions: actions
-  })), /*#__PURE__*/_react["default"].createElement("div", {
+    actions: actions,
+    activeChild: activeSafeMargins,
+    handleStatus: function handleStatus(e) {
+      return handleSubtitleStatus("Safe Margins");
+    }
+  })), settingStatus && /*#__PURE__*/_react["default"].createElement(_ParentMenuComponent["default"], _extends({}, props, {
+    data: ["16:9"],
+    iconName: 'safe-area',
+    hasChild: true,
+    heading: "Grid Area",
+    theme: theme,
+    player: player,
+    actions: actions,
+    activeChild: activeGridArea,
+    handleStatus: function handleStatus(e) {
+      return handleSubtitleStatus("Grid Area");
+    }
+  }))), settingStatus && /*#__PURE__*/_react["default"].createElement("div", {
     className: "settings-menu-tile playback"
   }, /*#__PURE__*/_react["default"].createElement(_PlaybackRateControl["default"], {
     theme: theme,
@@ -111,11 +162,13 @@ function SettingsMenu(_ref) {
     actions: actions,
     disablePlayerActions: disablePlayerActions,
     playerType: playerType
-  }))), subtitleChildStatus && playerValue && /*#__PURE__*/_react["default"].createElement(_ChildMenuComponent["default"], _extends({}, props, {
-    stop: true,
+  }))), subtitleChildStatus && /*#__PURE__*/_react["default"].createElement(_ChildMenuComponent["default"], _extends({}, props, {
+    stop: activeHeader === 'Subtitle',
     iconName: "child-close-button",
-    mainHeader: "Subtitle",
-    subtitleData: subtitleData,
+    mainHeader: activeHeader
+    // subtitleData={[{"title": "16:9"}, {"title": "4:3"}]}
+    ,
+    subtitleData: dataOptions[activeHeader] || subtitleData,
     theme: theme,
     player: player,
     actions: actions,

package/package.json

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