Use transitions for progress bar. Stop using <progress />.

Author: domlander

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

@@ -8,9 +8,11 @@ import { useShouldAdapt } from '../lib/useShouldAdapt';
 import { useConfig } from './ConfigContext';
 import { LoopVideoPlayer } from './LoopVideoPlayer';
 
-const videoContainerStyles = css`
+const videoContainerStyles = (height: number, width: number) => css`
 	z-index: ${getZIndex('loop-video-container')};
 	position: relative;
+	height: ${height}px;
+	width: ${width}px;
 `;
 
 type Props = {
@@ -36,7 +38,7 @@ export const LoopVideo = ({
 	const [isPlayable, setIsPlayable] = useState(false);
 	const [isPlaying, setIsPlaying] = useState(false);
 	const [isMuted, setIsMuted] = useState(true);
-	const [elapsedTime, setElapsedTime] = useState(0);
+	const [currentTime, setCurrentTime] = useState(0);
 	/**
 	 * Keep a track of whether the video has been in view. We only want to
 	 * pause the video if it has been in view.
@@ -69,22 +71,9 @@ export const LoopVideo = ({
 		}
 	}, [isInView, hasBeenInView, isPlayable, isPlaying]);
 
-	/**
-	 * Progress bar updates
-	 */
-	useEffect(() => {
-		const interval = setInterval(() => {
-			setElapsedTime(vidRef.current?.currentTime ?? 0);
-		}, 40);
-
-		return () => clearInterval(interval);
-	}, []);
-
 	if (renderingTarget !== 'Web') return null;
 
-	if (adapted) {
-		return fallbackImage;
-	}
+	if (adapted) return fallbackImage;
 
 	const handleClick = (event: React.SyntheticEvent) => {
 		event.preventDefault();
@@ -115,7 +104,7 @@ export const LoopVideo = ({
 			);
 
 			vidRef.current.currentTime = newTime;
-			setElapsedTime(newTime);
+			setCurrentTime(newTime);
 		}
 	};
 
@@ -128,7 +117,7 @@ export const LoopVideo = ({
 				vidRef.current.duration;
 
 			vidRef.current.currentTime = newTime;
-			setElapsedTime(newTime);
+			setCurrentTime(newTime);
 		}
 	};
 
@@ -155,7 +144,7 @@ export const LoopVideo = ({
 		<div
 			className="loop-video-container"
 			ref={setNode}
-			css={videoContainerStyles}
+			css={videoContainerStyles(height, width)}
 		>
 			<LoopVideoPlayer
 				src={src}
@@ -164,6 +153,8 @@ export const LoopVideo = ({
 				height={height}
 				hasAudio={hasAudio}
 				fallbackImage={fallbackImage}
+				currentTime={currentTime}
+				setCurrentTime={setCurrentTime}
 				ref={vidRef}
 				isPlayable={isPlayable}
 				setIsPlayable={setIsPlayable}
@@ -174,7 +165,6 @@ export const LoopVideo = ({
 				handleClick={handleClick}
 				handleKeyDown={handleKeyDown}
 				onError={onError}
-				elapsedTime={elapsedTime}
 				AudioIcon={AudioIcon}
 			/>
 		</div>

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -47,12 +47,13 @@ type Props = {
 	setIsPlayable: Dispatch<SetStateAction<boolean>>;
 	isPlaying: boolean;
 	setIsPlaying: Dispatch<SetStateAction<boolean>>;
+	currentTime: number;
+	setCurrentTime: Dispatch<SetStateAction<number>>;
 	isMuted: boolean;
 	setIsMuted: Dispatch<SetStateAction<boolean>>;
 	handleClick: (event: SyntheticEvent) => void;
 	handleKeyDown: (event: React.KeyboardEvent<HTMLVideoElement>) => void;
 	onError: (event: SyntheticEvent<HTMLVideoElement>) => void;
-	elapsedTime: number;
 	AudioIcon: (iconProps: IconProps) => JSX.Element;
 };
 
@@ -73,12 +74,13 @@ export const LoopVideoPlayer = forwardRef(
 			setIsPlayable,
 			isPlaying,
 			setIsPlaying,
+			currentTime,
+			setCurrentTime,
 			isMuted,
 			setIsMuted,
 			handleClick,
 			handleKeyDown,
 			onError,
-			elapsedTime,
 			AudioIcon,
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
@@ -101,6 +103,16 @@ export const LoopVideoPlayer = forwardRef(
 					onCanPlay={() => {
 						setIsPlayable(true);
 					}}
+					onTimeUpdate={() => {
+						if (
+							ref &&
+							'current' in ref &&
+							ref.current &&
+							isPlaying
+						) {
+							setCurrentTime(ref.current.currentTime);
+						}
+					}}
 					onClick={handleClick}
 					onKeyDown={handleKeyDown}
 					role="button"
@@ -117,12 +129,16 @@ export const LoopVideoPlayer = forwardRef(
 				{ref && 'current' in ref && ref.current && (
 					<>
 						{isPlayable && !isPlaying && (
-							<div css={playIconStyles}>
+							<button
+								type="button"
+								onClick={handleClick}
+								css={playIconStyles}
+							>
 								<PlayIcon iconWidth="narrow" />
-							</div>
+							</button>
 						)}
 						<LoopVideoProgressBar
-							currentTime={elapsedTime}
+							currentTime={currentTime}
 							duration={ref.current.duration}
 						/>
 						{hasAudio && (

dotcom-rendering/src/components/LoopVideoProgressBar.tsx

@@ -1,41 +1,15 @@
 import { css } from '@emotion/react';
 import { palette } from '../palette';
 
-const styles = css`
+const styles = (progressPercentage: number) => css`
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	height: 7px;
 	width: 100%;
-
-	progress {
-		display: block;
-		width: 100%;
-		height: 100%;
-		border: none;
-		-moz-border-radius: 0;
-		-webkit-border-radius: 0;
-		border-radius: 0;
-	}
-
-	/* background: */
-	progress::-webkit-progress-bar {
-		background-color: transparent;
-	}
-	progress {
-		background-color: transparent;
-	}
-
-	/* value: */
-	progress::-webkit-progress-value {
-		background-color: ${palette('--loop-video-progress-bar-value')};
-	}
-	progress::-moz-progress-bar {
-		background-color: ${palette('--loop-video-progress-bar-value')};
-	}
-	progress {
-		color: ${palette('--loop-video-progress-bar-value')};
-	}
+	width: ${progressPercentage}%;
+	transition: width 0.3s linear;
+	background-color: ${palette('--loop-video-progress-bar-value')};
 `;
 
 type Props = {
@@ -46,12 +20,10 @@ type Props = {
 export const LoopVideoProgressBar = ({ currentTime, duration }: Props) => {
 	if (duration <= 0) return null;
 
-	const progressPercentage =
-		duration > 0 ? (currentTime * 100) / duration : 0;
+	const progressPercentage = (currentTime * 100) / duration;
+	if (Number.isNaN(progressPercentage)) {
+		return null;
+	}
 
-	return (
-		<div css={styles} className="progress-bar">
-			<progress value={progressPercentage / 100} />
-		</div>
-	);
+	return <div role="progressbar" css={styles(progressPercentage)} />;
 };