Track player duration in video players

Author: richiemcilroy

apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx

@@ -138,7 +138,7 @@ export function CapVideoPlayer({
 	const [isMobile, setIsMobile] = useState(false);
 	const [hasError, setHasError] = useState(false);
 	const [isRetryingProcessing, setIsRetryingProcessing] = useState(false);
-	const [duration, setDuration] = useState(fallbackDuration ?? 0);
+	const [playerDuration, setPlayerDuration] = useState(fallbackDuration ?? 0);
 	const queryClient = useQueryClient();
 
 	useEffect(() => {
@@ -190,7 +190,7 @@ export function CapVideoPlayer({
 
 	// Track video duration for comment markers
 	useEffect(() => {
-		setDuration(fallbackDuration ?? 0);
+		setPlayerDuration(fallbackDuration ?? 0);
 	}, [fallbackDuration]);
 
 	useEffect(() => {
@@ -199,12 +199,12 @@ export function CapVideoPlayer({
 
 		const handleLoadedMetadata = () => {
 			if (Number.isFinite(video.duration) && video.duration > 0) {
-				setDuration(video.duration);
+				setPlayerDuration(video.duration);
 			}
 		};
 
 		if (Number.isFinite(video.duration) && video.duration > 0) {
-			setDuration(video.duration);
+			setPlayerDuration(video.duration);
 		}
 
 		video.addEventListener("loadedmetadata", handleLoadedMetadata);
@@ -229,10 +229,10 @@ export function CapVideoPlayer({
 
 	useEffect(() => {
 		// Only show markers when we have duration, comments, and video element
-		if (duration > 0 && comments.length > 0 && videoRef.current) {
+		if (playerDuration > 0 && comments.length > 0 && videoRef.current) {
 			setMarkersReady(true);
 		}
-	}, [duration, comments.length, videoRef.current]);
+	}, [playerDuration, comments.length, videoRef.current]);
 
 	useEffect(() => {
 		if (resolvedSrc.data) {
@@ -687,7 +687,7 @@ export function CapVideoPlayer({
 					);
 
 					return filteredComments.map((comment) => {
-						const position = (Number(comment.timestamp) / duration) * 100;
+						const position = (Number(comment.timestamp) / playerDuration) * 100;
 						const containerPadding = 20;
 						const availableWidth = `calc(100% - ${containerPadding * 2}px)`;
 						const adjustedPosition = `calc(${containerPadding}px + (${position}% * ${availableWidth} / 100%))`;
@@ -730,7 +730,7 @@ export function CapVideoPlayer({
 							// enhancedAudioMuted={enhancedAudioMuted}
 							// setEnhancedAudioMuted={setEnhancedAudioMuted}
 						/>
-						<MediaPlayerTime fallbackDuration={fallbackDuration} />
+						<MediaPlayerTime fallbackDuration={playerDuration} />
 					</div>
 					<div className="flex gap-2 items-center">
 						{!disableCaptions && (

apps/web/app/s/[videoId]/_components/HLSVideoPlayer.tsx

@@ -112,6 +112,7 @@ export function HLSVideoPlayer({
 	const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
 	const [isRetryingProcessing, setIsRetryingProcessing] = useState(false);
 	const [sourceVersion, setSourceVersion] = useState(0);
+	const [playerDuration, setPlayerDuration] = useState(fallbackDuration ?? 0);
 	const queryClient = useQueryClient();
 	const playbackSrc =
 		sourceVersion === 0
@@ -124,6 +125,10 @@ export function HLSVideoPlayer({
 		setSourceVersion((current) => current + 1);
 	}, []);
 
+	useEffect(() => {
+		setPlayerDuration(fallbackDuration ?? 0);
+	}, [fallbackDuration]);
+
 	useEffect(() => {
 		const video = videoRef.current;
 		if (!video) return;
@@ -154,6 +159,12 @@ export function HLSVideoPlayer({
 			setHasPlayedOnce(true);
 		};
 
+		const handleLoadedMetadata = () => {
+			if (Number.isFinite(video.duration) && video.duration > 0) {
+				setPlayerDuration(video.duration);
+			}
+		};
+
 		const handleError = (e: Event) => {
 			const error = (e.target as HTMLVideoElement).error;
 			console.error("HLSVideoPlayer: Video error detected:", {
@@ -165,11 +176,16 @@ export function HLSVideoPlayer({
 		};
 
 		video.addEventListener("loadeddata", handleLoadedData);
+		video.addEventListener("loadedmetadata", handleLoadedMetadata);
 		video.addEventListener("canplay", handleCanPlay);
 		video.addEventListener("load", handleLoad);
 		video.addEventListener("play", handlePlay);
 		video.addEventListener("error", handleError);
 
+		if (Number.isFinite(video.duration) && video.duration > 0) {
+			setPlayerDuration(video.duration);
+		}
+
 		if (video.readyState >= 2) {
 			setVideoLoaded(true);
 			if (!hasPlayedOnce) {
@@ -179,6 +195,7 @@ export function HLSVideoPlayer({
 
 		return () => {
 			video.removeEventListener("loadeddata", handleLoadedData);
+			video.removeEventListener("loadedmetadata", handleLoadedMetadata);
 			video.removeEventListener("canplay", handleCanPlay);
 			video.removeEventListener("load", handleLoad);
 			video.removeEventListener("play", handlePlay);
@@ -566,7 +583,7 @@ export function HLSVideoPlayer({
 							// enhancedAudioMuted={enhancedAudioMuted}
 							// setEnhancedAudioMuted={setEnhancedAudioMuted}
 						/>
-						<MediaPlayerTime fallbackDuration={fallbackDuration} />
+						<MediaPlayerTime fallbackDuration={playerDuration} />
 					</div>
 					<div className="flex gap-2 items-center">
 						{!disableCaptions && (