Merge branch 'main' into jlk/new-ab-testing-definitions

Author: GHaberis

.github/CODEOWNERS

@@ -20,6 +20,7 @@
 /dotcom-rendering/src/client/userFeatures/      @guardian/supporter-revenue-stream
 /dotcom-rendering/src/components/AdBlock*       @guardian/commercial-dev
 /dotcom-rendering/src/components/AdSlot*        @guardian/commercial-dev
+/dotcom-rendering/src/components/Labs*       	@guardian/commercial-dev
 /dotcom-rendering/src/components/AdP*           @guardian/commercial-dev
 /dotcom-rendering/src/components/marketing/     @guardian/growth
 /dotcom-rendering/src/server/                   @guardian/dotcom-platform

apps-rendering/package.json

@@ -41,11 +41,11 @@
 		"@emotion/jest": "11.13.0",
 		"@emotion/react": "11.14.0",
 		"@emotion/server": "11.11.0",
-		"@guardian/apps-rendering-api-models": "11.0.0",
+		"@guardian/apps-rendering-api-models": "13.0.1",
 		"@guardian/bridget": "7.0.0",
 		"@guardian/cdk": "61.4.0",
-		"@guardian/content-api-models": "26.0.0",
-		"@guardian/content-atom-model": "4.0.1",
+		"@guardian/content-api-models": "31.0.0",
+		"@guardian/content-atom-model": "6.1.0",
 		"@guardian/eslint-config": "7.0.1",
 		"@guardian/eslint-config-typescript": "9.0.1",
 		"@guardian/libs": "22.0.0",

apps-rendering/src/atoms.test.ts

@@ -653,6 +653,7 @@ describe('parseAtom', () => {
 		let atoms: Atoms;
 		let media: Atom;
 		let mediaAtom: MediaAtom;
+		const assetVersion = new Int64(1);
 
 		beforeEach(() => {
 			blockElement.contentAtomTypeData = {
@@ -662,10 +663,16 @@ describe('parseAtom', () => {
 			mediaAtom = {
 				title: '',
 				assets: [
+					{
+						assetType: AssetType.SUBTITLES,
+						id: 'subtitles-asset-id',
+						version: assetVersion,
+						platform: Platform.YOUTUBE,
+					},
 					{
 						assetType: AssetType.VIDEO,
-						id: 'asset-id',
-						version: new Int64(1),
+						id: 'video-asset-id',
+						version: assetVersion,
 						platform: Platform.YOUTUBE,
 					},
 				],
@@ -726,7 +733,7 @@ describe('parseAtom', () => {
 					posterUrl: 'poster-url',
 					caption: some(frag),
 					duration: some(1000),
-					videoId: 'asset-id',
+					videoId: 'video-asset-id',
 					id: atomId,
 					title: '',
 				}),

apps-rendering/src/atoms.ts

@@ -8,6 +8,8 @@ import { isValidDate } from 'date';
 import type { Int64 } from 'thrift';
 import type { DocParser } from 'parserContext';
 import { Result } from 'result';
+import type { MediaAtom } from '@guardian/content-atom-model/media/mediaAtom';
+import { AssetType } from '@guardian/content-atom-model/media/assetType';
 
 interface TimelineEvent {
 	title: string;
@@ -248,10 +250,12 @@ function parseAtom(
 				return Result.err(`No atom matched this id: ${id}`);
 			}
 
+			const mediaAtom: MediaAtom = atom.data.media;
 			const { posterUrl, duration, assets, activeVersion, title } =
-				atom.data.media;
+				mediaAtom;
 			const videoId = assets.find(
 				(asset) =>
+					asset.assetType === AssetType.VIDEO &&
 					asset.version.toNumber() === activeVersion?.toNumber(),
 			)?.id;
 			const caption = docParser(title);

apps-rendering/src/components/Callout/calloutComponents.tsx

@@ -22,7 +22,7 @@ export const Disclaimer = () => (
 		will only use the data you provide us for the purpose of the feature and
 		we will delete any personal data when we no longer require it for this
 		purpose. For true anonymity please use our{' '}
-		<a href="https://www.theguardian.com/securedrop">SecureDrop</a> service
+		<a href="https://www.theguardian.com/tips">Secure Messaging</a> service
 		instead.
 	</div>
 );

apps-rendering/src/components/Callout/calloutContact.tsx

@@ -76,10 +76,10 @@ const Disclaimer = ({ contacts }: { contacts: Contact[] }) => {
 		</span>
 	);
 
-	const secureDropText = (
+	const secureMessagingText = (
 		<span css={[info, calloutLinkContainer]}>
 			For true anonymity please use our{' '}
-			<a href="https://www.theguardian.com/securedrop">SecureDrop</a>{' '}
+			<a href="https://www.theguardian.com/tips">Secure Messaging</a>{' '}
 			service instead.
 		</span>
 	);
@@ -88,7 +88,7 @@ const Disclaimer = ({ contacts }: { contacts: Contact[] }) => {
 		<>
 			{contactText}
 			{contacts.some((c) => !!c.guidance) && guidanceText}{' '}
-			{secureDropText}
+			{secureMessagingText}
 		</>
 	);
 };

apps-rendering/src/video.test.ts

@@ -22,7 +22,8 @@ describe('parseVideo', () => {
 	let mediaAtom: MediaAtom;
 	const atomId = 'atomId2';
 	const posterUrl = 'poster-url';
-	const assetId = 'asset-id';
+	const videoAssetId = 'video-asset-id';
+	const subtitlesAssetId = 'subtitles-asset-id';
 	const mediaAtomTitle = 'mediaTitle';
 	const assetVersion = new Int64(2);
 
@@ -43,9 +44,15 @@ describe('parseVideo', () => {
 
 		mediaAtom = {
 			assets: [
+				{
+					assetType: AssetType.SUBTITLES,
+					id: subtitlesAssetId,
+					version: assetVersion,
+					platform: Platform.YOUTUBE,
+				},
 				{
 					assetType: AssetType.VIDEO,
-					id: assetId,
+					id: videoAssetId,
 					version: assetVersion,
 					platform: Platform.YOUTUBE,
 				},
@@ -79,7 +86,7 @@ describe('parseVideo', () => {
 	test('returns video', () => {
 		const expected = Optional.some({
 			posterUrl: posterUrl,
-			videoId: assetId,
+			videoId: videoAssetId,
 			duration: undefined,
 			atomId: atomId,
 			title: mediaAtomTitle,

apps-rendering/src/video.ts

@@ -1,6 +1,8 @@
 import type { Atoms } from '@guardian/content-api-models/v1/atoms';
 import type { BlockElement } from '@guardian/content-api-models/v1/blockElement';
 import { Optional } from 'optional';
+import type { MediaAtom } from '@guardian/content-atom-model/media/mediaAtom';
+import { AssetType } from '@guardian/content-atom-model/media/assetType';
 
 interface Video {
 	posterUrl: string;
@@ -23,10 +25,12 @@ const parseVideo =
 		if (atom?.data.kind !== 'media') {
 			return Optional.none();
 		}
-
-		const { posterUrl, duration, assets, activeVersion, title } =
-			atom.data.media;
-		const videoId = assets.find(
+		const mediaAtom: MediaAtom = atom.data.media;
+		const { posterUrl, duration, assets, activeVersion, title } = mediaAtom;
+		const videoAssets = assets.filter(
+			(asset) => asset.assetType === AssetType.VIDEO,
+		);
+		const videoId = videoAssets.find(
 			(asset) => asset.version.toNumber() === activeVersion?.toNumber(),
 		)?.id;
 

dotcom-rendering/package.json

@@ -39,12 +39,12 @@
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
 		"@guardian/libs": "26.0.0",
-		"@guardian/ophan-tracker-js": "2.3.2",
+		"@guardian/ophan-tracker-js": "2.6.1",
 		"@guardian/react-crossword": "6.3.0",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "11.3.0",
 		"@guardian/source-development-kitchen": "18.1.1",
-		"@guardian/support-dotcom-components": "7.7.0",
+		"@guardian/support-dotcom-components": "7.8.1",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
 		"@sentry/browser": "10.10.0",
@@ -91,7 +91,6 @@
 		"@types/sanitize-html": "2.11.0",
 		"@types/scheduler": "0.16.2",
 		"@types/semver": "7.5.6",
-		"@types/tough-cookie": "4.0.2",
 		"@types/trusted-types": "2.0.7",
 		"@types/twitter-for-web": "0.0.6",
 		"@types/webpack-bundle-analyzer": "4.7.0",
@@ -105,7 +104,6 @@
 		"body-parser": "1.20.3",
 		"browserslist": "4.24.4",
 		"buffer": "6.0.3",
-		"chalk": "4.1.2",
 		"clean-css": "5.3.3",
 		"compare-versions": "6.1.0",
 		"compression": "1.7.4",
@@ -162,7 +160,6 @@
 		"swc-loader": "0.2.6",
 		"swr": "1.3.0",
 		"to-string-loader": "1.2.0",
-		"tough-cookie": "4.1.3",
 		"trusted-types": "2.0.0",
 		"ts-loader": "9.5.2",
 		"ts-unused-exports": "10.1.0",

dotcom-rendering/src/client/ophan/recordInitialPageEvents.ts

@@ -1,6 +1,11 @@
 import { type EditionId } from '../../lib/edition';
 import type { RenderingTarget } from '../../types/renderingTarget';
-import { getOphan, recordExperiences, recordPerformance } from './ophan';
+import {
+	getOphan,
+	recordExperiences,
+	recordPerformance,
+	submitComponentEvent,
+} from './ophan';
 
 const getEditionForOphan = (editionId: EditionId) => {
 	switch (editionId) {
@@ -29,4 +34,20 @@ export const recordInitialPageEvents = async (
 		void recordPerformance(renderingTarget);
 		window.removeEventListener('load', load, false);
 	});
+
+	window.addEventListener('pageshow', (event: PageTransitionEvent) => {
+		if (!event.persisted) {
+			return;
+		}
+
+		void submitComponentEvent(
+			{
+				action: 'VIEW',
+				component: {
+					componentType: 'BF_CACHE',
+				},
+			},
+			renderingTarget,
+		);
+	});
 };