@desynova-digital/player 4.0.92 → 4.0.94
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.
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
|
|
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;
|
|
@@ -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);
|
|
@@ -887,6 +901,13 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
887
901
|
video.style.margin = '0 auto';
|
|
888
902
|
video.classList.add('ratio-border');
|
|
889
903
|
}
|
|
904
|
+
|
|
905
|
+
// Condition for spacing in full screen mode for review player
|
|
906
|
+
if (player.isFullscreen && (playerType === 'snp_edit' || playerType === 'pgm_edit')) {
|
|
907
|
+
var reduceBy = 12; // adjust between 10–15px
|
|
908
|
+
var newH = Math.max(videoHeight - reduceBy, 0);
|
|
909
|
+
video.style.height = newH + 'px';
|
|
910
|
+
}
|
|
890
911
|
// this.video.handleResize();
|
|
891
912
|
}
|
|
892
913
|
}, {
|
|
@@ -941,7 +962,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
941
962
|
onBlur: this.handleBlur,
|
|
942
963
|
tabIndex: "-1"
|
|
943
964
|
}, /*#__PURE__*/_react["default"].createElement(PlayerContainer, _extends({
|
|
944
|
-
className: "player-container
|
|
965
|
+
className: "player-container",
|
|
945
966
|
ref: function ref(playerContainer) {
|
|
946
967
|
_this5._playerContainer = playerContainer;
|
|
947
968
|
}
|
|
@@ -56,8 +56,9 @@ var FullscreenToggle = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
56
56
|
onRightMenuVisible = _this$props.onRightMenuVisible;
|
|
57
57
|
actions.toggleFullscreen(player);
|
|
58
58
|
// Trigger UI change based for exit
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
var isFull = player === null || player === void 0 ? void 0 : player.isFullscreen;
|
|
60
|
+
onRightMenuVisible(isFull);
|
|
61
|
+
actions.toggleRightBar(player, isFull);
|
|
61
62
|
}
|
|
62
63
|
}, {
|
|
63
64
|
key: "render",
|
|
@@ -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:
|
|
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
|
|
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: #
|
|
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
|
|
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
|
-
|
|
51
|
-
var
|
|
52
|
-
var
|
|
53
|
-
var
|
|
54
|
-
var
|
|
55
|
-
var
|
|
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
|
---------------------------------------------------------- */
|
|
@@ -110,8 +113,9 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
|
|
|
110
113
|
setHoverBoxHold = _useState4[1];
|
|
111
114
|
var containerRef = (0, _react.useRef)(null);
|
|
112
115
|
var hideTimer = (0, _react.useRef)(null);
|
|
113
|
-
|
|
114
|
-
|
|
116
|
+
var isLineVisible = function isLineVisible(time) {
|
|
117
|
+
return hovered === time || hoverBoxHold && hovered === time;
|
|
118
|
+
};
|
|
115
119
|
var handleMouseEnter = function handleMouseEnter(time) {
|
|
116
120
|
clearTimeout(hideTimer.current);
|
|
117
121
|
setHovered(time);
|
|
@@ -124,6 +128,13 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
|
|
|
124
128
|
setHovered(null);
|
|
125
129
|
}, 1500);
|
|
126
130
|
};
|
|
131
|
+
var truncateWords = function truncateWords(text) {
|
|
132
|
+
var maxWords = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30;
|
|
133
|
+
if (!text) return '';
|
|
134
|
+
var words = text.trim().split(/\s+/);
|
|
135
|
+
if (words.length <= maxWords) return text;
|
|
136
|
+
return words.slice(0, maxWords).join(' ') + '...';
|
|
137
|
+
};
|
|
127
138
|
if (!data.length) return null;
|
|
128
139
|
var grouped = data.reduce(function (acc, item) {
|
|
129
140
|
var key = item.value.in_time;
|
|
@@ -138,7 +149,6 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
|
|
|
138
149
|
var _ref3 = _slicedToArray(_ref2, 2),
|
|
139
150
|
time = _ref3[0],
|
|
140
151
|
comments = _ref3[1];
|
|
141
|
-
console.log('comments', comments);
|
|
142
152
|
var start = comments[0].value.in_time;
|
|
143
153
|
var end = comments[0].value.out_time;
|
|
144
154
|
var startPct = getMarkerPercent(start, duration, zoom);
|
|
@@ -162,9 +172,8 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
|
|
|
162
172
|
style: {
|
|
163
173
|
left: safeStart
|
|
164
174
|
},
|
|
165
|
-
isHovered: isHovered
|
|
166
|
-
|
|
167
|
-
,
|
|
175
|
+
isHovered: isHovered,
|
|
176
|
+
showLine: isLineVisible(time),
|
|
168
177
|
multi: comments.length > 1,
|
|
169
178
|
onMouseEnter: function onMouseEnter() {
|
|
170
179
|
return handleMouseEnter(time);
|
|
@@ -195,7 +204,7 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
|
|
|
195
204
|
return clearTimeout(hideTimer.current);
|
|
196
205
|
},
|
|
197
206
|
onMouseLeave: handleMouseLeave
|
|
198
|
-
}, comments.length > 1 && /*#__PURE__*/_react["default"].createElement(HoverHeader, null, comments.length, " COMMENTS"), comments.map(function (c) {
|
|
207
|
+
}, comments.length > 1 && /*#__PURE__*/_react["default"].createElement(HoverHeader, null, comments.length, " COMMENTS"), /*#__PURE__*/_react["default"].createElement(HoverScroll, null, comments.map(function (c) {
|
|
199
208
|
var _c$value$created_by, _c$value, _c$value2, _c$value3, _c$value4, _c$value5;
|
|
200
209
|
var selectedFormat = localStorage.getItem('timeCodeFormat');
|
|
201
210
|
return /*#__PURE__*/_react["default"].createElement(HoverComment, {
|
|
@@ -214,13 +223,13 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
|
|
|
214
223
|
timecode: c.value.out_timecode,
|
|
215
224
|
selectedTimecodeFormat: selectedFormat,
|
|
216
225
|
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, {
|
|
226
|
+
}))), /*#__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
227
|
name: "annotate-icon",
|
|
219
228
|
width: 30,
|
|
220
229
|
height: 30,
|
|
221
|
-
color: "#
|
|
230
|
+
color: "#00CEC6"
|
|
222
231
|
})) : null));
|
|
223
|
-
})));
|
|
232
|
+
}))));
|
|
224
233
|
}));
|
|
225
234
|
};
|
|
226
235
|
var _default = exports["default"] = RenderCommentMarkers;
|