notionpresso · Moon-DaeSeung · Sep 29, 2024 · Sep 26, 2024
diff --git 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
@@ -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
@@ -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
@@ -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<VideoProps> = ({ ...props }) => {
+  const {
+    video: { type, file, external, caption },
+  } = props;
+
+  const renderVideoContent = () => {
+    if (type === "file" && file != null) {
+      return <video playsInline controls preload="metadata" src={file.url} />;
+    } else if (type === "external" && external != null) {
+      const youtubeId = getYoutubeId(external.url);
+      if (youtubeId) {
+        return (
+          <iframe
+            style={{ width: "100%", aspectRatio: "560 / 315", border: "none" }}
+            src={`https://www.youtube.com/embed/${youtubeId}`}
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+          />
+        );
+      } else {
+        return <div>unsupported embedded video</div>;
+      }
+    } else {
+      return <div>unsupported video</div>;
+    }
+  };
+
+  return (
+    <div className="notion-block notion-video">
+      <div className="notion-video-content">{renderVideoContent()}</div>
+      {caption.length !== 0 && (
+        <div className="notion-asset-caption">
+          <RichText props={caption} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Video;
diff --git a/packages/react-notion-custom/src/lib/index.css b/packages/react-notion-custom/src/lib/index.css
@@ -625,6 +625,7 @@
   padding-top: 4px;
   padding-bottom: 4px;
   display: flex;
+}
 
 .notion-quote-content {
   display: block;
@@ -633,10 +634,12 @@
   padding-right: 14px;
   border-left: 3px solid currentcolor;
 }
+
 .notion-quote {
   padding: 3px 2px;
   margin: 3px 0px 3px 1px;
   font-size: 1em;
+}
 
 .notion-callout {
   padding: 16px 16px 16px 12px;
@@ -699,3 +702,12 @@
   margin: 6px 0px;
   border-top: 1px solid rgba(223, 223, 222, 1);
 }
+
+.notion-video {
+  margin: 4px 0px;
+}
+
+.notion-video-content {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/packages/story/src/stories/video/video.json b/packages/story/src/stories/video/video.json
@@ -0,0 +1,179 @@
+{
+  "object": "page",
+  "id": "dffa6fc2-7f09-4640-9ab0-a6e26309140b",
+  "created_time": "2023-01-27T13:59:00.000Z",
+  "last_edited_time": "2023-03-17T16:08:00.000Z",
+  "created_by": {
+    "object": "user",
+    "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+  },
+  "last_edited_by": {
+    "object": "user",
+    "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+  },
+  "cover": {},
+  "icon": null,
+  "parent": {
+    "type": "database_id",
+    "database_id": "be65d799-9e98-4426-86a6-72072991e27b"
+  },
+  "archived": false,
+  "properties": {
+    "HashTags": {
+      "id": "Hhkx",
+      "type": "multi_select",
+      "multi_select": []
+    },
+    "생성 일시": {
+      "id": "J%7C%3BZ",
+      "type": "created_time",
+      "created_time": "2023-01-27T13:59:00.000Z"
+    },
+    "Slug": {
+      "id": "S%3A%7B%3E",
+      "type": "rich_text",
+      "rich_rich_text": [
+        {
+          "type": "text",
+          "text": {
+            "content": "asdf",
+            "link": null
+          },
+          "annotations": {
+            "bold": false,
+            "italic": false,
+            "strikethrough": false,
+            "underline": false,
+            "code": false,
+            "color": "default"
+          },
+          "plain_text": "asdf",
+          "href": null
+        }
+      ]
+    },
+    "텍스트": {
+      "id": "q%3CHh",
+      "type": "rich_text",
+      "rich_rich_text": []
+    },
+    "Description": {
+      "id": "qTV%3E",
+      "type": "rich_text",
+      "rich_rich_text": []
+    },
+    "Status": {
+      "id": "vu%7C%3B",
+      "type": "select",
+      "select": {
+        "id": "|QrX",
+        "name": "Publishable",
+        "color": "green"
+      }
+    },
+    "Name": {
+      "id": "title",
+      "type": "title",
+      "title": [
+        {
+          "type": "text",
+          "text": {
+            "content": "Test",
+            "link": null
+          },
+          "annotations": {
+            "bold": false,
+            "italic": false,
+            "strikethrough": false,
+            "underline": false,
+            "code": false,
+            "color": "default"
+          },
+          "plain_text": "Test",
+          "href": null
+        }
+      ]
+    }
+  },
+  "url": "https://www.notion.so/Test-dffa6fc27f0946409ab0a6e26309140b",
+  "blocks": [
+    {
+      "object": "block",
+      "id": "eeacc1d6-d8d8-4d3a-a57f-6d2a30403074",
+      "parent": {
+        "type": "page_id",
+        "page_id": "dffa6fc2-7f09-4640-9ab0-a6e26309140b"
+      },
+      "created_time": "2023-02-17T05:51:00.000Z",
+      "last_edited_time": "2023-03-17T16:06:00.000Z",
+      "created_by": {
+        "object": "user",
+        "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+      },
+      "last_edited_by": {
+        "object": "user",
+        "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+      },
+      "has_children": false,
+      "archived": false,
+      "type": "paragraph",
+      "paragraph": {
+        "color": "gray_background",
+        "rich_text": []
+      }
+    },
+    {
+      "object": "block",
+      "id": "f3eab6d3-fa21-4f62-b586-9fffc93c3fdd",
+      "parent": {
+        "type": "page_id",
+        "page_id": "dffa6fc2-7f09-4640-9ab0-a6e26309140b"
+      },
+      "created_time": "2023-03-17T16:06:00.000Z",
+      "last_edited_time": "2023-03-17T16:08:00.000Z",
+      "created_by": {
+        "object": "user",
+        "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+      },
+      "last_edited_by": {
+        "object": "user",
+        "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+      },
+      "has_children": false,
+      "archived": false,
+      "type": "video",
+      "video": {
+        "caption": [],
+        "type": "external",
+        "external": {
+          "url": "https://www.youtube.com/watch?v=S92KX8-Hmlc"
+        }
+      }
+    },
+    {
+      "object": "block",
+      "id": "31e85e09-1ffd-4754-825b-bf92ae63d5af",
+      "parent": {
+        "type": "page_id",
+        "page_id": "dffa6fc2-7f09-4640-9ab0-a6e26309140b"
+      },
+      "created_time": "2023-02-17T05:51:00.000Z",
+      "last_edited_time": "2023-03-17T16:06:00.000Z",
+      "created_by": {
+        "object": "user",
+        "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+      },
+      "last_edited_by": {
+        "object": "user",
+        "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+      },
+      "has_children": false,
+      "archived": false,
+      "type": "paragraph",
+      "paragraph": {
+        "color": "gray_background",
+        "rich_text": []
+      }
+    }
+  ]
+}
diff --git a/packages/story/src/stories/video/video.stories.tsx b/packages/story/src/stories/video/video.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Component from "../../lib/Notion";
+import json from "./video.json";
+
+const blocks = json.blocks as any;
+
+const meta: Meta<typeof Component> = {
+  title: "Blocks/Video",
+  component: Component,
+};
+
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+export const Video: Story = {
+  args: {
+    title: "Video",
+    blocks: blocks,
+  },
+};