Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support hd youtube placeholders #326

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

joaocdvr
Copy link

@joaocdvr joaocdvr commented Jul 7, 2022

youtube-placeholder

Description

The youtube video placeholder/thumbnail is too low resolution for it to look good on larger screens, at least for my use case.

My proposal is to add an hasOnlyHDVideos prop to the NotionRenderer component that changes the LiteYoutubeEmbed placeholder image URL coming from YouTube's API (img.youtube.com) resolution from hqdefault to maxresdefault.

Additionally, I added the window width value to the NotionContext via the useWindowSize hook from react-use to be able to switch between hqdefault and maxresdefault depending on the window screen width if hasOnlyHDVideos === true.

The reason why I didn't simply switch the current resolution from hqdefault to maxresdefault is because, if the embedded video is not HD, the placeholder doesn't exist. For example:

Notion Test Page ID

7cac0f415bd4438a95fda8871f02e9ad

@vercel
Copy link

vercel bot commented Jul 7, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
react-notion-x ❌ Failed (Inspect) Jul 7, 2022 at 2:37PM (UTC)
react-notion-x-minimal-demo ✅ Ready (Inspect) Visit Preview Jul 7, 2022 at 2:37PM (UTC)

@joaocdvr
Copy link
Author

Hey @transitive-bullshit, do you mind telling me why did the react-notion-x deployment fail? Thx in advance :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant