@desynova-digital/player 4.0.93 → 4.0.95

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/AudioMeter.js +19 -3
  2. package/components/Player.js +26 -3
  3. package/components/control-bar/CameraButton.js +8 -3
  4. package/components/progress-bar/RenderCommentMarkers.js +39 -22
  5. package/package.json +1 -1
package/components/AudioMeter.js CHANGED
@@ -22,8 +22,6 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
22
22
  function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
23
23
  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); } }
24
24
  function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
25
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
26
- 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); }
27
25
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
28
26
  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); }
29
27
  function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
@@ -31,6 +29,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
31
29
  function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
32
30
  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); }
33
31
  function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
32
+ 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; }
33
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
34
+ 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); }
34
35
  function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
35
36
  var propTypes = {
36
37
  height: _propTypes.PropTypes.number,
@@ -51,6 +52,17 @@ var AudioMeter = exports["default"] = /*#__PURE__*/function (_Component) {
51
52
  var _this;
52
53
  _classCallCheck(this, AudioMeter);
53
54
  _this = _callSuper(this, AudioMeter, [props, context]);
55
+ _defineProperty(_this, "handleFullscreenChange", function () {
56
+ // Wait for browser to apply layout after exiting fullscreen
57
+ requestAnimationFrame(function () {
58
+ setTimeout(function () {
59
+ _this.getNoOfStacks();
60
+ _this.setState({
61
+ _resizeFix: Date.now()
62
+ }); // force rerender
63
+ }, 50); // 30–50ms is enough to wait for DOM resize
64
+ });
65
+ });
54
66
  _this.state = {
55
67
  stacksArr: [],
56
68
  rangeArray: [],
@@ -58,7 +70,8 @@ var AudioMeter = exports["default"] = /*#__PURE__*/function (_Component) {
58
70
  audioPan: {
59
71
  left: true,
60
72
  right: true
61
- }
73
+ },
74
+ _resizeFix: null
62
75
  };
63
76
  _this.dbRange = -48;
64
77
  _this.channelCount = 2;
@@ -78,11 +91,14 @@ var AudioMeter = exports["default"] = /*#__PURE__*/function (_Component) {
78
91
  if (player.hasStarted) {
79
92
  this.initializeMeter();
80
93
  }
94
+ // Listen for exiting fullscreen
95
+ document.addEventListener('fullscreenchange', this.handleFullscreenChange);
81
96
  }
82
97
  }, {
83
98
  key: "componentWillUnmount",
84
99
  value: function componentWillUnmount() {
85
100
  this.disconnectMeter();
101
+ document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
86
102
  }
87
103
  }, {
88
104
  key: "disconnectMeter",
package/components/Player.js CHANGED
@@ -158,7 +158,7 @@ var defaultProps = {
158
158
  onVolumeChange: null
159
159
  };
160
160
  var PlayerBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 100%;\n"])));
161
- var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n.rightbar-visible .right-video-section {\n display: block !important;\n}\n\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 .left-video-section {\n width: ", ";\n position: relative;\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 width: ", ";\n"])), function (props) {
161
+ var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n// .rightbar-visible .right-video-section {\n// display: block !important;\n// }\n\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 .left-video-section {\n width: ", ";\n position: relative;\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
162
  if (!props.isRightMenuVisible) {
163
163
  return '100%';
164
164
  }
@@ -201,6 +201,18 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
201
201
  var _this;
202
202
  _classCallCheck(this, Player);
203
203
  _this = _callSuper(this, Player, [props]);
204
+ _defineProperty(_this, "handleFullscreenFix", function () {
205
+ // Wait for fullscreen to finish layout
206
+ requestAnimationFrame(function () {
207
+ requestAnimationFrame(function () {
208
+ // Force browser reflow
209
+ document.body.getBoundingClientRect();
210
+
211
+ // Now trigger resize for React / your components
212
+ window.dispatchEvent(new Event('resize'));
213
+ });
214
+ });
215
+ });
204
216
  _defineProperty(_this, "closeSidemenu", function () {
205
217
  var _this$manager$getStat = _this.manager.getState(),
206
218
  player = _this$manager$getStat.player;
@@ -260,7 +272,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
260
272
  _this.actions.handlePlayerType(props.playerType);
261
273
  _this.actions.handleControlType(props.controlType);
262
274
  if (_this.props.fullScreenRef) {
263
- _this.props.fullScreenRef.current = _this;
275
+ _this.props.fullScreenRef.current.player = _this;
264
276
  }
265
277
  return _this;
266
278
  }
@@ -359,6 +371,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
359
371
  value: function componentDidMount() {
360
372
  this.handleResize();
361
373
  window.addEventListener('resize', this.handleResize);
374
+ document.addEventListener('fullscreenchange', this.handleFullscreenFix);
362
375
  _fullscreen["default"].addEventListener(this.handleFullScreenChange);
363
376
  this.handleMarginsAndGrid();
364
377
  /*
@@ -389,6 +402,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
389
402
  value: function componentWillUnmount() {
390
403
  // Remove event listener
391
404
  window.removeEventListener('resize', this.handleResize);
405
+ document.removeEventListener('fullscreenchange', this.handleFullscreenFix);
392
406
  _fullscreen["default"].removeEventListener(this.handleFullScreenChange);
393
407
  if (this.controlsHideTimer) {
394
408
  window.clearTimeout(this.controlsHideTimer);
@@ -462,6 +476,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
462
476
  key: "progress-control",
463
477
  order: 3
464
478
  })), /*#__PURE__*/_react["default"].createElement(_RenderCommentMarkers["default"], _extends({
479
+ isRightMenuVisible: isRightMenuVisible,
480
+ fullScreenRef: this.props.fullScreenRef,
465
481
  duration: fullProps === null || fullProps === void 0 || (_fullProps$player = fullProps.player) === null || _fullProps$player === void 0 ? void 0 : _fullProps$player.duration,
466
482
  playerType: fullProps.playerType,
467
483
  isFullscreen: fullProps === null || fullProps === void 0 || (_fullProps$player2 = fullProps.player) === null || _fullProps$player2 === void 0 ? void 0 : _fullProps$player2.isFullscreen,
@@ -887,6 +903,13 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
887
903
  video.style.margin = '0 auto';
888
904
  video.classList.add('ratio-border');
889
905
  }
906
+
907
+ // Condition for spacing in full screen mode for review player
908
+ if (player.isFullscreen && (playerType === 'snp_edit' || playerType === 'pgm_edit')) {
909
+ var reduceBy = 12; // adjust between 10–15px
910
+ var newH = Math.max(videoHeight - reduceBy, 0);
911
+ video.style.height = newH + 'px';
912
+ }
890
913
  // this.video.handleResize();
891
914
  }
892
915
  }, {
@@ -941,7 +964,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
941
964
  onBlur: this.handleBlur,
942
965
  tabIndex: "-1"
943
966
  }, /*#__PURE__*/_react["default"].createElement(PlayerContainer, _extends({
944
- className: "player-container ".concat(isFullscreen ? 'fullscreen-left-only' : ''),
967
+ className: "player-container",
945
968
  ref: function ref(playerContainer) {
946
969
  _this5._playerContainer = playerContainer;
947
970
  }
package/components/control-bar/CameraButton.js CHANGED
@@ -47,12 +47,17 @@ var CameraButton = /*#__PURE__*/function (_Component) {
47
47
  value: function handleClick() {
48
48
  var _this$props = this.props,
49
49
  onTakeSnapshot = _this$props.onTakeSnapshot,
50
- video = _this$props.video;
50
+ video = _this$props.video,
51
+ onRightMenuVisible = _this$props.onRightMenuVisible,
52
+ actions = _this$props.actions,
53
+ player = _this$props.player;
51
54
  var timeObj = {
52
- "thumbnail": (0, _utils.secondsToTime)(this.props.video.currentTime, this.props.frameRate, this.props.initialTime),
53
- "thumbnail_seconds": this.props.video.currentTime
55
+ thumbnail: (0, _utils.secondsToTime)(this.props.video.currentTime, this.props.frameRate, this.props.initialTime),
56
+ thumbnail_seconds: this.props.video.currentTime
54
57
  };
55
58
  onTakeSnapshot(timeObj);
59
+ actions.toggleRightBar(player, true);
60
+ onRightMenuVisible(true);
56
61
  }
57
62
  }, {
58
63
  key: "render",
package/components/progress-bar/RenderCommentMarkers.js CHANGED
@@ -8,7 +8,7 @@ exports["default"] = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _components = require("@desynova-digital/components");
11
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
12
12
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
13
13
  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); }
14
14
  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; }
@@ -22,22 +22,22 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
22
22
  /* ----------------------------------------------------------
23
23
  TIMELINE MAIN WRAPPER
24
24
  ---------------------------------------------------------- */
25
- var MarkerTimeline = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 11px;\n"])));
25
+ var MarkerTimeline = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 18px;\n"])));
26
26
  /* ----------------------------------------------------------
27
27
  Marker Dot
28
28
  ---------------------------------------------------------- */
29
- var MarkerDot = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -6px;\n transform: translateX(-50%);\n width: 22px;\n height: 22px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: #0c141d;\n z-index: ", ";\n pointer-events: auto;\n\n font-family: SFUIText-Medium;\n font-size: 10px;\n font-weight: 500;\n line-height: 12px;\n\n &::before {\n content: '';\n position: absolute;\n width: 32px;\n height: 32px;\n top: -6px;\n left: -6px;\n }\n\n /* --- NEW top vertical line --- */\n // &::after {\n // content: '';\n // position: absolute;\n // top: -10px;\n // left: 50%;\n // transform: translateX(-50%);\n // width: 1px;\n // height: 2px;\n // background: #bfbfbf;\n // opacity: ", ";\n // transition: opacity 0.15s ease-out;\n // }\n\n ", "\n"])), function (p) {
29
+ var MarkerDot = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -6px;\n transform: translateX(-50%);\n width: 22px;\n height: 22px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: #0c141d;\n z-index: ", ";\n pointer-events: auto;\n\n font-family: SFUIText-Medium;\n font-size: 10px;\n font-weight: 500;\n line-height: 12px;\n\n &::before {\n content: '';\n position: absolute;\n width: 32px;\n height: 32px;\n top: -6px;\n left: -6px;\n }\n\n /* --- NEW top vertical line --- */\n &::after {\n content: '';\n position: absolute;\n top: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 1.5px;\n height: 5px;\n background: #bfbfbf;\n opacity: ", ";\n transition: opacity 0.15s ease-out;\n }\n\n ", "\n"])), function (p) {
30
30
  return p.isHovered ? 99999 : 9000;
31
31
  }, function (p) {
32
32
  return p.showLine ? 1 : 0;
33
33
  }, function (p) {
34
- return p.multi ? "\n background: linear-gradient(90deg, #A56EFC 0%, #2EBF91 100%);\n padding: 1px;\n\n & > div.inner {\n background: #061014;\n color: #fff;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n display:flex;\n align-items:center;\n justify-content:center;\n }\n " : "\n background: #47d2c7;\n\n &:hover {\n background: #3bbfb6;\n }\n ";
34
+ return p.multi ? "\n background: linear-gradient(90deg, #A56EFC 0%, #2EBF91 100%);\n padding: 1px;\n\n & > div.inner {\n background: #061014;\n color: #fff;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n display:flex;\n align-items:center;\n justify-content:center;\n }\n " : "\n background: #00CEC6;\n\n &:hover {\n background: #3bbfb6;\n }\n ";
35
35
  });
36
36
 
37
37
  /* ----------------------------------------------------------
38
38
  END MARKER DOT
39
39
  ---------------------------------------------------------- */
40
- var EndMarkerDot = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -6px;\n transform: translateX(-50%);\n width: 24px; /* bigger like your screenshot */\n height: 24px;\n border-radius: 50%;\n background: #47d2c7; /* teal outer circle */\n border: 2px solid #00b9b0; /* ring / boundary */\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9000;\n opacity: 0;\n transition: opacity 0.15s ease-out;\n\n &::after {\n content: '';\n width: 6px; /* inner white dot */\n height: 6px;\n background: #ffffff;\n border-radius: 50%;\n }\n\n // &::before {\n // content: '';\n // position: absolute;\n // top: -10px;\n // left: 50%;\n // transform: translateX(-50%);\n // width: 1px;\n // height: 2px;\n // background: #bfbfbf;\n // opacity: 1;\n\n // transition: opacity 0.15s ease-out;\n // }\n"])));
40
+ var EndMarkerDot = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -6px;\n transform: translateX(-50%);\n width: 24px; /* bigger like your screenshot */\n height: 24px;\n border-radius: 50%;\n background: #47d2c7; /* teal outer circle */\n border: 2px solid #00b9b0; /* ring / boundary */\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9000;\n opacity: 0;\n transition: opacity 0.15s ease-out;\n\n &::after {\n content: '';\n width: 6px; /* inner white dot */\n height: 6px;\n background: #ffffff;\n border-radius: 50%;\n }\n\n &::before {\n content: '';\n position: absolute;\n top: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 1.5px;\n height: 5px;\n background: #bfbfbf;\n opacity: 1;\n\n transition: opacity 0.15s ease-out;\n }\n"])));
41
41
 
42
42
  /* ----------------------------------------------------------
43
43
  SEGMENT LINE
@@ -47,12 +47,15 @@ var MarkerLine = _styledComponents["default"].div(_templateObject4 || (_template
47
47
  /* ----------------------------------------------------------
48
48
  HOVER BOX
49
49
  ---------------------------------------------------------- */
50
- var HoverBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: 30px;\n background: #303f51;\n border: 2px solid rgba(255, 255, 255, 0.15); /* subtle grey border */\n backdrop-filter: blur(12px);\n border-radius: 12px;\n padding: 0px; /* no padding \u2013 inner sections handle their own padding */\n color: white;\n z-index: 999999;\n box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);\n overflow-y: auto;\n animation: fadeInBox 0.18s ease-out;\n min-width: 180px;\n max-width: 260px;\n max-height: 400px;\n"])));
51
- var HoverHeader = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: 100%;\n background: #3e6673;\n color: #46d7ff;\n font-size: 12px;\n font-weight: 700;\n padding: 10px 12px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n font-family: SFUIText-Regular;\n"])));
52
- var HoverComment = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n width: 100%;\n padding: 12px 14px;\n background: transparent;\n transition: background 0.15s ease, transform 0.15s ease;\n border-radius: 6px;\n position: relative;\n\n &:hover {\n background: rgba(255, 255, 255, 0.07);\n }\n\n &:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1.3px;\n background: rgba(255, 255, 255, 0.12);\n }\n"])));
53
- var HoverName = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 6px;\n text-transform: capitalize;\n"])));
54
- var HoverTime = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n font-family: SFUIText-Regular;\n font-size: 11px;\n color: #9fa4ad;\n margin-bottom: 6px;\n"])));
55
- var HoverText = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n font-family: SFUIText-Light;\n font-size: 14px;\n font-weight: 300;\n color: #ffffff;\n line-height: 18px;\n display: block;\n"])));
50
+
51
+ var HoverScroll = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n overflow-y: auto;\n max-height: 360px; /* 400 total - header height */\n\n /* Hide scrollbar everywhere */\n scrollbar-width: none;\n -ms-overflow-style: none;\n &::-webkit-scrollbar {\n display: none;\n }\n"])));
52
+ var HoverBox = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: 40px;\n left: 0;\n right: auto !important;\n width: max-content;\n\n background: #303f51;\n border: 2px solid rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(12px);\n border-radius: 12px;\n padding: 0;\n color: white;\n z-index: 999999;\n box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);\n animation: fadeInBox 0.18s ease-out;\n\n display: flex;\n flex-direction: column;\n\n min-width: 180px;\n max-width: 220px;\n max-height: 400px;\n overflow: hidden; /* prevent scroll at root */\n"])));
53
+ var HoverHeader = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background: #3e6673;\n color: #00cec6;\n font-size: 12px;\n font-weight: 700;\n padding: 10px 12px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n font-family: SFUIText-Regular;\n\n position: sticky;\n top: 0;\n z-index: 2; /* must be above scroll content */\n\n width: 100%;\n box-sizing: border-box;\n"])));
54
+ var HoverComment = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding: 12px 14px;\n background: transparent;\n transition: background 0.15s ease, transform 0.15s ease;\n border-radius: 6px;\n position: relative;\n\n /* FIX */\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n\n &:hover {\n background: rgba(255, 255, 255, 0.07);\n }\n\n &:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1.3px;\n background: rgba(255, 255, 255, 0.12);\n }\n"])));
55
+ var HoverName = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 6px;\n text-transform: capitalize;\n"])));
56
+ var HoverTime = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n font-family: SFUIText-Regular;\n font-size: 11px;\n color: #9fa4ad;\n margin-bottom: 6px;\n"])));
57
+ var HoverText = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n font-family: SFUIText-Light;\n font-size: 14px;\n font-weight: 300;\n color: #ffffff;\n line-height: 18px;\n display: block;\n white-space: normal;\n overflow: visible;\n text-overflow: unset;\n\n /* FIX */\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n"])));
58
+
56
59
  /* ----------------------------------------------------------
57
60
  UTILITIES (FIXED)
58
61
  ---------------------------------------------------------- */
@@ -98,7 +101,9 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
98
101
  onRightMenuVisible = _ref.onRightMenuVisible,
99
102
  actions = _ref.actions,
100
103
  player = _ref.player,
101
- frameRate = _ref.frameRate;
104
+ frameRate = _ref.frameRate,
105
+ fullScreenRef = _ref.fullScreenRef,
106
+ isRightMenuVisible = _ref.isRightMenuVisible;
102
107
  if (!['snp_edit', 'pgm_edit'].includes(playerType)) return null;
103
108
  var _useState = (0, _react.useState)(null),
104
109
  _useState2 = _slicedToArray(_useState, 2),
@@ -110,8 +115,9 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
110
115
  setHoverBoxHold = _useState4[1];
111
116
  var containerRef = (0, _react.useRef)(null);
112
117
  var hideTimer = (0, _react.useRef)(null);
113
- // const isLineVisible = (time) => hovered === time || (hoverBoxHold && hovered === time);
114
-
118
+ var isLineVisible = function isLineVisible(time) {
119
+ return hovered === time || hoverBoxHold && hovered === time;
120
+ };
115
121
  var handleMouseEnter = function handleMouseEnter(time) {
116
122
  clearTimeout(hideTimer.current);
117
123
  setHovered(time);
@@ -124,12 +130,23 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
124
130
  setHovered(null);
125
131
  }, 1500);
126
132
  };
133
+ var truncateWords = function truncateWords(text) {
134
+ var maxWords = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30;
135
+ if (!text) return '';
136
+ var words = text.trim().split(/\s+/);
137
+ if (words.length <= maxWords) return text;
138
+ return words.slice(0, maxWords).join(' ') + '...';
139
+ };
127
140
  if (!data.length) return null;
128
141
  var grouped = data.reduce(function (acc, item) {
129
142
  var key = item.value.in_time;
130
143
  (acc[key] = acc[key] || []).push(item);
131
144
  return acc;
132
145
  }, {});
146
+ var originalIndexMap = new Map();
147
+ data.forEach(function (item, i) {
148
+ originalIndexMap.set(item.id, i);
149
+ });
133
150
  var containerWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
134
151
  return /*#__PURE__*/_react["default"].createElement(MarkerTimeline, {
135
152
  ref: containerRef
@@ -138,7 +155,6 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
138
155
  var _ref3 = _slicedToArray(_ref2, 2),
139
156
  time = _ref3[0],
140
157
  comments = _ref3[1];
141
- console.log('comments', comments);
142
158
  var start = comments[0].value.in_time;
143
159
  var end = comments[0].value.out_time;
144
160
  var startPct = getMarkerPercent(start, duration, zoom);
@@ -162,9 +178,8 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
162
178
  style: {
163
179
  left: safeStart
164
180
  },
165
- isHovered: isHovered
166
- // showLine={isLineVisible(time)}
167
- ,
181
+ isHovered: isHovered,
182
+ showLine: isLineVisible(time),
168
183
  multi: comments.length > 1,
169
184
  onMouseEnter: function onMouseEnter() {
170
185
  return handleMouseEnter(time);
@@ -195,14 +210,16 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
195
210
  return clearTimeout(hideTimer.current);
196
211
  },
197
212
  onMouseLeave: handleMouseLeave
198
- }, comments.length > 1 && /*#__PURE__*/_react["default"].createElement(HoverHeader, null, comments.length, " COMMENTS"), comments.map(function (c) {
213
+ }, comments.length > 1 && /*#__PURE__*/_react["default"].createElement(HoverHeader, null, comments.length, " COMMENTS"), /*#__PURE__*/_react["default"].createElement(HoverScroll, null, comments.map(function (c) {
199
214
  var _c$value$created_by, _c$value, _c$value2, _c$value3, _c$value4, _c$value5;
200
215
  var selectedFormat = localStorage.getItem('timeCodeFormat');
201
216
  return /*#__PURE__*/_react["default"].createElement(HoverComment, {
202
217
  key: c.id,
203
218
  onClick: function onClick(e) {
219
+ var _fullScreenRef$curren, _fullScreenRef$curren2;
204
220
  e.stopPropagation();
205
221
  onSegmentClick(c.value.in_time, c.value.out_time, false);
222
+ (_fullScreenRef$curren = fullScreenRef.current.timeline) === null || _fullScreenRef$curren === void 0 || (_fullScreenRef$curren2 = _fullScreenRef$curren.handleTimelineIndex) === null || _fullScreenRef$curren2 === void 0 || _fullScreenRef$curren2.call(_fullScreenRef$curren, originalIndexMap.get(c.id));
206
223
  onRightMenuVisible(true);
207
224
  actions.toggleRightBar(player, true);
208
225
  }
@@ -214,13 +231,13 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
214
231
  timecode: c.value.out_timecode,
215
232
  selectedTimecodeFormat: selectedFormat,
216
233
  fps: frameRate
217
- }))), /*#__PURE__*/_react["default"].createElement(HoverText, null, ((_c$value = c.value) === null || _c$value === void 0 ? void 0 : _c$value.remark) || ((_c$value2 = c.value) === null || _c$value2 === void 0 ? void 0 : _c$value2.sub_title) || ((_c$value3 = c.value) !== null && _c$value3 !== void 0 && _c$value3.audioFile ? '[Voice Note Recorded]' : (_c$value4 = c.value) === null || _c$value4 === void 0 ? void 0 : _c$value4.title), (_c$value5 = c.value) !== null && _c$value5 !== void 0 && (_c$value5 = _c$value5.annotations) !== null && _c$value5 !== void 0 && _c$value5.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
234
+ }))), /*#__PURE__*/_react["default"].createElement(HoverText, null, truncateWords(((_c$value = c.value) === null || _c$value === void 0 ? void 0 : _c$value.remark) || ((_c$value2 = c.value) === null || _c$value2 === void 0 ? void 0 : _c$value2.sub_title) || ((_c$value3 = c.value) !== null && _c$value3 !== void 0 && _c$value3.audioFile ? '[Voice Note Recorded]' : (_c$value4 = c.value) === null || _c$value4 === void 0 ? void 0 : _c$value4.title), 30), (_c$value5 = c.value) !== null && _c$value5 !== void 0 && (_c$value5 = _c$value5.annotations) !== null && _c$value5 !== void 0 && _c$value5.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
218
235
  name: "annotate-icon",
219
236
  width: 30,
220
237
  height: 30,
221
- color: "#47d2c7"
238
+ color: "#00CEC6"
222
239
  })) : null));
223
- })));
240
+ }))));
224
241
  }));
225
242
  };
226
243
  var _default = exports["default"] = RenderCommentMarkers;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.0.93",
3
+ "version": "4.0.95",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {