@desynova-digital/components 9.3.2 → 9.3.3

package/atoms/cardV2/thumbnailV2.js

@@ -14,7 +14,6 @@ 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");
@@ -23,6 +22,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 // 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 DEFAULT_THUMBNAIL_URL = "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png";
+var DEFAULT_FILE_TYPES = ["document", "audio", "video", "music", "image", "file", "folder"];
 var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: rgba(0, 0, 0, 0.5);\n"])));
 var assetStyles = {
   folder: {
@@ -292,6 +293,9 @@ 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 getNormalizedFileType = function getNormalizedFileType(fileType) {
+  return String(fileType || "").trim().toLowerCase();
+};
 var ThumbnailV2 = function ThumbnailV2(props) {
   var theme = props.theme,
     width = props.width,
@@ -333,6 +337,11 @@ var ThumbnailV2 = function ThumbnailV2(props) {
   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 rawThumbnail = typeof props.thumbnail === "string" ? props.thumbnail.trim() : "";
+  var rawIframeurl = typeof props.iframeurl === "string" ? props.iframeurl.trim() : "";
+  var hasNoMediaSources = !rawThumbnail && !rawIframeurl;
+  var normalizedFileType = getNormalizedFileType(file_type);
+  var isVideoFileType = normalizedFileType === "video";
   var actionItems = Array.isArray(actions) ? actions : [];
   var isSegmentCard = Boolean(isSegment || is_segment);
   var totalSeconds = getTimeInSeconds(resolvedDuration, effectiveFrameRate);
@@ -345,18 +354,30 @@ var ThumbnailV2 = function ThumbnailV2(props) {
   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),
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    statusIndex = _useState6[0],
-    setStatusIndex = _useState6[1];
+    isClickPrevented = _useState6[0],
+    setClickPreventation = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    isClickPrevented = _useState8[0],
-    setClickPreventation = _useState8[1];
+    showTopRightAction = _useState8[0],
+    setShowTopRightAction = _useState8[1];
   var _useState9 = (0, _react.useState)(false),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    showTopRightAction = _useState10[0],
-    setShowTopRightAction = _useState10[1];
+    hasThumbnailLoaded = _useState10[0],
+    setHasThumbnailLoaded = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    hasThumbnailError = _useState12[0],
+    setHasThumbnailError = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    hasIframeLoaded = _useState14[0],
+    setHasIframeLoaded = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    hasIframeError = _useState16[0],
+    setHasIframeError = _useState16[1];
   var iframeImageBlockRef = (0, _react.useRef)(null);
   var iframeImageRef = (0, _react.useRef)(null);
   var hoverPointerRef = (0, _react.useRef)(null);
@@ -379,11 +400,47 @@ var ThumbnailV2 = function ThumbnailV2(props) {
     }
   }, [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]);
+    var isMounted = true;
+    var preloaders = [];
+
+    /**
+     * This function preloads an image from the provided URL and handles its load and error states.
+     * @param {string} src URL of the image to load.
+     * @param {Function} setLoaded State setter for successful image loading.
+     * @param {Function} setError State setter for image loading failure.
+     */
+
+    var loadImage = function loadImage(src, setLoaded, setError) {
+      setLoaded(false);
+      setError(false);
+      if (!src) {
+        setError(true);
+        return;
+      }
+      var image = new Image();
+      image.onload = function () {
+        if (!isMounted) return;
+        setLoaded(true);
+        setError(false);
+      };
+      image.onerror = function () {
+        if (!isMounted) return;
+        setLoaded(false);
+        setError(true);
+      };
+      image.src = src;
+      preloaders.push(image);
+    };
+    loadImage(rawThumbnail, setHasThumbnailLoaded, setHasThumbnailError);
+    loadImage(rawIframeurl, setHasIframeLoaded, setHasIframeError);
+    return function () {
+      isMounted = false;
+      preloaders.forEach(function (image) {
+        image.onload = null;
+        image.onerror = null;
+      });
+    };
+  }, [rawThumbnail, rawIframeurl]);
   (0, _react.useEffect)(function () {
     if (!showTopRightAction) return;
     var handleClick = function handleClick(e) {
@@ -446,9 +503,14 @@ var ThumbnailV2 = function ThumbnailV2(props) {
       onNestedDropdownSelect(item);
     }
   }, [onNestedDropdownSelect]);
+  var resolvedIconName = normalizedFileType === "video" && value == "collateral" ? "video-icon" : DEFAULT_FILE_TYPES.includes(normalizedFileType) ? "".concat(normalizedFileType, "-icon") : "unsupportedFile-icon";
+  var shouldShowThumbnailImage = !hasNoMediaSources && hasThumbnailLoaded;
+  var shouldShowDefaultThumbnail = !hasNoMediaSources && isVideoFileType && rawThumbnail && !hasThumbnailLoaded;
+  var shouldShowFileTypeIcon = Boolean(file_type) && (hasNoMediaSources || !shouldShowThumbnailImage && !shouldShowDefaultThumbnail);
+  var shouldRenderIframePreview = hasIframeLoaded && !hasIframeError;
   return /*#__PURE__*/_react["default"].createElement(ThumbnailStyles, {
     width: width,
-    thumbnail: thumbnail,
+    thumbnail: shouldShowThumbnailImage ? rawThumbnail : shouldShowDefaultThumbnail ? DEFAULT_THUMBNAIL_URL : "",
     isClickPrevented: isClickPrevented,
     onClick: handleThumbnailClick,
     theme: props.theme,
@@ -538,15 +600,15 @@ var ThumbnailV2 = function ThumbnailV2(props) {
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tooltip"
     }, item.title));
-  })) || null, file_type && !thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
+  })) || null, shouldShowFileTypeIcon ? /*#__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"),
+    name: resolvedIconName,
     width: 15,
     height: 15
-  }))) : null, iframeurl && /*#__PURE__*/_react["default"].createElement("div", {
+  }))) : null, shouldRenderIframePreview && /*#__PURE__*/_react["default"].createElement("div", {
     onMouseMove: handleMouseMove,
     className: "iframe-image-block background-block",
     ref: iframeImageBlockRef
@@ -556,7 +618,7 @@ var ThumbnailV2 = function ThumbnailV2(props) {
   }), /*#__PURE__*/_react["default"].createElement("img", {
     ref: iframeImageRef,
     className: "iframe-image",
-    src: iframeurl,
+    src: rawIframeurl,
     alt: "preview"
   })) || null, isSearchPageCard && supportsDuration && displayDuration ? /*#__PURE__*/_react["default"].createElement(DurationBadge, null, displayDuration) : null);
 };
@@ -590,7 +652,7 @@ ThumbnailV2.propTypes = {
 ThumbnailV2.defaultProps = {
   theme: "dark",
   width: "lg",
-  thumbnail: "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png",
+  thumbnail: DEFAULT_THUMBNAIL_URL,
   iframeurl: "",
   isAdobe: false,
   isSearchPageCard: false

package/atoms/icon/icons.json

@@ -2019,6 +2019,14 @@
       ],
       "width": 14,
       "height": 14
+    },
+     "unsupportedFile-icon": {
+      "viewBox": "0 -960 960 960",
+      "paths": [
+        "M160-160q-33 0-56.5-23.5T80-240v-120h360q33 0 56.5-23.5T520-440v-360h280q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160ZM80-400v-240q0-33 23.5-56.5T160-720h240L80-400Zm153-40 207-207v207H233Z"
+      ],
+      "width": 24,
+      "height": 24
     }
   }
 }

package/package.json

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