@desynova-digital/player 3.2.5 → 3.4.0

package/actions/player.js

@@ -149,7 +149,9 @@ function forward(seconds) {
     source: ''
   };
 
-  this.video.pause();
+  if (seconds < 1) {
+    this.video.pause();
+  }
   this.video.forward(seconds);
 
   return {
@@ -165,7 +167,9 @@ function replay(seconds) {
     source: ''
   };
 
-  this.video.pause();
+  if (seconds < 1) {
+    this.video.pause();
+  }
   this.video.replay(seconds);
 
   return {

package/components/PlayerHeader.js

@@ -78,7 +78,7 @@ var VideoTitle = _styledComponents2.default.button.withConfig({
 var PlayerDetails = _styledComponents2.default.div.withConfig({
   displayName: 'PlayerHeader__PlayerDetails',
   componentId: 'conl4h-2'
-})(['margin-left:20px;text-align:left;.video-bottom-container{display:flex;justify-content:flex-start;align-items:center;margin-top:8px;.video-sub-title{color:#afb2ba;font-size:10px;font-family:SFUIText-Medium;margin-right:5px;}.version-category{font-size:10px;letter-spacing:0.4px;color:#fff;font-family:SFUIText-Regular;text-transform:uppercase;}.versions-dropdown-block{position:relative;&:hover{.active-version{cursor:pointer;border-color:#00cec6 !important;}.versions-dropdown-container{visibility:visible;opacity:1;}}.active-version{transition:all 350ms ease-in-out;border:1px solid #fff;border-radius:10px;margin-left:5px;padding:3px 10px;color:#fff;font-size:10px;font-family:SFUIText-Regular;font-weight:bold;pointer-events:none;}.versions-dropdown-container{padding-top:15px;position:absolute;top:13px;left:50%;transform:translateX(-50%);visibility:hidden;opacity:0;transition:all 450ms ease-in-out;&:after{content:\'\';border-bottom:6px solid #00cec6;border-right:6px solid transparent;border-left:6px solid transparent;position:absolute;top:9px;left:50%;transform:translateX(-50%);}.versions-container{overflow-y:auto;overflow-x:hidden;max-height:204px;box-shadow:0px 12px 24px rgb(0 0 0 / 20%);min-width:250px;background:#fff;border-radius:10px;.ingest-versions-container{border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 15px;.ingest-version-block{display:flex;justify-content:space-between;align-items:center;.upload-type{width:6px;height:6px;border-radius:100%;overflow:hidden;left:5px;position:absolute;}.ingest-version-name{color:#182738;font-size:11px;font-family:SFUIText-Regular;font-weight:bold;margin-right:10px;}.video-versions-container{display:inline-flex;align-items:center;.more-dropdown-icon{padding-top:8px;cursor:pointer;}path{fill:#182738;}}}}&::-webkit-scrollbar{width:5px;background-color:#6d6a6a;}}}}.video-time-block{margin-left:5px;.tv-time,.ott-time{display:flex;justify-content:center;align-items:center;margin-left:10px;font-size:10px;p{margin-left:5px;color:#afb2ba;}}}}']);
+})(['margin-left:20px;text-align:left;.video-bottom-container{display:flex;justify-content:flex-start;align-items:center;margin-top:8px;.video-sub-title{color:#afb2ba;font-size:10px;font-family:SFUIText-Medium;margin-right:5px;}.version-category{font-size:10px;letter-spacing:0.4px;color:#fff;font-family:SFUIText-Regular;text-transform:uppercase;}.versions-dropdown-block{position:relative;&:hover{.active-version{cursor:pointer;border-color:#00cec6 !important;}.versions-dropdown-container{visibility:visible;opacity:1;}}.active-version{transition:all 350ms ease-in-out;border:1px solid #fff;border-radius:10px;margin-left:5px;padding:3px 10px;color:#fff;font-size:10px;font-family:SFUIText-Regular;font-weight:bold;pointer-events:none;}.versions-dropdown-container{padding-top:15px;position:absolute;top:13px;left:50%;transform:translateX(-50%);visibility:hidden;opacity:0;transition:all 450ms ease-in-out;&:after{content:\'\';border-bottom:6px solid #00cec6;border-right:6px solid transparent;border-left:6px solid transparent;position:absolute;top:9px;left:50%;transform:translateX(-50%);}.versions-container{overflow-y:auto;overflow-x:hidden;max-height:204px;box-shadow:0px 12px 24px rgb(0 0 0 / 20%);min-width:250px;background:#fff;border-radius:10px;.ingest-versions-container{border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 15px;.ingest-version-block{display:flex;justify-content:space-between;align-items:center;.upload-type{width:6px;height:6px;border-radius:100%;overflow:hidden;left:5px;position:absolute;}.ingest-version-name{color:#182738;font-size:11px;font-family:SFUIText-Regular;font-weight:bold;margin-right:10px;}.video-versions-container{display:inline-flex;align-items:center;.more-dropdown-icon{padding-top:8px;cursor:pointer;}path{fill:#182738;}}}}&::-webkit-scrollbar{width:5px;background-color:#6d6a6a;}}}}.video-time-block{margin-left:5px;display:flex;justify-content:center;align-items:center;.tv-time,.ott-time{display:flex;justify-content:center;align-items:center;margin-left:10px;p{margin-left:5px;color:rgb(175,178,186);font-family:\'SFUIText-Regular\';font-size:10px;align-self:self-end;}}}}']);
 
 var VersionBlock = _styledComponents2.default.div.withConfig({
   displayName: 'PlayerHeader__VersionBlock',
@@ -387,7 +387,7 @@ var PlayerHeader = function (_Component) {
               videoDetails.tvTime ? _react2.default.createElement(
                 'div',
                 { className: 'tv-time' },
-                _react2.default.createElement(_components.Icon, { name: 'tv', width: 10, height: 9, color: '#afb2ba' }),
+                _react2.default.createElement(_components.Icon, { name: 'tv', width: 14, height: 12, color: '#afb2ba' }),
                 _react2.default.createElement(
                   'p',
                   null,
@@ -397,7 +397,7 @@ var PlayerHeader = function (_Component) {
               videoDetails.ottTime ? _react2.default.createElement(
                 'div',
                 { className: 'ott-time' },
-                _react2.default.createElement(_components.Icon, { name: 'ott', width: 10, height: 14, color: '#afb2ba' }),
+                _react2.default.createElement(_components.Icon, { name: 'tablet', width: 16, height: 12, color: '#afb2ba' }),
                 _react2.default.createElement(
                   'p',
                   null,

package/components/PointersBar.js

@@ -136,8 +136,9 @@ var PointersBar = function (_Component) {
       this.setState(_extends({}, tooltip), function () {
         var tooltip = _this2.state.tooltip;
 
+        var tooltipRefOffset = _this2._tooltipRef.current && _this2._tooltipRef.current.offsetWidth ? _this2._tooltipRef.current.offsetWidth / 2 : 0;
         tooltip.isVisible = true;
-        tooltip.left = tooltip.left - _this2._tooltipRef.current.offsetWidth / 2;
+        tooltip.left = tooltip.left - tooltipRefOffset;
         _this2.setState(_extends({}, tooltip));
       });
     }

package/components/Video.js

@@ -747,7 +747,9 @@ var Video = function (_Component) {
           markers = _props14.markers,
           resetSubtitleData = _props14.resetSubtitleData;
 
-      resetSubtitleData();
+      if (resetSubtitleData) {
+        resetSubtitleData();
+      }
       var currentTime = this.video.currentTime;
       var currentMarker = marker || markers;
       if (currentMarker && currentMarker[0] && currentMarker[0].name === "Subtitle") {

package/components/control-bar/CameraButton.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _createClass = 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _styledComponents = require("styled-components");
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+var _components = require("@desynova-digital/components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var CameraButtonIcon = (0, _styledComponents2.default)(_components.Button).withConfig({
+    displayName: "CameraButton__CameraButtonIcon",
+    componentId: "sc-1iapkc3-0"
+})(["background:transparent;border:none;margin:0px;margin-right:10px;&:hover,&:focus{background:transparent;}"]);
+
+var propTypes = {
+    actions: _propTypes.PropTypes.instanceOf(Object),
+    player: _propTypes.PropTypes.instanceOf(Object),
+    handleClick: _propTypes.PropTypes.func
+};
+
+var CameraButton = function (_Component) {
+    _inherits(CameraButton, _Component);
+
+    function CameraButton(props, context) {
+        _classCallCheck(this, CameraButton);
+
+        var _this = _possibleConstructorReturn(this, (CameraButton.__proto__ || Object.getPrototypeOf(CameraButton)).call(this, props, context));
+
+        _this.handleClick = _this.handleClick.bind(_this);
+        return _this;
+    }
+
+    _createClass(CameraButton, [{
+        key: "handleClick",
+        value: function handleClick() {
+            var _props = this.props,
+                onTakeSnapshot = _props.onTakeSnapshot,
+                video = _props.video;
+
+            onTakeSnapshot(video.currentTime);
+        }
+    }, {
+        key: "render",
+        value: function render() {
+            var playerType = this.props.playerType;
+
+            return playerType === 'tagging' && _react2.default.createElement(CameraButtonIcon, {
+                display: "rounded",
+                appearance: "cta",
+                icon: "camera",
+                iconWidth: 18,
+                iconHeight: 18,
+                width: 20,
+                height: 20,
+                onClick: this.handleClick
+            });
+        }
+    }]);
+
+    return CameraButton;
+}(_react.Component);
+
+exports.default = CameraButton;

package/components/control-bar/ControlBar.js

@@ -72,6 +72,10 @@ var _SubtitleLanguagesMenuButton = require('./SubtitleLanguagesMenuButton');
 
 var _SubtitleLanguagesMenuButton2 = _interopRequireDefault(_SubtitleLanguagesMenuButton);
 
+var _CameraButton = require('./CameraButton');
+
+var _CameraButton2 = _interopRequireDefault(_CameraButton);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -187,7 +191,10 @@ var ControlBar = function (_Component) {
       }, this.props, {
         key: 'volume-menu-button',
         order: 8
-      })), _react2.default.createElement(_AudioTracksMenuButton2.default, _extends({}, this.props, {
+      })), _react2.default.createElement(_CameraButton2.default, {
+        order: 9,
+        playerType: playerType
+      }), _react2.default.createElement(_AudioTracksMenuButton2.default, _extends({}, this.props, {
         key: 'audio-tracks-menu-button',
         order: 9
       })), _react2.default.createElement(_SettingsMenuButton2.default, _extends({}, this.props, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "3.2.5",
+  "version": "3.4.0",
   "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": "^8.1.6",
-    "@desynova-digital/tokens": "^8.1.6",
+    "@desynova-digital/components": "^8.9.0",
+    "@desynova-digital/tokens": "^8.9.0",
     "hls.js": "^0.11.0",
     "latest-version": "^4.0.0",
     "prettycli": "^1.4.3",