@desynova-digital/components 9.2.28 → 9.2.29

package/atoms/cardV2/cardV2.js

@@ -96,7 +96,8 @@ CardV2.propTypes = {
   bgColor: _propTypes["default"].oneOf(['primary', 'secondary']),
   isCardv2: _propTypes["default"].bool,
   nestedDropdownData: _propTypes["default"].arrayOf(_propTypes["default"].object),
-  onNestedDropdownSelect: _propTypes["default"].func
+  onNestedDropdownSelect: _propTypes["default"].func,
+  isSearchPageCard: _propTypes["default"].bool
 };
 CardV2.defaultProps = {
   isSegment: false,
@@ -105,6 +106,7 @@ CardV2.defaultProps = {
   type: 'asset',
   bgColor: 'primary',
   thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
-  preview: ''
+  preview: '',
+  isSearchPageCard: false
 };
 var _default = exports["default"] = CardV2;

package/atoms/cardV2/thumbnailV2.js

@@ -18,7 +18,7 @@ var _tokens2 = require("../../../tokens");
 var _statusV = _interopRequireDefault(require("../../../tokens/statusV2"));
 var _cardV = require("./cardV2");
 var _utils = require("../../_helpers/utils");
-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
+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, _templateObject25; // atoms
 // tokens
 // styles
 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); }
@@ -177,7 +177,7 @@ var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
 });
 var CardHeader = _styledComponents["default"].div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n"])));
 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"])));
-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"])));
+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(12, 20, 29, 0.6);\n  border-radius: 2px;\n"])));
 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) {
   var alignment = _ref13.alignment,
     left = _ref13.left;
@@ -189,15 +189,22 @@ var SegmentTimelinePopup = _styledComponents["default"].div(_templateObject22 ||
   var alignment = _ref15.alignment;
   return alignment === "center" ? "translateX(-50%)" : "none";
 });
-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) {
+var SegmentTimelinePointer = _styledComponents["default"].span(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  left: ", ";\n  bottom: calc(100% + 1px);\n  transform: translateX(-50%);\n  width: 0;\n  height: 0;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-top: 8px solid ", ";\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    opacity 120ms ease,\n    visibility 120ms ease;\n  z-index: 19;\n  pointer-events: none;\n"])), function (_ref16) {
   var left = _ref16.left;
   return left;
 }, function (_ref17) {
-  var width = _ref17.width;
+  var theme = _ref17.theme;
+  return _tokens.colors[theme].card.themeColor;
+});
+var SegmentRangeMarker = _styledComponents["default"].div(_templateObject24 || (_templateObject24 = (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\n  &:hover + ", " + ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n"])), function (_ref18) {
+  var left = _ref18.left;
+  return left;
+}, function (_ref19) {
+  var width = _ref19.width;
   return width;
-}, SegmentTimelinePopup);
-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) {
-  var theme = _ref18.theme;
+}, SegmentTimelinePopup, SegmentTimelinePopup, SegmentTimelinePointer);
+var SegmentRangeBar = _styledComponents["default"].div(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 5px;\n  border-radius: 2px;\n  background: ", ";\n"])), function (_ref20) {
+  var theme = _ref20.theme;
   return _tokens.colors[theme].card.themeColor;
 });
 var hasTimecodeFormat = function hasTimecodeFormat(value) {
@@ -235,13 +242,55 @@ var getStatusHexColor = function getStatusHexColor(status) {
   });
   return (matched === null || matched === void 0 ? void 0 : (_matched$hex = matched.hex) === null || _matched$hex === void 0 ? void 0 : _matched$hex.background) || "#18B96E";
 };
+var ARCHIVED_STATUS_CONFIG = {
+  0: {
+    label: "Pending",
+    color: "#AFB2BA"
+  },
+  pending: {
+    label: "Pending",
+    color: "#AFB2BA"
+  },
+  1: {
+    label: "Archived",
+    color: "#18B96E"
+  },
+  archive: {
+    label: "Archived",
+    color: "#18B96E"
+  },
+  archived: {
+    label: "Archived",
+    color: "#18B96E"
+  },
+  2: {
+    label: "Error",
+    color: "#FF6C56"
+  },
+  error: {
+    label: "Error",
+    color: "#FF6C56"
+  },
+  3: {
+    label: "In Progress",
+    color: "#FF8D29"
+  },
+  inprogress: {
+    label: "In Progress",
+    color: "#FF8D29"
+  },
+  in_progress: {
+    label: "In Progress",
+    color: "#FF8D29"
+  }
+};
+var getArchivedStatusHexColor = function getArchivedStatusHexColor(status) {
+  var _ARCHIVED_STATUS_CONF;
+  return (_ARCHIVED_STATUS_CONF = ARCHIVED_STATUS_CONFIG[normalizeStatusCode(status)]) === null || _ARCHIVED_STATUS_CONF === void 0 ? void 0 : _ARCHIVED_STATUS_CONF.color;
+};
 var getStatusLabel = function getStatusLabel(status) {
-  var normalized = normalizeStatusCode(status || "archived");
-  if (normalized === "0") return "Pending";
-  if (normalized === "3") return "In Progress";
-  if (normalized === "2") return "Error";
-  if (normalized === "1") return "Archive";
-  return null;
+  var _ARCHIVED_STATUS_CONF2;
+  return ((_ARCHIVED_STATUS_CONF2 = ARCHIVED_STATUS_CONFIG[normalizeStatusCode(status)]) === null || _ARCHIVED_STATUS_CONF2 === void 0 ? void 0 : _ARCHIVED_STATUS_CONF2.label) || null;
 };
 var ThumbnailV2 = function ThumbnailV2(props) {
   var theme = props.theme,
@@ -273,9 +322,13 @@ var ThumbnailV2 = function ThumbnailV2(props) {
     isSegment = props.isSegment,
     is_segment = props.is_segment,
     frame_rate = props.frame_rate,
-    archived_status = props.archived_status;
+    archived_status = props.archived_status,
+    isSearchPageCard = props.isSearchPageCard;
   var effectiveFrameRate = Number(frame_rate) || 25;
-  var displayDuration = duration !== undefined && duration !== null && duration !== "" ? getDisplayTimecode(duration, effectiveFrameRate) : "00:00:51:20";
+  var durationValue = duration === undefined || duration === null ? "" : String(duration).trim();
+  var hasDuration = Boolean(durationValue) && (hasTimecodeFormat(durationValue) || Number.isFinite(Number(durationValue)));
+  var displayDuration = hasDuration ? getDisplayTimecode(durationValue, effectiveFrameRate) : "";
+  var displayAssetType = asset_type === undefined || asset_type === null ? "" : String(asset_type).trim();
   var actionItems = Array.isArray(actions) ? actions : [];
   var isSegmentCard = Boolean(isSegment || is_segment);
   var totalSeconds = getTimeInSeconds(full_duration || duration, effectiveFrameRate);
@@ -341,24 +394,25 @@ var ThumbnailV2 = function ThumbnailV2(props) {
   }, [showTopRightAction]);
   var handleMouseMove = (0, _react.useCallback)(function (event) {
     if (iframeImageBlockRef.current && hoverPointerRef.current && iframeImageRef.current) {
-      var iframeBlockHeight = iframeImageBlockRef.current.offsetHeight;
+      var iframeBlock = iframeImageBlockRef.current;
+      var iframeImage = iframeImageRef.current;
+      var iframeBlockHeight = iframeBlock.offsetHeight;
       var iframeOgHeight = 120;
-      var ogHeight = iframeImageRef.current.naturalHeight;
-      var offsetHeight = iframeImageRef.current.offsetHeight;
-      var offsetWidth = iframeImageRef.current.offsetWidth;
-      var iframeCount = ogHeight / iframeOgHeight;
+      var ogHeight = iframeImage.naturalHeight;
+      var offsetHeight = iframeImage.offsetHeight;
+      var rect = iframeBlock.getBoundingClientRect();
+      var offsetWidth = rect.width;
+      var iframeCount = Math.max(1, Math.floor(ogHeight / iframeOgHeight));
+      if (!ogHeight || !offsetHeight || !offsetWidth) return;
       var iframeOffsetHeight = offsetHeight / iframeCount;
       var imageChangePoint = offsetWidth / iframeCount;
       var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
-      hoverPointerRef.current.style.left = "".concat(event.offsetX, "px");
-      var imageNum = parseInt(event.offsetX / imageChangePoint, 10) || 1;
-      var imageTop = iframeOffsetHeight * imageNum + offsetTop;
-      if (imageTop > offsetHeight) {
-        imageTop = offsetHeight + offsetTop - iframeOffsetHeight;
-      }
-      iframeImageRef.current.style.top = "-".concat(imageTop, "px");
+      var pointerX = Math.max(0, Math.min(offsetWidth - 1, event.clientX - rect.left));
+      var imageNum = Math.min(iframeCount - 1, Math.floor(pointerX / imageChangePoint));
+      hoverPointerRef.current.style.left = "".concat(pointerX, "px");
+      iframeImage.style.top = "".concat(offsetTop - iframeOffsetHeight * imageNum - 11, "px");
     }
-  }, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
+  }, []);
   var handleThumbnailClick = (0, _react.useCallback)(function (e) {
     if (!isClickPrevented) {
       actionClick(e, "play", ingest_db_id);
@@ -396,7 +450,7 @@ var ThumbnailV2 = function ThumbnailV2(props) {
     theme: props.theme,
     data_type: data_type
   }, getStatusLabel(archived_status) ? /*#__PURE__*/_react["default"].createElement(ThumbnailStatusPill, {
-    bgColor: getStatusHexColor(archived_status)
+    bgColor: getArchivedStatusHexColor(archived_status)
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "status-dot"
   }), getStatusLabel(archived_status)) : null, hasSegmentTimeline && /*#__PURE__*/_react["default"].createElement(SegmentTimeline, null, /*#__PURE__*/_react["default"].createElement(SegmentRangeMarker, {
@@ -408,9 +462,12 @@ var ThumbnailV2 = function ThumbnailV2(props) {
   })), /*#__PURE__*/_react["default"].createElement(SegmentTimelinePopup, {
     alignment: segmentPopupAlignment,
     left: "".concat(segmentCenterPercent, "%")
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "".concat(displayInTimecode, " to ").concat(displayOutTimecode)))), asset_type ? /*#__PURE__*/_react["default"].createElement(AssetTypeChip, {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "".concat(displayInTimecode, " to ").concat(displayOutTimecode))), /*#__PURE__*/_react["default"].createElement(SegmentTimelinePointer, {
+    theme: theme,
+    left: "".concat(segmentCenterPercent, "%")
+  })), isSearchPageCard && displayAssetType ? /*#__PURE__*/_react["default"].createElement(AssetTypeChip, {
     theme: theme
-  }, asset_type) : null, /*#__PURE__*/_react["default"].createElement(CardHeader, null, /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
+  }, displayAssetType) : null, /*#__PURE__*/_react["default"].createElement(CardHeader, null, /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
     theme: props.theme,
     className: "asset-card-thumbnail-head",
     display: "flex",
@@ -497,7 +554,7 @@ var ThumbnailV2 = function ThumbnailV2(props) {
     className: "iframe-image",
     src: iframeurl,
     alt: "preview"
-  })) || null, /*#__PURE__*/_react["default"].createElement(DurationBadge, null, displayDuration));
+  })) || null, isSearchPageCard && displayDuration ? /*#__PURE__*/_react["default"].createElement(DurationBadge, null, displayDuration) : null);
 };
 ThumbnailV2.propTypes = {
   theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
@@ -523,13 +580,15 @@ ThumbnailV2.propTypes = {
   duration: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   isSegment: _propTypes["default"].bool,
   is_segment: _propTypes["default"].bool,
-  frame_rate: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  frame_rate: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  isSearchPageCard: _propTypes["default"].bool
 };
 ThumbnailV2.defaultProps = {
   theme: "dark",
   width: "lg",
   thumbnail: "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png",
   iframeurl: "",
-  isAdobe: false
+  isAdobe: false,
+  isSearchPageCard: false
 };
 var _default = exports["default"] = ThumbnailV2;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "9.2.28",
+  "version": "9.2.29",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "9.2.28",
+    "@desynova-digital/tokens": "9.2.29",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },