@cross-nft-marketplace/auction-house-nft-components
Version:
NFT Media Rendering Components
51 lines (50 loc) • 4.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MediaThumbnail = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const AddressView_1 = require("../components/AddressView");
const MediaObject_1 = require("../components/MediaObject");
const useMediaContext_1 = require("../context/useMediaContext");
const NFTDataContext_1 = require("../context/NFTDataContext");
const svg_icons_1 = require("../constants/svg-icons");
const wallet_1 = require("../utils/wallet");
const MediaThumbnail = ({ className, }) => {
const nftDataContext = (0, react_1.useContext)(NFTDataContext_1.NFTDataContext);
const nft = (0, react_1.useMemo)(() => nftDataContext.nft, [nftDataContext.nft]);
const { getStyles, getString } = (0, useMediaContext_1.useMediaContext)();
const getContent = () => {
var _a, _b;
let name = nft === null || nft === void 0 ? void 0 : nft.name;
if (!name && nft) {
name = (nft.contract.name || (0, wallet_1.shortWallet)(nft.contract.address)) + " #" + nft.contractNftId;
}
const artist = (_a = nft === null || nft === void 0 ? void 0 : nft.artists) === null || _a === void 0 ? void 0 : _a[0];
let creatorAddress = artist ? { name: artist.name, wallet: (_b = artist.address) === null || _b === void 0 ? void 0 : _b.wallet } : undefined;
if (creatorAddress == null && (nft === null || nft === void 0 ? void 0 : nft.creator)) {
creatorAddress = nft === null || nft === void 0 ? void 0 : nft.creator;
}
if (nft && nft.medias) { //todo find some usefull field.
return {
media: (0, jsx_runtime_1.jsx)(MediaObject_1.MediaObject, { medias: nft.medias }),
title: name,
titleClassName: 'cardTitle',
address: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { children: creatorAddress && (0, jsx_runtime_1.jsx)(AddressView_1.AddressView, { address: creatorAddress }) }) }),
};
}
const hasError = nftDataContext.error;
return {
media: (0, jsx_runtime_1.jsx)("div", { ...getStyles("mediaLoader"), children: hasError ? ((0, jsx_runtime_1.jsxs)("div", { ...getStyles("mediaLoaderError"), children: [(0, svg_icons_1.SVG_MEDIA_LOADER_ERROR_2)(), (0, jsx_runtime_1.jsx)("span", { ...getStyles("mediaObjectMessage"), children: "Media not loading" })] })) : 'Loading...' }),
title: (hasError && name) ? name : "▒▒▒▒▒▒▒▒▒▒▒",
titleClassName: ((hasError && name) ? 'cardTitle' : 'cardTitleLoading'),
address: (hasError && creatorAddress) ?
(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(AddressView_1.AddressView, { address: creatorAddress }) }) }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { ...getStyles('cardAddressLoading'), children: "\u2592\u2592\u2592\u2592\u2592\u2592\u2592\u2592\u2592\u2592\u2592\u2592\u2592\u2592\u2592\u2592\u2592" }) }),
};
};
const { media, title, address, titleClassName, } = getContent();
const hasCreator = true; //nft && nft.artists && nft.artists.length > 0 ;
return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("div", { ...getStyles("cardMediaWrapper"), children: media }), (0, jsx_runtime_1.jsxs)("div", { ...getStyles("cardItemInfo"), children: [(0, jsx_runtime_1.jsx)("h5", { ...getStyles(titleClassName), children: title }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { ...getStyles("textSubdued"), children: hasCreator
? getString("CARD_CREATED_BY")
: getString("CARD_OWNED_BY") }), " ", address] })] })] }));
};
exports.MediaThumbnail = MediaThumbnail;