Handle subtitles asset type

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/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/src/frontend/feFront.ts

@@ -111,6 +111,7 @@ export interface FEMediaAsset {
 	version: number;
 	platform: string;
 	mimeType?: string;
+	assetType: string;
 }
 
 /** @see https://github.com/guardian/frontend/blob/0bf69f55a/common/app/model/content/Atom.scala#L158-L169 */

dotcom-rendering/src/frontend/schemas/feFront.json

@@ -3261,9 +3261,13 @@
                 },
                 "mimeType": {
                     "type": "string"
+                },
+                "assetType": {
+                    "type": "string"
                 }
             },
             "required": [
+                "assetType",
                 "id",
                 "platform",
                 "version"

dotcom-rendering/src/frontend/schemas/feTagPage.json

@@ -1434,9 +1434,13 @@
                 },
                 "mimeType": {
                     "type": "string"
+                },
+                "assetType": {
+                    "type": "string"
                 }
             },
             "required": [
+                "assetType",
                 "id",
                 "platform",
                 "version"

dotcom-rendering/src/model/enhanceCards.test.ts

@@ -10,12 +10,74 @@ describe('Enhance Cards', () => {
 				version: 1,
 				platform: 'Url',
 				mimeType: 'video/mp4',
+				assetType: 'Video',
 			},
 			{
 				id: 'https://guim-example.co.uk/atomID-1.m3u8',
 				version: 1,
 				platform: 'Url',
 				mimeType: 'application/x-mpegURL',
+				assetType: 'Video',
+			},
+		];
+		const mediaAtom: FEMediaAtom = {
+			id: 'atomID',
+			assets,
+			title: 'Example video',
+			duration: 15,
+			source: '',
+			posterImage: { allImages: [] },
+			trailImage: { allImages: [] },
+			expired: false,
+			activeVersion: 1,
+		};
+		const cardTrailImage = '';
+
+		expect(
+			getActiveMediaAtom(videoReplace, mediaAtom, cardTrailImage),
+		).toEqual({
+			atomId: 'atomID',
+			duration: 15,
+			height: 400,
+			image: '',
+			type: 'LoopVideo',
+			sources: [
+				{
+					mimeType: 'application/x-mpegURL',
+					src: 'https://guim-example.co.uk/atomID-1.m3u8',
+				},
+				{
+					mimeType: 'video/mp4',
+					src: 'https://guim-example.co.uk/atomID-1.mp4',
+				},
+			],
+			width: 500,
+		});
+	});
+
+	it('filters out non-video assets', () => {
+		const videoReplace = true;
+		const assets: FEMediaAsset[] = [
+			{
+				id: 'https://guim-example.co.uk/atomID-1.vtt',
+				version: 1,
+				platform: 'Url',
+				mimeType: 'text/vtt',
+				assetType: 'Subtitles',
+			},
+			{
+				id: 'https://guim-example.co.uk/atomID-1.m3u8',
+				version: 1,
+				platform: 'Url',
+				mimeType: 'application/x-mpegURL',
+				assetType: 'Video',
+			},
+			{
+				id: 'https://guim-example.co.uk/atomID-1.mp4',
+				version: 1,
+				platform: 'Url',
+				mimeType: 'video/mp4',
+				assetType: 'Video',
 			},
 		];
 		const mediaAtom: FEMediaAtom = {

dotcom-rendering/src/model/enhanceCards.ts

@@ -200,9 +200,9 @@ export const getActiveMediaAtom = (
 	cardTrailImage?: string,
 ): MainMedia | undefined => {
 	if (mediaAtom) {
-		const assets = mediaAtom.assets.filter(
-			({ version }) => version === mediaAtom.activeVersion,
-		);
+		const assets = mediaAtom.assets
+			.filter((_) => _.assetType === 'Video')
+			.filter(({ version }) => version === mediaAtom.activeVersion);
 		if (!assets.length) return undefined;
 
 		const image = decideMediaAtomImage(