Use new Bridget fullscreen methods

dotcom-rendering/package.json

@@ -38,7 +38,7 @@
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "20.1.0",
-		"@guardian/bridget": "7.0.0",
+		"@guardian/bridget": "0.0.0-2024-09-26-snapshot-1",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "50.13.0",
 		"@guardian/commercial": "21.0.3",

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

@@ -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';
@@ -84,6 +85,7 @@ const fullscreenStyles = (id: string) => css`
 		left: 0;
 		width: 100vw;
 		height: 100vh;
+		z-index: ${getZIndex('youTubeFullscreen')};
 	}
 `;
 
@@ -412,6 +414,8 @@ 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>([]);
 	/**
@@ -657,11 +661,22 @@ export const YoutubeAtomPlayer = ({
 		};
 	}, []);
 
+	/**
+	 * For apps rendered articles that return true for `webFullscreen` the web layer
+	 * needs to handle the application of fullscreen styles and inform the native
+	 * layer of the fullscreen state.
+	 *
+	 * This is only for the YouTube player in Android web views which does not support fullscreen
+	 */
 	useEffect(() => {
 		if (renderingTarget === 'Apps') {
-			console.log('fullscreen', isFullscreen);
-			// For Android only, iOS will stub the method
-			// void getVideoClient().fullscreen(isFullscreen);
+			const videoClient = getVideoClient();
+			void videoClient.webFullscreen().then((webFullscreen) => {
+				if (webFullscreen) {
+					void videoClient.setFullscreen(isFullscreen);
+					setApplyFullscreenStyles(isFullscreen);
+				}
+			});
 		}
 	}, [isFullscreen, renderingTarget]);
 
@@ -670,7 +685,7 @@ export const YoutubeAtomPlayer = ({
 	 */
 	return (
 		<>
-			{isFullscreen && <Global styles={fullscreenStyles(id)} />}
+			{applyFullscreenStyles && <Global styles={fullscreenStyles(id)} />}
 			<div
 				id={id}
 				data-testid={id}

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