@desynova-digital/player 4.0.91 → 4.0.93

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 +6 -2
  2. package/components/Player.js +2 -2
  3. package/components/control-bar/ControlBar.js +8 -2
  4. package/components/control-bar/FullscreenToggle.js +3 -2
  5. package/components/progress-bar/RenderCommentMarkers.js +47 -35
  6. package/package.json +1 -1
package/actions/player.js CHANGED
@@ -223,7 +223,7 @@ function toggleFullscreen(player) {
223
223
  if (_fullscreen["default"].isFullscreen) {
224
224
  // exit fullscreen
225
225
  _fullscreen["default"].exit();
226
-
226
+ elem.classList.remove('fullscreen-left-only');
227
227
  // restore toast to its original parent (or fallback)
228
228
  if (toastRoot) {
229
229
  var parentToRestore = toastOriginalParent || fallbackParent;
@@ -247,6 +247,7 @@ function toggleFullscreen(player) {
247
247
  // elem.appendChild(toastRoot);
248
248
  safeAppend(elem, toastRoot);
249
249
  }
250
+ elem.classList.add('fullscreen-left-only');
250
251
  _fullscreen["default"].request(elem);
251
252
  }
252
253
  return {
@@ -300,15 +301,17 @@ function toggleFullscreen(player) {
300
301
  // }
301
302
 
302
303
  function toggleRightBar(player, showRightMenu) {
304
+ var root = document.querySelector('.player-container');
303
305
  var right = document.querySelector('.right-video-section');
304
306
  var sidebarWidth = right.offsetWidth; // actual width of sidebar
305
307
  // Already fullscreen → toggle UI only (NO EXIT)
306
308
  if (_fullscreen["default"].isFullscreen) {
307
309
  right.style.transition = 'transform 0.4s ease, opacity 0.3s ease';
308
310
  if (showRightMenu) {
311
+ root.classList.add('rightbar-visible');
309
312
  // ✅ Coming from right to left (enter animation)
310
313
  right.style.display = 'block';
311
- right.style.right = "-".concat(sidebarWidth, "px"); // start off-screen
314
+ right.style.right = "-".concat(sidebarWidth, "px"); // start off-screen
312
315
  right.style.opacity = '0';
313
316
  // Small delay to allow the browser to register initial position
314
317
  requestAnimationFrame(function () {
@@ -316,6 +319,7 @@ function toggleRightBar(player, showRightMenu) {
316
319
  right.style.opacity = '1';
317
320
  });
318
321
  } else {
322
+ root.classList.remove('rightbar-visible');
319
323
  // ✅ Going left to right (exit animation)
320
324
  right.style.right = "-".concat(sidebarWidth, "px"); // start off-screen
321
325
  right.style.opacity = '0';
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"])), 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
  }
@@ -941,7 +941,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
941
941
  onBlur: this.handleBlur,
942
942
  tabIndex: "-1"
943
943
  }, /*#__PURE__*/_react["default"].createElement(PlayerContainer, _extends({
944
- className: "player-container",
944
+ className: "player-container ".concat(isFullscreen ? 'fullscreen-left-only' : ''),
945
945
  ref: function ref(playerContainer) {
946
946
  _this5._playerContainer = playerContainer;
947
947
  }
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/control-bar/FullscreenToggle.js CHANGED
@@ -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
- onRightMenuVisible(true);
60
- actions.toggleRightBar(player, true);
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",
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.91",
3
+ "version": "4.0.93",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {