@desynova-digital/components 9.2.52 → 9.3.1

package/atoms/cardV2/thumbnailV2.js

@@ -0,0 +1,598 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tokens = require("@desynova-digital/tokens");
+var _icon = _interopRequireDefault(require("../../atoms/icon"));
+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, _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); }
+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; }
+var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: rgba(0, 0, 0, 0.5);\n"])));
+var assetStyles = {
+  folder: {
+    backgroundColor: "#121D29",
+    backgroundSize: "inherit"
+  },
+  asset: {
+    backgroundColor: "inherit",
+    backgroundSize: "cover"
+  }
+};
+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);
+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) {
+  var theme = _ref.theme;
+  return _tokens.colors[theme].card.themeColor;
+});
+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) {
+  var bgColor = _ref2.bgColor;
+  return bgColor || "#18B96E";
+});
+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"])));
+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) {
+  var thumbnail = _ref3.thumbnail;
+  return "url(".concat(thumbnail, ") no-repeat 50%");
+}, function (_ref4) {
+  var data_type = _ref4.data_type;
+  return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : "inherit";
+}, function (_ref5) {
+  var data_type = _ref5.data_type;
+  return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : "cover";
+}, function (_ref6) {
+  var width = _ref6.width;
+  return width === "sm" ? "90px" : width === "md" ? "125px" : "222px";
+}, function (_ref7) {
+  var width = _ref7.width;
+  return width === "sm" ? "50px" : width === "md" ? "70px" : "110px";
+}, function (_ref8) {
+  var isClickPrevented = _ref8.isClickPrevented;
+  return !isClickPrevented ? "pointer" : "default";
+}, HoverActionButton);
+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) {
+  return props.upload_type === "rc" ? "#FF6327" : _tokens.colors[props.theme].card.themeColor;
+}, function (props) {
+  return props.upload_type === "rc" ? "#FFFFFF" : "#15212F";
+});
+var HoverActionContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-left: 6px;\n"])));
+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) {
+  var hex = _ref9.hex;
+  return hex.background;
+});
+
+// ---------- New styled components for nested dropdown ----------
+var TopRightMenuContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  z-index: 99999;\n"])));
+var DropdownContainer = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: inline-block;\n"])));
+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"])));
+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"])));
+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"])));
+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"])));
+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"])));
+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"])));
+// ----------------------------------------------------------------
+
+// NestedDropdown and DropdownItem components
+var NestedDropdown = function NestedDropdown(_ref10) {
+  var data = _ref10.data,
+    onSelect = _ref10.onSelect;
+  return /*#__PURE__*/_react["default"].createElement(DropdownContainer, null, /*#__PURE__*/_react["default"].createElement(Menu, null, (data || []).map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_DropdownItem, {
+      key: "".concat(item.label || item.value || index, "-").concat(index),
+      item: item,
+      onSelect: onSelect
+    });
+  })));
+};
+var _DropdownItem = function DropdownItem(_ref11) {
+  var item = _ref11.item,
+    onSelect = _ref11.onSelect;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var handleClick = function handleClick(e) {
+    e.stopPropagation();
+    if (item.children && item.children.length) {
+      setOpen(function (prev) {
+        return !prev;
+      });
+      return;
+    }
+    if (onSelect) {
+      onSelect(item);
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(MenuItemWrapper, {
+    onClick: handleClick,
+    onMouseEnter: function onMouseEnter() {
+      return setOpen(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setOpen(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(MenuItem, null, /*#__PURE__*/_react["default"].createElement("span", null, item.label), item.children && item.children.length ? /*#__PURE__*/_react["default"].createElement(RightArrow, null) : null), item.children && open ? /*#__PURE__*/_react["default"].createElement(SubMenu, null, /*#__PURE__*/_react["default"].createElement(Menu, null, item.children.map(function (child, i) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: "".concat(child.label || child.value || i, "-").concat(i)
+    }, /*#__PURE__*/_react["default"].createElement(_DropdownItem, {
+      item: child,
+      onSelect: onSelect
+    }), /*#__PURE__*/_react["default"].createElement(Divider, null));
+  }))) : null, /*#__PURE__*/_react["default"].createElement(Divider, null));
+};
+var DropdownPortal = function DropdownPortal(_ref12) {
+  var open = _ref12.open,
+    anchorRef = _ref12.anchorRef,
+    children = _ref12.children,
+    onMouseEnter = _ref12.onMouseEnter,
+    onMouseLeave = _ref12.onMouseLeave;
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    style = _useState4[0],
+    setStyle = _useState4[1];
+  (0, _react.useLayoutEffect)(function () {
+    if (!open || !anchorRef.current) return;
+    var updatePosition = function updatePosition() {
+      var rect = anchorRef.current.getBoundingClientRect();
+      setStyle({
+        top: rect.bottom + 2,
+        left: rect.right - 140
+      });
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return function () {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, anchorRef]);
+  if (!open) return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react["default"].createElement(TopRightMenuContainer, {
+    style: style,
+    onMouseEnter: onMouseEnter /* Fixed: use passed prop instead of undefined openMenu */,
+    onMouseLeave: onMouseLeave /* Fixed: use passed prop instead of undefined closeMenu */,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, children), document.body);
+};
+var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
+  return /*#__PURE__*/_react["default"].createElement(_cardV.BaseButtonStyles, props);
+})(_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) {
+  return _tokens.colors[props.theme].card.themeColor;
+});
+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(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;
+  return alignment === "end" ? "auto" : alignment === "start" ? "4px" : left;
+}, function (_ref14) {
+  var alignment = _ref14.alignment;
+  return alignment === "end" ? "4px" : "auto";
+}, function (_ref15) {
+  var alignment = _ref15.alignment;
+  return alignment === "center" ? "translateX(-50%)" : "none";
+});
+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 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, 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) {
+  return typeof value === "string" && value.includes(":");
+};
+var getTimeInSeconds = function getTimeInSeconds(value, frameRate) {
+  if (hasTimecodeFormat(value)) {
+    return (0, _utils.timeToSeconds)(value, frameRate);
+  }
+  var numericValue = Number(value);
+  return Number.isNaN(numericValue) ? 0 : numericValue;
+};
+var getRelativeTimeInSeconds = function getRelativeTimeInSeconds(relativeTime, timecode, frameRate) {
+  if (relativeTime !== undefined && relativeTime !== null && relativeTime !== "") {
+    var numericValue = Number(relativeTime);
+    if (!Number.isNaN(numericValue)) return numericValue;
+  }
+  return getTimeInSeconds(timecode, frameRate);
+};
+var getDisplayTimecode = function getDisplayTimecode(value, frameRate) {
+  if (hasTimecodeFormat(value)) {
+    return value;
+  }
+  var numericValue = Number(value);
+  return Number.isNaN(numericValue) ? "00:00:00:00" : (0, _utils.secondsToTime)(numericValue, frameRate);
+};
+var normalizeStatusCode = function normalizeStatusCode(status) {
+  return String(status !== null && status !== void 0 ? status : "").trim().toLowerCase().split(" ").join("_");
+};
+var getStatusHexColor = function getStatusHexColor(status) {
+  var _matched$hex;
+  var normalized = normalizeStatusCode(status);
+  var matched = _statusV["default"].find(function (group) {
+    return group.code.includes(normalized);
+  });
+  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 _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,
+    width = props.width,
+    thumbnail = props.thumbnail,
+    iframeurl = props.iframeurl,
+    card_status = props.card_status,
+    actions = props.actions,
+    ingest_db_id = props.ingest_db_id,
+    actionClick = props.actionClick,
+    upload_status = props.upload_status,
+    upload_type = props.upload_type,
+    file_type = props.file_type,
+    data_type = props.data_type,
+    asset_type = props.asset_type,
+    duration = props.duration,
+    onUploadTypeClick = props.onUploadTypeClick,
+    showPointer = props.showPointer,
+    value = props.value,
+    nestedDropdownData = props.nestedDropdownData,
+    onNestedDropdownSelect = props.onNestedDropdownSelect,
+    _props$isAdobe = props.isAdobe,
+    isAdobe = _props$isAdobe === void 0 ? false : _props$isAdobe,
+    in_time = props.in_time,
+    in_timecode = props.in_timecode,
+    out_time = props.out_time,
+    out_timecode = props.out_timecode,
+    full_duration = props.full_duration,
+    isSegment = props.isSegment,
+    is_segment = props.is_segment,
+    frame_rate = props.frame_rate,
+    archived_status = props.archived_status,
+    isSearchPageCard = props.isSearchPageCard;
+  var effectiveFrameRate = Number(frame_rate) || 25;
+  var fullDurationValue = full_duration === undefined || full_duration === null ? "" : String(full_duration).trim();
+  var hasFullDuration = Boolean(fullDurationValue) && (hasTimecodeFormat(fullDurationValue) || Number.isFinite(Number(fullDurationValue)));
+  var resolvedDuration = hasFullDuration ? full_duration : duration;
+  var durationValue = resolvedDuration === undefined || resolvedDuration === null ? "" : String(resolvedDuration).trim();
+  var hasDuration = Boolean(durationValue) && (hasTimecodeFormat(durationValue) || Number.isFinite(Number(durationValue)));
+  var displayDuration = hasDuration ? getDisplayTimecode(durationValue, effectiveFrameRate) : "";
+  var supportsDuration = ["audio", "video"].includes(String(file_type || "").trim().toLowerCase());
+  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(resolvedDuration, effectiveFrameRate);
+  var segmentStartSeconds = Math.max(0, Math.min(totalSeconds, getRelativeTimeInSeconds(in_time, in_timecode, effectiveFrameRate)));
+  var segmentEndSeconds = Math.max(0, Math.min(totalSeconds, getRelativeTimeInSeconds(out_time, out_timecode, effectiveFrameRate)));
+  var displayInTimecode = getDisplayTimecode(in_timecode, effectiveFrameRate);
+  var displayOutTimecode = getDisplayTimecode(out_timecode, effectiveFrameRate);
+  var hasSegmentTimeline = isSegmentCard && totalSeconds > 0 && segmentEndSeconds > segmentStartSeconds && segmentStartSeconds >= 0;
+  var segmentLeftPercent = hasSegmentTimeline ? Math.max(0, Math.min(100, segmentStartSeconds / totalSeconds * 100)) : 0;
+  var segmentWidthPercent = hasSegmentTimeline ? Math.min(100 - segmentLeftPercent, Math.max(1, (segmentEndSeconds - segmentStartSeconds) / totalSeconds * 100)) : 0;
+  var segmentCenterPercent = segmentLeftPercent + segmentWidthPercent / 2;
+  var segmentPopupAlignment = segmentCenterPercent < 40 ? "start" : segmentCenterPercent > 60 ? "end" : "center";
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    statusIndex = _useState6[0],
+    setStatusIndex = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isClickPrevented = _useState8[0],
+    setClickPreventation = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    showTopRightAction = _useState10[0],
+    setShowTopRightAction = _useState10[1];
+  var iframeImageBlockRef = (0, _react.useRef)(null);
+  var iframeImageRef = (0, _react.useRef)(null);
+  var hoverPointerRef = (0, _react.useRef)(null);
+  var menuAnchorRef = (0, _react.useRef)(null);
+  var closeTimer = (0, _react.useRef)(null);
+  var openMenu = function openMenu() {
+    clearTimeout(closeTimer.current);
+    setShowTopRightAction(true);
+  };
+  var closeMenu = function closeMenu() {
+    closeTimer.current = setTimeout(function () {
+      setShowTopRightAction(false);
+    }, 150);
+  };
+  (0, _react.useEffect)(function () {
+    if (actionItems.length > 0 && actionItems.some(function (item) {
+      return item.field === "upload" || item.field === "phupload_ingest";
+    })) {
+      setClickPreventation(true);
+    }
+  }, [actionItems]);
+  (0, _react.useEffect)(function () {
+    var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
+      return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(" ").join("_") : []);
+    });
+    setStatusIndex(index);
+  }, [upload_status, card_status]);
+  (0, _react.useEffect)(function () {
+    if (!showTopRightAction) return;
+    var handleClick = function handleClick(e) {
+      if (menuAnchorRef.current && !menuAnchorRef.current.contains(e.target)) {
+        setShowTopRightAction(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return function () {
+      return document.removeEventListener("mousedown", handleClick);
+    };
+  }, [showTopRightAction]);
+  var handleMouseMove = (0, _react.useCallback)(function (event) {
+    if (iframeImageBlockRef.current && hoverPointerRef.current && iframeImageRef.current) {
+      var iframeBlock = iframeImageBlockRef.current;
+      var iframeImage = iframeImageRef.current;
+      var iframeBlockHeight = iframeBlock.offsetHeight;
+      var iframeOgHeight = 120;
+      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;
+      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");
+    }
+  }, []);
+  var handleThumbnailClick = (0, _react.useCallback)(function (e) {
+    if (!isClickPrevented) {
+      actionClick(e, "play", ingest_db_id);
+    } else {
+      e.preventDefault();
+    }
+  }, [isClickPrevented, actionClick, ingest_db_id]);
+  var handleActionIconClick = (0, _react.useCallback)(function (e, item) {
+    e.stopPropagation();
+    actionClick(e, item.field);
+  }, [actionClick]);
+  var handleUploadTypeClick = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    if (nestedDropdownData && nestedDropdownData.length) {
+      setShowTopRightAction(function (prev) {
+        return !prev;
+      });
+      return;
+    }
+    if (onUploadTypeClick) {
+      onUploadTypeClick();
+    }
+  }, [onUploadTypeClick, nestedDropdownData]);
+  var handleNestedSelect = (0, _react.useCallback)(function (item) {
+    setShowTopRightAction(false);
+    if (onNestedDropdownSelect) {
+      onNestedDropdownSelect(item);
+    }
+  }, [onNestedDropdownSelect]);
+  return /*#__PURE__*/_react["default"].createElement(ThumbnailStyles, {
+    width: width,
+    thumbnail: thumbnail,
+    isClickPrevented: isClickPrevented,
+    onClick: handleThumbnailClick,
+    theme: props.theme,
+    data_type: data_type
+  }, getStatusLabel(archived_status) ? /*#__PURE__*/_react["default"].createElement(ThumbnailStatusPill, {
+    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, {
+    left: "".concat(segmentLeftPercent, "%"),
+    width: "".concat(segmentWidthPercent, "%"),
+    theme: theme
+  }, /*#__PURE__*/_react["default"].createElement(SegmentRangeBar, {
+    theme: theme
+  })), /*#__PURE__*/_react["default"].createElement(SegmentTimelinePopup, {
+    alignment: segmentPopupAlignment,
+    left: "".concat(segmentCenterPercent, "%")
+  }, /*#__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
+  }, displayAssetType) : null, /*#__PURE__*/_react["default"].createElement(CardHeader, null, /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
+    theme: props.theme,
+    className: "asset-card-thumbnail-head",
+    display: "flex",
+    justify: "flex-end",
+    align: "center",
+    position: "relative",
+    zIndex: "2",
+    marginLeft: "auto"
+  }, ingest_db_id && /*#__PURE__*/_react["default"].createElement(HoverActionContainer, null, nestedDropdownData && nestedDropdownData.length && isAdobe ? /*#__PURE__*/_react["default"].createElement("div", {
+    ref: menuAnchorRef,
+    style: {
+      position: "relative"
+    },
+    onMouseEnter: openMenu,
+    onMouseLeave: closeMenu
+  }, /*#__PURE__*/_react["default"].createElement(HoverActionButton, {
+    className: "rotate-icon",
+    type: "button",
+    title: "More"
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: "dots",
+    width: 14,
+    height: 14,
+    theme: props.theme
+  })), /*#__PURE__*/_react["default"].createElement(DropdownPortal, {
+    open: showTopRightAction,
+    anchorRef: menuAnchorRef,
+    onMouseEnter: openMenu,
+    onMouseLeave: closeMenu
+  }, /*#__PURE__*/_react["default"].createElement(NestedDropdown, {
+    data: nestedDropdownData,
+    onSelect: handleNestedSelect
+  }))) : !isAdobe && /*#__PURE__*/_react["default"].createElement(HoverActionButton, {
+    type: "button",
+    onClick: handleUploadTypeClick,
+    title: "Info"
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: "info",
+    width: 14,
+    height: 14,
+    theme: props.theme
+  }))))), actionItems.length && /*#__PURE__*/_react["default"].createElement(BottomActionContainer, null, actionItems.map(function (item, i) {
+    return item.icon && /*#__PURE__*/_react["default"].createElement(IconButtonStyles, {
+      theme: props.theme,
+      className: "asset-card-thumbnail-icon-button",
+      type: "button",
+      key: i,
+      position: "relative",
+      border: "none",
+      cursor: "pointer",
+      borderRadius: "15px",
+      height: "26px",
+      padding: "0px",
+      width: "26px",
+      margin: "0",
+      onClick: function onClick(e) {
+        return handleActionIconClick(e, item);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      name: item.icon,
+      width: 22,
+      height: 24,
+      theme: props.theme
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tooltip"
+    }, item.title));
+  })) || null, file_type && !thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "thumbnail-image-block background-block"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "circle"
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: file_type == "video" && value == "collateral" ? "video-icon" : "".concat(file_type, "-icon"),
+    width: 15,
+    height: 15
+  }))) : null, iframeurl && /*#__PURE__*/_react["default"].createElement("div", {
+    onMouseMove: handleMouseMove,
+    className: "iframe-image-block background-block",
+    ref: iframeImageBlockRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "hover-pointer",
+    ref: hoverPointerRef
+  }), /*#__PURE__*/_react["default"].createElement("img", {
+    ref: iframeImageRef,
+    className: "iframe-image",
+    src: iframeurl,
+    alt: "preview"
+  })) || null, isSearchPageCard && supportsDuration && displayDuration ? /*#__PURE__*/_react["default"].createElement(DurationBadge, null, displayDuration) : null);
+};
+ThumbnailV2.propTypes = {
+  theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
+  width: _propTypes["default"].string,
+  thumbnail: _propTypes["default"].string,
+  file_type: _propTypes["default"].string,
+  iframeurl: _propTypes["default"].string,
+  upload_status: _propTypes["default"].string,
+  card_status: _propTypes["default"].string,
+  ingest_db_id: _propTypes["default"].string,
+  archived_status: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  actions: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].object]),
+  actionClick: _propTypes["default"].func,
+  onUploadTypeClick: _propTypes["default"].func,
+  nestedDropdownData: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  onNestedDropdownSelect: _propTypes["default"].func,
+  isAdobe: _propTypes["default"].bool,
+  in_time: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  in_timecode: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  out_time: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  out_timecode: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  full_duration: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  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]),
+  isSearchPageCard: _propTypes["default"].bool
+};
+ThumbnailV2.defaultProps = {
+  theme: "dark",
+  width: "lg",
+  thumbnail: "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png",
+  iframeurl: "",
+  isAdobe: false,
+  isSearchPageCard: false
+};
+var _default = exports["default"] = ThumbnailV2;

package/atoms/icon/icon.js

@@ -22,11 +22,12 @@ var _Icon = function Icon(props) {
     viewBox: viewBox,
     color: props.color
   }, icon.paths.map(function (path, index) {
+    var _props$color$index;
     return /*#__PURE__*/_react["default"].createElement("path", {
       key: index,
       d: path,
       transform: icon.transform,
-      fill: props.color,
+      fill: (_props$color$index = props.color[index]) !== null && _props$color$index !== void 0 ? _props$color$index : props.color,
       stroke: props.stroke,
       strokeWidth: icon.strokeWidth,
       fillRule: icon.fillRule,