Merge pull request #14210 from guardian/doml/loop-video-fix-fallback

Fix Loop Video fallback image

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -895,27 +895,21 @@ export const Card = ({
 						)}
 						{media.type === 'loop-video' && (
 							<Island
-								priority="feature"
+								priority="critical"
 								defer={{ until: 'visible' }}
 							>
 								<LoopVideo
 									src={media.mainMedia.videoId}
 									height={media.mainMedia.height}
 									width={media.mainMedia.width}
 									image={media.mainMedia.image ?? ''}
-									fallbackImageComponent={
-										<CardPicture
-											mainImage={
-												media.mainMedia.image ?? ''
-											}
-											imageSize={imageSize}
-											loading={imageLoading}
-											alt={media.imageAltText}
-											aspectRatio={aspectRatio}
-										/>
-									}
 									uniqueId={uniqueId}
 									atomId={media.mainMedia.atomId}
+									fallbackImage={media.mainMedia.image ?? ''}
+									fallbackImageSize={imageSize}
+									fallbackImageLoading={imageLoading}
+									fallbackImageAlt={media.imageAltText}
+									fallbackImageAspectRatio="5:4"
 								/>
 							</Island>
 						)}

dotcom-rendering/src/components/CardPicture.tsx

@@ -9,7 +9,7 @@ import { generateSources, getFallbackSource } from './Picture';
 
 export type Loading = NonNullable<ImgHTMLAttributes<unknown>['loading']>;
 
-type Props = {
+export type Props = {
 	imageSize: ImageSizeType;
 	mainImage: string;
 	loading: Loading;

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

@@ -14,6 +14,7 @@ import {
 	customLoopPlayAudioEventName,
 	customYoutubePlayEventName,
 } from '../lib/video';
+import { CardPicture, type Props as CardPictureProps } from './CardPicture';
 import { useConfig } from './ConfigContext';
 import type { PLAYER_STATES, PlayerStates } from './LoopVideoPlayer';
 import { LoopVideoPlayer } from './LoopVideoPlayer';
@@ -43,7 +44,11 @@ type Props = {
 	width: number;
 	height: number;
 	image: string;
-	fallbackImageComponent: JSX.Element;
+	fallbackImage: CardPictureProps['mainImage'];
+	fallbackImageSize: CardPictureProps['imageSize'];
+	fallbackImageLoading: CardPictureProps['loading'];
+	fallbackImageAlt: CardPictureProps['alt'];
+	fallbackImageAspectRatio: CardPictureProps['aspectRatio'];
 };
 
 export const LoopVideo = ({
@@ -53,7 +58,11 @@ export const LoopVideo = ({
 	width,
 	height,
 	image,
-	fallbackImageComponent,
+	fallbackImage,
+	fallbackImageSize,
+	fallbackImageLoading,
+	fallbackImageAlt,
+	fallbackImageAspectRatio,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -141,6 +150,16 @@ export const LoopVideo = ({
 		}
 	};
 
+	const FallbackImageComponent = (
+		<CardPicture
+			mainImage={fallbackImage}
+			imageSize={fallbackImageSize}
+			loading={fallbackImageLoading}
+			aspectRatio={fallbackImageAspectRatio}
+			alt={fallbackImageAlt}
+		/>
+	);
+
 	/**
 	 * Setup.
 	 *
@@ -333,7 +352,9 @@ export const LoopVideo = ({
 
 	if (renderingTarget !== 'Web') return null;
 
-	if (adapted) return fallbackImageComponent;
+	if (adapted) {
+		return FallbackImageComponent;
+	}
 
 	const handlePlayPauseClick = (event: React.SyntheticEvent) => {
 		event.preventDefault();
@@ -433,7 +454,7 @@ export const LoopVideo = ({
 				width={width}
 				height={height}
 				posterImage={posterImage}
-				fallbackImageComponent={fallbackImageComponent}
+				FallbackImageComponent={FallbackImageComponent}
 				currentTime={currentTime}
 				setCurrentTime={setCurrentTime}
 				ref={vidRef}

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

@@ -1,7 +1,6 @@
 import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
-import { CardPicture } from './CardPicture';
 import { LoopVideo } from './LoopVideo.importable';
 
 export default {
@@ -21,24 +20,18 @@ export const Default = {
 	args: {
 		src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
 		uniqueId: 'test-video-1',
+		atomId: 'test-atom-1',
 		height: 720,
 		width: 900,
 		image: 'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
-		fallbackImageComponent: (
-			<CardPicture
-				mainImage="https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg"
-				imageSize="large"
-				loading="eager"
-			/>
-		),
+		fallbackImage: '',
 	},
 } satisfies StoryObj<typeof LoopVideo>;
 
 export const Without5to4Ratio = {
 	name: 'Without 5:4 aspect ratio',
 	args: {
 		...Default.args,
-
 		src: 'https://uploads.guim.co.uk/2024/10/01/241001HeleneLoop_2.mp4',
 		height: 1080,
 		width: 1920,

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -1,7 +1,12 @@
 import { css } from '@emotion/react';
 import { space } from '@guardian/source/foundations';
 import type { IconProps } from '@guardian/source/react-components';
-import type { Dispatch, SetStateAction, SyntheticEvent } from 'react';
+import type {
+	Dispatch,
+	ReactElement,
+	SetStateAction,
+	SyntheticEvent,
+} from 'react';
 import { forwardRef } from 'react';
 import { palette } from '../palette';
 import { narrowPlayIconWidth, PlayIcon } from './Card/components/PlayIcon';
@@ -66,7 +71,7 @@ type Props = {
 	uniqueId: string;
 	width: number;
 	height: number;
-	fallbackImageComponent: JSX.Element;
+	FallbackImageComponent: ReactElement;
 	isPlayable: boolean;
 	setIsPlayable: Dispatch<SetStateAction<boolean>>;
 	playerState: PlayerStates;
@@ -95,7 +100,7 @@ export const LoopVideoPlayer = forwardRef(
 			uniqueId,
 			width,
 			height,
-			fallbackImageComponent,
+			FallbackImageComponent,
 			posterImage,
 			isPlayable,
 			setIsPlayable,
@@ -154,7 +159,7 @@ export const LoopVideoPlayer = forwardRef(
 					{/* Only mp4 is currently supported. Assumes the video file type is mp4. */}
 					{/* The start time is set to 1ms so that Safari will autoplay the video */}
 					<source src={`${src}#t=0.001`} type="video/mp4" />
-					{fallbackImageComponent}
+					{FallbackImageComponent}
 				</video>
 				{ref && 'current' in ref && ref.current && isPlayable && (
 					<>