Mute other loop audio when one loop is playing audio

Author: domlander

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

@@ -904,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 ?? ''
 									}
@@ -917,6 +916,7 @@ export const Card = ({
 											aspectRatio={aspectRatio}
 										/>
 									}
+									uniqueId={uniqueId}
 								/>
 							</Island>
 						)}

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

@@ -14,9 +14,24 @@ const videoContainerStyles = css`
 	position: relative;
 `;
 
+type CustomPlayEventDetail = { uniqueId: string };
+const customPlayAudioEventName = 'looping-video:play-with-audio';
+
+/**
+ * Dispatches a custom play event so that other players listening
+ * for this event will stop playing
+ */
+export const dispatchCustomPlayAudioEvent = (uniqueId: string) => {
+	document.dispatchEvent(
+		new CustomEvent(customPlayAudioEventName, {
+			detail: { uniqueId },
+		}),
+	);
+};
+
 type Props = {
 	src: string;
-	videoId: string;
+	uniqueId: string;
 	width: number;
 	height: number;
 	thumbnailImage: string;
@@ -25,7 +40,7 @@ type Props = {
 
 export const LoopVideo = ({
 	src,
-	videoId,
+	uniqueId,
 	width,
 	height,
 	thumbnailImage,
@@ -57,26 +72,54 @@ export const LoopVideo = ({
 	});
 
 	/**
+	 * Setup.
+	 *
 	 * Register the users motion preferences.
+	 * Create event listeners to ensure we don't play audio from multiple loops
 	 */
 	useEffect(() => {
 		const userPrefersReducedMotion = window.matchMedia(
 			'(prefers-reduced-motion: reduce)',
 		).matches;
 		setPrefersReducedMotion(userPrefersReducedMotion);
-	}, []);
+
+		/**
+		 * Pause the current video when another video is played
+		 * Triggered by the CustomEvent sent by each player on play
+		 */
+		const handleCustomPlayAudioEvent = (
+			event: CustomEventInit<CustomPlayEventDetail>,
+		) => {
+			if (event.detail) {
+				const playedVideoId = event.detail.uniqueId;
+				const thisVideoId = uniqueId;
+
+				if (playedVideoId !== thisVideoId) {
+					setIsMuted(true);
+				}
+			}
+		};
+
+		document.addEventListener(
+			customPlayAudioEventName,
+			handleCustomPlayAudioEvent,
+		);
+	}, [uniqueId]);
 
 	/**
-	 * Autoplays the video when it comes into view.
+	 * Autoplay the video when it comes into view.
 	 */
 	useEffect(() => {
-		if (!vidRef.current || playerState === 'PAUSED_BY_USER') return;
-
-		if (isInView && isPlayable && playerState !== 'PLAYING') {
-			if (prefersReducedMotion !== false) {
-				return;
-			}
+		if (!vidRef.current || prefersReducedMotion !== false) {
+			return;
+		}
 
+		if (
+			isInView &&
+			isPlayable &&
+			(playerState === 'NOT_STARTED' ||
+				playerState === 'PAUSED_BY_INTERSECTION_OBSERVER')
+		) {
 			setPlayerState('PLAYING');
 			setHasBeenInView(true);
 
@@ -98,9 +141,11 @@ export const LoopVideo = ({
 			setIsMuted(true);
 		}
 
-		// If a user action paused the video, they have indicated
-		// that they don't want to watch the video. Therefore, don't
-		// resume the video when it comes back in view
+		/**
+		 * If a user action paused the video, they have indicated
+		 * that they don't want to watch the video. Therefore, don't
+		 * resume the video when it comes back in view
+		 */
 		const isBackInView =
 			playerState === 'PAUSED_BY_INTERSECTION_OBSERVER' && isInView;
 		if (isBackInView) {
@@ -139,11 +184,23 @@ export const LoopVideo = ({
 		}
 	};
 
-	const handleClick = (event: React.SyntheticEvent) => {
+	const handlePlayPauseClick = (event: React.SyntheticEvent) => {
 		event.preventDefault();
 		playPauseVideo();
 	};
 
+	const handleAudioClick = (event: React.SyntheticEvent) => {
+		event.stopPropagation(); // Don't pause the video
+
+		if (isMuted) {
+			// Emit video play audio event so other components are aware when a video is played with sound
+			dispatchCustomPlayAudioEvent(uniqueId);
+			setIsMuted(false);
+		} else {
+			setIsMuted(true);
+		}
+	};
+
 	const onError = () => {
 		window.guardian.modules.sentry.reportError(
 			new Error(`Loop video could not be played. source: ${src}`),
@@ -225,7 +282,7 @@ export const LoopVideo = ({
 		>
 			<LoopVideoPlayer
 				src={src}
-				videoId={videoId}
+				uniqueId={uniqueId}
 				width={width}
 				height={height}
 				posterImage={posterImage}
@@ -236,10 +293,9 @@ export const LoopVideo = ({
 				isPlayable={isPlayable}
 				setIsPlayable={setIsPlayable}
 				playerState={playerState}
-				setPlayerState={setPlayerState}
 				isMuted={isMuted}
-				setIsMuted={setIsMuted}
-				handleClick={handleClick}
+				handlePlayPauseClick={handlePlayPauseClick}
+				handleAudioClick={handleAudioClick}
 				handleKeyDown={handleKeyDown}
 				onError={onError}
 				AudioIcon={AudioIcon}

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -60,19 +60,18 @@ export const PLAYER_STATES = [
 
 type Props = {
 	src: string;
-	videoId: string;
+	uniqueId: string;
 	width: number;
 	height: number;
 	fallbackImageComponent: JSX.Element;
 	isPlayable: boolean;
 	setIsPlayable: Dispatch<SetStateAction<boolean>>;
 	playerState: (typeof PLAYER_STATES)[number];
-	setPlayerState: Dispatch<SetStateAction<(typeof PLAYER_STATES)[number]>>;
 	currentTime: number;
 	setCurrentTime: Dispatch<SetStateAction<number>>;
 	isMuted: boolean;
-	setIsMuted: Dispatch<SetStateAction<boolean>>;
-	handleClick: (event: SyntheticEvent) => void;
+	handlePlayPauseClick: (event: SyntheticEvent) => void;
+	handleAudioClick: (event: SyntheticEvent) => void;
 	handleKeyDown: (event: React.KeyboardEvent<HTMLVideoElement>) => void;
 	onError: (event: SyntheticEvent<HTMLVideoElement>) => void;
 	AudioIcon: (iconProps: IconProps) => JSX.Element;
@@ -89,20 +88,19 @@ export const LoopVideoPlayer = forwardRef(
 	(
 		{
 			src,
-			videoId,
+			uniqueId,
 			width,
 			height,
 			fallbackImageComponent,
 			posterImage,
 			isPlayable,
 			setIsPlayable,
 			playerState,
-			setPlayerState,
 			currentTime,
 			setCurrentTime,
 			isMuted,
-			setIsMuted,
-			handleClick,
+			handlePlayPauseClick,
+			handleAudioClick,
 			handleKeyDown,
 			onError,
 			AudioIcon,
@@ -111,8 +109,7 @@ export const LoopVideoPlayer = forwardRef(
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
 	) => {
-		// Assumes that the video is unique on the page.
-		const loopVideoId = `loop-video-${videoId}`;
+		const loopVideoId = `loop-video-${uniqueId}`;
 
 		return (
 			<>
@@ -127,9 +124,6 @@ export const LoopVideoPlayer = forwardRef(
 					height={height}
 					width={width}
 					poster={posterImage}
-					onPlaying={() => {
-						setPlayerState('PLAYING');
-					}}
 					onCanPlay={() => {
 						setIsPlayable(true);
 					}}
@@ -143,7 +137,7 @@ export const LoopVideoPlayer = forwardRef(
 							setCurrentTime(ref.current.currentTime);
 						}
 					}}
-					onClick={handleClick}
+					onClick={handlePlayPauseClick}
 					onKeyDown={handleKeyDown}
 					role="button"
 					tabIndex={0}
@@ -160,7 +154,7 @@ export const LoopVideoPlayer = forwardRef(
 						{showPlayIcon && (
 							<button
 								type="button"
-								onClick={handleClick}
+								onClick={handlePlayPauseClick}
 								css={playIconStyles}
 							>
 								<PlayIcon iconWidth="narrow" />
@@ -175,10 +169,7 @@ export const LoopVideoPlayer = forwardRef(
 						{/* Audio icon */}
 						<button
 							type="button"
-							onClick={(event) => {
-								event.stopPropagation(); // Don't pause the video
-								setIsMuted(!isMuted);
-							}}
+							onClick={handleAudioClick}
 							css={audioButtonStyles}
 						>
 							<div css={audioIconContainerStyles}>