Add an apps autoplay check

dotcom-rendering/package.json

@@ -29,7 +29,7 @@
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/ab-testing-config": "workspace:ab-testing-config",
 		"@guardian/braze-components": "22.2.0",
-		"@guardian/bridget": "8.7.0",
+		"@guardian/bridget": "8.8.0-2026-03-05",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "62.3.5",
 		"@guardian/commercial-core": "29.0.0",

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

@@ -9,6 +9,7 @@ import {
 	submitComponentEvent,
 } from '../client/ophan/ophan';
 import type { ArticleFormat } from '../lib/articleFormat';
+import { getVideoClient } from '../lib/bridgetApi';
 import { getZIndex } from '../lib/getZIndex';
 import { generateImageURL } from '../lib/image';
 import { useIsInView } from '../lib/useIsInView';
@@ -32,7 +33,7 @@ import type {
 	SubtitleSize,
 } from './SelfHostedVideoPlayer';
 import { SelfHostedVideoPlayer } from './SelfHostedVideoPlayer';
-import { ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
+import { ophanTrackerApps, ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 
 const VISIBILITY_THRESHOLD = 0.5;
 
@@ -266,6 +267,30 @@ type Props = {
 	role?: RoleType;
 };
 
+const doesUserPermitAutoplayOnWeb = (): boolean => {
+	/**
+	 * The user indicates a preference for reduced motion: https://web.dev/articles/prefers-reduced-motion
+	 */
+	const userPrefersReducedMotion = window.matchMedia(
+		'(prefers-reduced-motion: reduce)',
+	).matches;
+
+	/**
+	 * The user can set this on their Accessibility Settings page.
+	 * Explicitly `false` when the user has said they don't want autoplay video.
+	 */
+	const autoplayPreference = storage.local.get(
+		'gu.prefs.accessibility.autoplay-video',
+	);
+
+	return !userPrefersReducedMotion && autoplayPreference !== false;
+};
+
+const doesUserPermitAutoplayOnApps = async (): Promise<boolean> => {
+	const videoClient = getVideoClient();
+	return videoClient.isAutoplayEnabled();
+};
+
 export const SelfHostedVideo = ({
 	sources,
 	atomId,
@@ -397,25 +422,6 @@ export const SelfHostedVideo = ({
 		/>
 	);
 
-	const doesUserPermitAutoplay = (): boolean => {
-		/**
-		 * The user indicates a preference for reduced motion: https://web.dev/articles/prefers-reduced-motion
-		 */
-		const userPrefersReducedMotion = window.matchMedia(
-			'(prefers-reduced-motion: reduce)',
-		).matches;
-
-		/**
-		 * The user can set this on their Accessibility Settings page.
-		 * Explicitly `false` when the user has said they don't want autoplay video.
-		 */
-		const autoplayPreference = storage.local.get(
-			'gu.prefs.accessibility.autoplay-video',
-		);
-
-		return !userPrefersReducedMotion && autoplayPreference !== false;
-	};
-
 	/**
 	 * Setup.
 	 *
@@ -424,7 +430,11 @@ export const SelfHostedVideo = ({
 	 * 3. Creates event listeners to control playback when there are multiple videos.
 	 */
 	useEffect(() => {
-		setIsAutoplayAllowed(doesUserPermitAutoplay());
+		if (renderingTarget === 'Apps') {
+			void doesUserPermitAutoplayOnApps().then(setIsAutoplayAllowed);
+		} else {
+			setIsAutoplayAllowed(doesUserPermitAutoplayOnWeb());
+		}
 
 		/**
 		 * Initialise Ophan attention tracking
@@ -464,7 +474,13 @@ export const SelfHostedVideo = ({
 		 */
 		const handleRestoreFromCache = (event: PageTransitionEvent) => {
 			if (event.persisted) {
-				setIsAutoplayAllowed(doesUserPermitAutoplay());
+				if (renderingTarget === 'Apps') {
+					void doesUserPermitAutoplayOnApps().then(
+						setIsAutoplayAllowed,
+					);
+				} else {
+					setIsAutoplayAllowed(doesUserPermitAutoplayOnWeb());
+				}
 				setHasPageBecomeActive(true);
 			} else {
 				setHasPageBecomeActive(false);
@@ -513,7 +529,7 @@ export const SelfHostedVideo = ({
 				handlePageBecomesVisible();
 			});
 		};
-	}, [uniqueId, atomId]);
+	}, [uniqueId, atomId, renderingTarget]);
 
 	/**
 	 * Track the first time the video comes into view.
@@ -601,7 +617,11 @@ export const SelfHostedVideo = ({
 	const handlePlaying = () => {
 		if (hasTrackedPlay) return;
 
-		ophanTrackerWeb(atomId, 'loop')('play');
+		if (renderingTarget === 'Apps') {
+			ophanTrackerApps(atomId)('play');
+		} else {
+			ophanTrackerWeb(atomId, 'loop')('play');
+		}
 		setHasTrackedPlay(true);
 	};