@desynova-digital/player 3.9.11 → 3.9.12

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 (2) hide show
  1. package/components/PointersBar.js +38 -16
  2. package/package.json +1 -1
package/components/PointersBar.js CHANGED
@@ -50,8 +50,10 @@ var defaultProps = {
50
50
  var PointersContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n"])));
51
51
  var PointerBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 20px;\n position: relative;\n border-top: 1px solid #333333;\n border-bottom: 1px solid #333333;\n .empty-pointers-msg {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n p {\n font-family: SFUIText-Medium;\n font-size: 11px;\n color: #aaaaaa;\n }\n ", " {\n margin: 0 5px;\n }\n }\n"])), _components.Icon.Element);
52
52
  var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n min-width: 100px;\n max-width: 100px;\n position: relative;\n height: 100%;\n .tags-block {\n height: 20px;\n font-family: SFUIText-Medium;\n font-size: 10px;\n color: #ffffff;\n text-transform: uppercase;\n border-top: 1px solid #333333;\n border-bottom: 1px solid #333333;\n p {\n line-height: 18px;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])));
53
- var ToolTipStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 2;\n height: 18px;\n transition: left .1s ease-in-out;\n\n .tooltip-container{\n border-radius: 0.25rem;\n padding: 5px;\n width: fit-content;\n background: #FFFFFF;;\n color: #666666;\n \n h4 {\n white-space: nowrap;\n font-size: 12px;\n }\n \n &:after {\n content: '';\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid white;\n ", "\n left: 50%;\n transform: translateX(-50%);\n }\n }\n"])), function (props) {
54
- return props.multiline ? "bottom: -21px;" : "bottom: -9px;";
53
+ var ToolTipStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 2;\n height: 18px;\n transition: left 0.1s ease-in-out;\n\n .tooltip-container {\n border-radius: 0.25rem;\n padding: 5px;\n width: fit-content;\n background: #ffffff;\n color: #666666;\n\n h4 {\n white-space: nowrap;\n font-size: 12px;\n }\n\n &:after {\n content: '';\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid white;\n ", "\n left: ", ";\n transform: translateX(-50%);\n }\n }\n"])), function (props) {
54
+ return props.multiline ? 'bottom: -21px;' : 'bottom: -9px;';
55
+ }, function (props) {
56
+ return props.tooltipPointer ? props.tooltipPointer + 'px' : '50%';
55
57
  });
56
58
  var PointersBar = /*#__PURE__*/function (_Component) {
57
59
  _inherits(PointersBar, _Component);
@@ -64,7 +66,8 @@ var PointersBar = /*#__PURE__*/function (_Component) {
64
66
  _this.state = {
65
67
  tooltip: {
66
68
  isVisible: false
67
- }
69
+ },
70
+ tooltipPointer: 0
68
71
  };
69
72
  _this._tooltipRef = /*#__PURE__*/_react["default"].createRef();
70
73
  _this.renderComp = 0;
@@ -117,19 +120,35 @@ var PointersBar = /*#__PURE__*/function (_Component) {
117
120
  value: function setTooltipData(e, title) {
118
121
  var _this2 = this;
119
122
  var tooltip = this.state.tooltip;
123
+ var tooltipPointer = 0;
120
124
  tooltip.isVisible = false;
121
125
  tooltip.text = title;
122
126
  tooltip.bottom = window.innerHeight - e.target.getBoundingClientRect().top; // e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
123
- tooltip.bottom = title.line1 ? tooltip.bottom + 22 : tooltip.bottom + 10;
124
- tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2;
127
+ tooltip.bottom = title.line1 && title.line2 ? tooltip.bottom + 22 : tooltip.bottom + 10;
128
+ tooltipPointer = tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2;
125
129
  this.renderComp = 1;
126
130
  this.setState(_objectSpread({}, tooltip), function () {
127
131
  var tooltip = _this2.state.tooltip;
128
- var tooltipRefOffset = _this2._tooltipRef.current && _this2._tooltipRef.current.offsetWidth ? _this2._tooltipRef.current.offsetWidth / 2 : 0;
132
+ var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
133
+ var tooltipRenderedWidth = _this2._tooltipRef.current && _this2._tooltipRef.current.offsetWidth ? _this2._tooltipRef.current.offsetWidth / 2 : 0;
134
+ var totalWidthOfTooltipIncludingLeft = tooltip.left + tooltipRenderedWidth;
135
+ if (totalWidthOfTooltipIncludingLeft > viewportWidth) {
136
+ var extraSpacing = totalWidthOfTooltipIncludingLeft - viewportWidth;
137
+ tooltip.left = tooltip.left - tooltipRenderedWidth - extraSpacing - 10; //5 for wxtra buffer spacing on right
138
+ tooltipPointer = tooltipRenderedWidth + extraSpacing + 10;
139
+ } else {
140
+ tooltip.left = tooltip.left - tooltipRenderedWidth;
141
+ if (tooltip.left < 0) {
142
+ tooltipPointer = tooltipPointer;
143
+ } else {
144
+ tooltipPointer = 0;
145
+ }
146
+ }
129
147
  tooltip.isVisible = true;
130
- tooltip.left = tooltip.left - tooltipRefOffset;
131
148
  _this2.renderComp = 1;
132
- _this2.setState(_objectSpread({}, tooltip));
149
+ _this2.setState(_objectSpread(_objectSpread({}, tooltip), {}, {
150
+ tooltipPointer: tooltipPointer
151
+ }));
133
152
  });
134
153
  }
135
154
  }, {
@@ -149,11 +168,13 @@ var PointersBar = /*#__PURE__*/function (_Component) {
149
168
  value: function render() {
150
169
  var _this3 = this;
151
170
  var markers = this.props.markers;
152
- var _this$state$tooltip = this.state.tooltip,
171
+ var _this$state = this.state,
172
+ _this$state$tooltip = _this$state.tooltip,
153
173
  isVisible = _this$state$tooltip.isVisible,
154
174
  text = _this$state$tooltip.text,
155
175
  left = _this$state$tooltip.left,
156
- bottom = _this$state$tooltip.bottom;
176
+ bottom = _this$state$tooltip.bottom,
177
+ tooltipPointer = _this$state.tooltipPointer;
157
178
  var self = this;
158
179
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, markers && markers.length ? markers.map(function (marker_obj) {
159
180
  return /*#__PURE__*/_react["default"].createElement(PointersContainer, {
@@ -166,6 +187,7 @@ var PointersBar = /*#__PURE__*/function (_Component) {
166
187
  key: "".concat(marker_obj.name, "-key-tags-block")
167
188
  }, marker_obj && marker_obj.values && marker_obj.values.length ? marker_obj.values.map(function (marker, index) {
168
189
  var style = self.getPointerStyle(marker.start_time, marker.end_time, index);
190
+ // console.log('styless', style);
169
191
  return /*#__PURE__*/_react["default"].createElement("div", {
170
192
  className: "marker-blocks",
171
193
  onClick: function onClick(e) {
@@ -205,18 +227,18 @@ var PointersBar = /*#__PURE__*/function (_Component) {
205
227
  className: "tags-block"
206
228
  }, /*#__PURE__*/_react["default"].createElement("p", null))));
207
229
  }) : null, text && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
208
- multiline: !!text.line1,
230
+ multiline: !!text.line1 && text.line1.length && text.line2,
209
231
  ref: this._tooltipRef,
232
+ left: left,
233
+ tooltipPointer: tooltipPointer,
210
234
  style: {
211
- left: left || 0,
235
+ left: left < 1 ? 1 : left,
212
236
  bottom: bottom || 0,
213
- visibility: isVisible ? "visible" : "hidden"
237
+ visibility: isVisible ? 'visible' : 'hidden'
214
238
  }
215
239
  }, /*#__PURE__*/_react["default"].createElement("div", {
216
240
  className: "tooltip-container"
217
- }, text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line1), text.line2 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line2), !text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text))), /*#__PURE__*/_react["default"].createElement("div", {
218
- id: "dummy-container"
219
- }));
241
+ }, text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line1), text.line2 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line2), !text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text))));
220
242
  }
221
243
  }]);
222
244
  return PointersBar;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "3.9.11",
3
+ "version": "3.9.12",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {