@desynova-digital/player 4.0.11 → 4.0.13

package/components/Menu.js

@@ -26,9 +26,7 @@ var defaultProps = {
 var MenuContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 20px;\n  position: relative;\n  &:hover {\n    .menu-popup {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n  .menu-popup {\n    visibility: hidden;\n    opacity: 0;\n    position: absolute;\n    bottom: 20px;\n    padding-bottom: 16px;\n    z-index: 10;\n    transition: all 350ms ease-in-out;\n    &.right {\n      left: -10px;\n      &:after {\n        left: 15px;\n      }\n    }\n    &.center {\n      left: 50%;\n      transform: translateX(-50%);\n      &:after {\n        left: 50%;\n        transform: translateX(-50%);\n      }\n    }\n    &.left {\n      right: -10px;\n      &:after {\n        right: 15px;\n      }\n    }\n    &.active {\n      visibility: visible;\n      opacity: 1;\n    }\n    &:after {\n      content: '';\n      border-left: 6px solid transparent;\n      position: absolute;\n      border-right: 6px solid transparent;\n      border-top: 6px solid ", ";\n      bottom: 10px;\n    }\n    .menu-list {\n      border-radius: 10px;\n      background: #fff;\n      min-width: 175px;\n      max-height: 500px;\n      transition: all 250ms ease-in-out;\n      overflow: auto;\n      max-height: 400px;\n    }\n  }\n"])), function (props) {
   return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.borderColor) : 'rgb(0, 206, 198)';
 });
-var MenuIcon = (0, _styledComponents["default"])(_components.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0px;\n  &:hover,\n  &:focus {\n    background: transparent;\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
-  return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.themeColor) : '#00cec6';
-});
+var MenuIcon = (0, _styledComponents["default"])(_components.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0px;\n  &:hover,\n  &:focus {\n    background: transparent;\n  }\n"])));
 function Menu(_ref) {
   var style = _ref.style,
     children = _ref.children,

package/components/Video.js

@@ -440,7 +440,11 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         src = _this$props4.src,
         activeAudio = _this$props4.player.activeAudio,
         currentSubtitleObj = _this$props4.currentSubtitleObj,
-        markers = _this$props4.markers;
+        markers = _this$props4.markers,
+        playerType = _this$props4.playerType;
+      if (markers && markers !== newProps.markers && newProps.markers) {
+        this.displaySubtitle(newProps.markers);
+      }
       if (newProps.src !== src) {
         var isM3U8 = this.state.isM3U8;
         if (_hls["default"].isSupported() && isM3U8) {
@@ -1139,13 +1143,14 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         userEmail = _this$props31.userEmail,
         theme = _this$props31.theme,
         player = _this$props31.player,
-        playerType = _this$props31.playerType;
+        playerType = _this$props31.playerType,
+        markers = _this$props31.markers;
       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 || playerType !== "default";
+      var isSubtitleActive = player.SubtitleStatus && playerType === "default" || playerType === 'subtitle' && markers && markers.length;
       return /*#__PURE__*/_react["default"].createElement(VideoBlock, {
         className: "video-react-player-block",
         ref: function ref(c) {

package/components/control-bar/CaptionControlMenuButton.js

@@ -75,14 +75,29 @@ var CaptionControlMenuButton = /*#__PURE__*/function (_Component) {
         filterSelectedSubtitle(subtitleData[0].subtitle_info_id);
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props3 = this.props,
+        subtitleData = _this$props3.subtitleData,
+        actions = _this$props3.actions,
+        filterSelectedSubtitle = _this$props3.filterSelectedSubtitle,
+        player = _this$props3.player;
+      if (subtitleData !== prevProps.subtitleData && subtitleData.length && player.activeCaption === 'Off') {
+        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", {
+      var _this$props4 = this.props,
+        SubtitleStatus = _this$props4.player.SubtitleStatus,
+        theme = _this$props4.theme,
+        subtitleData = _this$props4.subtitleData,
+        playerType = _this$props4.playerType;
+      var showCaptionButton = subtitleData && subtitleData.length && playerType === 'default';
+      return showCaptionButton ? /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           marginRight: '10px'
         }

package/components/control-bar/FullscreenToggle.js

@@ -37,9 +37,7 @@ var defaultProps = {
   actions: {},
   player: {}
 };
-var FullscreenToggleButton = (0, _styledComponents["default"])(_components.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0 10px;\n  &:hover,\n  &:focus {\n    background: transparent;\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
-  return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.themeColor) : '#00cec6';
-});
+var FullscreenToggleButton = (0, _styledComponents["default"])(_components.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0 10px;\n  &:hover,\n  &:focus {\n    background: transparent;\n  }\n"])));
 var FullscreenToggle = exports["default"] = /*#__PURE__*/function (_Component) {
   _inherits(FullscreenToggle, _Component);
   function FullscreenToggle(props, context) {

package/package.json

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

package/reducers/player.js

@@ -50,7 +50,7 @@ var initialState = {
   // state used to show the value of selected subtitle
   markerCreate: false,
   rewindActive: false,
-  SubtitleStatus: true,
+  SubtitleStatus: false,
   // state used to show whether subtitle will be shown on player or not
   HLSConfig: {
     debug: true,