From 80c2db1989222987e810dedf1f2e6a2f666f9540 Mon Sep 17 00:00:00 2001
From: MoayedHajiAli <mali18@ku.edu.tr>
Date: Sat, 22 Jun 2024 22:26:10 -0700
Subject: [PATCH] fix hover on phones

---
 docs/index.html | 45 +++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 48e657d..62bf36e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -538,11 +538,11 @@ <h2  class="title">Improvements</h2>
 		<br />
 	<script>
 		document.addEventListener('DOMContentLoaded', function () {
-			const videoItems = document.querySelectorAll('.video-item');  // Get all video item elements
+			const videoItems = document.querySelectorAll('.video-item');  
 			let userInteracted = false;
 	
 			document.body.addEventListener('click', function() {
-				userInteracted = true;  // Set to true on any click on the page
+				userInteracted = true;  
 			});
 	
 			videoItems.forEach(function(item) {
@@ -550,7 +550,7 @@ <h2  class="title">Improvements</h2>
 				const caption = item.querySelector('.video-caption');
 	
 				item.addEventListener('mouseenter', function() {
-					if (userInteracted) {  // Only apply effects if the user has interacted with the page
+					if (userInteracted) {  
 						if (video.muted) {
 							video.muted = false;
 							video.currentTime = 0; 
@@ -565,7 +565,44 @@ <h2  class="title">Improvements</h2>
 					caption.style.opacity = '0.5';
 				});
 			});
-		});
+		}); 
+
+
+		document.addEventListener('DOMContentLoaded', function () {
+			const videoItems = document.querySelectorAll('.video-item');  // Get all video item elements
+			let userInteracted = false;
+		  
+			function isMobileDevice() {
+			  return /Mobi|Android/i.test(navigator.userAgent);
+			}
+		  
+			document.body.addEventListener('click', function() {
+			  userInteracted = true;  // Set to true on any click on the page
+			});
+		  
+			videoItems.forEach(function(item) {
+			  const video = item.querySelector('.video-player');
+			  const caption = item.querySelector('.video-caption');
+		  
+			  item.addEventListener('mouseenter', function() {
+				if (userInteracted && !isMobileDevice()) {  // Only apply effects if the user has interacted with the page and is not on mobile
+				  if (video.muted) {
+					video.muted = false;
+					video.currentTime = 0;
+				  }
+				  caption.style.opacity = '1';
+				}
+			  });
+		  
+			  item.addEventListener('mouseleave', function() {
+				if (!isMobileDevice() && !video.muted) {
+				  video.muted = true;
+				}
+				caption.style.opacity = '0.5';
+			  });
+			});
+		  });
+		  
 
 		document.getElementById('menu-button').addEventListener('click', function() {
 			const navLinks = document.getElementById('nav-links');