@desynova-digital/player 4.0.49 → 4.0.50

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 (9) hide show
  1. package/components/Menu.js +11 -7
  2. package/components/control-bar/ControlBar.js +11 -8
  3. package/components/marking-controls/MarkingControl.js +8 -5
  4. package/components/marking-controls/MarkingDuration.js +21 -4
  5. package/components/marking-controls/TimecodeFormatSelector.js +118 -0
  6. package/components/progress-bar/Timeline.js +8 -4
  7. package/components/time-controls/CurrentTimeDisplay.js +6 -5
  8. package/components/time-controls/DurationDisplay.js +10 -3
  9. package/package.json +3 -3
package/components/Menu.js CHANGED
@@ -18,12 +18,14 @@ var propTypes = {
18
18
  style: _propTypes.PropTypes.instanceOf(Object),
19
19
  active: _propTypes.PropTypes.bool,
20
20
  position: _propTypes.PropTypes.string,
21
- theme: _propTypes.PropTypes.string
21
+ theme: _propTypes.PropTypes.string,
22
+ iHeight: _propTypes.PropTypes.string,
23
+ iWidth: _propTypes.PropTypes.string
22
24
  };
23
25
  var defaultProps = {
24
26
  position: 'center'
25
27
  };
26
- var MenuContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 20px;\n position: relative;\n &:hover {\n .menu-popup {\n visibility: visible;\n opacity: 1;\n }\n }\n .menu-popup {\n visibility: hidden;\n opacity: 0;\n position: absolute;\n bottom: 20px;\n padding-bottom: 16px;\n z-index: 10;\n transition: all 350ms ease-in-out;\n &.right {\n left: -10px;\n &:after {\n left: 15px;\n }\n }\n &.center {\n left: 50%;\n transform: translateX(-50%);\n &:after {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n &.left {\n right: -10px;\n &:after {\n right: 15px;\n }\n }\n &.active {\n visibility: visible;\n opacity: 1;\n }\n &:after {\n content: '';\n border-left: 6px solid transparent;\n position: absolute;\n border-right: 6px solid transparent;\n border-top: 6px solid ", ";\n bottom: 10px;\n }\n .menu-list {\n border-radius: 10px;\n background: #fff;\n min-width: 175px;\n max-height: 500px;\n transition: all 250ms ease-in-out;\n overflow: auto;\n max-height: 400px;\n }\n }\n"])), function (props) {
28
+ var MenuContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 20px;\n position: relative;\n &:hover {\n .menu-popup {\n visibility: visible;\n opacity: 1;\n }\n }\n .menu-popup {\n visibility: hidden;\n opacity: 0;\n position: absolute;\n bottom: 20px;\n padding-bottom: 16px;\n z-index: 10;\n transition: all 350ms ease-in-out;\n &.right {\n left: -10px;\n &:after {\n left: 15px;\n }\n }\n &.center {\n left: 50%;\n transform: translateX(-50%);\n &:after {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n &.left {\n right: -10px;\n &:after {\n right: 15px;\n }\n }\n &.active {\n visibility: visible;\n opacity: 1;\n }\n &:after {\n content: '';\n border-left: 6px solid transparent;\n position: absolute;\n border-right: 6px solid transparent;\n border-top: 6px solid\n ", ";\n bottom: 10px;\n }\n .menu-list {\n border-radius: 10px;\n background: #fff;\n min-width: 175px;\n max-height: 500px;\n transition: all 250ms ease-in-out;\n overflow: auto;\n max-height: 400px;\n }\n }\n"])), function (props) {
27
29
  return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.borderColor) : 'rgb(0, 206, 198)';
28
30
  });
29
31
  var MenuIcon = (0, _styledComponents["default"])(_components.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: transparent;\n border: none;\n margin: 0px;\n &:hover,\n &:focus {\n background: transparent;\n }\n"])));
@@ -33,7 +35,9 @@ function Menu(_ref) {
33
35
  icon = _ref.icon,
34
36
  active = _ref.active,
35
37
  position = _ref.position,
36
- theme = _ref.theme;
38
+ theme = _ref.theme,
39
+ iHeight = _ref.iHeight,
40
+ iWidth = _ref.iWidth;
37
41
  return /*#__PURE__*/_react["default"].createElement(MenuContainer, {
38
42
  theme: theme,
39
43
  style: style
@@ -42,10 +46,10 @@ function Menu(_ref) {
42
46
  display: "rounded",
43
47
  appearance: "cta",
44
48
  icon: icon,
45
- iconWidth: 16,
46
- iconHeight: 16,
47
- width: 20,
48
- height: 20
49
+ iconWidth: iHeight || 16,
50
+ iconHeight: iWidth || 16,
51
+ width: iWidth || 20,
52
+ height: iHeight || 20
49
53
  }), /*#__PURE__*/_react["default"].createElement("div", {
50
54
  className: active ? "menu-popup active ".concat(position) : "menu-popup ".concat(position)
51
55
  }, /*#__PURE__*/_react["default"].createElement("div", {
package/components/control-bar/ControlBar.js CHANGED
@@ -26,6 +26,7 @@ var _CaptionControlMenuButton = _interopRequireDefault(require("./CaptionControl
26
26
  var _SubtitleMovementMenu = _interopRequireDefault(require("./SubtitleMovementMenu"));
27
27
  var _ZoomMenuButton = _interopRequireDefault(require("./ZoomMenuButton"));
28
28
  var _colors = _interopRequireDefault(require("../../colors"));
29
+ var _TimecodeFormatSelector = _interopRequireDefault(require("../marking-controls/TimecodeFormatSelector"));
29
30
  var _templateObject, _templateObject2; // import CommentsButton from './CommentsButton';
30
31
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
31
32
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -108,9 +109,10 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
108
109
  })), /*#__PURE__*/_react["default"].createElement(_DurationDisplay["default"], _extends({}, this.props, {
109
110
  key: "duration-display",
110
111
  order: 5.3
111
- })), /*#__PURE__*/_react["default"].createElement(_MarkingControl["default"], _extends({
112
- playerType: playerType
113
- }, this.props, {
112
+ })), /*#__PURE__*/_react["default"].createElement(_TimecodeFormatSelector["default"], _extends({}, this.props, {
113
+ key: "timecode-format-selector",
114
+ order: 5.5
115
+ })), /*#__PURE__*/_react["default"].createElement(_MarkingControl["default"], _extends({}, this.props, {
114
116
  key: "marking-controls",
115
117
  order: 6
116
118
  })),
@@ -131,7 +133,7 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
131
133
  order: 7
132
134
  })),
133
135
  /*#__PURE__*/
134
- // <SubtitleLanguagesMenuButton
136
+ // <SubtitleLanguagesMenuButton
135
137
  // {...this.props}
136
138
  // key="subtitle-menu-button"
137
139
  // order={7}
@@ -184,9 +186,10 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
184
186
  })), /*#__PURE__*/_react["default"].createElement(_DurationDisplay["default"], _extends({}, this.props, {
185
187
  key: "duration-display",
186
188
  order: 5.3
187
- })), /*#__PURE__*/_react["default"].createElement(_MarkingControl["default"], _extends({
188
- playerType: playerType
189
- }, this.props, {
189
+ })), /*#__PURE__*/_react["default"].createElement(_TimecodeFormatSelector["default"], _extends({}, this.props, {
190
+ key: "timecode-format-selector",
191
+ order: 5.5
192
+ })), /*#__PURE__*/_react["default"].createElement(_MarkingControl["default"], _extends({}, this.props, {
190
193
  key: "marking-controls",
191
194
  order: 6
192
195
  })),
@@ -216,7 +219,7 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
216
219
  order: 8
217
220
  })),
218
221
  /*#__PURE__*/
219
- // <SubtitleLanguagesMenuButton
222
+ // <SubtitleLanguagesMenuButton
220
223
  // {...this.props}
221
224
  // key="subtitle-menu-button"
222
225
  // order={8}
package/components/marking-controls/MarkingControl.js CHANGED
@@ -29,6 +29,7 @@ var propTypes = {
29
29
  initialTime: _propTypes.PropTypes.number,
30
30
  allowMarkerOverlap: _propTypes.PropTypes.bool,
31
31
  theme: _propTypes.PropTypes.string,
32
+ timeCodeFormat: _propTypes.PropTypes.string,
32
33
  pauseOnOutMarkerSelect: _propTypes.PropTypes.bool
33
34
  };
34
35
  var defaultProps = {
@@ -36,7 +37,7 @@ var defaultProps = {
36
37
  player: {},
37
38
  actions: {}
38
39
  };
39
- var MarkingBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n // min-width: 300px;\n width: 100%;\n margin: 0 15px;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n"])));
40
+ var MarkingBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n // min-width: 300px;\n width: 100%;\n margin: 0 5px;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n"])));
40
41
  function MarkingControl(_ref) {
41
42
  var player = _ref.player,
42
43
  frameRate = _ref.frameRate,
@@ -55,10 +56,11 @@ function MarkingControl(_ref) {
55
56
  playerSelectedMarker = _ref.playerSelectedMarker,
56
57
  theme = _ref.theme,
57
58
  enablePlayerActions = _ref.enablePlayerActions,
58
- pauseOnOutMarkerSelect = _ref.pauseOnOutMarkerSelect;
59
+ pauseOnOutMarkerSelect = _ref.pauseOnOutMarkerSelect,
60
+ timeCodeFormat = _ref.timeCodeFormat;
59
61
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' ? /*#__PURE__*/_react["default"].createElement(MarkingBlock, {
60
62
  theme: theme
61
- }, (!((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1) || !((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1)) && playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkInControl["default"], {
63
+ }, (!((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1) || !((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1)) && playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' && !playerReadOnlyMode && !disablePlayerActions.includes('marking_controls') ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkInControl["default"], {
62
64
  theme: theme,
63
65
  leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
64
66
  actions: actions,
@@ -85,12 +87,13 @@ function MarkingControl(_ref) {
85
87
  leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
86
88
  rightMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker,
87
89
  frameRate: frameRate,
88
- initialTime: initialTime
90
+ initialTime: initialTime,
91
+ timeCodeFormat: timeCodeFormat
89
92
  }) : null, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1 && (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1 ? /*#__PURE__*/_react["default"].createElement(_MarkingPreview["default"], {
90
93
  theme: theme,
91
94
  actions: actions,
92
95
  leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker
93
- }) : null, ((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1 || (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1) && (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.markerType) === 'create' && playerSelectedMarker !== null && playerSelectedMarker !== void 0 && playerSelectedMarker.markerCreate && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? /*#__PURE__*/_react["default"].createElement(_MarkingDeleteButton["default"], {
96
+ }) : null, ((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1 || (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1) && (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.markerType) === 'create' && playerSelectedMarker !== null && playerSelectedMarker !== void 0 && playerSelectedMarker.markerCreate && !playerReadOnlyMode && !disablePlayerActions.includes('marking_controls') ? /*#__PURE__*/_react["default"].createElement(_MarkingDeleteButton["default"], {
94
97
  theme: theme,
95
98
  actions: actions,
96
99
  onDeleteMarker: onDeleteMarker
package/components/marking-controls/MarkingDuration.js CHANGED
@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
  var _propTypes = require("prop-types");
10
10
  var _components = require("@desynova-digital/components");
11
- var _utils = require("../../utils");
12
11
  var _tokens = require("@desynova-digital/tokens");
12
+ var _utils = require("../../utils");
13
13
  var _templateObject;
14
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
15
15
  function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
@@ -18,6 +18,7 @@ var propTypes = {
18
18
  rightMarker: _propTypes.PropTypes.number,
19
19
  frameRate: _propTypes.PropTypes.number,
20
20
  initialTime: _propTypes.PropTypes.number,
21
+ timeCodeFormat: _propTypes.PropTypes.string,
21
22
  theme: _propTypes.PropTypes.string
22
23
  };
23
24
  var defaultProps = {
@@ -25,7 +26,7 @@ var defaultProps = {
25
26
  rightMarker: -1,
26
27
  frameRate: 0
27
28
  };
28
- var MarkingDurationBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n background: rgba(255, 255, 255, 0.3);\n padding: 5px;\n ", " {\n margin: 0 10px;\n box-shadow: 0 0 14px 1px rgba(0, 206, 198, 0.5);\n background: rgba(0, 206, 198, 0.2);\n svg path {\n fill: ", ";\n }\n }\n p {\n font-family: SFUIText-Medium;\n font-size: 9px;\n color: #ffffff;\n }\n"])), _components.Icon.Element, function (props) {
29
+ var MarkingDurationBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n background: rgba(255, 255, 255, 0.3);\n padding: 5px;\n margin: 0px 5px;\n ", " {\n margin: 0 10px;\n box-shadow: 0 0 14px 1px rgba(0, 206, 198, 0.5);\n background: rgba(0, 206, 198, 0.2);\n svg path {\n fill: ", ";\n }\n }\n p {\n font-family: SFUIText-Medium;\n font-size: 9px;\n color: #ffffff;\n }\n"])), _components.Icon.Element, function (props) {
29
30
  return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.themeColor) : '#00cec6';
30
31
  });
31
32
  function MarkingDuration(_ref) {
@@ -33,14 +34,30 @@ function MarkingDuration(_ref) {
33
34
  rightMarker = _ref.rightMarker,
34
35
  initialTime = _ref.initialTime,
35
36
  frameRate = _ref.frameRate,
36
- theme = _ref.theme;
37
+ theme = _ref.theme,
38
+ timeCodeFormat = _ref.timeCodeFormat;
39
+ var leftMarkerVal = (0, _utils.secondsToTime)(leftMarker, frameRate, initialTime);
40
+ var durMarkerVal = (0, _utils.secondsToTime)(rightMarker - leftMarker, frameRate);
41
+ var rightMarkerVal = (0, _utils.secondsToTime)(rightMarker, frameRate, initialTime);
37
42
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, leftMarker > -1 || rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement(MarkingDurationBlock, {
38
43
  theme: theme
39
44
  }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
40
45
  name: "in-marker",
41
46
  width: 6,
42
47
  height: 18
43
- }), leftMarker > -1 ? /*#__PURE__*/_react["default"].createElement("p", null, (0, _utils.secondsToTime)(leftMarker, frameRate, initialTime)) : null, leftMarker > -1 && rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement("p", null, '{', " Dur: ", (0, _utils.secondsToTime)(rightMarker - leftMarker, frameRate), '}', " ", (0, _utils.secondsToTime)(rightMarker, frameRate, initialTime)) : null, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
48
+ }), leftMarker > -1 ? /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
49
+ timecode: leftMarkerVal,
50
+ selectedTimecodeFormat: timeCodeFormat,
51
+ fps: frameRate
52
+ })) : null, leftMarker > -1 && rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement("p", null, '{', " Dur:", ' ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
53
+ timecode: durMarkerVal,
54
+ selectedTimecodeFormat: timeCodeFormat,
55
+ fps: frameRate
56
+ }), '}', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
57
+ timecode: rightMarkerVal,
58
+ selectedTimecodeFormat: timeCodeFormat,
59
+ fps: frameRate
60
+ })) : null, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
44
61
  name: "out-marker",
45
62
  width: 6,
46
63
  height: 18
package/components/marking-controls/TimecodeFormatSelector.js ADDED
@@ -0,0 +1,118 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _propTypes = require("prop-types");
11
+ var _components = require("@desynova-digital/components");
12
+ var _tokens = require("@desynova-digital/tokens");
13
+ var _Menu = _interopRequireDefault(require("../Menu"));
14
+ var _templateObject, _templateObject2, _templateObject3;
15
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
16
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
18
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
19
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
20
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
21
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
22
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
23
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
24
+ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
25
+ var TimeCodeSelector = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: #0c141d;\n display: flex;\n padding: 0px 4px;\n justify-content: center;\n border-radius: 5px;\n align-items: center;\n flex-shrink: 0;\n margin: 0px 0px 0px 10px;\n"])));
26
+ var OptionContainer = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n font-family: SFUIText-Regular;\n display: flex;\n width: 260px;\n padding: 12px 20px;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n /* font-weight: ", "; */\n\n &:hover {\n background-color: #f2f2f2;\n }\n"])), function (_ref) {
27
+ var selected = _ref.selected;
28
+ return selected ? ' #00CEC6' : '#0C141D';
29
+ }, function (_ref2) {
30
+ var selected = _ref2.selected;
31
+ return selected ? 'bold' : 'normal';
32
+ });
33
+ var ChevronIcon = (0, _styledComponents["default"])(_components.Icon)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: transparent;\n border: none;\n padding-bottom: 4px;\n margin: 0px;\n cursor: pointer;\n &:hover,\n &:focus {\n background: transparent;\n }\n"])));
34
+ var TimecodeFormatSelector = function TimecodeFormatSelector(_ref3) {
35
+ var theme = _ref3.theme,
36
+ player = _ref3.player,
37
+ actions = _ref3.actions,
38
+ saveTimeCodeFormat = _ref3.saveTimeCodeFormat;
39
+ var _useState = (0, _react.useState)(false),
40
+ _useState2 = _slicedToArray(_useState, 2),
41
+ isDropdownOpen = _useState2[0],
42
+ setIsDropdownOpen = _useState2[1];
43
+ var _useState3 = (0, _react.useState)('HH:MM:SS:FF'),
44
+ _useState4 = _slicedToArray(_useState3, 2),
45
+ selectedOption = _useState4[0],
46
+ setSelectedOption = _useState4[1];
47
+ var dropdownRef = (0, _react.useRef)(null);
48
+ var iconContainerRef = (0, _react.useRef)(null);
49
+ var options = [{
50
+ id: 'standard',
51
+ field: 'Standard (HH:MM:SS)',
52
+ value: 'HH:MM:SS'
53
+ }, {
54
+ id: 'timecode',
55
+ field: 'Timecode (HH:MM:SS:FF)',
56
+ value: 'HH:MM:SS:FF'
57
+ }, {
58
+ id: 'timecodeMs',
59
+ field: 'Timecode MS (HH:MM:SS:mmm)',
60
+ value: 'HH:MM:SS:mmm'
61
+ }];
62
+ var handleOptionSelect = function handleOptionSelect(option) {
63
+ setSelectedOption(option.value);
64
+ setIsDropdownOpen(false);
65
+ saveTimeCodeFormat(option.value);
66
+ };
67
+
68
+ // Handle outside click
69
+ (0, _react.useEffect)(function () {
70
+ var handleClickOutside = function handleClickOutside(event) {
71
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target) && iconContainerRef.current && !iconContainerRef.current.contains(event.target)) {
72
+ setIsDropdownOpen(false);
73
+ }
74
+ };
75
+ if (isDropdownOpen) {
76
+ document.addEventListener('mousedown', handleClickOutside);
77
+ } else {
78
+ document.removeEventListener('mousedown', handleClickOutside);
79
+ }
80
+ return function () {
81
+ document.removeEventListener('mousedown', handleClickOutside);
82
+ };
83
+ }, [isDropdownOpen]);
84
+ (0, _react.useEffect)(function () {
85
+ var storedFormat = localStorage.getItem('timeCodeFormat');
86
+ if (storedFormat) setSelectedOption(storedFormat);
87
+ }, []);
88
+ return /*#__PURE__*/_react["default"].createElement(TimeCodeSelector, null, /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
89
+ theme: theme,
90
+ icon: "pending-with-chevron",
91
+ player: player,
92
+ actions: actions,
93
+ style: {
94
+ margin: '0px 5px'
95
+ },
96
+ position: "left",
97
+ iHeight: "25px",
98
+ iWidth: "25px"
99
+ }, /*#__PURE__*/_react["default"].createElement("div", {
100
+ className: "menu-container"
101
+ }, options.map(function (opt, index) {
102
+ return /*#__PURE__*/_react["default"].createElement(OptionContainer, {
103
+ key: opt.id,
104
+ selected: selectedOption === opt.value,
105
+ className: index !== options.length - 1 ? 'border' : '',
106
+ onClick: function onClick() {
107
+ return handleOptionSelect(opt);
108
+ }
109
+ }, opt.field);
110
+ }))));
111
+ };
112
+ TimecodeFormatSelector.propTypes = {
113
+ actions: _propTypes.PropTypes.instanceOf(Object),
114
+ player: _propTypes.PropTypes.instanceOf(Object),
115
+ theme: _propTypes.PropTypes.string,
116
+ saveTimeCodeFormat: _propTypes.PropTypes.func
117
+ };
118
+ var _default = exports["default"] = TimecodeFormatSelector;
package/components/progress-bar/Timeline.js CHANGED
@@ -32,6 +32,7 @@ var propTypes = {
32
32
  initialTime: _propTypes.PropTypes.number,
33
33
  frameRate: _propTypes.PropTypes.number,
34
34
  zoom: _propTypes.PropTypes.number,
35
+ timeCodeFormat: _propTypes.PropTypes.string,
35
36
  scrollSeekBar: _propTypes.PropTypes.func
36
37
  };
37
38
  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) {
@@ -109,7 +110,8 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
109
110
  var _this$props2 = this.props,
110
111
  initialTime = _this$props2.initialTime,
111
112
  frameRate = _this$props2.frameRate,
112
- player = _this$props2.player;
113
+ player = _this$props2.player,
114
+ timeCodeFormat = _this$props2.timeCodeFormat;
113
115
  var _this$state = this.state,
114
116
  timeArray = _this$state.timeArray,
115
117
  maxWidth = _this$state.maxWidth;
@@ -131,9 +133,11 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
131
133
  left: "".concat(leftPercents, "%")
132
134
  },
133
135
  key: time
134
- }, /*#__PURE__*/_react["default"].createElement("p", {
135
- className: isFirst ? 'first-label' : isLast ? 'last-label' : undefined
136
- }, formattedTime), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
136
+ }, /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
137
+ timecode: formattedTime,
138
+ selectedTimecodeFormat: timeCodeFormat,
139
+ fps: frameRate
140
+ })), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
137
141
  name: "timeline",
138
142
  stroke: "#aaa"
139
143
  }));
package/components/time-controls/CurrentTimeDisplay.js CHANGED
@@ -43,13 +43,14 @@ function CurrentTimeDisplay(_ref) {
43
43
  inputValue = _useState2[0],
44
44
  setInputValue = _useState2[1];
45
45
  var elementRef = (0, _react.useRef)(null);
46
+ var selectedTimeCodeFormat = localStorage.getItem('timeCodeFormat');
46
47
  var handleKeyPress = function handleKeyPress(event) {
47
48
  if (event.key === 'Enter') {
48
49
  if (elementRef.current && elementRef.current.checkValidity()) {
49
50
  if (isNaN(initialTime)) {
50
51
  initialTime = 0;
51
52
  }
52
- var seekSecondsTime = (0, _utils.timeToSeconds)(event.target.value, frameRate) - initialTime;
53
+ var seekSecondsTime = (0, _utils.timeToSeconds)(elementRef.current.inputValue, frameRate) - initialTime;
53
54
  actions.seek(seekSecondsTime);
54
55
  document.activeElement.blur();
55
56
  actions.activate(true);
@@ -65,17 +66,17 @@ function CurrentTimeDisplay(_ref) {
65
66
  }, [player.currentTime]);
66
67
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _components.TimeCodeInput ? /*#__PURE__*/_react["default"].createElement(_components.TimeCodeInput, {
67
68
  theme: theme,
68
- width: "72px",
69
- elementRef: elementRef,
69
+ width: "102px",
70
+ ref: elementRef,
70
71
  inputValue: inputValue,
71
72
  onKeyDown: function onKeyDown(e) {
72
73
  return handleKeyPress(e);
73
74
  },
74
75
  onFocus: onInputFocus,
75
76
  frameRate: frameRate,
77
+ timeCodeFormatType: selectedTimeCodeFormat,
76
78
  initialTime: initialTime || 0,
77
- playerDuration: player.duration || 0,
78
- checkBaiscError: true
79
+ playerDuration: player.duration || 0
79
80
  }) : /*#__PURE__*/_react["default"].createElement(VideoCurrentTime, null, formattedTime));
80
81
  }
81
82
  CurrentTimeDisplay.propTypes = propTypes;
package/components/time-controls/DurationDisplay.js CHANGED
@@ -7,13 +7,15 @@ exports["default"] = void 0;
7
7
  var _propTypes = require("prop-types");
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _components = require("@desynova-digital/components");
10
11
  var _utils = require("../../utils");
11
12
  var _templateObject;
12
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
13
14
  function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
14
15
  var propTypes = {
15
16
  player: _propTypes.PropTypes.instanceOf(Object),
16
- frameRate: _propTypes.PropTypes.number
17
+ frameRate: _propTypes.PropTypes.number,
18
+ timeCodeFormat: _propTypes.PropTypes.string
17
19
  };
18
20
  var defaultProps = {
19
21
  player: {}
@@ -21,9 +23,14 @@ var defaultProps = {
21
23
  var VideoTotalDuration = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: SFUIText-Regular;\n font-size: 12px;\n letter-spacing: -0.6px;\n margin: 0 2px;\n color: #888888;\n"])));
22
24
  function DurationDisplay(_ref) {
23
25
  var player = _ref.player,
24
- frameRate = _ref.frameRate;
26
+ frameRate = _ref.frameRate,
27
+ timeCodeFormat = _ref.timeCodeFormat;
25
28
  var formattedTime = (0, _utils.secondsToTime)(player.duration, frameRate);
26
- return /*#__PURE__*/_react["default"].createElement(VideoTotalDuration, null, formattedTime);
29
+ return /*#__PURE__*/_react["default"].createElement(VideoTotalDuration, null, ' ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
30
+ timecode: formattedTime,
31
+ selectedTimecodeFormat: timeCodeFormat,
32
+ fps: frameRate
33
+ }));
27
34
  }
28
35
  DurationDisplay.propTypes = propTypes;
29
36
  DurationDisplay.defaultProps = defaultProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.0.49",
3
+ "version": "4.0.50",
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.1.16",
57
- "@desynova-digital/tokens": "9.1.16",
56
+ "@desynova-digital/components": "9.1.20",
57
+ "@desynova-digital/tokens": "9.1.20",
58
58
  "hls.js": "1.6.2",
59
59
  "babel-core": "7.0.0-bridge.0",
60
60
  "latest-version": "^4.0.0",