@cross-nft-marketplace/auction-house-nft-components
Version:
NFT Media Rendering Components
76 lines (75 loc) • 3.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MediaObject = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const useMediaContext_1 = require("../context/useMediaContext");
const Utils_1 = require("../content-components/Utils");
//todo use useNFTContent fot Text
exports.MediaObject = (0, react_1.memo)(({ medias, a11yIdPrefix, isFullPage = false, }) => {
const [renderingInfo, setRenderingInfo] = (0, react_1.useState)();
const { getStyles, getString, renderers, style } = (0, useMediaContext_1.useMediaContext)();
const [mimeTypes, mimeTypesUpdate] = (0, react_1.useState)([]);
const request = {
renderingContext: isFullPage ? "FULL" : "PREVIEW",
};
(0, react_1.useEffect)(() => {
(async () => {
if (medias) {
//download only missed mimeTypes
const mediasWithoutMimeTypes = medias.filter(media => !media.mimeType); //todo possible also download if size zero
const mediaURLsToFetch = mediasWithoutMimeTypes.map(media => media.url);
const fetchedMediaInfos = await (0, Utils_1.fetchContentMimeTypes)(mediaURLsToFetch, style.theme.preferredIPFSGateway);
let res = medias.map(media => {
return {
mimeType: media.mimeType || "",
sizeInBytes: media.size
};
});
mediasWithoutMimeTypes.forEach((media, fetchIndex) => {
let mediaIndex = medias.indexOf(media);
res[mediaIndex] = fetchedMediaInfos[fetchIndex];
});
mimeTypesUpdate(res);
}
})();
}, [medias]);
(0, react_1.useEffect)(() => {
if (mimeTypes.length != medias.length) {
//not loaded yet
return;
}
let mediasEx = medias.map((media, index) => {
return {
...media,
meta: mimeTypes[index]
};
});
let appropriateMedia = (0, Utils_1.getAppropriateMedia)(mediasEx, {
mediaSize: (0, Utils_1.getMediaSizeForRendering)(request.renderingContext),
mimeTypes: renderers.map(rendere => rendere.supportedMimeTypes).flatMap(mimeType => mimeType),
}, {
cdnHosts: style.theme.cdnHosts,
maxPreviewSizeInBytes: style.theme.maxPreviewMediaSize
});
let renderer = undefined;
if (appropriateMedia == null) {
//find unknown, todo find by name
renderer = renderers.find(renderer => renderer.supportedMimeTypes.length == 0);
}
else {
let mediaMimeType = mimeTypes[mediasEx.indexOf(appropriateMedia)].mimeType;
renderer = renderers.find(rendererTest => rendererTest.supportedMimeTypes.some(mimeType => mediaMimeType.startsWith(mimeType)));
}
setRenderingInfo({ render: renderer, media: appropriateMedia, contextMedias: mediasEx });
}, [renderers, medias, mimeTypes]);
if (medias && mimeTypes.length == medias.length && renderingInfo) {
const RenderingComponent = renderingInfo.render.render;
return ((0, jsx_runtime_1.jsx)(RenderingComponent, { a11yIdPrefix: a11yIdPrefix, getStyles: getStyles, getString: getString, theme: style.theme, request: request, media: renderingInfo.media, contextMedias: renderingInfo.contextMedias }));
}
return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
}, (prev, next) => {
return JSON.stringify(prev.medias) == JSON.stringify(next.medias)
&& prev.isFullPage == next.isFullPage
&& prev.a11yIdPrefix == next.a11yIdPrefix;
});