);
};
diff --git a/src/components/notion/blocks/Embed.tsx b/src/components/notion/blocks/Embed.tsx
index 48a4b6d..dd2bc22 100644
--- a/src/components/notion/blocks/Embed.tsx
+++ b/src/components/notion/blocks/Embed.tsx
@@ -12,19 +12,26 @@ type Props = {
export const Embed = ({ block }: Props) => {
const { url } = block.embed;
+ const caption = block.embed.caption.length > 0 ? block.embed.caption[0].plain_text : '';
- if (url.includes('instagram.com')) return
+
+ {caption && (
+
+ {caption}
+
+ )}
);
};
diff --git a/src/components/notion/blocks/File.tsx b/src/components/notion/blocks/File.tsx
index 82479b7..6a0d7ae 100644
--- a/src/components/notion/blocks/File.tsx
+++ b/src/components/notion/blocks/File.tsx
@@ -33,13 +33,13 @@ export const File = ({ block }: Props) => {
{lastElementInArray.split('?')[0]}
- {caption_file && (
-
- {caption_file}
-
- )}
+ {caption_file && (
+
+ {caption_file}
+
+ )}
);
};
diff --git a/src/components/notion/blocks/Pdf.tsx b/src/components/notion/blocks/Pdf.tsx
index 6af9fd7..b76947c 100644
--- a/src/components/notion/blocks/Pdf.tsx
+++ b/src/components/notion/blocks/Pdf.tsx
@@ -8,12 +8,14 @@ type Props = {
};
export const Pdf = ({ block: { pdf } }: Props) => {
+ const caption = pdf.caption.length > 0 ? pdf.caption[0].plain_text : '';
+
return (
-
+
+ {caption && (
+
+ {caption}
+
+ )}
);
};
diff --git a/src/components/notion/blocks/Video.tsx b/src/components/notion/blocks/Video.tsx
index 2e880e5..74ef315 100644
--- a/src/components/notion/blocks/Video.tsx
+++ b/src/components/notion/blocks/Video.tsx
@@ -1,6 +1,7 @@
import type { VideoBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
import type { BlockWithChildren } from '~/types/notion';
+import { Facebook } from './embed/Facebook';
import { YouTube } from './embed/YouTube';
type Props = {
@@ -8,23 +9,41 @@ type Props = {
};
export const Video = ({ block }: Props) => {
+ const caption = block.video.caption.length > 0 ? block.video.caption[0].plain_text : '';
+
if (block.video.type === 'file') {
return (
-
+
+
+ {caption && (
+
+ {caption}
+
+ )}
+
);
} else if (block.video.type === 'external') {
const { url } = block.video.external;
if (url.includes('youtu.be') || url.includes('youtube.com'))
- return
;
+ return
;
+ if (url.includes('facebook') || url.includes('fb.watch'))
+ return
;
return (
-
+
+
+ {caption && (
+
+ {caption}
+
+ )}
+
);
}
diff --git a/src/components/notion/blocks/embed/Facebook.tsx b/src/components/notion/blocks/embed/Facebook.tsx
index 11d9037..23bfb23 100644
--- a/src/components/notion/blocks/embed/Facebook.tsx
+++ b/src/components/notion/blocks/embed/Facebook.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
import Script from 'next/script';
import { useReducer, useRef } from 'react';
@@ -5,9 +6,10 @@ import { useMutationObserver } from '~/hooks/useMutationObserver';
type Props = {
url: string;
+ caption?: string;
};
-export const Facebook = ({ url }: Props) => {
+export const Facebook = ({ url, caption }: Props) => {
const ref = useRef
(null);
const [isLoading, onLoaded] = useReducer(() => false, true);
useMutationObserver({
@@ -20,19 +22,24 @@ export const Facebook = ({ url }: Props) => {
});
return (
-
- {isLoading &&
}
+
+ {isLoading &&
}
+ {caption && (
+
+ {caption}
+
+ )}
);
};
-const Skeleton = () => {
+const Skeleton = ({ url }: { url: string }) => {
return (
@@ -45,6 +52,17 @@ const Skeleton = () => {
+
+
+
+ View on Facebook
+
+
+
);
};
diff --git a/src/components/notion/blocks/embed/Instagram.tsx b/src/components/notion/blocks/embed/Instagram.tsx
index 01e4f09..47f0751 100644
--- a/src/components/notion/blocks/embed/Instagram.tsx
+++ b/src/components/notion/blocks/embed/Instagram.tsx
@@ -4,11 +4,12 @@ import Script from 'next/script';
type Props = {
url: string;
+ caption?: string;
};
-export const Instagram = ({ url }: Props) => {
+export const Instagram = ({ url, caption }: Props) => {
return (
-
+
{
+ {caption && (
+
+ {caption}
+
+ )}
);
};
diff --git a/src/components/notion/blocks/embed/TikTok.tsx b/src/components/notion/blocks/embed/TikTok.tsx
index 9ebc95c..8b3edcf 100644
--- a/src/components/notion/blocks/embed/TikTok.tsx
+++ b/src/components/notion/blocks/embed/TikTok.tsx
@@ -1,22 +1,70 @@
+import Link from 'next/link';
import Script from 'next/script';
+import { useState, useEffect } from 'react';
type Props = {
url: string;
+ caption?: string;
};
-export const TikTok = ({ url }: Props) => {
+export const TikTok = ({ url, caption }: Props) => {
+ const [isLoaded, setIsLoaded] = useState(false);
const TikTokVideoId = url.match(/\/video\/(\d+)/)?.[1];
+ useEffect(() => {
+ const handleLoad = () => setIsLoaded(true);
+ window.addEventListener('tiktok-load', handleLoad);
+
+ return () => {
+ window.removeEventListener('tiktok-load', handleLoad);
+ };
+ }, []);
+
+ return (
+
+ {!isLoaded &&
}
+ {isLoaded && (
+
+
+
+ )}
+