@desynova-digital/components 9.2.1 → 9.2.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 (6) hide show
  1. package/atoms/cardV2/cardV2.js +7 -3
  2. package/atoms/cardV2/content.js +94 -150
  3. package/atoms/cardV2/contentV2.js +266 -0
  4. package/atoms/cardV2/thumbnail.js +58 -61
  5. package/atoms/cardV2/thumbnailV2.js +251 -0
  6. package/package.json +2 -2
package/atoms/cardV2/cardV2.js CHANGED
@@ -13,6 +13,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
13
  var _thumbnail = _interopRequireDefault(require("./thumbnail"));
14
14
  var _content = _interopRequireDefault(require("./content"));
15
15
  var _timeline = _interopRequireDefault(require("./timeline"));
16
+ var _contentV = _interopRequireDefault(require("./contentV2"));
17
+ var _thumbnailV = _interopRequireDefault(require("./thumbnailV2"));
16
18
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // components
17
19
  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); }
18
20
  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; }
@@ -50,9 +52,10 @@ var CardStyles = _styledComponents["default"].div(_templateObject6 || (_template
50
52
  });
51
53
  var CardV2 = function CardV2(props) {
52
54
  var width = props.width,
53
- type = props.type;
55
+ type = props.type,
56
+ isCardv2 = props.isCardv2;
54
57
  var content = (0, _react.useCallback)(function () {
55
- return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, type === 'timeline' && /*#__PURE__*/_react["default"].createElement(_timeline["default"], props) || null, /*#__PURE__*/_react["default"].createElement(_thumbnail["default"], props), /*#__PURE__*/_react["default"].createElement(_content["default"], props));
58
+ return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, type === 'timeline' && /*#__PURE__*/_react["default"].createElement(_timeline["default"], props), isCardv2 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_thumbnailV["default"], props), /*#__PURE__*/_react["default"].createElement(_contentV["default"], props)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_thumbnail["default"], props), /*#__PURE__*/_react["default"].createElement(_content["default"], props)));
56
59
  }, [props]);
57
60
 
58
61
  /**
@@ -86,7 +89,8 @@ CardV2.propTypes = {
86
89
  onUploadTypeClick: _propTypes["default"].func,
87
90
  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
88
91
  type: _propTypes["default"].oneOf(['asset', 'search']),
89
- bgColor: _propTypes["default"].oneOf(['primary', 'secondary'])
92
+ bgColor: _propTypes["default"].oneOf(['primary', 'secondary']),
93
+ isCardv2: _propTypes["default"].bool
90
94
  };
91
95
  CardV2.defaultProps = {
92
96
  isSegment: false,
package/atoms/cardV2/content.js CHANGED
@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports["default"] = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
11
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
12
  var _react = _interopRequireWildcard(require("react"));
14
13
  var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -16,199 +15,135 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
16
15
  var _cardV = require("./cardV2");
17
16
  var _icon = _interopRequireDefault(require("../../atoms/icon"));
18
17
  var _tokens = require("@desynova-digital/tokens");
19
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
20
19
  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
20
  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
21
  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"])));
22
+ var ToolTipStyles = (0, _styledComponents["default"])(function (props) {
23
+ return /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, props);
24
+ })(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n top: ", ";\n word-break: break-all;\n\n &:after {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent #000;\n }\n"])), function (props) {
25
+ return props.top ? props.top : '25px';
26
+ });
25
27
  var ParaStyles = (0, _styledComponents["default"])(function (props) {
26
28
  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);
29
+ })(_templateObject3 || (_templateObject3 = (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
30
  var TitleStyles = (0, _styledComponents["default"])(function (props) {
29
31
  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) {
32
+ })(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n font-family: SFUIText-Medium;\n -webkit-line-clamp: 2;\n height: 27px;\n cursor: ", ";\n"])), TextEllipsisStyles, function (_ref) {
31
33
  var isTitleClick = _ref.isTitleClick;
32
34
  return isTitleClick ? 'pointer' : 'default';
33
35
  });
34
- var ContentStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (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 .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: 10px;\n column-gap: 12px;\n position: relative;\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"])), function (_ref2) {
35
- var type = _ref2.type,
36
- width = _ref2.width;
37
- return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
38
- }, function (_ref3) {
39
- var width = _ref3.width;
36
+ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\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"])), function (_ref2) {
37
+ var width = _ref2.width;
40
38
  return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
41
- }, function (_ref4) {
42
- var type = _ref4.type,
43
- width = _ref4.width;
39
+ }, function (_ref3) {
40
+ var type = _ref3.type,
41
+ width = _ref3.width;
44
42
  if (width === 'sm' && type === 'search') {
45
43
  return '0px 13px';
46
44
  } else if (type === 'search' && width !== 'sm') {
47
45
  return '13px 0px';
48
46
  } else return '13px 15px';
49
- }, function (_ref5) {
50
- var bgColor = _ref5.bgColor,
51
- type = _ref5.type;
47
+ }, function (_ref4) {
48
+ var bgColor = _ref4.bgColor,
49
+ type = _ref4.type;
52
50
  return type === 'search' ? 'transparent' : bgColor === 'secondary' && type !== 'search' ? '#0C141D' : '#15212F';
53
51
  }, function (props) {
54
52
  return _tokens.colors[props.theme].filter.rgbthemeColor;
55
53
  }, function (props) {
56
54
  return _tokens.colors[props.theme].card.themeColor;
57
- }, function (_ref6) {
58
- var upload_type = _ref6.upload_type;
59
- var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
60
- var color = isRC ? '#ff6327' : '#00CEC6';
61
- var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
62
- return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n border: 1px solid ", ";\n color: ", ";\n background-color: ", ";\n "])), color, color, bg);
63
- }, function (_ref7) {
64
- var upload_type = _ref7.upload_type;
65
- return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
66
55
  });
67
- var SeasonEpisodeContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (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"])));
68
56
  var Content = function Content(props) {
69
57
  var h1 = props.h1,
70
58
  h2 = props.h2,
71
59
  h3 = props.h3,
72
60
  h4 = props.h4,
73
61
  h5 = props.h5,
74
- h6 = props.h6,
75
- h7 = props.h7,
76
62
  isSegment = props.isSegment,
77
63
  type = props.type,
78
64
  width = props.width,
79
65
  titleClick = props.titleClick,
80
66
  show_page_id = props.show_page_id,
81
67
  overlapping = props.overlapping,
82
- theme = props.theme,
83
- upload_type = props.upload_type,
84
- icon_status = props.icon_status,
85
- asset_type = props.asset_type;
86
- var ICON_DIMENSION_MAP = {
87
- snp_edit: {
88
- width: 10,
89
- height: 10
90
- },
91
- pgm_edit_V2: {
92
- width: 13,
93
- height: 10
94
- },
95
- subtitle_assign: {
96
- width: 12,
97
- height: 10
98
- },
99
- archive: {
100
- width: 10,
101
- height: 10
102
- },
103
- delivery: {
104
- width: 13,
105
- height: 10
106
- },
107
- dubbing_review: {
108
- width: 7,
109
- height: 10
68
+ theme = props.theme;
69
+ var _useState = (0, _react.useState)(''),
70
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
71
+ tooltipVisibleSection = _useState2[0],
72
+ setTooltipVisibleSection = _useState2[1];
73
+
74
+ /**
75
+ * toogle tooltip -> true / false
76
+ * @function
77
+ */
78
+ var handleTooltip = (0, _react.useCallback)(function (tooltipSection, tooltipText) {
79
+ return function () {
80
+ if (tooltipText.replace(/ /g, '').length >= (width === 'sm' ? 15 : 33)) {
81
+ setTooltipVisibleSection(tooltipSection);
82
+ }
83
+ };
84
+ }, []);
85
+
86
+ /**
87
+ * returns filtered list removing undefined from input array
88
+ * @function
89
+ */
90
+ var getTooltipData = function getTooltipData() {
91
+ for (var _len = arguments.length, list = new Array(_len), _key = 0; _key < _len; _key++) {
92
+ list[_key] = arguments[_key];
110
93
  }
111
- };
112
- var ICON_LABEL_MAP = {
113
- snp_edit: 'SNP edit',
114
- pgm_edit_V2: 'PGM edit',
115
- archive: 'Archive',
116
- delivery: 'Delivery',
117
- dubbing_review: 'Dubbing Review',
118
- subtitle_assign: 'Subtitle',
119
- file_ingest: 'Ingest'
120
- };
121
- var getIconLabel = function getIconLabel(iconName) {
122
- return ICON_LABEL_MAP[iconName] || (iconName === null || iconName === void 0 ? void 0 : iconName.replace(/_/g, ' ')) || '';
123
- };
124
- var STATUS_COLOR_MAP = {
125
- Success: '#18B96E',
126
- Pending: '#666666',
127
- Failed: '#FF6C56',
128
- 'In Progress': '#FF8D29',
129
- 'In Queue': '#F9E900'
130
- };
131
- var footerIcons = (icon_status || []).map(function (item) {
132
- var _STATUS_COLOR_MAP$ite, _ICON_DIMENSION_MAP$i;
133
- return _objectSpread({
134
- name: item.icon,
135
- status: item.status,
136
- tooltipLabel: "".concat(getIconLabel(item.icon)).concat(item.status ? " : ".concat(item.status) : ''),
137
- color: (_STATUS_COLOR_MAP$ite = STATUS_COLOR_MAP[item.status]) !== null && _STATUS_COLOR_MAP$ite !== void 0 ? _STATUS_COLOR_MAP$ite : '#AFB2BA'
138
- }, (_ICON_DIMENSION_MAP$i = ICON_DIMENSION_MAP[item.icon]) !== null && _ICON_DIMENSION_MAP$i !== void 0 ? _ICON_DIMENSION_MAP$i : {
139
- width: 10,
140
- height: 10
94
+ return list.map(function (ele) {
95
+ return ele && "".concat(ele, " ");
141
96
  });
142
- });
143
- var _useState = (0, _react.useState)(false),
144
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
145
- isFilesIconHovered = _useState2[0],
146
- setIsFilesIconHovered = _useState2[1];
97
+ };
147
98
  return /*#__PURE__*/_react["default"].createElement(ContentStyles, (0, _extends2["default"])({}, props, {
148
99
  className: "asset-card-content"
149
100
  }), /*#__PURE__*/_react["default"].createElement("div", {
150
- className: "title-parent"
101
+ className: "title-parent",
102
+ onMouseOver: handleTooltip('top', h1),
103
+ onMouseOut: handleTooltip('', h1)
151
104
  }, /*#__PURE__*/_react["default"].createElement(TitleStyles, {
152
105
  theme: props.theme,
153
106
  isTitleClick: show_page_id,
154
107
  onClick: function onClick(e) {
155
108
  return titleClick(e, show_page_id);
156
109
  },
157
- fontSize: "12px",
110
+ fontSize: "14px",
158
111
  color: "#FFF"
159
- }, /*#__PURE__*/_react["default"].createElement("span", {
160
- className: "title-text",
161
- title: h1
162
- }, h1), h2 ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, {
163
- title: h2
164
- }, h2) : null, show_page_id && asset_type !== 'sports' ? /*#__PURE__*/_react["default"].createElement("span", {
165
- className: "files-associated-icon",
166
- onMouseEnter: function onMouseEnter() {
167
- return setIsFilesIconHovered(true);
168
- },
169
- onMouseLeave: function onMouseLeave() {
170
- return setIsFilesIconHovered(false);
171
- }
172
- }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
173
- name: "files-associated",
174
- width: 8,
175
- height: 8,
176
- color: isFilesIconHovered ? '#00CEC6' : '#AFB2BA'
177
- })) : null)), (h2 || h3 || h4 || h5 || h6 || isSegment) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (h3 || h4) && /*#__PURE__*/_react["default"].createElement("div", {
178
- className: "meta-row"
179
- }, h3 && /*#__PURE__*/_react["default"].createElement("span", {
180
- className: "meta-badge",
181
- title: h3
182
- }, h3), h4 && /*#__PURE__*/_react["default"].createElement("span", {
183
- className: "meta-text",
184
- title: h4
185
- }, h4), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
112
+ }, h1), tooltipVisibleSection == 'top' && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
113
+ theme: props.theme,
114
+ width: "100%",
115
+ padding: "0.5rem",
116
+ borderRadius: "0.25rem",
117
+ position: "absolute",
118
+ zIndex: "1",
119
+ bgColor: "#000",
120
+ fontSize: "12px",
121
+ color: "#FFF",
122
+ top: "30px"
123
+ }, h1)), (h2 || h3 || h4 || h5 || isSegment) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
124
+ theme: props.theme,
125
+ display: "flex",
126
+ justify: "space-between",
127
+ margin: "10px 0 0 0",
128
+ position: "relative",
129
+ onMouseOver: handleTooltip('bottom', getTooltipData(h2, h3, h4, h5).toString().replaceAll(',', '')),
130
+ onMouseOut: handleTooltip('', getTooltipData(h2, h3, h4, h5).toString().replaceAll(',', ''))
131
+ }, (h2 || h3 || isSegment) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
132
+ theme: props.theme,
133
+ display: "flex"
134
+ }, h2 && /*#__PURE__*/_react["default"].createElement(ParaStyles, null, h2), h3 && /*#__PURE__*/_react["default"].createElement(ParaStyles, null, h3), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
186
135
  className: "segment-indicator"
187
- }, "S")), (h5 || h6 || h7) && /*#__PURE__*/_react["default"].createElement("div", {
188
- className: "footer-row"
189
- }, h5 && /*#__PURE__*/_react["default"].createElement("span", {
190
- className: "footer-text",
191
- title: h5
192
- }, h5), h6 && /*#__PURE__*/_react["default"].createElement("span", {
193
- className: "footer-text",
194
- title: h6
195
- }, h6), h7 && /*#__PURE__*/_react["default"].createElement("span", {
196
- className: "footer-text",
197
- title: h7
198
- }, h7), /*#__PURE__*/_react["default"].createElement("span", {
199
- className: "footer-icons"
200
- }, footerIcons.map(function (icon) {
201
- return /*#__PURE__*/_react["default"].createElement("span", {
202
- key: icon.name,
203
- className: "footer-icon",
204
- title: icon.tooltipLabel
205
- }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
206
- name: icon.name,
207
- color: icon.color,
208
- width: icon.width,
209
- height: icon.height
210
- }));
211
- }))), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
136
+ }, "S")), (h4 || h5) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
137
+ theme: props.theme,
138
+ display: "flex"
139
+ }, h4 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
140
+ theme: props.theme,
141
+ style: {
142
+ marginRight: !h5 && 0
143
+ }
144
+ }, h4), h5 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
145
+ margin: "0"
146
+ }, h5)), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
212
147
  theme: props.theme,
213
148
  display: "flex",
214
149
  className: "overlapping-container"
@@ -247,7 +182,18 @@ var Content = function Content(props) {
247
182
  })))), overlapping.length > 1 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
248
183
  theme: props.theme,
249
184
  margin: "0"
250
- }, overlapping.length)) || null));
185
+ }, overlapping.length)) || null, tooltipVisibleSection == 'bottom' && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
186
+ theme: props.theme,
187
+ width: "100%",
188
+ padding: "0.5rem",
189
+ borderRadius: "0.25rem",
190
+ position: "absolute",
191
+ zIndex: "1",
192
+ bgColor: "#000",
193
+ fontSize: "12px",
194
+ color: "#FFF",
195
+ top: "15px"
196
+ }, getTooltipData(h2, h3, h4, h5))));
251
197
  };
252
198
  Content.propTypes = {
253
199
  h1: _propTypes["default"].string,
@@ -255,8 +201,6 @@ Content.propTypes = {
255
201
  h3: _propTypes["default"].string,
256
202
  h4: _propTypes["default"].string,
257
203
  h5: _propTypes["default"].string,
258
- h6: _propTypes["default"].string,
259
- h7: _propTypes["default"].string,
260
204
  width: _propTypes["default"].string,
261
205
  type: _propTypes["default"].string,
262
206
  titleClick: _propTypes["default"].func,
package/atoms/cardV2/contentV2.js ADDED
@@ -0,0 +1,266 @@
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 .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"])), 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 (props) {
55
+ return _tokens.colors[props.theme].filter.rgbthemeColor;
56
+ }, function (props) {
57
+ return _tokens.colors[props.theme].card.themeColor;
58
+ }, function (_ref6) {
59
+ var upload_type = _ref6.upload_type;
60
+ var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
61
+ var color = isRC ? '#ff6327' : '#00CEC6';
62
+ var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
63
+ return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n border: 1px solid ", ";\n color: ", ";\n background-color: ", ";\n "])), color, color, bg);
64
+ }, function (_ref7) {
65
+ var upload_type = _ref7.upload_type;
66
+ return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
67
+ });
68
+ 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"])));
69
+ var ContentV2 = function ContentV2(props) {
70
+ var title = props.title,
71
+ episode_label = props.episode_label,
72
+ version_label = props.version_label,
73
+ category_label = props.category_label,
74
+ date_count_label = props.date_count_label,
75
+ identifier_label = props.identifier_label,
76
+ language_label = props.language_label,
77
+ isSegment = props.isSegment,
78
+ type = props.type,
79
+ width = props.width,
80
+ titleClick = props.titleClick,
81
+ show_page_id = props.show_page_id,
82
+ overlapping = props.overlapping,
83
+ theme = props.theme,
84
+ upload_type = props.upload_type,
85
+ icon_status = props.icon_status,
86
+ asset_type = props.asset_type,
87
+ h1 = props.h1;
88
+ var ICON_DIMENSION_MAP = {
89
+ snp_edit: {
90
+ width: 10,
91
+ height: 10
92
+ },
93
+ pgm_edit_V2: {
94
+ width: 13,
95
+ height: 10
96
+ },
97
+ subtitle_assign: {
98
+ width: 12,
99
+ height: 10
100
+ },
101
+ archive: {
102
+ width: 10,
103
+ height: 10
104
+ },
105
+ delivery: {
106
+ width: 13,
107
+ height: 10
108
+ },
109
+ dubbing_review: {
110
+ width: 7,
111
+ height: 10
112
+ }
113
+ };
114
+ var ICON_LABEL_MAP = {
115
+ snp_edit: 'SNP edit',
116
+ pgm_edit_V2: 'PGM edit',
117
+ archive: 'Archive',
118
+ delivery: 'Delivery',
119
+ dubbing_review: 'Dubbing Review',
120
+ subtitle_assign: 'Subtitle',
121
+ file_ingest: 'Ingest'
122
+ };
123
+ var getIconLabel = function getIconLabel(iconName) {
124
+ return ICON_LABEL_MAP[iconName] || (iconName === null || iconName === void 0 ? void 0 : iconName.replace(/_/g, ' ')) || '';
125
+ };
126
+ var STATUS_COLOR_MAP = {
127
+ Success: '#18B96E',
128
+ Pending: '#666666',
129
+ Failed: '#FF6C56',
130
+ 'In Progress': '#FF8D29',
131
+ 'In Queue': '#F9E900'
132
+ };
133
+ var footerIcons = (icon_status || []).map(function (item) {
134
+ var _STATUS_COLOR_MAP$ite, _ICON_DIMENSION_MAP$i;
135
+ return _objectSpread({
136
+ name: item.icon,
137
+ status: item.status,
138
+ tooltipLabel: "".concat(getIconLabel(item.icon)).concat(item.status ? " : ".concat(item.status) : ''),
139
+ color: (_STATUS_COLOR_MAP$ite = STATUS_COLOR_MAP[item.status]) !== null && _STATUS_COLOR_MAP$ite !== void 0 ? _STATUS_COLOR_MAP$ite : '#AFB2BA'
140
+ }, (_ICON_DIMENSION_MAP$i = ICON_DIMENSION_MAP[item.icon]) !== null && _ICON_DIMENSION_MAP$i !== void 0 ? _ICON_DIMENSION_MAP$i : {
141
+ width: 10,
142
+ height: 10
143
+ });
144
+ });
145
+ var _useState = (0, _react.useState)(false),
146
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
147
+ isFilesIconHovered = _useState2[0],
148
+ setIsFilesIconHovered = _useState2[1];
149
+ var combinedTooltip = [title || h1 ? "Title: ".concat(title || h1) : null, episode_label ? "Episode: ".concat(episode_label) : null, version_label ? "Version: ".concat(version_label) : null, category_label ? "Category: ".concat(category_label) : null, date_count_label ? "Date: ".concat(date_count_label) : null, identifier_label ? "ID: ".concat(identifier_label) : null, language_label ? "Language: ".concat(language_label) : null, footerIcons.length ? "Status: ".concat(footerIcons.map(function (i) {
150
+ return i.tooltipLabel;
151
+ }).join(', ')) : null].filter(Boolean).join(' | ');
152
+ return /*#__PURE__*/_react["default"].createElement(ContentStyles, (0, _extends2["default"])({}, props, {
153
+ className: "asset-card-content",
154
+ title: combinedTooltip
155
+ }), /*#__PURE__*/_react["default"].createElement("div", {
156
+ className: "title-parent"
157
+ }, /*#__PURE__*/_react["default"].createElement(TitleStyles, {
158
+ theme: props.theme,
159
+ isTitleClick: show_page_id,
160
+ onClick: function onClick(e) {
161
+ return titleClick(e, show_page_id);
162
+ },
163
+ fontSize: "12px",
164
+ color: "#FFF"
165
+ }, /*#__PURE__*/_react["default"].createElement("span", {
166
+ className: "title-text"
167
+ }, title || h1), episode_label ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, null, episode_label) : null, show_page_id && asset_type !== 'sports' ? /*#__PURE__*/_react["default"].createElement("span", {
168
+ className: "files-associated-icon",
169
+ onMouseEnter: function onMouseEnter() {
170
+ return setIsFilesIconHovered(true);
171
+ },
172
+ onMouseLeave: function onMouseLeave() {
173
+ return setIsFilesIconHovered(false);
174
+ }
175
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
176
+ name: "files-associated",
177
+ width: 8,
178
+ height: 8,
179
+ color: isFilesIconHovered ? '#00CEC6' : '#AFB2BA'
180
+ })) : 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", {
181
+ className: "meta-row"
182
+ }, version_label && /*#__PURE__*/_react["default"].createElement("span", {
183
+ className: "meta-badge"
184
+ }, version_label), category_label && /*#__PURE__*/_react["default"].createElement("span", {
185
+ className: "meta-text"
186
+ }, category_label), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
187
+ className: "segment-indicator"
188
+ }, "S")), (date_count_label || identifier_label || language_label) && /*#__PURE__*/_react["default"].createElement("div", {
189
+ className: "footer-row"
190
+ }, date_count_label && /*#__PURE__*/_react["default"].createElement("span", {
191
+ className: "footer-text"
192
+ }, date_count_label), identifier_label && /*#__PURE__*/_react["default"].createElement("span", {
193
+ className: "footer-text"
194
+ }, identifier_label), language_label && /*#__PURE__*/_react["default"].createElement("span", {
195
+ className: "footer-text"
196
+ }, language_label), /*#__PURE__*/_react["default"].createElement("span", {
197
+ className: "footer-icons"
198
+ }, footerIcons.map(function (icon) {
199
+ return /*#__PURE__*/_react["default"].createElement("span", {
200
+ key: icon.name,
201
+ className: "footer-icon"
202
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
203
+ name: icon.name,
204
+ color: icon.color,
205
+ width: icon.width,
206
+ height: icon.height
207
+ }));
208
+ }))), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
209
+ theme: props.theme,
210
+ display: "flex",
211
+ className: "overlapping-container"
212
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
213
+ theme: props.theme,
214
+ name: "overlapping"
215
+ }), /*#__PURE__*/_react["default"].createElement("div", {
216
+ className: "overlappig-popup-container"
217
+ }, /*#__PURE__*/_react["default"].createElement("div", {
218
+ className: "overlappig-popup"
219
+ }, /*#__PURE__*/_react["default"].createElement("div", {
220
+ className: "popup-pointer"
221
+ }), /*#__PURE__*/_react["default"].createElement("div", {
222
+ className: "overlappig-popup-title"
223
+ }, "Overlapping with:"), /*#__PURE__*/_react["default"].createElement("div", {
224
+ className: "overlapping-episod-list-container"
225
+ }, overlapping.map(function (value, index) {
226
+ return /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("div", {
227
+ className: "header-container"
228
+ }, /*#__PURE__*/_react["default"].createElement("div", {
229
+ className: "thumbnail",
230
+ style: {
231
+ backgroundImage: "url(".concat(value.thumbnail ? value.thumbnail : 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png', " )")
232
+ }
233
+ }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
234
+ className: "episod-title"
235
+ }, value.episode_name), /*#__PURE__*/_react["default"].createElement("div", {
236
+ className: "episod-details"
237
+ }, "S".concat(value.season_no, " E").concat(value.episode_no), /*#__PURE__*/_react["default"].createElement("span", {
238
+ style: {
239
+ marginLeft: '10px'
240
+ }
241
+ }, value.duration, " Min")))), index != overlapping.length - 1 && /*#__PURE__*/_react["default"].createElement("div", {
242
+ className: "divider"
243
+ }));
244
+ })))), overlapping.length > 1 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
245
+ theme: props.theme,
246
+ margin: "0"
247
+ }, overlapping.length)) || null));
248
+ };
249
+ ContentV2.propTypes = {
250
+ title: _propTypes["default"].string,
251
+ episode_label: _propTypes["default"].string,
252
+ version_label: _propTypes["default"].string,
253
+ category_label: _propTypes["default"].string,
254
+ date_count_label: _propTypes["default"].string,
255
+ identifier_label: _propTypes["default"].string,
256
+ language_label: _propTypes["default"].string,
257
+ width: _propTypes["default"].string,
258
+ type: _propTypes["default"].string,
259
+ titleClick: _propTypes["default"].func,
260
+ theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
261
+ };
262
+ ContentV2.defaultProps = {
263
+ theme: 'dark',
264
+ isSegment: false
265
+ };
266
+ 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;
package/atoms/cardV2/thumbnailV2.js ADDED
@@ -0,0 +1,251 @@
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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
+ var _propTypes = _interopRequireDefault(require("prop-types"));
14
+ var _tokens = require("@desynova-digital/tokens");
15
+ var _icon = _interopRequireDefault(require("../../atoms/icon"));
16
+ var _tokens2 = require("../../../tokens");
17
+ var _cardV = require("./cardV2");
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // atoms
19
+ // tokens
20
+ // styles
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); }
22
+ 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; }
23
+ var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n background: rgba(0, 0, 0, 0.5);\n"])));
24
+ var assetStyles = {
25
+ folder: {
26
+ backgroundColor: '#121D29',
27
+ backgroundSize: 'inherit'
28
+ },
29
+ asset: {
30
+ backgroundColor: 'inherit',
31
+ backgroundSize: 'cover'
32
+ }
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) {
36
+ var thumbnail = _ref.thumbnail;
37
+ return "url(".concat(thumbnail, ") no-repeat 50%");
38
+ }, function (_ref2) {
39
+ var data_type = _ref2.data_type;
40
+ return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : 'inherit';
41
+ }, function (_ref3) {
42
+ var data_type = _ref3.data_type;
43
+ return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : 'cover';
44
+ }, function (_ref4) {
45
+ var width = _ref4.width;
46
+ return width === 'sm' ? '90px' : width === 'md' ? '125px' : '222px';
47
+ }, function (_ref5) {
48
+ var width = _ref5.width;
49
+ return width === 'sm' ? '50px' : width === 'md' ? '70px' : '110px';
50
+ }, function (_ref6) {
51
+ 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;
56
+ }, function (props) {
57
+ return props.upload_type === 'rc' ? '#FFFFFF' : '#15212F';
58
+ });
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) {
61
+ var hex = _ref7.hex;
62
+ return hex.background;
63
+ });
64
+ var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
65
+ 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) {
67
+ return _tokens.colors[props.theme].card.themeColor;
68
+ });
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"])));
71
+ var ThumbnailV2 = function ThumbnailV2(props) {
72
+ var theme = props.theme,
73
+ width = props.width,
74
+ thumbnail = props.thumbnail,
75
+ iframeurl = props.iframeurl,
76
+ card_status = props.card_status,
77
+ actions = props.actions,
78
+ ingest_db_id = props.ingest_db_id,
79
+ actionClick = props.actionClick,
80
+ upload_status = props.upload_status,
81
+ upload_type = props.upload_type,
82
+ file_type = props.file_type,
83
+ data_type = props.data_type,
84
+ onUploadTypeClick = props.onUploadTypeClick,
85
+ showPointer = props.showPointer;
86
+ var _useState = (0, _react.useState)(null),
87
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
88
+ statusIndex = _useState2[0],
89
+ setStatusIndex = _useState2[1];
90
+ var _useState3 = (0, _react.useState)(false),
91
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
92
+ isClickPrevented = _useState4[0],
93
+ setClickPreventation = _useState4[1];
94
+ var iframeImageBlockRef = (0, _react.useRef)(null);
95
+ var iframeImageRef = (0, _react.useRef)(null);
96
+ var hoverPointerRef = (0, _react.useRef)(null);
97
+ (0, _react.useEffect)(function () {
98
+ if (actions && actions.length > 0 && actions.some(function (item) {
99
+ return item.field === 'upload' || item.field === 'phupload_ingest';
100
+ }) // can add multiple condition in future to prevent click
101
+ ) {
102
+ setClickPreventation(true);
103
+ }
104
+ }, [actions && JSON.stringify(actions).length > 0]);
105
+ (0, _react.useEffect)(function () {
106
+ /**
107
+ * will return the hex based status passed
108
+ * eg. status = In Progress -> will format to "in_progress"
109
+ * then it will find its index in CARD_ASSET_STATUS which will
110
+ * return hex
111
+ * @const
112
+ */
113
+ 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('_') : []);
115
+ });
116
+ setStatusIndex(index);
117
+ }, [upload_status, card_status]);
118
+ var handleMouseMove = (0, _react.useCallback)(function () {
119
+ if (iframeImageBlockRef && hoverPointerRef && iframeImageRef) {
120
+ var iframeBlockHeight = iframeImageBlockRef.current.offsetHeight;
121
+ var iframeOgHeight = 120;
122
+ var ogHeight = iframeImageRef.current.naturalHeight;
123
+ var offsetHeight = iframeImageRef.current.offsetHeight;
124
+ var offsetWidth = iframeImageRef.current.offsetWidth;
125
+ var iframeCount = ogHeight / iframeOgHeight;
126
+ var iframeOffsetHeight = offsetHeight / iframeCount;
127
+ var imageChangePoint = offsetWidth / iframeCount;
128
+ var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
129
+ hoverPointerRef.current.style.left = event.offsetX + 'px';
130
+ var imageNum = parseInt(event.offsetX / imageChangePoint) || 1;
131
+ var imageTop = iframeOffsetHeight * imageNum + offsetTop;
132
+ if (imageTop > offsetHeight) {
133
+ imageTop = offsetHeight + offsetTop - iframeOffsetHeight;
134
+ }
135
+ iframeImageRef.current.style.top = '-' + imageTop + 'px';
136
+ }
137
+ }, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
138
+
139
+ /**
140
+ * will decide thumbnail click based on its condition
141
+ * eg. if task_type === upload then prevent click
142
+ * @function
143
+ */
144
+ var handleThumbnailClick = (0, _react.useCallback)(function (e) {
145
+ if (!isClickPrevented) {
146
+ actionClick(e, 'play', ingest_db_id);
147
+ } else {
148
+ e.preventDefault();
149
+ }
150
+ }, [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
+ return /*#__PURE__*/_react["default"].createElement(ThumbnailStyles, {
162
+ width: width,
163
+ thumbnail: thumbnail,
164
+ isClickPrevented: isClickPrevented,
165
+ onClick: handleThumbnailClick,
166
+ theme: props.theme,
167
+ data_type: data_type
168
+ }, /*#__PURE__*/_react["default"].createElement(CardHeader, null, /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
169
+ theme: props.theme,
170
+ className: "asset-card-thumbnail-head",
171
+ display: "flex",
172
+ justify: "flex-end",
173
+ align: "center",
174
+ position: "relative",
175
+ zIndex: "2",
176
+ marginLeft: "auto"
177
+ }, ingest_db_id && /*#__PURE__*/_react["default"].createElement(HoverActionContainer, null, /*#__PURE__*/_react["default"].createElement(HoverActionButton, {
178
+ type: "button",
179
+ onClick: handleUploadTypeClick,
180
+ title: "Info"
181
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
182
+ name: "info",
183
+ width: 14,
184
+ height: 14,
185
+ theme: props.theme
186
+ }))))), actions && actions.length && /*#__PURE__*/_react["default"].createElement(BottomActionContainer, null, actions.map(function (item, i) {
187
+ return item.icon && /*#__PURE__*/_react["default"].createElement(IconButtonStyles, {
188
+ theme: props.theme,
189
+ className: "asset-card-thumbnail-icon-button",
190
+ type: "button",
191
+ key: i,
192
+ position: "relative",
193
+ border: "none",
194
+ cursor: "pointer",
195
+ borderRadius: "15px",
196
+ height: "26px",
197
+ padding: "0px",
198
+ width: "26px",
199
+ margin: "0",
200
+ onClick: function onClick(e) {
201
+ return handleActionIconClick(e, item);
202
+ }
203
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
204
+ name: item.icon,
205
+ width: 22,
206
+ height: 24,
207
+ theme: props.theme
208
+ }), /*#__PURE__*/_react["default"].createElement("div", {
209
+ className: "tooltip"
210
+ }, item.title));
211
+ })) || null, file_type && !thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
212
+ className: "thumbnail-image-block background-block"
213
+ }, /*#__PURE__*/_react["default"].createElement("div", {
214
+ className: "circle"
215
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
216
+ name: "".concat(file_type, "-icon"),
217
+ width: 20,
218
+ height: 20
219
+ }))) : null, iframeurl && /*#__PURE__*/_react["default"].createElement("div", {
220
+ onMouseMove: handleMouseMove,
221
+ className: "iframe-image-block background-block",
222
+ ref: iframeImageBlockRef
223
+ }, /*#__PURE__*/_react["default"].createElement("div", {
224
+ className: "hover-pointer",
225
+ ref: hoverPointerRef
226
+ }), /*#__PURE__*/_react["default"].createElement("img", {
227
+ ref: iframeImageRef,
228
+ className: "iframe-image",
229
+ src: iframeurl
230
+ })) || null);
231
+ };
232
+ ThumbnailV2.propTypes = {
233
+ theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
234
+ width: _propTypes["default"].string,
235
+ thumbnail: _propTypes["default"].string,
236
+ file_type: _propTypes["default"].string,
237
+ iframeurl: _propTypes["default"].string,
238
+ upload_status: _propTypes["default"].string,
239
+ card_status: _propTypes["default"].string,
240
+ ingest_db_id: _propTypes["default"].string,
241
+ actions: _propTypes["default"].instanceOf(Array),
242
+ actionClick: _propTypes["default"].func,
243
+ onUploadTypeClick: _propTypes["default"].func
244
+ };
245
+ ThumbnailV2.defaultProps = {
246
+ theme: 'dark',
247
+ width: 'lg',
248
+ thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
249
+ iframeurl: ''
250
+ };
251
+ var _default = exports["default"] = ThumbnailV2;
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.2.1",
3
+ "version": "9.2.2",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "9.2.1",
10
+ "@desynova-digital/tokens": "9.2.2",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },