@desynova-digital/player 4.1.1 → 4.1.2

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/marking-controls/MarkingControl.js +16 -10
  2. package/components/marking-controls/MarkingDuration.js +14 -22
  3. package/package.json +1 -1
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.2",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {