YouTube Lite #303

oliverlloyd · 2021-11-22T12:50:02Z

What does this change?

This PR affects the way we load the you tube code to play videos. Instead of eager loading the iframe we now wait until the reader has either clicked or hovered over the poster image.

In addition, we also wait for consentState to exist.

Why?

This reduces the amount of content and javascript we need to download on page render by at least 200Kb, deferring that work until needed.

Why do we wait for consent?

We need consent to decide the ad targeting value that we pass to YouTube. By deferring the load of the iframe we can ensure that we only make this call when we have all the required information.

`Placeholder`?

There's an edge case where if a video does not have a poster image (rare) and we have not received the consentState back from CMP then we need to decide what to show. We could do one of two things:

We could render the video anyway but default consent state to disabled.
We can render a placeholder

This PR has implemented point 2 but this is open to discussion

Showing YouTube loading on mouse over

Screen.Recording.2021-11-22.at.12.26.59.mov

Simulating consent being set late

Screen.Recording.2021-11-22.at.12.47.37.mov

github-actions · 2021-11-22T12:52:12Z

Size Change: +1.61 kB (+3%)

Total Size: 51.3 kB

Filename	Size	Change
`dist/commonjs/InteractiveAtom.js`	494 B	+64 B (+15%)	⚠️
`dist/commonjs/YoutubeAtom.js`	3.44 kB	+741 B (+27%)	🚨
`dist/esm/InteractiveAtom.js`	433 B	+65 B (+18%)	⚠️
`dist/esm/YoutubeAtom.js`	3.29 kB	+737 B (+29%)	🚨

ℹ️ View Unchanged

Filename	Size
`dist/commonjs/Answers.js`	1.26 kB
`dist/commonjs/AudioAtom.js`	2.74 kB
`dist/commonjs/ChartAtom.js`	400 B
`dist/commonjs/common/MaintainAspectRatio.js`	422 B
`dist/commonjs/common/Placeholder.js`	588 B
`dist/commonjs/expandableAtom/Body.js`	979 B
`dist/commonjs/expandableAtom/Container.js`	769 B
`dist/commonjs/expandableAtom/Footer.js`	1.17 kB
`dist/commonjs/expandableAtom/Summary.js`	1 kB
`dist/commonjs/ExplainerAtom.js`	664 B
`dist/commonjs/GuideAtom.js`	436 B
`dist/commonjs/index.js`	504 B
`dist/commonjs/InteractiveLayoutAtom.js`	443 B
`dist/commonjs/KnowledgeQuiz.js`	2.42 kB
`dist/commonjs/lib/formatTime.js`	384 B
`dist/commonjs/lib/pillarPalette.js`	273 B
`dist/commonjs/lib/unifyPageContent.js`	694 B
`dist/commonjs/PersonalityQuiz.js`	2.6 kB
`dist/commonjs/Picture.js`	1.65 kB
`dist/commonjs/ProfileAtom.js`	431 B
`dist/commonjs/QandaAtom.js`	415 B
`dist/commonjs/SharingIcons.js`	881 B
`dist/commonjs/TimelineAtom.js`	1.05 kB
`dist/commonjs/types.js`	97 B
`dist/commonjs/VideoAtom.js`	522 B
`dist/esm/Answers.js`	1.14 kB
`dist/esm/AudioAtom.js`	2.68 kB
`dist/esm/ChartAtom.js`	330 B
`dist/esm/common/MaintainAspectRatio.js`	361 B
`dist/esm/common/Placeholder.js`	524 B
`dist/esm/expandableAtom/Body.js`	907 B
`dist/esm/expandableAtom/Container.js`	706 B
`dist/esm/expandableAtom/Footer.js`	1.1 kB
`dist/esm/expandableAtom/Summary.js`	944 B
`dist/esm/ExplainerAtom.js`	606 B
`dist/esm/GuideAtom.js`	373 B
`dist/esm/index.js`	244 B
`dist/esm/InteractiveLayoutAtom.js`	387 B
`dist/esm/KnowledgeQuiz.js`	2.33 kB
`dist/esm/lib/formatTime.js`	317 B
`dist/esm/lib/pillarPalette.js`	224 B
`dist/esm/lib/unifyPageContent.js`	635 B
`dist/esm/PersonalityQuiz.js`	2.48 kB
`dist/esm/Picture.js`	1.58 kB
`dist/esm/ProfileAtom.js`	369 B
`dist/esm/QandaAtom.js`	354 B
`dist/esm/SharingIcons.js`	814 B
`dist/esm/TimelineAtom.js`	980 B
`dist/esm/types.js`	31 B
`dist/esm/VideoAtom.js`	467 B

_{compressed-size-action}

arelra · 2021-11-22T13:24:53Z

Nice!

We could render the video anyway but default consent state to disabled.

We can render a placeholder

I prefer 2) mainly in order to:
a) keep the main thread unblocked
b) wait for actual consent

Which just leaves a UX question of if a generic placeholder is acceptable.

Also a minor point is when I've done my own experiments loading in the player on a user click, it can cause a bit of jank when it loads in. I don't know if this is noticeable enough to be concerned about though.

oliverlloyd · 2021-11-22T13:50:40Z

Also a minor point is when I've done my own experiments loading in the player on a user click, it can cause a bit of jank when it loads in. I don't know if this is noticeable enough to be concerned about though.

You can test this by running yarn storybook in this repo but hopefully there's none. The risk is though that the height and width passed down do not correspond to the content (or they don't exist and default to the wrong values). I think this will be okay because we already have poster images that are correctly sized

mxdvl

This is a really interesting approach. I’ve got a couple of questions:

I wonder what happens on touch devices where there’s no such concept of hover.
Don’t we want to autoplay videos sometimes? Maybe this will be addressed with a subsequent PR.

Otherwise a couple of minor points below 👇

mxdvl · 2021-11-22T15:16:56Z

src/YoutubeAtom.stories.tsx

+                                    width: 500,
+                                    src:
+                                        'https://i.guim.co.uk/img/media/4b3808707ec341629932a9d443ff5a812cf4df14/0_309_1800_1081/master/1800.jpg?width=1200&height=630&quality=85&auto=format&fit=crop&overlay-align=bottom%2Cleft&overlay-width=100p&overlay-base64=L2ltZy9zdGF0aWMvb3ZlcmxheXMvdGctZGVmYXVsdC5wbmc&enable=upscale&s=aff4b8255693eb449f13070df88e9cac',
+                                },
+                            ],
+                        },
+                    ]}
+                    height={450}
+                    width={800}


450×800 isn’t the same ratio as 630×1200… 🤔

Maybe this is why you’ve experienced jank, @arelra?

src/YoutubeAtom.tsx

oliverlloyd · 2021-11-22T15:35:23Z

I wonder what happens on touch devices where there’s no such concept of hover.

In this case it will be the click (or touch) event that triggers the content download. We could also consider using an observer to do the same thing when a video scrolls into view?

Most of our traffic is mobile so we should be favouring this use case.

Don’t we want to autoplay videos sometimes? Maybe this will be addressed with a subsequent PR.

We autoplay for video articles. These are not currently supported by DCR but if we wanted to do this here I think that's a simple prop. Obviously, if we do this then we lose all of these benefits.

Co-authored-by: Max Duval <[email protected]>

…/atoms-rendering into oliver/you-tube-consent

Co-authored-by: Max Duval <[email protected]>

oliverlloyd · 2021-11-22T16:47:56Z

Refactor YouTubeAtom

oliverlloyd · 2021-11-23T08:19:47Z

Based on @mxdvl 's comments I think a nice second round PR for this work would be an enhancement where we have two modes for how we decide when to load the iframe. One for mobile where we use scroll position, and the other for desktop where we use mouse position.

To get us there, I would like to look at raising up some of the helper utilities that are currently in this PR. A suite of functions like whenIdle, whenVisible, whenHovered, could potentially be useful in lots of contexts.

package.json

oliverlloyd · 2021-11-23T14:44:48Z

Are we happy that this PR is okay to go through as it stands? @arelra @mxdvl @SiAdcock ?

Considerations

As a future task we need to look at enhancing the onHover defer on mobile devices using onVisible (consider main media - use onIdle there?)
We don't need the CMP work for this change to go into DCR but CMP does need this PR
We're happy with a placeholder in the event there is 1) no poster image and 2) consent is still pending based on the fact we virtually always have a poster - @rcrphillips

src/common/Placeholder.tsx

src/YoutubeAtom.tsx

…ns should be the consumers problem

oliverlloyd · 2021-11-25T15:21:38Z

I've tested this code in isolation (via Storybook) and when loaded into DCR and I'm seeing the expected behaviour in each case.

Next steps:

This PR is an improvement to the page load experience in all cases but could be seen to add a delay to when videos are played on mobile. I want to add a check for device and, when mobile, use onIdle and/or onVisible to trigger the download.
Once point 1 is complete we're in a position to create a new build and bring into DCR for more testing on code

OllysCoding

+1 From me!

oliverlloyd · 2021-12-01T14:01:26Z

Lite YouTube

oliverlloyd added 3 commits November 22, 2021 10:19

feat: Added Placeholder component

f9a7687

feat: Only load youtube when needed and only if consentState provided

63f5a1b

feat: Also show placeholder when waiting on consent after a click

f0fe854

oliverlloyd requested review from arelra, mxdvl and a team November 22, 2021 12:50

oliverlloyd mentioned this pull request Nov 22, 2021

bootCmp guardian/dotcom-rendering#3661

Merged

mxdvl reviewed Nov 22, 2021

View reviewed changes

oliverlloyd and others added 5 commits November 22, 2021 15:37

Update src/YoutubeAtom.tsx

11e7efa

Co-authored-by: Max Duval <[email protected]>

chore: Use JSDoc for these comments

009b859

Merge branch 'oliver/you-tube-consent' of https://github.com/guardian…

bfe878c

…/atoms-rendering into oliver/you-tube-consent

Update src/YoutubeAtom.tsx

8d0b217

Co-authored-by: Max Duval <[email protected]>

fix: I ran prettier

1825fa4

oliverlloyd mentioned this pull request Nov 23, 2021

feat: Added whenIdle guardian/libs#296

Closed

SiAdcock reviewed Nov 23, 2021

View reviewed changes

package.json Outdated Show resolved Hide resolved

fix: Remove redundant import

1cfa384

mxdvl approved these changes Nov 23, 2021

View reviewed changes

mxdvl reviewed Nov 23, 2021

View reviewed changes

src/common/Placeholder.tsx Outdated Show resolved Hide resolved

arelra reviewed Nov 23, 2021

View reviewed changes

src/YoutubeAtom.tsx Show resolved Hide resolved

oliverlloyd added 4 commits November 24, 2021 10:51

fix: Remove these two props because they're never used and edge margi…

eea28a3

…ns should be the consumers problem

feat: Return early if iframe source already set

3fc47a7

refactor: Better explain how and why we're setting the iframe source

d8a977a

Revert: feat: Return early if iframe source already set

b54e4a9

OllysCoding approved these changes Nov 25, 2021

View reviewed changes

oliverlloyd merged commit 7a86715 into main Nov 25, 2021

oliverlloyd deleted the oliver/you-tube-consent branch November 25, 2021 16:30

oliverlloyd mentioned this pull request Dec 1, 2021

feat: More advanced YouTube pre-load decisions based on device #309

Merged

oliverlloyd mentioned this pull request Dec 6, 2021

YouTube Lite using @guardian/[email protected] guardian/dotcom-rendering#3721

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

YouTube Lite #303

YouTube Lite #303

oliverlloyd commented Nov 22, 2021

github-actions bot commented Nov 22, 2021 •

edited

Loading

arelra commented Nov 22, 2021

oliverlloyd commented Nov 22, 2021

mxdvl left a comment

mxdvl Nov 22, 2021 •

edited

Loading

oliverlloyd commented Nov 22, 2021 •

edited

Loading

oliverlloyd commented Nov 22, 2021

oliverlloyd commented Nov 23, 2021

oliverlloyd commented Nov 23, 2021 •

edited

Loading

oliverlloyd commented Nov 25, 2021

OllysCoding left a comment

oliverlloyd commented Dec 1, 2021

YouTube Lite #303

YouTube Lite #303

Conversation

oliverlloyd commented Nov 22, 2021

What does this change?

Why?

Why do we wait for consent?

Placeholder?

Showing YouTube loading on mouse over

Simulating consent being set late

github-actions bot commented Nov 22, 2021 • edited Loading

arelra commented Nov 22, 2021

oliverlloyd commented Nov 22, 2021

mxdvl left a comment

Choose a reason for hiding this comment

mxdvl Nov 22, 2021 • edited Loading

Choose a reason for hiding this comment

oliverlloyd commented Nov 22, 2021 • edited Loading

oliverlloyd commented Nov 22, 2021

oliverlloyd commented Nov 23, 2021

oliverlloyd commented Nov 23, 2021 • edited Loading

Considerations

oliverlloyd commented Nov 25, 2021

OllysCoding left a comment

Choose a reason for hiding this comment

oliverlloyd commented Dec 1, 2021

`Placeholder`?

github-actions bot commented Nov 22, 2021 •

edited

Loading

mxdvl Nov 22, 2021 •

edited

Loading

oliverlloyd commented Nov 22, 2021 •

edited

Loading

oliverlloyd commented Nov 23, 2021 •

edited

Loading