@desynova-digital/player 4.0.8 → 4.0.10

package/actions/player.js

@@ -3,19 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZOOM_CHANGE = exports.USER_ACTIVATE = exports.SD_BORDER_SWITCH = exports.REWIND_VIDEO = exports.PREVIEW_VIDEO = exports.PLAYER_TYPE = exports.PLAYER_ACTIVATE = exports.OPERATE = exports.MARKER_UPDATE = exports.MARKER_POINT_CHANGE = exports.MARKER_CREATE = exports.FULLSCREEN_CHANGE = exports.CONTROL_TYPE = exports.AUDIO_TRACKS = exports.ACTIVE_AUDIO_TRACK = void 0;
+exports.ZOOM_CHANGE = exports.USER_ACTIVATE = exports.SUBTITLE_STATUS = exports.SD_BORDER_SWITCH = exports.REWIND_VIDEO = exports.PREVIEW_VIDEO = exports.PLAYER_TYPE = exports.PLAYER_ACTIVATE = exports.OPERATE = exports.MARKER_UPDATE = exports.MARKER_POINT_CHANGE = exports.MARKER_CREATE = exports.FULLSCREEN_CHANGE = exports.CONTROL_TYPE = exports.AUDIO_TRACKS = exports.ACTIVE_CAPTION_TRACK = exports.ACTIVE_AUDIO_TRACK = void 0;
 exports.activate = activate;
 exports.changeRate = changeRate;
 exports.changeVolume = changeVolume;
 exports.forward = forward;
 exports.handleAudioTrackChange = handleAudioTrackChange;
 exports.handleAudioTracks = handleAudioTracks;
+exports.handleCaptionTrackChange = handleCaptionTrackChange;
 exports.handleControlType = handleControlType;
 exports.handleFullscreenChange = handleFullscreenChange;
 exports.handleMarkerPointChange = handleMarkerPointChange;
 exports.handleMarkerUpdate = handleMarkerUpdate;
 exports.handlePlayerType = handlePlayerType;
 exports.handleSDBorderChange = handleSDBorderChange;
+exports.handleSubtitleStatus = handleSubtitleStatus;
 exports.handleVideoPreview = handleVideoPreview;
 exports.handleVideoRewind = handleVideoRewind;
 exports.handleZoomChange = handleZoomChange;
@@ -44,6 +46,8 @@ var PREVIEW_VIDEO = exports.PREVIEW_VIDEO = 'video-react/PREVIEW_VIDEO';
 var REWIND_VIDEO = exports.REWIND_VIDEO = 'video-react/REWIND_VIDEO';
 var AUDIO_TRACKS = exports.AUDIO_TRACKS = 'video-react/AUDIO_TRACKS';
 var ACTIVE_AUDIO_TRACK = exports.ACTIVE_AUDIO_TRACK = 'video-react/ACTIVE_AUDIO_TRACK';
+var ACTIVE_CAPTION_TRACK = exports.ACTIVE_CAPTION_TRACK = 'video-react/ACTIVE_CAPTION_TRACK';
+var SUBTITLE_STATUS = exports.SUBTITLE_STATUS = 'video-react/SUBTITLE_STATUS';
 function handleFullscreenChange(isFullscreen) {
   return {
     type: FULLSCREEN_CHANGE,
@@ -221,6 +225,13 @@ function handleAudioTracks(tracks) {
     tracks: tracks
   };
 }
+// used to update the value of caption state
+function handleCaptionTrackChange(caption) {
+  return {
+    type: ACTIVE_CAPTION_TRACK,
+    caption: caption
+  };
+}
 function handleAudioTrackChange(track) {
   return {
     type: ACTIVE_AUDIO_TRACK,
@@ -328,4 +339,14 @@ function handleSDBorderChange(SDBorderActive) {
     SDBorderActive: SDBorderActive
   };
   return data;
+}
+
+// used to manage state for captionControlMenuButton 
+
+function handleSubtitleStatus(SubtitleStatus) {
+  var data = {
+    type: SUBTITLE_STATUS,
+    SubtitleStatus: SubtitleStatus
+  };
+  return data;
 }

package/components/PointersBar.js

@@ -53,7 +53,7 @@ var PointersContainer = _styledComponents["default"].div(_templateObject || (_te
 });
 var PointerBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 20px;\n  position: relative;\n  border-top: 1px solid #333333;\n  border-bottom: 1px solid #333333;\n  .empty-pointers-msg {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    p {\n      font-family: SFUIText-Medium;\n      font-size: 11px;\n      color: #aaaaaa;\n    }\n    ", " {\n      margin: 0 5px;\n    }\n  }\n"])), _components.Icon.Element);
 var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 100px;\n  max-width: 100px;\n  position: relative;\n  height: 100%;\n  .tags-block {\n    height: 20px;\n    font-family: SFUIText-Medium;\n    font-size: 10px;\n    color: #ffffff;\n    text-transform: uppercase;\n    border-top: 1px solid #333333;\n    border-bottom: 1px solid #333333;\n    p {\n      line-height: 18px;\n      padding: 0 10px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])));
-var ToolTipStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 2;\n  height: 18px;\n  transition: left 0.1s ease-in-out;\n\n  .tooltip-container {\n    border-radius: 0.25rem;\n    padding: 5px;\n    width: fit-content;\n    background: #ffffff;\n    color: #666666;\n\n    h4 {\n      white-space: nowrap;\n      font-size: 12px;\n    }\n\n    &:after {\n      content: '';\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid white;\n      ", "\n      left: ", ";\n      transform: translateX(-50%);\n    }\n  }\n"])), function (props) {
+var ToolTipStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 2;\n  height: 18px;\n  transition: left 0.1s ease-in-out;\n\n  .tooltip-container {\n    border-radius: 0.25rem;\n    padding: 5px;\n    width: fit-content;\n    background: #ffffff;\n    color: #666666;\n\n    i,em{\n      font-style: italic; \n    }\n\n    strong{\n      font-weight: bold; \n    }\n\n    h4 {\n      white-space: nowrap;\n      font-size: 12px;\n    }\n\n    &:after {\n      content: '';\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid white;\n      ", "\n      left: ", ";\n      transform: translateX(-50%);\n    }\n  }\n"])), function (props) {
   return props.multiline ? 'bottom: -21px;' : 'bottom: -9px;';
 }, function (props) {
   return props.tooltipPointer ? props.tooltipPointer + 'px' : '50%';
@@ -270,7 +270,19 @@ var PointersBar = exports["default"] = /*#__PURE__*/function (_Component) {
         }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "tooltip-container"
-      }, text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line1), text.line2 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line2), !text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text))));
+      }, text.line1 && /*#__PURE__*/_react["default"].createElement("h4", {
+        dangerouslySetInnerHTML: {
+          __html: text.line1
+        }
+      }), text.line2 && /*#__PURE__*/_react["default"].createElement("h4", {
+        dangerouslySetInnerHTML: {
+          __html: text.line2
+        }
+      }), !text.line1 && /*#__PURE__*/_react["default"].createElement("h4", {
+        dangerouslySetInnerHTML: {
+          __html: text
+        }
+      }))));
     }
   }]);
   return PointersBar;

package/components/Video.js

@@ -97,7 +97,7 @@ var defaultProps = {
   crossOrigin: 'anonymous',
   theme: 'dark'
 };
-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  }\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) {
+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"])));
@@ -1137,12 +1137,14 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         videoId = _this$props31.videoId,
         fileType = _this$props31.fileType,
         userEmail = _this$props31.userEmail,
-        theme = _this$props31.theme;
+        theme = _this$props31.theme,
+        player = _this$props31.player;
       var _this$state2 = this.state,
         isBuffering = _this$state2.isBuffering,
         watermark = _this$state2.watermark,
         currentSubtitleObj = _this$state2.currentSubtitleObj;
       var children = this.getChildren(this.props);
+      var isSubtitleActive = player.SubtitleStatus;
       return /*#__PURE__*/_react["default"].createElement(VideoBlock, {
         className: "video-react-player-block",
         ref: function ref(c) {
@@ -1243,7 +1245,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         className: "user-name-wrapper",
         id: "watermark-text",
         style: _objectSpread({}, watermark)
-      }, userEmail), /*#__PURE__*/_react["default"].createElement(SubTitleSection, {
+      }, userEmail), isSubtitleActive && /*#__PURE__*/_react["default"].createElement(SubTitleSection, {
         id: "outer",
         currentSubtitleObj: currentSubtitleObj,
         onClick: function onClick() {
@@ -1256,12 +1258,21 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         className: "subtitleContainer longSubtitleStyles",
         style: _objectSpread({}, currentSubtitleObj.style)
       }, currentSubtitleObj.charactername && /*#__PURE__*/_react["default"].createElement("p", {
-        id: "charactername"
-      }, " ", currentSubtitleObj.charactername, " ") || null, currentSubtitleObj.line1 && /*#__PURE__*/_react["default"].createElement("p", {
-        id: "subtitleLineOne"
-      }, " ", currentSubtitleObj.line1, " ") || null, currentSubtitleObj.line2 && /*#__PURE__*/_react["default"].createElement("p", {
-        id: "subtitleLineTwo"
-      }, " ", currentSubtitleObj.line2, " ") || null)));
+        id: "charactername",
+        dangerouslySetInnerHTML: {
+          __html: currentSubtitleObj.charactername
+        }
+      }) || null, currentSubtitleObj.line1 && /*#__PURE__*/_react["default"].createElement("p", {
+        id: "subtitleLineOne",
+        dangerouslySetInnerHTML: {
+          __html: currentSubtitleObj.line1
+        }
+      }) || null, currentSubtitleObj.line2 && /*#__PURE__*/_react["default"].createElement("p", {
+        id: "subtitleLineTwo",
+        dangerouslySetInnerHTML: {
+          __html: currentSubtitleObj.line2
+        }
+      }) || null)));
     }
   }]);
   return Video;

package/components/control-bar/CaptionControlMenuButton.js

@@ -0,0 +1,99 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _components = require("@desynova-digital/components");
+var _tokens = require("@desynova-digital/tokens");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 && Object.prototype.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; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var CaptionControlButtonIcon = _styledComponents["default"].button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n"])));
+var propTypes = {
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  player: _propTypes.PropTypes.instanceOf(Object),
+  theme: _propTypes.PropTypes.string
+};
+var CaptionControlMenuButton = /*#__PURE__*/function (_Component) {
+  _inherits(CaptionControlMenuButton, _Component);
+  function CaptionControlMenuButton(props, context) {
+    var _this;
+    _classCallCheck(this, CaptionControlMenuButton);
+    _this = _callSuper(this, CaptionControlMenuButton, [props, context]);
+    _this.statusHandle = _this.statusHandle.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+  /**
+   * This function is used to to change the state responsible forshowing subtitle and not showing subtitle
+   */
+  _createClass(CaptionControlMenuButton, [{
+    key: "statusHandle",
+    value: function statusHandle() {
+      var _this$props = this.props,
+        SubtitleStatus = _this$props.player.SubtitleStatus,
+        actions = _this$props.actions;
+      if (SubtitleStatus) {
+        actions.handleSubtitleStatus(false);
+      } else {
+        actions.handleSubtitleStatus(true);
+      }
+    }
+
+    /**
+     * This sets the default value of subtitle to the first value of subtitleData
+     */
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props2 = this.props,
+        subtitleData = _this$props2.subtitleData,
+        actions = _this$props2.actions,
+        filterSelectedSubtitle = _this$props2.filterSelectedSubtitle;
+      if (subtitleData && subtitleData.length) {
+        actions.handleCaptionTrackChange(subtitleData[0].title);
+        filterSelectedSubtitle(subtitleData[0].subtitle_info_id);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        SubtitleStatus = _this$props3.player.SubtitleStatus,
+        theme = _this$props3.theme,
+        subtitleData = _this$props3.subtitleData;
+      return subtitleData && subtitleData.length ? /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          marginRight: '10px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(CaptionControlButtonIcon, {
+        onClick: this.statusHandle
+      }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+        name: "content-control",
+        color: SubtitleStatus ? _tokens.colors[theme].label.text : '#AFB2BA',
+        width: 18,
+        height: 16
+      }))) : null;
+    }
+  }]);
+  return CaptionControlMenuButton;
+}(_react.Component);
+var _default = exports["default"] = CaptionControlMenuButton;

package/components/control-bar/ControlBar.js

@@ -22,6 +22,7 @@ var _utils = require("../../utils");
 var _MarkingControl = _interopRequireDefault(require("../marking-controls/MarkingControl"));
 var _SubtitleLanguagesMenuButton = _interopRequireDefault(require("./SubtitleLanguagesMenuButton"));
 var _CameraButton = _interopRequireDefault(require("./CameraButton"));
+var _CaptionControlMenuButton = _interopRequireDefault(require("./CaptionControlMenuButton"));
 var _SubtitleMovementMenu = _interopRequireDefault(require("./SubtitleMovementMenu"));
 var _ZoomMenuButton = _interopRequireDefault(require("./ZoomMenuButton"));
 var _colors = _interopRequireDefault(require("../../colors"));
@@ -126,9 +127,17 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
       }, this.props, {
         key: "volume-menu-button",
         order: 7
-      })), /*#__PURE__*/_react["default"].createElement(_SubtitleLanguagesMenuButton["default"], _extends({}, this.props, {
-        key: "subtitle-menu-button",
-        order: 7
+      })),
+      /*#__PURE__*/
+      // <SubtitleLanguagesMenuButton 
+      //   {...this.props}
+      //   key="subtitle-menu-button"
+      //   order={7}
+      // />,
+      _react["default"].createElement(_CaptionControlMenuButton["default"], _extends({}, this.props, {
+        order: 7,
+        playerType: playerType,
+        key: "caption-control-menu-button"
       })), /*#__PURE__*/_react["default"].createElement(_AudioTracksMenuButton["default"], _extends({}, this.props, {
         key: "audio-tracks-menu-button",
         order: 7
@@ -201,9 +210,17 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
       }, this.props, {
         key: "volume-menu-button",
         order: 8
-      })), /*#__PURE__*/_react["default"].createElement(_SubtitleLanguagesMenuButton["default"], _extends({}, this.props, {
-        key: "subtitle-menu-button",
-        order: 8
+      })),
+      /*#__PURE__*/
+      // <SubtitleLanguagesMenuButton 
+      //   {...this.props}
+      //   key="subtitle-menu-button"
+      //   order={8}
+      // />,
+      _react["default"].createElement(_CaptionControlMenuButton["default"], _extends({}, this.props, {
+        order: 8,
+        playerType: playerType,
+        key: "caption-control-menu-button"
       })), /*#__PURE__*/_react["default"].createElement(_CameraButton["default"], {
         order: 9,
         playerType: playerType

package/components/control-bar/SettingsMenuButton.js

@@ -8,7 +8,11 @@ var _propTypes = require("prop-types");
 var _react = _interopRequireDefault(require("react"));
 var _Menu = _interopRequireDefault(require("../Menu"));
 var _SettingsMenu = _interopRequireDefault(require("../settings-menu-control/SettingsMenu"));
+var _excluded = ["style", "player", "actions", "disablePlayerActions", "theme", "playerType", "subtitleData"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var propTypes = {
   player: _propTypes.PropTypes.instanceOf(Object),
   actions: _propTypes.PropTypes.instanceOf(Object),
@@ -24,7 +28,9 @@ function SettingsMenuButton(_ref) {
     _ref$disablePlayerAct = _ref.disablePlayerActions,
     disablePlayerActions = _ref$disablePlayerAct === void 0 ? [] : _ref$disablePlayerAct,
     theme = _ref.theme,
-    playerType = _ref.playerType;
+    playerType = _ref.playerType,
+    subtitleData = _ref.subtitleData,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
     theme: theme,
     icon: "settings",
@@ -32,13 +38,14 @@ function SettingsMenuButton(_ref) {
     player: player,
     actions: actions,
     style: style
-  }, /*#__PURE__*/_react["default"].createElement(_SettingsMenu["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_SettingsMenu["default"], _extends({}, props, {
     theme: theme,
     player: player,
     actions: actions,
     disablePlayerActions: disablePlayerActions,
+    subtitleData: subtitleData,
     playerType: playerType
-  }));
+  })));
 }
 SettingsMenuButton.propTypes = propTypes;
 SettingsMenuButton.displayName = 'SettingsMenuButton';

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

@@ -0,0 +1,231 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _components = require("@desynova-digital/components");
+var _tokens = require("@desynova-digital/tokens");
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 && Object.prototype.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; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  player: _propTypes.PropTypes.instanceOf(Object),
+  theme: _propTypes.PropTypes.string,
+  subtitleData: _propTypes.PropTypes.instanceOf(Object),
+  mainHeader: _propTypes.PropTypes.string,
+  iconName: _propTypes.PropTypes.string,
+  handleStatus: _propTypes.PropTypes.func,
+  handleValueChange: _propTypes.PropTypes.func,
+  activeChild: _propTypes.PropTypes.string
+};
+var IconButtonStyles = (0, _styledComponents["default"])(_components.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: none;\n  pointer-events: stroke;\n  background-color: ", ";\n  svg{\n    path{\n      fill: ", " !important;\n    }\n  }\n  &:hover,\n  &:focus,\n  &:active {\n    border: none;\n    // background-color: ", ";\n    border-radius: ", ";\n    svg {\n      path {\n        fill: ", " !important;\n      }\n    }\n  }\n"])), function (props) {
+  return props.backgroundColor;
+}, function (_ref) {
+  var svgFillDefault = _ref.svgFillDefault;
+  return svgFillDefault;
+}, function (props) {
+  return props.hoverBackgroundColor;
+}, function (props) {
+  return props.borderRadius ? props.borderRadius : 'none';
+}, function (_ref2) {
+  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) {
+  return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.rgbaThemeColor) : 'rgba(0, 206, 198, 0.1)';
+});
+var ChildMenuButton = /*#__PURE__*/function (_Component) {
+  _inherits(ChildMenuButton, _Component);
+  function ChildMenuButton(props, context) {
+    var _this;
+    _classCallCheck(this, ChildMenuButton);
+    _this = _callSuper(this, ChildMenuButton, [props, context]);
+    _this.changeCaption = _this.changeCaption.bind(_assertThisInitialized(_this));
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
+    _this.stopCaption = _this.stopCaption.bind(_assertThisInitialized(_this));
+    _this.renderContentByHeader = _this.renderContentByHeader.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+  /**
+   * This function is used to change the state used to stop subtitles and also change the value of subtitle to be off
+   */
+  _createClass(ChildMenuButton, [{
+    key: "stopCaption",
+    value: function stopCaption() {
+      var _this$props = this.props,
+        actions = _this$props.actions,
+        handleStatus = _this$props.handleStatus,
+        mainHeader = _this$props.mainHeader;
+      if (mainHeader === 'Subtitle') {
+        actions.handleSubtitleStatus(false);
+      }
+      handleStatus();
+    }
+    /**
+     *
+     * @param {string} value this is the value that we will be stored in our state and also call function used to change subtitle shown in our player
+     */
+  }, {
+    key: "changeCaption",
+    value: function changeCaption(value) {
+      var _this$props2 = this.props,
+        actions = _this$props2.actions,
+        handleValueChange = _this$props2.handleValueChange,
+        filterSelectedSubtitle = _this$props2.filterSelectedSubtitle,
+        handleStatus = _this$props2.handleStatus,
+        mainHeader = _this$props2.mainHeader;
+      if (mainHeader === 'Subtitle') {
+        actions.handleSubtitleStatus(true);
+        filterSelectedSubtitle(value.subtitle_info_id);
+        handleValueChange(value.title);
+      }
+      handleStatus();
+    }
+
+    /**
+     * This function is used to change the states that are responsible for showing settings menu or subtitle menu.
+     */
+  }, {
+    key: "handleChange",
+    value: function handleChange() {
+      var handleStatus = this.props.handleStatus;
+      handleStatus();
+    }
+
+    /**
+     *
+     * @returns This function returns the mapping of children according to the value of mainHeader props
+     */
+  }, {
+    key: "renderContentByHeader",
+    value: function renderContentByHeader() {
+      var _this2 = this;
+      var _this$props3 = this.props,
+        mainHeader = _this$props3.mainHeader,
+        subtitleData = _this$props3.subtitleData,
+        theme = _this$props3.theme,
+        player = _this$props3.player,
+        activeChild = _this$props3.activeChild;
+      switch (mainHeader) {
+        case 'Subtitle':
+          return subtitleData.map(function (subtitle, index) {
+            return /*#__PURE__*/_react["default"].createElement(MainMenuBlock, {
+              theme: theme,
+              onClick: function onClick() {
+                return _this2.changeCaption(subtitle);
+              },
+              role: "presentation",
+              key: index,
+              style: activeChild && activeChild === subtitle.title ? {
+                pointerEvents: 'none'
+              } : null
+            }, /*#__PURE__*/_react["default"].createElement("div", {
+              className: "icon-wrapper-left"
+            }), /*#__PURE__*/_react["default"].createElement("p", {
+              style: activeChild && activeChild === subtitle.title ? {
+                color: theme ? " ".concat(_tokens.colors[theme].videoPlayer.themeColor) : '#00cec6',
+                pointerEvents: 'none'
+              } : {
+                color: '#333333'
+              }
+            }, subtitle.title), subtitle.srt_file_name && /*#__PURE__*/_react["default"].createElement("div", {
+              className: "icon-wrapper"
+            }, /*#__PURE__*/_react["default"].createElement(IconButtonStyles, {
+              display: "rounded",
+              appearance: "cta",
+              icon: "download",
+              iconWidth: 14,
+              iconHeight: 14,
+              width: 22,
+              height: 22,
+              hoverColor: "#FFFFFF",
+              hoverBackgroundColor: theme ? "".concat(_tokens.colors[theme].videoPlayer.themeColor) : '#00cec6',
+              backgroundColor: activeChild && activeChild === subtitle.title ? theme ? "".concat(_tokens.colors[theme].videoPlayer.themeColor) : '#00cec6' : 'rgb(51,51,51,0.1)',
+              svgFillDefault: activeChild && activeChild === subtitle.title ? '#FFFFFF' : 'rgb(51,51,51)',
+              borderRadius: "50%",
+              onClick: function onClick(e) {
+                console.log('icon clicked1');
+                window.open(subtitle.srt_file_name, '_blank');
+                e.stopPropagation();
+              }
+            })));
+          });
+        case 'PlayBack Speed':
+          return; /* JSX for Audio */
+        default:
+          return /*#__PURE__*/_react["default"].createElement("p", null, "Unsupported type: ", mainHeader);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var _this$props4 = this.props,
+        player = _this$props4.player,
+        theme = _this$props4.theme,
+        mainHeader = _this$props4.mainHeader,
+        iconName = _this$props4.iconName,
+        stop = _this$props4.stop,
+        activeChild = _this$props4.activeChild;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(MainMenuBlock, {
+        theme: theme,
+        onClick: function onClick() {
+          return _this3.handleChange();
+        },
+        role: "presentation"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "icon-wrapper-left"
+      }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+        name: "child-close-button",
+        color: '#121D29'
+      })), /*#__PURE__*/_react["default"].createElement("p", null, mainHeader), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "icon-wrapper"
+      })), stop && /*#__PURE__*/_react["default"].createElement(MainMenuBlock, {
+        theme: theme,
+        onClick: function onClick() {
+          return _this3.stopCaption();
+        },
+        role: "presentation",
+        key: 'Off',
+        style: player.activeCaption && player.activeCaption === 'Off' ? {
+          pointerEvents: 'none'
+        } : null
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "icon-wrapper-left"
+      }), /*#__PURE__*/_react["default"].createElement("p", {
+        style: activeChild && activeChild === 'Off' ? {
+          color: theme ? " ".concat(_tokens.colors[theme].videoPlayer.themeColor) : '#00cec6',
+          pointerEvents: 'none'
+        } : {
+          color: '#333333'
+        }
+      }, "Off"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "icon-wrapper"
+      })), this.renderContentByHeader());
+    }
+  }]);
+  return ChildMenuButton;
+}(_react.Component);
+ChildMenuButton.propTypes = propTypes;
+ChildMenuButton.displayName = 'ChildMenuButton';
+var _default = exports["default"] = ChildMenuButton;

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

@@ -0,0 +1,89 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = require("prop-types");
+var _components = require("@desynova-digital/components");
+var _tokens = require("@desynova-digital/tokens");
+var _lodash = require("lodash");
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 && Object.prototype.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; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  player: _propTypes.PropTypes.instanceOf(Object),
+  theme: _propTypes.PropTypes.string,
+  handleStatus: _propTypes.PropTypes.func,
+  activeChild: _propTypes.PropTypes.string,
+  heading: _propTypes.PropTypes.string,
+  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) {
+  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 ParentMenuControl = exports["default"] = /*#__PURE__*/function (_Component) {
+  _inherits(ParentMenuControl, _Component);
+  function ParentMenuControl(props) {
+    var _this;
+    _classCallCheck(this, ParentMenuControl);
+    _this = _callSuper(this, ParentMenuControl, [props]);
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+  /**
+   * This function is used to change the states that are responsible for showing settings menu or subtitle menu.
+   */
+  _createClass(ParentMenuControl, [{
+    key: "handleClick",
+    value: function handleClick() {
+      var handleStatus = this.props.handleStatus;
+      handleStatus();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        player = _this$props.player,
+        theme = _this$props.theme,
+        activeChild = _this$props.activeChild,
+        heading = _this$props.heading,
+        hasChild = _this$props.hasChild,
+        iconName = _this$props.iconName,
+        data = _this$props.data;
+      return data && data.length ? /*#__PURE__*/_react["default"].createElement(ParentMenuBlock, {
+        onClick: this.handleClick,
+        theme: theme
+      }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+        name: iconName,
+        color: '#0C141D'
+      }), /*#__PURE__*/_react["default"].createElement("p", null, heading), hasChild && /*#__PURE__*/_react["default"].createElement(RightContent, null, /*#__PURE__*/_react["default"].createElement("p", null, activeChild), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+        name: "child-open-button",
+        color: '#121D29'
+      }))) : null;
+    }
+  }]);
+  return ParentMenuControl;
+}(_react.Component);
+ParentMenuControl.propTypes = propTypes;
+ParentMenuControl.displayName = 'ParentMenuControl';

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

@@ -1,16 +1,32 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = SettingsMenu;
 var _propTypes = require("prop-types");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _SafeAreaControl = _interopRequireDefault(require("./SafeAreaControl"));
 var _PlaybackRateControl = _interopRequireDefault(require("./PlaybackRateControl"));
+var _ParentMenuComponent = _interopRequireDefault(require("./ParentMenuComponent"));
+var _ChildMenuComponent = _interopRequireDefault(require("./ChildMenuComponent"));
+var _lodash = require("lodash");
+var _excluded = ["player", "actions", "style", "disablePlayerActions", "theme", "playerType", "subtitleData"];
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 && Object.prototype.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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 /*
  * import SubtitleControl from './SubtitleControl';
@@ -24,7 +40,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  .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  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) {
@@ -34,12 +50,46 @@ function SettingsMenu(_ref) {
     _ref$disablePlayerAct = _ref.disablePlayerActions,
     disablePlayerActions = _ref$disablePlayerAct === void 0 ? [] : _ref$disablePlayerAct,
     theme = _ref.theme,
-    playerType = _ref.playerType;
+    playerType = _ref.playerType,
+    subtitleData = _ref.subtitleData,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    settingStatus = _useState2[0],
+    setSettingStatus = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    subtitleChildStatus = _useState4[0],
+    setSubtitleChildStatus = _useState4[1];
+  var activeCaptionValue = player.activeCaption;
+  if (!player.SubtitleStatus) {
+    activeCaptionValue = "Off";
+  }
+  var handleSubtitleStatus = function handleSubtitleStatus() {
+    setSettingStatus(function (prevSettingStatus) {
+      return !prevSettingStatus;
+    });
+    setSubtitleChildStatus(function (prevSubtitleChildStatus) {
+      return !prevSubtitleChildStatus;
+    });
+  };
   return /*#__PURE__*/_react["default"].createElement(SettingsMenuContainer, {
     theme: theme,
     style: style,
     disablePlayerActions: disablePlayerActions
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, settingStatus && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "settings-menu-tile parent-area"
+  }, /*#__PURE__*/_react["default"].createElement(_ParentMenuComponent["default"], _extends({}, props, {
+    data: subtitleData,
+    iconName: 'subtitle-on-off',
+    hasChild: true,
+    heading: "Subtitle",
+    theme: theme,
+    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"], {
     theme: theme,
@@ -53,6 +103,17 @@ function SettingsMenu(_ref) {
     actions: actions,
     disablePlayerActions: disablePlayerActions,
     playerType: playerType
+  }))), subtitleChildStatus && /*#__PURE__*/_react["default"].createElement(_ChildMenuComponent["default"], _extends({}, props, {
+    stop: true,
+    iconName: "child-close-button",
+    mainHeader: "Subtitle",
+    subtitleData: subtitleData,
+    theme: theme,
+    player: player,
+    actions: actions,
+    handleStatus: handleSubtitleStatus,
+    handleValueChange: actions.handleCaptionTrackChange,
+    activeChild: activeCaptionValue
   })));
 }
 SettingsMenu.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "4.0.8",
+  "version": "4.0.10",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {
@@ -53,8 +53,8 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "@desynova-digital/components": "^9.0.2",
-    "@desynova-digital/tokens": "^9.0.2",
+    "@desynova-digital/components": "^9.0.13",
+    "@desynova-digital/tokens": "^9.0.13",
     "hls.js": "1.4.12",
     "babel-core": "7.0.0-bridge.0",
     "latest-version": "^4.0.0",

package/reducers/player.js

@@ -46,8 +46,12 @@ var initialState = {
   previewActive: false,
   audioTracksArr: [],
   activeAudio: {},
+  activeCaption: "Off",
+  // state used to show the value of selected subtitle
   markerCreate: false,
   rewindActive: false,
+  SubtitleStatus: false,
+  // state used to show whether subtitle will be shown on player or not
   HLSConfig: {
     debug: true,
     capLevelToPlayerSize: false,
@@ -152,6 +156,10 @@ function player() {
       return _objectSpread(_objectSpread({}, state), {}, {
         activeAudio: action.track
       });
+    case _player.ACTIVE_CAPTION_TRACK:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        activeCaption: action.caption
+      });
     case _player.ZOOM_CHANGE:
       return _objectSpread(_objectSpread({}, state), {}, {
         zoom: action.z
@@ -195,6 +203,10 @@ function player() {
       return _objectSpread(_objectSpread({}, state), {}, {
         SDBorderActive: action.SDBorderActive
       });
+    case _player.SUBTITLE_STATUS:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        SubtitleStatus: action.SubtitleStatus
+      });
     case _video.DURATION_CHANGE:
     case _video.TIME_UPDATE:
     case _video.VOLUME_CHANGE: