@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
43 lines • 2.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Media = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const react_1 = require("react");
const Media = ({ media }) => {
// Ensure we're only trying to show valid media, and the correct quantity.
const filteredMedia = media
// Only image/ and video/ mime types are supported.
.filter((mediaItem) => mediaItem.type.startsWith('image/') || mediaItem.type.startsWith('video/'))
.filter((mediaItem, idx, array) => {
// We'll always keep the first item.
if (0 === idx) {
return true;
}
// If the first item was a video or GIF, discard all subsequent items.
if (array[0].type.startsWith('video/') || 'image/gif' === array[0].type) {
return false;
}
// The first item wasn't a video or GIF, so discard all subsequent videos and GIFs.
if (mediaItem.type.startsWith('video/') || 'image/gif' === mediaItem.type) {
return false;
}
return true;
})
// We only want the first four items of the array, at most.
.slice(0, 4);
if (0 === filteredMedia.length) {
return null;
}
const isVideo = filteredMedia[0].type.startsWith('video/');
const mediaClasses = (0, clsx_1.default)([
'threads-preview__media',
'threads-preview__media-children-' + filteredMedia.length,
]);
return ((0, jsx_runtime_1.jsx)("div", { className: mediaClasses, children: filteredMedia.map((mediaItem, index) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isVideo ? (
// eslint-disable-next-line jsx-a11y/media-has-caption
(0, jsx_runtime_1.jsx)("video", { controls: true, children: (0, jsx_runtime_1.jsx)("source", { src: mediaItem.url, type: mediaItem.type }) })) : ((0, jsx_runtime_1.jsx)("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `threads-preview__media-item-${index}`))) }));
};
exports.Media = Media;
//# sourceMappingURL=media.js.map