49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { graphql } from "@/gql";
|
|
import { type EmbedBlockFragment } from "@/gql/graphql";
|
|
import styles from "./embedBlock.module.scss";
|
|
|
|
const EmbedBlockFragmentDefinition = graphql(`
|
|
fragment EmbedBlock on EmbedBlock {
|
|
url
|
|
embed
|
|
rawEmbed
|
|
}
|
|
`);
|
|
|
|
export const EmbedBlock = ({ block }: { block: EmbedBlockFragment }) => {
|
|
if (!block.embed) {
|
|
return <></>;
|
|
}
|
|
|
|
/* YouTube rawEmbed example
|
|
{
|
|
title: "EEEAAAOOO",
|
|
type: "video",
|
|
thumbnail_url: "https://i.ytimg.com/vi/v1K4EAXe2oo/hqdefault.jpg",
|
|
width: 200,
|
|
height: 113,
|
|
html: '<iframe width="200" height="113" src="https://www.youtube.com/embed/v1K4EAXe2oo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="EEEAAAOOO"></iframe>',
|
|
};
|
|
*/
|
|
let embedData: any = {};
|
|
try {
|
|
embedData = block.rawEmbed ? JSON.parse(block.rawEmbed) : {};
|
|
} catch (e) {
|
|
embedData = {};
|
|
}
|
|
const { width, height } = embedData;
|
|
const aspectRatio = width && height ? width / height : null;
|
|
return (
|
|
<div
|
|
className={styles.embed}
|
|
dangerouslySetInnerHTML={{ __html: block.embed }}
|
|
data-type={embedData?.type ?? ""}
|
|
style={
|
|
aspectRatio
|
|
? ({ "--aspect-ratio": aspectRatio } as React.CSSProperties)
|
|
: {}
|
|
}
|
|
></div>
|
|
);
|
|
};
|