From 1bd8a5380fa71c9fd7756f09a89f6d3bc06c3c4e Mon Sep 17 00:00:00 2001
From: umungobungo <m.mcgillivray@outlook.com>
Date: Mon, 7 Oct 2024 21:52:37 +0800
Subject: [PATCH] timer countdown creating weird behaviour

---
 .../docs/src/components/Demo/PlayerVolume.tsx    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/docs/src/components/Demo/PlayerVolume.tsx b/packages/docs/src/components/Demo/PlayerVolume.tsx
index e25cd16ff4..1e0573ca10 100644
--- a/packages/docs/src/components/Demo/PlayerVolume.tsx
+++ b/packages/docs/src/components/Demo/PlayerVolume.tsx
@@ -14,6 +14,8 @@ export const PlayerVolume: React.FC<{
 }> = ({playerRef, updateAudioMute, updateAudioVolume, audioState}) => {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const [isHovered, setIsHovered] = useState(false);
+	const [isDragging, setIsDragging] = useState(false);
+	const timerRef = useRef<Timer | null>(null);
 
 	useEffect(() => {
 		const {current} = playerRef;
@@ -42,6 +44,11 @@ export const PlayerVolume: React.FC<{
 	}, [isHovered]);
 
 	const onClick = useCallback(() => {
+		if (timerRef.current !== null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+
 		if (audioState.isMuted) {
 			playerRef.current.unmute();
 		} else {
@@ -49,8 +56,6 @@ export const PlayerVolume: React.FC<{
 		}
 	}, [audioState, playerRef]);
 
-	const [isDragging, setIsDragging] = useState(false);
-
 	const calculatePosition = useCallback((clientY: number) => {
 		const container = containerRef.current?.getBoundingClientRect();
 		if (container) {
@@ -65,6 +70,11 @@ export const PlayerVolume: React.FC<{
 	const handlePointerDown = useCallback(
 		(e: React.PointerEvent<HTMLDivElement>) => {
 			if (e.button !== 0) return; // Only respond to left mouse button
+			if (timerRef.current !== null) {
+				clearTimeout(timerRef.current);
+				timerRef.current = null;
+			}
+
 			setIsDragging(true);
 			const position = calculatePosition(e.clientY);
 			if (position === null) return;
@@ -97,7 +107,7 @@ export const PlayerVolume: React.FC<{
 
 	const handlePointerUp = useCallback(() => {
 		setIsDragging(false);
-		setTimeout(() => {
+		timerRef.current = setTimeout(() => {
 			setIsHovered(false);
 		}, 1000);
 	}, []);