@desynova-digital/components 9.2.52 → 9.3.1

package/atoms/cardV2/contentV2.js

@@ -0,0 +1,338 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _cardV = require("./cardV2");
+var _icon = _interopRequireDefault(require("../../atoms/icon"));
+var _tokens = require("@desynova-digital/tokens");
+var _statusV = _interopRequireDefault(require("../../../tokens/statusV2"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TextEllipsisStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var ParaStyles = (0, _styledComponents["default"])(function (props) {
+  return /*#__PURE__*/_react["default"].createElement(_cardV.BaseParaStyles, props);
+})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  padding: 0;\n  margin-right: 10px;\n  font-size: 10px;\n  color: #afb2ba;\n  -webkit-line-clamp: 1;\n  height: 10px;\n"])), TextEllipsisStyles);
+var TitleStyles = (0, _styledComponents["default"])(function (props) {
+  return /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, props);
+})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  font-family: SFUIText-Medium;\n  -webkit-line-clamp: 2;\n  height: 20px;\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: nowrap;\n\n  .title-text {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n    flex-shrink: 1;\n  }\n\n  .files-associated-icon {\n    margin-left: 7px;\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    color: #afb2ba;\n  }\n\n  .files-associated-icon:hover {\n    color: #00cec6;\n  }\n"])), TextEllipsisStyles, function (_ref) {
+  var isTitleClick = _ref.isTitleClick;
+  return isTitleClick ? 'pointer' : 'default';
+});
+var ContentBody = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n"])));
+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) {
+  var type = _ref2.type,
+    width = _ref2.width;
+  return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
+}, function (_ref3) {
+  var width = _ref3.width;
+  return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
+}, function (_ref4) {
+  var type = _ref4.type,
+    width = _ref4.width;
+  if (width === 'sm' && type === 'search') {
+    return '0px 13px';
+  }
+  if (type === 'search' && width !== 'sm') {
+    return '13px 16px';
+  }
+  return '13px 15px';
+}, function (_ref5) {
+  var bgColor = _ref5.bgColor,
+    type = _ref5.type;
+  return type === 'search' ? 'transparent' : bgColor === 'secondary' && type !== 'search' ? '#0C141D' : '#15212F';
+}, function (_ref6) {
+  var type = _ref6.type,
+    width = _ref6.width;
+  return type === 'search' || width === 'sm' ? 'height: auto;' : width === 'md' ? 'height: 62px;' : '';
+}, function (props) {
+  return _tokens.colors[props.theme].filter.rgbthemeColor;
+}, function (props) {
+  return _tokens.colors[props.theme].card.themeColor;
+}, function (_ref7) {
+  var upload_type = _ref7.upload_type;
+  var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
+  var color = isRC ? '#ff6327' : '#00CEC6';
+  var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
+  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n        border: 1px solid ", ";\n        color: ", ";\n        background-color: ", ";\n      "])), color, color, bg);
+}, function (_ref8) {
+  var upload_type = _ref8.upload_type;
+  return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
+});
+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"])));
+var formatCreationDate = function formatCreationDate(creation) {
+  if (creation === null || creation === undefined || creation === '') return '';
+  var rawValue = String(creation).trim();
+  if (!rawValue) return '';
+  var date = new Date(rawValue);
+  if (/^\d+$/.test(rawValue)) {
+    var numericValue = Number(rawValue);
+    date = rawValue.length === 10 ? new Date(numericValue * 1000) : new Date(numericValue);
+  }
+  if (Number.isNaN(date.getTime())) {
+    return rawValue;
+  }
+  var day = String(date.getDate()).padStart(2, '0');
+  var month = String(date.getMonth() + 1).padStart(2, '0');
+  var year = date.getFullYear();
+  return "".concat(day, "/").concat(month, "/").concat(year);
+};
+var ContentV2 = function ContentV2(props) {
+  var title = props.title,
+    episode_label = props.episode_label,
+    season_no = props.season_no,
+    episode_no = props.episode_no,
+    version_label = props.version_label,
+    category_label = props.category_label,
+    date_count_label = props.date_count_label,
+    identifier_label = props.identifier_label,
+    box_id = props.box_id,
+    language_label = props.language_label,
+    isSegment = props.isSegment,
+    titleClick = props.titleClick,
+    show_page_id = props.show_page_id,
+    overlapping = props.overlapping,
+    icon_status = props.icon_status,
+    asset_type = props.asset_type,
+    h1 = props.h1,
+    creation = props.creation,
+    extension = props.extension,
+    season_id = props.season_id,
+    isAdobe = props.isAdobe;
+  var formattedCreation = formatCreationDate(creation);
+  var displayCreation = date_count_label || formattedCreation;
+  var boxId = Array.isArray(box_id) ? box_id[0] || '' : box_id || '';
+  var normalizedEpisodeLabel = typeof episode_label === 'string' ? episode_label.trim() : episode_label;
+  var hasSeasonNumber = season_no !== undefined && season_no !== null && String(season_no).trim() !== '';
+  var hasEpisodeNumber = episode_no !== undefined && episode_no !== null && String(episode_no).trim() !== '';
+  var resolvedEpisodeLabel = normalizedEpisodeLabel || (hasSeasonNumber && hasEpisodeNumber ? "S".concat(season_no, " E").concat(episode_no) : '');
+  var ICON_DIMENSION_MAP = {
+    snp_edit: {
+      width: 10,
+      height: 10
+    },
+    pgm_edit_V2: {
+      width: 13,
+      height: 10
+    },
+    subtitle_assign: {
+      width: 12,
+      height: 10
+    },
+    subtitle: {
+      width: 12,
+      height: 10
+    },
+    archive: {
+      width: 10,
+      height: 10
+    },
+    delivery: {
+      width: 13,
+      height: 10
+    },
+    dubbing_review: {
+      width: 7,
+      height: 10
+    }
+  };
+  var ICON_LABEL_MAP = {
+    snp_edit: 'SNP Edit',
+    pgm_edit_V2: 'PGM Edit',
+    archive: 'Archive',
+    delivery: 'Delivery',
+    dubbing_review: 'Dubbing Review',
+    subtitle_assign: 'Subtitle',
+    file_ingest: 'Ingest',
+    subtitle: 'Subtitle'
+  };
+  var getIconLabel = function getIconLabel(iconName) {
+    return ICON_LABEL_MAP[iconName] || (iconName === null || iconName === void 0 ? void 0 : iconName.replace(/_/g, ' ')) || '';
+  };
+  var normalizeStatusCode = function normalizeStatusCode(status) {
+    return String(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);
+    });
+    if (!matched) return undefined;
+    return (_matched$hex = matched.hex) === null || _matched$hex === void 0 ? void 0 : _matched$hex.background;
+  };
+  var footerIcons = (icon_status || []).map(function (item) {
+    var _getStatusHexColor, _ICON_DIMENSION_MAP$i;
+    return _objectSpread({
+      name: item.icon,
+      status: item.status,
+      tooltipLabel: "".concat(getIconLabel(item.icon)).concat(item.status ? " : ".concat(item.status) : ''),
+      color: (_getStatusHexColor = getStatusHexColor(item.status)) !== null && _getStatusHexColor !== void 0 ? _getStatusHexColor : '#AFB2BA'
+    }, (_ICON_DIMENSION_MAP$i = ICON_DIMENSION_MAP[item.icon]) !== null && _ICON_DIMENSION_MAP$i !== void 0 ? _ICON_DIMENSION_MAP$i : {
+      width: 10,
+      height: 10
+    });
+  });
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isFilesIconHovered = _useState2[0],
+    setIsFilesIconHovered = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isFooterIconHovered = _useState4[0],
+    setIsFooterIconHovered = _useState4[1];
+  var hasMetaRow = Boolean(version_label || category_label);
+  var line1 = [title || h1, resolvedEpisodeLabel].filter(Boolean).join(' | ');
+  var line2 = [version_label, category_label].filter(Boolean).join(' | ');
+  var line3 = [date_count_label, identifier_label, language_label].filter(Boolean).join(' | ');
+  var combinedTooltipText = [line1, line2, line3].filter(function (s) {
+    return s && s.trim();
+  }).join('\n');
+  var contentTooltipTitle = isFooterIconHovered ? '' : combinedTooltipText;
+  return /*#__PURE__*/_react["default"].createElement(ContentStyles, (0, _extends2["default"])({}, props, {
+    title: undefined,
+    className: "asset-card-content".concat(hasMetaRow ? '' : ' no-meta-row')
+    // title={contentTooltipTitle}
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "title-parent"
+  }, /*#__PURE__*/_react["default"].createElement(TitleStyles, {
+    theme: props.theme,
+    isTitleClick: show_page_id,
+    onClick: function onClick(e) {
+      return titleClick(e, show_page_id);
+    },
+    fontSize: "12px",
+    color: "#FFF"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "title-text",
+    title: title || h1
+  }, title || h1), resolvedEpisodeLabel ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, null, resolvedEpisodeLabel) : null, show_page_id && asset_type !== 'sports' && !isAdobe ? /*#__PURE__*/_react["default"].createElement("span", {
+    title: "Open Page",
+    className: "files-associated-icon",
+    onMouseEnter: function onMouseEnter() {
+      return setIsFilesIconHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsFilesIconHovered(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: "files-associated",
+    width: 8,
+    height: 8,
+    color: isFilesIconHovered ? '#00CEC6' : '#AFB2BA'
+  })) : null)), (resolvedEpisodeLabel || version_label || category_label || date_count_label || identifier_label || isSegment || extension || creation) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (version_label || category_label) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "meta-row"
+  }, version_label && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "meta-badge"
+  }, version_label), category_label && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "meta-text"
+  }, category_label), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
+    className: "segment-indicator"
+  }, "S")), (date_count_label || identifier_label || language_label || extension || creation || boxId) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "footer-row"
+  }, displayCreation && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "footer-text"
+  }, displayCreation), boxId && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "footer-text"
+  }, boxId), !boxId && (identifier_label || extension) && asset_type != 'movie' && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "footer-text"
+  }, identifier_label || extension), season_id && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "footer-text"
+  }, season_id), language_label && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "footer-text-language"
+  }, language_label), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "footer-icons"
+  }, footerIcons.map(function (icon) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      key: icon.name,
+      className: "footer-icon"
+      // title={icon.tooltipLabel}
+      ,
+      onMouseEnter: function onMouseEnter() {
+        return setIsFooterIconHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsFooterIconHovered(false);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      name: icon.name,
+      color: icon.color,
+      width: icon.width,
+      height: icon.height
+    }));
+  }))), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
+    theme: props.theme,
+    display: "flex",
+    className: "overlapping-container"
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    theme: props.theme,
+    name: "overlapping"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "overlappig-popup-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "overlappig-popup"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "popup-pointer"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "overlappig-popup-title"
+  }, "Overlapping with:"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "overlapping-episod-list-container"
+  }, overlapping.map(function (value, index) {
+    return /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "header-container"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "thumbnail",
+      style: {
+        backgroundImage: "url(".concat(value.thumbnail ? value.thumbnail : 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png', " )")
+      }
+    }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "episod-title"
+    }, value.episode_name), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "episod-details"
+    }, "S".concat(value.season_no, " E").concat(value.episode_no), /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        marginLeft: '10px'
+      }
+    }, value.duration, " Min")))), index != overlapping.length - 1 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "divider"
+    }));
+  })))), overlapping.length > 1 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
+    theme: props.theme,
+    margin: "0"
+  }, overlapping.length)) || null));
+};
+ContentV2.propTypes = {
+  title: _propTypes["default"].string,
+  episode_label: _propTypes["default"].string,
+  season_no: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  episode_no: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  version_label: _propTypes["default"].string,
+  category_label: _propTypes["default"].string,
+  date_count_label: _propTypes["default"].string,
+  identifier_label: _propTypes["default"].string,
+  language_label: _propTypes["default"].string,
+  width: _propTypes["default"].string,
+  type: _propTypes["default"].string,
+  titleClick: _propTypes["default"].func,
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  isAdobe: _propTypes["default"].bool
+};
+ContentV2.defaultProps = {
+  theme: 'dark',
+  isSegment: false,
+  isAdobe: false
+};
+var _default = exports["default"] = ContentV2;

package/atoms/cardV2/thumbnail.js

@@ -15,7 +15,7 @@ var _tokens = require("@desynova-digital/tokens");
 var _icon = _interopRequireDefault(require("../../atoms/icon"));
 var _tokens2 = require("../../../tokens");
 var _cardV = require("./cardV2");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // atoms
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // 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); }
@@ -23,51 +23,48 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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'
+    backgroundColor: "#121D29",
+    backgroundSize: "inherit"
   },
   asset: {
-    backgroundColor: 'inherit',
-    backgroundSize: 'cover'
+    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"])), OverlayBackgroundStyles);
-var ThumbnailStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  background: ", ";\n  background-color: ", ";\n  background-size: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 8px 8px 0 0;\n  overflow: hidden;\n\n  .iframe-image-block {\n    cursor: ", ";\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: linear-gradient(359deg, #182738 19.98%, #182738 48.97%, rgba(24, 39, 56, 0.42) 99.47%);\n  }\n\n  &:hover ", " {\n    opacity: 1;\n  }\n"])), function (_ref) {
+var ThumbnailStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  background: ", ";\n  background-color: ", ";\n  background-size: ", ";\n  width: ", ";\n  height: ", ";\n\n  .iframe-image-block {\n    cursor: ", ";\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: #182738;\n  }\n"])), function (_ref) {
   var thumbnail = _ref.thumbnail;
   return "url(".concat(thumbnail, ") no-repeat 50%");
 }, function (_ref2) {
   var data_type = _ref2.data_type;
-  return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : 'inherit';
+  return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : "inherit";
 }, function (_ref3) {
   var data_type = _ref3.data_type;
-  return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : 'cover';
+  return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : "cover";
 }, function (_ref4) {
   var width = _ref4.width;
-  return width === 'sm' ? '90px' : width === 'md' ? '125px' : '222px';
+  return width === "sm" ? "90px" : width === "md" ? "125px" : "222px";
 }, function (_ref5) {
   var width = _ref5.width;
-  return width === 'sm' ? '50px' : width === 'md' ? '70px' : '110px';
+  return width === "sm" ? "50px" : width === "md" ? "70px" : "126px";
 }, function (_ref6) {
   var isClickPrevented = _ref6.isClickPrevented;
-  return !isClickPrevented ? 'pointer' : 'default';
-}, HoverActionButton);
-var UploadTypeContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 2;\n  cursor: pointer;\n  .uploadWrapper {\n    border-radius: 50%;\n    background: ", ";\n\n    color: ", ";\n    width: 25px;\n    height: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .wrapper {\n      font-size: 10px;\n      font-family: 'SFUIText-Regular';\n      line-height: 1.1;\n      text-transform: uppercase;\n    }\n  }\n"])), function (props) {
-  return props.upload_type === 'rc' ? '#FF6327' : _tokens.colors[props.theme].card.themeColor;
+  return !isClickPrevented ? "pointer" : "default";
+});
+var UploadTypeContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 2;\n  .uploadWrapper {\n    border-radius: 50%;\n    background: ", ";\n\n    color: ", ";\n    width: 25px;\n    height: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .wrapper {\n      font-size: 10px;\n      font-family: \"SFUIText-Regular\";\n      line-height: 1.1;\n      text-transform: uppercase;\n    }\n  }\n"])), function (props) {
+  return props.upload_type === "rc" ? "#FF6327" : _tokens.colors[props.theme].card.themeColor;
 }, function (props) {
-  return props.upload_type === 'rc' ? '#FFFFFF' : '#15212F';
+  return props.upload_type === "rc" ? "#FFFFFF" : "#0C141D";
 });
-var HoverActionContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-left: 6px;\n"])));
-var StatusBoxStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ", ";\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ", ";\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n"])), OverlayBackgroundStyles, function (_ref7) {
+var StatusBoxStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ", ";\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ", ";\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n"])), OverlayBackgroundStyles, function (_ref7) {
   var hex = _ref7.hex;
   return hex.background;
 });
 var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
   return /*#__PURE__*/_react["default"].createElement(_cardV.BaseButtonStyles, props);
-})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n\n  .tooltip {\n    position: absolute;\n    bottom: 130%;\n    left: 30%;\n    transform: translateX(-50%);\n    padding: 5px 9px;\n    box-sizing: border-box;\n    background: #000000;\n    color: #fff;\n    border-radius: 10px;\n    visibility: hidden;\n    opacity: 0;\n    z-index: 10;\n    transition: all 350ms ease-in-out 0s;\n    &:after {\n      content: '';\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid #000;\n      bottom: -5px;\n      left: 50%;\n    }\n    .details-header {\n      color: #666666;\n      font-family: 'SFUIText-Regular';\n      text-transform: none;\n      margin-bottom: 8px;\n    }\n    .details-value {\n      color: #999999;\n      font-family: 'SFUIText-Light';\n      text-transform: none;\n      font-size: 10px;\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n    .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"])), OverlayBackgroundStyles, function (props) {
+})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n\n  .tooltip {\n    position: absolute;\n    bottom: 130%;\n    left: 30%;\n    transform: translateX(-50%);\n    padding: 5px 9px;\n    box-sizing: border-box;\n    background: #000000;\n    color: #fff;\n    border-radius: 10px;\n    visibility: hidden;\n    opacity: 0;\n    z-index: 10;\n    transition: all 350ms ease-in-out 0s;\n    &:after {\n      content: \"\";\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid #000;\n      bottom: -5px;\n      left: 50%;\n    }\n    .details-header {\n      color: #666666;\n      font-family: \"SFUIText-Regular\";\n      text-transform: none;\n      margin-bottom: 8px;\n    }\n    .details-value {\n      color: #999999;\n      font-family: \"SFUIText-Light\";\n      text-transform: none;\n      font-size: 10px;\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n    .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"])), OverlayBackgroundStyles, function (props) {
   return _tokens.colors[props.theme].card.themeColor;
 });
-var CardHeader = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n"])));
-var BottomActionContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  z-index: 3;\n  opacity: 1;\n"])));
+var CardHeader = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n"])));
 var Thumbnail = function Thumbnail(props) {
   var theme = props.theme,
     width = props.width,
@@ -80,9 +77,7 @@ var Thumbnail = function Thumbnail(props) {
     upload_status = props.upload_status,
     upload_type = props.upload_type,
     file_type = props.file_type,
-    data_type = props.data_type,
-    onUploadTypeClick = props.onUploadTypeClick,
-    showPointer = props.showPointer;
+    data_type = props.data_type;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     statusIndex = _useState2[0],
@@ -96,7 +91,7 @@ var Thumbnail = function Thumbnail(props) {
   var hoverPointerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (actions && actions.length > 0 && actions.some(function (item) {
-      return item.field === 'upload' || item.field === 'phupload_ingest';
+      return item.field === "upload" || item.field === "phupload_ingest";
     }) // can add multiple condition in future to prevent click
     ) {
       setClickPreventation(true);
@@ -111,7 +106,7 @@ var Thumbnail = function Thumbnail(props) {
      * @const
      */
     var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
-      return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(' ').join('_') : []);
+      return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(" ").join("_") : []);
     });
     setStatusIndex(index);
   }, [upload_status, card_status]);
@@ -126,13 +121,13 @@ var Thumbnail = function Thumbnail(props) {
       var iframeOffsetHeight = offsetHeight / iframeCount;
       var imageChangePoint = offsetWidth / iframeCount;
       var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
-      hoverPointerRef.current.style.left = event.offsetX + 'px';
+      hoverPointerRef.current.style.left = event.offsetX + "px";
       var imageNum = parseInt(event.offsetX / imageChangePoint) || 1;
       var imageTop = iframeOffsetHeight * imageNum + offsetTop;
       if (imageTop > offsetHeight) {
         imageTop = offsetHeight + offsetTop - iframeOffsetHeight;
       }
-      iframeImageRef.current.style.top = '-' + imageTop + 'px';
+      iframeImageRef.current.style.top = "-" + imageTop + "px";
     }
   }, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
 
@@ -143,21 +138,11 @@ var Thumbnail = function Thumbnail(props) {
    */
   var handleThumbnailClick = (0, _react.useCallback)(function (e) {
     if (!isClickPrevented) {
-      actionClick(e, 'play', ingest_db_id);
+      actionClick(e, "play", ingest_db_id);
     } else {
       e.preventDefault();
     }
   }, [isClickPrevented]);
-  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 (onUploadTypeClick) {
-      onUploadTypeClick();
-    }
-  }, [onUploadTypeClick]);
   return /*#__PURE__*/_react["default"].createElement(ThumbnailStyles, {
     width: width,
     thumbnail: thumbnail,
@@ -165,7 +150,14 @@ var Thumbnail = function Thumbnail(props) {
     onClick: handleThumbnailClick,
     theme: props.theme,
     data_type: data_type
-  }, /*#__PURE__*/_react["default"].createElement(CardHeader, null, /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
+  }, /*#__PURE__*/_react["default"].createElement(CardHeader, null, upload_type && /*#__PURE__*/_react["default"].createElement(UploadTypeContainer, {
+    theme: props.theme,
+    upload_type: upload_type && upload_type.toLowerCase()
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "uploadWrapper"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "wrapper"
+  }, upload_type))), /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
     theme: props.theme,
     className: "asset-card-thumbnail-head",
     display: "flex",
@@ -174,15 +166,20 @@ var Thumbnail = function Thumbnail(props) {
     position: "relative",
     zIndex: "2",
     marginLeft: "auto"
-  }, !showPointer && /*#__PURE__*/_react["default"].createElement(HoverActionContainer, null, /*#__PURE__*/_react["default"].createElement(HoverActionButton, {
-    type: "button",
-    onClick: handleUploadTypeClick
-  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-    name: "info",
-    width: 14,
-    height: 14,
-    theme: props.theme
-  }))))), actions && actions.length && /*#__PURE__*/_react["default"].createElement(BottomActionContainer, null, actions.map(function (item, i) {
+  }, (card_status || upload_status) && /*#__PURE__*/_react["default"].createElement(StatusBoxStyles, {
+    theme: props.theme,
+    hex: _tokens2.CARD_ASSET_STATUS[statusIndex] ? _tokens2.CARD_ASSET_STATUS[statusIndex].hex : {
+      background: "#AFB2BA"
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "status-color"
+  }), /*#__PURE__*/_react["default"].createElement(_cardV.BaseParaStyles, {
+    theme: props.theme,
+    className: "status-text",
+    display: "inline-block",
+    fontSize: "10px",
+    color: "#FFF"
+  }, card_status || upload_status)) || null, actions && actions.length && actions.map(function (item, i) {
     return item.icon && /*#__PURE__*/_react["default"].createElement(IconButtonStyles, {
       theme: props.theme,
       className: "asset-card-thumbnail-icon-button",
@@ -195,19 +192,20 @@ var Thumbnail = function Thumbnail(props) {
       height: "26px",
       padding: "0px",
       width: "26px",
-      margin: "0",
+      margin: actions.length === i + 1 ? "0" : "0 5px 0px 0px",
       onClick: function onClick(e) {
-        return handleActionIconClick(e, item);
+        e.stopPropagation();
+        actionClick(e, item.field);
       }
     }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
       name: item.icon,
-      width: 22,
-      height: 24,
+      width: 14,
+      height: 14,
       theme: props.theme
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tooltip"
     }, item.title));
-  })) || null, file_type && !thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
+  }) || null)), file_type && !thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "thumbnail-image-block background-block"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "circle"
@@ -229,7 +227,7 @@ var Thumbnail = function Thumbnail(props) {
   })) || null);
 };
 Thumbnail.propTypes = {
-  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
   width: _propTypes["default"].string,
   thumbnail: _propTypes["default"].string,
   file_type: _propTypes["default"].string,
@@ -238,13 +236,12 @@ Thumbnail.propTypes = {
   card_status: _propTypes["default"].string,
   ingest_db_id: _propTypes["default"].string,
   actions: _propTypes["default"].instanceOf(Array),
-  actionClick: _propTypes["default"].func,
-  onUploadTypeClick: _propTypes["default"].func
+  actionClick: _propTypes["default"].func
 };
 Thumbnail.defaultProps = {
-  theme: 'dark',
-  width: 'lg',
-  thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
-  iframeurl: ''
+  theme: "dark",
+  width: "lg",
+  thumbnail: "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png",
+  iframeurl: ""
 };
 var _default = exports["default"] = Thumbnail;