Fix linting etc

Author: RikRootsGuardian

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

@@ -1,11 +1,13 @@
-import { LoopVideo } from './LoopVideo.importable';
 import type { ArticleFormat } from '../lib/articleFormat';
+import type { Source } from '../lib/video';
+import type { VideoAssets } from '../types/content';
 import { Caption } from './Caption';
 import type { Props as CardPictureProps } from './CardPicture';
-import type { Source } from '../lib/video';
+import { LoopVideo } from './LoopVideo.importable';
 import type { SubtitleSize } from './LoopVideoPlayer';
 
 type LoopVideoInArticleProps = {
+	assets: VideoAssets[];
 	atomId: string;
 	caption?: string;
 	fallbackImage: CardPictureProps['mainImage'];
@@ -18,14 +20,36 @@ type LoopVideoInArticleProps = {
 	isMainMedia: boolean;
 	linkTo: string;
 	posterImage: string;
-	sources: Source[];
 	uniqueId: string;
 	width: number;
 	subtitleSource?: string;
-	subtitleSize: SubtitleSize;
+	subtitleSize?: string;
+};
+
+// The looping video player types its `sources` attribute as `Sources`
+// However, looping videos in articles are delivered as media atoms, which type their `assets` as `VideoAssets`
+// Which means that we need to alter the shape of the incoming `assets` to match the requirements of the outgoing `sources`
+const convertAssetsToSources = (assets: VideoAssets[]): Source[] => {
+	return assets.map((asset) => {
+		return {
+			src: asset.url ?? '',
+			mimeType: 'video/mp4',
+		};
+	});
+};
+
+const convertSubtitleSize = (val?: string): SubtitleSize => {
+	if (val == null) {
+		return 'small' as SubtitleSize;
+	}
+	if (['small', 'medium', 'large'].includes(val)) {
+		return val as SubtitleSize;
+	}
+	return 'small' as SubtitleSize;
 };
 
 export const LoopVideoInArticle = ({
+	assets,
 	atomId,
 	caption,
 	fallbackImage,
@@ -38,36 +62,35 @@ export const LoopVideoInArticle = ({
 	isMainMedia,
 	linkTo,
 	posterImage,
-	sources,
+	subtitleSize,
+	subtitleSource,
 	uniqueId,
 	width = 500,
-	subtitleSource,
-	subtitleSize,
 }: LoopVideoInArticleProps) => {
 	return (
 		<>
 			<LoopVideo
-				sources={sources}
 				atomId={atomId}
-				uniqueId={uniqueId}
-				height={height}
-				width={width}
-				posterImage={posterImage}
 				fallbackImage={fallbackImage}
-				fallbackImageSize={fallbackImageSize}
-				fallbackImageLoading={fallbackImageLoading}
 				fallbackImageAlt={fallbackImageAlt}
 				fallbackImageAspectRatio={fallbackImageAspectRatio}
+				fallbackImageLoading={fallbackImageLoading}
+				fallbackImageSize={fallbackImageSize}
+				height={height}
 				linkTo={linkTo}
+				posterImage={posterImage}
+				sources={convertAssetsToSources(assets)}
+				subtitleSize={convertSubtitleSize(subtitleSize)}
 				subtitleSource={subtitleSource}
-				subtitleSize={subtitleSize}
+				uniqueId={uniqueId}
+				width={width}
 			/>
 			{!!caption && (
 				<Caption
 					captionText={caption}
 					format={format}
-					mediaType="SelfHostedVideo"
 					isMainMedia={isMainMedia}
+					mediaType="SelfHostedVideo"
 				/>
 			)}
 		</>

dotcom-rendering/src/components/VideoAtom.tsx

@@ -1,15 +1,16 @@
 import type { ArticleFormat } from '../lib/articleFormat';
+import type { VideoAssets } from '../types/content';
 import { Caption } from './Caption';
 import { MaintainAspectRatio } from './MaintainAspectRatio';
 
-type AssetType = {
-	url: string;
-	mimeType?: string;
-};
+// type AssetType = {
+// 	url: string;
+// 	mimeType?: string;
+// };
 
 interface Props {
 	format: ArticleFormat;
-	assets: AssetType[];
+	assets: VideoAssets[];
 	isMainMedia: boolean;
 	poster?: string;
 	caption?: string;

dotcom-rendering/src/lib/renderElement.tsx

@@ -29,6 +29,7 @@ import { Island } from '../components/Island';
 import { ItemLinkBlockElement } from '../components/ItemLinkBlockElement';
 import { KeyTakeaways } from '../components/KeyTakeaways';
 import { KnowledgeQuizAtom } from '../components/KnowledgeQuizAtom.importable';
+import { LoopVideoInArticle } from '../components/LoopVideoInArticle.importable';
 import { MainMediaEmbedBlockComponent } from '../components/MainMediaEmbedBlockComponent';
 import { MapEmbedBlockComponent } from '../components/MapEmbedBlockComponent.importable';
 import { MiniProfiles } from '../components/MiniProfiles';
@@ -74,8 +75,6 @@ import { ArticleDesign, type ArticleFormat } from './articleFormat';
 import type { EditionId } from './edition';
 import { getLargestImageSize } from './image';
 
-import { LoopVideoInArticle } from '../components/LoopVideoInArticle.importable';
-
 type Props = {
 	format: ArticleFormat;
 	element: FEElement;
@@ -508,27 +507,26 @@ export const renderElement = ({
 					- But they will still be Media Atoms
 			*/
 
-			if (element.videoPlayerFormat === 'Loop') {
-				const updatedSources = element.assets.map((a) => ({
-					src: a.src || a.url,
-					mimeType: a.mimeType,
-				}));
+			if (element?.videoPlayerFormat === 'Loop') {
+				const posterImageExists = !!element.posterImage?.[0]?.url;
 				return (
 					<>
-						{element.posterImage?.[0]?.url && (
+						{posterImageExists && (
 							<Island
 								priority="critical"
 								defer={{ until: 'visible' }}
 							>
 								<LoopVideoInArticle
-									sources={updatedSources}
+									assets={element.assets}
 									atomId={element.id}
 									uniqueId={`${Math.random()}`}
 									height={400}
 									width={500}
-									posterImage={element.posterImage?.[0]?.url}
+									posterImage={
+										element.posterImage?.[0]?.url ?? ''
+									}
 									fallbackImage={
-										element.posterImage?.[0]?.url
+										element.posterImage?.[0]?.url ?? ''
 									}
 									fallbackImageSize="small"
 									fallbackImageLoading="lazy"
@@ -538,6 +536,8 @@ export const renderElement = ({
 									format={format}
 									caption={element.title}
 									isMainMedia={isMainMedia}
+									subtitleSize={element.subtitleSize}
+									subtitleSource={element.subtitleSource}
 								/>
 							</Island>
 						)}

dotcom-rendering/src/types/content.ts

@@ -422,6 +422,9 @@ interface LoopVideoInArticleElement {
 	}[];
 	title?: string;
 	duration?: number;
+	videoPlayerFormat?: string;
+	subtitleSize?: string;
+	subtitleSource?: string;
 }
 
 export interface MapBlockElement extends ThirdPartyEmbeddedContent {
@@ -447,6 +450,9 @@ interface MediaAtomBlockElement {
 	}[];
 	title?: string;
 	duration?: number;
+	videoPlayerFormat?: string;
+	subtitleSize?: string;
+	subtitleSource?: string;
 }
 
 export interface MultiImageBlockElement {
@@ -953,8 +959,8 @@ export interface Image {
 	url: string;
 }
 
-interface VideoAssets {
-	url: string;
+export interface VideoAssets {
+	url?: string;
 	mimeType?: string;
 	fields?: {
 		source?: string;