@desynova-digital/components 9.2.26 → 9.2.27
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.
- package/atoms/cardV2/cardV2.js +1 -1
- package/atoms/cardV2/contentV2.js +38 -19
- package/atoms/cardV2/thumbnailV2.js +183 -55
- package/package.json +2 -2
package/atoms/cardV2/cardV2.js
CHANGED
|
@@ -41,7 +41,7 @@ var CommonStyles = exports.CommonStyles = (0, _styledComponents.css)(_templateOb
|
|
|
41
41
|
var DivStyles = exports.DivStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n"])), CommonStyles);
|
|
42
42
|
var BaseParaStyles = exports.BaseParaStyles = _styledComponents["default"].p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n ", ";\n"])), CommonStyles);
|
|
43
43
|
var BaseButtonStyles = exports.BaseButtonStyles = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n ", ";\n"])), CommonStyles);
|
|
44
|
-
var CardStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n border-radius:
|
|
44
|
+
var CardStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n border-radius: 10px;\n overflow: hidden;\n width: ", ";\n\n border: 1px solid transparent;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.18);\n\n /* \u2705 Center pop baseline */\n transform: scale(1);\n transform-origin: 50% 50%;\n\n /* \u2705 Make it pop above siblings */\n z-index: 0;\n isolation: isolate;\n\n transition:\n transform 240ms cubic-bezier(0.16, 1, 0.3, 1),\n box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),\n border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);\n\n will-change: transform;\n\n /* \uD83D\uDD25 Glow Layer */\n &::after {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 10px;\n pointer-events: none;\n opacity: 0;\n transition: all 0.4s ease-out;\n\n box-shadow: ", ";\n }\n\n /* \u2705 Hover = pop from center (NO translate) */\n &:hover {\n transform: scale(1.035);\n z-index: 5;\n border-color: ", ";\n box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n }\n\n &:hover::after {\n opacity: 1;\n }\n"])), function (_ref2) {
|
|
45
45
|
var width = _ref2.width;
|
|
46
46
|
return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
|
|
47
47
|
}, function (_ref3) {
|
|
@@ -32,8 +32,8 @@ var TitleStyles = (0, _styledComponents["default"])(function (props) {
|
|
|
32
32
|
var isTitleClick = _ref.isTitleClick;
|
|
33
33
|
return isTitleClick ? 'pointer' : 'default';
|
|
34
34
|
});
|
|
35
|
-
var ContentBody = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n
|
|
36
|
-
var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n padding: ", ";\n background-color: ", ";\n border-radius: 0 0
|
|
35
|
+
var ContentBody = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n"])));
|
|
36
|
+
var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n padding: ", ";\n background-color: ", ";\n border-radius: 0 0 10px 10px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n &.no-meta-row {\n ", "\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 cursor: default;\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 cursor: default;\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) {
|
|
37
37
|
var type = _ref2.type,
|
|
38
38
|
width = _ref2.width;
|
|
39
39
|
return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
|
|
@@ -45,9 +45,11 @@ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templ
|
|
|
45
45
|
width = _ref4.width;
|
|
46
46
|
if (width === 'sm' && type === 'search') {
|
|
47
47
|
return '0px 13px';
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
}
|
|
49
|
+
if (type === 'search' && width !== 'sm') {
|
|
50
|
+
return '13px 16px';
|
|
51
|
+
}
|
|
52
|
+
return '13px 15px';
|
|
51
53
|
}, function (_ref5) {
|
|
52
54
|
var bgColor = _ref5.bgColor,
|
|
53
55
|
type = _ref5.type;
|
|
@@ -55,28 +57,39 @@ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templ
|
|
|
55
57
|
}, function (_ref6) {
|
|
56
58
|
var type = _ref6.type,
|
|
57
59
|
width = _ref6.width;
|
|
58
|
-
return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '62px' : '
|
|
59
|
-
}, function (_ref7) {
|
|
60
|
-
var type = _ref7.type,
|
|
61
|
-
width = _ref7.width;
|
|
62
|
-
if (type === 'search' || width === 'sm') return 'height: auto;';
|
|
63
|
-
if (width === 'md') return 'height: 62px;';
|
|
64
|
-
return '';
|
|
60
|
+
return type === 'search' || width === 'sm' ? 'height: auto;' : width === 'md' ? 'height: 62px;' : '';
|
|
65
61
|
}, function (props) {
|
|
66
62
|
return _tokens.colors[props.theme].filter.rgbthemeColor;
|
|
67
63
|
}, function (props) {
|
|
68
64
|
return _tokens.colors[props.theme].card.themeColor;
|
|
69
|
-
}, function (
|
|
70
|
-
var upload_type =
|
|
65
|
+
}, function (_ref7) {
|
|
66
|
+
var upload_type = _ref7.upload_type;
|
|
71
67
|
var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
|
|
72
68
|
var color = isRC ? '#ff6327' : '#00CEC6';
|
|
73
69
|
var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
|
|
74
70
|
return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n border: 1px solid ", ";\n color: ", ";\n background-color: ", ";\n "])), color, color, bg);
|
|
75
|
-
}, function (
|
|
76
|
-
var upload_type =
|
|
71
|
+
}, function (_ref8) {
|
|
72
|
+
var upload_type = _ref8.upload_type;
|
|
77
73
|
return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
|
|
78
74
|
});
|
|
79
75
|
var SeasonEpisodeContainer = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-shrink: 0;\n padding: 3px 4px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.12);\n border: 1px solid rgba(255, 255, 255, 0.08);\n color: #fff;\n text-align: center;\n font-family: 'SFUIText-Regular';\n font-size: 10px;\n line-height: 10px;\n font-style: normal;\n font-weight: 400;\n height: auto;\n width: auto;\n margin-left: 6px;\n box-sizing: border-box;\n span {\n padding: 0px 2px;\n }\n"])));
|
|
76
|
+
var formatCreationDate = function formatCreationDate(creation) {
|
|
77
|
+
if (creation === null || creation === undefined || creation === '') return '';
|
|
78
|
+
var rawValue = String(creation).trim();
|
|
79
|
+
if (!rawValue) return '';
|
|
80
|
+
var date = new Date(rawValue);
|
|
81
|
+
if (/^\d+$/.test(rawValue)) {
|
|
82
|
+
var numericValue = Number(rawValue);
|
|
83
|
+
date = rawValue.length === 10 ? new Date(numericValue * 1000) : new Date(numericValue);
|
|
84
|
+
}
|
|
85
|
+
if (Number.isNaN(date.getTime())) {
|
|
86
|
+
return rawValue;
|
|
87
|
+
}
|
|
88
|
+
var day = String(date.getDate()).padStart(2, '0');
|
|
89
|
+
var month = String(date.getMonth() + 1).padStart(2, '0');
|
|
90
|
+
var year = date.getFullYear();
|
|
91
|
+
return "".concat(day, "/").concat(month, "/").concat(year);
|
|
92
|
+
};
|
|
80
93
|
var ContentV2 = function ContentV2(props) {
|
|
81
94
|
var title = props.title,
|
|
82
95
|
episode_label = props.episode_label,
|
|
@@ -84,6 +97,7 @@ var ContentV2 = function ContentV2(props) {
|
|
|
84
97
|
category_label = props.category_label,
|
|
85
98
|
date_count_label = props.date_count_label,
|
|
86
99
|
identifier_label = props.identifier_label,
|
|
100
|
+
box_id = props.box_id,
|
|
87
101
|
language_label = props.language_label,
|
|
88
102
|
isSegment = props.isSegment,
|
|
89
103
|
titleClick = props.titleClick,
|
|
@@ -96,6 +110,9 @@ var ContentV2 = function ContentV2(props) {
|
|
|
96
110
|
extension = props.extension,
|
|
97
111
|
season_id = props.season_id,
|
|
98
112
|
isAdobe = props.isAdobe;
|
|
113
|
+
var formattedCreation = formatCreationDate(creation);
|
|
114
|
+
var displayCreation = date_count_label || formattedCreation;
|
|
115
|
+
var boxId = Array.isArray(box_id) ? box_id[0] || '' : box_id || '';
|
|
99
116
|
var ICON_DIMENSION_MAP = {
|
|
100
117
|
snp_edit: {
|
|
101
118
|
width: 10,
|
|
@@ -218,11 +235,13 @@ var ContentV2 = function ContentV2(props) {
|
|
|
218
235
|
className: "meta-text"
|
|
219
236
|
}, category_label), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
220
237
|
className: "segment-indicator"
|
|
221
|
-
}, "S")), (date_count_label || identifier_label || language_label || extension || creation) && /*#__PURE__*/_react["default"].createElement("div", {
|
|
238
|
+
}, "S")), (date_count_label || identifier_label || language_label || extension || creation || boxId) && /*#__PURE__*/_react["default"].createElement("div", {
|
|
222
239
|
className: "footer-row"
|
|
223
|
-
},
|
|
240
|
+
}, displayCreation && /*#__PURE__*/_react["default"].createElement("span", {
|
|
241
|
+
className: "footer-text"
|
|
242
|
+
}, displayCreation), boxId && /*#__PURE__*/_react["default"].createElement("span", {
|
|
224
243
|
className: "footer-text"
|
|
225
|
-
},
|
|
244
|
+
}, boxId), !boxId && (identifier_label || extension) && asset_type != 'movie' && /*#__PURE__*/_react["default"].createElement("span", {
|
|
226
245
|
className: "footer-text"
|
|
227
246
|
}, identifier_label || extension), season_id && /*#__PURE__*/_react["default"].createElement("span", {
|
|
228
247
|
className: "footer-text"
|
|
@@ -15,8 +15,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
15
15
|
var _tokens = require("@desynova-digital/tokens");
|
|
16
16
|
var _icon = _interopRequireDefault(require("../../atoms/icon"));
|
|
17
17
|
var _tokens2 = require("../../../tokens");
|
|
18
|
+
var _statusV = _interopRequireDefault(require("../../../tokens/statusV2"));
|
|
18
19
|
var _cardV = require("./cardV2");
|
|
19
|
-
var
|
|
20
|
+
var _utils = require("../../_helpers/utils");
|
|
21
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24; // atoms
|
|
20
22
|
// tokens
|
|
21
23
|
// styles
|
|
22
24
|
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); }
|
|
@@ -33,51 +35,60 @@ var assetStyles = {
|
|
|
33
35
|
}
|
|
34
36
|
};
|
|
35
37
|
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\n /* Add rotation only when the 'rotate-icon' class is present */\n &.rotate-icon svg,\n &.rotate-icon i {\n transform: rotate(90deg);\n }\n"])), OverlayBackgroundStyles);
|
|
36
|
-
var
|
|
37
|
-
var
|
|
38
|
+
var AssetTypeChip = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n height: 16.75px;\n padding: 2px 6px;\n align-items: center;\n border-radius: 4px;\n position: absolute;\n top: 10px;\n left: 10px;\n font-size: 8.5px;\n font-weight: 700;\n line-height: 12px;\n letter-spacing: 0.2px;\n font-family: \"SFUIText-Medium\";\n color: #233952;\n text-transform: uppercase;\n background: ", ";\n z-index: 10;\n"])), function (_ref) {
|
|
39
|
+
var theme = _ref.theme;
|
|
40
|
+
return _tokens.colors[theme].card.themeColor;
|
|
41
|
+
});
|
|
42
|
+
var ThumbnailStatusPill = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 82px;\n left: 10px;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n min-width: 68px;\n height: 22px;\n padding: 0 10px 0 8px;\n border-radius: 11px;\n background: rgba(0, 0, 0, 0.6);\n color: #fff;\n font-family: \"SFUIText-Medium\";\n font-size: 10px;\n font-weight: 500;\n line-height: 10px;\n z-index: 10;\n\n .status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: ", ";\n flex-shrink: 0;\n }\n"])), function (_ref2) {
|
|
43
|
+
var bgColor = _ref2.bgColor;
|
|
44
|
+
return bgColor || "#18B96E";
|
|
45
|
+
});
|
|
46
|
+
var DurationBadge = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n padding: 4px 5px;\n flex-direction: column;\n align-items: flex-start;\n position: absolute;\n right: 10px;\n bottom: 8px;\n color: #fff;\n font-family: 'SFUIText-Regular';\n font-size: 9px;\n font-style: normal;\n font-weight: 700;\n line-height: 13.5px;\n letter-spacing: 0.2px;\n background: rgba(0, 0, 0, 0.7);\n border-radius: 4px;\n z-index: 10;\n"])));
|
|
47
|
+
var ThumbnailStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n overflow: visible;\n background: ", ";\n background-color: ", ";\n background-size: ", ";\n width: ", ";\n height: ", ";\n border-radius: 10px 10px 0 0;\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 svg path {\n fill: #afb2ba;\n }\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(\n 359deg,\n #182738 19.98%,\n #182738 48.97%,\n rgba(24, 39, 56, 0.42) 99.47%\n );\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (_ref3) {
|
|
48
|
+
var thumbnail = _ref3.thumbnail;
|
|
38
49
|
return "url(".concat(thumbnail, ") no-repeat 50%");
|
|
39
|
-
}, function (
|
|
40
|
-
var data_type =
|
|
50
|
+
}, function (_ref4) {
|
|
51
|
+
var data_type = _ref4.data_type;
|
|
41
52
|
return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : "inherit";
|
|
42
|
-
}, function (
|
|
43
|
-
var data_type =
|
|
53
|
+
}, function (_ref5) {
|
|
54
|
+
var data_type = _ref5.data_type;
|
|
44
55
|
return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : "cover";
|
|
45
|
-
}, function (
|
|
46
|
-
var width =
|
|
56
|
+
}, function (_ref6) {
|
|
57
|
+
var width = _ref6.width;
|
|
47
58
|
return width === "sm" ? "90px" : width === "md" ? "125px" : "222px";
|
|
48
|
-
}, function (
|
|
49
|
-
var width =
|
|
59
|
+
}, function (_ref7) {
|
|
60
|
+
var width = _ref7.width;
|
|
50
61
|
return width === "sm" ? "50px" : width === "md" ? "70px" : "110px";
|
|
51
|
-
}, function (
|
|
52
|
-
var isClickPrevented =
|
|
62
|
+
}, function (_ref8) {
|
|
63
|
+
var isClickPrevented = _ref8.isClickPrevented;
|
|
53
64
|
return !isClickPrevented ? "pointer" : "default";
|
|
54
65
|
}, HoverActionButton);
|
|
55
|
-
var UploadTypeContainer = _styledComponents["default"].div(
|
|
66
|
+
var UploadTypeContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (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) {
|
|
56
67
|
return props.upload_type === "rc" ? "#FF6327" : _tokens.colors[props.theme].card.themeColor;
|
|
57
68
|
}, function (props) {
|
|
58
69
|
return props.upload_type === "rc" ? "#FFFFFF" : "#15212F";
|
|
59
70
|
});
|
|
60
|
-
var HoverActionContainer = _styledComponents["default"].div(
|
|
61
|
-
var StatusBoxStyles = _styledComponents["default"].div(
|
|
62
|
-
var hex =
|
|
71
|
+
var HoverActionContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-left: 6px;\n"])));
|
|
72
|
+
var StatusBoxStyles = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (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 (_ref9) {
|
|
73
|
+
var hex = _ref9.hex;
|
|
63
74
|
return hex.background;
|
|
64
75
|
});
|
|
65
76
|
|
|
66
77
|
// ---------- New styled components for nested dropdown ----------
|
|
67
|
-
var TopRightMenuContainer = _styledComponents["default"].div(
|
|
68
|
-
var DropdownContainer = _styledComponents["default"].div(
|
|
69
|
-
var Menu = _styledComponents["default"].ul(
|
|
70
|
-
var MenuItemWrapper = _styledComponents["default"].li(
|
|
71
|
-
var MenuItem = _styledComponents["default"].div(
|
|
72
|
-
var Divider = _styledComponents["default"].hr(
|
|
73
|
-
var SubMenu = _styledComponents["default"].div(
|
|
74
|
-
var RightArrow = _styledComponents["default"].span(
|
|
78
|
+
var TopRightMenuContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n z-index: 99999;\n"])));
|
|
79
|
+
var DropdownContainer = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n display: inline-block;\n"])));
|
|
80
|
+
var Menu = _styledComponents["default"].ul(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n list-style: none;\n margin: 0;\n padding: 4px 0;\n width: max-content;\n background: #182738;\n border-radius: 4px;\n min-width: 100px;\n box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.25);\n"])));
|
|
81
|
+
var MenuItemWrapper = _styledComponents["default"].li(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n font-family: \"SFUIText-Regular\";\n display: flex;\n flex-direction: column;\n\n &:last-child hr {\n display: none;\n }\n"])));
|
|
82
|
+
var MenuItem = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n color: #ffffff;\n padding: 8px 12px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n white-space: nowrap;\n font-size: 14px;\n transition: background 0.2s ease;\n\n &:hover {\n background: #1c2d44;\n }\n\n & svg {\n width: 14px;\n height: 14px;\n color: #fff;\n margin-left: 8px;\n }\n"])));
|
|
83
|
+
var Divider = _styledComponents["default"].hr(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n border: none;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n margin: 0;\n"])));
|
|
84
|
+
var SubMenu = _styledComponents["default"].div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 0;\n left: calc(100% - 2px);\n margin-left: 0;\n z-index: 100;\n"])));
|
|
85
|
+
var RightArrow = _styledComponents["default"].span(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-block;\n width: 0;\n height: 0;\n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n border-left: 5px solid #fff;\n margin-left: 8px;\n opacity: 0.8;\n"])));
|
|
75
86
|
// ----------------------------------------------------------------
|
|
76
87
|
|
|
77
88
|
// NestedDropdown and DropdownItem components
|
|
78
|
-
var NestedDropdown = function NestedDropdown(
|
|
79
|
-
var data =
|
|
80
|
-
onSelect =
|
|
89
|
+
var NestedDropdown = function NestedDropdown(_ref10) {
|
|
90
|
+
var data = _ref10.data,
|
|
91
|
+
onSelect = _ref10.onSelect;
|
|
81
92
|
return /*#__PURE__*/_react["default"].createElement(DropdownContainer, null, /*#__PURE__*/_react["default"].createElement(Menu, null, (data || []).map(function (item, index) {
|
|
82
93
|
return /*#__PURE__*/_react["default"].createElement(_DropdownItem, {
|
|
83
94
|
key: "".concat(item.label || item.value || index, "-").concat(index),
|
|
@@ -86,9 +97,9 @@ var NestedDropdown = function NestedDropdown(_ref8) {
|
|
|
86
97
|
});
|
|
87
98
|
})));
|
|
88
99
|
};
|
|
89
|
-
var _DropdownItem = function DropdownItem(
|
|
90
|
-
var item =
|
|
91
|
-
onSelect =
|
|
100
|
+
var _DropdownItem = function DropdownItem(_ref11) {
|
|
101
|
+
var item = _ref11.item,
|
|
102
|
+
onSelect = _ref11.onSelect;
|
|
92
103
|
var _useState = (0, _react.useState)(false),
|
|
93
104
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
94
105
|
open = _useState2[0],
|
|
@@ -122,12 +133,12 @@ var _DropdownItem = function DropdownItem(_ref9) {
|
|
|
122
133
|
}), /*#__PURE__*/_react["default"].createElement(Divider, null));
|
|
123
134
|
}))) : null, /*#__PURE__*/_react["default"].createElement(Divider, null));
|
|
124
135
|
};
|
|
125
|
-
var DropdownPortal = function DropdownPortal(
|
|
126
|
-
var open =
|
|
127
|
-
anchorRef =
|
|
128
|
-
children =
|
|
129
|
-
onMouseEnter =
|
|
130
|
-
onMouseLeave =
|
|
136
|
+
var DropdownPortal = function DropdownPortal(_ref12) {
|
|
137
|
+
var open = _ref12.open,
|
|
138
|
+
anchorRef = _ref12.anchorRef,
|
|
139
|
+
children = _ref12.children,
|
|
140
|
+
onMouseEnter = _ref12.onMouseEnter,
|
|
141
|
+
onMouseLeave = _ref12.onMouseLeave;
|
|
131
142
|
var _useState3 = (0, _react.useState)({}),
|
|
132
143
|
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
133
144
|
style = _useState4[0],
|
|
@@ -161,11 +172,77 @@ var DropdownPortal = function DropdownPortal(_ref10) {
|
|
|
161
172
|
};
|
|
162
173
|
var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
|
|
163
174
|
return /*#__PURE__*/_react["default"].createElement(_cardV.BaseButtonStyles, props);
|
|
164
|
-
})(
|
|
175
|
+
})(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n\n .tooltip {\n position: absolute;\n bottom: 130%;\n right: 0;\n transform: translateX(0);\n padding: 5px 9px;\n box-sizing: border-box;\n background: #000000;\n color: #fff;\n border-radius: 10px;\n width: max-content;\n max-width: 200px;\n white-space: normal;\n overflow-wrap: break-word;\n text-align: center;\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) {
|
|
165
176
|
return _tokens.colors[props.theme].card.themeColor;
|
|
166
177
|
});
|
|
167
|
-
var CardHeader = _styledComponents["default"].div(
|
|
168
|
-
var BottomActionContainer = _styledComponents["default"].div(
|
|
178
|
+
var CardHeader = _styledComponents["default"].div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n padding: 10px;\n"])));
|
|
179
|
+
var BottomActionContainer = _styledComponents["default"].div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n z-index: 3;\n opacity: 1;\n"])));
|
|
180
|
+
var SegmentTimeline = _styledComponents["default"].div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 5px;\n position: absolute;\n top: 105px;\n left: 0;\n background: rgba(48, 63, 81, 0.85);\n border-radius: 2px;\n"])));
|
|
181
|
+
var SegmentTimelinePopup = _styledComponents["default"].div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n width: max-content;\n max-width: calc(100% - 8px);\n min-height: 28px;\n padding: 6px 8px;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n background: var(--Color-Text-color-Pure-White, #fff);\n position: absolute;\n bottom: calc(100% + 6px);\n left: ", ";\n right: ", ";\n transform: ", ";\n box-shadow: 0 10px 30px rgba(13, 24, 41, 0.12);\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 120ms ease,\n visibility 120ms ease;\n z-index: 20;\n\n span {\n color: #0b0f15;\n font-family: SFUIText-Regular;\n font-size: 10px;\n line-height: 12px;\n text-align: center;\n white-space: normal;\n overflow-wrap: anywhere;\n }\n"])), function (_ref13) {
|
|
182
|
+
var alignment = _ref13.alignment,
|
|
183
|
+
left = _ref13.left;
|
|
184
|
+
return alignment === "end" ? "auto" : alignment === "start" ? "4px" : left;
|
|
185
|
+
}, function (_ref14) {
|
|
186
|
+
var alignment = _ref14.alignment;
|
|
187
|
+
return alignment === "end" ? "4px" : "auto";
|
|
188
|
+
}, function (_ref15) {
|
|
189
|
+
var alignment = _ref15.alignment;
|
|
190
|
+
return alignment === "center" ? "translateX(-50%)" : "none";
|
|
191
|
+
});
|
|
192
|
+
var SegmentRangeMarker = _styledComponents["default"].div(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: -6px;\n left: ", ";\n width: ", ";\n height: calc(100% + 12px);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 15;\n\n &:hover + ", " {\n opacity: 1;\n visibility: visible;\n }\n"])), function (_ref16) {
|
|
193
|
+
var left = _ref16.left;
|
|
194
|
+
return left;
|
|
195
|
+
}, function (_ref17) {
|
|
196
|
+
var width = _ref17.width;
|
|
197
|
+
return width;
|
|
198
|
+
}, SegmentTimelinePopup);
|
|
199
|
+
var SegmentRangeBar = _styledComponents["default"].div(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 5px;\n border-radius: 2px;\n background: ", ";\n"])), function (_ref18) {
|
|
200
|
+
var theme = _ref18.theme;
|
|
201
|
+
return _tokens.colors[theme].card.themeColor;
|
|
202
|
+
});
|
|
203
|
+
var hasTimecodeFormat = function hasTimecodeFormat(value) {
|
|
204
|
+
return typeof value === "string" && value.includes(":");
|
|
205
|
+
};
|
|
206
|
+
var getTimeInSeconds = function getTimeInSeconds(value, frameRate) {
|
|
207
|
+
if (hasTimecodeFormat(value)) {
|
|
208
|
+
return (0, _utils.timeToSeconds)(value, frameRate);
|
|
209
|
+
}
|
|
210
|
+
var numericValue = Number(value);
|
|
211
|
+
return Number.isNaN(numericValue) ? 0 : numericValue;
|
|
212
|
+
};
|
|
213
|
+
var getRelativeTimeInSeconds = function getRelativeTimeInSeconds(relativeTime, timecode, frameRate) {
|
|
214
|
+
if (relativeTime !== undefined && relativeTime !== null && relativeTime !== "") {
|
|
215
|
+
var numericValue = Number(relativeTime);
|
|
216
|
+
if (!Number.isNaN(numericValue)) return numericValue;
|
|
217
|
+
}
|
|
218
|
+
return getTimeInSeconds(timecode, frameRate);
|
|
219
|
+
};
|
|
220
|
+
var getDisplayTimecode = function getDisplayTimecode(value, frameRate) {
|
|
221
|
+
if (hasTimecodeFormat(value)) {
|
|
222
|
+
return value;
|
|
223
|
+
}
|
|
224
|
+
var numericValue = Number(value);
|
|
225
|
+
return Number.isNaN(numericValue) ? "00:00:00:00" : (0, _utils.secondsToTime)(numericValue, frameRate);
|
|
226
|
+
};
|
|
227
|
+
var normalizeStatusCode = function normalizeStatusCode(status) {
|
|
228
|
+
return String(status || "").trim().toLowerCase().split(" ").join("_");
|
|
229
|
+
};
|
|
230
|
+
var getStatusHexColor = function getStatusHexColor(status) {
|
|
231
|
+
var _matched$hex;
|
|
232
|
+
var normalized = normalizeStatusCode(status || "archived");
|
|
233
|
+
var matched = _statusV["default"].find(function (group) {
|
|
234
|
+
return group.code.includes(normalized);
|
|
235
|
+
});
|
|
236
|
+
return (matched === null || matched === void 0 ? void 0 : (_matched$hex = matched.hex) === null || _matched$hex === void 0 ? void 0 : _matched$hex.background) || "#18B96E";
|
|
237
|
+
};
|
|
238
|
+
var getStatusLabel = function getStatusLabel(status) {
|
|
239
|
+
var normalized = normalizeStatusCode(status || "archived");
|
|
240
|
+
if (normalized === "0") return "Pending";
|
|
241
|
+
if (normalized === "3") return "In Progress";
|
|
242
|
+
if (normalized === "2") return "Error";
|
|
243
|
+
if (normalized === "1") return "Archive";
|
|
244
|
+
return status || "Archive";
|
|
245
|
+
};
|
|
169
246
|
var ThumbnailV2 = function ThumbnailV2(props) {
|
|
170
247
|
var theme = props.theme,
|
|
171
248
|
width = props.width,
|
|
@@ -179,13 +256,38 @@ var ThumbnailV2 = function ThumbnailV2(props) {
|
|
|
179
256
|
upload_type = props.upload_type,
|
|
180
257
|
file_type = props.file_type,
|
|
181
258
|
data_type = props.data_type,
|
|
259
|
+
asset_type = props.asset_type,
|
|
260
|
+
duration = props.duration,
|
|
182
261
|
onUploadTypeClick = props.onUploadTypeClick,
|
|
183
262
|
showPointer = props.showPointer,
|
|
184
263
|
value = props.value,
|
|
185
264
|
nestedDropdownData = props.nestedDropdownData,
|
|
186
265
|
onNestedDropdownSelect = props.onNestedDropdownSelect,
|
|
187
266
|
_props$isAdobe = props.isAdobe,
|
|
188
|
-
isAdobe = _props$isAdobe === void 0 ? false : _props$isAdobe
|
|
267
|
+
isAdobe = _props$isAdobe === void 0 ? false : _props$isAdobe,
|
|
268
|
+
in_time = props.in_time,
|
|
269
|
+
in_timecode = props.in_timecode,
|
|
270
|
+
out_time = props.out_time,
|
|
271
|
+
out_timecode = props.out_timecode,
|
|
272
|
+
full_duration = props.full_duration,
|
|
273
|
+
isSegment = props.isSegment,
|
|
274
|
+
is_segment = props.is_segment,
|
|
275
|
+
frame_rate = props.frame_rate,
|
|
276
|
+
archived_status = props.archived_status;
|
|
277
|
+
var effectiveFrameRate = Number(frame_rate) || 25;
|
|
278
|
+
var displayDuration = duration !== undefined && duration !== null && duration !== "" ? getDisplayTimecode(duration, effectiveFrameRate) : "00:00:51:20";
|
|
279
|
+
var actionItems = Array.isArray(actions) ? actions : [];
|
|
280
|
+
var isSegmentCard = Boolean(isSegment || is_segment);
|
|
281
|
+
var totalSeconds = getTimeInSeconds(full_duration || duration, effectiveFrameRate);
|
|
282
|
+
var segmentStartSeconds = Math.max(0, Math.min(totalSeconds, getRelativeTimeInSeconds(in_time, in_timecode, effectiveFrameRate)));
|
|
283
|
+
var segmentEndSeconds = Math.max(0, Math.min(totalSeconds, getRelativeTimeInSeconds(out_time, out_timecode, effectiveFrameRate)));
|
|
284
|
+
var displayInTimecode = getDisplayTimecode(in_timecode, effectiveFrameRate);
|
|
285
|
+
var displayOutTimecode = getDisplayTimecode(out_timecode, effectiveFrameRate);
|
|
286
|
+
var hasSegmentTimeline = isSegmentCard && totalSeconds > 0 && segmentEndSeconds > segmentStartSeconds && segmentStartSeconds >= 0;
|
|
287
|
+
var segmentLeftPercent = hasSegmentTimeline ? Math.max(0, Math.min(100, segmentStartSeconds / totalSeconds * 100)) : 0;
|
|
288
|
+
var segmentWidthPercent = hasSegmentTimeline ? Math.min(100 - segmentLeftPercent, Math.max(1, (segmentEndSeconds - segmentStartSeconds) / totalSeconds * 100)) : 0;
|
|
289
|
+
var segmentCenterPercent = segmentLeftPercent + segmentWidthPercent / 2;
|
|
290
|
+
var segmentPopupAlignment = segmentCenterPercent < 40 ? "start" : segmentCenterPercent > 60 ? "end" : "center";
|
|
189
291
|
var _useState5 = (0, _react.useState)(null),
|
|
190
292
|
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
191
293
|
statusIndex = _useState6[0],
|
|
@@ -213,12 +315,12 @@ var ThumbnailV2 = function ThumbnailV2(props) {
|
|
|
213
315
|
}, 150);
|
|
214
316
|
};
|
|
215
317
|
(0, _react.useEffect)(function () {
|
|
216
|
-
if (
|
|
318
|
+
if (actionItems.length > 0 && actionItems.some(function (item) {
|
|
217
319
|
return item.field === "upload" || item.field === "phupload_ingest";
|
|
218
320
|
})) {
|
|
219
321
|
setClickPreventation(true);
|
|
220
322
|
}
|
|
221
|
-
}, [
|
|
323
|
+
}, [actionItems]);
|
|
222
324
|
(0, _react.useEffect)(function () {
|
|
223
325
|
var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
|
|
224
326
|
return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(" ").join("_") : []);
|
|
@@ -237,8 +339,8 @@ var ThumbnailV2 = function ThumbnailV2(props) {
|
|
|
237
339
|
return document.removeEventListener("mousedown", handleClick);
|
|
238
340
|
};
|
|
239
341
|
}, [showTopRightAction]);
|
|
240
|
-
var handleMouseMove = (0, _react.useCallback)(function () {
|
|
241
|
-
if (iframeImageBlockRef && hoverPointerRef && iframeImageRef) {
|
|
342
|
+
var handleMouseMove = (0, _react.useCallback)(function (event) {
|
|
343
|
+
if (iframeImageBlockRef.current && hoverPointerRef.current && iframeImageRef.current) {
|
|
242
344
|
var iframeBlockHeight = iframeImageBlockRef.current.offsetHeight;
|
|
243
345
|
var iframeOgHeight = 120;
|
|
244
346
|
var ogHeight = iframeImageRef.current.naturalHeight;
|
|
@@ -248,13 +350,13 @@ var ThumbnailV2 = function ThumbnailV2(props) {
|
|
|
248
350
|
var iframeOffsetHeight = offsetHeight / iframeCount;
|
|
249
351
|
var imageChangePoint = offsetWidth / iframeCount;
|
|
250
352
|
var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
|
|
251
|
-
hoverPointerRef.current.style.left = event.offsetX
|
|
252
|
-
var imageNum = parseInt(event.offsetX / imageChangePoint) || 1;
|
|
353
|
+
hoverPointerRef.current.style.left = "".concat(event.offsetX, "px");
|
|
354
|
+
var imageNum = parseInt(event.offsetX / imageChangePoint, 10) || 1;
|
|
253
355
|
var imageTop = iframeOffsetHeight * imageNum + offsetTop;
|
|
254
356
|
if (imageTop > offsetHeight) {
|
|
255
357
|
imageTop = offsetHeight + offsetTop - iframeOffsetHeight;
|
|
256
358
|
}
|
|
257
|
-
iframeImageRef.current.style.top = "-"
|
|
359
|
+
iframeImageRef.current.style.top = "-".concat(imageTop, "px");
|
|
258
360
|
}
|
|
259
361
|
}, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
|
|
260
362
|
var handleThumbnailClick = (0, _react.useCallback)(function (e) {
|
|
@@ -263,7 +365,7 @@ var ThumbnailV2 = function ThumbnailV2(props) {
|
|
|
263
365
|
} else {
|
|
264
366
|
e.preventDefault();
|
|
265
367
|
}
|
|
266
|
-
}, [isClickPrevented]);
|
|
368
|
+
}, [isClickPrevented, actionClick, ingest_db_id]);
|
|
267
369
|
var handleActionIconClick = (0, _react.useCallback)(function (e, item) {
|
|
268
370
|
e.stopPropagation();
|
|
269
371
|
actionClick(e, item.field);
|
|
@@ -293,7 +395,22 @@ var ThumbnailV2 = function ThumbnailV2(props) {
|
|
|
293
395
|
onClick: handleThumbnailClick,
|
|
294
396
|
theme: props.theme,
|
|
295
397
|
data_type: data_type
|
|
296
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
398
|
+
}, /*#__PURE__*/_react["default"].createElement(ThumbnailStatusPill, {
|
|
399
|
+
bgColor: getStatusHexColor(archived_status)
|
|
400
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
401
|
+
className: "status-dot"
|
|
402
|
+
}), getStatusLabel(archived_status)), hasSegmentTimeline && /*#__PURE__*/_react["default"].createElement(SegmentTimeline, null, /*#__PURE__*/_react["default"].createElement(SegmentRangeMarker, {
|
|
403
|
+
left: "".concat(segmentLeftPercent, "%"),
|
|
404
|
+
width: "".concat(segmentWidthPercent, "%"),
|
|
405
|
+
theme: theme
|
|
406
|
+
}, /*#__PURE__*/_react["default"].createElement(SegmentRangeBar, {
|
|
407
|
+
theme: theme
|
|
408
|
+
})), /*#__PURE__*/_react["default"].createElement(SegmentTimelinePopup, {
|
|
409
|
+
alignment: segmentPopupAlignment,
|
|
410
|
+
left: "".concat(segmentCenterPercent, "%")
|
|
411
|
+
}, /*#__PURE__*/_react["default"].createElement("span", null, "".concat(displayInTimecode, " to ").concat(displayOutTimecode)))), asset_type ? /*#__PURE__*/_react["default"].createElement(AssetTypeChip, {
|
|
412
|
+
theme: theme
|
|
413
|
+
}, asset_type) : null, /*#__PURE__*/_react["default"].createElement(CardHeader, null, /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
|
|
297
414
|
theme: props.theme,
|
|
298
415
|
className: "asset-card-thumbnail-head",
|
|
299
416
|
display: "flex",
|
|
@@ -335,7 +452,7 @@ var ThumbnailV2 = function ThumbnailV2(props) {
|
|
|
335
452
|
width: 14,
|
|
336
453
|
height: 14,
|
|
337
454
|
theme: props.theme
|
|
338
|
-
}))))),
|
|
455
|
+
}))))), actionItems.length && /*#__PURE__*/_react["default"].createElement(BottomActionContainer, null, actionItems.map(function (item, i) {
|
|
339
456
|
return item.icon && /*#__PURE__*/_react["default"].createElement(IconButtonStyles, {
|
|
340
457
|
theme: props.theme,
|
|
341
458
|
className: "asset-card-thumbnail-icon-button",
|
|
@@ -378,8 +495,9 @@ var ThumbnailV2 = function ThumbnailV2(props) {
|
|
|
378
495
|
}), /*#__PURE__*/_react["default"].createElement("img", {
|
|
379
496
|
ref: iframeImageRef,
|
|
380
497
|
className: "iframe-image",
|
|
381
|
-
src: iframeurl
|
|
382
|
-
|
|
498
|
+
src: iframeurl,
|
|
499
|
+
alt: "preview"
|
|
500
|
+
})) || null, /*#__PURE__*/_react["default"].createElement(DurationBadge, null, displayDuration));
|
|
383
501
|
};
|
|
384
502
|
ThumbnailV2.propTypes = {
|
|
385
503
|
theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
|
|
@@ -390,12 +508,22 @@ ThumbnailV2.propTypes = {
|
|
|
390
508
|
upload_status: _propTypes["default"].string,
|
|
391
509
|
card_status: _propTypes["default"].string,
|
|
392
510
|
ingest_db_id: _propTypes["default"].string,
|
|
393
|
-
|
|
511
|
+
archived_status: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
512
|
+
actions: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].object]),
|
|
394
513
|
actionClick: _propTypes["default"].func,
|
|
395
514
|
onUploadTypeClick: _propTypes["default"].func,
|
|
396
515
|
nestedDropdownData: _propTypes["default"].arrayOf(_propTypes["default"].object),
|
|
397
516
|
onNestedDropdownSelect: _propTypes["default"].func,
|
|
398
|
-
isAdobe: _propTypes["default"].bool
|
|
517
|
+
isAdobe: _propTypes["default"].bool,
|
|
518
|
+
in_time: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
519
|
+
in_timecode: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
520
|
+
out_time: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
521
|
+
out_timecode: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
522
|
+
full_duration: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
523
|
+
duration: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
524
|
+
isSegment: _propTypes["default"].bool,
|
|
525
|
+
is_segment: _propTypes["default"].bool,
|
|
526
|
+
frame_rate: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
|
|
399
527
|
};
|
|
400
528
|
ThumbnailV2.defaultProps = {
|
|
401
529
|
theme: "dark",
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.2.
|
|
3
|
+
"version": "9.2.27",
|
|
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.
|
|
10
|
+
"@desynova-digital/tokens": "9.2.27",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|