revite/src/components/common/messaging/embed/EmbedMedia.tsx

import { Embed } from "revolt.js/dist/api/objects";

import styles from "./Embed.module.scss";

import { useIntermediate } from "../../../../context/intermediate/Intermediate";

interface Props {
	embed: Embed;
	width?: number;
	height: number;
}

export default function EmbedMedia({ embed, width, height }: Props) {
	// ! FIXME: temp code
	// ! add proxy function to client
	function proxyImage(url: string) {
		return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
	}

	if (embed.type !== "Website") return null;
	const { openScreen } = useIntermediate();

	switch (embed.special?.type) {
		case "YouTube":
			return (
				<iframe
					src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
					allowFullScreen
					style={{ height }}
				/>
			);
		case "Twitch":
			return (
				<iframe
					src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${
						embed.special.id
					}&parent=${window.location.hostname}&autoplay=false`}
					frameBorder="0"
					allowFullScreen
					scrolling="no"
					style={{ height }}
				/>
			);
		case "Spotify":
			return (
				<iframe
					src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
					frameBorder="0"
					allowFullScreen
					allowTransparency
					style={{ height }}
				/>
			);
		case "Soundcloud":
			return (
				<iframe
					src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(
						embed.url!,
					)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
					frameBorder="0"
					scrolling="no"
					style={{ height }}
				/>
			);
		case "Bandcamp": {
			return (
				<iframe
					src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${
						embed.special.id
					}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
					seamless
					style={{ height }}
				/>
			);
		}
		default: {
			if (embed.image) {
				let url = embed.image.url;
				return (
					<img
						className={styles.image}
						src={proxyImage(url)}
						style={{ width, height }}
						onClick={() =>
							openScreen({
								id: "image_viewer",
								embed: embed.image,
							})
						}
						onMouseDown={(ev) =>
							ev.button === 1 && window.open(url, "_blank")
						}
					/>
				);
			}
		}
	}

	return null;
}