@desynova-digital/player 4.1.1 → 4.1.3

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 (4) hide show
  1. package/components/Player.js +16 -9
  2. package/components/marking-controls/MarkingControl.js +16 -10
  3. package/components/marking-controls/MarkingDuration.js +14 -22
  4. package/package.json +1 -1
package/components/Player.js CHANGED
@@ -396,6 +396,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
396
396
  document.addEventListener('fullscreenchange', this.handleFullscreenFix);
397
397
  _fullscreen["default"].addEventListener(this.handleFullScreenChange);
398
398
  this.handleMarginsAndGrid();
399
+
399
400
  /*
400
401
  * const { player } = this.manager.getState();
401
402
  * this.actions.toggleFullscreen(player);
@@ -420,6 +421,13 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
420
421
  this.handleMarginsAndGrid();
421
422
  }
422
423
  }
424
+ }, {
425
+ key: "getPlayer",
426
+ value: function getPlayer() {
427
+ var _this$manager$getStat2 = this.manager.getState(),
428
+ player = _this$manager$getStat2.player;
429
+ return player;
430
+ }
423
431
  }, {
424
432
  key: "componentWillUnmount",
425
433
  value: function componentWillUnmount() {
@@ -449,8 +457,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
449
457
  }, {
450
458
  key: "exitFullScreenMode",
451
459
  value: function exitFullScreenMode() {
452
- var _this$manager$getStat2 = this.manager.getState(),
453
- player = _this$manager$getStat2.player;
460
+ var _this$manager$getStat3 = this.manager.getState(),
461
+ player = _this$manager$getStat3.player;
454
462
  var onRightMenuVisible = this.props.onRightMenuVisible;
455
463
  this.actions.toggleFullscreen(player);
456
464
  // Trigger UI change based for exit
@@ -810,8 +818,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
810
818
  }, {
811
819
  key: "handleResize",
812
820
  value: function handleResize() {
813
- var _this$manager$getStat3 = this.manager.getState(),
814
- player = _this$manager$getStat3.player;
821
+ var _this$manager$getStat4 = this.manager.getState(),
822
+ player = _this$manager$getStat4.player;
815
823
  var leftSectionRef = this._leftSectionRef;
816
824
  var rightSectionRef = this._rightSectionRef;
817
825
  var audioMeterBlock = this._audioMeterBlock;
@@ -926,7 +934,6 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
926
934
  if (!((_this$props6 = this.props) !== null && _this$props6 !== void 0 && _this$props6.noRightComponent)) {
927
935
  video.style.height = videoHeight + 'px';
928
936
  }
929
- ;
930
937
  video.style.margin = '0 auto';
931
938
  video.classList.add('ratio-border');
932
939
  } else if (window.innerHeight >= 900) {
@@ -974,8 +981,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
974
981
  }, {
975
982
  key: "handleBlur",
976
983
  value: function handleBlur() {
977
- var _this$manager$getStat4 = this.manager.getState(),
978
- player = _this$manager$getStat4.player;
984
+ var _this$manager$getStat5 = this.manager.getState(),
985
+ player = _this$manager$getStat5.player;
979
986
  if (player.isFullscreen) return;
980
987
  this.actions.activate(false);
981
988
  }
@@ -993,8 +1000,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
993
1000
  value: function render() {
994
1001
  var _this6 = this,
995
1002
  _props$player;
996
- var _this$manager$getStat5 = this.manager.getState(),
997
- player = _this$manager$getStat5.player;
1003
+ var _this$manager$getStat6 = this.manager.getState(),
1004
+ player = _this$manager$getStat6.player;
998
1005
  var props = _objectSpread(_objectSpread({}, this.props), {}, {
999
1006
  player: player,
1000
1007
  actions: this.actions,
package/components/marking-controls/MarkingControl.js CHANGED
@@ -59,9 +59,15 @@ function MarkingControl(_ref) {
59
59
  pauseOnOutMarkerSelect = _ref.pauseOnOutMarkerSelect,
60
60
  timeCodeFormat = _ref.timeCodeFormat,
61
61
  onRightMenuVisible = _ref.onRightMenuVisible;
62
+ var shouldShowMarkers = function shouldShowMarkers() {
63
+ var missingAnyMarker = !((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1) || !((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1);
64
+ var blockedType = playerType === 'panel' || playerType === 'default' || playerType === 'clipping_default';
65
+ var blockedByPermission = playerReadOnlyMode || disablePlayerActions.includes('marking_controls');
66
+ return missingAnyMarker && !blockedType && !blockedByPermission;
67
+ };
62
68
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' ? /*#__PURE__*/_react["default"].createElement(MarkingBlock, {
63
69
  theme: theme
64
- }, (!((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"], {
70
+ }, shouldShowMarkers() ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkInControl["default"], {
65
71
  theme: theme,
66
72
  leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
67
73
  actions: actions,
@@ -72,7 +78,14 @@ function MarkingControl(_ref) {
72
78
  enablePlayerActions: enablePlayerActions,
73
79
  playerType: playerType,
74
80
  onRightMenuVisible: onRightMenuVisible
75
- }), /*#__PURE__*/_react["default"].createElement(_MarkOutControl["default"], {
81
+ })) : 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(_MarkingDuration["default"], {
82
+ theme: theme,
83
+ leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
84
+ rightMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker,
85
+ frameRate: frameRate,
86
+ initialTime: initialTime,
87
+ timeCodeFormat: timeCodeFormat
88
+ }) : null, shouldShowMarkers() ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkOutControl["default"], {
76
89
  theme: theme,
77
90
  leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
78
91
  rightMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker,
@@ -85,14 +98,7 @@ function MarkingControl(_ref) {
85
98
  onAddMarker: onAddMarker,
86
99
  pauseOnOutMarkerSelect: pauseOnOutMarkerSelect,
87
100
  onRightMenuVisible: onRightMenuVisible
88
- })) : 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(_MarkingDuration["default"], {
89
- theme: theme,
90
- leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
91
- rightMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker,
92
- frameRate: frameRate,
93
- initialTime: initialTime,
94
- timeCodeFormat: timeCodeFormat
95
- }) : 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"], {
101
+ })) : 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"], {
96
102
  theme: theme,
97
103
  actions: actions,
98
104
  leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker
package/components/marking-controls/MarkingDuration.js CHANGED
@@ -39,11 +39,11 @@ var MarkingDurationBlock = _styledComponents["default"].div(_templateObject || (
39
39
  var DurationOnlyWrap = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin: 0px 5px;\n"])));
40
40
 
41
41
  /* --- Case 2: duration pill like screenshot --- */
42
- var DurationRow = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n gap: 10px;\n\n /* bracket icons (your in-marker/out-marker) */\n ", " {\n background: transparent;\n box-shadow: none;\n margin: 0;\n\n svg path {\n fill: ", ";\n width: 8px;\n }\n }\n"])), _components.Icon.Element, function (p) {
42
+ var DurationRow = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n flex-wrap: nowrap;\n justify-content: center;\n\n /* bracket icons (your in-marker/out-marker) */\n ", " {\n background: transparent;\n box-shadow: none;\n margin: 0;\n\n svg path {\n fill: ", ";\n width: 8px;\n }\n }\n"])), _components.Icon.Element, function (p) {
43
43
  return themeColor(p.theme);
44
44
  });
45
- var DurationPill = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 10px 18px;\n border-radius: 5px;\n background: #0c141d;\n box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);\n"])));
46
- var DurText = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-family: SFUIText-Medium;\n font-size: 11px;\n color: rgba(255, 255, 255, 0.72);\n"])));
45
+ var DurationPill = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border-radius: 5px;\n background: #0c141d;\n box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);\n min-width: 120px;\n width: auto;\n white-space: nowrap;\n"])));
46
+ var DurText = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-family: SFUIText-Medium;\n font-size: 11px;\n color: rgba(255, 255, 255, 0.72);\n display: inline-flex;\n align-items: center;\n gap: 6px;\n white-space: nowrap;\n"])));
47
47
  var Dot = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: ", ";\n"])), function (p) {
48
48
  return themeColor(p.theme);
49
49
  });
@@ -66,7 +66,7 @@ function MarkingDuration(_ref) {
66
66
  var leftMarkerVal = (0, _utils.secondsToTime)(leftMarker, frameRate, initialTime);
67
67
  var rightMarkerVal = (0, _utils.secondsToTime)(rightMarker, frameRate, initialTime);
68
68
  var durMarkerVal = hasBoth ? (0, _utils.secondsToTime)(rightMarker - leftMarker, frameRate) : null;
69
-
69
+ var showTooltip = hasBoth;
70
70
  /* ---------------- CASE 1: OLD FLOW UI showDuration = false ---------------- */
71
71
  // if (!showDuration) {
72
72
  // return (
@@ -105,28 +105,20 @@ function MarkingDuration(_ref) {
105
105
  // );
106
106
  // }
107
107
 
108
- /* ---------------- CASE 2: showDuration = true ----------------
109
- ✅ IMPORTANT CHANGE:
110
- - Show "Dur" UI ONLY when BOTH markers exist
111
- */
112
- if (!hasBoth) return null;
113
- return /*#__PURE__*/_react["default"].createElement(DurationOnlyWrap, null, /*#__PURE__*/_react["default"].createElement(HoverTarget, null, /*#__PURE__*/_react["default"].createElement(DurationRow, {
114
- theme: theme
115
- }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
116
- name: "in-marker",
117
- width: 8,
118
- height: 18
119
- }), /*#__PURE__*/_react["default"].createElement(DurationPill, null, /*#__PURE__*/_react["default"].createElement(DurText, null, "Dur:", ' ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
108
+ var pillContent = hasBoth ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Dur: ", /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
120
109
  timecode: durMarkerVal,
121
110
  selectedTimecodeFormat: timeCodeFormat,
122
111
  fps: frameRate
123
- })), /*#__PURE__*/_react["default"].createElement(Dot, {
112
+ })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "In: ", /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
113
+ timecode: leftMarkerVal,
114
+ selectedTimecodeFormat: timeCodeFormat,
115
+ fps: frameRate
116
+ }));
117
+ return /*#__PURE__*/_react["default"].createElement(DurationOnlyWrap, null, /*#__PURE__*/_react["default"].createElement(HoverTarget, null, /*#__PURE__*/_react["default"].createElement(DurationRow, {
118
+ theme: theme
119
+ }, /*#__PURE__*/_react["default"].createElement(DurationPill, null, /*#__PURE__*/_react["default"].createElement(DurText, null, pillContent), /*#__PURE__*/_react["default"].createElement(Dot, {
124
120
  theme: theme
125
- })), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
126
- name: "out-marker",
127
- width: 8,
128
- height: 18
129
- })), /*#__PURE__*/_react["default"].createElement(InOutTooltip, {
121
+ }))), showTooltip && /*#__PURE__*/_react["default"].createElement(InOutTooltip, {
130
122
  className: "inOutTooltip",
131
123
  theme: theme
132
124
  }, /*#__PURE__*/_react["default"].createElement("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.1.1",
3
+ "version": "4.1.3",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {