135 lines
4.7 KiB
TypeScript
135 lines
4.7 KiB
TypeScript
/* eslint-disable react-hooks/rules-of-hooks */
|
|
import { API } from "revolt.js";
|
|
|
|
import styles from "./Embed.module.scss";
|
|
|
|
import { useClient } from "../../../../controllers/client/ClientController";
|
|
import { modalController } from "../../../../controllers/modals/ModalController";
|
|
|
|
interface Props {
|
|
embed: API.Embed;
|
|
width?: number;
|
|
height: number;
|
|
}
|
|
|
|
export default function EmbedMedia({ embed, width, height }: Props) {
|
|
if (embed.type !== "Website") return null;
|
|
const client = useClient();
|
|
|
|
switch (embed.special?.type) {
|
|
case "YouTube": {
|
|
let timestamp = "";
|
|
|
|
if (embed.special.timestamp) {
|
|
timestamp = `&start=${embed.special.timestamp}`;
|
|
}
|
|
|
|
return (
|
|
<iframe
|
|
loading="lazy"
|
|
src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1${timestamp}`}
|
|
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"
|
|
loading="lazy"
|
|
style={{ height }}
|
|
/>
|
|
);
|
|
case "Lightspeed":
|
|
return (
|
|
<iframe
|
|
src={`https://new.lightspeed.tv/embed/${embed.special.id}/stream`}
|
|
frameBorder="0"
|
|
allowFullScreen
|
|
scrolling="no"
|
|
loading="lazy"
|
|
style={{ height }}
|
|
/>
|
|
);
|
|
case "Spotify":
|
|
return (
|
|
<iframe
|
|
src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
|
|
loading="lazy"
|
|
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"
|
|
loading="lazy"
|
|
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
|
|
loading="lazy"
|
|
style={{ height }}
|
|
/>
|
|
);
|
|
}
|
|
default: {
|
|
if (embed.video) {
|
|
const url = embed.video.url;
|
|
return (
|
|
<video
|
|
loading="lazy"
|
|
className={styles.image}
|
|
style={{ width, height }}
|
|
src={client.proxyFile(url)}
|
|
loop={embed.special?.type === "GIF"}
|
|
controls={embed.special?.type !== "GIF"}
|
|
autoPlay={embed.special?.type === "GIF"}
|
|
muted={embed.special?.type === "GIF" ? true : undefined}
|
|
/>
|
|
);
|
|
} else if (embed.image) {
|
|
const url = embed.image.url;
|
|
return (
|
|
<img
|
|
className={styles.image}
|
|
src={client.proxyFile(url)}
|
|
loading="lazy"
|
|
style={{ width: "100%", height: "100%" }}
|
|
onClick={() =>
|
|
modalController.push({
|
|
type: "image_viewer",
|
|
embed: embed.image!,
|
|
})
|
|
}
|
|
onMouseDown={(ev) =>
|
|
ev.button === 1 && window.open(url, "_blank")
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|