@desynova-digital/player 4.0.18 → 4.0.20

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 (3) hide show
  1. package/components/PointersBar.js +6 -2
  2. package/components/progress-bar/ProgressControl.js +23 -11
  3. package/package.json +3 -3
package/components/PointersBar.js CHANGED
@@ -48,11 +48,14 @@ var propTypes = {
48
48
  var defaultProps = {
49
49
  player: {}
50
50
  };
51
- var ScrollableDiv = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n max-height: 65px; /* Set the maximum height */\n overflow-y: scroll; /* Enable vertical scrolling */\n\n /* Optional: Hide the scrollbar */\n &::-webkit-scrollbar {\n width: 0; /* For Webkit browsers */\n }\n scrollbar-width: none; /* For Firefox */\n -ms-overflow-style: none; /* For IE 10+ */\n"])));
51
+ var ScrollableDiv = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n max-height: 65px; /* Set the maximum height */\n overflow-y: ", ";\n\n /* Optional: Hide the scrollbar */\n &::-webkit-scrollbar {\n width: 0; /* For Webkit browsers */\n }\n scrollbar-width: none; /* For Firefox */\n -ms-overflow-style: none; /* For IE 10+ */\n"])), function (_ref) {
52
+ var markers = _ref.markers;
53
+ return markers.length > 3 ? 'scroll' : 'visible';
54
+ });
52
55
  var PointersContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n width: ", ";\n"])), function (props) {
53
56
  return props.width || '100%';
54
57
  });
55
- var PointerBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n height: 20px;\n position: relative;\n border-top: 2px solid #333333;\n div:last-child {\n border-bottom: none; // Remove border-bottom for the last div inside PointerBlock\n }\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);
58
+ var PointerBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n height: 20px;\n position: relative;\n border-top: 1px solid #333333;\n border-bottom: 1px solid #333333;\n div:last-child {\n border-bottom: none; // Remove border-bottom for the last div inside PointerBlock\n }\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);
56
59
  var MarkerTagsBlock = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _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"])));
57
60
  var ToolTipStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _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 i,em{\n font-style: italic; \n }\n\n strong{\n font-weight: bold; \n }\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) {
58
61
  return props.multiline ? 'bottom: -21px;' : 'bottom: -9px;';
@@ -212,6 +215,7 @@ var PointersBar = exports["default"] = /*#__PURE__*/function (_Component) {
212
215
  width = _this$state.width;
213
216
  var self = this;
214
217
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ScrollableDiv, {
218
+ markers: markers,
215
219
  onScroll: function onScroll(e) {
216
220
  var scrollTop = e.target.scrollTop;
217
221
  _this3.props.onScroll(scrollTop);
package/components/progress-bar/ProgressControl.js CHANGED
@@ -40,26 +40,29 @@ var propTypes = {
40
40
  theme: _propTypes.PropTypes.string
41
41
  };
42
42
  var defaultProps = {};
43
- var ProgressControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: ", ";\n position: relative;\n overflow: ", ";\n padding-top: 0px;\n background: #000000;\n background: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 250ms ease-in-out;\n bottom: ", ";\n\n .hide-scrollbar {\n /* Hide scrollbar for Webkit-based browsers (Chrome, Safari, Edge) */\n scrollbar-width: none; /* Hides scrollbar in Firefox */\n -ms-overflow-style: none; /* Hides scrollbar in IE 10+ */\n }\n \n .hide-scrollbar::-webkit-scrollbar {\n width: 0; /* Removes the scrollbar for Webkit browsers */\n }\n \n .tags-block {\n position: relative;\n height: 20px;\n width: 100px;\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 top: 40px;\n p {\n line-height: 18px;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n .tags-block:last-child {\n border-bottom: none;\n }\n"])), function (props) {
43
+ var ProgressControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: ", ";\n position: relative;\n overflow: ", ";\n padding-top: 0px;\n background: #000000;\n background: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 250ms ease-in-out;\n bottom: ", ";\n\n .hide-scrollbar {\n /* Hide scrollbar for Webkit-based browsers (Chrome, Safari, Edge) */\n scrollbar-width: none; /* Hides scrollbar in Firefox */\n -ms-overflow-style: none; /* Hides scrollbar in IE 10+ */\n }\n\n .hide-scrollbar::-webkit-scrollbar {\n width: 0; /* Removes the scrollbar for Webkit browsers */\n }\n\n .tags-block {\n position: relative;\n height: 20px;\n width: 100px;\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 top: ", ";\n p {\n line-height: 18px;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n .tags-block:last-child {\n // border-bottom: none;\n }\n"])), function (props) {
44
44
  return props.controlType === 'advanced' && !props.isFullscreen ? '' : '4px';
45
45
  }, function (props) {
46
46
  return props.controlType === 'advanced' && !props.isFullscreen ? 'none' : 'visible';
47
47
  }, _colors["default"].common.base.black, function (props) {
48
48
  return props.player === 'panel' && props.active ? '50px' : 'initial';
49
+ }, function (_ref) {
50
+ var markers = _ref.markers;
51
+ return markers.length > 3 ? '40px' : '23px';
49
52
  });
50
- var SeekControlBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n position: relative;\n cursor: pointer;\n overflow: hidden;\n z-index: ", ";\n .timeline-content {\n white-space: nowrap;\n }\n"])), function (props) {
53
+ var SeekControlBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n position: relative;\n cursor: pointer;\n overflow: hidden;\n z-index: ", ";\n .timeline-content {\n overflow-x: auto;\n white-space: nowrap;\n }\n .hide-scrollbar {\n /* Hide scrollbar for Webkit-based browsers (Chrome, Safari, Edge) */\n scrollbar-width: none; /* Hides scrollbar in Firefox */\n -ms-overflow-style: none; /* Hides scrollbar in IE 10+ */\n }\n\n .hide-scrollbar::-webkit-scrollbar {\n width: 0; /* Removes the scrollbar for Webkit browsers */\n }\n"])), function (props) {
51
54
  return props.controlType === 'advanced' && !props.isFullscreen ? '2' : '1';
52
55
  });
53
56
  var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n min-width: 100px;\n max-width: 100px;\n position: relative;\n height: 60px;\n .empty-block {\n height: calc(100% - 20px);\n }\n .tags-block {\n height: 20px;\n font-family: SFUIText-Medium;\n font-size: 12px;\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-left: 10px;\n }\n }\n"])));
54
- var ScrollStyledDiv = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n max-height: 101px;\n overflow-y: ", ";\n overflow-x: ", ";\n margin-top: ", ";\n"])), function (_ref) {
55
- var markers = _ref.markers;
56
- return markers.length > 3 ? 'hidden' : 'visible';
57
- }, function (_ref2) {
57
+ var ScrollStyledDiv = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n max-height: 101px;\n position: relative;\n top: ", ";\n overflow-y: ", ";\n overflow-x: ", ";\n"])), function (_ref2) {
58
58
  var markers = _ref2.markers;
59
- return markers.length > 3 ? 'hidden' : 'visible';
59
+ return markers.length > 3 ? '18px' : '17px';
60
60
  }, function (_ref3) {
61
61
  var markers = _ref3.markers;
62
- return markers.length > 3 ? '37px' : '1px';
62
+ return markers.length > 3 ? 'hidden' : 'visible';
63
+ }, function (_ref4) {
64
+ var markers = _ref4.markers;
65
+ return markers.length > 3 ? 'hidden' : 'visible';
63
66
  });
64
67
  var CoverDiv = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background-color: black;\n z-index: 2;\n position: absolute;\n height: 60px;\n width: 89px;\n left: 0px;\n top: 20px;\n"])));
65
68
  var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
@@ -156,6 +159,7 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
156
159
  player: playerType,
157
160
  active: userActivity,
158
161
  isFullscreen: isFullscreen,
162
+ markers: markers,
159
163
  ref: function ref(c) {
160
164
  _this2.progressControlBlock = c;
161
165
  }
@@ -176,23 +180,31 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
176
180
  _this2.seekControlBar = c;
177
181
  },
178
182
  id: "seekbar-control-block",
183
+ zoom: stateZoom && parseFloat(stateZoom.toFixed(1)),
179
184
  onMouseMove: this.handleMouseMoveThrottle
180
185
  }, /*#__PURE__*/_react["default"].createElement("div", {
181
- className: "timeline-content"
186
+ className: "timeline-content hide-scrollbar"
182
187
  }, /*#__PURE__*/_react["default"].createElement(_SeekBar["default"], _extends({
183
188
  mouseTime: mouseTime,
184
189
  ref: function ref(c) {
185
190
  _this2.seekBar = c;
186
191
  },
187
192
  zoom: stateZoom && parseFloat(stateZoom.toFixed(1))
188
- }, this.props)), /*#__PURE__*/_react["default"].createElement(_PointersBar["default"], _extends({
193
+ }, this.props)), /*#__PURE__*/_react["default"].createElement("div", {
194
+ style: {
195
+ maxHeight: '65px',
196
+ scrollbarWidth: 'none',
197
+ msOverflowStyle: 'none',
198
+ overflowY: markers.length > 3 ? 'scroll' : 'visible'
199
+ }
200
+ }, /*#__PURE__*/_react["default"].createElement(_PointersBar["default"], _extends({
189
201
  onScroll: this.handleChildScroll,
190
202
  theme: theme,
191
203
  ref: function ref(c) {
192
204
  _this2.pointersBar = c;
193
205
  },
194
206
  zoom: stateZoom && parseFloat(stateZoom.toFixed(1))
195
- }, this.props)))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
207
+ }, this.props))))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
196
208
  className: "empty-block"
197
209
  })) : null));
198
210
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.0.18",
3
+ "version": "4.0.20",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -53,8 +53,8 @@
53
53
  "webpack-dev-server": "^3.11.0"
54
54
  },
55
55
  "dependencies": {
56
- "@desynova-digital/components": "^9.0.13",
57
- "@desynova-digital/tokens": "^9.0.13",
56
+ "@desynova-digital/components": "^9.1.3",
57
+ "@desynova-digital/tokens": "^9.1.3",
58
58
  "hls.js": "1.4.12",
59
59
  "babel-core": "7.0.0-bridge.0",
60
60
  "latest-version": "^4.0.0",