Refactor YoutubeAtom so it does not rely on an external elementId
#10218
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +103 B (0%) Total Size: 744 kB ℹ️ View Unchanged
|
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
aede77a to
b8e4bcf
Compare
|
Hello 👋! When you're ready to run Chromatic, please apply the |
arelra
reviewed
Jan 16, 2024
There was a problem hiding this comment.
The YoutubeAtom is partially server rendered so the overlay shows on the SSR. The overlay uses the unique id too so it might mean we temporarily have ids in the DOM that are not-unique.
This might not be an issue in practice if the ids get set before the YouTube player initialises but I know we've had issues in the past with the player not being able to correctly identify the right video to play because of duplicate ids.
It's worth trying the storybook tests manually to check they work as expected, particularly the duplicate video tests.
dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx
Outdated
Show resolved
Hide resolved
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
7c45379 to
c0b8974
Compare
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
c0b8974 to
cfbd8a9
Compare
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
3 times, most recently
from
03c6d50 to
13f7942
Compare
mxdvl
changed the title
YoutubeAtom so it does not rely on an external elementId
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
13f7942 to
7f2142b
Compare
|
Hello 👋! When you're ready to run Chromatic, please apply the |
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
7f2142b to
152e323
Compare
mxdvl
commented
Jan 16, 2024
| @@ -297,7 +298,7 @@ test.describe('YouTube Atom', () => { | |||
| // Listen for the ophan call made when the video is played | |||
| const ophanPlayEventPromise2 = interceptOphanPlayEvent({ | |||
| page, | |||
| id: 'gu-video-youtube-1e89d5bd-489e-470a-857e-4f30e85b5aec', | |||
There was a problem hiding this comment.
Did we expect this to be the same id as the first video?
There was a problem hiding this comment.
I think so. Aiui Ophan doesn't care about duplicate videos it just wants to log each video play.
Actually if this is the elementId it looks like a bug as I would have expected we give Ophan the videoId (assetId prop in YoutubeBlockComponent.importable) and not the unique / elementId which can change across renders.
Worth checking with the Ophan team what their expectations are for these events.
There was a problem hiding this comment.
Actually this is the CAPI element.id and not the unstable element.elementId so it should persist across renders and of course otherwise the test would fail. The question remains as to what Ophan want to be logged i.e. the element.id or the videoId / assetId
There was a problem hiding this comment.
So correctly done in renderElement but not Card. Quite confusing—I'll update.
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
3 times, most recently
from
f9b7b48 to
de6d6d3
Compare
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
de6d6d3 to
82c1dd2
Compare
we can generate a unique elementI from an increasing integer on the client. On the server this defaults to 0 or `undefined` rename the elementId to id for the MainMedia type
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
82c1dd2 to
e0a4772
Compare
arelra
reviewed
Jan 17, 2024
dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
Outdated
Show resolved
Hide resolved
dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
Outdated
Show resolved
Hide resolved
Comment on lines
137
to
151
| const [loadPlayer, setLoadPlayer] = useState<boolean>(false); | ||
| useEffect(() => { | ||
| if (elementId === 'server') { | ||
| // We may never load the player on the server | ||
| return; | ||
| } | ||
|
|
||
| if (!hasOverlay) { | ||
| // load the player if there is no overlay | ||
| setLoadPlayer(true); | ||
| } else if (overlayClicked) { | ||
| // load the player if the overlay has been clicked | ||
| setLoadPlayer(true); | ||
| } | ||
| }, [elementId, hasOverlay, overlayClicked]); |
There was a problem hiding this comment.
I'm wondering if this could be simplified.
Instead of elementId could we pass through index: number | undefined and return in the main render path if isUndefined(index)?
I think that would mean the other state could remain derived and it would remove a useEffect and a re-render.
There was a problem hiding this comment.
Okay, I’ll keep the changes to a minimal and just add one more check:
if (isUndefined(index)) {
loadPlayer = false;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this change?
Generate the
elementIdon the client from an increasing integer.See the following article to test: http://localhost:3030/Article/https://www.theguardian.com/world/live/2022/mar/28/russia-ukraine-war-latest-news-zelenskiy-putin-live-updates
Why?
The
elementIdonly needs to be truly unique on the client-side which. If there are clashes on the server, it’s fine.We cannot use the
useIdhook here as it produces identical IDs for the same video, due to the tree inside the island being identical…elementId#10216Screenshots
N/A – Identical