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

Fix Looping video and Youtube video interactions

Author: domlander

dotcom-rendering/src/components/DynamicSlowMPU.tsx

@@ -68,6 +68,8 @@ const Card33_Card33_Card33 = ({
  * If you pass no bigs at all the top slice will not render and a special
  * 3 column layout is used for the remaining slice.
  *
+ * @deprecated Adverts are no longer shown within containers. We no
+ * longer use containers that reserve a space for an MPU advert.
  */
 export const DynamicSlowMPU = ({
 	groupedTrails,

dotcom-rendering/src/components/FixedMediumSlowXIIMPU.tsx

@@ -129,6 +129,10 @@ const Card50_Card50 = ({
 	);
 };
 
+/**
+ * @deprecated Adverts are no longer shown within containers. We no
+ * longer use containers that reserve a space for an MPU advert.
+ */
 export const FixedMediumSlowXIIMPU = ({
 	trails,
 	containerPalette,

dotcom-rendering/src/components/FixedSmallSlowVMPU.tsx

@@ -12,6 +12,10 @@ type Props = {
 	absoluteServerTimes: boolean;
 };
 
+/**
+ * @deprecated Adverts are no longer shown within containers. We no
+ * longer use containers that reserve a space for an MPU advert.
+ */
 export const FixedSmallSlowVMPU = ({
 	trails,
 	containerPalette,

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.removeEventListener(
+				customYoutubePlayEventName,
+				handleCustomPlayYoutubeEvent,
+			);
+		};
 	}, [uniqueId]);
 
 	/**

dotcom-rendering/src/components/Treats.tsx

@@ -172,6 +172,7 @@ export const Treats = ({
 	borderColour?: string;
 }) => {
 	if (treats.length === 0) return null;
+
 	return (
 		<ul
 			css={css`
@@ -181,6 +182,7 @@ export const Treats = ({
 		>
 			{treats.map((treat, index) => {
 				const [link] = treat.links;
+
 				if (link?.linkTo === '/crosswords' && link.text) {
 					// Treats that link to /crosswords are special. If any
 					// treat has this exact url then an svg of a crossword
@@ -229,7 +231,7 @@ export const Treats = ({
 				}
 
 				return (
-					<>
+					<Fragment key={index}>
 						{treat.links.map(({ text, linkTo }) => (
 							<TextTreat
 								key={linkTo}
@@ -239,7 +241,7 @@ export const Treats = ({
 								borderColour={borderColour}
 							/>
 						))}
-					</>
+					</Fragment>
 				);
 			})}
 		</ul>

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,13 +594,38 @@ export const YoutubeAtomPlayer = ({
 				 * add listener for custom play event
 				 */
 				document.addEventListener(
-					customPlayEventName,
+					customYoutubePlayEventName,
 					handleCustomPlayEvent,
 				);
 
-				customListeners.current[customPlayEventName] =
+				customListeners.current[customYoutubePlayEventName] =
 					handleCustomPlayEvent;
 
+				/**
+				 * Pauses all playing 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[customLoopPlayAudioEventName] =
+					handleCustomPlayLoopAudioEvent;
+
 				playerListeners.current.push(
 					{ name: 'onReady', listener: onReadyListener },
 					{ name: 'onStateChange', listener: onStateChangeListener },

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';