Merge pull request #14142 from guardian/doml/loop-video-audio

Mute other Looping Videos when playing audio

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -96,7 +96,8 @@ export type Props = {
 	avatarUrl?: string;
 	showClock?: boolean;
 	mainMedia?: MainMedia;
-	/** Note YouTube recommends a minimum width of 480px @see https://developers.google.com/youtube/terms/required-minimum-functionality#embedded-youtube-player-size
+	/**
+	 * Note YouTube recommends a minimum width of 480px @see https://developers.google.com/youtube/terms/required-minimum-functionality#embedded-youtube-player-size
 	 * At 300px or below, the player will begin to lose functionality e.g. volume controls being omitted.
 	 * Youtube requires a minimum width 200px.
 	 */
@@ -133,8 +134,14 @@ export type Props = {
 	isTagPage?: boolean;
 	/** Allows the consumer to set an aspect ratio on the image of 5:3, 5:4, 4:5 or 1:1 */
 	aspectRatio?: AspectRatio;
+	/** The index of the card in a carousel */
 	index?: number;
-	/** The Splash card in a flexible container gets a different visual treatment to other cards*/
+	/**
+	 * Useful for videos. Has the form: collection-{collection ID}-{card grouping type}-{card index}
+	 * For example, the first splash card in the second collection would be: "collection-1-splash-0"
+	 */
+	uniqueId?: string;
+	/** The Splash card in a flexible container gets a different visual treatment to other cards */
 	isFlexSplash?: boolean;
 	showTopBarDesktop?: boolean;
 	showTopBarMobile?: boolean;
@@ -402,6 +409,7 @@ export const Card = ({
 	isTagPage = false,
 	aspectRatio,
 	index = 0,
+	uniqueId = '',
 	isFlexSplash,
 	showTopBarDesktop = true,
 	showTopBarMobile = true,
@@ -896,7 +904,6 @@ export const Card = ({
 									src={media.mainMedia.videoId}
 									height={media.mainMedia.height}
 									width={media.mainMedia.width}
-									videoId={media.mainMedia.videoId}
 									thumbnailImage={
 										media.mainMedia.thumbnailImage ?? ''
 									}
@@ -909,6 +916,7 @@ export const Card = ({
 											aspectRatio={aspectRatio}
 										/>
 									}
+									uniqueId={uniqueId}
 								/>
 							</Island>
 						)}

dotcom-rendering/src/components/DecideContainer.tsx

@@ -64,7 +64,6 @@ export const DecideContainer = ({
 	collectionId,
 	containerLevel,
 }: Props) => {
-	// If you add a new container type which contains an MPU, you must also add it to
 	switch (containerType) {
 		case 'dynamic/fast':
 			return (
@@ -255,6 +254,7 @@ export const DecideContainer = ({
 					absoluteServerTimes={absoluteServerTimes}
 					imageLoading={imageLoading}
 					aspectRatio={aspectRatio}
+					collectionId={collectionId}
 				/>
 			);
 		case 'flexible/general':

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -80,6 +80,14 @@ export const decideCardPositions = (cards: DCRFrontCard[]): GroupedCards => {
 	}, []);
 };
 
+type ImmersiveCardLayoutProps = {
+	card: DCRFrontCard;
+	containerPalette?: DCRContainerPalette;
+	absoluteServerTimes: boolean;
+	imageLoading: Loading;
+	collectionId: number;
+};
+
 /**
  * ImmersiveCardLayout is a special case of the card layout that is used for cards with the isImmersive property.
  * It is a single feature card that takes up the full width of the container on all breakpoints.
@@ -92,17 +100,11 @@ const ImmersiveCardLayout = ({
 	absoluteServerTimes,
 	imageLoading,
 	collectionId,
-}: {
-	card: DCRFrontCard;
-	containerPalette?: DCRContainerPalette;
-	absoluteServerTimes: boolean;
-	imageLoading: Loading;
-	collectionId: number;
-}) => {
+}: ImmersiveCardLayoutProps) => {
 	const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
 
 	return (
-		<UL padBottom={true} key={card.url}>
+		<UL padBottom={true}>
 			<LI padSides={true}>
 				<FeatureCard
 					collectionId={collectionId}
@@ -229,6 +231,18 @@ const decideSplashCardProperties = (
 	}
 };
 
+type SplashCardLayoutProps = {
+	cards: DCRFrontCard[];
+	imageLoading: Loading;
+	containerPalette?: DCRContainerPalette;
+	showAge?: boolean;
+	absoluteServerTimes: boolean;
+	aspectRatio: AspectRatio;
+	isLastRow: boolean;
+	containerLevel: DCRContainerLevel;
+	collectionId: number;
+};
+
 const SplashCardLayout = ({
 	cards,
 	containerPalette,
@@ -239,17 +253,7 @@ const SplashCardLayout = ({
 	isLastRow,
 	containerLevel,
 	collectionId,
-}: {
-	cards: DCRFrontCard[];
-	imageLoading: Loading;
-	containerPalette?: DCRContainerPalette;
-	showAge?: boolean;
-	absoluteServerTimes: boolean;
-	aspectRatio: AspectRatio;
-	isLastRow: boolean;
-	containerLevel: DCRContainerLevel;
-	collectionId: number;
-}) => {
+}: SplashCardLayoutProps) => {
 	const card = cards[0];
 	if (!card) return null;
 
@@ -380,6 +384,19 @@ const decideCardProperties = (
 	}
 };
 
+type FullWidthCardLayoutProps = {
+	cards: DCRFrontCard[];
+	imageLoading: Loading;
+	containerPalette?: DCRContainerPalette;
+	showAge?: boolean;
+	absoluteServerTimes: boolean;
+	aspectRatio: AspectRatio;
+	isFirstRow: boolean;
+	isLastRow: boolean;
+	containerLevel: DCRContainerLevel;
+	collectionId: number;
+};
+
 const FullWidthCardLayout = ({
 	cards,
 	containerPalette,
@@ -391,18 +408,7 @@ const FullWidthCardLayout = ({
 	isLastRow,
 	containerLevel,
 	collectionId,
-}: {
-	cards: DCRFrontCard[];
-	imageLoading: Loading;
-	containerPalette?: DCRContainerPalette;
-	showAge?: boolean;
-	absoluteServerTimes: boolean;
-	aspectRatio: AspectRatio;
-	isFirstRow: boolean;
-	isLastRow: boolean;
-	containerLevel: DCRContainerLevel;
-	collectionId: number;
-}) => {
+}: FullWidthCardLayoutProps) => {
 	const card = cards[0];
 	if (!card) return null;
 
@@ -436,7 +442,6 @@ const FullWidthCardLayout = ({
 			showTopBar={!isFirstRow}
 			padBottom={!isLastRow}
 			hasLargeSpacing={!isLastRow}
-			key={card.url}
 		>
 			<LI
 				padSides={true}
@@ -481,6 +486,19 @@ const FullWidthCardLayout = ({
 	);
 };
 
+type HalfWidthCardLayoutProps = {
+	cards: DCRFrontCard[];
+	imageLoading: Loading;
+	isFirstRow?: boolean;
+	isFirstStandardRow?: boolean;
+	containerPalette?: DCRContainerPalette;
+	showAge?: boolean;
+	absoluteServerTimes: boolean;
+	aspectRatio: AspectRatio;
+	isLastRow: boolean;
+	containerLevel: DCRContainerLevel;
+};
+
 const HalfWidthCardLayout = ({
 	cards,
 	containerPalette,
@@ -490,22 +508,9 @@ const HalfWidthCardLayout = ({
 	isFirstRow,
 	isFirstStandardRow,
 	aspectRatio,
-	row,
 	isLastRow,
 	containerLevel,
-}: {
-	cards: DCRFrontCard[];
-	imageLoading: Loading;
-	isFirstRow?: boolean;
-	isFirstStandardRow?: boolean;
-	containerPalette?: DCRContainerPalette;
-	showAge?: boolean;
-	absoluteServerTimes: boolean;
-	aspectRatio: AspectRatio;
-	row: number;
-	isLastRow: boolean;
-	containerLevel: DCRContainerLevel;
-}) => {
+}: HalfWidthCardLayoutProps) => {
 	if (cards.length === 0) return null;
 
 	return (
@@ -516,7 +521,6 @@ const HalfWidthCardLayout = ({
 			showTopBar={!isFirstRow}
 			/** We use one full top bar for the first row and use a split one for subsequent rows */
 			splitTopBar={!isFirstStandardRow}
-			key={row}
 		>
 			{cards.map((card, cardIndex) => {
 				return (
@@ -577,8 +581,16 @@ export const FlexibleGeneral = ({
 	containerLevel = 'Primary',
 	collectionId,
 }: Props) => {
-	const splash = [...groupedTrails.splash].slice(0, 1);
-	const cards = [...groupedTrails.standard].slice(0, 19);
+	const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
+		...snap,
+		uniqueId: `collection-${collectionId}-splash-0`,
+	}));
+	const cards = [...groupedTrails.standard]
+		.slice(0, 19)
+		.map((standard, i) => ({
+			...standard,
+			uniqueId: `collection-${collectionId}-standard-${i}`,
+		}));
 	const groupedCards = decideCardPositions(cards);
 
 	return (
@@ -612,6 +624,7 @@ export const FlexibleGeneral = ({
 								isLastRow={i === groupedCards.length - 1}
 								containerLevel={containerLevel}
 								collectionId={collectionId}
+								key={row.cards[0]?.uniqueId}
 							/>
 						);
 
@@ -628,9 +641,9 @@ export const FlexibleGeneral = ({
 								isFirstRow={!splash.length && i === 0}
 								isFirstStandardRow={i === 0}
 								aspectRatio={aspectRatio}
-								row={i + 1}
 								isLastRow={i === groupedCards.length - 1}
 								containerLevel={containerLevel}
+								key={row.cards[0]?.uniqueId}
 							/>
 						);
 				}

dotcom-rendering/src/components/FlexibleSpecial.stories.tsx

@@ -127,6 +127,7 @@ export const One: Story = {
 			snap: [],
 			standard: trails.slice(0, 1),
 		},
+		collectionId: 1,
 	},
 };
 export const Two: Story = {
@@ -137,6 +138,7 @@ export const Two: Story = {
 			snap: [],
 			standard: trails.slice(0, 2),
 		},
+		collectionId: 1,
 	},
 };
 export const Three: Story = {
@@ -147,6 +149,7 @@ export const Three: Story = {
 			snap: [],
 			standard: trails.slice(0, 3),
 		},
+		collectionId: 1,
 	},
 };
 export const Four: Story = {
@@ -157,6 +160,7 @@ export const Four: Story = {
 			snap: [],
 			standard: trails.slice(0, 4),
 		},
+		collectionId: 1,
 	},
 };
 export const Five: Story = {
@@ -167,6 +171,7 @@ export const Five: Story = {
 			snap: [],
 			standard: trails.slice(0, 5),
 		},
+		collectionId: 1,
 	},
 };
 export const DefaultSplashWithImageSupression: Story = {
@@ -178,6 +183,7 @@ export const DefaultSplashWithImageSupression: Story = {
 			snap: [],
 			standard: [{ ...trails[0], image: undefined }],
 		},
+		collectionId: 1,
 	},
 };
 
@@ -190,6 +196,7 @@ export const BoostedSplashWithImageSupression: Story = {
 			snap: [],
 			standard: [{ ...trails[0], boostLevel: 'boost', image: undefined }],
 		},
+		collectionId: 1,
 	},
 };
 
@@ -204,6 +211,7 @@ export const MegaBoostedSplashWithImageSupression: Story = {
 				{ ...trails[0], boostLevel: 'megaboost', image: undefined },
 			],
 		},
+		collectionId: 1,
 	},
 };
 
@@ -218,6 +226,7 @@ export const GigaBoostedSplashWithImageSupression: Story = {
 				{ ...trails[0], boostLevel: 'gigaboost', image: undefined },
 			],
 		},
+		collectionId: 1,
 	},
 };
 
@@ -230,6 +239,7 @@ export const DefaultSplashWithLiveUpdates: Story = {
 			snap: [],
 			standard: [{ ...liveUpdatesCard }],
 		},
+		collectionId: 1,
 	},
 };
 
@@ -242,6 +252,7 @@ export const BoostedSplashWithLiveUpdates: Story = {
 			snap: [],
 			standard: [{ ...liveUpdatesCard, boostLevel: 'boost' }],
 		},
+		collectionId: 1,
 	},
 };
 
@@ -254,6 +265,7 @@ export const MegaBoostedSplashWithLiveUpdates: Story = {
 			snap: [],
 			standard: [{ ...liveUpdatesCard, boostLevel: 'megaboost' }],
 		},
+		collectionId: 1,
 	},
 };
 
@@ -266,6 +278,7 @@ export const GigaBoostedSplashWithLiveUpdates: Story = {
 			snap: [],
 			standard: [{ ...liveUpdatesCard, boostLevel: 'gigaboost' }],
 		},
+		collectionId: 1,
 	},
 };
 
@@ -293,6 +306,7 @@ export const WithSpecialPaletteVariations = {
 			snap: [],
 			standard: trails.slice(0, 5),
 		},
+		collectionId: 1,
 	},
 	render: (args) => (
 		<>