From cd2630a06deccedcfa68f4dc0cb552fedc48fff5 Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Mon, 14 Jul 2025 14:24:01 +0800
Subject: [PATCH 1/7] feat(asset): support external video sources with
 Notion-style rendering

- add display_source handling for video blocks
- implement iframe rendering for external video sources
- add link_title support in block format
- adjust video rendering based on display_source presence
---
 packages/notion-types/src/block.ts            |  2 +
 .../react-notion-x/src/components/asset.tsx   | 37 ++++++++++++++-----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/packages/notion-types/src/block.ts b/packages/notion-types/src/block.ts
index 48140b8c..7edb4fa5 100644
--- a/packages/notion-types/src/block.ts
+++ b/packages/notion-types/src/block.ts
@@ -133,6 +133,7 @@ export interface BaseContentBlock extends BaseBlock {
     caption?: Decoration[]
   }
   format?: {
+    link_title: string
     block_alignment: 'center' | 'left' | 'right'
     block_width: number
     block_height: number
@@ -359,6 +360,7 @@ export interface GoogleDriveBlock extends BaseContentBlock {
       user_name: string
       modified_time: number
     }
+    link_title: string
     block_alignment: 'center' | 'left' | 'right'
     block_width: number
     block_height: number
diff --git a/packages/react-notion-x/src/components/asset.tsx b/packages/react-notion-x/src/components/asset.tsx
index d85c24b2..28bf63f2 100644
--- a/packages/react-notion-x/src/components/asset.tsx
+++ b/packages/react-notion-x/src/components/asset.tsx
@@ -187,6 +187,7 @@ export function Asset({
     block.type === 'drive' ||
     block.type === 'replit'
   ) {
+    const displaySource = block.format?.display_source
     if (
       block.type === 'video' &&
       source &&
@@ -200,19 +201,35 @@ export function Asset({
       !source.includes('tella')
     ) {
       style.paddingBottom = undefined
-
+      const vidoeTitle = block.format?.link_title || 'block.type'
+      if (displaySource && style.height) {
+        delete style.height
+      }
       content = (
-        <video
-          playsInline
-          controls
-          preload='metadata'
-          style={assetStyle}
-          src={source}
-          title={block.type}
-        />
+        <>
+          {displaySource ? (
+            <iframe
+              src={displaySource}
+              title={vidoeTitle}
+              style={{
+                ...assetStyle,
+                aspectRatio: 1 / (block.format?.block_aspect_ratio || 1)
+              }}
+            />
+          ) : (
+            <video
+              playsInline
+              controls
+              preload='metadata'
+              style={assetStyle}
+              src={source}
+              title={vidoeTitle}
+            />
+          )}
+        </>
       )
     } else {
-      let src = block.format?.display_source || source
+      let src = displaySource || source
 
       if (src) {
         const youtubeVideoId: string | null =

From 126028abadbc853d5b0efc1f4a94f40afd142668 Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Mon, 14 Jul 2025 14:43:40 +0800
Subject: [PATCH 2/7] feat: add setUrlParams utility and refactor URL param
 handling

- Introduce new utility functions `setUrlParams` and `deleteUrlParams`
- Replace manual URL parameter handling with utility function calls
- Update affected components (asset, file, audio) to use new utility
---
 .../react-notion-x/src/components/asset.tsx   |  6 ++----
 .../react-notion-x/src/components/audio.tsx   |  8 +++-----
 .../react-notion-x/src/components/file.tsx    |  8 +++-----
 packages/react-notion-x/src/utils.ts          | 19 +++++++++++++++++++
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/react-notion-x/src/components/asset.tsx b/packages/react-notion-x/src/components/asset.tsx
index 28bf63f2..6b39dd37 100644
--- a/packages/react-notion-x/src/components/asset.tsx
+++ b/packages/react-notion-x/src/components/asset.tsx
@@ -3,7 +3,7 @@ import { type BaseContentBlock, type Block } from 'notion-types'
 import { getTextContent } from 'notion-utils'
 
 import { useNotionContext } from '../context'
-import { getUrlParams, getYoutubeId } from '../utils'
+import { getUrlParams, getYoutubeId, setUrlParams } from '../utils'
 import { LazyImage } from './lazy-image'
 import { LiteYouTubeEmbed } from './lite-youtube-embed'
 
@@ -135,9 +135,7 @@ export function Asset({
   }
 
   if (block.space_id) {
-    const url = new URL(source)
-    url.searchParams.set('spaceId', block.space_id)
-    source = url.toString()
+    setUrlParams(source, { spaceId: block.space_id })
   }
 
   let content = null
diff --git a/packages/react-notion-x/src/components/audio.tsx b/packages/react-notion-x/src/components/audio.tsx
index 861d8cc1..6c0526c4 100644
--- a/packages/react-notion-x/src/components/audio.tsx
+++ b/packages/react-notion-x/src/components/audio.tsx
@@ -2,7 +2,7 @@ import type React from 'react'
 import { type AudioBlock } from 'notion-types'
 
 import { useNotionContext } from '../context'
-import { cs } from '../utils'
+import { cs, setUrlParams } from '../utils'
 
 export function Audio({
   block,
@@ -13,7 +13,7 @@ export function Audio({
 }) {
   const { recordMap } = useNotionContext()
 
-  let source =
+  const source =
     recordMap.signed_urls[block.id] || block.properties?.source?.[0]?.[0]
 
   if (!source) {
@@ -21,9 +21,7 @@ export function Audio({
   }
 
   if (block.space_id) {
-    const url = new URL(source)
-    url.searchParams.set('spaceId', block.space_id)
-    source = url.toString()
+    setUrlParams(source, { spaceId: block.space_id })
   }
 
   return (
diff --git a/packages/react-notion-x/src/components/file.tsx b/packages/react-notion-x/src/components/file.tsx
index d01ad412..d86adb1a 100644
--- a/packages/react-notion-x/src/components/file.tsx
+++ b/packages/react-notion-x/src/components/file.tsx
@@ -3,7 +3,7 @@ import { type FileBlock } from 'notion-types'
 
 import { useNotionContext } from '../context'
 import { FileIcon } from '../icons/file-icon'
-import { cs } from '../utils'
+import { cs, setUrlParams } from '../utils'
 import { Text } from './text'
 
 export function File({
@@ -15,7 +15,7 @@ export function File({
 }) {
   const { components, recordMap } = useNotionContext()
 
-  let source =
+  const source =
     recordMap.signed_urls[block.id] || block.properties?.source?.[0]?.[0]
 
   if (!source) {
@@ -23,9 +23,7 @@ export function File({
   }
 
   if (block.space_id) {
-    const url = new URL(source)
-    url.searchParams.set('spaceId', block.space_id)
-    source = url.toString()
+    setUrlParams(source, { spaceId: block.space_id })
   }
 
   return (
diff --git a/packages/react-notion-x/src/utils.ts b/packages/react-notion-x/src/utils.ts
index c4025727..930a4ba3 100644
--- a/packages/react-notion-x/src/utils.ts
+++ b/packages/react-notion-x/src/utils.ts
@@ -131,3 +131,22 @@ export const getUrlParams = (
 
   return
 }
+
+export const setUrlParams = (
+  urlString: string,
+  params: Record<string, string>
+): string => {
+  const url = new URL(urlString)
+  for (const [key, value] of Object.entries(params)) {
+    url.searchParams.set(key, value)
+  }
+  return url.toString()
+}
+
+export const deleteUrlParams = (urlString: string, keys: string[]): string => {
+  const url = new URL(urlString)
+  for (const key of keys) {
+    url.searchParams.delete(key)
+  }
+  return url.toString()
+}

From de97eee7de97d8fca565356367d46cf6569f15f2 Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Mon, 14 Jul 2025 15:45:52 +0800
Subject: [PATCH 3/7] feat(asset): add deleteUrlParams utility for source URL
 cleanup

- import deleteUrlParams utility function
- modify conditional logic for displaySource handling
- clean up URL parameters when displaying source
---
 packages/react-notion-x/src/components/asset.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-notion-x/src/components/asset.tsx b/packages/react-notion-x/src/components/asset.tsx
index 6b39dd37..93407c00 100644
--- a/packages/react-notion-x/src/components/asset.tsx
+++ b/packages/react-notion-x/src/components/asset.tsx
@@ -3,7 +3,12 @@ import { type BaseContentBlock, type Block } from 'notion-types'
 import { getTextContent } from 'notion-utils'
 
 import { useNotionContext } from '../context'
-import { getUrlParams, getYoutubeId, setUrlParams } from '../utils'
+import {
+  deleteUrlParams,
+  getUrlParams,
+  getYoutubeId,
+  setUrlParams
+} from '../utils'
 import { LazyImage } from './lazy-image'
 import { LiteYouTubeEmbed } from './lite-youtube-embed'
 
@@ -200,8 +205,9 @@ export function Asset({
     ) {
       style.paddingBottom = undefined
       const vidoeTitle = block.format?.link_title || 'block.type'
-      if (displaySource && style.height) {
+      if (displaySource) {
         delete style.height
+        deleteUrlParams(displaySource, ['spaceId'])
       }
       content = (
         <>

From 97e6ca71d3404cf32b4e728904ff428f5fa08201 Mon Sep 17 00:00:00 2001
From: qixing-jk <vq3d5d8c@duck.com>
Date: Mon, 14 Jul 2025 16:04:59 +0800
Subject: [PATCH 4/7] Update packages/react-notion-x/src/components/asset.tsx

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
---
 packages/react-notion-x/src/components/asset.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-notion-x/src/components/asset.tsx b/packages/react-notion-x/src/components/asset.tsx
index 93407c00..8af7ce87 100644
--- a/packages/react-notion-x/src/components/asset.tsx
+++ b/packages/react-notion-x/src/components/asset.tsx
@@ -204,7 +204,7 @@ export function Asset({
       !source.includes('tella')
     ) {
       style.paddingBottom = undefined
-      const vidoeTitle = block.format?.link_title || 'block.type'
+      const videoTitle = block.format?.link_title || 'block.type'
       if (displaySource) {
         delete style.height
         deleteUrlParams(displaySource, ['spaceId'])

From 0798d1e1d255897cc58372418509c8c810c7fdda Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Mon, 14 Jul 2025 16:09:51 +0800
Subject: [PATCH 5/7] feat(asset): modify displaySource handling for video
 embeds

- change const to let for displaySource variable
- update displaySource assignment instead of deletion
---
 packages/react-notion-x/src/components/asset.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-notion-x/src/components/asset.tsx b/packages/react-notion-x/src/components/asset.tsx
index 8af7ce87..6711f3ff 100644
--- a/packages/react-notion-x/src/components/asset.tsx
+++ b/packages/react-notion-x/src/components/asset.tsx
@@ -190,7 +190,7 @@ export function Asset({
     block.type === 'drive' ||
     block.type === 'replit'
   ) {
-    const displaySource = block.format?.display_source
+    let displaySource = block.format?.display_source
     if (
       block.type === 'video' &&
       source &&
@@ -207,7 +207,7 @@ export function Asset({
       const videoTitle = block.format?.link_title || 'block.type'
       if (displaySource) {
         delete style.height
-        deleteUrlParams(displaySource, ['spaceId'])
+        displaySource = deleteUrlParams(displaySource, ['spaceId'])
       }
       content = (
         <>

From 42b6c3426264f94ac627cecdd62faaf9b91256b4 Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Mon, 14 Jul 2025 16:10:34 +0800
Subject: [PATCH 6/7] fix: correct typo in video title prop

- Fix typo in `asset.tsx` where `vidoeTitle` was incorrectly spelled
---
 packages/react-notion-x/src/components/asset.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-notion-x/src/components/asset.tsx b/packages/react-notion-x/src/components/asset.tsx
index 6711f3ff..e041c10b 100644
--- a/packages/react-notion-x/src/components/asset.tsx
+++ b/packages/react-notion-x/src/components/asset.tsx
@@ -214,7 +214,7 @@ export function Asset({
           {displaySource ? (
             <iframe
               src={displaySource}
-              title={vidoeTitle}
+              title={videoTitle}
               style={{
                 ...assetStyle,
                 aspectRatio: 1 / (block.format?.block_aspect_ratio || 1)
@@ -227,7 +227,7 @@ export function Asset({
               preload='metadata'
               style={assetStyle}
               src={source}
-              title={vidoeTitle}
+              title={videoTitle}
             />
           )}
         </>

From 56f5aeb0e871e40bc2cfc1d9e809b294fcdc9e8c Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Mon, 14 Jul 2025 16:13:20 +0800
Subject: [PATCH 7/7] fix: assign setUrlParams result to source variable

The setUrlParams function was not assigning its result to the source variable
in asset, file, and audio components. This change ensures the modified URL with
spaceId parameter is properly stored and used in subsequent operations.
---
 packages/react-notion-x/src/components/asset.tsx | 2 +-
 packages/react-notion-x/src/components/audio.tsx | 4 ++--
 packages/react-notion-x/src/components/file.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-notion-x/src/components/asset.tsx b/packages/react-notion-x/src/components/asset.tsx
index e041c10b..70210450 100644
--- a/packages/react-notion-x/src/components/asset.tsx
+++ b/packages/react-notion-x/src/components/asset.tsx
@@ -140,7 +140,7 @@ export function Asset({
   }
 
   if (block.space_id) {
-    setUrlParams(source, { spaceId: block.space_id })
+    source = setUrlParams(source, { spaceId: block.space_id })
   }
 
   let content = null
diff --git a/packages/react-notion-x/src/components/audio.tsx b/packages/react-notion-x/src/components/audio.tsx
index 6c0526c4..35f78b99 100644
--- a/packages/react-notion-x/src/components/audio.tsx
+++ b/packages/react-notion-x/src/components/audio.tsx
@@ -13,7 +13,7 @@ export function Audio({
 }) {
   const { recordMap } = useNotionContext()
 
-  const source =
+  let source =
     recordMap.signed_urls[block.id] || block.properties?.source?.[0]?.[0]
 
   if (!source) {
@@ -21,7 +21,7 @@ export function Audio({
   }
 
   if (block.space_id) {
-    setUrlParams(source, { spaceId: block.space_id })
+    source = setUrlParams(source, { spaceId: block.space_id })
   }
 
   return (
diff --git a/packages/react-notion-x/src/components/file.tsx b/packages/react-notion-x/src/components/file.tsx
index d86adb1a..1db8ae24 100644
--- a/packages/react-notion-x/src/components/file.tsx
+++ b/packages/react-notion-x/src/components/file.tsx
@@ -15,7 +15,7 @@ export function File({
 }) {
   const { components, recordMap } = useNotionContext()
 
-  const source =
+  let source =
     recordMap.signed_urls[block.id] || block.properties?.source?.[0]?.[0]
 
   if (!source) {
@@ -23,7 +23,7 @@ export function File({
   }
 
   if (block.space_id) {
-    setUrlParams(source, { spaceId: block.space_id })
+    source = setUrlParams(source, { spaceId: block.space_id })
   }
 
   return (