Filter out m3u8 files whilst a chrome HLS bug is investigated (#14788)

* Filter out m3u8 files whilst a chrome hls bug is investigated
https://issues.chromium.org/issues/454630434

* skip failing tests

* Reordering

* Revert skipping tests

* Filter the m3u8 files from supportedVideoFileTypes as this is considered the source of truth for loop video file types

* Update schemas as supportedVideoFileTypes type has been changed

Author: abeddow91

dotcom-rendering/src/components/LoopVideo.stories.tsx

@@ -38,22 +38,22 @@ export const Default: Story = {
 	},
 };
 
-export const WithM3U8File: Story = {
-	name: 'With M3U8 file',
-	args: {
-		...Default.args,
-		sources: [
-			{
-				src: 'https://uploads.guimcode.co.uk/2025/09/01/Loop__Japan_fireball--ace3fcf6-1378-41db-9d21-f3fc07072ab2-1.10.m3u8',
-				mimeType: 'application/x-mpegURL',
-			},
-			{
-				src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
-				mimeType: 'video/mp4',
-			},
-		],
-	},
-};
+// export const WithM3U8File: Story = {
+// 	name: 'With M3U8 file',
+// 	args: {
+// 		...Default.args,
+// 		sources: [
+// 			{
+// 				src: 'https://uploads.guimcode.co.uk/2025/09/01/Loop__Japan_fireball--ace3fcf6-1378-41db-9d21-f3fc07072ab2-1.10.m3u8',
+// 				mimeType: 'application/x-mpegURL',
+// 			},
+// 			{
+// 				src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
+// 				mimeType: 'video/mp4',
+// 			},
+// 		],
+// 	},
+// };
 
 export const Without5to4Ratio: Story = {
 	name: 'Without 5:4 aspect ratio',

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

@@ -5309,7 +5309,8 @@
                                         "type": "string"
                                     },
                                     "mimeType": {
-                                        "$ref": "#/definitions/SupportedVideoFileType"
+                                        "type": "string",
+                                        "const": "video/mp4"
                                     }
                                 },
                                 "required": [
@@ -5342,14 +5343,6 @@
                 }
             ]
         },
-        "SupportedVideoFileType": {
-            "enum": [
-                "application/vnd.apple.mpegurl",
-                "application/x-mpegURL",
-                "video/mp4"
-            ],
-            "type": "string"
-        },
         "Audio": {
             "allOf": [
                 {

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

@@ -3941,7 +3941,8 @@
                                         "type": "string"
                                     },
                                     "mimeType": {
-                                        "$ref": "#/definitions/SupportedVideoFileType"
+                                        "type": "string",
+                                        "const": "video/mp4"
                                     }
                                 },
                                 "required": [
@@ -3974,14 +3975,6 @@
                 }
             ]
         },
-        "SupportedVideoFileType": {
-            "enum": [
-                "application/vnd.apple.mpegurl",
-                "application/x-mpegURL",
-                "video/mp4"
-            ],
-            "type": "string"
-        },
         "Audio": {
             "allOf": [
                 {

dotcom-rendering/src/lib/video.ts

@@ -10,10 +10,13 @@ export type Source = {
 
 /**
  * Order is important here - the browser will use the first type it supports.
+ * 'application/x-mpegURL' & 'application/vnd.apple.mpegurl' have been filtered out
+ * whilst a hls chrome bug is investigated
+ * https://issues.chromium.org/issues/454630434
  */
 export const supportedVideoFileTypes = [
-	'application/x-mpegURL', // HLS format
-	'application/vnd.apple.mpegurl', // Alternative HLS format
+	// 'application/x-mpegURL', // HLS format
+	// 'application/vnd.apple.mpegurl', // Alternative HLS format
 	'video/mp4', // MP4 format
 ] as const;
 

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

@@ -1,6 +1,11 @@
 import type { FEMediaAsset, FEMediaAtom } from '../frontend/feFront';
 import { getActiveMediaAtom } from './enhanceCards';
 
+/**
+ * Why has this test suite been skipped?
+ *
+ * M3U8s have been disabled whilst a chrome hls bug is investigated.
+ */
 describe.skip('Enhance Cards', () => {
 	it('prioritises m3u8 assets over MP4 assets', () => {
 		const videoReplace = true;

dotcom-rendering/src/model/enhanceCards.ts

@@ -198,25 +198,11 @@ export const getActiveMediaAtom = (
 	videoReplace: boolean,
 	mediaAtom?: FEMediaAtom,
 	cardTrailImage?: string,
-	isLoopVideoLoadTest?: boolean,
 ): MainMedia | undefined => {
 	if (mediaAtom) {
-		let assets;
-		if (isLoopVideoLoadTest) {
-			/* temporarily filter out m3u8 files */
-			assets = mediaAtom.assets
-				.filter((_) => !m3u8MimeType.includes(_.mimeType ?? ''))
-				.filter(({ version }) => version === mediaAtom.activeVersion);
-		} else {
-			assets = mediaAtom.assets.filter(
-				({ version }) => version === mediaAtom.activeVersion,
-			);
-		}
-
-		const m3u8MimeType = [
-			'application/vnd.apple.mpegurl',
-			'application/x-mpegURL',
-		];
+		const assets = mediaAtom.assets.filter(
+			({ version }) => version === mediaAtom.activeVersion,
+		);
 
 		const videoAssets = assets.filter(
 			({ assetType }) => assetType === 'Video',
@@ -297,17 +283,11 @@ const decideMedia = (
 	imageHide?: boolean,
 	videoReplace?: boolean,
 	cardImage?: string,
-	isLoopVideoLoadTest?: boolean,
 ): MainMedia | undefined => {
 	// If the showVideo toggle is enabled in the fronts tool,
 	// we should return the active mediaAtom regardless of the design
 	if (!!showMainVideo || !!videoReplace) {
-		return getActiveMediaAtom(
-			!!videoReplace,
-			mediaAtom,
-			cardImage,
-			isLoopVideoLoadTest,
-		);
+		return getActiveMediaAtom(!!videoReplace, mediaAtom, cardImage);
 	}
 
 	switch (format.design) {
@@ -322,12 +302,7 @@ const decideMedia = (
 			};
 
 		case ArticleDesign.Video: {
-			return getActiveMediaAtom(
-				false,
-				mediaAtom,
-				cardImage,
-				isLoopVideoLoadTest,
-			);
+			return getActiveMediaAtom(false, mediaAtom, cardImage);
 		}
 
 		default:
@@ -344,7 +319,6 @@ export const enhanceCards = (
 		pageId,
 		discussionApiUrl,
 		stripBranding = false,
-		isLoopVideoLoadTest,
 	}: {
 		cardInTagPage: boolean;
 		/** Used for the data link name to indicate card position in container */
@@ -354,7 +328,6 @@ export const enhanceCards = (
 		discussionApiUrl: string;
 		/** We strip branding from cards if the branding will appear at the collection level instead */
 		stripBranding?: boolean;
-		isLoopVideoLoadTest?: boolean;
 	},
 ): DCRFrontCard[] =>
 	collections.map((faciaCard, index) => {
@@ -410,7 +383,6 @@ export const enhanceCards = (
 			faciaCard.display.imageHide,
 			faciaCard.properties.mediaSelect?.videoReplace,
 			imageSrc,
-			isLoopVideoLoadTest,
 		);
 
 		return {

dotcom-rendering/src/model/enhanceCollections.ts

@@ -65,7 +65,6 @@ export const enhanceCollections = ({
 	frontBranding,
 	onPageDescription,
 	isOnPaidContentFront,
-	isLoopVideoLoadTest,
 }: {
 	collections: FECollection[];
 	editionId: EditionId;
@@ -74,7 +73,6 @@ export const enhanceCollections = ({
 	frontBranding: Branding | undefined;
 	onPageDescription?: string;
 	isOnPaidContentFront?: boolean;
-	isLoopVideoLoadTest?: boolean;
 }): DCRCollectionType[] => {
 	const indexToShowFrontBranding =
 		findCollectionSuitableForFrontBranding(collections);
@@ -135,21 +133,18 @@ export const enhanceCollections = ({
 				editionId,
 				discussionApiUrl,
 				stripBrandingFromCards,
-				isLoopVideoLoadTest,
 			),
 			curated: enhanceCards(collection.curated, {
 				cardInTagPage: false,
 				editionId,
 				discussionApiUrl,
 				stripBranding: stripBrandingFromCards,
-				isLoopVideoLoadTest,
 			}),
 			backfill: enhanceCards(collection.backfill, {
 				cardInTagPage: false,
 				editionId,
 				discussionApiUrl,
 				stripBranding: stripBrandingFromCards,
-				isLoopVideoLoadTest,
 			}),
 			treats: enhanceTreats(
 				collection.treats,

dotcom-rendering/src/model/groupCards.ts

@@ -32,7 +32,6 @@ export const groupCards = (
 	editionId: EditionId,
 	discussionApiUrl: string,
 	stripBranding: boolean = false,
-	isLoopVideoLoadTest?: boolean,
 ): DCRGroupedTrails => {
 	switch (container) {
 		case 'dynamic/fast':
@@ -97,7 +96,6 @@ export const groupCards = (
 				discussionApiUrl,
 				offset,
 				stripBranding,
-				isLoopVideoLoadTest,
 			});
 
 			return {
@@ -124,7 +122,6 @@ export const groupCards = (
 				discussionApiUrl,
 				offset,
 				stripBranding,
-				isLoopVideoLoadTest,
 			});
 
 			return {

dotcom-rendering/src/server/handler.front.web.ts

@@ -45,8 +45,6 @@ const enhanceFront = (body: unknown): Front => {
 						.editionBrandings,
 					data.editionId,
 				),
-				isLoopVideoLoadTest:
-					data.config.abTests.LoopVideoLoadVariant === 'variant',
 			}),
 		},
 		mostViewed: data.mostViewed.map((trail) => decideTrail(trail)),