feat(messaging): add basic support for text embeds

This commit is contained in:
Paul Makles 2022-01-15 14:11:08 +00:00
parent 4526a696c6
commit 56f2411652
2 changed files with 55 additions and 33 deletions

View file

@ -15,7 +15,7 @@ import TextFile from "./TextFile";
interface Props {
attachment: AttachmentI;
hasContent: boolean;
hasContent?: boolean;
}
const MAX_ATTACHMENT_WIDTH = 480;

View file

@ -8,6 +8,8 @@ import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import Markdown from "../../../markdown/Markdown";
import Attachment from "../attachments/Attachment";
import EmbedMedia from "./EmbedMedia";
interface Props {
@ -45,12 +47,20 @@ export default function Embed({ embed }: Props) {
}
switch (embed.type) {
case "Text":
case "Website": {
// Determine special embed size.
let mw, mh;
const largeMedia =
(embed.special && embed.special.type !== "None") ||
embed.type === "Text"
? typeof embed.media !== "undefined"
: (embed.special && embed.special.type !== "None") ||
embed.image?.size === "Large";
if (embed.type === "Text") {
mw = MAX_EMBED_WIDTH;
mh = 0;
} else {
switch (embed.special?.type) {
case "YouTube":
case "Bandcamp": {
@ -76,6 +86,7 @@ export default function Embed({ embed }: Props) {
}
}
}
}
const { width, height } = calculateSize(mw, mh);
return (
@ -87,7 +98,9 @@ export default function Embed({ embed }: Props) {
width: width + CONTAINER_PADDING,
}}>
<div>
{embed.site_name && (
{(embed.type === "Text"
? embed.title
: embed.site_name) && (
<div className={styles.siteinfo}>
{embed.icon_url && (
<img
@ -102,13 +115,15 @@ export default function Embed({ embed }: Props) {
/>
)}
<div className={styles.site}>
{embed.site_name}{" "}
{embed.type === "Text"
? embed.title
: embed.site_name}{" "}
</div>
</div>
)}
{/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/}
{embed.title && (
{embed.type === "Website" && embed.title && (
<span>
<a
onMouseDown={(ev) =>
@ -122,15 +137,22 @@ export default function Embed({ embed }: Props) {
)}
{embed.description && (
<div className={styles.description}>
{embed.description}
{embed.type === "Text" ? (
<Markdown content={embed.description} />
) : (
embed.description
)}
</div>
)}
{largeMedia && (
{largeMedia &&
(embed.type === "Text" ? (
<Attachment attachment={embed.media!} />
) : (
<EmbedMedia embed={embed} height={height} />
)}
))}
</div>
{!largeMedia && (
{!largeMedia && embed.type === "Website" && (
<div>
<EmbedMedia
embed={embed}