feat(asset): support external video sources with Notion-style rendering

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

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 } from '../utils'
+import {
+  deleteUrlParams,
+  getUrlParams,
+  getYoutubeId,
+  setUrlParams
+} from '../utils'
 import { LazyImage } from './lazy-image'
 import { LiteYouTubeEmbed } from './lite-youtube-embed'
 
@@ -135,9 +140,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
@@ -187,6 +190,7 @@ export function Asset({
     block.type === 'drive' ||
     block.type === 'replit'
   ) {
+    const displaySource = block.format?.display_source
     if (
       block.type === 'video' &&
       source &&
@@ -200,19 +204,36 @@ export function Asset({
       !source.includes('tella')
     ) {
       style.paddingBottom = undefined
-
+      const vidoeTitle = block.format?.link_title || 'block.type'
+      if (displaySource) {
+        delete style.height
+        deleteUrlParams(displaySource, ['spaceId'])
+      }
       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 =

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,17 +13,15 @@ export function Audio({
 }) {
   const { recordMap } = useNotionContext()
 
-  let source =
+  const source =
     recordMap.signed_urls[block.id] || block.properties?.source?.[0]?.[0]
 
   if (!source) {
     return null
   }
 
   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 (

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,17 +15,15 @@ export function File({
 }) {
   const { components, recordMap } = useNotionContext()
 
-  let source =
+  const source =
     recordMap.signed_urls[block.id] || block.properties?.source?.[0]?.[0]
 
   if (!source) {
     return null
   }
 
   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 (

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()
+}