@cross-nft-marketplace/auction-house-nft-components
Version:
NFT Media Rendering Components
62 lines (61 loc) • 2.99 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MediaLoader = exports.useMediaObjectProps = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const svg_icons_1 = require("../constants/svg-icons");
const Utils_1 = require("./Utils");
function useMediaObjectProps({ uri, request, a11yIdPrefix, getStyles, preferredIPFSGateway, }) {
const [loading, setLoading] = (0, react_1.useState)(true);
const [error, setError] = (0, react_1.useState)();
return {
loading,
error,
props: {
"aria-describedby": `${a11yIdPrefix}description`,
alt: "",
onLoad: () => setLoading(false),
// TODO(iain): Update Error
onError: () => setError("Error loading"),
src: uri ? (0, Utils_1.resolveURIGateways)(uri, preferredIPFSGateway) : uri,
...getStyles("mediaObject", undefined, {
mediaLoaded: !loading,
isFullPage: request.renderingContext === "FULL",
}),
},
};
}
exports.useMediaObjectProps = useMediaObjectProps;
const MediaLoader = ({ getStyles, children, loading, error, }) => {
if (!loading && !error) {
return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: children });
}
if (error) {
return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { ...getStyles("mediaLoaderError"), children: [(0, svg_icons_1.SVG_MEDIA_LOADER_ERROR)(), (0, jsx_runtime_1.jsx)("span", { ...getStyles("mediaObjectMessage"), children: "Media not loading" })] }) }));
}
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ...getStyles("mediaLoader"), children: "Loading..." }), children] }));
};
exports.MediaLoader = MediaLoader;