[Demos] YouTube

Description:

There’s a neat YouTube demo implemented using React which allows you to see the homepage of videos, the watch page and search page.

I would like for us to make it a little smarter by:

📹 [P0] Video watch page: instead of loading the full embed-video component, we: check if you are on a slow network OR a low-memory device OR have low hardware concurrency and serve down a lighter custom element for the player instead (we may need to wrap it a little for use in React). We can use a similar pattern to network aware code-splitting, but add checks for memory and concurrency in the same boolean check within React.lazy().

🔗 [P0] Routing: Fix routing so that the links to https://marvtron.github.io/watch?v=GKXS_YA9s7E (etc) take you to https://marvtron.github.io/youtube-react/watch?v=GKXS_YA9s7E. Accessing https://marvtron.github.io/youtube-react/watch?v=GKXS_YA9s7E directly should load the video watch page.

🙊 [P1] On slow network or low-memory or low hardware-concurrency, don’t load the comments widget and limit (by half) the number of results returned for the recommended videos:

🔧 [P0] I would like us to add the following code to the index so we can quickly show on the watch page which components are important vs not.

<script>
window.debug = () => {
   document.querySelector('.video-container').style.border = '15px solid green';
   document.querySelector('.related-videos').style.border = '15px solid red';
   document.querySelector("#root > div > div.watch-grid > div:nth-child(5)").style.border = '15px solid red';
};
</script>

🎨[P2] Take a quick look at whether render-blocking CSS can be optimized (e.g do we need all of semantic-ui?). I was reading through https://marvtron.github.io/youtube-react/static/css/2.20edb33d.chunk.css and at the very least, I think we don’t need to load in the import for the Lato font. YouTube just uses Roboto if installed and I’m cool with us falling back to Arial without loading a Web Font (font-family: roboto, arial, sans-serif; )

I would say this is probably higher priority than #https://github.com/GoogleChromeLabs/adaptive-loading/issues/63 for this week but could be looked at after #86 (#86, #87, #83, then #63).

cc @anton-karlovskiy

[addyosmani]

Ah, I see. This makes sense. Given we won’t be clicking on links in the sidebar I think this is OK.

On Tue, Nov 5, 2019, 6:17 PM anton-karlovskiy [e-mail] wrote:

@addyosmani https://github.com/addyosmani

Because user changing the data-videoid attribute https://github.com/paulirish/lite-youtube-embed/blob/77b70e2279db13ee39aac3d021073687d53c6811/index.html#L152 is not supported, dynamically setting the attribute is not working yet. For example, just clicking on a video in the list does not properly open a video.

[image: Capture] https://user-images.githubusercontent.com/49653735/68262581-bad51100-0054-11ea-9043-5eb1e3800996.PNG

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GoogleChromeLabs/adaptive-loading/issues/87?email_source=notifications&email_token=AAA3C2JQGTMSCCAOTR2M5W3QSISMFA5CNFSM4JIGOQU2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDFANOQ#issuecomment-550110906, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA3C2OJFN7NIHVYTLNBERTQSISMFANCNFSM4JIGOQUQ .

[addyosmani]

That matches my thinking too. Let’s move ahead using Hooks here… 😃