Reinstate LoopVideoInArticle

Author: simonbyford

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

@@ -0,0 +1,53 @@
+import type { ArticleFormat } from '../lib/articleFormat';
+import { convertAssetsToVideoSources, getSubtitleAsset } from '../lib/video';
+import type { MediaAtomBlockElement } from '../types/content';
+import { Caption } from './Caption';
+import { LoopVideo } from './LoopVideo.importable';
+
+type LoopVideoInArticleProps = {
+	element: MediaAtomBlockElement;
+	format: ArticleFormat;
+	isMainMedia: boolean;
+};
+
+export const LoopVideoInArticle = ({
+	element,
+	format,
+	isMainMedia,
+}: LoopVideoInArticleProps) => {
+	const posterImageUrl = element.posterImage?.[0]?.url;
+	const caption = element.title;
+
+	if (!posterImageUrl) {
+		return null;
+	}
+
+	return (
+		<>
+			<LoopVideo
+				atomId={element.id}
+				fallbackImage={posterImageUrl}
+				fallbackImageAlt={caption}
+				fallbackImageAspectRatio={'5:4'}
+				fallbackImageLoading={'lazy'}
+				fallbackImageSize={'small'}
+				height={400}
+				linkTo={'Article-embed-MediaAtomBlockElement'}
+				posterImage={posterImageUrl}
+				sources={convertAssetsToVideoSources(element.assets)}
+				subtitleSize={'small'}
+				subtitleSource={getSubtitleAsset(element.assets)}
+				uniqueId={element.id}
+				width={500}
+			/>
+			{!!caption && (
+				<Caption
+					captionText={caption}
+					format={format}
+					isMainMedia={isMainMedia}
+					mediaType="SelfHostedVideo"
+				/>
+			)}
+		</>
+	);
+};

dotcom-rendering/src/lib/renderElement.tsx

@@ -4,7 +4,6 @@ import { AudioAtomWrapper } from '../components/AudioAtomWrapper.importable';
 import { BlockquoteBlockComponent } from '../components/BlockquoteBlockComponent';
 import { CalloutBlockComponent } from '../components/CalloutBlockComponent.importable';
 import { CalloutEmbedBlockComponent } from '../components/CalloutEmbedBlockComponent.importable';
-import { Caption } from '../components/Caption';
 import { CaptionBlockComponent } from '../components/CaptionBlockComponent';
 import { CartoonComponent } from '../components/CartoonComponent';
 import { ChartAtom } from '../components/ChartAtom.importable';
@@ -30,7 +29,7 @@ import { Island } from '../components/Island';
 import { ItemLinkBlockElement } from '../components/ItemLinkBlockElement';
 import { KeyTakeaways } from '../components/KeyTakeaways';
 import { KnowledgeQuizAtom } from '../components/KnowledgeQuizAtom.importable';
-import { LoopVideo } from '../components/LoopVideo.importable';
+import { LoopVideoInArticle } from '../components/LoopVideoInArticle.importable';
 import { MainMediaEmbedBlockComponent } from '../components/MainMediaEmbedBlockComponent';
 import { MapEmbedBlockComponent } from '../components/MapEmbedBlockComponent.importable';
 import { MiniProfiles } from '../components/MiniProfiles';
@@ -75,7 +74,6 @@ import type { FEElement, RoleType, StarRating } from '../types/content';
 import { ArticleDesign, type ArticleFormat } from './articleFormat';
 import type { EditionId } from './edition';
 import { getLargestImageSize } from './image';
-import { convertAssetsToVideoSources, getSubtitleAsset } from './video';
 
 type Props = {
 	format: ArticleFormat;
@@ -508,46 +506,18 @@ export const renderElement = ({
 					- But they will still be Media Atoms
 			*/
 			if (element.videoPlayerFormat === 'Loop') {
-				const posterImageUrl = element.posterImage?.[0]?.url;
 				return (
 					<>
-						{!!posterImageUrl && (
-							<Island
-								priority="critical"
-								defer={{ until: 'visible' }}
-							>
-								<>
-									<LoopVideo
-										atomId={element.id}
-										fallbackImage={posterImageUrl}
-										fallbackImageAlt={element.title}
-										fallbackImageAspectRatio={'5:4'}
-										fallbackImageLoading={'lazy'}
-										fallbackImageSize={'small'}
-										height={400}
-										linkTo={''}
-										posterImage={posterImageUrl}
-										sources={convertAssetsToVideoSources(
-											element.assets,
-										)}
-										subtitleSize={'small'}
-										subtitleSource={getSubtitleAsset(
-											element.assets,
-										)}
-										uniqueId={element.id}
-										width={500}
-									/>
-									{!!element.title && (
-										<Caption
-											captionText={element.title}
-											format={format}
-											isMainMedia={isMainMedia}
-											mediaType="SelfHostedVideo"
-										/>
-									)}
-								</>
-							</Island>
-						)}
+						<Island
+							priority="critical"
+							defer={{ until: 'visible' }}
+						>
+							<LoopVideoInArticle
+								element={element}
+								format={format}
+								isMainMedia={isMainMedia}
+							/>
+						</Island>
 					</>
 				);
 			} else {

dotcom-rendering/src/types/content.ts

@@ -423,7 +423,7 @@ export interface MapBlockElement extends ThirdPartyEmbeddedContent {
 	role?: RoleType;
 }
 
-interface MediaAtomBlockElement {
+export interface MediaAtomBlockElement {
 	_type: 'model.dotcomrendering.pageElements.MediaAtomBlockElement';
 	elementId: string;
 	id: string;