Merge pull request #14414 from guardian/fp/filter-out-m3u8

Filter out m3u8 assets until supported by DCR

Author: Fweddi

dotcom-rendering/src/frontend/feFront.ts

@@ -106,7 +106,7 @@ export type FEFrontCardStyle =
 	| 'DefaultCardstyle';
 
 /** @see https://github.com/guardian/frontend/blob/0bf69f55a/common/app/model/content/Atom.scala#L191-L196 */
-interface FEMediaAsset {
+export interface FEMediaAsset {
 	id: string;
 	version: number;
 	platform: string;

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

@@ -0,0 +1,52 @@
+import type { FEMediaAsset, FEMediaAtom } from '../frontend/feFront';
+import { getActiveMediaAtom } from './enhanceCards';
+
+describe('Enhance Cards', () => {
+	it('filters out m3u8 assets until supported by DCR', () => {
+		const isLoopingVideoTest = true;
+		const videoReplace = true;
+		const assets: FEMediaAsset[] = [
+			{
+				id: 'https://guim-example.co.uk/atomID-1.m3u8',
+				version: 1,
+				platform: 'Url',
+				mimeType: 'application/vnd.apple.mpegurl',
+			},
+			{
+				id: 'https://guim-example.co.uk/atomID-1.mp4',
+				version: 1,
+				platform: 'Url',
+				mimeType: 'video/mp4',
+			},
+		];
+		const mediaAtom: FEMediaAtom = {
+			id: 'atomID',
+			assets,
+			title: 'Example video',
+			duration: 15,
+			source: '',
+			posterImage: { allImages: [] },
+			trailImage: { allImages: [] },
+			expired: false,
+			activeVersion: 1,
+		};
+		const cardTrailImage = '';
+
+		expect(
+			getActiveMediaAtom(
+				isLoopingVideoTest,
+				videoReplace,
+				mediaAtom,
+				cardTrailImage,
+			),
+		).toEqual({
+			atomId: 'atomID',
+			duration: 15,
+			height: 400,
+			image: '',
+			type: 'LoopVideo',
+			videoId: 'https://guim-example.co.uk/atomID-1.mp4',
+			width: 500,
+		});
+	});
+});

dotcom-rendering/src/model/enhanceCards.ts

@@ -192,16 +192,18 @@ const decideMediaAtomImage = (
  * @see https://github.com/guardian/frontend/pull/26247 for inspiration
  */
 
-const getActiveMediaAtom = (
+export const getActiveMediaAtom = (
 	isLoopingVideoTest: boolean,
 	videoReplace: boolean,
 	mediaAtom?: FEMediaAtom,
 	cardTrailImage?: string,
 ): MainMedia | undefined => {
 	if (mediaAtom) {
-		const asset = mediaAtom.assets.find(
-			({ version }) => version === mediaAtom.activeVersion,
-		);
+		const m3u8MimeType = 'application/vnd.apple.mpegurl';
+		const asset = mediaAtom.assets
+			// filter out m3u8 assets, as these are not yet supported by DCR
+			.filter((_) => _.mimeType !== m3u8MimeType)
+			.find(({ version }) => version === mediaAtom.activeVersion);
 
 		const image = decideMediaAtomImage(
 			videoReplace,