Merge pull request #14228 from guardian/doml/canplaythrough

Handle Loop Video canplaythrough event

Author: domlander

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

@@ -365,6 +365,12 @@ export const LoopVideo = ({
 		return FallbackImageComponent;
 	}
 
+	const handleCanPlay = () => {
+		if (!isPlayable) {
+			setIsPlayable(true);
+		}
+	};
+
 	const handlePlayPauseClick = (event: React.SyntheticEvent) => {
 		event.preventDefault();
 		playPauseVideo();
@@ -466,7 +472,7 @@ export const LoopVideo = ({
 	const AudioIcon = isMuted ? SvgAudioMute : SvgAudio;
 
 	return (
-		<div
+		<figure
 			ref={setNode}
 			css={videoContainerStyles}
 			className="loop-video-container"
@@ -484,9 +490,9 @@ export const LoopVideo = ({
 				setCurrentTime={setCurrentTime}
 				ref={vidRef}
 				isPlayable={isPlayable}
-				setIsPlayable={setIsPlayable}
 				playerState={playerState}
 				isMuted={isMuted}
+				handleCanPlay={handleCanPlay}
 				handlePlayPauseClick={handlePlayPauseClick}
 				handleAudioClick={handleAudioClick}
 				handleKeyDown={handleKeyDown}
@@ -496,6 +502,6 @@ export const LoopVideo = ({
 				preloadPartialData={preloadPartialData}
 				showPlayIcon={showPlayIcon}
 			/>
-		</div>
+		</figure>
 	);
 };

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -81,11 +81,11 @@ type Props = {
 	height: number;
 	FallbackImageComponent: ReactElement;
 	isPlayable: boolean;
-	setIsPlayable: Dispatch<SetStateAction<boolean>>;
 	playerState: PlayerStates;
 	currentTime: number;
 	setCurrentTime: Dispatch<SetStateAction<number>>;
 	isMuted: boolean;
+	handleCanPlay: (event: SyntheticEvent) => void;
 	handlePlayPauseClick: (event: SyntheticEvent) => void;
 	handleAudioClick: (event: SyntheticEvent) => void;
 	handleKeyDown: (event: React.KeyboardEvent<HTMLVideoElement>) => void;
@@ -112,11 +112,11 @@ export const LoopVideoPlayer = forwardRef(
 			FallbackImageComponent,
 			posterImage,
 			isPlayable,
-			setIsPlayable,
 			playerState,
 			currentTime,
 			setCurrentTime,
 			isMuted,
+			handleCanPlay,
 			handlePlayPauseClick,
 			handleAudioClick,
 			handleKeyDown,
@@ -149,9 +149,8 @@ export const LoopVideoPlayer = forwardRef(
 					muted={isMuted}
 					playsInline={true}
 					poster={posterImage}
-					onCanPlay={() => {
-						setIsPlayable(true);
-					}}
+					onCanPlay={handleCanPlay}
+					onCanPlayThrough={handleCanPlay}
 					onTimeUpdate={() => {
 						if (
 							ref &&