Poster image must be provided

Author: domlander

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

@@ -20,19 +20,19 @@ type Props = {
 	videoId: string;
 	width?: number;
 	height?: number;
+	posterImage: string;
+	fallbackImageComponent: JSX.Element;
 	hasAudio?: boolean;
-	fallbackImage: JSX.Element;
-	posterImage?: string;
 };
 
 export const LoopVideo = ({
 	src,
 	videoId,
 	width = 600,
 	height = 360,
-	hasAudio = true,
-	fallbackImage,
 	posterImage,
+	fallbackImageComponent,
+	hasAudio = true,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -60,18 +60,17 @@ export const LoopVideo = ({
 		if (!vidRef.current) return;
 
 		if (isInView) {
-			if (!hasBeenInView) {
-				if (
-					window.matchMedia('(prefers-reduced-motion: reduce)')
-						.matches
-				) {
-					setPrefersReducedMotion(true);
-					return;
-				}
-				// When the video first comes into view, it should autoplay
-				setIsPlaying(true);
-				void vidRef.current.play();
+			// We only want to autoplay the first time the video comes into view.
+			if (hasBeenInView) return;
+
+			if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+				setPrefersReducedMotion(true);
+				return;
 			}
+
+			setIsPlaying(true);
+			void vidRef.current.play();
+
 			setHasBeenInView(true);
 		}
 
@@ -83,7 +82,7 @@ export const LoopVideo = ({
 
 	if (renderingTarget !== 'Web') return null;
 
-	if (adapted) return fallbackImage;
+	if (adapted) return fallbackImageComponent;
 
 	const handleClick = (event: React.SyntheticEvent) => {
 		event.preventDefault();
@@ -162,7 +161,7 @@ export const LoopVideo = ({
 				width={width}
 				height={height}
 				hasAudio={hasAudio}
-				fallbackImage={fallbackImage}
+				fallbackImageComponent={fallbackImageComponent}
 				currentTime={currentTime}
 				setCurrentTime={setCurrentTime}
 				ref={vidRef}

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

@@ -25,7 +25,7 @@ export const Default = {
 		width: 600,
 		posterImage:
 			'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
-		fallbackImage: (
+		fallbackImageComponent: (
 			<CardPicture
 				mainImage="https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg"
 				imageSize="large"

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -42,7 +42,7 @@ type Props = {
 	width: number;
 	height: number;
 	hasAudio: boolean;
-	fallbackImage: JSX.Element;
+	fallbackImageComponent: JSX.Element;
 	isPlayable: boolean;
 	setIsPlayable: Dispatch<SetStateAction<boolean>>;
 	isPlaying: boolean;
@@ -56,8 +56,8 @@ type Props = {
 	onError: (event: SyntheticEvent<HTMLVideoElement>) => void;
 	AudioIcon: (iconProps: IconProps) => JSX.Element;
 	/**
-	 * We show a poster image when the user has indicated that
-	 * they do not want videos to play automatically
+	 * We show a poster image when the user has indicated that they do
+	 * not want videos to play automatically, e.g. prefers reduced motion.
 	 */
 	posterImage?: string;
 };
@@ -74,7 +74,7 @@ export const LoopVideoPlayer = forwardRef(
 			width,
 			height,
 			hasAudio,
-			fallbackImage,
+			fallbackImageComponent,
 			posterImage,
 			isPlayable,
 			setIsPlayable,
@@ -133,7 +133,7 @@ export const LoopVideoPlayer = forwardRef(
 					performance on supported browsers. https://web.dev/articles/video-and-source-tags */}
 					{/* <source src={webmSrc} type="video/webm"> */}
 					<source src={src} type="video/mp4" />
-					{fallbackImage}
+					{fallbackImageComponent}
 				</video>
 				{ref && 'current' in ref && ref.current && (
 					<>