feat: support hd youtube placeholders

packages/react-notion-x/src/components/lite-youtube-embed.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useNotionContext } from '../context'
 import { cs } from '../utils'
 
 const qs = (params: Record<string, string>) => {
@@ -32,15 +33,19 @@ export const LiteYouTubeEmbed: React.FC<{
   style,
   className
 }) => {
+  const { windowWidth, hasOnlyHDVideos } = useNotionContext()
+
   const muteParam = mute || defaultPlay ? '1' : '0' // Default play must be muted
   const queryString = React.useMemo(
     () => qs({ autoplay: '1', mute: muteParam, ...params }),
     [muteParam, params]
   )
-  // const mobileResolution = 'hqdefault'
-  // const desktopResolution = 'maxresdefault'
-  const resolution = 'hqdefault'
-  const posterUrl = `https://i.ytimg.com/vi/${id}/${resolution}.jpg`
+
+  const posterUrl = React.useMemo(() => {
+    return `https://img.youtube.com/vi/${id}/${
+      !hasOnlyHDVideos || windowWidth < 480 ? 'hqdefault' : 'maxresdefault'
+    }.jpg`
+  }, [hasOnlyHDVideos, id, windowWidth]) // Switch to maxresdefault in any device that isn't mobile
   const ytUrl = 'https://www.youtube-nocookie.com'
   const iframeSrc = `${ytUrl}/embed/${id}?${queryString}`
 

packages/react-notion-x/src/context.tsx

@@ -12,6 +12,7 @@ import {
 } from './types'
 import { defaultMapPageUrl, defaultMapImageUrl } from './utils'
 import { Checkbox as DefaultCheckbox } from './components/checkbox'
+import { useWindowSize } from 'react-use'
 
 export interface NotionContext {
   recordMap: ExtendedRecordMap
@@ -38,6 +39,8 @@ export interface NotionContext {
   defaultPageCoverPosition?: number
 
   zoom: any
+  windowWidth?: number
+  hasOnlyHDVideos?: boolean
 }
 
 export interface PartialNotionContext {
@@ -66,6 +69,8 @@ export interface PartialNotionContext {
   defaultPageCoverPosition?: number
 
   zoom?: any
+  windowWidth?: number
+  hasOnlyHDVideos?: boolean
 }
 
 const DefaultLink: React.FC = (props) => (
@@ -163,7 +168,9 @@ const defaultNotionContext: NotionContext = {
   defaultPageCover: null,
   defaultPageCoverPosition: 0.5,
 
-  zoom: null
+  zoom: null,
+  windowWidth: 1920,
+  hasOnlyHDVideos: false
 }
 
 const ctx = React.createContext<NotionContext>(defaultNotionContext)
@@ -176,6 +183,8 @@ export const NotionContextProvider: React.FC<PartialNotionContext> = ({
   rootPageId,
   ...rest
 }) => {
+  const { width } = useWindowSize()
+
   for (const key of Object.keys(rest)) {
     if (rest[key] === undefined) {
       delete rest[key]
@@ -212,9 +221,10 @@ export const NotionContextProvider: React.FC<PartialNotionContext> = ({
       rootPageId,
       mapPageUrl: mapPageUrl ?? defaultMapPageUrl(rootPageId),
       mapImageUrl: mapImageUrl ?? defaultMapImageUrl,
-      components: { ...defaultComponents, ...wrappedThemeComponents }
+      components: { ...defaultComponents, ...wrappedThemeComponents },
+      windowWidth: width
     }),
-    [mapImageUrl, mapPageUrl, wrappedThemeComponents, rootPageId, rest]
+    [mapImageUrl, mapPageUrl, wrappedThemeComponents, rootPageId, width, rest]
   )
 
   return <ctx.Provider value={value}>{children}</ctx.Provider>

packages/react-notion-x/src/renderer.tsx

@@ -53,6 +53,8 @@ export const NotionRenderer: React.FC<{
   blockId?: string
   hideBlockId?: boolean
   disableHeader?: boolean
+
+  hasOnlyHDVideos?: boolean // Enables the use of better looking placeholder images (youtube)
 }> = ({
   components,
   recordMap,
@@ -72,6 +74,7 @@ export const NotionRenderer: React.FC<{
   defaultPageIcon,
   defaultPageCover,
   defaultPageCoverPosition,
+  hasOnlyHDVideos,
   ...rest
 }) => {
   const zoom = React.useMemo(
@@ -106,6 +109,7 @@ export const NotionRenderer: React.FC<{
       defaultPageCover={defaultPageCover}
       defaultPageCoverPosition={defaultPageCoverPosition}
       zoom={zoom}
+      hasOnlyHDVideos={hasOnlyHDVideos}
     >
       <NotionBlockRenderer {...rest} />
     </NotionContextProvider>