Reintroduce m3u8 on web behind a feature switch

Author: abeddow91

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

@@ -121,6 +121,7 @@ export const ShowMore = ({
 			cardInTagPage: false,
 			editionId,
 			discussionApiUrl,
+			enableHlsSupport: true,
 		}).filter((card) => !existingCardLinks.includes(card.url));
 
 	const showMoreContainerId = `show-more-${collectionId}`;

dotcom-rendering/src/lib/video.ts

@@ -8,16 +8,23 @@ export type Source = {
 	mimeType: SupportedVideoFileType;
 };
 
+/**
+ * This is required whilst test m3u8 support
+ */
+export const supportedMP4VideoFileTypes = [
+	'video/mp4', // MP4 format
+] as const;
+
 /**
  * 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;
 
 export type SupportedVideoFileType = (typeof supportedVideoFileTypes)[number];
+
+export type SupportedMP4VideoFileType =
+	(typeof supportedMP4VideoFileTypes)[number];

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

@@ -39,7 +39,7 @@ describe.skip('Enhance Cards', () => {
 		const cardTrailImage = '';
 
 		expect(
-			getActiveMediaAtom(videoReplace, mediaAtom, cardTrailImage),
+			getActiveMediaAtom(videoReplace, true, mediaAtom, cardTrailImage),
 		).toEqual({
 			atomId: 'atomID',
 			duration: 15,
@@ -99,7 +99,7 @@ describe.skip('Enhance Cards', () => {
 		const cardTrailImage = '';
 
 		expect(
-			getActiveMediaAtom(videoReplace, mediaAtom, cardTrailImage),
+			getActiveMediaAtom(videoReplace, true, mediaAtom, cardTrailImage),
 		).toEqual({
 			atomId: 'atomID',
 			duration: 15,

dotcom-rendering/src/model/enhanceCards.ts

@@ -1,6 +1,7 @@
 import { isUndefined } from '@guardian/libs';
 import type {
 	FEFrontCard,
+	FEMediaAsset,
 	FEMediaAtom,
 	FESupportingContent,
 } from '../frontend/feFront';
@@ -14,8 +15,14 @@ import type { EditionId } from '../lib/edition';
 import type { Group } from '../lib/getDataLinkName';
 import { getDataLinkNameCard } from '../lib/getDataLinkName';
 import { getLargestImageSize } from '../lib/image';
-import type { SupportedVideoFileType } from '../lib/video';
-import { supportedVideoFileTypes } from '../lib/video';
+import type {
+	SupportedVideoFileType,
+	SupportedMP4VideoFileType,
+} from '../lib/video';
+import {
+	supportedMP4VideoFileTypes,
+	supportedVideoFileTypes,
+} from '../lib/video';
 import type { Image } from '../types/content';
 import type {
 	DCRFrontCard,
@@ -196,6 +203,7 @@ const decideMediaAtomImage = (
 
 export const getActiveMediaAtom = (
 	videoReplace: boolean,
+	enableHlsSupport: boolean,
 	mediaAtom?: FEMediaAtom,
 	cardTrailImage?: string,
 ): MainMedia | undefined => {
@@ -220,10 +228,13 @@ export const getActiveMediaAtom = (
 		 * Therefore, we check the platform of the first asset and assume the rest are the same.
 		 */
 		if (assets[0]?.platform === 'Url') {
+			const supportedFileTypes = enableHlsSupport
+				? supportedVideoFileTypes
+				: supportedMP4VideoFileTypes;
 			/**
 			 * Take one source for each supported video file type.
 			 */
-			const sources = supportedVideoFileTypes.reduce<typeof assets>(
+			const sources = supportedFileTypes.reduce<typeof assets>(
 				(acc, type) => {
 					const source = assets.find(
 						({ mimeType }) => mimeType === type,
@@ -239,13 +250,18 @@ export const getActiveMediaAtom = (
 				({ assetType }) => assetType === 'Subtitles',
 			);
 
+			const getMimeType = (source: FEMediaAsset) =>
+				enableHlsSupport
+					? (source.mimeType as SupportedVideoFileType)
+					: (source.mimeType as SupportedMP4VideoFileType);
+
 			return {
 				type: 'SelfHostedVideo',
 				videoStyle: 'Loop',
 				atomId: mediaAtom.id,
 				sources: sources.map((source) => ({
 					src: source.id,
-					mimeType: source.mimeType as SupportedVideoFileType,
+					mimeType: getMimeType(source),
 				})),
 				subtitleSource: subtitleAsset?.id,
 				duration: mediaAtom.duration ?? 0,
@@ -281,6 +297,7 @@ export const getActiveMediaAtom = (
 
 const decideMedia = (
 	format: ArticleFormat,
+	enableHlsSupport: boolean,
 	showMainVideo?: boolean,
 	mediaAtom?: FEMediaAtom,
 	galleryCount: number = 0,
@@ -293,7 +310,12 @@ const decideMedia = (
 	// 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);
+		return getActiveMediaAtom(
+			!!videoReplace,
+			enableHlsSupport,
+			mediaAtom,
+			cardImage,
+		);
 	}
 
 	switch (format.design) {
@@ -308,7 +330,12 @@ const decideMedia = (
 			};
 
 		case ArticleDesign.Video: {
-			return getActiveMediaAtom(false, mediaAtom, cardImage);
+			return getActiveMediaAtom(
+				false,
+				enableHlsSupport,
+				mediaAtom,
+				cardImage,
+			);
 		}
 
 		default:
@@ -325,6 +352,7 @@ export const enhanceCards = (
 		pageId,
 		discussionApiUrl,
 		stripBranding = false,
+		enableHlsSupport = false,
 	}: {
 		cardInTagPage: boolean;
 		/** Used for the data link name to indicate card position in container */
@@ -334,6 +362,7 @@ export const enhanceCards = (
 		discussionApiUrl: string;
 		/** We strip branding from cards if the branding will appear at the collection level instead */
 		stripBranding?: boolean;
+		enableHlsSupport: boolean;
 	},
 ): DCRFrontCard[] =>
 	collections.map((faciaCard, index) => {
@@ -378,6 +407,7 @@ export const enhanceCards = (
 
 		const mainMedia = decideMedia(
 			format,
+			enableHlsSupport,
 			faciaCard.properties.showMainVideo ??
 				faciaCard.properties.mediaSelect?.showMainVideo,
 			faciaCard.mediaAtom ??

dotcom-rendering/src/model/enhanceCollections.ts

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

dotcom-rendering/src/model/groupCards.ts

@@ -32,6 +32,7 @@ export const groupCards = (
 	editionId: EditionId,
 	discussionApiUrl: string,
 	stripBranding: boolean = false,
+	enableHlsSupport: boolean,
 ): DCRGroupedTrails => {
 	switch (container) {
 		case 'dynamic/fast':
@@ -49,20 +50,23 @@ export const groupCards = (
 					editionId,
 					discussionApiUrl,
 					stripBranding,
+					enableHlsSupport,
 				}),
 				veryBig: enhanceCards(veryBig, {
 					cardInTagPage: false,
 					offset: huge.length,
 					editionId,
 					discussionApiUrl,
 					stripBranding,
+					enableHlsSupport,
 				}),
 				big: enhanceCards(big, {
 					cardInTagPage: false,
 					offset: huge.length + veryBig.length,
 					editionId,
 					discussionApiUrl,
 					stripBranding,
+					enableHlsSupport,
 				}),
 				standard: enhanceCards(
 					// Backfilled cards will always be treated as 'standard' cards
@@ -74,6 +78,7 @@ export const groupCards = (
 						offset: huge.length + veryBig.length + big.length,
 						editionId,
 						discussionApiUrl,
+						enableHlsSupport,
 					},
 				),
 			};
@@ -96,6 +101,7 @@ export const groupCards = (
 				discussionApiUrl,
 				offset,
 				stripBranding,
+				enableHlsSupport,
 			});
 
 			return {
@@ -122,6 +128,7 @@ export const groupCards = (
 				discussionApiUrl,
 				offset,
 				stripBranding,
+				enableHlsSupport,
 			});
 
 			return {

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

@@ -45,6 +45,7 @@ const enhanceFront = (body: unknown): Front => {
 						.editionBrandings,
 					data.editionId,
 				),
+				enableHlsSupport: !!data.config.switches.enableHlsSupport,
 			}),
 		},
 		mostViewed: data.mostViewed.map((trail) => decideTrail(trail)),
@@ -98,6 +99,7 @@ const enhanceTagPage = (body: unknown): TagPage => {
 		discussionApiUrl: data.config.discussionApiUrl,
 		editionId: data.editionId,
 		stripBranding: !!tagPageBranding,
+		enableHlsSupport: !!data.config.switches.enableHlsSupport,
 	});
 
 	const speed = getSpeedFromTrails(data.contents);