@desynova-digital/player 4.1.0 → 4.1.1

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/marking-controls/MarkingDuration.js +51 -36
  2. package/package.json +1 -1
package/components/marking-controls/MarkingDuration.js CHANGED
@@ -19,14 +19,12 @@ var propTypes = {
19
19
  frameRate: _propTypes.PropTypes.number,
20
20
  initialTime: _propTypes.PropTypes.number,
21
21
  timeCodeFormat: _propTypes.PropTypes.string,
22
- theme: _propTypes.PropTypes.string,
23
- showDuration: _propTypes.PropTypes.bool
22
+ theme: _propTypes.PropTypes.string
24
23
  };
25
24
  var defaultProps = {
26
25
  leftMarker: -1,
27
26
  rightMarker: -1,
28
- frameRate: 0,
29
- showDuration: false
27
+ frameRate: 0
30
28
  };
31
29
  var themeColor = function themeColor(theme) {
32
30
  return theme ? _tokens.colors[theme].videoPlayer.themeColor : '#00cec6';
@@ -41,7 +39,7 @@ var MarkingDurationBlock = _styledComponents["default"].div(_templateObject || (
41
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"])));
42
40
 
43
41
  /* --- Case 2: duration pill like screenshot --- */
44
- 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: 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) {
45
43
  return themeColor(p.theme);
46
44
  });
47
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"])));
@@ -52,7 +50,7 @@ var Dot = _styledComponents["default"].span(_templateObject6 || (_templateObject
52
50
 
53
51
  /* ---------------- Hover + Tooltip ---------------- */
54
52
  var HoverTarget = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n\n &:hover .inOutTooltip {\n opacity: 1;\n transform: translate(-50%, -6px);\n pointer-events: auto;\n }\n"])));
55
- var InOutTooltip = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: absolute;\n left: 50%;\n bottom: calc(100% + 1px);\n transform: translate(-50%, 0);\n opacity: 0;\n pointer-events: none;\n transition: 150ms ease;\n z-index: 9999;\n\n .bubble {\n min-width: 150px;\n padding: 10px 12px;\n border-radius: 10px;\n background: rgba(10, 18, 26, 0.95);\n box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);\n position: relative;\n }\n\n /* Downward teal arrow for tooltip */\n .bubble::after {\n content: '';\n position: absolute;\n left: 50%;\n bottom: -8px;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 6px solid ", ";\n filter: drop-shadow(0 2px 6px rgba(0, 206, 198, 0.35));\n }\n\n .row {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0;\n }\n .row + .row {\n margin-top: 4px;\n }\n\n .key {\n font-size: 12px;\n font-family: SFUIText-Medium;\n\n line-height: 14px;\n color: rgba(255, 255, 255, 0.72);\n min-width: 28px;\n }\n"])), function (p) {
53
+ var InOutTooltip = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: absolute;\n left: 50%;\n bottom: calc(100% + 1px);\n transform: translate(-50%, 0);\n opacity: 0;\n pointer-events: none;\n transition: 150ms ease;\n z-index: 9999;\n\n .bubble {\n min-width: 150px;\n padding: 10px 12px;\n border-radius: 10px;\n background: rgba(10, 18, 26, 0.95);\n box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);\n position: relative;\n }\n\n /* Downward teal arrow for tooltip */\n .bubble::after {\n content: '';\n position: absolute;\n left: 50%;\n bottom: -8px;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 6px solid ", ";\n filter: drop-shadow(0 2px 6px rgba(0, 206, 198, 0.35));\n }\n\n .row {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0;\n }\n .row + .row {\n margin-top: 4px;\n }\n\n .key {\n font-size: 12px;\n font-family: SFUIText-Medium;\n\n line-height: 14px;\n color: rgba(255, 255, 255, 0.72);\n min-width: 28px;\n }\n"])), function (p) {
56
54
  return themeColor(p.theme);
57
55
  });
58
56
  function MarkingDuration(_ref) {
@@ -64,43 +62,52 @@ function MarkingDuration(_ref) {
64
62
  timeCodeFormat = _ref.timeCodeFormat;
65
63
  var hasAny = leftMarker > -1 || rightMarker > -1;
66
64
  if (!hasAny) return null;
67
- var showDuration = true;
68
65
  var hasBoth = leftMarker > -1 && rightMarker > -1;
69
66
  var leftMarkerVal = (0, _utils.secondsToTime)(leftMarker, frameRate, initialTime);
70
67
  var rightMarkerVal = (0, _utils.secondsToTime)(rightMarker, frameRate, initialTime);
71
68
  var durMarkerVal = hasBoth ? (0, _utils.secondsToTime)(rightMarker - leftMarker, frameRate) : null;
72
69
 
73
- /* ---------------- CASE 1: showDuration = false ---------------- */
74
- if (!showDuration) {
75
- return /*#__PURE__*/_react["default"].createElement(MarkingDurationBlock, {
76
- theme: theme
77
- }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
78
- name: "in-marker",
79
- width: 6,
80
- height: 18
81
- }), leftMarker > -1 && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
82
- timecode: leftMarkerVal,
83
- selectedTimecodeFormat: timeCodeFormat,
84
- fps: frameRate
85
- })), hasBoth && /*#__PURE__*/_react["default"].createElement("p", null, '{', " Dur:", ' ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
86
- timecode: durMarkerVal,
87
- selectedTimecodeFormat: timeCodeFormat,
88
- fps: frameRate
89
- }), '} ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
90
- timecode: rightMarkerVal,
91
- selectedTimecodeFormat: timeCodeFormat,
92
- fps: frameRate
93
- })), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
94
- name: "out-marker",
95
- width: 6,
96
- height: 18
97
- }));
98
- }
70
+ /* ---------------- CASE 1: OLD FLOW UI showDuration = false ---------------- */
71
+ // if (!showDuration) {
72
+ // return (
73
+ // <MarkingDurationBlock theme={theme}>
74
+ // <Icon name="in-marker" width={6} height={18} />
75
+
76
+ // {leftMarker > -1 && (
77
+ // <p>
78
+ // <TimeCodeDisplay
79
+ // timecode={leftMarkerVal}
80
+ // selectedTimecodeFormat={timeCodeFormat}
81
+ // fps={frameRate}
82
+ // />
83
+ // </p>
84
+ // )}
85
+
86
+ // {hasBoth && (
87
+ // <p>
88
+ // {'{'} Dur:{' '}
89
+ // <TimeCodeDisplay
90
+ // timecode={durMarkerVal}
91
+ // selectedTimecodeFormat={timeCodeFormat}
92
+ // fps={frameRate}
93
+ // />
94
+ // {'} '}
95
+ // <TimeCodeDisplay
96
+ // timecode={rightMarkerVal}
97
+ // selectedTimecodeFormat={timeCodeFormat}
98
+ // fps={frameRate}
99
+ // />
100
+ // </p>
101
+ // )}
102
+
103
+ // <Icon name="out-marker" width={6} height={18} />
104
+ // </MarkingDurationBlock>
105
+ // );
106
+ // }
99
107
 
100
108
  /* ---------------- CASE 2: showDuration = true ----------------
101
109
  ✅ IMPORTANT CHANGE:
102
110
  - Show "Dur" UI ONLY when BOTH markers exist
103
- - If not both, show NOTHING in case 2 (as you asked)
104
111
  */
105
112
  if (!hasBoth) return null;
106
113
  return /*#__PURE__*/_react["default"].createElement(DurationOnlyWrap, null, /*#__PURE__*/_react["default"].createElement(HoverTarget, null, /*#__PURE__*/_react["default"].createElement(DurationRow, {
@@ -130,13 +137,21 @@ function MarkingDuration(_ref) {
130
137
  className: "key"
131
138
  }, "In:"), /*#__PURE__*/_react["default"].createElement("span", {
132
139
  className: "key"
133
- }, leftMarkerVal)), /*#__PURE__*/_react["default"].createElement("p", {
140
+ }, /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
141
+ timecode: leftMarkerVal,
142
+ selectedTimecodeFormat: timeCodeFormat,
143
+ fps: frameRate
144
+ }))), /*#__PURE__*/_react["default"].createElement("p", {
134
145
  className: "row"
135
146
  }, /*#__PURE__*/_react["default"].createElement("span", {
136
147
  className: "key"
137
148
  }, "Out:"), /*#__PURE__*/_react["default"].createElement("span", {
138
149
  className: "key"
139
- }, rightMarkerVal))))));
150
+ }, /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
151
+ timecode: rightMarkerVal,
152
+ selectedTimecodeFormat: timeCodeFormat,
153
+ fps: frameRate
154
+ })))))));
140
155
  }
141
156
  MarkingDuration.propTypes = propTypes;
142
157
  MarkingDuration.defaultProps = defaultProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.1.0",
3
+ "version": "4.1.1",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {