@desynova-digital/player 4.0.106 → 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 +106 -16
  2. package/package.json +1 -1
package/components/marking-controls/MarkingDuration.js CHANGED
@@ -10,7 +10,7 @@ var _propTypes = require("prop-types");
10
10
  var _components = require("@desynova-digital/components");
11
11
  var _tokens = require("@desynova-digital/tokens");
12
12
  var _utils = require("../../utils");
13
- var _templateObject;
13
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
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) } })); }
16
16
  var propTypes = {
@@ -26,8 +26,32 @@ var defaultProps = {
26
26
  rightMarker: -1,
27
27
  frameRate: 0
28
28
  };
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) {
30
- return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.themeColor) : '#00cec6';
29
+ var themeColor = function themeColor(theme) {
30
+ return theme ? _tokens.colors[theme].videoPlayer.themeColor : '#00cec6';
31
+ };
32
+
33
+ /* ---------------- Case 1 wrapper (ONLY) ---------------- */
34
+ 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 ", " {\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\n svg path {\n fill: ", ";\n }\n }\n\n p {\n font-family: SFUIText-Medium;\n font-size: 9px;\n color: #ffffff;\n margin: 0;\n line-height: 1;\n }\n"])), _components.Icon.Element, function (p) {
35
+ return themeColor(p.theme);
36
+ });
37
+
38
+ /* ---------------- Case 2 wrapper (NO MarkingDurationBlock) ---------------- */
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
+
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) {
43
+ return themeColor(p.theme);
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"])));
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
+ return themeColor(p.theme);
49
+ });
50
+
51
+ /* ---------------- Hover + Tooltip ---------------- */
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"])));
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) {
54
+ return themeColor(p.theme);
31
55
  });
32
56
  function MarkingDuration(_ref) {
33
57
  var leftMarker = _ref.leftMarker,
@@ -36,32 +60,98 @@ function MarkingDuration(_ref) {
36
60
  frameRate = _ref.frameRate,
37
61
  theme = _ref.theme,
38
62
  timeCodeFormat = _ref.timeCodeFormat;
63
+ var hasAny = leftMarker > -1 || rightMarker > -1;
64
+ if (!hasAny) return null;
65
+ var hasBoth = leftMarker > -1 && rightMarker > -1;
39
66
  var leftMarkerVal = (0, _utils.secondsToTime)(leftMarker, frameRate, initialTime);
40
- var durMarkerVal = (0, _utils.secondsToTime)(rightMarker - leftMarker, frameRate);
41
67
  var rightMarkerVal = (0, _utils.secondsToTime)(rightMarker, frameRate, initialTime);
42
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, leftMarker > -1 || rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement(MarkingDurationBlock, {
68
+ var durMarkerVal = hasBoth ? (0, _utils.secondsToTime)(rightMarker - leftMarker, frameRate) : null;
69
+
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
+ // }
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, {
43
114
  theme: theme
44
115
  }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
45
116
  name: "in-marker",
46
- width: 6,
117
+ width: 8,
47
118
  height: 18
48
- }), leftMarker > -1 ? /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
49
- timecode: leftMarkerVal,
119
+ }), /*#__PURE__*/_react["default"].createElement(DurationPill, null, /*#__PURE__*/_react["default"].createElement(DurText, null, "Dur:", ' ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
120
+ timecode: durMarkerVal,
50
121
  selectedTimecodeFormat: timeCodeFormat,
51
122
  fps: frameRate
52
- })) : null, leftMarker > -1 && rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement("p", null, '{', " Dur:", ' ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
53
- timecode: durMarkerVal,
123
+ })), /*#__PURE__*/_react["default"].createElement(Dot, {
124
+ 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, {
130
+ className: "inOutTooltip",
131
+ theme: theme
132
+ }, /*#__PURE__*/_react["default"].createElement("div", {
133
+ className: "bubble"
134
+ }, /*#__PURE__*/_react["default"].createElement("p", {
135
+ className: "row"
136
+ }, /*#__PURE__*/_react["default"].createElement("span", {
137
+ className: "key"
138
+ }, "In:"), /*#__PURE__*/_react["default"].createElement("span", {
139
+ className: "key"
140
+ }, /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
141
+ timecode: leftMarkerVal,
54
142
  selectedTimecodeFormat: timeCodeFormat,
55
143
  fps: frameRate
56
- }), '}', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
144
+ }))), /*#__PURE__*/_react["default"].createElement("p", {
145
+ className: "row"
146
+ }, /*#__PURE__*/_react["default"].createElement("span", {
147
+ className: "key"
148
+ }, "Out:"), /*#__PURE__*/_react["default"].createElement("span", {
149
+ className: "key"
150
+ }, /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
57
151
  timecode: rightMarkerVal,
58
152
  selectedTimecodeFormat: timeCodeFormat,
59
153
  fps: frameRate
60
- })) : null, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
61
- name: "out-marker",
62
- width: 6,
63
- height: 18
64
- })) : null);
154
+ })))))));
65
155
  }
66
156
  MarkingDuration.propTypes = propTypes;
67
157
  MarkingDuration.defaultProps = defaultProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.0.106",
3
+ "version": "4.1.1",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {