Pass in fallback image. Remove poster image.

Author: domlander

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

@@ -3,15 +3,11 @@ import { log } from '@guardian/libs';
 import { space } from '@guardian/source/foundations';
 import { SvgAudio, SvgAudioMute } from '@guardian/source/react-components';
 import { useEffect, useRef, useState } from 'react';
-import type { FEAspectRatio } from '../frontend/feFront';
 import { getZIndex } from '../lib/getZIndex';
 import { useIsInView } from '../lib/useIsInView';
 import { useShouldAdapt } from '../lib/useShouldAdapt';
 import { palette } from '../palette';
-import type { ImageSizeType } from './Card/components/ImageWrapper';
 import { narrowPlayIconWidth, PlayIcon } from './Card/components/PlayIcon';
-import type { Loading } from './CardPicture';
-import { CardPicture } from './CardPicture';
 import { useConfig } from './ConfigContext';
 import { LoopVideoProgressBar } from './LoopVideoProgressBar';
 
@@ -49,33 +45,22 @@ const audioButtonStyles = css`
 	cursor: pointer;
 `;
 
-type ImageProps = {
-	posterImage: string;
-	imageSize: ImageSizeType;
-	imageLoading: Loading;
-	altText?: string;
-	aspectRatio?: FEAspectRatio;
-};
-
-type Props = ImageProps & {
+type Props = {
 	src: string;
 	videoId?: string;
 	width?: number;
 	height?: number;
 	hasAudio?: boolean;
+	fallbackImage: JSX.Element;
 };
 
 export const LoopVideo = ({
 	src,
 	videoId,
-	posterImage,
-	imageSize,
-	imageLoading,
-	altText,
-	aspectRatio,
 	width = 600,
 	height = 360,
 	hasAudio = true,
+	fallbackImage,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -132,15 +117,7 @@ export const LoopVideo = ({
 	if (renderingTarget !== 'Web') return null;
 
 	if (adapted) {
-		return (
-			<CardPicture
-				mainImage={posterImage}
-				imageSize={imageSize}
-				alt={altText}
-				loading={imageLoading}
-				aspectRatio={aspectRatio}
-			/>
-		);
+		return fallbackImage;
 	}
 
 	const handleClick = (event: React.SyntheticEvent) => {
@@ -226,7 +203,6 @@ export const LoopVideo = ({
 				loop={true}
 				muted={isMuted}
 				playsInline={true}
-				poster={posterImage}
 				height={height}
 				width={width}
 				onPlaying={() => {
@@ -241,13 +217,7 @@ export const LoopVideo = ({
 				{/* Ensure webm source is provided */}
 				{/* <source src={webmSrc} type="video/webm"> */}
 				<source src={src} type="video/mp4" />
-				<CardPicture
-					mainImage={posterImage}
-					imageSize={imageSize}
-					alt={altText}
-					loading={imageLoading}
-					aspectRatio={aspectRatio}
-				/>
+				{fallbackImage}
 			</video>
 			{vidRef.current && (
 				<>

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
+import { CardPicture } from './CardPicture';
 import { LoopVideo } from './LoopVideo.importable';
 
 export default {
@@ -13,10 +14,13 @@ export const Default = {
 	name: 'Default',
 	args: {
 		src: 'https://uploads.guim.co.uk/2024/10/01/241001HeleneLoop_2.mp4',
-		posterImage:
-			'https://i.guim.co.uk/img/media/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/91_0_1800_1080/master/1800.jpg?width=465&dpr=1&s=none&crop=5%3A4',
-		imageSize: 'large',
-		imageLoading: 'eager',
+		fallbackImage: (
+			<CardPicture
+				mainImage="https://i.guim.co.uk/img/media/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/91_0_1800_1080/master/1800.jpg?width=465&dpr=1&s=none&crop=5%3A4"
+				imageSize="large"
+				loading="eager"
+			/>
+		),
 	},
 } satisfies StoryObj<typeof LoopVideo>;