Merge pull request #13647 from guardian/dark-mode-param-for-ai2html

Add `dark=false` param for in-house interactive embeds

Author: frederickobrien

dotcom-rendering/playwright/lib/iframe.ts

@@ -10,4 +10,16 @@ const getIframeBody = async (
 	return iframeBodyLocator;
 };
 
-export { getIframeBody };
+const getIframePart = async (
+	page: Page,
+	iframeSelector: string,
+	partSelector: string,
+): Promise<Locator> => {
+	const iframePartLocator = page
+		.frameLocator(iframeSelector)
+		.locator(partSelector);
+	await expect(iframePartLocator).toBeAttached({ timeout: 10_000 });
+	return iframePartLocator;
+};
+
+export { getIframeBody, getIframePart };

dotcom-rendering/playwright/tests/article.embeds.e2e.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { cmpAcceptAll } from '../lib/cmp';
-import { getIframeBody } from '../lib/iframe';
+import { getIframeBody, getIframePart } from '../lib/iframe';
 import { waitForIsland } from '../lib/islands';
 import { loadPage } from '../lib/load-page';
 import { expectToBeVisible } from '../lib/locators';
@@ -43,9 +43,10 @@ test.describe('Embeds', () => {
 
 			await waitForIsland(page, 'InteractiveBlockComponent');
 			await expect(
-				await getIframeBody(
+				await getIframePart(
 					page,
 					'[data-testid="interactive-element-LA%20Rams%20dead%20cap%20numbers"] > iframe',
+					'.title',
 				),
 			).toContainText('The Rams’ dead cap numbers for 2020');
 		});

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

@@ -326,46 +326,84 @@ export const InteractiveBlockComponent = ({
 	const placeholderLinkRef = useRef<HTMLAnchorElement>(null);
 	const [loaded, setLoaded] = useState(false);
 	const { darkModeAvailable } = useConfig();
+
+	// Define some one-time flags
+	const isDatawrapperGraphic =
+		url && url.includes('interactive.guim.co.uk/datawrapper')
+			? true
+			: false;
+
+	const isUploaderEmbedPath =
+		url && url.includes('interactive.guim.co.uk/uploader/embed/')
+			? true
+			: false;
+
+	const scriptUrlIsBoot =
+		scriptUrl &&
+		scriptUrl.includes(
+			'interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js',
+		)
+			? true
+			: false;
+
 	useOnce(() => {
 		// We've brought the behavior from boot.js into this file to avoid loading 2 extra scripts
-		if (
-			scriptUrl ===
-				'https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js' &&
-			url &&
-			placeholderLinkRef.current
-		) {
+
+		// Define additional one-time flags - these depend on window/document objects
+		const isRunningInWebEnvironment =
+			!document.querySelector('.ios') &&
+			!document.querySelector('.android')
+				? true
+				: false;
+
+		const prefersDarkScheme = window.matchMedia(
+			'(prefers-color-scheme: dark)',
+		).matches;
+		const requiresDarkMode =
+			darkModeAvailable && prefersDarkScheme ? true : false;
+
+		if (url && scriptUrlIsBoot && placeholderLinkRef.current) {
+			// Prepare for graphic url dynamic updates
+			const graphicUrl = new URL(url);
+
+			// Begin creating new iframe element
 			const iframe = document.createElement('iframe');
 			iframe.style.width = '100%';
 			iframe.style.border = 'none';
 			iframe.height = decideHeight(role).toString();
 			iframe.title = caption ?? alt ?? 'Interactive Content';
-			if (url.startsWith('http:')) {
-				iframe.src = url.replace('http:', 'https:');
-			} else {
-				iframe.src = url;
-			}
 
-			// Datawrapper-specific fix to suppress scrollbars appearing
-			if (url.includes('datawrapper')) {
+			// Fix for Datawrapper graphic
+			if (isDatawrapperGraphic) {
 				iframe.scrolling = 'no';
-				// Turn off dark mode for Datawrapper embeds on web
-				// This should be removed if/when dark mode is implements on the website
-				if (
-					!document.querySelector('.ios') &&
-					!document.querySelector('.android')
-				) {
-					const prefersDarkScheme = window.matchMedia(
-						'(prefers-color-scheme: dark)',
-					).matches;
-					const darkMode = darkModeAvailable && prefersDarkScheme;
-					if (!darkMode) {
-						iframe.src +=
-							(iframe.src.includes('?') ? '&' : '?') +
-							'dark=false';
+			}
+
+			// Fix darkmode for web environment
+			if (isRunningInWebEnvironment && !requiresDarkMode) {
+				if (isDatawrapperGraphic || isUploaderEmbedPath) {
+					// Add the 'dark=false' search param
+					if (graphicUrl.search.length) {
+						graphicUrl.search += '&dark=false';
+					} else {
+						// Embed URLs without a trailing slash are redirected and the
+						// search param is lost so we need to add it to the pathname
+						const hasTrailingSlash = graphicUrl.pathname.endsWith(
+							'/',
+						)
+							? true
+							: false;
+						graphicUrl.pathname += hasTrailingSlash ? '' : '/';
+						graphicUrl.search += '?dark=false';
 					}
 				}
 			}
 
+			// Always serve graphic over https, not http
+			graphicUrl.protocol = 'https:';
+
+			// Finalise new iframe element
+			iframe.src = graphicUrl.href;
+
 			setupWindowListeners(iframe);
 
 			wrapperRef.current?.prepend(iframe);
@@ -397,13 +435,6 @@ export const InteractiveBlockComponent = ({
 		}
 	}, [loaded]);
 
-	const isDatawrapperGraphic =
-		url == undefined
-			? false
-			: /^https?:\/\/interactive\.guim\.co\.uk\/datawrapper(-test)?\/embed/.test(
-					url,
-			  );
-
 	return (
 		<>
 			<figure