diff --git a/packages/react-notion-custom/CONTRIBUTING-KR.md b/packages/react-notion-custom/CONTRIBUTING-KR.md index dd779e3..09b21d5 100644 --- a/packages/react-notion-custom/CONTRIBUTING-KR.md +++ b/packages/react-notion-custom/CONTRIBUTING-KR.md @@ -657,7 +657,7 @@ fetchNotionPage(); | Equation | ❌ No | `equation` | | | Code | ❌ No | `code` | | | Image | ❌ No | `image` | | -| Video | ❌ No | `video` | | +| Video | ✅ Yes | `video` | | | Bookmark | ❌ No | `bookmark` | | | Divider | ✅ Yes | `divider` | | | Table | ❌ No | `table` | | diff --git a/packages/react-notion-custom/CONTRIBUTING.md b/packages/react-notion-custom/CONTRIBUTING.md index 4f680dc..d3fdce6 100644 --- a/packages/react-notion-custom/CONTRIBUTING.md +++ b/packages/react-notion-custom/CONTRIBUTING.md @@ -659,7 +659,7 @@ Here's a list of Notion block types currently supported in react-notion-custom. | Equation | ❌ No | `equation` | | | Code | ❌ No | `code` | | | Image | ❌ No | `image` | | -| Video | ❌ No | `video` | | +| Video | ✅ Yes | `video` | | | Bookmark | ❌ No | `bookmark` | | | Divider | ✅ Yes | `divider` | | | Table | ❌ No | `table` | | diff --git a/packages/react-notion-custom/src/lib/components/index.ts b/packages/react-notion-custom/src/lib/components/index.ts index 8508502..0fbfa12 100644 --- a/packages/react-notion-custom/src/lib/components/index.ts +++ b/packages/react-notion-custom/src/lib/components/index.ts @@ -7,8 +7,20 @@ import Quote from "./quote"; import Callout from "./callout"; import BulletedListItem from "./bulleted-list-item"; import Divider from "./divider"; +import Video from "./video"; -export { Headings, Paragraph, Toggle, Equation, Quote, Callout, NumberedListItem, BulletedListItem, Divider }; +export { + Headings, + Paragraph, + Toggle, + Equation, + Quote, + Callout, + NumberedListItem, + BulletedListItem, + Divider, + Video, +}; export default { heading_1: Headings, @@ -22,4 +34,5 @@ export default { quote: Quote, callout: Callout, divider: Divider, + video: Video, }; diff --git a/packages/react-notion-custom/src/lib/components/video.tsx b/packages/react-notion-custom/src/lib/components/video.tsx new file mode 100644 index 0000000..0e94206 --- /dev/null +++ b/packages/react-notion-custom/src/lib/components/video.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import RichText from "./internal/rich-text"; +import { VideoArgs } from "../types"; +import { getYoutubeId } from "../utils"; + +type VideoProps = VideoArgs; +const Video: React.FC = ({ ...props }) => { + const { + video: { type, file, external, caption }, + } = props; + + const renderVideoContent = () => { + if (type === "file" && file != null) { + return