@desynova-digital/player 4.0.90 → 4.0.92

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 (6) hide show
  1. package/actions/player.js +76 -3
  2. package/components/AudioMeter.js +7 -2
  3. package/components/Player.js +48 -11
  4. package/components/control-bar/ControlBar.js +8 -2
  5. package/components/progress-bar/RenderCommentMarkers.js +47 -35
  6. package/package.json +1 -1
package/actions/player.js CHANGED
@@ -199,13 +199,37 @@ function mute(muted) {
199
199
  operation: operation
200
200
  };
201
201
  }
202
+ function safeAppend(parent, child) {
203
+ if (!parent || !child) return;
204
+
205
+ // Prevent circular nesting
206
+ if (child.contains(parent)) return; // ❌ cannot append parent inside child
207
+
208
+ // Prevent duplicates
209
+ if (parent.contains(child)) return; // already appended
210
+
211
+ parent.appendChild(child); // safe
212
+ }
213
+
214
+ // keep this outside so original parent is remembered across toggles
215
+ var toastOriginalParent = null;
202
216
  function toggleFullscreen(player) {
203
217
  if (_fullscreen["default"].enabled) {
204
- // var elem = document.getElementsByClassName('left-video-section')[0];
205
- var elem = document.getElementsByClassName('player-container')[0];
218
+ var elem = document.querySelector('.player-container');
206
219
  var right = document.querySelector('.right-video-section');
220
+ var root = document.getElementById('root'); // app root
221
+ var toastRoot = root.children[0];
222
+ var fallbackParent = root || document.body;
207
223
  if (_fullscreen["default"].isFullscreen) {
224
+ // exit fullscreen
208
225
  _fullscreen["default"].exit();
226
+ elem.classList.remove('fullscreen-left-only');
227
+ // restore toast to its original parent (or fallback)
228
+ if (toastRoot) {
229
+ var parentToRestore = toastOriginalParent || fallbackParent;
230
+ // parentToRestore.appendChild(toastRoot);
231
+ safeAppend(parentToRestore, toastRoot);
232
+ }
209
233
  setTimeout(function () {
210
234
  if (right) {
211
235
  right.style.removeProperty('transition');
@@ -215,6 +239,15 @@ function toggleFullscreen(player) {
215
239
  }
216
240
  }, 300);
217
241
  } else {
242
+ // entering fullscreen
243
+ if (toastRoot && !toastOriginalParent) {
244
+ toastOriginalParent = toastRoot.parentNode || fallbackParent;
245
+ }
246
+ if (toastRoot && elem) {
247
+ // elem.appendChild(toastRoot);
248
+ safeAppend(elem, toastRoot);
249
+ }
250
+ elem.classList.add('fullscreen-left-only');
218
251
  _fullscreen["default"].request(elem);
219
252
  }
220
253
  return {
@@ -225,21 +258,60 @@ function toggleFullscreen(player) {
225
258
  }
226
259
  };
227
260
  }
261
+
262
+ // <-- this return must be outside the if-block
228
263
  return {
229
264
  type: FULLSCREEN_CHANGE,
230
265
  isFullscreen: !player.isFullscreen
231
266
  };
232
267
  }
268
+
269
+ // export function toggleFullscreen(player) {
270
+ // if (fullscreen.enabled) {
271
+ // // var elem = document.getElementsByClassName('left-video-section')[0];
272
+ // var elem = document.getElementsByClassName('player-container')[0];
273
+ // const right = document.querySelector('.right-video-section');
274
+
275
+ // if (fullscreen.isFullscreen) {
276
+ // fullscreen.exit();
277
+ // setTimeout(() => {
278
+ // if (right) {
279
+ // right.style.removeProperty('transition');
280
+ // right.style.removeProperty('display');
281
+ // right.style.removeProperty('transform');
282
+ // right.style.removeProperty('opacity');
283
+ // }
284
+ // }, 300);
285
+ // } else {
286
+ // fullscreen.request(elem);
287
+ // }
288
+ // return {
289
+ // type: OPERATE,
290
+ // operation: {
291
+ // action: 'toggle-fullscreen',
292
+ // source: ''
293
+ // }
294
+ // };
295
+ // }
296
+
297
+ // return {
298
+ // type: FULLSCREEN_CHANGE,
299
+ // isFullscreen: !player.isFullscreen
300
+ // };
301
+ // }
302
+
233
303
  function toggleRightBar(player, showRightMenu) {
304
+ var root = document.querySelector('.player-container');
234
305
  var right = document.querySelector('.right-video-section');
235
306
  var sidebarWidth = right.offsetWidth; // actual width of sidebar
236
307
  // Already fullscreen → toggle UI only (NO EXIT)
237
308
  if (_fullscreen["default"].isFullscreen) {
238
309
  right.style.transition = 'transform 0.4s ease, opacity 0.3s ease';
239
310
  if (showRightMenu) {
311
+ root.classList.add('rightbar-visible');
240
312
  // ✅ Coming from right to left (enter animation)
241
313
  right.style.display = 'block';
242
- right.style.right = "-".concat(sidebarWidth, "px"); // start off-screen
314
+ right.style.right = "-".concat(sidebarWidth, "px"); // start off-screen
243
315
  right.style.opacity = '0';
244
316
  // Small delay to allow the browser to register initial position
245
317
  requestAnimationFrame(function () {
@@ -247,6 +319,7 @@ function toggleRightBar(player, showRightMenu) {
247
319
  right.style.opacity = '1';
248
320
  });
249
321
  } else {
322
+ root.classList.remove('rightbar-visible');
250
323
  // ✅ Going left to right (exit animation)
251
324
  right.style.right = "-".concat(sidebarWidth, "px"); // start off-screen
252
325
  right.style.opacity = '0';
package/components/AudioMeter.js CHANGED
@@ -39,7 +39,9 @@ var propTypes = {
39
39
  var defaultProps = {
40
40
  height: 0
41
41
  };
42
- var RangeBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n right: -12px;\n height: 100%;\n overflow: hidden;\n .range {\n color: #aaaaaa;\n font-family: SFUIText-Medium;\n text-align: right;\n font-size: 8px;\n box-sizing: border-box;\n }\n"])));
42
+ var RangeBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n right: -12px;\n background-color: ", ";\n height: 100%;\n overflow: hidden;\n .range {\n color: #aaaaaa;\n font-family: SFUIText-Medium;\n text-align: right;\n font-size: 8px;\n box-sizing: border-box;\n }\n"])), function (props) {
43
+ return props.isFullscreen ? '#000' : 'unset';
44
+ });
43
45
  var MeterBlock = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n .track-block {\n position: relative;\n width: 15px;\n height: 100%;\n overflow: visible;\n &.left-track,\n &.right-track {\n &:after {\n position: absolute;\n color: #aaaaaa;\n bottom: -12px;\n font-size: 10px;\n left: 50%;\n transform: translateX(-50%);\n font-family: SFUIText-Regular;\n }\n }\n &.left-track:after {\n content: 'L';\n }\n &.right-track:after {\n content: 'R';\n }\n }\n"])));
44
46
  var ColorMeter = (0, _styledComponents["default"])('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to top,\n #00c8e7,\n #00e6b9 57%,\n #ff8d29 83%,\n #f6462c\n );\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n .stack-block {\n height: 2px;\n margin-bottom: 3px;\n background: #000000;\n }\n"])));
45
47
  var BlackMeter = (0, _styledComponents["default"])('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n background: #000000;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n height: 100%;\n transition: all 0.25s ease-in-out;\n -moz-transition: all 0.25s ease-in-out;\n -webkit-transition: all 0.25s ease-in-out;\n -ms-transition: all 0.25s ease-in-out;\n -o-transition: all 0.25s ease-in-out;\n .stack-block {\n height: 2px;\n margin-bottom: 3px;\n background: #304153;\n }\n"])));
@@ -290,7 +292,10 @@ var AudioMeter = exports["default"] = /*#__PURE__*/function (_Component) {
290
292
  rangeArray = _this$state.rangeArray,
291
293
  unitBlockHeight = _this$state.unitBlockHeight,
292
294
  audioPan = _this$state.audioPan;
293
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RangeBlock, null, rangeArray.map(function (range) {
295
+ var isFullscreen = this.props.isFullscreen;
296
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RangeBlock, {
297
+ isFullscreen: isFullscreen
298
+ }, rangeArray.map(function (range) {
294
299
  return /*#__PURE__*/_react["default"].createElement("div", {
295
300
  key: 'range' + range,
296
301
  style: {
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 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 position: relative;\n }\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 width: ", ";\n"])), function (props) {
162
162
  if (!props.isRightMenuVisible) {
163
163
  return '100%';
164
164
  }
@@ -168,7 +168,9 @@ var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_tem
168
168
  return '100%';
169
169
  }
170
170
  }, function (props) {
171
- if (props.playerType === 'qc') {
171
+ if (props.isFullscreen && props.playerType === 'qc') {
172
+ return 'calc(38.1% - 70px)';
173
+ } else if (props.playerType === 'qc') {
172
174
  return 'calc(36.33% - 70px)';
173
175
  } else {
174
176
  return '36.33%';
@@ -208,6 +210,42 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
208
210
  onRightMenuVisible(false);
209
211
  }
210
212
  });
213
+ // handleFullScreenChange() {
214
+ // this.actions.handleFullscreenChange(fullscreen.isFullscreen);
215
+ // }
216
+ _defineProperty(_this, "handleFullScreenChange", function () {
217
+ var onRightMenuVisible = _this.props.onRightMenuVisible;
218
+ var rightSectionRef = _this._rightSectionRef;
219
+ var playerHeader = (0, _reactDom.findDOMNode)(_this._playerHeader);
220
+ var headerHeight = playerHeader ? playerHeader.offsetHeight : 60;
221
+ var totalHeight = window.innerHeight;
222
+ var newHeight;
223
+ var isFS = _fullscreen["default"].isFullscreen;
224
+ _this.actions.handleFullscreenChange(isFS);
225
+ if (isFS) {
226
+ rightSectionRef.style.position = 'relative';
227
+ newHeight = totalHeight - headerHeight;
228
+ rightSectionRef.style.top = "".concat(headerHeight, "px");
229
+ rightSectionRef.style.height = "".concat(newHeight, "px");
230
+ }
231
+ // If exited fullscreen
232
+ if (!isFS) {
233
+ // Hide right sidebar
234
+ var right = document.querySelector('.right-video-section');
235
+ if (right) {
236
+ right.style.removeProperty('transition');
237
+ right.style.removeProperty('display');
238
+ right.style.removeProperty('transform');
239
+ right.style.removeProperty('opacity');
240
+ right.style.removeProperty('right');
241
+ }
242
+
243
+ // Reset UI state in parent
244
+ if (onRightMenuVisible) {
245
+ onRightMenuVisible(true);
246
+ }
247
+ }
248
+ });
211
249
  _this.controlsHideTimer = null;
212
250
  _this.meterHeight = 40;
213
251
  _this.video = null; // the Video component
@@ -851,11 +889,6 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
851
889
  }
852
890
  // this.video.handleResize();
853
891
  }
854
- }, {
855
- key: "handleFullScreenChange",
856
- value: function handleFullScreenChange() {
857
- this.actions.handleFullscreenChange(_fullscreen["default"].isFullscreen);
858
- }
859
892
  }, {
860
893
  key: "handleStateChange",
861
894
  value: function handleStateChange(state, prevState) {
@@ -880,7 +913,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
880
913
  }, {
881
914
  key: "render",
882
915
  value: function render() {
883
- var _this5 = this;
916
+ var _this5 = this,
917
+ _props$player,
918
+ _props$player2;
884
919
  var _this$manager$getStat4 = this.manager.getState(),
885
920
  player = _this$manager$getStat4.player;
886
921
  var props = _objectSpread(_objectSpread({}, this.props), {}, {
@@ -906,13 +941,14 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
906
941
  onBlur: this.handleBlur,
907
942
  tabIndex: "-1"
908
943
  }, /*#__PURE__*/_react["default"].createElement(PlayerContainer, _extends({
909
- className: "player-container",
944
+ className: "player-container ".concat(isFullscreen ? 'fullscreen-left-only' : ''),
910
945
  ref: function ref(playerContainer) {
911
946
  _this5._playerContainer = playerContainer;
912
947
  }
913
948
  }, props, {
914
949
  hasRightSection: !!rightSection,
915
- isRightMenuVisible: isRightMenuVisible
950
+ isRightMenuVisible: isRightMenuVisible,
951
+ isFullscreen: (_props$player = props.player) === null || _props$player === void 0 ? void 0 : _props$player.isFullscreen
916
952
  }), /*#__PURE__*/_react["default"].createElement("div", {
917
953
  className: "left-video-section",
918
954
  ref: function ref(leftSectionRef) {
@@ -931,7 +967,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
931
967
  active: true
932
968
  }, /*#__PURE__*/_react["default"].createElement(_AudioMeter["default"], {
933
969
  player: props.player,
934
- height: this.meterHeight
970
+ height: this.meterHeight,
971
+ isFullscreen: (_props$player2 = props.player) === null || _props$player2 === void 0 ? void 0 : _props$player2.isFullscreen
935
972
  }))), rightSection ? /*#__PURE__*/_react["default"].createElement("div", {
936
973
  className: "right-video-section",
937
974
  ref: function ref(rightSectionRef) {
package/components/control-bar/ControlBar.js CHANGED
@@ -133,6 +133,12 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
133
133
  order: 7
134
134
  })),
135
135
  /*#__PURE__*/
136
+ //Added to show camera button on fullscreen too
137
+ _react["default"].createElement(_CameraButton["default"], {
138
+ order: 8,
139
+ playerType: playerType
140
+ }),
141
+ /*#__PURE__*/
136
142
  // <SubtitleLanguagesMenuButton
137
143
  // {...this.props}
138
144
  // key="subtitle-menu-button"
@@ -147,10 +153,10 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
147
153
  order: 7
148
154
  })), /*#__PURE__*/_react["default"].createElement(_SettingsMenuButton["default"], _extends({}, this.props, {
149
155
  key: "settings-menu-button",
150
- order: 8
156
+ order: 9
151
157
  })), /*#__PURE__*/_react["default"].createElement(_FullscreenToggle["default"], _extends({}, this.props, {
152
158
  key: "fullscreen-toggle",
153
- order: 9,
159
+ order: 10,
154
160
  style: {
155
161
  marginRight: '10px'
156
162
  }
package/components/progress-bar/RenderCommentMarkers.js CHANGED
@@ -23,36 +23,36 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
23
23
  TIMELINE MAIN WRAPPER
24
24
  ---------------------------------------------------------- */
25
25
  var MarkerTimeline = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 11px;\n"])));
26
-
27
26
  /* ----------------------------------------------------------
28
- MARKER DOT
27
+ Marker Dot
29
28
  ---------------------------------------------------------- */
30
- var MarkerDot = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -6px;\n transform: translateX(-50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #47d2c7;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #0a0f18;\n font-weight: 600;\n font-size: 10px;\n cursor: pointer;\n z-index: ", ";\n pointer-events: auto;\n\n /* invisible hit-box (prevents overlap hover loss) */\n &::before {\n content: \"\";\n position: absolute;\n width: 32px;\n height: 32px;\n top: -6px;\n left: -6px;\n }\n\n &:hover {\n background: #3bbfb6;\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: -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) {
31
30
  return p.isHovered ? 99999 : 9000;
31
+ }, function (p) {
32
+ return p.showLine ? 1 : 0;
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 ";
32
35
  });
33
36
 
34
37
  /* ----------------------------------------------------------
35
38
  END MARKER DOT
36
39
  ---------------------------------------------------------- */
37
- var EndMarkerDot = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -6px;\n transform: translateX(-50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #2ee8dd;\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: 10px;\n height: 10px;\n background: white;\n border-radius: 50%;\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: -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"])));
38
41
 
39
42
  /* ----------------------------------------------------------
40
43
  SEGMENT LINE
41
44
  ---------------------------------------------------------- */
42
- var MarkerLine = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: 4px;\n height: 3px;\n background: #47d2c7;\n border-radius: 2px;\n opacity: 0;\n transition: opacity 0.15s ease-out;\n"])));
45
+ var MarkerLine = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: 4px;\n height: 1px;\n background: #47d2c7;\n border-radius: 1px;\n opacity: 0;\n transition: opacity 0.15s ease-out;\n"])));
43
46
 
44
47
  /* ----------------------------------------------------------
45
48
  HOVER BOX
46
49
  ---------------------------------------------------------- */
47
- var HoverBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: 30px;\n background: #303f51;\n backdrop-filter: blur(12px);\n border-radius: 10px;\n 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: 150px;\n max-width: 240px;\n max-height: 400px;\n"])), function (p) {
48
- return p.commentLength > 1 ? "0px 9px 8px 4px" : "10px 9px 8px 4px";
49
- });
50
- var HoverHeader = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: calc(100% + 18px);\n position: relative;\n left: -9px;\n background: #3e6673;\n color: #46d7ff;\n font-size: 12px;\n font-weight: 700;\n padding: 10px 12px;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n margin-bottom: 8px;\n"])));
51
- var HoverComment = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n padding: 10px 0;\n position: relative;\n border-radius: 5px;\n transition: background 0.15s ease, transform 0.15s ease;\n &:hover {\n background: rgba(255,255,255,0.08);\n transform: translateX(2px);\n }\n &:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: -9px;\n width: calc(100% + 18px);\n height: 1px;\n background: rgba(255,255,255,0.12);\n }\n"])));
52
- var HoverName = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n font-size: 13px;\n font-weight: 700;\n color: #afb2ba;\n margin-bottom: 8px;\n"])));
53
- var HoverTime = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n font-size: 11px;\n color: #afb2ba;\n margin-bottom: 5px;\n"])));
54
- var HoverText = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n font-size: 14px;\n color: #fff;\n line-height: 21px;\n overflow: hidden;\n"])));
55
-
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"])));
56
56
  /* ----------------------------------------------------------
57
57
  UTILITIES (FIXED)
58
58
  ---------------------------------------------------------- */
@@ -99,7 +99,7 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
99
99
  actions = _ref.actions,
100
100
  player = _ref.player,
101
101
  frameRate = _ref.frameRate;
102
- if (!["snp_edit", "pgm_edit"].includes(playerType)) return null;
102
+ if (!['snp_edit', 'pgm_edit'].includes(playerType)) return null;
103
103
  var _useState = (0, _react.useState)(null),
104
104
  _useState2 = _slicedToArray(_useState, 2),
105
105
  hovered = _useState2[0],
@@ -110,10 +110,17 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
110
110
  setHoverBoxHold = _useState4[1];
111
111
  var containerRef = (0, _react.useRef)(null);
112
112
  var hideTimer = (0, _react.useRef)(null);
113
- var startHideTimer = function startHideTimer() {
113
+ // const isLineVisible = (time) => hovered === time || (hoverBoxHold && hovered === time);
114
+
115
+ var handleMouseEnter = function handleMouseEnter(time) {
116
+ clearTimeout(hideTimer.current);
117
+ setHovered(time);
118
+ setHoverBoxHold(true);
119
+ };
120
+ var handleMouseLeave = function handleMouseLeave() {
121
+ setHoverBoxHold(false);
114
122
  clearTimeout(hideTimer.current);
115
123
  hideTimer.current = setTimeout(function () {
116
- setHoverBoxHold(false);
117
124
  setHovered(null);
118
125
  }, 1500);
119
126
  };
@@ -131,15 +138,16 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
131
138
  var _ref3 = _slicedToArray(_ref2, 2),
132
139
  time = _ref3[0],
133
140
  comments = _ref3[1];
141
+ console.log('comments', comments);
134
142
  var start = comments[0].value.in_time;
135
143
  var end = comments[0].value.out_time;
136
144
  var startPct = getMarkerPercent(start, duration, zoom);
137
145
  var endPct = end ? getMarkerPercent(end, duration, zoom) : null;
138
146
  var safeStart = getSafeLeftPx(startPct, containerWidth);
139
147
  var safeEnd = endPct !== null ? getSafeLeftPx(endPct, containerWidth) : null;
140
- var initials = ((_comments$ = comments[0]) === null || _comments$ === void 0 || (_comments$ = _comments$.value) === null || _comments$ === void 0 || (_comments$ = _comments$.created_by) === null || _comments$ === void 0 || (_comments$ = _comments$.name) === null || _comments$ === void 0 || (_comments$ = _comments$.split(" ")) === null || _comments$ === void 0 || (_comments$ = _comments$.map(function (n) {
148
+ var initials = ((_comments$ = comments[0]) === null || _comments$ === void 0 || (_comments$ = _comments$.value) === null || _comments$ === void 0 || (_comments$ = _comments$.created_by) === null || _comments$ === void 0 || (_comments$ = _comments$.name) === null || _comments$ === void 0 || (_comments$ = _comments$.split(' ')) === null || _comments$ === void 0 || (_comments$ = _comments$.map(function (n) {
141
149
  return n[0];
142
- })) === null || _comments$ === void 0 || (_comments$ = _comments$.join("")) === null || _comments$ === void 0 || (_comments$ = _comments$.slice(0, 2)) === null || _comments$ === void 0 ? void 0 : _comments$.toUpperCase()) || "CM";
150
+ })) === null || _comments$ === void 0 || (_comments$ = _comments$.join('')) === null || _comments$ === void 0 || (_comments$ = _comments$.slice(0, 2)) === null || _comments$ === void 0 ? void 0 : _comments$.toUpperCase()) || 'CM';
143
151
  var label = comments.length > 1 ? comments.length : initials;
144
152
  var isHovered = hovered === time;
145
153
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
@@ -154,19 +162,22 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
154
162
  style: {
155
163
  left: safeStart
156
164
  },
157
- isHovered: isHovered,
165
+ isHovered: isHovered
166
+ // showLine={isLineVisible(time)}
167
+ ,
168
+ multi: comments.length > 1,
158
169
  onMouseEnter: function onMouseEnter() {
159
- return setHovered(time);
160
- },
161
- onMouseLeave: function onMouseLeave() {
162
- return !hoverBoxHold && startHideTimer();
170
+ return handleMouseEnter(time);
163
171
  },
172
+ onMouseLeave: handleMouseLeave,
164
173
  onClick: function onClick(e) {
165
174
  e.stopPropagation();
166
175
  setHoverBoxHold(true);
167
176
  setHovered(time);
168
177
  }
169
- }, label), endPct !== null && /*#__PURE__*/_react["default"].createElement(EndMarkerDot, {
178
+ }, comments.length > 1 ? /*#__PURE__*/_react["default"].createElement("div", {
179
+ className: "inner"
180
+ }, comments.length) : label), endPct !== null && /*#__PURE__*/_react["default"].createElement(EndMarkerDot, {
170
181
  style: {
171
182
  left: safeEnd,
172
183
  opacity: isHovered ? 1 : 0
@@ -181,16 +192,12 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
181
192
  }
182
193
  },
183
194
  onMouseEnter: function onMouseEnter() {
184
- clearTimeout(hideTimer.current);
185
- setHoverBoxHold(true);
195
+ return clearTimeout(hideTimer.current);
186
196
  },
187
- onMouseLeave: function onMouseLeave() {
188
- setHoverBoxHold(false);
189
- startHideTimer();
190
- }
197
+ onMouseLeave: handleMouseLeave
191
198
  }, comments.length > 1 && /*#__PURE__*/_react["default"].createElement(HoverHeader, null, comments.length, " COMMENTS"), comments.map(function (c) {
192
- var _c$value$created_by;
193
- var selectedFormat = localStorage.getItem("timeCodeFormat");
199
+ var _c$value$created_by, _c$value, _c$value2, _c$value3, _c$value4, _c$value5;
200
+ var selectedFormat = localStorage.getItem('timeCodeFormat');
194
201
  return /*#__PURE__*/_react["default"].createElement(HoverComment, {
195
202
  key: c.id,
196
203
  onClick: function onClick(e) {
@@ -203,11 +210,16 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
203
210
  timecode: c.value.in_timecode,
204
211
  selectedTimecodeFormat: selectedFormat,
205
212
  fps: frameRate
206
- }), c.value.out_timecode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, " - ", /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
213
+ }), c.value.out_timecode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ' - ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
207
214
  timecode: c.value.out_timecode,
208
215
  selectedTimecodeFormat: selectedFormat,
209
216
  fps: frameRate
210
- }))), /*#__PURE__*/_react["default"].createElement(HoverText, null, c.value.remark || c.value.sub_title || c.value.title || "—"));
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, {
218
+ name: "annotate-icon",
219
+ width: 30,
220
+ height: 30,
221
+ color: "#47d2c7"
222
+ })) : null));
211
223
  })));
212
224
  }));
213
225
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.0.90",
3
+ "version": "4.0.92",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {