feat: add Video components

src/components/OdyseeVideo.tsx

@@ -0,0 +1,24 @@
+import cx from 'classnames';
+
+import type { FunctionalComponent } from 'preact';
+
+interface Props {
+	class?: string;
+	id: string;
+}
+
+export const OdyseeVideo: FunctionalComponent<Props> = ({ class: className, id, ...props }) => {
+	const classes = cx('relative aspect-video mbe-10', className);
+
+	return (
+		<div class={classes} {...props}>
+			<iframe
+				allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+				allowFullScreen
+				class="absolute h-full w-full"
+				frameBorder="0"
+				src={`https://odysee.com/$/embed/${id}`}
+			></iframe>
+		</div>
+	);
+};

src/components/YouTubeVideo.tsx

@@ -0,0 +1,24 @@
+import cx from 'classnames';
+
+import type { FunctionalComponent } from 'preact';
+
+interface Props {
+	class?: string;
+	id: string;
+}
+
+export const YouTubeVideo: FunctionalComponent<Props> = ({ class: className, id, ...props }) => {
+	const classes = cx('relative aspect-video mbe-10', className);
+
+	return (
+		<div class={classes} {...props}>
+			<iframe
+				allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+				allowFullScreen
+				class="absolute h-full w-full"
+				frameBorder="0"
+				src={`https://www.youtube.com/embed/${id}`}
+			></iframe>
+		</div>
+	);
+};

src/components/index.ts

@@ -11,6 +11,7 @@ export * from './LegalDate';
 export * from './Link';
 export * from './ListItem';
 export * from './NetflixFlag';
+export * from './OdyseeVideo';
 export * from './OrderedList';
 export * from './PrimeVideoFlag';
 export * from './Subheadline';
@@ -20,3 +21,4 @@ export * from './TextLink';
 export * from './Title';
 export * from './UnorderedList';
 export * from './Verse';
+export * from './YouTubeVideo';

src/mdx-components.ts

@@ -1,6 +1,7 @@
 import {
 	AffiliateLink,
 	AmazonBook,
+	Banner,
 	Book,
 	ColorSwatch,
 	Divider,
@@ -9,6 +10,7 @@ import {
 	Image,
 	ListItem,
 	NetflixFlag,
+	OdyseeVideo,
 	OrderedList,
 	PrimeVideoFlag,
 	Subheadline,
@@ -18,6 +20,7 @@ import {
 	Title,
 	UnorderedList,
 	Verse,
+	YouTubeVideo,
 } from './components';
 
 export const mapping = {
@@ -39,8 +42,10 @@ export const mapping = {
 	li: ListItem,
 	ol: OrderedList,
 	NetflixFlag,
+	OdyseeVideo,
 	p: Text,
 	ul: UnorderedList,
 	PrimeVideoFlag,
 	Verse,
+	YouTubeVideo,
 };