npm - @desynova-digital/player - Versions diffs - 4.1.14 → 4.2.1 - Mend

@desynova-digital/player 4.1.14 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/components/ImageViewer.js +283 -86
package/components/Player.js +66 -40
package/components/Video.js +92 -44
package/components/control-bar/AudioTracksMenuButton.js +55 -25
package/components/control-bar/ControlBar.js +21 -6
package/components/control-bar/FullscreenToggle.js +15 -7
package/package.json +1 -1

package/components/ImageViewer.js CHANGED Viewed

@@ -8,21 +8,16 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _CommentsButton = _interopRequireDefault(require("./control-bar/CommentsButton"));
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /* eslint-disable linebreak-style */
 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); }
 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 && {}.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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
 function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
@@ -30,7 +25,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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 _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+// import CommentsButton from './control-bar/CommentsButton';
 /*
  * import { colors } from '@desynova-digital/tokens';
  * import colors from '../colors';
@@ -38,16 +38,91 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
 var propTypes = {
   src: _propTypes.PropTypes.string,
-  theme: _propTypes.PropTypes.string
+  theme: _propTypes.PropTypes.string,
+  playerSvgRef: _propTypes.PropTypes.instanceOf(Object),
+  parentAnnotations: _propTypes.PropTypes.instanceOf(Array),
+  onShapeMouseDown: _propTypes.PropTypes.func,
+  handleMouseDown: _propTypes.PropTypes.func,
+  handleMouseMove: _propTypes.PropTypes.func,
+  handleMouseUp: _propTypes.PropTypes.func,
+  isSvgLayer: _propTypes.PropTypes.bool,
+  isFullscreen: _propTypes.PropTypes.bool,
+  isRightMenuVisible: _propTypes.PropTypes.bool
 };
-var ImageContainer = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: hidden;\n"])));
-var ImageBlock = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: calc(100% - 50px);\n  img {\n    position: relative;\n    transition: all 350ms ease-in-out;\n    &.moving {\n      transition: none;\n    }\n  }\n"])));
-var ImageControls = (0, _styledComponents["default"])('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  height: 50px;\n  background: #000;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 0 20px;\n  .zoom-in, .zoom-out {\n    width: 20px;\n    height: 20px;\n    position: relative;\n    cursor: pointer;\n    &:after {\n      content: '';\n      position: absolute;\n      width: 14px;\n      height: 2px;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: #afb2ba;\n    }\n  }\n  .zoom-in {\n    &:before {\n      content: '';\n      position: absolute;\n      width: 2px;\n      height: 14px;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: #afb2ba;\n    }\n  }\n  .percent {\n    font-size: 14px;\n    font-family: SFUIText-Regular;\n    color: #fff;\n    margin: 0 15px;\n  }\n"])));
+var ImageContainer = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: hidden;\n  flex: ", ";\n  min-height: ", ";\n"])), function (_ref) {
+  var isFullscreenWithRightSection = _ref.isFullscreenWithRightSection,
+    isFullscreen = _ref.isFullscreen;
+  return isFullscreenWithRightSection || isFullscreen ? '1 1 auto' : 'initial';
+}, function (_ref2) {
+  var isFullscreenWithRightSection = _ref2.isFullscreenWithRightSection,
+    isFullscreen = _ref2.isFullscreen;
+  return isFullscreenWithRightSection || isFullscreen ? '0' : 'initial';
+});
+var ImageBlock = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: ", ";\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n  width: 100%;\n  height: ", ";\n  img {\n    position: absolute;\n    transition: all 350ms ease-in-out;\n    &.moving {\n      transition: none;\n    }\n  }\n"])), function (_ref3) {
+  var isFullscreenWithRightSection = _ref3.isFullscreenWithRightSection,
+    isFullscreen = _ref3.isFullscreen;
+  return isFullscreenWithRightSection || isFullscreen ? 'relative' : 'absolute';
+}, function (_ref4) {
+  var isFullscreenWithRightSection = _ref4.isFullscreenWithRightSection,
+    isFullscreen = _ref4.isFullscreen;
+  return isFullscreenWithRightSection || isFullscreen ? 'auto' : '0';
+}, function (_ref5) {
+  var isFullscreenWithRightSection = _ref5.isFullscreenWithRightSection,
+    isFullscreen = _ref5.isFullscreen;
+  return isFullscreenWithRightSection || isFullscreen ? 'auto' : '0';
+}, function (_ref6) {
+  var isFullscreenWithRightSection = _ref6.isFullscreenWithRightSection,
+    isFullscreen = _ref6.isFullscreen;
+  return isFullscreenWithRightSection || isFullscreen ? 'auto' : '0';
+}, function (_ref7) {
+  var isFullscreenWithRightSection = _ref7.isFullscreenWithRightSection,
+    isFullscreen = _ref7.isFullscreen;
+  return isFullscreenWithRightSection || isFullscreen ? 'auto' : '0';
+}, function (_ref8) {
+  var isFullscreenWithRightSection = _ref8.isFullscreenWithRightSection,
+    isFullscreen = _ref8.isFullscreen;
+  return isFullscreenWithRightSection || isFullscreen ? '100%' : 'calc(100% - 50px)';
+});
+var ImageSvgLayer = (0, _styledComponents["default"])('svg')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 2;\n"])));
+var ImageControls = (0, _styledComponents["default"])('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  height: 50px;\n  background: #000;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 0 20px;\n  .zoom-in, .zoom-out {\n    width: 20px;\n    height: 20px;\n    position: relative;\n    cursor: pointer;\n    &:after {\n      content: '';\n      position: absolute;\n      width: 14px;\n      height: 2px;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: #afb2ba;\n    }\n  }\n  .zoom-in {\n    &:before {\n      content: '';\n      position: absolute;\n      width: 2px;\n      height: 14px;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: #afb2ba;\n    }\n  }\n  .percent {\n    font-size: 14px;\n    font-family: SFUIText-Regular;\n    color: #fff;\n    margin: 0 15px;\n  }\n"])));
 var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
   function ImageViewer(props) {
     var _this;
     _classCallCheck(this, ImageViewer);
     _this = _callSuper(this, ImageViewer, [props]);
+    _defineProperty(_this, "handleContainerResize", function () {
+      _this.fitImageToContainer();
+    });
+    _defineProperty(_this, "fitImageToContainer", function () {
+      if (!_this.imageRef || !_this.imageBlock) {
+        return;
+      }
+      var naturalWidth = _this.imageRef.naturalWidth;
+      var naturalHeight = _this.imageRef.naturalHeight;
+      var containerWidth = _this.imageBlock.offsetWidth;
+      var containerHeight = _this.imageBlock.offsetHeight;
+      if (!naturalWidth || !naturalHeight || !containerWidth || !containerHeight) {
+        return;
+      }
+      var scale = Math.min(containerWidth / naturalWidth, containerHeight / naturalHeight);
+      var fittedWidth = naturalWidth * scale;
+      var fittedHeight = naturalHeight * scale;
+      var percentage = Math.round(scale * 100);
+      var imageLeft = (containerWidth - fittedWidth) / 2;
+      var imageTop = (containerHeight - fittedHeight) / 2;
+      _this.setState({
+        minWidth: fittedWidth,
+        minHeight: fittedHeight,
+        maxWidth: naturalWidth,
+        maxHeight: naturalHeight,
+        currentWidth: fittedWidth,
+        currentHeight: fittedHeight,
+        percentage: percentage,
+        imageLeft: imageLeft,
+        imageTop: imageTop,
+        draggable: false
+      });
+    });
     _this.state = {
       minWidth: 0,
       minHeight: 0,
@@ -68,7 +143,31 @@ var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
   _inherits(ImageViewer, _Component);
   return _createClass(ImageViewer, [{
     key: "componentDidMount",
-    value: function componentDidMount() {}
+    value: function componentDidMount() {
+      window.addEventListener('resize', this.handleContainerResize);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+      var isLayoutChange = prevProps.src !== this.props.src || prevProps.isFullscreen !== this.props.isFullscreen || prevProps.isRightMenuVisible !== this.props.isRightMenuVisible;
+      if (isLayoutChange) {
+        requestAnimationFrame(function () {
+          _this2.fitImageToContainer();
+          requestAnimationFrame(function () {
+            _this2.fitImageToContainer();
+          });
+        });
+        setTimeout(function () {
+          _this2.fitImageToContainer();
+        }, 120);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.handleContainerResize);
+    }
   }, {
     key: "onMouseDown",
     value: function onMouseDown() {
@@ -129,53 +228,40 @@ var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleImageLoaded",
     value: function handleImageLoaded() {
-      var percentage = Math.round(this.imageRef.offsetHeight / this.imageRef.naturalHeight * 100);
-      var imageLeft = (this.imageBlock.offsetWidth - this.imageRef.offsetWidth) / 2;
-      var imageTop = (this.imageBlock.offsetHeight - this.imageRef.offsetHeight) / 2;
-      this.setState({
-        minWidth: this.imageRef.offsetWidth,
-        minHeight: this.imageRef.offsetHeight,
-        maxWidth: this.imageRef.naturalWidth,
-        maxHeight: this.imageRef.naturalHeight,
-        currentWidth: this.imageRef.offsetWidth,
-        currentHeight: this.imageRef.offsetHeight,
-        percentage: percentage,
-        imageLeft: imageLeft,
-        imageTop: imageTop
-      });
+      this.fitImageToContainer();
     }
+    // zoomIn() {
+    //   const {
+    //     maxWidth,
+    //     maxHeight,
+    //     percentage
+    //   } = this.state;
+    //   if(percentage < 100) {
+    //     var newPercentage = (Math.round(percentage / 10) * 10) + 10;
+    //     newPercentage = newPercentage > 100 ? 100 : newPercentage;
+    //     let newWidth = (newPercentage * maxWidth) / 100;
+    //     let newHeight = (newPercentage * maxHeight) / 100;
+    //     let imageLeft = (this.imageBlock.offsetWidth - newWidth) / 2;
+    //     let imageTop = (this.imageBlock.offsetHeight - newHeight) / 2;
+    //     this.setState({
+    //       percentage: newPercentage,
+    //       currentWidth: newWidth,
+    //       currentHeight: newHeight,
+    //       draggable: true,
+    //       imageLeft,
+    //       imageTop
+    //     });
+    //   }
+    // }
   }, {
-    key: "zoomIn",
-    value: function zoomIn() {
+    key: "zoomOut",
+    value: function zoomOut() {
       var _this$state2 = this.state,
+        minWidth = _this$state2.minWidth,
         maxWidth = _this$state2.maxWidth,
         maxHeight = _this$state2.maxHeight,
         percentage = _this$state2.percentage;
-      if (percentage < 100) {
-        var newPercentage = Math.round(percentage / 10) * 10 + 10;
-        newPercentage = newPercentage > 100 ? 100 : newPercentage;
-        var newWidth = newPercentage * maxWidth / 100;
-        var newHeight = newPercentage * maxHeight / 100;
-        var imageLeft = (this.imageBlock.offsetWidth - newWidth) / 2;
-        var imageTop = (this.imageBlock.offsetHeight - newHeight) / 2;
-        this.setState({
-          percentage: newPercentage,
-          currentWidth: newWidth,
-          currentHeight: newHeight,
-          draggable: true,
-          imageLeft: imageLeft,
-          imageTop: imageTop
-        });
-      }
-    }
-  }, {
-    key: "zoomOut",
-    value: function zoomOut() {
-      var _this$state3 = this.state,
-        minWidth = _this$state3.minWidth,
-        maxWidth = _this$state3.maxWidth,
-        maxHeight = _this$state3.maxHeight,
-        percentage = _this$state3.percentage;
       if (percentage) {
         var minPercent = Math.round(minWidth / maxWidth * 100);
         var newPercentage = Math.round(percentage / 10) * 10 - 10;
@@ -200,26 +286,67 @@ var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
         this.setState(stateObj);
       }
     }
+  }, {
+    key: "buildSmoothPath",
+    value: function buildSmoothPath(points, width, height) {
+      if (!(points !== null && points !== void 0 && points.length)) return '';
+      if (points.length === 1) {
+        var x = points[0].x * width;
+        var y = points[0].y * height;
+        return "M ".concat(x, " ").concat(y);
+      }
+      var scaled = points.map(function (point) {
+        return {
+          x: point.x * width,
+          y: point.y * height
+        };
+      });
+      var d = "M ".concat(scaled[0].x, " ").concat(scaled[0].y);
+      for (var i = 1; i < scaled.length - 1; i += 1) {
+        var midX = (scaled[i].x + scaled[i + 1].x) / 2;
+        var midY = (scaled[i].y + scaled[i + 1].y) / 2;
+        d += " Q ".concat(scaled[i].x, " ").concat(scaled[i].y, " ").concat(midX, " ").concat(midY);
+      }
+      var last = scaled[scaled.length - 1];
+      d += " L ".concat(last.x, " ").concat(last.y);
+      return d;
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-      var _this$state4 = this.state,
-        minWidth = _this$state4.minWidth,
-        minHeight = _this$state4.minHeight,
-        maxWidth = _this$state4.maxWidth,
-        maxHeight = _this$state4.maxHeight,
-        currentWidth = _this$state4.currentWidth,
-        currentHeight = _this$state4.currentHeight,
-        percentage = _this$state4.percentage,
-        imageTop = _this$state4.imageTop,
-        imageLeft = _this$state4.imageLeft,
-        draggable = _this$state4.draggable,
-        moving = _this$state4.moving;
-      var src = this.props.src;
-      return /*#__PURE__*/_react["default"].createElement(ImageContainer, null, /*#__PURE__*/_react["default"].createElement(ImageBlock, {
+      var _this3 = this;
+      var _this$state3 = this.state,
+        minWidth = _this$state3.minWidth,
+        minHeight = _this$state3.minHeight,
+        maxWidth = _this$state3.maxWidth,
+        maxHeight = _this$state3.maxHeight,
+        currentWidth = _this$state3.currentWidth,
+        currentHeight = _this$state3.currentHeight,
+        percentage = _this$state3.percentage,
+        imageTop = _this$state3.imageTop,
+        imageLeft = _this$state3.imageLeft,
+        draggable = _this$state3.draggable,
+        moving = _this$state3.moving;
+      var _this$props = this.props,
+        src = _this$props.src,
+        playerSvgRef = _this$props.playerSvgRef,
+        _this$props$parentAnn = _this$props.parentAnnotations,
+        parentAnnotations = _this$props$parentAnn === void 0 ? [] : _this$props$parentAnn,
+        isSvgLayer = _this$props.isSvgLayer,
+        handleMouseDown = _this$props.handleMouseDown,
+        handleMouseMove = _this$props.handleMouseMove,
+        handleMouseUp = _this$props.handleMouseUp,
+        onShapeMouseDown = _this$props.onShapeMouseDown;
+      var showSvgLayer = isSvgLayer || parentAnnotations.length > 0;
+      var isFullscreenWithRightSection = this.props.isFullscreen && this.props.isRightMenuVisible;
+      return /*#__PURE__*/_react["default"].createElement(ImageContainer, {
+        isFullscreen: this.props.isFullscreen,
+        isFullscreenWithRightSection: isFullscreenWithRightSection
+      }, /*#__PURE__*/_react["default"].createElement(ImageBlock, {
+        isFullscreen: this.props.isFullscreen,
+        isFullscreenWithRightSection: isFullscreenWithRightSection,
         ref: function ref(imageBlock) {
-          return _this2.imageBlock = imageBlock;
+          return _this3.imageBlock = imageBlock;
         }
       }, /*#__PURE__*/_react["default"].createElement("img", {
         role: "presentation",
@@ -232,11 +359,12 @@ var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
           height: currentHeight,
           top: imageTop,
           left: imageLeft,
-          cursor: draggable ? 'grab' : 'default'
+          cursor: draggable ? 'grab' : 'default',
+          pointerEvents: isSvgLayer ? 'none' : 'auto'
         },
         draggable: false,
         ref: function ref(imageRef) {
-          return _this2.imageRef = imageRef;
+          return _this3.imageRef = imageRef;
         },
         onLoad: this.handleImageLoaded.bind(this),
         onMouseDown: this.onMouseDown.bind(this),
@@ -246,24 +374,93 @@ var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
         src: src,
         className: moving ? 'moving' : ''
         // src='https://www.nginx.com/wp-content/uploads/2015/04/nginx-plus-dashboard_R6.png'
-      })), /*#__PURE__*/_react["default"].createElement(ImageControls, null, /*#__PURE__*/_react["default"].createElement("p", {
-        className: "zoom-in",
-        role: "presentation",
-        onClick: function onClick() {
-          return _this2.zoomIn();
+      }), showSvgLayer ? /*#__PURE__*/_react["default"].createElement(ImageSvgLayer, {
+        ref: playerSvgRef,
+        onMouseDown: handleMouseDown,
+        onMouseMove: handleMouseMove,
+        onMouseUp: handleMouseUp,
+        style: {
+          top: imageTop || 0,
+          left: imageLeft || 0,
+          width: currentWidth || 0,
+          height: currentHeight || 0,
+          pointerEvents: showSvgLayer ? 'auto' : 'none'
         }
-      }), /*#__PURE__*/_react["default"].createElement("p", {
-        className: "percent"
-      }, percentage, "%"), /*#__PURE__*/_react["default"].createElement("p", {
-        className: "zoom-out",
-        role: "presentation",
-        onClick: function onClick() {
-          return _this2.zoomOut();
+      }, parentAnnotations.map(function (ann, idx) {
+        var _this3$imageRef, _this3$imageRef2;
+        var width = Number(currentWidth) || ((_this3$imageRef = _this3.imageRef) === null || _this3$imageRef === void 0 ? void 0 : _this3$imageRef.offsetWidth) || 0;
+        var height = Number(currentHeight) || ((_this3$imageRef2 = _this3.imageRef) === null || _this3$imageRef2 === void 0 ? void 0 : _this3$imageRef2.offsetHeight) || 0;
+        if (!width || !height) return null;
+        if (ann.type === 'rect') {
+          return /*#__PURE__*/_react["default"].createElement("rect", {
+            key: idx,
+            x: ann.x * width,
+            y: ann.y * height,
+            width: ann.width * width,
+            height: ann.height * height,
+            stroke: ann.color,
+            strokeWidth: "4",
+            fill: "none",
+            onMouseDown: function onMouseDown(e) {
+              return onShapeMouseDown(e, idx, ann);
+            },
+            style: {
+              cursor: isSvgLayer ? 'move' : 'default'
+            }
+          });
+        }
+        if (ann.type === 'line' || ann.type === 'arrow') {
+          return /*#__PURE__*/_react["default"].createElement("line", {
+            key: idx,
+            x1: ann.x1 * width,
+            y1: ann.y1 * height,
+            x2: ann.x2 * width,
+            y2: ann.y2 * height,
+            stroke: ann.color,
+            strokeWidth: "4",
+            markerEnd: ann.type === 'arrow' ? "url(#open-arrowhead-".concat(ann.color.replace('#', ''), "-").concat(idx, ")") : undefined,
+            onMouseDown: function onMouseDown(e) {
+              return onShapeMouseDown(e, idx, ann);
+            },
+            style: {
+              cursor: isSvgLayer ? 'move' : 'default'
+            }
+          });
+        }
+        if (ann.type === 'pencil') {
+          return /*#__PURE__*/_react["default"].createElement("path", {
+            key: idx,
+            d: _this3.buildSmoothPath(ann.points, width, height),
+            stroke: ann.color,
+            strokeWidth: "4",
+            fill: "none",
+            onMouseDown: function onMouseDown(e) {
+              return onShapeMouseDown(e, idx, ann);
+            },
+            style: {
+              cursor: isSvgLayer ? 'move' : 'default'
+            }
+          });
         }
-      }), /*#__PURE__*/_react["default"].createElement(_CommentsButton["default"], _extends({}, this.props, {
-        key: "comments-button",
-        order: 6.01
-      }))));
+        return null;
+      }), /*#__PURE__*/_react["default"].createElement("defs", null, parentAnnotations.map(function (ann, idx) {
+        if (ann.type !== 'arrow') return null;
+        return /*#__PURE__*/_react["default"].createElement("marker", {
+          key: idx,
+          id: "open-arrowhead-".concat(ann.color.replace('#', ''), "-").concat(idx),
+          markerWidth: "10",
+          markerHeight: "10",
+          refX: "8",
+          refY: "5",
+          orient: "auto",
+          markerUnits: "strokeWidth"
+        }, /*#__PURE__*/_react["default"].createElement("path", {
+          d: "M 1 1 L 8 5 L 1 10",
+          fill: "none",
+          stroke: ann.color,
+          strokeWidth: "1"
+        }));
+      }))) : null));
     }
   }]);
 }(_react.Component);

package/components/Player.js CHANGED Viewed

@@ -25,12 +25,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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); }
 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 && {}.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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -158,7 +152,7 @@ var defaultProps = {
   onVolumeChange: null
 };
 var PlayerBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n"])));
-var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.fullscreen-left-only .right-video-section {\n  display: none !important;\n}\n\n.fullscreen-left-only .left-video-section {\n  display: block !important;\n}\n  &.fullscreen-left-only {\n  .right-video-section {\n    display: none !important;\n  }\n  .left-video-section {\n    width: 100% !important;\n  }\n}\n  display: flex;\n  justify-content: flex-start;\n  background: #000000;\n  height: ", ";\n  .left-video-section {\n    width: ", ";\n    position: relative;\n    height: ", ";\n  }\n  .audio-meter-block {\n    position: relative;\n    width: 0px;\n    display: none;\n    &.qc {\n      width: 70px;\n      display: block;\n    }\n  }\n .right-video-section {\n  position: relative;\n  width: ", ";\n"])), function (props) {
+var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.fullscreen-left-only .right-video-section {\n  display: none !important;\n}\n\n.fullscreen-left-only .left-video-section {\n  display: block !important;\n}\n  &.fullscreen-left-only {\n  .right-video-section {\n    display: none !important;\n  }\n  .left-video-section {\n    width: 100% !important;\n  }\n}\n  display: flex;\n  justify-content: flex-start;\n  background: #000000;\n  height: ", ";\n  .left-video-section {\n    width: ", ";\n    position: relative;\n    display: ", ";\n    flex-direction: ", ";\n    min-height: ", ";\n    height: ", ";\n  }\n  .audio-meter-block {\n    position: relative;\n    width: 0px;\n    display: none;\n    &.qc {\n      width: 70px;\n      display: block;\n    }\n  }\n .right-video-section {\n  position: relative;\n  width: ", ";\n"])), function (props) {
   return props.noRightComponent && "calc(100% - 1px) !important;";
 }, function (props) {
   if (!props.isRightMenuVisible) {
@@ -169,6 +163,12 @@ var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_tem
   } else {
     return '100%';
   }
+}, function (props) {
+  return props.fileType === 'image' && props.isFullscreen ? 'flex' : 'block';
+}, function (props) {
+  return props.fileType === 'image' && props.isFullscreen ? 'column' : 'initial';
+}, function (props) {
+  return props.fileType === 'image' && props.isFullscreen ? '0' : 'initial';
 }, function (props) {
   return props.noRightComponent && '100%';
 }, function (props) {
@@ -203,6 +203,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, Player);
     _this = _callSuper(this, Player, [props]);
+    _defineProperty(_this, "captureRightMenuVisibilityBeforeFullscreen", function (isVisible) {
+      _this.rightMenuVisibilityBeforeFullscreen = isVisible;
+    });
     _defineProperty(_this, "getPlayerInstance", function () {
       return _this;
     });
@@ -212,18 +215,26 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       // Wait for fullscreen to finish layout
       requestAnimationFrame(function () {
         requestAnimationFrame(function () {
+          var _this$video, _this$video$fitImageT;
           // Force browser reflow
           document.body.getBoundingClientRect();
           // Now trigger resize for React / your components
           window.dispatchEvent(new Event('resize'));
           _this.handleResize();
+          (_this$video = _this.video) === null || _this$video === void 0 || (_this$video$fitImageT = _this$video.fitImageToContainer) === null || _this$video$fitImageT === void 0 || _this$video$fitImageT.call(_this$video);
         });
       });
       // Final fallback in case layout changes land after the next frame
       setTimeout(function () {
-        return _this.handleResize();
+        var _this$video2, _this$video2$fitImage;
+        _this.handleResize();
+        (_this$video2 = _this.video) === null || _this$video2 === void 0 || (_this$video2$fitImage = _this$video2.fitImageToContainer) === null || _this$video2$fitImage === void 0 || _this$video2$fitImage.call(_this$video2);
       }, 120);
+      setTimeout(function () {
+        var _this$video3, _this$video3$fitImage;
+        (_this$video3 = _this.video) === null || _this$video3 === void 0 || (_this$video3$fitImage = _this$video3.fitImageToContainer) === null || _this$video3$fitImage === void 0 || _this$video3$fitImage.call(_this$video3);
+      }, 240);
     });
     _defineProperty(_this, "closeSidemenu", function () {
       var _this$manager$getStat = _this.manager.getState(),
@@ -286,6 +297,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     _this.state = {
       reviewIndex: 0
     };
+    _this.rightMenuVisibilityBeforeFullscreen = props.isRightMenuVisible;
     _this.controlsHideTimer = null;
     _this.meterHeight = 40;
     _this.video = null; // the Video component
@@ -565,7 +577,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
         order: 5,
         playerType: fullProps.playerType,
-        onRightMenuVisible: onRightMenuVisible
+        onRightMenuVisible: onRightMenuVisible,
+        onBeforeFullscreenToggle: this.captureRightMenuVisibilityBeforeFullscreen
       }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
         key: "shortcut",
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
@@ -580,6 +593,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "getImageChildren",
     value: function getImageChildren(props, fullProps) {
       var _this3 = this;
+      var onRightMenuVisible = this.props.onRightMenuVisible;
       return [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
         ref: function ref(c) {
           _this3._playerHeader = c;
@@ -593,19 +607,16 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         },
         key: "image",
         order: 0.0
-      }, fullProps)),
-      /*#__PURE__*/
-      /*
-       * <ControlBar
-       *   ref={(c) => {
-       *     this._controlBar = c;
-       *   }}
-       *   key="control-bar"
-       *   order={2}
-       *   {...this.props}
-       * />,
-       */
-      _react["default"].createElement(_Shortcut["default"], _extends({
+      }, fullProps)), /*#__PURE__*/_react["default"].createElement(_ControlBar["default"], _extends({
+        ref: function ref(c) {
+          _this3._controlBar = c;
+        },
+        key: "control-bar",
+        order: 4,
+        playerType: fullProps === null || fullProps === void 0 ? void 0 : fullProps.playerType,
+        onRightMenuVisible: onRightMenuVisible,
+        onBeforeFullscreenToggle: this.captureRightMenuVisibilityBeforeFullscreen
+      }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
         key: "shortcut",
         order: 99.0
       }, props))];
@@ -661,7 +672,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
         order: 3,
         playerType: fullProps.playerType,
-        onRightMenuVisible: onRightMenuVisible
+        onRightMenuVisible: onRightMenuVisible,
+        onBeforeFullscreenToggle: this.captureRightMenuVisibilityBeforeFullscreen
       }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
         key: "shortcut",
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
@@ -777,16 +789,16 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "addTextTrack",
     value: function addTextTrack() {
-      var _this$video;
-      (_this$video = this.video).addTextTrack.apply(_this$video, arguments);
+      var _this$video4;
+      (_this$video4 = this.video).addTextTrack.apply(_this$video4, arguments);
     }
     // Check if your browser can play different types of video:
   }, {
     key: "canPlayType",
     value: function canPlayType() {
-      var _this$video2;
-      (_this$video2 = this.video).canPlayType.apply(_this$video2, arguments);
+      var _this$video5;
+      (_this$video5 = this.video).canPlayType.apply(_this$video5, arguments);
     }
     // seek video by time
@@ -832,6 +844,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleResize",
     value: function handleResize() {
+      var _this$video6, _this$video6$fitImage;
       var _this$manager$getStat4 = this.manager.getState(),
         player = _this$manager$getStat4.player;
       var leftSectionRef = this._leftSectionRef;
@@ -848,6 +861,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         playerType = _this$props5.playerType,
         fileType = _this$props5.fileType,
         isRightMenuVisible = _this$props5.isRightMenuVisible;
+      if (!leftSectionRef || !playerContainer || !video) {
+        return;
+      }
       //added for header height
       var headerHeight = playerHeader ? playerHeader.offsetHeight : 60;
@@ -857,7 +873,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       var totalWidth = window.innerWidth;
       var newHeight;
       var height = 0;
-      _toConsumableArray(leftSectionRef.children).forEach(function (child) {
+      Array.from(leftSectionRef.children || []).forEach(function (child) {
         return height += child.offsetHeight;
       });
       if (rightSectionRef) {
@@ -868,8 +884,10 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       //toggle functionality fullscreen on player header
       if (player.isFullscreen) {
         var containerWidth = playerContainer.offsetWidth;
-        playerHeader.style.width = "".concat(containerWidth, "px");
-      } else {
+        if (playerHeader) {
+          playerHeader.style.width = "".concat(containerWidth, "px");
+        }
+      } else if (playerHeader) {
         playerHeader.style.width = '100%';
       }
       //added for full screen with right section to little down for video player
@@ -880,7 +898,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       }
       if (audioMeterBlock) {
         audioMeterBlock.style.height = video.offsetHeight + 'px';
-        audioMeterBlock.style.top = playerHeader.offsetHeight + 'px';
+        audioMeterBlock.style.top = headerHeight + 'px';
         this.meterHeight = video.offsetHeight;
       }
       if (playlist) {
@@ -906,7 +924,14 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video.classList.add('ratio-border');
       }
       // Fullscreen mode with right section consideration
-      else if (player.isFullscreen && rightSectionRef) {
+      else if (player.isFullscreen && rightSectionRef && fileType === 'image') {
+        videoHeight = totalHeight - headerHeight;
+        video.style.paddingTop = '0';
+        video.style.width = '100%';
+        video.style.height = "".concat(videoHeight, "px");
+        video.style.margin = '0';
+        video.classList.remove('ratio-border');
+      } else if (player.isFullscreen && rightSectionRef) {
         // Calculate available width considering right section
         var availableWidth = totalWidth;
         if (isRightMenuVisible) {
@@ -929,14 +954,14 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       } else if (window.innerHeight < 1024 && (playerContainer.offsetHeight > window.innerHeight || window.innerHeight > playerContainer.offsetHeight)) {
         var _this$props6;
         var playlistMinHeight = 150;
-        if (controlType === 'default') {
+        if (controlType === 'default' || fileType === 'image') {
           if (fileType === 'image') {
-            videoHeight = window.innerHeight - playlistMinHeight - playerHeader.offsetHeight;
+            videoHeight = window.innerHeight - playlistMinHeight - headerHeight;
           } else {
-            videoHeight = window.innerHeight - playlistMinHeight - playerHeader.offsetHeight - progressControl.offsetHeight - controlBar.offsetHeight;
+            videoHeight = window.innerHeight - playlistMinHeight - headerHeight - (progressControl ? progressControl.offsetHeight : 0) - (controlBar ? controlBar.offsetHeight : 0);
           }
         } else {
-          videoHeight = window.innerHeight - playerHeader.offsetHeight - controlBar.offsetHeight - this._advancedControl.offsetHeight - 30;
+          videoHeight = window.innerHeight - headerHeight - (controlBar ? controlBar.offsetHeight : 0) - this._advancedControl.offsetHeight - 30;
         }
         videoWidth = videoHeight * (16 / 9);
         if (videoWidth > leftSectionRef.offsetWidth) {
@@ -957,7 +982,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video.classList.remove('ratio-border');
       }
       if (player.isFullscreen && progressControl) {
-        videoHeight = window.innerHeight - playerHeader.offsetHeight - progressControl.offsetHeight - controlBar.offsetHeight;
+        videoHeight = window.innerHeight - headerHeight - (progressControl ? progressControl.offsetHeight : 0) - (controlBar ? controlBar.offsetHeight : 0);
         if (videoWidth > window.innerWidth) {
           videoHeight = videoWidth * (9 / 16);
         }
@@ -967,8 +992,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video.classList.add('ratio-border');
       }
-      // Condition for spacing in full screen mode for review player
-      if (player.isFullscreen && (playerType === 'snp_edit' || playerType === 'pgm_edit')) {
+      // Condition for spacing in full screen mode for review player or default with image type
+      if (player.isFullscreen && (playerType === 'snp_edit' || playerType === 'pgm_edit' || playerType === 'default' && fileType === 'image')) {
         var reduceBy = 12; // adjust between 10–15px
         var newH = Math.max(videoHeight - reduceBy, 0);
         video.style.height = newH + 'px';
@@ -977,6 +1002,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         var widths = totalWidth - audioMeterBlock.offsetWidth - rightSectionRef.offsetWidth;
         video.style.width = widths + 'px';
       }
+      (_this$video6 = this.video) === null || _this$video6 === void 0 || (_this$video6$fitImage = _this$video6.fitImageToContainer) === null || _this$video6$fitImage === void 0 || _this$video6$fitImage.call(_this$video6);
       // this.video.handleResize();
     }
   }, {
@@ -1076,7 +1102,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         ref: function ref(rightSectionRef) {
           _this6._rightSectionRef = rightSectionRef;
         }
-      }, rightSection) : null), props.controlType === 'advanced' ? /*#__PURE__*/_react["default"].createElement(ControlContainer, {
+      }, rightSection) : null), props.controlType === 'advanced' && props.fileType !== 'image' ? /*#__PURE__*/_react["default"].createElement(ControlContainer, {
         ref: function ref(advancedControl) {
           _this6._advancedControl = advancedControl;
         }

package/components/Video.js CHANGED Viewed

@@ -99,7 +99,8 @@ var propTypes = {
   userEmail: _propTypes.PropTypes.string,
   playerSelectedMarker: _propTypes.PropTypes.instanceOf(Object),
   theme: _propTypes.PropTypes.string,
-  dubbedTracks: _propTypes.PropTypes.string
+  dubbedTracks: _propTypes.PropTypes.string,
+  additionalTracks: _propTypes.PropTypes.string
 };
 var defaultProps = {
   startTime: 0,
@@ -111,7 +112,8 @@ var defaultProps = {
   aspectRatio: 'auto',
   crossOrigin: 'anonymous',
   theme: 'dark',
-  dubbedTracks: null
+  dubbedTracks: null,
+  additionalTracks: null
 };
 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,\n    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  .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';
@@ -252,7 +254,8 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
     };
     _this.video = null; // the html5 video
     _this.manager = new _Manager["default"](props.store);
-    _this.dubbedTrackNames = null;
+    _this.dubbedTrackInfo = [];
+    _this.additionalTrackInfo = [];
     _this.getStyle = _this.getStyle.bind(_this);
     _this.getChildren = _this.getChildren.bind(_this);
     _this.play = _this.play.bind(_this);
@@ -299,8 +302,8 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   return _createClass(Video, [{
     key: "combineM3U8Manifests",
     value: function () {
-      var _combineM3U8Manifests = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(originalUrl, dubbedUrl) {
-        var fetchManifest, _yield$Promise$all, _yield$Promise$all2, originalContent, dubbedContent, extractAudioTracks, extractVideoStream, originalBase, dubbedBase, videoStreamUri, originalAudioTracks, dubbedAudioTracks, dubbedTrackNames, allTracksMap, allAudioTracks, combinedManifest, _i, _allAudioTracks, track;
+      var _combineM3U8Manifests = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(originalUrl, dubbedUrl, additionalTrackUrl) {
+        var fetchManifest, fetchPromises, contents, originalContent, dubbedContent, additionalContent, extractAudioTracks, extractVideoStream, originalBase, dubbedBase, additionalBase, videoStreamUri, originalAudioTracks, dubbedAudioTracks, additionalAudioTracks, allTracksMap, allAudioTracks, combinedManifest, _i, _allAudioTracks, track;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -327,17 +330,20 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
                     }
                   }, _callee);
                 }));
-                return function fetchManifest(_x3) {
+                return function fetchManifest(_x4) {
                   return _ref.apply(this, arguments);
                 };
-              }();
-              _context2.next = 3;
-              return Promise.all([fetchManifest(originalUrl), fetchManifest(dubbedUrl)]);
-            case 3:
-              _yield$Promise$all = _context2.sent;
-              _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
-              originalContent = _yield$Promise$all2[0];
-              dubbedContent = _yield$Promise$all2[1];
+              }(); // Fetch all manifests
+              fetchPromises = [fetchManifest(originalUrl)];
+              if (dubbedUrl) fetchPromises.push(fetchManifest(dubbedUrl));
+              if (additionalTrackUrl) fetchPromises.push(fetchManifest(additionalTrackUrl));
+              _context2.next = 6;
+              return Promise.all(fetchPromises);
+            case 6:
+              contents = _context2.sent;
+              originalContent = contents[0];
+              dubbedContent = contents[1];
+              additionalContent = contents[2];
               extractAudioTracks = function extractAudioTracks(content, baseUrl) {
                 var lines = content.split(/\r?\n/);
                 var audioTracks = [];
@@ -387,15 +393,28 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
               };
               originalBase = originalUrl;
               dubbedBase = dubbedUrl;
+              additionalBase = additionalTrackUrl || originalUrl;
               videoStreamUri = extractVideoStream(originalContent, originalBase);
               originalAudioTracks = extractAudioTracks(originalContent, originalBase);
-              dubbedAudioTracks = extractAudioTracks(dubbedContent, dubbedBase);
-              dubbedTrackNames = dubbedAudioTracks.map(function (track) {
-                return track.name;
+              dubbedAudioTracks = dubbedUrl ? extractAudioTracks(dubbedContent, dubbedBase) : [];
+              additionalAudioTracks = additionalTrackUrl ? extractAudioTracks(additionalContent, additionalBase) : [];
+              this.dubbedTrackInfo = dubbedAudioTracks.map(function (track) {
+                return {
+                  name: track.name,
+                  uri: track.uri,
+                  language: track.language
+                };
+              });
+              this.additionalTrackInfo = additionalAudioTracks.map(function (track) {
+                return {
+                  name: track.name,
+                  uri: track.uri,
+                  language: track.language
+                };
               });
               allTracksMap = new Map();
-              [].concat(_toConsumableArray(originalAudioTracks), _toConsumableArray(dubbedAudioTracks)).forEach(function (track) {
-                var key = track.name || track.language;
+              [].concat(_toConsumableArray(originalAudioTracks), _toConsumableArray(dubbedAudioTracks), _toConsumableArray(additionalAudioTracks)).forEach(function (track) {
+                var key = "".concat(track.name || track.language, "_").concat(track.uri || '');
                 if (!allTracksMap.has(key)) {
                   allTracksMap.set(key, track);
                 }
@@ -411,15 +430,16 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
               }
               return _context2.abrupt("return", {
                 combinedManifest: combinedManifest,
-                dubbedTrackNames: dubbedTrackNames
+                dubbedTrackInfo: this.dubbedTrackInfo,
+                additionalTrackInfo: this.additionalTrackInfo
               });
-            case 24:
+            case 30:
             case "end":
               return _context2.stop();
           }
-        }, _callee2);
+        }, _callee2, this);
       }));
-      function combineM3U8Manifests(_x, _x2) {
+      function combineM3U8Manifests(_x, _x2, _x3) {
         return _combineM3U8Manifests.apply(this, arguments);
       }
       return combineM3U8Manifests;
@@ -564,11 +584,13 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
     value: function setupHLS(originalSrc) {
       var _this4 = this;
       var dubbedTracksOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var additionalTracksOverride = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       var _this$props6 = this.props,
         actions = _this$props6.actions,
         activeTrackIndex = _this$props6.activeTrackIndex;
       var self = this;
       var effectiveDubbedTracks = dubbedTracksOverride !== undefined ? dubbedTracksOverride : this.props.dubbedTracks;
+      var effectiveAdditionalTracks = additionalTracksOverride !== undefined ? additionalTracksOverride : this.props.additionalTracks;
       var attachAndLoad = function attachAndLoad(sourceUrl) {
         if (!self.hls) return;
         self.hls.attachMedia(self.video);
@@ -576,11 +598,15 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           self.hls.loadSource(sourceUrl);
         });
       };
-      if (effectiveDubbedTracks && effectiveDubbedTracks.length && effectiveDubbedTracks.trim() !== '') {
-        this.combineM3U8Manifests(originalSrc, effectiveDubbedTracks).then(function (_ref2) {
+      var hasDubbed = effectiveDubbedTracks && effectiveDubbedTracks.trim() !== '';
+      var hasAdditionalTracks = effectiveAdditionalTracks && effectiveAdditionalTracks.trim() !== '';
+      if (hasDubbed || hasAdditionalTracks) {
+        this.combineM3U8Manifests(originalSrc, hasDubbed ? effectiveDubbedTracks : null, hasAdditionalTracks ? effectiveAdditionalTracks : null).then(function (_ref2) {
           var combinedManifest = _ref2.combinedManifest,
-            dubbedTrackNames = _ref2.dubbedTrackNames;
-          self.dubbedTrackNames = dubbedTrackNames;
+            dubbedTrackInfo = _ref2.dubbedTrackInfo,
+            additionalTrackInfo = _ref2.additionalTrackInfo;
+          self.dubbedTrackInfo = dubbedTrackInfo || [];
+          self.additionalTrackInfo = additionalTrackInfo || [];
           var blob = new Blob([combinedManifest], {
             type: 'application/vnd.apple.mpegurl'
           });
@@ -589,31 +615,52 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           attachAndLoad(combinedUrl);
         })["catch"](function (err) {
           console.error('Failed to combine manifests, falling back to original', err);
-          self.dubbedTrackNames = [];
+          self.dubbedTrackInfo = [];
+          self.additionalTrackInfo = [];
           attachAndLoad(originalSrc);
         });
       } else {
-        self.dubbedTrackNames = [];
+        self.dubbedTrackInfo = [];
+        self.additionalTrackInfo = [];
         attachAndLoad(originalSrc);
       }
       this.hls.on(_hls["default"].Events.MANIFEST_PARSED, function (event, data) {
-        var audioTracksWithFlag = (data.audioTracks || []).map(function (track) {
-          if (self.dubbedTrackNames && self.dubbedTrackNames.includes(track.name)) {
-            return _objectSpread(_objectSpread({}, track), {}, {
-              isDubbedTrack: true
+        var audioTracksWithFlags = (data.audioTracks || []).map(function (track) {
+          var flaggedTrack = _objectSpread({}, track);
+          // Match by NAME and URI
+          if (self.dubbedTrackInfo && self.dubbedTrackInfo.length > 0) {
+            var matched = self.dubbedTrackInfo.some(function (dubbedTrack) {
+              return dubbedTrack.name === track.name && dubbedTrack.uri === track.url;
             });
+            if (matched) {
+              flaggedTrack.isDubbedTrack = true;
+            }
+          }
+          if (self.additionalTrackInfo && self.additionalTrackInfo.length > 0) {
+            var _matched = self.additionalTrackInfo.some(function (additionalTrack) {
+              return additionalTrack.name === track.name && additionalTrack.uri === track.url;
+            });
+            if (_matched) {
+              flaggedTrack.isAdditionalTrack = true;
+            }
           }
-          return track;
+          return flaggedTrack;
         });
-        actions.handleAudioTracks(audioTracksWithFlag);
+        actions.handleAudioTracks(audioTracksWithFlags);
         var defaultIndex;
-        var firstDubbedIndex = audioTracksWithFlag.findIndex(function (t) {
-          return t.isDubbedTrack;
+        var firstAdditionalIndex = audioTracksWithFlags.findIndex(function (t) {
+          return t.isAdditionalTrack;
         });
-        if (firstDubbedIndex !== -1) {
+        var firstDubbedIndex = audioTracksWithFlags.findIndex(function (t) {
+          return t.isDubbedTrack && !t.isAdditionalTrack;
+        } // Don't override HD if already selected
+        );
+        if (firstAdditionalIndex !== -1) {
+          defaultIndex = firstAdditionalIndex;
+        } else if (firstDubbedIndex !== -1) {
           defaultIndex = firstDubbedIndex;
         } else {
-          if (activeTrackIndex !== undefined && activeTrackIndex < audioTracksWithFlag.length) {
+          if (activeTrackIndex !== undefined && activeTrackIndex < audioTracksWithFlags.length) {
             defaultIndex = activeTrackIndex;
           } else {
             var autoselectIndex = data.audioTracks.findIndex(function (t) {
@@ -624,12 +671,12 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         }
         self._desiredAudioTrackIndex = defaultIndex;
         var _onTrackSwitched = function onTrackSwitched(event, switchData) {
-          var _audioTracksWithFlag$;
-          var switchedTrack = audioTracksWithFlag.find(function (t) {
+          var _audioTracksWithFlags;
+          var switchedTrack = audioTracksWithFlags.find(function (t) {
             return t.id === switchData.id;
           });
           if (!switchedTrack) return;
-          if (switchData.id !== ((_audioTracksWithFlag$ = audioTracksWithFlag[defaultIndex]) === null || _audioTracksWithFlag$ === void 0 ? void 0 : _audioTracksWithFlag$.id)) {
+          if (switchData.id !== ((_audioTracksWithFlags = audioTracksWithFlags[defaultIndex]) === null || _audioTracksWithFlags === void 0 ? void 0 : _audioTracksWithFlags.id)) {
             self.hls.audioTrack = defaultIndex;
             return;
           }
@@ -860,6 +907,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
       var _this$props9 = this.props,
         src = _this$props9.src,
         dubbedTracks = _this$props9.dubbedTracks,
+        additionalTracks = _this$props9.additionalTracks,
         activeAudio = _this$props9.player.activeAudio,
         currentSubtitleObj = _this$props9.currentSubtitleObj,
         markers = _this$props9.markers,
@@ -867,7 +915,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
       if (markers && markers !== newProps.markers && newProps.markers) {
         this.displaySubtitle(newProps.markers);
       }
-      if (newProps.src !== src || newProps.dubbedTracks !== dubbedTracks) {
+      if (newProps.src !== src || newProps.dubbedTracks !== dubbedTracks || newProps.additionalTracks !== additionalTracks) {
         var isM3U8 = this.state.isM3U8;
         if (_hls["default"].isSupported() && isM3U8) {
           if (this.hls) {
@@ -889,7 +937,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           var _this$manager$getStat3 = this.manager.getState(),
             HLSConfig = _this$manager$getStat3.player.HLSConfig;
           this.hls = new _hls["default"](HLSConfig);
-          this.setupHLS(newProps.src, newProps.dubbedTracks);
+          this.setupHLS(newProps.src, newProps.dubbedTracks, newProps.additionalTracks);
         } else if (this.video) {
           this.video.src = newProps.src;
         }

package/components/control-bar/AudioTracksMenuButton.js CHANGED Viewed

@@ -32,7 +32,8 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
 var propTypes = {
   actions: _propTypes.PropTypes.instanceOf(Object),
   player: _propTypes.PropTypes.instanceOf(Object),
-  theme: _propTypes.PropTypes.string
+  theme: _propTypes.PropTypes.string,
+  additionalTrackQuality: _propTypes.PropTypes.string
 };
 var AudioTrackBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: left;\n  background: transparent;\n  cursor: pointer;\n  border-bottom: 1px solid #eeeeee;\n  &:last-child {\n    border: none;\n  }\n  &:hover,\n  &:focus {\n    background: ", ";\n  }\n  p {\n    padding: 15px;\n    font-family: SFUIText-Medium;\n    font-size: 12px;\n    white-space: nowrap;\n  }\n"])), function (props) {
   return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.rgbaThemeColor) : 'rgba(0, 206, 198, 0.1)';
@@ -74,8 +75,16 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
         };
       });
     });
+    _defineProperty(_this, "toggleAdditionalAccordion", function () {
+      var additionalTrackQuality = _this.props.additionalTrackQuality;
+      _this.setState(function (prevState) {
+        return {
+          openAccordion: prevState.openAccordion === additionalTrackQuality ? null : additionalTrackQuality
+        };
+      });
+    });
     _this.state = {
-      openAccordion: 'dubbed'
+      openAccordion: 'original'
     };
     return _this;
   }
@@ -100,23 +109,9 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
   }, {
     key: "ensureValidAudioTrack",
     value: function ensureValidAudioTrack() {
-      var _this$props = this.props,
-        player = _this$props.player,
-        actions = _this$props.actions;
+      var player = this.props.player;
       var allTracks = player.audioTracksArr || [];
-      var dubbedTracks = allTracks.filter(function (track) {
-        return track.isDubbedTrack === true;
-      });
       if (allTracks.length === 0) return;
-      if (dubbedTracks.length) {
-        this.setState({
-          openAccordion: 'dubbed'
-        });
-      } else {
-        this.setState({
-          openAccordion: 'original'
-        });
-      }
     }
   }, {
     key: "changeTrack",
@@ -129,22 +124,28 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _player$activeAudio,
         _this2 = this;
-      var _this$props2 = this.props,
-        player = _this$props2.player,
-        actions = _this$props2.actions,
-        theme = _this$props2.theme;
+      var _this$props = this.props,
+        player = _this$props.player,
+        actions = _this$props.actions,
+        theme = _this$props.theme,
+        activeVersion = _this$props.activeVersion,
+        additionalTrackQuality = _this$props.additionalTrackQuality;
       var openAccordion = this.state.openAccordion;
       var allTracks = player.audioTracksArr || [];
       var originalTracks = allTracks.filter(function (track) {
-        return !track.isDubbedTrack;
+        return !track.isDubbedTrack && !track.isAdditionalTrack;
       });
       var dubbedTracks = allTracks.filter(function (track) {
         return track.isDubbedTrack === true;
       });
+      var additionalTrack = allTracks.filter(function (track) {
+        return track.isAdditionalTrack === true;
+      });
       var currentTrackName = ((_player$activeAudio = player.activeAudio) === null || _player$activeAudio === void 0 ? void 0 : _player$activeAudio.name) || 'No track playing';
       var hasOriginalTracks = originalTracks.length > 0;
       var hasDubbedTracks = dubbedTracks.length > 0;
-      if (!hasOriginalTracks && !hasDubbedTracks) {
+      var hasAdditionalTracks = additionalTrack.length > 0;
+      if (!hasOriginalTracks && !hasDubbedTracks && !hasAdditionalTracks) {
         return null;
       }
       return /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
@@ -158,7 +159,7 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
         position: "left"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "menu-container"
-      }, hasDubbedTracks && /*#__PURE__*/_react["default"].createElement(NowPlayingContainer, null, /*#__PURE__*/_react["default"].createElement(NowPlayingLabel, null, "Now playing"), /*#__PURE__*/_react["default"].createElement(NowPlayingTrackName, {
+      }, (hasDubbedTracks || hasAdditionalTracks) && /*#__PURE__*/_react["default"].createElement(NowPlayingContainer, null, /*#__PURE__*/_react["default"].createElement(NowPlayingLabel, null, "Now playing"), /*#__PURE__*/_react["default"].createElement(NowPlayingTrackName, {
         theme: theme
       }, currentTrackName)), hasDubbedTracks && /*#__PURE__*/_react["default"].createElement(AccordionContainer, null, /*#__PURE__*/_react["default"].createElement(AccordionHeader, {
         theme: theme,
@@ -189,7 +190,36 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
             color: '#333333'
           }
         }, track.name || "Dubbed Track ".concat(index + 1)));
-      }))), hasOriginalTracks && /*#__PURE__*/_react["default"].createElement(AccordionContainer, null, hasDubbedTracks && /*#__PURE__*/_react["default"].createElement(AccordionHeader, {
+      }))), hasAdditionalTracks && /*#__PURE__*/_react["default"].createElement(AccordionContainer, null, /*#__PURE__*/_react["default"].createElement(AccordionHeader, {
+        theme: theme,
+        onClick: this.toggleAdditionalAccordion
+      }, /*#__PURE__*/_react["default"].createElement(HeaderTitle, null, activeVersion.category, " ", additionalTrackQuality), /*#__PURE__*/_react["default"].createElement(HeaderIcon, {
+        isOpen: openAccordion === additionalTrackQuality
+      }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+        color: "#999999",
+        name: "dropdown_more_icon"
+      }))), /*#__PURE__*/_react["default"].createElement(AccordionContent, {
+        isOpen: openAccordion === additionalTrackQuality
+      }, additionalTrack.map(function (track, index) {
+        return /*#__PURE__*/_react["default"].createElement(AudioTrackBlock, {
+          theme: theme,
+          onClick: function onClick() {
+            return _this2.changeTrack(track);
+          },
+          role: "presentation",
+          key: track.id || index,
+          style: player.activeAudio && player.activeAudio.id === track.id ? {
+            pointerEvents: 'none'
+          } : null
+        }, /*#__PURE__*/_react["default"].createElement("p", {
+          style: player.activeAudio && player.activeAudio.id === track.id ? {
+            color: theme ? "".concat(_tokens.colors[theme].videoPlayer.themeColor) : '#00cec6',
+            pointerEvents: 'none'
+          } : {
+            color: '#333333'
+          }
+        }, track.name || "Track ".concat(index + 1)));
+      }))), hasOriginalTracks && /*#__PURE__*/_react["default"].createElement(AccordionContainer, null, (hasDubbedTracks || hasAdditionalTracks) && /*#__PURE__*/_react["default"].createElement(AccordionHeader, {
         theme: theme,
         onClick: this.toggleOriginalAccordion
       }, /*#__PURE__*/_react["default"].createElement(HeaderTitle, null, "Original tracks"), /*#__PURE__*/_react["default"].createElement(HeaderIcon, {

package/components/control-bar/ControlBar.js CHANGED Viewed

@@ -56,14 +56,19 @@ var propTypes = {
   player: _propTypes.PropTypes.instanceOf(Object),
   theme: _propTypes.PropTypes.string
 };
-var PlayerControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  overflow: ", ";\n  position: ", ";\n  bottom: ", ";\n  background: ", ";\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  transition: all 250ms ease-in-out;\n"])), function (props) {
+var PlayerControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  overflow: ", ";\n  position: ", ";\n  bottom: ", ";\n  left: ", ";\n  background: ", ";\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  transition: all 250ms ease-in-out;\n"])), function (props) {
   return props.player === 'panel' && props.active || props.player !== 'panel' ? '50px' : '0px';
 }, function (props) {
   return props.player === 'panel' && props.active || props.player !== 'panel' ? 'visible' : 'hidden';
 }, function (props) {
-  return props.player === 'panel' ? 'absolute' : 'relative';
+  var _props$playerState;
+  return props.fileType === 'image' && (_props$playerState = props.playerState) !== null && _props$playerState !== void 0 && _props$playerState.isFullscreen ? 'absolute' : props.player === 'panel' ? 'absolute' : 'relative';
 }, function (props) {
-  return props.player === 'panel' ? '0px' : 'initial';
+  var _props$playerState2;
+  return props.fileType === 'image' && (_props$playerState2 = props.playerState) !== null && _props$playerState2 !== void 0 && _props$playerState2.isFullscreen ? '0px' : props.player === 'panel' ? '0px' : 'initial';
+}, function (props) {
+  var _props$playerState3;
+  return props.fileType === 'image' && (_props$playerState3 = props.playerState) !== null && _props$playerState3 !== void 0 && _props$playerState3.isFullscreen ? '0px' : 'initial';
 }, _colors["default"].common.base.black);
 var VideoControlBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n"])));
 var DownloadButton = (0, _styledComponents["default"])(_components.Button)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0px;\n  &:hover,\n  &:focus {\n    background: transparent;\n  }\n"])));
@@ -288,7 +293,14 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "getImageChildrens",
     value: function getImageChildrens() {
-      return [];
+      return [/*#__PURE__*/_react["default"].createElement(_FullscreenToggle["default"], _extends({}, this.props, {
+        key: "fullscreen-toggle",
+        order: 11,
+        style: {
+          marginLeft: 'auto',
+          marginRight: '10px'
+        }
+      }))];
     }
   }, {
     key: "getChildren",
@@ -313,10 +325,13 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
       var children = this.getChildren();
       var _this$props4 = this.props,
         userActivity = _this$props4.player.userActivity,
-        playerType = _this$props4.playerType;
+        playerType = _this$props4.playerType,
+        player = _this$props4.player;
       return /*#__PURE__*/_react["default"].createElement(PlayerControlBlock, {
         active: userActivity,
-        player: playerType
+        player: playerType,
+        fileType: this.props.fileType,
+        playerState: player
       }, /*#__PURE__*/_react["default"].createElement(VideoControlBlock, this.props, children));
     }
   }]);

package/components/control-bar/FullscreenToggle.js CHANGED Viewed

@@ -31,7 +31,8 @@ var propTypes = {
   actions: _propTypes.PropTypes.instanceOf(Object),
   player: _propTypes.PropTypes.instanceOf(Object),
   playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel']),
-  theme: _propTypes.PropTypes.string
+  theme: _propTypes.PropTypes.string,
+  style: _propTypes.PropTypes.instanceOf(Object)
 };
 var defaultProps = {
   actions: {},
@@ -53,12 +54,17 @@ var FullscreenToggle = exports["default"] = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         player = _this$props.player,
         actions = _this$props.actions,
-        onRightMenuVisible = _this$props.onRightMenuVisible;
+        onRightMenuVisible = _this$props.onRightMenuVisible,
+        onBeforeFullscreenToggle = _this$props.onBeforeFullscreenToggle,
+        isRightMenuVisible = _this$props.isRightMenuVisible;
+      if (!(player !== null && player !== void 0 && player.isFullscreen) && onBeforeFullscreenToggle) {
+        onBeforeFullscreenToggle(isRightMenuVisible);
+      }
       actions.toggleFullscreen(player);
-      // Trigger UI change based for exit
-      var isFull = player === null || player === void 0 ? void 0 : player.isFullscreen;
-      onRightMenuVisible(isFull);
-      actions.toggleRightBar(player, isFull);
+      if (!(player !== null && player !== void 0 && player.isFullscreen)) {
+        onRightMenuVisible(false);
+        actions.toggleRightBar(player, false);
+      }
     }
   }, {
     key: "render",
@@ -67,8 +73,10 @@ var FullscreenToggle = exports["default"] = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
         playerType = _this$props2.playerType,
         theme = _this$props2.theme,
-        player = _this$props2.player;
+        player = _this$props2.player,
+        style = _this$props2.style;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, playerType !== 'panel' ? /*#__PURE__*/_react["default"].createElement(FullscreenToggleButton, {
+        style: style,
         theme: theme,
         display: "rounded",
         appearance: "cta",

package/package.json CHANGED Viewed

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