@desynova-digital/components 9.2.1 → 9.2.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 (11) hide show
  1. package/atoms/cardV2/cardV2.js +10 -5
  2. package/atoms/cardV2/content.js +94 -150
  3. package/atoms/cardV2/contentV2.js +287 -0
  4. package/atoms/cardV2/thumbnail.js +58 -61
  5. package/atoms/cardV2/thumbnailV2.js +251 -0
  6. package/atoms/icon/icon.story.js +230 -203
  7. package/atoms/timeCodeInput/timeCodeMSInput.js +6 -4
  8. package/atoms/timeCodeInput/timeCodeMainInput.js +6 -4
  9. package/atoms/timeCodeInput/timeCodeStandardInput.js +6 -4
  10. package/molecules/richTextInputV2/RichTextInputV2.js +10 -2
  11. package/package.json +2 -2
package/atoms/cardV2/contentV2.js ADDED
@@ -0,0 +1,287 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
+ var _react = _interopRequireWildcard(require("react"));
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
16
+ var _cardV = require("./cardV2");
17
+ var _icon = _interopRequireDefault(require("../../atoms/icon"));
18
+ var _tokens = require("@desynova-digital/tokens");
19
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
20
+ 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); }
21
+ 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; }
22
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
23
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
24
+ var TextEllipsisStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
25
+ var ParaStyles = (0, _styledComponents["default"])(function (props) {
26
+ return /*#__PURE__*/_react["default"].createElement(_cardV.BaseParaStyles, props);
27
+ })(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n padding: 0;\n margin-right: 10px;\n font-size: 10px;\n color: #afb2ba;\n -webkit-line-clamp: 1;\n height: 10px;\n"])), TextEllipsisStyles);
28
+ var TitleStyles = (0, _styledComponents["default"])(function (props) {
29
+ return /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, props);
30
+ })(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n font-family: SFUIText-Medium;\n -webkit-line-clamp: 2;\n height: 20px;\n cursor: ", ";\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: nowrap;\n\n .title-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n flex-shrink: 1;\n }\n\n .files-associated-icon {\n margin-left: 7px;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n color: #afb2ba;\n }\n\n .files-associated-icon:hover {\n color: #00cec6;\n }\n"])), TextEllipsisStyles, function (_ref) {
31
+ var isTitleClick = _ref.isTitleClick;
32
+ return isTitleClick ? 'pointer' : 'default';
33
+ });
34
+ var ContentBody = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n &.no-meta-row {\n margin-top: 6px;\n }\n"])));
35
+ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n padding: ", ";\n background-color: ", ";\n border-radius: 0 0 8px 8px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n &.no-meta-row {\n height: ", ";\n }\n\n &.no-meta-row .footer-row {\n margin-top: 10px;\n }\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: ' ';\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: ", ";\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container {\n position: absolute;\n bottom: 100%;\n margin-right: 110px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n padding-bottom: 10px;\n\n .overlappig-popup {\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding: 12px;\n width: 300px;\n z-index: 10;\n\n .popup-pointer {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid ", ";\n\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n\n .overlapping-episod-list-container {\n max-height: 165px;\n overflow: scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n\n .divider {\n height: 1px;\n width: 100%;\n margin: 10px 0;\n background: #303f51;\n }\n .header-container {\n display: flex;\n position: relative;\n .thumbnail {\n width: 100px;\n height: 55px;\n background-size: cover !important;\n background-repeat: no-repeat !important;\n margin-right: 10px;\n border-radius: 2px;\n }\n .episod-title {\n font-size: 12px;\n margin-bottom: 8px;\n max-width: 180px;\n line-height: 14px;\n color: #fff;\n }\n .episod-details {\n font-size: 10px;\n color: #afb2ba;\n }\n }\n\n .overlappig-popup-title {\n font-size: 12px;\n line-height: 12px;\n color: #afb2ba;\n margin-bottom: 15px;\n }\n }\n }\n\n :hover {\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px;\n }\n }\n .meta-row {\n display: flex;\n align-items: center;\n margin-top: 6px;\n column-gap: 10px;\n }\n .category-count {\n margin-top: 6px;\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 10px;\n line-height: 12px;\n }\n .meta-badge {\n ", "\n font-size: 8px;\n line-height: 12px;\n padding: 1px 3px;\n border-radius: 4px;\n font-family: SFUIText-Regular;\n min-height: 12px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .meta-text {\n color: ", ";\n font-family: SFUIText-Regular;\n font-size: 10px;\n font-style: normal;\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .footer-row {\n display: flex;\n align-items: center;\n margin-top: 16px;\n column-gap: 12px;\n position: relative;\n }\n .meta-row + .footer-row {\n margin-top: 10px;\n }\n .footer-text {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n }\n .footer-icons {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n .footer-icon {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 12px;\n display: inline-flex;\n align-items: center;\n }\n .footer-text-language {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n text-transform: capitalize;\n }\n"])), function (_ref2) {
36
+ var type = _ref2.type,
37
+ width = _ref2.width;
38
+ return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
39
+ }, function (_ref3) {
40
+ var width = _ref3.width;
41
+ return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
42
+ }, function (_ref4) {
43
+ var type = _ref4.type,
44
+ width = _ref4.width;
45
+ if (width === 'sm' && type === 'search') {
46
+ return '0px 13px';
47
+ } else if (type === 'search' && width !== 'sm') {
48
+ return '13px 0px';
49
+ } else return '13px 15px';
50
+ }, function (_ref5) {
51
+ var bgColor = _ref5.bgColor,
52
+ type = _ref5.type;
53
+ return type === 'search' ? 'transparent' : bgColor === 'secondary' && type !== 'search' ? '#0C141D' : '#15212F';
54
+ }, function (_ref6) {
55
+ var type = _ref6.type,
56
+ width = _ref6.width;
57
+ return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '62px' : '64px';
58
+ }, function (props) {
59
+ return _tokens.colors[props.theme].filter.rgbthemeColor;
60
+ }, function (props) {
61
+ return _tokens.colors[props.theme].card.themeColor;
62
+ }, function (_ref7) {
63
+ var upload_type = _ref7.upload_type;
64
+ var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
65
+ var color = isRC ? '#ff6327' : '#00CEC6';
66
+ var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
67
+ return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n border: 1px solid ", ";\n color: ", ";\n background-color: ", ";\n "])), color, color, bg);
68
+ }, function (_ref8) {
69
+ var upload_type = _ref8.upload_type;
70
+ return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
71
+ });
72
+ var SeasonEpisodeContainer = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-shrink: 0;\n padding: 2px 6px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: 3px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--Color-Text-color-Text-500, #999);\n text-align: center;\n font-family: 'SFUITEXT-LIGHT';\n font-size: 8px;\n font-style: normal;\n font-weight: 400;\n height: auto;\n width: auto;\n margin-left: 6px;\n span {\n padding: 0px 2px;\n }\n"])));
73
+ var ContentV2 = function ContentV2(props) {
74
+ var title = props.title,
75
+ episode_label = props.episode_label,
76
+ version_label = props.version_label,
77
+ category_label = props.category_label,
78
+ date_count_label = props.date_count_label,
79
+ identifier_label = props.identifier_label,
80
+ language_label = props.language_label,
81
+ isSegment = props.isSegment,
82
+ type = props.type,
83
+ width = props.width,
84
+ titleClick = props.titleClick,
85
+ show_page_id = props.show_page_id,
86
+ overlapping = props.overlapping,
87
+ theme = props.theme,
88
+ upload_type = props.upload_type,
89
+ icon_status = props.icon_status,
90
+ asset_type = props.asset_type,
91
+ h1 = props.h1;
92
+ var ICON_DIMENSION_MAP = {
93
+ snp_edit: {
94
+ width: 10,
95
+ height: 10
96
+ },
97
+ pgm_edit_V2: {
98
+ width: 13,
99
+ height: 10
100
+ },
101
+ subtitle_assign: {
102
+ width: 12,
103
+ height: 10
104
+ },
105
+ archive: {
106
+ width: 10,
107
+ height: 10
108
+ },
109
+ delivery: {
110
+ width: 13,
111
+ height: 10
112
+ },
113
+ dubbing_review: {
114
+ width: 7,
115
+ height: 10
116
+ }
117
+ };
118
+ var ICON_LABEL_MAP = {
119
+ snp_edit: 'SNP Edit',
120
+ pgm_edit_V2: 'PGM Edit',
121
+ archive: 'Archive',
122
+ delivery: 'Delivery',
123
+ dubbing_review: 'Dubbing Review',
124
+ subtitle_assign: 'Subtitle',
125
+ file_ingest: 'Ingest'
126
+ };
127
+ var getIconLabel = function getIconLabel(iconName) {
128
+ return ICON_LABEL_MAP[iconName] || (iconName === null || iconName === void 0 ? void 0 : iconName.replace(/_/g, ' ')) || '';
129
+ };
130
+ var STATUS_COLOR_MAP = {
131
+ Success: '#18B96E',
132
+ Pending: '#666666',
133
+ Failed: '#FF6C56',
134
+ 'In Progress': '#FF8D29',
135
+ 'In Queue': '#F9E900'
136
+ };
137
+ var footerIcons = (icon_status || []).map(function (item) {
138
+ var _STATUS_COLOR_MAP$ite, _ICON_DIMENSION_MAP$i;
139
+ return _objectSpread({
140
+ name: item.icon,
141
+ status: item.status,
142
+ tooltipLabel: "".concat(getIconLabel(item.icon)).concat(item.status ? " : ".concat(item.status) : ''),
143
+ color: (_STATUS_COLOR_MAP$ite = STATUS_COLOR_MAP[item.status]) !== null && _STATUS_COLOR_MAP$ite !== void 0 ? _STATUS_COLOR_MAP$ite : '#AFB2BA'
144
+ }, (_ICON_DIMENSION_MAP$i = ICON_DIMENSION_MAP[item.icon]) !== null && _ICON_DIMENSION_MAP$i !== void 0 ? _ICON_DIMENSION_MAP$i : {
145
+ width: 10,
146
+ height: 10
147
+ });
148
+ });
149
+ var _useState = (0, _react.useState)(false),
150
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
151
+ isFilesIconHovered = _useState2[0],
152
+ setIsFilesIconHovered = _useState2[1];
153
+ var _useState3 = (0, _react.useState)(false),
154
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
155
+ isFooterIconHovered = _useState4[0],
156
+ setIsFooterIconHovered = _useState4[1];
157
+ var hasMetaRow = Boolean(version_label || category_label);
158
+ var line1 = [title || h1, episode_label].filter(Boolean).join(' | ');
159
+ var line2 = [version_label, category_label].filter(Boolean).join(' | ');
160
+ var line3 = [date_count_label, identifier_label, language_label].filter(Boolean).join(' | ');
161
+ var combinedTooltipText = [line1, line2, line3].filter(function (s) {
162
+ return s && s.trim();
163
+ }).join('\n');
164
+ var contentTooltipTitle = isFooterIconHovered ? '' : combinedTooltipText;
165
+ return /*#__PURE__*/_react["default"].createElement(ContentStyles, (0, _extends2["default"])({}, props, {
166
+ className: "asset-card-content".concat(hasMetaRow ? '' : ' no-meta-row'),
167
+ title: contentTooltipTitle
168
+ }), /*#__PURE__*/_react["default"].createElement("div", {
169
+ className: "title-parent"
170
+ }, /*#__PURE__*/_react["default"].createElement(TitleStyles, {
171
+ theme: props.theme,
172
+ isTitleClick: show_page_id,
173
+ onClick: function onClick(e) {
174
+ return titleClick(e, show_page_id);
175
+ },
176
+ fontSize: "12px",
177
+ color: "#FFF"
178
+ }, /*#__PURE__*/_react["default"].createElement("span", {
179
+ className: "title-text"
180
+ }, title || h1), episode_label ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, null, episode_label) : null, show_page_id && asset_type !== 'sports' ? /*#__PURE__*/_react["default"].createElement("span", {
181
+ title: "Open Page",
182
+ className: "files-associated-icon",
183
+ onMouseEnter: function onMouseEnter() {
184
+ return setIsFilesIconHovered(true);
185
+ },
186
+ onMouseLeave: function onMouseLeave() {
187
+ return setIsFilesIconHovered(false);
188
+ }
189
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
190
+ name: "files-associated",
191
+ width: 8,
192
+ height: 8,
193
+ color: isFilesIconHovered ? '#00CEC6' : '#AFB2BA'
194
+ })) : null)), (episode_label || version_label || category_label || date_count_label || identifier_label || isSegment) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (version_label || category_label) && /*#__PURE__*/_react["default"].createElement("div", {
195
+ className: "meta-row"
196
+ }, version_label && /*#__PURE__*/_react["default"].createElement("span", {
197
+ className: "meta-badge"
198
+ }, version_label), category_label && /*#__PURE__*/_react["default"].createElement("span", {
199
+ className: "meta-text"
200
+ }, category_label), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
201
+ className: "segment-indicator"
202
+ }, "S")), (date_count_label || identifier_label || language_label) && /*#__PURE__*/_react["default"].createElement("div", {
203
+ className: "footer-row"
204
+ }, date_count_label && /*#__PURE__*/_react["default"].createElement("span", {
205
+ className: "footer-text"
206
+ }, date_count_label), identifier_label && /*#__PURE__*/_react["default"].createElement("span", {
207
+ className: "footer-text"
208
+ }, identifier_label), language_label && /*#__PURE__*/_react["default"].createElement("span", {
209
+ className: "footer-text-language"
210
+ }, language_label), /*#__PURE__*/_react["default"].createElement("span", {
211
+ className: "footer-icons"
212
+ }, footerIcons.map(function (icon) {
213
+ return /*#__PURE__*/_react["default"].createElement("span", {
214
+ key: icon.name,
215
+ className: "footer-icon",
216
+ title: icon.tooltipLabel,
217
+ onMouseEnter: function onMouseEnter() {
218
+ return setIsFooterIconHovered(true);
219
+ },
220
+ onMouseLeave: function onMouseLeave() {
221
+ return setIsFooterIconHovered(false);
222
+ }
223
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
224
+ name: icon.name,
225
+ color: icon.color,
226
+ width: icon.width,
227
+ height: icon.height
228
+ }));
229
+ }))), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
230
+ theme: props.theme,
231
+ display: "flex",
232
+ className: "overlapping-container"
233
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
234
+ theme: props.theme,
235
+ name: "overlapping"
236
+ }), /*#__PURE__*/_react["default"].createElement("div", {
237
+ className: "overlappig-popup-container"
238
+ }, /*#__PURE__*/_react["default"].createElement("div", {
239
+ className: "overlappig-popup"
240
+ }, /*#__PURE__*/_react["default"].createElement("div", {
241
+ className: "popup-pointer"
242
+ }), /*#__PURE__*/_react["default"].createElement("div", {
243
+ className: "overlappig-popup-title"
244
+ }, "Overlapping with:"), /*#__PURE__*/_react["default"].createElement("div", {
245
+ className: "overlapping-episod-list-container"
246
+ }, overlapping.map(function (value, index) {
247
+ return /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("div", {
248
+ className: "header-container"
249
+ }, /*#__PURE__*/_react["default"].createElement("div", {
250
+ className: "thumbnail",
251
+ style: {
252
+ backgroundImage: "url(".concat(value.thumbnail ? value.thumbnail : 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png', " )")
253
+ }
254
+ }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
255
+ className: "episod-title"
256
+ }, value.episode_name), /*#__PURE__*/_react["default"].createElement("div", {
257
+ className: "episod-details"
258
+ }, "S".concat(value.season_no, " E").concat(value.episode_no), /*#__PURE__*/_react["default"].createElement("span", {
259
+ style: {
260
+ marginLeft: '10px'
261
+ }
262
+ }, value.duration, " Min")))), index != overlapping.length - 1 && /*#__PURE__*/_react["default"].createElement("div", {
263
+ className: "divider"
264
+ }));
265
+ })))), overlapping.length > 1 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
266
+ theme: props.theme,
267
+ margin: "0"
268
+ }, overlapping.length)) || null));
269
+ };
270
+ ContentV2.propTypes = {
271
+ title: _propTypes["default"].string,
272
+ episode_label: _propTypes["default"].string,
273
+ version_label: _propTypes["default"].string,
274
+ category_label: _propTypes["default"].string,
275
+ date_count_label: _propTypes["default"].string,
276
+ identifier_label: _propTypes["default"].string,
277
+ language_label: _propTypes["default"].string,
278
+ width: _propTypes["default"].string,
279
+ type: _propTypes["default"].string,
280
+ titleClick: _propTypes["default"].func,
281
+ theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
282
+ };
283
+ ContentV2.defaultProps = {
284
+ theme: 'dark',
285
+ isSegment: false
286
+ };
287
+ var _default = exports["default"] = ContentV2;
package/atoms/cardV2/thumbnail.js CHANGED
@@ -15,7 +15,7 @@ var _tokens = require("@desynova-digital/tokens");
15
15
  var _icon = _interopRequireDefault(require("../../atoms/icon"));
16
16
  var _tokens2 = require("../../../tokens");
17
17
  var _cardV = require("./cardV2");
18
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // atoms
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // atoms
19
19
  // tokens
20
20
  // styles
21
21
  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); }
@@ -23,51 +23,48 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
23
23
  var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n background: rgba(0, 0, 0, 0.5);\n"])));
24
24
  var assetStyles = {
25
25
  folder: {
26
- backgroundColor: '#121D29',
27
- backgroundSize: 'inherit'
26
+ backgroundColor: "#121D29",
27
+ backgroundSize: "inherit"
28
28
  },
29
29
  asset: {
30
- backgroundColor: 'inherit',
31
- backgroundSize: 'cover'
30
+ backgroundColor: "inherit",
31
+ backgroundSize: "cover"
32
32
  }
33
33
  };
34
- var HoverActionButton = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n border: none;\n cursor: pointer;\n width: 26px;\n height: 26px;\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 200ms ease;\n"])), OverlayBackgroundStyles);
35
- var ThumbnailStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n background: ", ";\n background-color: ", ";\n background-size: ", ";\n width: ", ";\n height: ", ";\n border-radius: 8px 8px 0 0;\n overflow: hidden;\n\n .iframe-image-block {\n cursor: ", ";\n background: #000;\n opacity: 0;\n &:hover {\n opacity: 1;\n }\n .hover-pointer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0;\n background: #fff;\n pointer-events: none;\n z-index: 1;\n }\n }\n .background-block {\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n overflow: hidden;\n .circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: #15212f;\n }\n i {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n .thumbnail-image-block {\n cursor: pointer;\n background: linear-gradient(359deg, #182738 19.98%, #182738 48.97%, rgba(24, 39, 56, 0.42) 99.47%);\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (_ref) {
34
+ var ThumbnailStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n background: ", ";\n background-color: ", ";\n background-size: ", ";\n width: ", ";\n height: ", ";\n\n .iframe-image-block {\n cursor: ", ";\n background: #000;\n opacity: 0;\n &:hover {\n opacity: 1;\n }\n .hover-pointer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0;\n background: #fff;\n pointer-events: none;\n z-index: 1;\n }\n }\n .background-block {\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n overflow: hidden;\n .circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: #15212f;\n }\n i {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n .thumbnail-image-block {\n cursor: pointer;\n background: #182738;\n }\n"])), function (_ref) {
36
35
  var thumbnail = _ref.thumbnail;
37
36
  return "url(".concat(thumbnail, ") no-repeat 50%");
38
37
  }, function (_ref2) {
39
38
  var data_type = _ref2.data_type;
40
- return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : 'inherit';
39
+ return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : "inherit";
41
40
  }, function (_ref3) {
42
41
  var data_type = _ref3.data_type;
43
- return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : 'cover';
42
+ return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : "cover";
44
43
  }, function (_ref4) {
45
44
  var width = _ref4.width;
46
- return width === 'sm' ? '90px' : width === 'md' ? '125px' : '222px';
45
+ return width === "sm" ? "90px" : width === "md" ? "125px" : "222px";
47
46
  }, function (_ref5) {
48
47
  var width = _ref5.width;
49
- return width === 'sm' ? '50px' : width === 'md' ? '70px' : '110px';
48
+ return width === "sm" ? "50px" : width === "md" ? "70px" : "126px";
50
49
  }, function (_ref6) {
51
50
  var isClickPrevented = _ref6.isClickPrevented;
52
- return !isClickPrevented ? 'pointer' : 'default';
53
- }, HoverActionButton);
54
- var UploadTypeContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 2;\n cursor: pointer;\n .uploadWrapper {\n border-radius: 50%;\n background: ", ";\n\n color: ", ";\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n .wrapper {\n font-size: 10px;\n font-family: 'SFUIText-Regular';\n line-height: 1.1;\n text-transform: uppercase;\n }\n }\n"])), function (props) {
55
- return props.upload_type === 'rc' ? '#FF6327' : _tokens.colors[props.theme].card.themeColor;
51
+ return !isClickPrevented ? "pointer" : "default";
52
+ });
53
+ var UploadTypeContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 2;\n .uploadWrapper {\n border-radius: 50%;\n background: ", ";\n\n color: ", ";\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n .wrapper {\n font-size: 10px;\n font-family: \"SFUIText-Regular\";\n line-height: 1.1;\n text-transform: uppercase;\n }\n }\n"])), function (props) {
54
+ return props.upload_type === "rc" ? "#FF6327" : _tokens.colors[props.theme].card.themeColor;
56
55
  }, function (props) {
57
- return props.upload_type === 'rc' ? '#FFFFFF' : '#15212F';
56
+ return props.upload_type === "rc" ? "#FFFFFF" : "#0C141D";
58
57
  });
59
- var HoverActionContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-left: 6px;\n"])));
60
- var StatusBoxStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ", ";\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ", ";\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n"])), OverlayBackgroundStyles, function (_ref7) {
58
+ var StatusBoxStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ", ";\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ", ";\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n"])), OverlayBackgroundStyles, function (_ref7) {
61
59
  var hex = _ref7.hex;
62
60
  return hex.background;
63
61
  });
64
62
  var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
65
63
  return /*#__PURE__*/_react["default"].createElement(_cardV.BaseButtonStyles, props);
66
- })(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n\n .tooltip {\n position: absolute;\n bottom: 130%;\n left: 30%;\n transform: translateX(-50%);\n padding: 5px 9px;\n box-sizing: border-box;\n background: #000000;\n color: #fff;\n border-radius: 10px;\n visibility: hidden;\n opacity: 0;\n z-index: 10;\n transition: all 350ms ease-in-out 0s;\n &:after {\n content: '';\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid #000;\n bottom: -5px;\n left: 50%;\n }\n .details-header {\n color: #666666;\n font-family: 'SFUIText-Regular';\n text-transform: none;\n margin-bottom: 8px;\n }\n .details-value {\n color: #999999;\n font-family: 'SFUIText-Light';\n text-transform: none;\n font-size: 10px;\n }\n }\n\n &:hover {\n background-color: ", ";\n .tooltip {\n opacity: 1;\n visibility: visible;\n }\n }\n &:active,\n &:focus {\n outline: none;\n }\n"])), OverlayBackgroundStyles, function (props) {
64
+ })(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n\n .tooltip {\n position: absolute;\n bottom: 130%;\n left: 30%;\n transform: translateX(-50%);\n padding: 5px 9px;\n box-sizing: border-box;\n background: #000000;\n color: #fff;\n border-radius: 10px;\n visibility: hidden;\n opacity: 0;\n z-index: 10;\n transition: all 350ms ease-in-out 0s;\n &:after {\n content: \"\";\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid #000;\n bottom: -5px;\n left: 50%;\n }\n .details-header {\n color: #666666;\n font-family: \"SFUIText-Regular\";\n text-transform: none;\n margin-bottom: 8px;\n }\n .details-value {\n color: #999999;\n font-family: \"SFUIText-Light\";\n text-transform: none;\n font-size: 10px;\n }\n }\n\n &:hover {\n background-color: ", ";\n .tooltip {\n opacity: 1;\n visibility: visible;\n }\n }\n &:active,\n &:focus {\n outline: none;\n }\n"])), OverlayBackgroundStyles, function (props) {
67
65
  return _tokens.colors[props.theme].card.themeColor;
68
66
  });
69
- var CardHeader = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n padding: 10px;\n"])));
70
- var BottomActionContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n bottom: 8px;\n right: 8px;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 6px;\n z-index: 3;\n opacity: 1;\n"])));
67
+ var CardHeader = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n padding: 10px;\n"])));
71
68
  var Thumbnail = function Thumbnail(props) {
72
69
  var theme = props.theme,
73
70
  width = props.width,
@@ -80,9 +77,7 @@ var Thumbnail = function Thumbnail(props) {
80
77
  upload_status = props.upload_status,
81
78
  upload_type = props.upload_type,
82
79
  file_type = props.file_type,
83
- data_type = props.data_type,
84
- onUploadTypeClick = props.onUploadTypeClick,
85
- showPointer = props.showPointer;
80
+ data_type = props.data_type;
86
81
  var _useState = (0, _react.useState)(null),
87
82
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
88
83
  statusIndex = _useState2[0],
@@ -96,7 +91,7 @@ var Thumbnail = function Thumbnail(props) {
96
91
  var hoverPointerRef = (0, _react.useRef)(null);
97
92
  (0, _react.useEffect)(function () {
98
93
  if (actions && actions.length > 0 && actions.some(function (item) {
99
- return item.field === 'upload' || item.field === 'phupload_ingest';
94
+ return item.field === "upload" || item.field === "phupload_ingest";
100
95
  }) // can add multiple condition in future to prevent click
101
96
  ) {
102
97
  setClickPreventation(true);
@@ -111,7 +106,7 @@ var Thumbnail = function Thumbnail(props) {
111
106
  * @const
112
107
  */
113
108
  var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
114
- return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(' ').join('_') : []);
109
+ return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(" ").join("_") : []);
115
110
  });
116
111
  setStatusIndex(index);
117
112
  }, [upload_status, card_status]);
@@ -126,13 +121,13 @@ var Thumbnail = function Thumbnail(props) {
126
121
  var iframeOffsetHeight = offsetHeight / iframeCount;
127
122
  var imageChangePoint = offsetWidth / iframeCount;
128
123
  var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
129
- hoverPointerRef.current.style.left = event.offsetX + 'px';
124
+ hoverPointerRef.current.style.left = event.offsetX + "px";
130
125
  var imageNum = parseInt(event.offsetX / imageChangePoint) || 1;
131
126
  var imageTop = iframeOffsetHeight * imageNum + offsetTop;
132
127
  if (imageTop > offsetHeight) {
133
128
  imageTop = offsetHeight + offsetTop - iframeOffsetHeight;
134
129
  }
135
- iframeImageRef.current.style.top = '-' + imageTop + 'px';
130
+ iframeImageRef.current.style.top = "-" + imageTop + "px";
136
131
  }
137
132
  }, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
138
133
 
@@ -143,21 +138,11 @@ var Thumbnail = function Thumbnail(props) {
143
138
  */
144
139
  var handleThumbnailClick = (0, _react.useCallback)(function (e) {
145
140
  if (!isClickPrevented) {
146
- actionClick(e, 'play', ingest_db_id);
141
+ actionClick(e, "play", ingest_db_id);
147
142
  } else {
148
143
  e.preventDefault();
149
144
  }
150
145
  }, [isClickPrevented]);
151
- var handleActionIconClick = (0, _react.useCallback)(function (e, item) {
152
- e.stopPropagation();
153
- actionClick(e, item.field);
154
- }, [actionClick]);
155
- var handleUploadTypeClick = (0, _react.useCallback)(function (e) {
156
- e.stopPropagation();
157
- if (onUploadTypeClick) {
158
- onUploadTypeClick();
159
- }
160
- }, [onUploadTypeClick]);
161
146
  return /*#__PURE__*/_react["default"].createElement(ThumbnailStyles, {
162
147
  width: width,
163
148
  thumbnail: thumbnail,
@@ -165,7 +150,14 @@ var Thumbnail = function Thumbnail(props) {
165
150
  onClick: handleThumbnailClick,
166
151
  theme: props.theme,
167
152
  data_type: data_type
168
- }, /*#__PURE__*/_react["default"].createElement(CardHeader, null, /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
153
+ }, /*#__PURE__*/_react["default"].createElement(CardHeader, null, upload_type && /*#__PURE__*/_react["default"].createElement(UploadTypeContainer, {
154
+ theme: props.theme,
155
+ upload_type: upload_type && upload_type.toLowerCase()
156
+ }, /*#__PURE__*/_react["default"].createElement("div", {
157
+ className: "uploadWrapper"
158
+ }, /*#__PURE__*/_react["default"].createElement("p", {
159
+ className: "wrapper"
160
+ }, upload_type))), /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
169
161
  theme: props.theme,
170
162
  className: "asset-card-thumbnail-head",
171
163
  display: "flex",
@@ -174,15 +166,20 @@ var Thumbnail = function Thumbnail(props) {
174
166
  position: "relative",
175
167
  zIndex: "2",
176
168
  marginLeft: "auto"
177
- }, !showPointer && /*#__PURE__*/_react["default"].createElement(HoverActionContainer, null, /*#__PURE__*/_react["default"].createElement(HoverActionButton, {
178
- type: "button",
179
- onClick: handleUploadTypeClick
180
- }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
181
- name: "info",
182
- width: 14,
183
- height: 14,
184
- theme: props.theme
185
- }))))), actions && actions.length && /*#__PURE__*/_react["default"].createElement(BottomActionContainer, null, actions.map(function (item, i) {
169
+ }, (card_status || upload_status) && /*#__PURE__*/_react["default"].createElement(StatusBoxStyles, {
170
+ theme: props.theme,
171
+ hex: _tokens2.CARD_ASSET_STATUS[statusIndex] ? _tokens2.CARD_ASSET_STATUS[statusIndex].hex : {
172
+ background: "#AFB2BA"
173
+ }
174
+ }, /*#__PURE__*/_react["default"].createElement("div", {
175
+ className: "status-color"
176
+ }), /*#__PURE__*/_react["default"].createElement(_cardV.BaseParaStyles, {
177
+ theme: props.theme,
178
+ className: "status-text",
179
+ display: "inline-block",
180
+ fontSize: "10px",
181
+ color: "#FFF"
182
+ }, card_status || upload_status)) || null, actions && actions.length && actions.map(function (item, i) {
186
183
  return item.icon && /*#__PURE__*/_react["default"].createElement(IconButtonStyles, {
187
184
  theme: props.theme,
188
185
  className: "asset-card-thumbnail-icon-button",
@@ -195,19 +192,20 @@ var Thumbnail = function Thumbnail(props) {
195
192
  height: "26px",
196
193
  padding: "0px",
197
194
  width: "26px",
198
- margin: "0",
195
+ margin: actions.length === i + 1 ? "0" : "0 5px 0px 0px",
199
196
  onClick: function onClick(e) {
200
- return handleActionIconClick(e, item);
197
+ e.stopPropagation();
198
+ actionClick(e, item.field);
201
199
  }
202
200
  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
203
201
  name: item.icon,
204
- width: 22,
205
- height: 24,
202
+ width: 14,
203
+ height: 14,
206
204
  theme: props.theme
207
205
  }), /*#__PURE__*/_react["default"].createElement("div", {
208
206
  className: "tooltip"
209
207
  }, item.title));
210
- })) || null, file_type && !thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
208
+ }) || null)), file_type && !thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
211
209
  className: "thumbnail-image-block background-block"
212
210
  }, /*#__PURE__*/_react["default"].createElement("div", {
213
211
  className: "circle"
@@ -229,7 +227,7 @@ var Thumbnail = function Thumbnail(props) {
229
227
  })) || null);
230
228
  };
231
229
  Thumbnail.propTypes = {
232
- theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
230
+ theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
233
231
  width: _propTypes["default"].string,
234
232
  thumbnail: _propTypes["default"].string,
235
233
  file_type: _propTypes["default"].string,
@@ -238,13 +236,12 @@ Thumbnail.propTypes = {
238
236
  card_status: _propTypes["default"].string,
239
237
  ingest_db_id: _propTypes["default"].string,
240
238
  actions: _propTypes["default"].instanceOf(Array),
241
- actionClick: _propTypes["default"].func,
242
- onUploadTypeClick: _propTypes["default"].func
239
+ actionClick: _propTypes["default"].func
243
240
  };
244
241
  Thumbnail.defaultProps = {
245
- theme: 'dark',
246
- width: 'lg',
247
- thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
248
- iframeurl: ''
242
+ theme: "dark",
243
+ width: "lg",
244
+ thumbnail: "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png",
245
+ iframeurl: ""
249
246
  };
250
247
  var _default = exports["default"] = Thumbnail;