@desynova-digital/player 4.0.45 → 4.0.47

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/progress-bar/Timeline.js +31 -24
  2. package/package.json +1 -1
package/components/progress-bar/Timeline.js CHANGED
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports["default"] = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
- var _reactDom = require("react-dom");
10
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
10
  var _propTypes = require("prop-types");
12
11
  var _components = require("@desynova-digital/components");
@@ -31,21 +30,23 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
31
30
  var propTypes = {
32
31
  player: _propTypes.PropTypes.instanceOf(Object),
33
32
  initialTime: _propTypes.PropTypes.number,
34
- frameRate: _propTypes.PropTypes.number
33
+ frameRate: _propTypes.PropTypes.number,
34
+ zoom: _propTypes.PropTypes.number,
35
+ scrollSeekBar: _propTypes.PropTypes.func
35
36
  };
36
- var TimelineBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: stretch;\n width: ", ";\n height: 46px;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n\n .player-time {\n flex: 0 0 auto;\n width: 100px;\n height: 100%;\n position: relative;\n user-select: none;\n\n &:first-child p {\n left: 0;\n }\n\n &:last-child {\n flex-grow: 1;\n ", " {\n display: none;\n }\n p {\n left: auto;\n right: 0;\n }\n }\n\n ", " {\n position: absolute;\n left: 0;\n bottom: 0;\n }\n\n p {\n position: absolute;\n font-size: 10px;\n font-family: SFUIText-Regular;\n color: #aaa;\n top: 10px;\n left: -28px;\n letter-spacing: 0.5px;\n }\n }\n"])), function (_ref) {
37
+ var TimelineBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: stretch;\n width: ", ";\n height: 46px;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n\n .player-time {\n position: absolute;\n transform: translateZ(0);\n height: 100%;\n user-select: none;\n\n ", " {\n position: absolute;\n left: 0;\n bottom: 0;\n }\n\n p {\n position: absolute;\n font-size: 10px;\n font-family: SFUIText-Regular;\n color: #aaa;\n top: 10px;\n left: -28px;\n letter-spacing: 0.5px;\n }\n &.first p.first-label {\n left: 0px;\n }\n\n &.last p.last-label {\n left: auto;\n right: 0px;\n }\n }\n"])), function (_ref) {
37
38
  var maxWidth = _ref.maxWidth;
38
39
  return maxWidth || '100%';
39
- }, _components.Icon.Element, _components.Icon.Element);
40
+ }, _components.Icon.Element);
40
41
  var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
41
- function Timeline(props, context) {
42
+ function Timeline(props) {
42
43
  var _this;
43
44
  _classCallCheck(this, Timeline);
44
- _this = _callSuper(this, Timeline, [props, context]);
45
+ _this = _callSuper(this, Timeline, [props]);
45
46
  _this.state = {
46
- timeArray: []
47
+ timeArray: [],
48
+ maxWidth: '100%'
47
49
  };
48
- _this.generateTimeline = _this.generateTimeline.bind(_this);
49
50
  return _this;
50
51
  }
51
52
  _inherits(Timeline, _Component);
@@ -59,8 +60,8 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
59
60
  key: "componentDidUpdate",
60
61
  value: function componentDidUpdate(prevProps) {
61
62
  var _this$props = this.props,
62
- scrollSeekBar = _this$props.scrollSeekBar,
63
- zoom = _this$props.zoom;
63
+ zoom = _this$props.zoom,
64
+ scrollSeekBar = _this$props.scrollSeekBar;
64
65
  if (prevProps.zoom !== zoom) {
65
66
  scrollSeekBar && scrollSeekBar();
66
67
  this.generateTimeline(zoom);
@@ -71,16 +72,14 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
71
72
  value: function generateTimeline(zoomFactor) {
72
73
  var player = this.props.player;
73
74
  var seekbar = document.getElementById('seekbar-control-block');
74
- if (!seekbar) return;
75
+ if (!seekbar || !(player !== null && player !== void 0 && player.duration) || isNaN(player.duration)) return;
75
76
  var baseBlockWidth = 100;
76
- var sliderWidth;
77
77
  var baseWidth = seekbar.clientWidth;
78
- sliderWidth = zoomFactor > 0 ? Math.round(baseWidth * zoomFactor * 20) : Math.round(baseWidth);
78
+ var sliderWidth = zoomFactor > 0 ? Math.round(baseWidth * zoomFactor * 20) : baseWidth;
79
79
  var noOfBlocks = Math.floor(sliderWidth / baseBlockWidth);
80
80
  var totalDuration = player.duration;
81
+ if (noOfBlocks <= 0 || totalDuration <= 0) return;
81
82
  var timeDistance = totalDuration / noOfBlocks;
82
-
83
- // 👇 Prevent dense tick lines
84
83
  var minSpacingPx = 90;
85
84
  var actualBlockSpacing = sliderWidth / noOfBlocks;
86
85
  var skipFactor = 1.08;
@@ -88,13 +87,18 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
88
87
  skipFactor = Math.ceil(minSpacingPx / actualBlockSpacing);
89
88
  }
90
89
  var timeArray = [];
90
+ var added = new Set();
91
91
  for (var i = 0; i <= noOfBlocks; i += skipFactor) {
92
- var timePoint = parseFloat((i * timeDistance).toFixed(2));
93
- timeArray.push(Math.min(timePoint, totalDuration));
92
+ var timePoint = i * timeDistance; // full precision
93
+ var clamped = Math.min(timePoint, totalDuration);
94
+ var rounded = Math.round(clamped * 1000) / 1000;
95
+ if (!added.has(rounded)) {
96
+ timeArray.push(rounded);
97
+ added.add(rounded);
98
+ }
94
99
  }
95
100
  this.setState({
96
101
  timeArray: timeArray,
97
- zoom: zoomFactor,
98
102
  maxWidth: "".concat(sliderWidth, "px")
99
103
  });
100
104
  }
@@ -115,17 +119,20 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
115
119
  ref: function ref(c) {
116
120
  _this2.timelineBlock = c;
117
121
  }
118
- }, timeArray.map(function (time) {
122
+ }, timeArray.map(function (time, index) {
119
123
  var formattedTime = (0, _utils.secondsToTime)(time, frameRate, initialTime);
120
- var leftPercent = time / player.duration * 100;
124
+ var leftPercents = time / player.duration * 100;
125
+ var isFirst = index === 0;
126
+ var isLast = index === timeArray.length - 1;
121
127
  return /*#__PURE__*/_react["default"].createElement("div", {
122
- className: "player-time",
128
+ className: "player-time ".concat(isFirst ? 'first' : '', " ").concat(isLast ? 'last' : ''),
123
129
  style: {
124
- position: 'absolute',
125
- left: "".concat(leftPercent, "%")
130
+ left: "".concat(leftPercents, "%")
126
131
  },
127
132
  key: time
128
- }, /*#__PURE__*/_react["default"].createElement("p", null, formattedTime), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
133
+ }, /*#__PURE__*/_react["default"].createElement("p", {
134
+ className: isFirst ? 'first-label' : isLast ? 'last-label' : undefined
135
+ }, formattedTime), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
129
136
  name: "timeline",
130
137
  stroke: "#aaa"
131
138
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.0.45",
3
+ "version": "4.0.47",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {