cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-25 08:30:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(messaging): add basic support for text embeds

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/common/messaging/attachments/Attachment.tsx
View file

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

86
src/components/common/messaging/embed/Embed.tsx
View file

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