Skip to content

Commit

Permalink
refactor(YoutubeAtom): no reliance on elementId
Browse files Browse the repository at this point in the history 
we can generate a unique elementI from an increasing
integer on the client. On the server this defaults
to 0 or `undefined`
  • Loading branch information
@mxdvl
mxdvl committed Jan 16, 2024
1 parent ab68cd3 commit 152e323
Show file tree
Hide file tree
Showing 8 changed files with 75 additions and 83 deletions.
13 changes: 7 additions & 6 deletions dotcom-rendering/playwright/tests/parallel-5/atom.video.e2e.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const interceptOphanPlayEvent = ({ page, id }: { page: Page; id: string }) => {
.startsWith('http://ophan.theguardian.com/img/2?');
const searchParams = new URLSearchParams(request.url());
const videoSearchParam = searchParams.get('video');
console.log(id, videoSearchParam);
const expectedVideoSearchParam = JSON.stringify({
id,
eventType: 'video:content:play',
Expand Down Expand Up @@ -143,7 +144,7 @@ test.describe('YouTube Atom', () => {
// Listen for the ophan call made when the video is played
const ophanPlayEventPromise = interceptOphanPlayEvent({
page,
id: 'gu-video-youtube-2b33a7b7-e639-4232-9ecd-0fb920fa8147',
id: 'gu-video-youtube-1',
});

// Listen for the YouTube embed call made when the video is played
Expand Down Expand Up @@ -193,7 +194,7 @@ test.describe('YouTube Atom', () => {
// Listen for the ophan call made when the video is played
const ophanPlayEventPromise = interceptOphanPlayEvent({
page,
id: 'gu-video-youtube-2bc6f709-865e-49ae-b01b-8fc38eb4e9a7',
id: 'gu-video-youtube-1',
});

// Listen for the YouTube embed call made when the video is played
Expand Down Expand Up @@ -257,7 +258,7 @@ test.describe('YouTube Atom', () => {
// Listen for the ophan call made when the video is played
const ophanPlayEventPromise = interceptOphanPlayEvent({
page,
id: 'gu-video-youtube-1e89d5bd-489e-470a-857e-4f30e85b5aec',
id: 'gu-video-youtube-1',
});

// Listen for the YouTube embed call made when the video is played
Expand Down Expand Up @@ -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',
id: 'gu-video-youtube-2',
});

// Listen for the YouTube embed call made when the video is played
Expand Down Expand Up @@ -349,7 +350,7 @@ test.describe('YouTube Atom', () => {
// Listen for the ophan call made when the video is played
const ophanPlayEventPromise = interceptOphanPlayEvent({
page,
id: 'gu-video-youtube-2bc6f709-865e-49ae-b01b-8fc38eb4e9a7',
id: 'gu-video-youtube-1',
});

// Listen for the YouTube embed call made when the video is played
Expand Down Expand Up @@ -406,7 +407,7 @@ test.describe('YouTube Atom', () => {
// Listen for the ophan call made when the video is played
const ophanPlayEventPromise = interceptOphanPlayEvent({
page,
id: 'gu-video-youtube-1e89d5bd-489e-470a-857e-4f30e85b5aec',
id: 'gu-video-youtube-1',
});

// Play main media video
Expand Down
4 changes: 0 additions & 4 deletions dotcom-rendering/src/components/Card/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -473,10 +473,6 @@ export const Card = ({
defer={{ until: 'visible' }}
>
<YoutubeBlockComponent
id={media.mainMedia.elementId}
elementId={
media.mainMedia.elementId
}
assetId={
media.mainMedia.videoId
}
Expand Down
56 changes: 28 additions & 28 deletions dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const NoConsent = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -83,7 +83,7 @@ export const NoOverlay = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -118,7 +118,7 @@ export const WithOverrideImage = (): JSX.Element => {
<div style={containerStyle}>
<OverlayAutoplayExplainer />
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="3jpXAMwRSu4"
alt="Microscopic image of COVID"
eventEmitters={[
Expand Down Expand Up @@ -150,7 +150,7 @@ export const WithPosterImage = (): JSX.Element => {
<div style={containerStyle}>
<OverlayAutoplayExplainer />
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="N9Cgy-ke5-s"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -185,7 +185,7 @@ export const WithOverlayAndPosterImage = (): JSX.Element => {
<div style={containerStyle}>
<OverlayAutoplayExplainer />
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="N9Cgy-ke5-s"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -224,7 +224,7 @@ export const GiveConsent = (): JSX.Element => {
<button onClick={() => setConsented(true)}>Give consent</button>
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="3jpXAMwRSu4"
alt="Microscopic image of COVID"
eventEmitters={[
Expand Down Expand Up @@ -258,7 +258,7 @@ export const Sticky = (): JSX.Element => {
<div>Scroll down...</div>
<div style={{ height: '1000px' }}></div>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -292,7 +292,7 @@ export const StickyMainMedia = (): JSX.Element => {
<div>Scroll down...</div>
<div style={{ height: '1000px' }}></div>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -328,7 +328,7 @@ export const DuplicateVideos = (): JSX.Element => {
return (
<div style={containerStyleSmall}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand All @@ -350,7 +350,7 @@ export const DuplicateVideos = (): JSX.Element => {
/>
<br />
<YoutubeAtom
elementId="xyz2"
elementId={345}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -388,7 +388,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
return (
<div style={{ width: '500px', height: '5000px' }}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand All @@ -411,7 +411,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
adTargeting={adTargeting}
/>
<YoutubeAtom
elementId="xyz-2"
elementId={456}
videoId="pcMiS6PW8aQ"
alt=""
eventEmitters={[
Expand All @@ -434,7 +434,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
adTargeting={adTargeting}
/>
<YoutubeAtom
elementId="xyu"
elementId={789}
videoId="3jpXAMwRSu4"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -469,7 +469,7 @@ export const PausesOffscreen = (): JSX.Element => {
<div>
<div>Scroll down...</div>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -506,7 +506,7 @@ export const NoConsentWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -534,7 +534,7 @@ export const AdFreeWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -563,7 +563,7 @@ export const NoOverlayWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -593,7 +593,7 @@ export const WithOverrideImageWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="3jpXAMwRSu4"
alt="Microscopic image of COVID"
eventEmitters={[
Expand Down Expand Up @@ -622,7 +622,7 @@ export const WithPosterImageWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="N9Cgy-ke5-s"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -653,7 +653,7 @@ export const WithOverlayAndPosterImageWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="N9Cgy-ke5-s"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -688,7 +688,7 @@ export const GiveConsentWithIma = (): JSX.Element => {
<button onClick={() => setConsented(true)}>Give consent</button>
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="3jpXAMwRSu4"
alt="Microscopic image of COVID"
eventEmitters={[
Expand Down Expand Up @@ -722,7 +722,7 @@ export const StickyWithIma = (): JSX.Element => {
<div style={{ fontSize: '36px' }}>⬇️</div>
<div style={{ height: '1000px' }}></div>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -755,7 +755,7 @@ export const StickyMainMediaWithIma = (): JSX.Element => {
<div style={{ fontSize: '36px' }}>⬇️</div>
<div style={{ height: '1000px' }}></div>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -786,7 +786,7 @@ export const DuplicateVideosWithIma = (): JSX.Element => {
return (
<div style={containerStyleSmall}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand All @@ -808,7 +808,7 @@ export const DuplicateVideosWithIma = (): JSX.Element => {
/>
<br />
<YoutubeAtom
elementId="xyz2"
elementId={345}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -840,7 +840,7 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
return (
<div style={{ width: '500px', height: '5000px' }}>
<YoutubeAtom
elementId="xyz"
elementId={123}
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand All @@ -863,7 +863,7 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
abTestParticipations={{}}
/>
<YoutubeAtom
elementId="xyz-2"
elementId={456}
videoId="pcMiS6PW8aQ"
alt=""
eventEmitters={[
Expand All @@ -886,7 +886,7 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
abTestParticipations={{}}
/>
<YoutubeAtom
elementId="xyu"
elementId={789}
videoId="3jpXAMwRSu4"
alt=""
eventEmitters={[
Expand Down
Loading

0 comments on commit 152e323

Please sign in to comment.