WIP

Author: domlander

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -525,9 +525,9 @@ const HalfWidthCardLayout = ({
 			{cards.map((card, cardIndex) => {
 				return (
 					<LI
+						key={card.url}
 						stretch={false}
 						percentage="50%"
-						key={card.url}
 						padSides={true}
 						showDivider={cardIndex > 0}
 						verticalDividerColour={palette(
@@ -614,6 +614,7 @@ export const FlexibleGeneral = ({
 					case 'oneCardFullWidth':
 						return (
 							<FullWidthCardLayout
+								key={row.cards[0]?.uniqueId}
 								cards={row.cards}
 								containerPalette={containerPalette}
 								showAge={showAge}
@@ -624,7 +625,6 @@ export const FlexibleGeneral = ({
 								isLastRow={i === groupedCards.length - 1}
 								containerLevel={containerLevel}
 								collectionId={collectionId}
-								key={row.cards[0]?.uniqueId}
 							/>
 						);
 
@@ -633,6 +633,7 @@ export const FlexibleGeneral = ({
 					default:
 						return (
 							<HalfWidthCardLayout
+								key={row.cards[0]?.uniqueId}
 								cards={row.cards}
 								containerPalette={containerPalette}
 								showAge={showAge}
@@ -643,7 +644,6 @@ export const FlexibleGeneral = ({
 								aspectRatio={aspectRatio}
 								isLastRow={i === groupedCards.length - 1}
 								containerLevel={containerLevel}
-								key={row.cards[0]?.uniqueId}
 							/>
 						);
 				}

dotcom-rendering/src/components/LoopVideo.importable.tsx

@@ -5,6 +5,11 @@ import { useEffect, useRef, useState } from 'react';
 import { getZIndex } from '../lib/getZIndex';
 import { useIsInView } from '../lib/useIsInView';
 import { useShouldAdapt } from '../lib/useShouldAdapt';
+import type { CustomPlayEventDetail } from '../lib/video';
+import {
+	customLoopPlayAudioEventName,
+	customYoutubePlayEventName,
+} from '../lib/video';
 import { useConfig } from './ConfigContext';
 import type { PLAYER_STATES } from './LoopVideoPlayer';
 import { LoopVideoPlayer } from './LoopVideoPlayer';
@@ -14,16 +19,13 @@ const videoContainerStyles = css`
 	position: relative;
 `;
 
-type CustomPlayEventDetail = { uniqueId: string };
-const customPlayAudioEventName = 'looping-video:play-with-audio';
-
 /**
  * Dispatches a custom play audio event so that other videos listening
  * for this event will be muted.
  */
 export const dispatchCustomPlayAudioEvent = (uniqueId: string) => {
 	document.dispatchEvent(
-		new CustomEvent(customPlayAudioEventName, {
+		new CustomEvent(customLoopPlayAudioEventName, {
 			detail: { uniqueId },
 		}),
 	);
@@ -84,8 +86,8 @@ export const LoopVideo = ({
 		setPrefersReducedMotion(userPrefersReducedMotion);
 
 		/**
-		 * Pause the current video when another video is played
-		 * Triggered by the CustomEvent sent by each player on play
+		 * Mutes the current video when another video is unmuted
+		 * Triggered by the CustomEvent sent by each player on unmuting
 		 */
 		const handleCustomPlayAudioEvent = (
 			event: CustomEventInit<CustomPlayEventDetail>,
@@ -100,16 +102,33 @@ export const LoopVideo = ({
 			}
 		};
 
+		/**
+		 * Mute the current video when a Youtube video is played
+		 * Triggered by the CustomEvent in YoutubeAtomPlayer.
+		 */
+		const handleCustomPlayYoutubeEvent = () => {
+			setIsMuted(true);
+		};
+
 		document.addEventListener(
-			customPlayAudioEventName,
+			customLoopPlayAudioEventName,
 			handleCustomPlayAudioEvent,
 		);
+		document.addEventListener(
+			customYoutubePlayEventName,
+			handleCustomPlayYoutubeEvent,
+		);
 
-		return () =>
+		return () => {
 			document.removeEventListener(
-				customPlayAudioEventName,
+				customLoopPlayAudioEventName,
 				handleCustomPlayAudioEvent,
 			);
+			document.addEventListener(
+				customYoutubePlayEventName,
+				handleCustomPlayYoutubeEvent,
+			);
+		};
 	}, [uniqueId]);
 
 	/**

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx

@@ -13,6 +13,11 @@ import {
 import { getVideoClient } from '../../lib/bridgetApi';
 import { getZIndex } from '../../lib/getZIndex';
 import { getAuthStatus } from '../../lib/identity';
+import type { CustomPlayEventDetail } from '../../lib/video';
+import {
+	customLoopPlayAudioEventName,
+	customYoutubePlayEventName,
+} from '../../lib/video';
 import type { AdTargeting } from '../../types/commercial';
 import type { RenderingTarget } from '../../types/renderingTarget';
 import type { google } from './ima';
@@ -39,9 +44,6 @@ type Props = {
 	renderingTarget: RenderingTarget;
 };
 
-type CustomPlayEventDetail = { uniqueId: string };
-const customPlayEventName = 'youtube-video:play';
-
 type ProgressEvents = {
 	hasSentPlayEvent: boolean;
 	hasSent25Event: boolean;
@@ -129,7 +131,7 @@ const setAppsConfiguration = async (
  */
 const dispatchCustomPlayEvent = (uniqueId: string) => {
 	document.dispatchEvent(
-		new CustomEvent(customPlayEventName, {
+		new CustomEvent(customYoutubePlayEventName, {
 			detail: { uniqueId },
 		}),
 	);
@@ -592,11 +594,34 @@ export const YoutubeAtomPlayer = ({
 				 * add listener for custom play event
 				 */
 				document.addEventListener(
-					customPlayEventName,
+					customYoutubePlayEventName,
 					handleCustomPlayEvent,
 				);
 
-				customListeners.current[customPlayEventName] =
+				/**
+				 * Pauses all videos when a looping video is unmuted. If a user is
+				 * watching a looping video with sound, any playing Youtube video is paused.
+				 */
+				const handleCustomPlayLoopAudioEvent = (
+					event: CustomEventInit<CustomPlayEventDetail>,
+				) => {
+					if (event.detail) {
+						const playerStatePromise =
+							player.current?.getPlayerState();
+						void playerStatePromise?.then((playerState) => {
+							if (playerState === YT.PlayerState.PLAYING) {
+								void player.current?.pauseVideo();
+							}
+						});
+					}
+				};
+
+				document.addEventListener(
+					customLoopPlayAudioEventName,
+					handleCustomPlayLoopAudioEvent,
+				);
+
+				customListeners.current[customYoutubePlayEventName] =
 					handleCustomPlayEvent;
 
 				playerListeners.current.push(

dotcom-rendering/src/lib/video.ts

@@ -0,0 +1,4 @@
+export type CustomPlayEventDetail = { uniqueId: string };
+
+export const customLoopPlayAudioEventName = 'looping-video:play-with-audio';
+export const customYoutubePlayEventName = 'youtube-video:play';

dotcom-rendering/src/server/handler.front.web.ts

@@ -43,8 +43,7 @@ const enhanceFront = (body: unknown): Front => {
 						.editionBrandings,
 					data.editionId,
 				),
-				isLoopingVideoTest:
-					data.config.abTests.loopingVideoVariant === 'variant',
+				isLoopingVideoTest: true,
 			}),
 		},
 		mostViewed: data.mostViewed.map((trail) => decideTrail(trail)),