Fix ad targeting for YoutubeAtom stories (#682)

## What are you changing? Pass valid ad targeting to `YoutubeAtom` stories so the player is able to load. ## Background Since guardian/dotcom-rendering#8095 ad targeting will be set async on the client so it could be undefined initially and then defined in subsequent render passes. However the player requires ad targeting before it initialises and makes the request to YouTube so we block the player until ad targeting is defined as implemented in #675.
guardian · Jul 10, 2023 · 8930f61 · 8930f61
2 parents 8a1e22c + 21b02c3
commit 8930f61
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/.changeset/bright-trainers-protect.md b/.changeset/bright-trainers-protect.md
@@ -0,0 +1,5 @@
+---
+'@guardian/atoms-rendering': patch
+---
+
+Pass valid ad targeting to YoutubeAtom stories
diff --git a/libs/@guardian/atoms-rendering/src/YoutubeAtom.stories.tsx b/libs/@guardian/atoms-rendering/src/YoutubeAtom.stories.tsx
@@ -2,6 +2,7 @@ import { ArticlePillar } from '@guardian/libs';
 import { useState } from 'react';
 import { consentStateCanTarget } from './fixtures/consentStateCanTarget';
 import { YoutubeAtom } from './YoutubeAtom';
+import { AdTargeting } from './types';
 
 export default {
 	title: 'YoutubeAtom',
@@ -28,6 +29,10 @@ const OverlayAutoplayExplainer = () => (
 	</p>
 );
 
+const adTargeting: AdTargeting = {
+	disableAds: true,
+};
+
 export const NoConsent = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
@@ -45,6 +50,7 @@ export const NoConsent = (): JSX.Element => {
 				isMainMedia={false}
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 		</div>
 	);
@@ -69,6 +75,7 @@ export const NoOverlay = (): JSX.Element => {
 				title="Rayshard Brooks: US justice system treats us like 'animals'"
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 		</div>
 	);
@@ -102,6 +109,7 @@ export const WithOverrideImage = (): JSX.Element => {
 				title="How to stop the spread of coronavirus"
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 		</div>
 	);
@@ -150,6 +158,7 @@ export const WithPosterImage = (): JSX.Element => {
 				title="How Donald Trump’s broken promises failed Ohio | Anywhere but Washington"
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 		</div>
 	);
@@ -208,6 +217,7 @@ export const WithOverlayAndPosterImage = (): JSX.Element => {
 				title="How Donald Trump’s broken promises failed Ohio"
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 		</div>
 	);
@@ -246,6 +256,7 @@ export const GiveConsent = (): JSX.Element => {
 					title="How to stop the spread of coronavirus"
 					imaEnabled={false}
 					abTestParticipations={{}}
+					adTargeting={adTargeting}
 				/>
 			</div>
 		</>
@@ -255,7 +266,7 @@ export const GiveConsent = (): JSX.Element => {
 export const Sticky = (): JSX.Element => {
 	return (
 		<div>
-			<div style={{ fontSize: '36px' }}>⬇️</div>
+			<div>Scroll down...</div>
 			<div style={{ height: '1000px' }}></div>
 			<YoutubeAtom
 				elementId="xyz"
@@ -273,6 +284,7 @@ export const Sticky = (): JSX.Element => {
 				title="Rayshard Brooks: US justice system treats us like 'animals'"
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 			<div style={{ height: '1000px' }}></div>
 		</div>
@@ -282,7 +294,7 @@ export const Sticky = (): JSX.Element => {
 export const StickyMainMedia = (): JSX.Element => {
 	return (
 		<div>
-			<div style={{ fontSize: '36px' }}>⬇️</div>
+			<div>Scroll down...</div>
 			<div style={{ height: '1000px' }}></div>
 			<YoutubeAtom
 				elementId="xyz"
@@ -300,12 +312,18 @@ export const StickyMainMedia = (): JSX.Element => {
 				title="Rayshard Brooks: US justice system treats us like 'animals'"
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 			<div style={{ height: '1000px' }}></div>
 		</div>
 	);
 };
 
+/**
+ * Tests duplicate YoutubeAtoms on the same page.
+ * Players should play independently.
+ * If another video is played any other playing video should pause.
+ */
 export const DuplicateVideos = (): JSX.Element => {
 	return (
 		<div style={containerStyleSmall}>
@@ -323,6 +341,7 @@ export const DuplicateVideos = (): JSX.Element => {
 				shouldStick={true}
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 			<br />
 			<YoutubeAtom
@@ -339,6 +358,7 @@ export const DuplicateVideos = (): JSX.Element => {
 				shouldStick={true}
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 		</div>
 	);
@@ -348,6 +368,12 @@ DuplicateVideos.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * Tests multiple YoutubeAtoms on the same page.
+ * If a video is playing and the user scrolls past the video the video should stick.
+ * If another video is played any other playing video should pause.
+ * Closing a sticky video should pause the video.
+ */
 export const MultipleStickyVideos = (): JSX.Element => {
 	return (
 		<div style={{ width: '500px', height: '5000px' }}>
@@ -367,6 +393,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
 				title="Rayshard Brooks: US justice system treats us like 'animals'"
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 			<YoutubeAtom
 				elementId="xyz-2"
@@ -384,6 +411,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
 				title="Rayshard Brooks: US justice system treats us like 'animals'"
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 			<YoutubeAtom
 				elementId="xyu"
@@ -401,6 +429,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
 				title="Rayshard Brooks: US justice system treats us like 'animals'"
 				imaEnabled={false}
 				abTestParticipations={{}}
+				adTargeting={adTargeting}
 			/>
 		</div>
 	);