@desynova-digital/player 4.0.12 → 4.0.14

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/ControlBar.js

@@ -223,10 +223,11 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
       // playerType={playerType}
       // key="caption-control-menu-button"
       // />,
-      _react["default"].createElement(_CameraButton["default"], {
-        order: 9,
-        playerType: playerType
-      }), /*#__PURE__*/_react["default"].createElement(_SubtitleMovementMenu["default"], _extends({}, this.props, {
+      // <CameraButton 
+      //   order={9}
+      //   playerType={playerType}
+      // />,
+      _react["default"].createElement(_SubtitleMovementMenu["default"], _extends({}, this.props, {
         key: "subtitle-movement-menu",
         order: 8
       })), /*#__PURE__*/_react["default"].createElement(_AudioTracksMenuButton["default"], _extends({}, this.props, {

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

@@ -0,0 +1,60 @@
+"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 = _interopRequireDefault(require("prop-types"));
+var _components = require("@desynova-digital/components");
+var _tokens = require("@desynova-digital/tokens");
+var _utils = require("../../utils");
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  actions: _propTypes["default"].object.isRequired,
+  player: _propTypes["default"].object.isRequired,
+  theme: _propTypes["default"].string,
+  orientationType: _propTypes["default"].string
+};
+var CameraControlBlock = _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  p {\n    margin-left: 10px;\n    white-space: nowrap;\n  }\n"])), function (props) {
+  return props.theme ? _tokens.colors[props.theme].videoPlayer.rgbaThemeColor : 'rgba(0, 206, 198, 0.1)';
+});
+var CameraControl = function CameraControl(_ref) {
+  var actions = _ref.actions,
+    player = _ref.player,
+    theme = _ref.theme,
+    title = _ref.title,
+    iconName = _ref.iconName,
+    video = _ref.video,
+    frameRate = _ref.frameRate,
+    initialTime = _ref.initialTime,
+    onTakeSnapshot = _ref.onTakeSnapshot,
+    isPortrait = _ref.isPortrait;
+  var handleClick = function handleClick() {
+    var timeObj = {
+      "thumbnail": (0, _utils.secondsToTime)(video.currentTime, frameRate, initialTime),
+      "thumbnail_seconds": video.currentTime
+    };
+    onTakeSnapshot(timeObj, isPortrait);
+  };
+  return /*#__PURE__*/_react["default"].createElement(CameraControlBlock, {
+    theme: theme,
+    onClick: function onClick() {
+      return handleClick();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+    name: iconName,
+    width: 20,
+    height: 20,
+    color: "#333333"
+  }), /*#__PURE__*/_react["default"].createElement("p", null, title));
+};
+CameraControl.propTypes = propTypes;
+CameraControl.displayName = 'CameraControl';
+var _default = exports["default"] = CameraControl;

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

@@ -12,8 +12,9 @@ var _SafeAreaControl = _interopRequireDefault(require("./SafeAreaControl"));
 var _PlaybackRateControl = _interopRequireDefault(require("./PlaybackRateControl"));
 var _ParentMenuComponent = _interopRequireDefault(require("./ParentMenuComponent"));
 var _ChildMenuComponent = _interopRequireDefault(require("./ChildMenuComponent"));
+var _CameraControl = _interopRequireDefault(require("./CameraControl"));
 var _lodash = require("lodash");
-var _excluded = ["player", "actions", "style", "disablePlayerActions", "theme", "playerType", "subtitleData"];
+var _excluded = ["player", "actions", "style", "disablePlayerActions", "theme", "playerType", "subtitleData", "enablePlayerActions", "video", "frameRate", "initialTime", "onTakeSnapshot"];
 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); }
@@ -52,6 +53,11 @@ function SettingsMenu(_ref) {
     theme = _ref.theme,
     playerType = _ref.playerType,
     subtitleData = _ref.subtitleData,
+    enablePlayerActions = _ref.enablePlayerActions,
+    video = _ref.video,
+    frameRate = _ref.frameRate,
+    initialTime = _ref.initialTime,
+    onTakeSnapshot = _ref.onTakeSnapshot,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react.useState)(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -97,6 +103,33 @@ function SettingsMenu(_ref) {
     theme: theme,
     player: player,
     actions: actions
+  })), (playerType === 'tagging' || enablePlayerActions.includes('screenshots')) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "settings-menu-tile safe-area"
+  }, /*#__PURE__*/_react["default"].createElement(_CameraControl["default"], {
+    theme: theme,
+    playerType: playerType,
+    player: player,
+    actions: actions,
+    video: video,
+    frameRate: frameRate,
+    initialTime: initialTime,
+    onTakeSnapshot: onTakeSnapshot,
+    isPortrait: false,
+    title: "LANDSCAPE SCREENSHOT",
+    iconName: "landscape-screenshot"
+  })), (playerType === 'tagging' || enablePlayerActions.includes('screenshots')) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "settings-menu-tile safe-area"
+  }, /*#__PURE__*/_react["default"].createElement(_CameraControl["default"], {
+    theme: theme,
+    player: player,
+    actions: actions,
+    video: video,
+    frameRate: frameRate,
+    initialTime: initialTime,
+    onTakeSnapshot: onTakeSnapshot,
+    isPortrait: true,
+    title: "PORTRAIT SCREENSHOT",
+    iconName: "portrait-screenshot"
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "settings-menu-tile playback"
   }, /*#__PURE__*/_react["default"].createElement(_PlaybackRateControl["default"], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "4.0.12",
+  "version": "4.0.14",
   "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,