refactor(YoutubeAtom): no reliance on elementId

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
guardian · Jan 17, 2024 · de6d6d3 · de6d6d3
1 parent 8257432
commit de6d6d3
Show file tree

Hide file tree

Showing 18 changed files with 73 additions and 77 deletions.
diff --git a/dotcom-rendering/fixtures/generated/articles/Dead.ts b/dotcom-rendering/fixtures/generated/articles/Dead.ts
@@ -1974,7 +1974,6 @@ export const Dead: DCRArticle = {
 					],
 					expired: false,
 					duration: 142,
-					elementId: '61b9e0cb-6602-4ccb-bda6-a6d6c3f2eae0',
 				},
 			],
 			attributes: {

diff --git a/dotcom-rendering/fixtures/generated/articles/Feature.ts b/dotcom-rendering/fixtures/generated/articles/Feature.ts
@@ -1455,7 +1455,6 @@ export const Feature: DCRArticle = {
 			duration: 207,
 			altText:
 				"Press Room - 92nd Academy Awards<br>epa08208148 Joaquin Phoenix poses in the press room with the Oscar for Best Actor for his performance in 'Joker' during the 92nd annual Academy Awards ceremony at the Dolby Theatre in Hollywood, California, USA, 09 February 2020. The Oscars are presented for outstanding individual or collective efforts in filmmaking in 24 categories.  EPA/DAVID SWANSON",
-			elementId: 'c7aded24-44a0-42fb-bf42-94d2559c0a25',
 		},
 	],
 	canonicalUrl:

diff --git a/dotcom-rendering/fixtures/generated/articles/Live.ts b/dotcom-rendering/fixtures/generated/articles/Live.ts
@@ -1974,7 +1974,6 @@ export const Live: DCRArticle = {
 					],
 					expired: false,
 					duration: 142,
-					elementId: '93a2d182-3d98-4319-9a8b-602e4adff560',
 				},
 			],
 			attributes: {

diff --git a/dotcom-rendering/fixtures/manual/trails.ts b/dotcom-rendering/fixtures/manual/trails.ts
@@ -94,7 +94,7 @@ export const trails: [
 		showQuotedHeadline: false,
 		mainMedia: {
 			type: 'Video',
-			elementId: 'abcdef',
+			id: 'abcdef',
 			videoId: 'abcd',
 			title: 'some title',
 			duration: 378,
@@ -527,7 +527,7 @@ export const trails: [
 		],
 		mainMedia: {
 			type: 'Video',
-			elementId: 'abcdef',
+			id: 'abcdef',
 			videoId: 'abcd',
 			title: 'some title',
 			duration: 378,

diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx
@@ -52,7 +52,7 @@ const aBasicLink = {
 
 const mainVideo: MainMedia = {
 	type: 'Video',
-	elementId: '1234-abcdef-09876-xyz',
+	id: '1234-abcdef-09876-xyz',
 	videoId: '8M_yH-e9cq8',
 	title: '’I care, but I don’t care’: Life after the Queen’s death | Anywhere but Westminster',
 	expired: false,

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -473,10 +473,7 @@ export const Card = ({
 											defer={{ until: 'visible' }}
 										>
 											<YoutubeBlockComponent
-												id={media.mainMedia.elementId}
-												elementId={
-													media.mainMedia.elementId
-												}
+												id={media.mainMedia.id}
 												assetId={
 													media.mainMedia.videoId
 												}

diff --git a/dotcom-rendering/src/components/Elements.amp.tsx b/dotcom-rendering/src/components/Elements.amp.tsx
@@ -345,7 +345,7 @@ export const Elements = (
 			case 'model.dotcomrendering.pageElements.YoutubeBlockElement':
 				return (
 					<YoutubeBlockComponent
-						key={element.elementId}
+						key={element.id}
 						element={element}
 						pillar={pillar}
 						adTargeting={adTargeting}

diff --git a/dotcom-rendering/src/components/LiveBlock.stories.tsx b/dotcom-rendering/src/components/LiveBlock.stories.tsx
@@ -144,7 +144,6 @@ export const Video = () => {
 			},
 			{
 				duration: 142,
-				elementId: '27eac530-7088-4541-a1c5-3347a3d837fb',
 				expired: false,
 				mediaTitle:
 					'Nasa launches Perseverance rover in mission to find evidence of life on Mars – video',

diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx
@@ -55,7 +55,7 @@ export const NoConsent = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -83,7 +83,7 @@ export const NoOverlay = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -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={[
@@ -150,7 +150,7 @@ export const WithPosterImage = (): JSX.Element => {
 		<div style={containerStyle}>
 			<OverlayAutoplayExplainer />
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="N9Cgy-ke5-s"
 				alt=""
 				eventEmitters={[
@@ -185,7 +185,7 @@ export const WithOverlayAndPosterImage = (): JSX.Element => {
 		<div style={containerStyle}>
 			<OverlayAutoplayExplainer />
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="N9Cgy-ke5-s"
 				alt=""
 				eventEmitters={[
@@ -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={[
@@ -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={[
@@ -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={[
@@ -328,7 +328,7 @@ export const DuplicateVideos = (): JSX.Element => {
 	return (
 		<div style={containerStyleSmall}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -350,7 +350,7 @@ export const DuplicateVideos = (): JSX.Element => {
 			/>
 			<br />
 			<YoutubeAtom
-				elementId="xyz2"
+				elementId={345}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -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={[
@@ -411,7 +411,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
 				adTargeting={adTargeting}
 			/>
 			<YoutubeAtom
-				elementId="xyz-2"
+				elementId={456}
 				videoId="pcMiS6PW8aQ"
 				alt=""
 				eventEmitters={[
@@ -434,7 +434,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
 				adTargeting={adTargeting}
 			/>
 			<YoutubeAtom
-				elementId="xyu"
+				elementId={789}
 				videoId="3jpXAMwRSu4"
 				alt=""
 				eventEmitters={[
@@ -469,7 +469,7 @@ export const PausesOffscreen = (): JSX.Element => {
 		<div>
 			<div>Scroll down...</div>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -506,7 +506,7 @@ export const NoConsentWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -534,7 +534,7 @@ export const AdFreeWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -563,7 +563,7 @@ export const NoOverlayWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -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={[
@@ -622,7 +622,7 @@ export const WithPosterImageWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="N9Cgy-ke5-s"
 				alt=""
 				eventEmitters={[
@@ -653,7 +653,7 @@ export const WithOverlayAndPosterImageWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="N9Cgy-ke5-s"
 				alt=""
 				eventEmitters={[
@@ -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={[
@@ -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={[
@@ -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={[
@@ -786,7 +786,7 @@ export const DuplicateVideosWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyleSmall}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -808,7 +808,7 @@ export const DuplicateVideosWithIma = (): JSX.Element => {
 			/>
 			<br />
 			<YoutubeAtom
-				elementId="xyz2"
+				elementId={345}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -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={[
@@ -863,7 +863,7 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
 				abTestParticipations={{}}
 			/>
 			<YoutubeAtom
-				elementId="xyz-2"
+				elementId={456}
 				videoId="pcMiS6PW8aQ"
 				alt=""
 				eventEmitters={[
@@ -886,7 +886,7 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
 				abTestParticipations={{}}
 			/>
 			<YoutubeAtom
-				elementId="xyu"
+				elementId={789}
 				videoId="3jpXAMwRSu4"
 				alt=""
 				eventEmitters={[