Merge pull request #12690 from guardian/youtube-fullscreen-ios-test

YoutubeAtom fullscreen support for iOS

dotcom-rendering/package.json

@@ -38,7 +38,7 @@
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "21.0.0",
-		"@guardian/bridget": "7.0.0",
+		"@guardian/bridget": "8.0.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "50.13.0",
 		"@guardian/commercial": "23.0.0",

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

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { css, Global } from '@emotion/react';
 import type { Participations } from '@guardian/ab-core';
 import { buildImaAdTagUrl } from '@guardian/commercial';
 import type { ConsentState } from '@guardian/libs';
@@ -11,6 +11,7 @@ import {
 	useState,
 } from 'react';
 import { getVideoClient } from '../../lib/bridgetApi';
+import { getZIndex } from '../../lib/getZIndex';
 import { getAuthStatus } from '../../lib/identity';
 import type { RenderingTarget } from '../../types/renderingTarget';
 import type { google } from './ima';
@@ -74,6 +75,20 @@ const imaPlayerStyles = css`
 	height: 100%;
 `;
 
+const fullscreenStyles = (id: string) => css`
+	html {
+		overflow: hidden;
+	}
+	iframe#${id} {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		z-index: ${getZIndex('youTubeFullscreen')};
+	}
+`;
+
 /**
  * Dispatches a custom play event so that other players listening
  * for this event will stop playing
@@ -398,6 +413,9 @@ export const YoutubeAtomPlayer = ({
 	});
 
 	const [playerReady, setPlayerReady] = useState<boolean>(false);
+	const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
+	const [applyFullscreenStyles, setApplyFullscreenStyles] =
+		useState<boolean>(false);
 	const playerReadyCallback = useCallback(() => setPlayerReady(true), []);
 	const playerListeners = useRef<PlayerListeners>([]);
 	/**
@@ -447,9 +465,6 @@ export const YoutubeAtomPlayer = ({
 						videoId,
 						playerVars: {
 							controls: 1,
-							// @ts-expect-error -- advised by YouTube for Android but does not exist in @types/youtube
-							external_fullscreen:
-								renderingTarget === 'Apps' ? 1 : 0,
 							fs: 1,
 							modestbranding: 1,
 							origin,
@@ -472,8 +487,7 @@ export const YoutubeAtomPlayer = ({
 										from: 'YoutubeAtomPlayer fullscreen',
 										videoId,
 									});
-									// For Android only, iOS will stub the method
-									void getVideoClient().fullscreen();
+									setIsFullscreen((prev) => !prev);
 								}
 							},
 						},
@@ -644,17 +658,36 @@ export const YoutubeAtomPlayer = ({
 		};
 	}, []);
 
+	/**
+	 * For apps rendered articles that return true for `setFullscreen` the web layer
+	 * needs to handle the application of fullscreen styles
+	 *
+	 * This is only for the YouTube player in Android web views which does not support fullscreen
+	 */
+	useEffect(() => {
+		if (renderingTarget === 'Apps') {
+			const videoClient = getVideoClient();
+			void videoClient.setFullscreen(isFullscreen).then((success) => {
+				if (success) {
+					setApplyFullscreenStyles(isFullscreen);
+				}
+			});
+		}
+	}, [isFullscreen, renderingTarget]);
+
 	/**
 	 * An element for the YouTube player to hook into the dom
 	 */
 	return (
-		<div
-			id={id}
-			data-atom-id={id}
-			data-testid={id}
-			data-atom-type="youtube"
-			title={title}
-			css={enableAds && imaPlayerStyles}
-		></div>
+		<>
+			{applyFullscreenStyles && <Global styles={fullscreenStyles(id)} />}
+			<div
+				id={id}
+				data-testid={id}
+				data-atom-type="youtube"
+				title={title}
+				css={enableAds && imaPlayerStyles}
+			></div>
+		</>
 	);
 };

dotcom-rendering/src/lib/getZIndex.ts

@@ -24,6 +24,7 @@
 const indices = [
 	// Modals will go here at the top
 	'lightbox',
+	'youTubeFullscreen',
 
 	// Sticky video and button need to be above everything
 	'sticky-video-button',