@desynova-digital/components 9.2.1 → 9.2.3

package/atoms/cardV2/thumbnailV2.js

@@ -0,0 +1,251 @@
+"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 _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 _cardV = require("./cardV2");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // 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: '#2f3031',
+    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"])), 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 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';
+}, function (_ref3) {
+  var data_type = _ref3.data_type;
+  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';
+}, function (_ref5) {
+  var width = _ref5.width;
+  return width === 'sm' ? '50px' : width === 'md' ? '70px' : '110px';
+}, 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;
+}, function (props) {
+  return props.upload_type === 'rc' ? '#FFFFFF' : '#15212F';
+});
+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 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) {
+  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: 1px;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  z-index: 3;\n  opacity: 1;\n"])));
+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,
+    onUploadTypeClick = props.onUploadTypeClick,
+    showPointer = props.showPointer;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    statusIndex = _useState2[0],
+    setStatusIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isClickPrevented = _useState4[0],
+    setClickPreventation = _useState4[1];
+  var iframeImageBlockRef = (0, _react.useRef)(null);
+  var iframeImageRef = (0, _react.useRef)(null);
+  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';
+    }) // can add multiple condition in future to prevent click
+    ) {
+      setClickPreventation(true);
+    }
+  }, [actions && JSON.stringify(actions).length > 0]);
+  (0, _react.useEffect)(function () {
+    /**
+     * will return the hex based status passed
+     * eg. status = In Progress -> will format to "in_progress"
+     * then it will find its index in CARD_ASSET_STATUS which will
+     * return hex
+     * @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('_') : []);
+    });
+    setStatusIndex(index);
+  }, [upload_status, card_status]);
+  var handleMouseMove = (0, _react.useCallback)(function () {
+    if (iframeImageBlockRef && hoverPointerRef && iframeImageRef) {
+      var iframeBlockHeight = iframeImageBlockRef.current.offsetHeight;
+      var iframeOgHeight = 120;
+      var ogHeight = iframeImageRef.current.naturalHeight;
+      var offsetHeight = iframeImageRef.current.offsetHeight;
+      var offsetWidth = iframeImageRef.current.offsetWidth;
+      var iframeCount = ogHeight / iframeOgHeight;
+      var iframeOffsetHeight = offsetHeight / iframeCount;
+      var imageChangePoint = offsetWidth / iframeCount;
+      var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
+      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';
+    }
+  }, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
+
+  /**
+   * will decide thumbnail click based on its condition
+   * eg. if task_type === upload then prevent click
+   * @function
+   */
+  var handleThumbnailClick = (0, _react.useCallback)(function (e) {
+    if (!isClickPrevented) {
+      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,
+    isClickPrevented: isClickPrevented,
+    onClick: handleThumbnailClick,
+    theme: props.theme,
+    data_type: data_type
+  }, /*#__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, /*#__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
+  }))))), actions && actions.length && /*#__PURE__*/_react["default"].createElement(BottomActionContainer, null, actions.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: "".concat(file_type, "-icon"),
+    width: 20,
+    height: 20
+  }))) : 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
+  })) || 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,
+  actions: _propTypes["default"].instanceOf(Array),
+  actionClick: _propTypes["default"].func,
+  onUploadTypeClick: _propTypes["default"].func
+};
+ThumbnailV2.defaultProps = {
+  theme: 'dark',
+  width: 'lg',
+  thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
+  iframeurl: ''
+};
+var _default = exports["default"] = ThumbnailV2;