@cascadiajs/discord-mirror
Version:
A web component for displaying current activity within a Discord Channel
19 lines (18 loc) • 1.32 kB
JavaScript
import { h } from '@stencil/core';
import { parseCode } from '../../utils/utils';
export const MessageContent = ({ message }) => {
if (message.gif) {
return (h("div", { class: "message-gif message-body", style: { marginTop: '3px', marginBottom: '3px' }, part: "message-body" },
h("picture", null,
h("source", { srcSet: message.gif.gifUrl, media: "(prefers-reduced-motion: no-preference)", style: { width: '300px', height: 'auto' } }),
h("img", { srcSet: message.gif.preview, alt: message.gif.alt, style: { width: '300px', height: 'auto' }, part: "image message-gif" })),
message.gif.gifUrl.match('tenor') && (h("p", { style: { fontSize: '10px', margin: '0', marginTop: '-20px', paddingLeft: '5px', mixBlendMode: 'difference', color: 'white' }, "aria-hidden": "true" }, "Via Tenor"))));
}
else if (message.text.match(/\.(jpg|png|webp|svg)$/)) {
return (h("div", { class: "message-image message-body", part: "message-body", style: { marginTop: '3px', marginBottom: '3px' } },
h("img", { src: message.text, alt: "User did not provide alt text", style: { width: '300px', height: 'auto' }, part: "image message-image" })));
}
else {
return h("div", { class: "message-text message-body", part: "message-text message-body", innerHTML: parseCode(message.text) });
}
};