Repository navigation
Refactor YoutubeAtom so it does not rely on an external elementId - #10218
Merged
Merged
Conversation
|
Size Change: +103 B (0%) Total Size: 744 kB ℹ️ View Unchanged
|
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
January 16, 2024 10:49
aede77a to
b8e4bcf
Compare
|
Hello 👋! When you're ready to run Chromatic, please apply the |
arelra
reviewed
Jan 16, 2024
arelra
left a comment
Member
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.
mxdvl
marked this pull request as draft
January 16, 2024 12:53
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
January 16, 2024 14:33
7c45379 to
c0b8974
Compare
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
January 16, 2024 14:59
c0b8974 to
cfbd8a9
Compare
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
3 times, most recently
from
January 16, 2024 16:03
03c6d50 to
13f7942
Compare
YoutubeAtom so it does not rely on an external elementId
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
January 16, 2024 17:08
13f7942 to
7f2142b
Compare
mxdvl
marked this pull request as ready for review
January 16, 2024 17:22
|
Hello 👋! When you're ready to run Chromatic, please apply the |
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
January 16, 2024 17:33
7f2142b to
152e323
Compare
mxdvl
commented
Jan 16, 2024
| // Listen for the ophan call made when the video is played | ||
| const ophanPlayEventPromise2 = interceptOphanPlayEvent({ | ||
| page, | ||
| id: 'gu-video-youtube-1e89d5bd-489e-470a-857e-4f30e85b5aec', |
Contributor
Author
There was a problem hiding this comment.
Did we expect this to be the same id as the first video?
Member
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.
Member
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
Contributor
Author
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
January 17, 2024 10:11
f9b7b48 to
de6d6d3
Compare
mxdvl
force-pushed
the
mxdvl/pure-function/element-id/YoutubeAtom
branch
from
January 17, 2024 10:12
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
January 17, 2024 10:23
82c1dd2 to
e0a4772
Compare
arelra
reviewed
Jan 17, 2024
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]); |
Member
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.
Contributor
Author
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;
}
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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