rename posterImage to thumbnailImage

Author: domlander

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

@@ -18,7 +18,7 @@ type Props = {
 	videoId: string;
 	width?: number;
 	height?: number;
-	posterImage: string;
+	thumbnailImage: string;
 	fallbackImageComponent: JSX.Element;
 	hasAudio?: boolean;
 };
@@ -28,7 +28,7 @@ export const LoopVideo = ({
 	videoId,
 	width = 600,
 	height = 360,
-	posterImage,
+	thumbnailImage,
 	fallbackImageComponent,
 	hasAudio = true,
 }: Props) => {
@@ -169,7 +169,9 @@ export const LoopVideo = ({
 				handleKeyDown={handleKeyDown}
 				onError={onError}
 				AudioIcon={AudioIcon}
-				posterImage={prefersReducedMotion ? posterImage : undefined}
+				thumbnailImage={
+					prefersReducedMotion ? thumbnailImage : undefined
+				}
 			/>
 		</div>
 	);

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

@@ -23,7 +23,7 @@ export const Default = {
 		videoId: 'test-video-1',
 		height: 337.5,
 		width: 600,
-		posterImage:
+		thumbnailImage:
 			'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
 		fallbackImageComponent: (
 			<CardPicture

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -56,10 +56,10 @@ 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
+	 * We show a thumbnail image when the user has indicated that they do
 	 * not want videos to play automatically, e.g. prefers reduced motion.
 	 */
-	posterImage?: string;
+	thumbnailImage?: string;
 };
 
 /**
@@ -75,7 +75,7 @@ export const LoopVideoPlayer = forwardRef(
 			height,
 			hasAudio,
 			fallbackImageComponent,
-			posterImage,
+			thumbnailImage,
 			isPlayable,
 			setIsPlayable,
 			isPlaying,
@@ -99,13 +99,13 @@ export const LoopVideoPlayer = forwardRef(
 				<video
 					id={loopVideoId}
 					ref={ref}
-					preload={posterImage ? 'metadata' : 'none'}
+					preload={thumbnailImage ? 'metadata' : 'none'}
 					loop={true}
 					muted={isMuted}
 					playsInline={true}
 					height={height}
 					width={width}
-					poster={posterImage ?? undefined}
+					poster={thumbnailImage ?? undefined}
 					onPlaying={() => {
 						setIsPlaying(true);
 					}}