@desynova-digital/player 4.1.14 → 4.2.0

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 (5) hide show
  1. package/components/ImageViewer.js +283 -86
  2. package/components/Player.js +66 -40
  3. package/components/control-bar/ControlBar.js +21 -6
  4. package/components/control-bar/FullscreenToggle.js +15 -7
  5. package/package.json +1 -1
package/components/ImageViewer.js CHANGED
@@ -8,21 +8,16 @@ exports["default"] = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _propTypes = require("prop-types");
10
10
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
- var _CommentsButton = _interopRequireDefault(require("./control-bar/CommentsButton"));
12
- var _templateObject, _templateObject2, _templateObject3;
11
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
13
12
  /* eslint-disable linebreak-style */
14
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
15
14
  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); }
16
15
  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; }
17
- 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); }
18
16
  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; }
19
17
  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; }
20
- 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; }
21
18
  function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
22
19
  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); } }
23
20
  function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
24
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
25
- 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); }
26
21
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
27
22
  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); }
28
23
  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.
30
25
  function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
31
26
  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); }
32
27
  function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
28
+ 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; }
29
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
30
+ 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); }
33
31
  function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
32
+ // import CommentsButton from './control-bar/CommentsButton';
33
+
34
34
  /*
35
35
  * import { colors } from '@desynova-digital/tokens';
36
36
  * import colors from '../colors';
@@ -38,16 +38,91 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
38
38
 
39
39
  var propTypes = {
40
40
  src: _propTypes.PropTypes.string,
41
- theme: _propTypes.PropTypes.string
41
+ theme: _propTypes.PropTypes.string,
42
+ playerSvgRef: _propTypes.PropTypes.instanceOf(Object),
43
+ parentAnnotations: _propTypes.PropTypes.instanceOf(Array),
44
+ onShapeMouseDown: _propTypes.PropTypes.func,
45
+ handleMouseDown: _propTypes.PropTypes.func,
46
+ handleMouseMove: _propTypes.PropTypes.func,
47
+ handleMouseUp: _propTypes.PropTypes.func,
48
+ isSvgLayer: _propTypes.PropTypes.bool,
49
+ isFullscreen: _propTypes.PropTypes.bool,
50
+ isRightMenuVisible: _propTypes.PropTypes.bool
42
51
  };
43
- var ImageContainer = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n"])));
44
- 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"])));
45
- 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"])));
52
+ var ImageContainer = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n flex: ", ";\n min-height: ", ";\n"])), function (_ref) {
53
+ var isFullscreenWithRightSection = _ref.isFullscreenWithRightSection,
54
+ isFullscreen = _ref.isFullscreen;
55
+ return isFullscreenWithRightSection || isFullscreen ? '1 1 auto' : 'initial';
56
+ }, function (_ref2) {
57
+ var isFullscreenWithRightSection = _ref2.isFullscreenWithRightSection,
58
+ isFullscreen = _ref2.isFullscreen;
59
+ return isFullscreenWithRightSection || isFullscreen ? '0' : 'initial';
60
+ });
61
+ 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) {
62
+ var isFullscreenWithRightSection = _ref3.isFullscreenWithRightSection,
63
+ isFullscreen = _ref3.isFullscreen;
64
+ return isFullscreenWithRightSection || isFullscreen ? 'relative' : 'absolute';
65
+ }, function (_ref4) {
66
+ var isFullscreenWithRightSection = _ref4.isFullscreenWithRightSection,
67
+ isFullscreen = _ref4.isFullscreen;
68
+ return isFullscreenWithRightSection || isFullscreen ? 'auto' : '0';
69
+ }, function (_ref5) {
70
+ var isFullscreenWithRightSection = _ref5.isFullscreenWithRightSection,
71
+ isFullscreen = _ref5.isFullscreen;
72
+ return isFullscreenWithRightSection || isFullscreen ? 'auto' : '0';
73
+ }, function (_ref6) {
74
+ var isFullscreenWithRightSection = _ref6.isFullscreenWithRightSection,
75
+ isFullscreen = _ref6.isFullscreen;
76
+ return isFullscreenWithRightSection || isFullscreen ? 'auto' : '0';
77
+ }, function (_ref7) {
78
+ var isFullscreenWithRightSection = _ref7.isFullscreenWithRightSection,
79
+ isFullscreen = _ref7.isFullscreen;
80
+ return isFullscreenWithRightSection || isFullscreen ? 'auto' : '0';
81
+ }, function (_ref8) {
82
+ var isFullscreenWithRightSection = _ref8.isFullscreenWithRightSection,
83
+ isFullscreen = _ref8.isFullscreen;
84
+ return isFullscreenWithRightSection || isFullscreen ? '100%' : 'calc(100% - 50px)';
85
+ });
86
+ var ImageSvgLayer = (0, _styledComponents["default"])('svg')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 2;\n"])));
87
+ 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"])));
46
88
  var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
47
89
  function ImageViewer(props) {
48
90
  var _this;
49
91
  _classCallCheck(this, ImageViewer);
50
92
  _this = _callSuper(this, ImageViewer, [props]);
93
+ _defineProperty(_this, "handleContainerResize", function () {
94
+ _this.fitImageToContainer();
95
+ });
96
+ _defineProperty(_this, "fitImageToContainer", function () {
97
+ if (!_this.imageRef || !_this.imageBlock) {
98
+ return;
99
+ }
100
+ var naturalWidth = _this.imageRef.naturalWidth;
101
+ var naturalHeight = _this.imageRef.naturalHeight;
102
+ var containerWidth = _this.imageBlock.offsetWidth;
103
+ var containerHeight = _this.imageBlock.offsetHeight;
104
+ if (!naturalWidth || !naturalHeight || !containerWidth || !containerHeight) {
105
+ return;
106
+ }
107
+ var scale = Math.min(containerWidth / naturalWidth, containerHeight / naturalHeight);
108
+ var fittedWidth = naturalWidth * scale;
109
+ var fittedHeight = naturalHeight * scale;
110
+ var percentage = Math.round(scale * 100);
111
+ var imageLeft = (containerWidth - fittedWidth) / 2;
112
+ var imageTop = (containerHeight - fittedHeight) / 2;
113
+ _this.setState({
114
+ minWidth: fittedWidth,
115
+ minHeight: fittedHeight,
116
+ maxWidth: naturalWidth,
117
+ maxHeight: naturalHeight,
118
+ currentWidth: fittedWidth,
119
+ currentHeight: fittedHeight,
120
+ percentage: percentage,
121
+ imageLeft: imageLeft,
122
+ imageTop: imageTop,
123
+ draggable: false
124
+ });
125
+ });
51
126
  _this.state = {
52
127
  minWidth: 0,
53
128
  minHeight: 0,
@@ -68,7 +143,31 @@ var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
68
143
  _inherits(ImageViewer, _Component);
69
144
  return _createClass(ImageViewer, [{
70
145
  key: "componentDidMount",
71
- value: function componentDidMount() {}
146
+ value: function componentDidMount() {
147
+ window.addEventListener('resize', this.handleContainerResize);
148
+ }
149
+ }, {
150
+ key: "componentDidUpdate",
151
+ value: function componentDidUpdate(prevProps) {
152
+ var _this2 = this;
153
+ var isLayoutChange = prevProps.src !== this.props.src || prevProps.isFullscreen !== this.props.isFullscreen || prevProps.isRightMenuVisible !== this.props.isRightMenuVisible;
154
+ if (isLayoutChange) {
155
+ requestAnimationFrame(function () {
156
+ _this2.fitImageToContainer();
157
+ requestAnimationFrame(function () {
158
+ _this2.fitImageToContainer();
159
+ });
160
+ });
161
+ setTimeout(function () {
162
+ _this2.fitImageToContainer();
163
+ }, 120);
164
+ }
165
+ }
166
+ }, {
167
+ key: "componentWillUnmount",
168
+ value: function componentWillUnmount() {
169
+ window.removeEventListener('resize', this.handleContainerResize);
170
+ }
72
171
  }, {
73
172
  key: "onMouseDown",
74
173
  value: function onMouseDown() {
@@ -129,53 +228,40 @@ var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
129
228
  }, {
130
229
  key: "handleImageLoaded",
131
230
  value: function handleImageLoaded() {
132
- var percentage = Math.round(this.imageRef.offsetHeight / this.imageRef.naturalHeight * 100);
133
- var imageLeft = (this.imageBlock.offsetWidth - this.imageRef.offsetWidth) / 2;
134
- var imageTop = (this.imageBlock.offsetHeight - this.imageRef.offsetHeight) / 2;
135
- this.setState({
136
- minWidth: this.imageRef.offsetWidth,
137
- minHeight: this.imageRef.offsetHeight,
138
- maxWidth: this.imageRef.naturalWidth,
139
- maxHeight: this.imageRef.naturalHeight,
140
- currentWidth: this.imageRef.offsetWidth,
141
- currentHeight: this.imageRef.offsetHeight,
142
- percentage: percentage,
143
- imageLeft: imageLeft,
144
- imageTop: imageTop
145
- });
231
+ this.fitImageToContainer();
146
232
  }
233
+
234
+ // zoomIn() {
235
+ // const {
236
+ // maxWidth,
237
+ // maxHeight,
238
+ // percentage
239
+ // } = this.state;
240
+ // if(percentage < 100) {
241
+ // var newPercentage = (Math.round(percentage / 10) * 10) + 10;
242
+ // newPercentage = newPercentage > 100 ? 100 : newPercentage;
243
+ // let newWidth = (newPercentage * maxWidth) / 100;
244
+ // let newHeight = (newPercentage * maxHeight) / 100;
245
+ // let imageLeft = (this.imageBlock.offsetWidth - newWidth) / 2;
246
+ // let imageTop = (this.imageBlock.offsetHeight - newHeight) / 2;
247
+ // this.setState({
248
+ // percentage: newPercentage,
249
+ // currentWidth: newWidth,
250
+ // currentHeight: newHeight,
251
+ // draggable: true,
252
+ // imageLeft,
253
+ // imageTop
254
+ // });
255
+ // }
256
+ // }
147
257
  }, {
148
- key: "zoomIn",
149
- value: function zoomIn() {
258
+ key: "zoomOut",
259
+ value: function zoomOut() {
150
260
  var _this$state2 = this.state,
261
+ minWidth = _this$state2.minWidth,
151
262
  maxWidth = _this$state2.maxWidth,
152
263
  maxHeight = _this$state2.maxHeight,
153
264
  percentage = _this$state2.percentage;
154
- if (percentage < 100) {
155
- var newPercentage = Math.round(percentage / 10) * 10 + 10;
156
- newPercentage = newPercentage > 100 ? 100 : newPercentage;
157
- var newWidth = newPercentage * maxWidth / 100;
158
- var newHeight = newPercentage * maxHeight / 100;
159
- var imageLeft = (this.imageBlock.offsetWidth - newWidth) / 2;
160
- var imageTop = (this.imageBlock.offsetHeight - newHeight) / 2;
161
- this.setState({
162
- percentage: newPercentage,
163
- currentWidth: newWidth,
164
- currentHeight: newHeight,
165
- draggable: true,
166
- imageLeft: imageLeft,
167
- imageTop: imageTop
168
- });
169
- }
170
- }
171
- }, {
172
- key: "zoomOut",
173
- value: function zoomOut() {
174
- var _this$state3 = this.state,
175
- minWidth = _this$state3.minWidth,
176
- maxWidth = _this$state3.maxWidth,
177
- maxHeight = _this$state3.maxHeight,
178
- percentage = _this$state3.percentage;
179
265
  if (percentage) {
180
266
  var minPercent = Math.round(minWidth / maxWidth * 100);
181
267
  var newPercentage = Math.round(percentage / 10) * 10 - 10;
@@ -200,26 +286,67 @@ var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
200
286
  this.setState(stateObj);
201
287
  }
202
288
  }
289
+ }, {
290
+ key: "buildSmoothPath",
291
+ value: function buildSmoothPath(points, width, height) {
292
+ if (!(points !== null && points !== void 0 && points.length)) return '';
293
+ if (points.length === 1) {
294
+ var x = points[0].x * width;
295
+ var y = points[0].y * height;
296
+ return "M ".concat(x, " ").concat(y);
297
+ }
298
+ var scaled = points.map(function (point) {
299
+ return {
300
+ x: point.x * width,
301
+ y: point.y * height
302
+ };
303
+ });
304
+ var d = "M ".concat(scaled[0].x, " ").concat(scaled[0].y);
305
+ for (var i = 1; i < scaled.length - 1; i += 1) {
306
+ var midX = (scaled[i].x + scaled[i + 1].x) / 2;
307
+ var midY = (scaled[i].y + scaled[i + 1].y) / 2;
308
+ d += " Q ".concat(scaled[i].x, " ").concat(scaled[i].y, " ").concat(midX, " ").concat(midY);
309
+ }
310
+ var last = scaled[scaled.length - 1];
311
+ d += " L ".concat(last.x, " ").concat(last.y);
312
+ return d;
313
+ }
203
314
  }, {
204
315
  key: "render",
205
316
  value: function render() {
206
- var _this2 = this;
207
- var _this$state4 = this.state,
208
- minWidth = _this$state4.minWidth,
209
- minHeight = _this$state4.minHeight,
210
- maxWidth = _this$state4.maxWidth,
211
- maxHeight = _this$state4.maxHeight,
212
- currentWidth = _this$state4.currentWidth,
213
- currentHeight = _this$state4.currentHeight,
214
- percentage = _this$state4.percentage,
215
- imageTop = _this$state4.imageTop,
216
- imageLeft = _this$state4.imageLeft,
217
- draggable = _this$state4.draggable,
218
- moving = _this$state4.moving;
219
- var src = this.props.src;
220
- return /*#__PURE__*/_react["default"].createElement(ImageContainer, null, /*#__PURE__*/_react["default"].createElement(ImageBlock, {
317
+ var _this3 = this;
318
+ var _this$state3 = this.state,
319
+ minWidth = _this$state3.minWidth,
320
+ minHeight = _this$state3.minHeight,
321
+ maxWidth = _this$state3.maxWidth,
322
+ maxHeight = _this$state3.maxHeight,
323
+ currentWidth = _this$state3.currentWidth,
324
+ currentHeight = _this$state3.currentHeight,
325
+ percentage = _this$state3.percentage,
326
+ imageTop = _this$state3.imageTop,
327
+ imageLeft = _this$state3.imageLeft,
328
+ draggable = _this$state3.draggable,
329
+ moving = _this$state3.moving;
330
+ var _this$props = this.props,
331
+ src = _this$props.src,
332
+ playerSvgRef = _this$props.playerSvgRef,
333
+ _this$props$parentAnn = _this$props.parentAnnotations,
334
+ parentAnnotations = _this$props$parentAnn === void 0 ? [] : _this$props$parentAnn,
335
+ isSvgLayer = _this$props.isSvgLayer,
336
+ handleMouseDown = _this$props.handleMouseDown,
337
+ handleMouseMove = _this$props.handleMouseMove,
338
+ handleMouseUp = _this$props.handleMouseUp,
339
+ onShapeMouseDown = _this$props.onShapeMouseDown;
340
+ var showSvgLayer = isSvgLayer || parentAnnotations.length > 0;
341
+ var isFullscreenWithRightSection = this.props.isFullscreen && this.props.isRightMenuVisible;
342
+ return /*#__PURE__*/_react["default"].createElement(ImageContainer, {
343
+ isFullscreen: this.props.isFullscreen,
344
+ isFullscreenWithRightSection: isFullscreenWithRightSection
345
+ }, /*#__PURE__*/_react["default"].createElement(ImageBlock, {
346
+ isFullscreen: this.props.isFullscreen,
347
+ isFullscreenWithRightSection: isFullscreenWithRightSection,
221
348
  ref: function ref(imageBlock) {
222
- return _this2.imageBlock = imageBlock;
349
+ return _this3.imageBlock = imageBlock;
223
350
  }
224
351
  }, /*#__PURE__*/_react["default"].createElement("img", {
225
352
  role: "presentation",
@@ -232,11 +359,12 @@ var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
232
359
  height: currentHeight,
233
360
  top: imageTop,
234
361
  left: imageLeft,
235
- cursor: draggable ? 'grab' : 'default'
362
+ cursor: draggable ? 'grab' : 'default',
363
+ pointerEvents: isSvgLayer ? 'none' : 'auto'
236
364
  },
237
365
  draggable: false,
238
366
  ref: function ref(imageRef) {
239
- return _this2.imageRef = imageRef;
367
+ return _this3.imageRef = imageRef;
240
368
  },
241
369
  onLoad: this.handleImageLoaded.bind(this),
242
370
  onMouseDown: this.onMouseDown.bind(this),
@@ -246,24 +374,93 @@ var ImageViewer = exports["default"] = /*#__PURE__*/function (_Component) {
246
374
  src: src,
247
375
  className: moving ? 'moving' : ''
248
376
  // src='https://www.nginx.com/wp-content/uploads/2015/04/nginx-plus-dashboard_R6.png'
249
- })), /*#__PURE__*/_react["default"].createElement(ImageControls, null, /*#__PURE__*/_react["default"].createElement("p", {
250
- className: "zoom-in",
251
- role: "presentation",
252
- onClick: function onClick() {
253
- return _this2.zoomIn();
377
+ }), showSvgLayer ? /*#__PURE__*/_react["default"].createElement(ImageSvgLayer, {
378
+ ref: playerSvgRef,
379
+ onMouseDown: handleMouseDown,
380
+ onMouseMove: handleMouseMove,
381
+ onMouseUp: handleMouseUp,
382
+ style: {
383
+ top: imageTop || 0,
384
+ left: imageLeft || 0,
385
+ width: currentWidth || 0,
386
+ height: currentHeight || 0,
387
+ pointerEvents: showSvgLayer ? 'auto' : 'none'
254
388
  }
255
- }), /*#__PURE__*/_react["default"].createElement("p", {
256
- className: "percent"
257
- }, percentage, "%"), /*#__PURE__*/_react["default"].createElement("p", {
258
- className: "zoom-out",
259
- role: "presentation",
260
- onClick: function onClick() {
261
- return _this2.zoomOut();
389
+ }, parentAnnotations.map(function (ann, idx) {
390
+ var _this3$imageRef, _this3$imageRef2;
391
+ var width = Number(currentWidth) || ((_this3$imageRef = _this3.imageRef) === null || _this3$imageRef === void 0 ? void 0 : _this3$imageRef.offsetWidth) || 0;
392
+ var height = Number(currentHeight) || ((_this3$imageRef2 = _this3.imageRef) === null || _this3$imageRef2 === void 0 ? void 0 : _this3$imageRef2.offsetHeight) || 0;
393
+ if (!width || !height) return null;
394
+ if (ann.type === 'rect') {
395
+ return /*#__PURE__*/_react["default"].createElement("rect", {
396
+ key: idx,
397
+ x: ann.x * width,
398
+ y: ann.y * height,
399
+ width: ann.width * width,
400
+ height: ann.height * height,
401
+ stroke: ann.color,
402
+ strokeWidth: "4",
403
+ fill: "none",
404
+ onMouseDown: function onMouseDown(e) {
405
+ return onShapeMouseDown(e, idx, ann);
406
+ },
407
+ style: {
408
+ cursor: isSvgLayer ? 'move' : 'default'
409
+ }
410
+ });
411
+ }
412
+ if (ann.type === 'line' || ann.type === 'arrow') {
413
+ return /*#__PURE__*/_react["default"].createElement("line", {
414
+ key: idx,
415
+ x1: ann.x1 * width,
416
+ y1: ann.y1 * height,
417
+ x2: ann.x2 * width,
418
+ y2: ann.y2 * height,
419
+ stroke: ann.color,
420
+ strokeWidth: "4",
421
+ markerEnd: ann.type === 'arrow' ? "url(#open-arrowhead-".concat(ann.color.replace('#', ''), "-").concat(idx, ")") : undefined,
422
+ onMouseDown: function onMouseDown(e) {
423
+ return onShapeMouseDown(e, idx, ann);
424
+ },
425
+ style: {
426
+ cursor: isSvgLayer ? 'move' : 'default'
427
+ }
428
+ });
429
+ }
430
+ if (ann.type === 'pencil') {
431
+ return /*#__PURE__*/_react["default"].createElement("path", {
432
+ key: idx,
433
+ d: _this3.buildSmoothPath(ann.points, width, height),
434
+ stroke: ann.color,
435
+ strokeWidth: "4",
436
+ fill: "none",
437
+ onMouseDown: function onMouseDown(e) {
438
+ return onShapeMouseDown(e, idx, ann);
439
+ },
440
+ style: {
441
+ cursor: isSvgLayer ? 'move' : 'default'
442
+ }
443
+ });
262
444
  }
263
- }), /*#__PURE__*/_react["default"].createElement(_CommentsButton["default"], _extends({}, this.props, {
264
- key: "comments-button",
265
- order: 6.01
266
- }))));
445
+ return null;
446
+ }), /*#__PURE__*/_react["default"].createElement("defs", null, parentAnnotations.map(function (ann, idx) {
447
+ if (ann.type !== 'arrow') return null;
448
+ return /*#__PURE__*/_react["default"].createElement("marker", {
449
+ key: idx,
450
+ id: "open-arrowhead-".concat(ann.color.replace('#', ''), "-").concat(idx),
451
+ markerWidth: "10",
452
+ markerHeight: "10",
453
+ refX: "8",
454
+ refY: "5",
455
+ orient: "auto",
456
+ markerUnits: "strokeWidth"
457
+ }, /*#__PURE__*/_react["default"].createElement("path", {
458
+ d: "M 1 1 L 8 5 L 1 10",
459
+ fill: "none",
460
+ stroke: ann.color,
461
+ strokeWidth: "1"
462
+ }));
463
+ }))) : null));
267
464
  }
268
465
  }]);
269
466
  }(_react.Component);
package/components/Player.js CHANGED
@@ -25,12 +25,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
25
25
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
26
26
  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); }
27
27
  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; }
28
- function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
29
- 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."); }
30
- 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; } }
31
- function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
32
- function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
33
- 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; }
34
28
  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; }
35
29
  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; }
36
30
  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 = {
158
152
  onVolumeChange: null
159
153
  };
160
154
  var PlayerBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 100%;\n"])));
161
- 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) {
155
+ 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) {
162
156
  return props.noRightComponent && "calc(100% - 1px) !important;";
163
157
  }, function (props) {
164
158
  if (!props.isRightMenuVisible) {
@@ -169,6 +163,12 @@ var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_tem
169
163
  } else {
170
164
  return '100%';
171
165
  }
166
+ }, function (props) {
167
+ return props.fileType === 'image' && props.isFullscreen ? 'flex' : 'block';
168
+ }, function (props) {
169
+ return props.fileType === 'image' && props.isFullscreen ? 'column' : 'initial';
170
+ }, function (props) {
171
+ return props.fileType === 'image' && props.isFullscreen ? '0' : 'initial';
172
172
  }, function (props) {
173
173
  return props.noRightComponent && '100%';
174
174
  }, function (props) {
@@ -203,6 +203,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
203
203
  var _this;
204
204
  _classCallCheck(this, Player);
205
205
  _this = _callSuper(this, Player, [props]);
206
+ _defineProperty(_this, "captureRightMenuVisibilityBeforeFullscreen", function (isVisible) {
207
+ _this.rightMenuVisibilityBeforeFullscreen = isVisible;
208
+ });
206
209
  _defineProperty(_this, "getPlayerInstance", function () {
207
210
  return _this;
208
211
  });
@@ -212,18 +215,26 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
212
215
  // Wait for fullscreen to finish layout
213
216
  requestAnimationFrame(function () {
214
217
  requestAnimationFrame(function () {
218
+ var _this$video, _this$video$fitImageT;
215
219
  // Force browser reflow
216
220
  document.body.getBoundingClientRect();
217
221
 
218
222
  // Now trigger resize for React / your components
219
223
  window.dispatchEvent(new Event('resize'));
220
224
  _this.handleResize();
225
+ (_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);
221
226
  });
222
227
  });
223
228
  // Final fallback in case layout changes land after the next frame
224
229
  setTimeout(function () {
225
- return _this.handleResize();
230
+ var _this$video2, _this$video2$fitImage;
231
+ _this.handleResize();
232
+ (_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);
226
233
  }, 120);
234
+ setTimeout(function () {
235
+ var _this$video3, _this$video3$fitImage;
236
+ (_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);
237
+ }, 240);
227
238
  });
228
239
  _defineProperty(_this, "closeSidemenu", function () {
229
240
  var _this$manager$getStat = _this.manager.getState(),
@@ -286,6 +297,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
286
297
  _this.state = {
287
298
  reviewIndex: 0
288
299
  };
300
+ _this.rightMenuVisibilityBeforeFullscreen = props.isRightMenuVisible;
289
301
  _this.controlsHideTimer = null;
290
302
  _this.meterHeight = 40;
291
303
  _this.video = null; // the Video component
@@ -565,7 +577,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
565
577
  pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
566
578
  order: 5,
567
579
  playerType: fullProps.playerType,
568
- onRightMenuVisible: onRightMenuVisible
580
+ onRightMenuVisible: onRightMenuVisible,
581
+ onBeforeFullscreenToggle: this.captureRightMenuVisibilityBeforeFullscreen
569
582
  }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
570
583
  key: "shortcut",
571
584
  pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
@@ -580,6 +593,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
580
593
  key: "getImageChildren",
581
594
  value: function getImageChildren(props, fullProps) {
582
595
  var _this3 = this;
596
+ var onRightMenuVisible = this.props.onRightMenuVisible;
583
597
  return [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
584
598
  ref: function ref(c) {
585
599
  _this3._playerHeader = c;
@@ -593,19 +607,16 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
593
607
  },
594
608
  key: "image",
595
609
  order: 0.0
596
- }, fullProps)),
597
- /*#__PURE__*/
598
- /*
599
- * <ControlBar
600
- * ref={(c) => {
601
- * this._controlBar = c;
602
- * }}
603
- * key="control-bar"
604
- * order={2}
605
- * {...this.props}
606
- * />,
607
- */
608
- _react["default"].createElement(_Shortcut["default"], _extends({
610
+ }, fullProps)), /*#__PURE__*/_react["default"].createElement(_ControlBar["default"], _extends({
611
+ ref: function ref(c) {
612
+ _this3._controlBar = c;
613
+ },
614
+ key: "control-bar",
615
+ order: 4,
616
+ playerType: fullProps === null || fullProps === void 0 ? void 0 : fullProps.playerType,
617
+ onRightMenuVisible: onRightMenuVisible,
618
+ onBeforeFullscreenToggle: this.captureRightMenuVisibilityBeforeFullscreen
619
+ }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
609
620
  key: "shortcut",
610
621
  order: 99.0
611
622
  }, props))];
@@ -661,7 +672,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
661
672
  pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
662
673
  order: 3,
663
674
  playerType: fullProps.playerType,
664
- onRightMenuVisible: onRightMenuVisible
675
+ onRightMenuVisible: onRightMenuVisible,
676
+ onBeforeFullscreenToggle: this.captureRightMenuVisibilityBeforeFullscreen
665
677
  }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
666
678
  key: "shortcut",
667
679
  pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
@@ -777,16 +789,16 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
777
789
  }, {
778
790
  key: "addTextTrack",
779
791
  value: function addTextTrack() {
780
- var _this$video;
781
- (_this$video = this.video).addTextTrack.apply(_this$video, arguments);
792
+ var _this$video4;
793
+ (_this$video4 = this.video).addTextTrack.apply(_this$video4, arguments);
782
794
  }
783
795
 
784
796
  // Check if your browser can play different types of video:
785
797
  }, {
786
798
  key: "canPlayType",
787
799
  value: function canPlayType() {
788
- var _this$video2;
789
- (_this$video2 = this.video).canPlayType.apply(_this$video2, arguments);
800
+ var _this$video5;
801
+ (_this$video5 = this.video).canPlayType.apply(_this$video5, arguments);
790
802
  }
791
803
 
792
804
  // seek video by time
@@ -832,6 +844,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
832
844
  }, {
833
845
  key: "handleResize",
834
846
  value: function handleResize() {
847
+ var _this$video6, _this$video6$fitImage;
835
848
  var _this$manager$getStat4 = this.manager.getState(),
836
849
  player = _this$manager$getStat4.player;
837
850
  var leftSectionRef = this._leftSectionRef;
@@ -848,6 +861,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
848
861
  playerType = _this$props5.playerType,
849
862
  fileType = _this$props5.fileType,
850
863
  isRightMenuVisible = _this$props5.isRightMenuVisible;
864
+ if (!leftSectionRef || !playerContainer || !video) {
865
+ return;
866
+ }
851
867
 
852
868
  //added for header height
853
869
  var headerHeight = playerHeader ? playerHeader.offsetHeight : 60;
@@ -857,7 +873,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
857
873
  var totalWidth = window.innerWidth;
858
874
  var newHeight;
859
875
  var height = 0;
860
- _toConsumableArray(leftSectionRef.children).forEach(function (child) {
876
+ Array.from(leftSectionRef.children || []).forEach(function (child) {
861
877
  return height += child.offsetHeight;
862
878
  });
863
879
  if (rightSectionRef) {
@@ -868,8 +884,10 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
868
884
  //toggle functionality fullscreen on player header
869
885
  if (player.isFullscreen) {
870
886
  var containerWidth = playerContainer.offsetWidth;
871
- playerHeader.style.width = "".concat(containerWidth, "px");
872
- } else {
887
+ if (playerHeader) {
888
+ playerHeader.style.width = "".concat(containerWidth, "px");
889
+ }
890
+ } else if (playerHeader) {
873
891
  playerHeader.style.width = '100%';
874
892
  }
875
893
  //added for full screen with right section to little down for video player
@@ -880,7 +898,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
880
898
  }
881
899
  if (audioMeterBlock) {
882
900
  audioMeterBlock.style.height = video.offsetHeight + 'px';
883
- audioMeterBlock.style.top = playerHeader.offsetHeight + 'px';
901
+ audioMeterBlock.style.top = headerHeight + 'px';
884
902
  this.meterHeight = video.offsetHeight;
885
903
  }
886
904
  if (playlist) {
@@ -906,7 +924,14 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
906
924
  video.classList.add('ratio-border');
907
925
  }
908
926
  // Fullscreen mode with right section consideration
909
- else if (player.isFullscreen && rightSectionRef) {
927
+ else if (player.isFullscreen && rightSectionRef && fileType === 'image') {
928
+ videoHeight = totalHeight - headerHeight;
929
+ video.style.paddingTop = '0';
930
+ video.style.width = '100%';
931
+ video.style.height = "".concat(videoHeight, "px");
932
+ video.style.margin = '0';
933
+ video.classList.remove('ratio-border');
934
+ } else if (player.isFullscreen && rightSectionRef) {
910
935
  // Calculate available width considering right section
911
936
  var availableWidth = totalWidth;
912
937
  if (isRightMenuVisible) {
@@ -929,14 +954,14 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
929
954
  } else if (window.innerHeight < 1024 && (playerContainer.offsetHeight > window.innerHeight || window.innerHeight > playerContainer.offsetHeight)) {
930
955
  var _this$props6;
931
956
  var playlistMinHeight = 150;
932
- if (controlType === 'default') {
957
+ if (controlType === 'default' || fileType === 'image') {
933
958
  if (fileType === 'image') {
934
- videoHeight = window.innerHeight - playlistMinHeight - playerHeader.offsetHeight;
959
+ videoHeight = window.innerHeight - playlistMinHeight - headerHeight;
935
960
  } else {
936
- videoHeight = window.innerHeight - playlistMinHeight - playerHeader.offsetHeight - progressControl.offsetHeight - controlBar.offsetHeight;
961
+ videoHeight = window.innerHeight - playlistMinHeight - headerHeight - (progressControl ? progressControl.offsetHeight : 0) - (controlBar ? controlBar.offsetHeight : 0);
937
962
  }
938
963
  } else {
939
- videoHeight = window.innerHeight - playerHeader.offsetHeight - controlBar.offsetHeight - this._advancedControl.offsetHeight - 30;
964
+ videoHeight = window.innerHeight - headerHeight - (controlBar ? controlBar.offsetHeight : 0) - this._advancedControl.offsetHeight - 30;
940
965
  }
941
966
  videoWidth = videoHeight * (16 / 9);
942
967
  if (videoWidth > leftSectionRef.offsetWidth) {
@@ -957,7 +982,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
957
982
  video.classList.remove('ratio-border');
958
983
  }
959
984
  if (player.isFullscreen && progressControl) {
960
- videoHeight = window.innerHeight - playerHeader.offsetHeight - progressControl.offsetHeight - controlBar.offsetHeight;
985
+ videoHeight = window.innerHeight - headerHeight - (progressControl ? progressControl.offsetHeight : 0) - (controlBar ? controlBar.offsetHeight : 0);
961
986
  if (videoWidth > window.innerWidth) {
962
987
  videoHeight = videoWidth * (9 / 16);
963
988
  }
@@ -967,8 +992,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
967
992
  video.classList.add('ratio-border');
968
993
  }
969
994
 
970
- // Condition for spacing in full screen mode for review player
971
- if (player.isFullscreen && (playerType === 'snp_edit' || playerType === 'pgm_edit')) {
995
+ // Condition for spacing in full screen mode for review player or default with image type
996
+ if (player.isFullscreen && (playerType === 'snp_edit' || playerType === 'pgm_edit' || playerType === 'default' && fileType === 'image')) {
972
997
  var reduceBy = 12; // adjust between 10–15px
973
998
  var newH = Math.max(videoHeight - reduceBy, 0);
974
999
  video.style.height = newH + 'px';
@@ -977,6 +1002,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
977
1002
  var widths = totalWidth - audioMeterBlock.offsetWidth - rightSectionRef.offsetWidth;
978
1003
  video.style.width = widths + 'px';
979
1004
  }
1005
+ (_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);
980
1006
  // this.video.handleResize();
981
1007
  }
982
1008
  }, {
@@ -1076,7 +1102,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
1076
1102
  ref: function ref(rightSectionRef) {
1077
1103
  _this6._rightSectionRef = rightSectionRef;
1078
1104
  }
1079
- }, rightSection) : null), props.controlType === 'advanced' ? /*#__PURE__*/_react["default"].createElement(ControlContainer, {
1105
+ }, rightSection) : null), props.controlType === 'advanced' && props.fileType !== 'image' ? /*#__PURE__*/_react["default"].createElement(ControlContainer, {
1080
1106
  ref: function ref(advancedControl) {
1081
1107
  _this6._advancedControl = advancedControl;
1082
1108
  }
package/components/control-bar/ControlBar.js CHANGED
@@ -56,14 +56,19 @@ var propTypes = {
56
56
  player: _propTypes.PropTypes.instanceOf(Object),
57
57
  theme: _propTypes.PropTypes.string
58
58
  };
59
- 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) {
59
+ 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) {
60
60
  return props.player === 'panel' && props.active || props.player !== 'panel' ? '50px' : '0px';
61
61
  }, function (props) {
62
62
  return props.player === 'panel' && props.active || props.player !== 'panel' ? 'visible' : 'hidden';
63
63
  }, function (props) {
64
- return props.player === 'panel' ? 'absolute' : 'relative';
64
+ var _props$playerState;
65
+ return props.fileType === 'image' && (_props$playerState = props.playerState) !== null && _props$playerState !== void 0 && _props$playerState.isFullscreen ? 'absolute' : props.player === 'panel' ? 'absolute' : 'relative';
65
66
  }, function (props) {
66
- return props.player === 'panel' ? '0px' : 'initial';
67
+ var _props$playerState2;
68
+ return props.fileType === 'image' && (_props$playerState2 = props.playerState) !== null && _props$playerState2 !== void 0 && _props$playerState2.isFullscreen ? '0px' : props.player === 'panel' ? '0px' : 'initial';
69
+ }, function (props) {
70
+ var _props$playerState3;
71
+ return props.fileType === 'image' && (_props$playerState3 = props.playerState) !== null && _props$playerState3 !== void 0 && _props$playerState3.isFullscreen ? '0px' : 'initial';
67
72
  }, _colors["default"].common.base.black);
68
73
  var VideoControlBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n"])));
69
74
  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) {
288
293
  }, {
289
294
  key: "getImageChildrens",
290
295
  value: function getImageChildrens() {
291
- return [];
296
+ return [/*#__PURE__*/_react["default"].createElement(_FullscreenToggle["default"], _extends({}, this.props, {
297
+ key: "fullscreen-toggle",
298
+ order: 11,
299
+ style: {
300
+ marginLeft: 'auto',
301
+ marginRight: '10px'
302
+ }
303
+ }))];
292
304
  }
293
305
  }, {
294
306
  key: "getChildren",
@@ -313,10 +325,13 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
313
325
  var children = this.getChildren();
314
326
  var _this$props4 = this.props,
315
327
  userActivity = _this$props4.player.userActivity,
316
- playerType = _this$props4.playerType;
328
+ playerType = _this$props4.playerType,
329
+ player = _this$props4.player;
317
330
  return /*#__PURE__*/_react["default"].createElement(PlayerControlBlock, {
318
331
  active: userActivity,
319
- player: playerType
332
+ player: playerType,
333
+ fileType: this.props.fileType,
334
+ playerState: player
320
335
  }, /*#__PURE__*/_react["default"].createElement(VideoControlBlock, this.props, children));
321
336
  }
322
337
  }]);
package/components/control-bar/FullscreenToggle.js CHANGED
@@ -31,7 +31,8 @@ var propTypes = {
31
31
  actions: _propTypes.PropTypes.instanceOf(Object),
32
32
  player: _propTypes.PropTypes.instanceOf(Object),
33
33
  playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel']),
34
- theme: _propTypes.PropTypes.string
34
+ theme: _propTypes.PropTypes.string,
35
+ style: _propTypes.PropTypes.instanceOf(Object)
35
36
  };
36
37
  var defaultProps = {
37
38
  actions: {},
@@ -53,12 +54,17 @@ var FullscreenToggle = exports["default"] = /*#__PURE__*/function (_Component) {
53
54
  var _this$props = this.props,
54
55
  player = _this$props.player,
55
56
  actions = _this$props.actions,
56
- onRightMenuVisible = _this$props.onRightMenuVisible;
57
+ onRightMenuVisible = _this$props.onRightMenuVisible,
58
+ onBeforeFullscreenToggle = _this$props.onBeforeFullscreenToggle,
59
+ isRightMenuVisible = _this$props.isRightMenuVisible;
60
+ if (!(player !== null && player !== void 0 && player.isFullscreen) && onBeforeFullscreenToggle) {
61
+ onBeforeFullscreenToggle(isRightMenuVisible);
62
+ }
57
63
  actions.toggleFullscreen(player);
58
- // Trigger UI change based for exit
59
- var isFull = player === null || player === void 0 ? void 0 : player.isFullscreen;
60
- onRightMenuVisible(isFull);
61
- actions.toggleRightBar(player, isFull);
64
+ if (!(player !== null && player !== void 0 && player.isFullscreen)) {
65
+ onRightMenuVisible(false);
66
+ actions.toggleRightBar(player, false);
67
+ }
62
68
  }
63
69
  }, {
64
70
  key: "render",
@@ -67,8 +73,10 @@ var FullscreenToggle = exports["default"] = /*#__PURE__*/function (_Component) {
67
73
  var _this$props2 = this.props,
68
74
  playerType = _this$props2.playerType,
69
75
  theme = _this$props2.theme,
70
- player = _this$props2.player;
76
+ player = _this$props2.player,
77
+ style = _this$props2.style;
71
78
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, playerType !== 'panel' ? /*#__PURE__*/_react["default"].createElement(FullscreenToggleButton, {
79
+ style: style,
72
80
  theme: theme,
73
81
  display: "rounded",
74
82
  appearance: "cta",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.1.14",
3
+ "version": "4.2.0",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {