From 5ff474d32299eadb8e52ede87756fa7ae3d5d0c5 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Tue, 1 Jul 2025 09:47:31 -0500
Subject: [PATCH] Fixes being unable to close web player on touch screens.

---
 frontend/src/components/FloatingVideo.jsx | 27 ++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/FloatingVideo.jsx b/frontend/src/components/FloatingVideo.jsx
index 7f1e1c53..8b131dd3 100644
--- a/frontend/src/components/FloatingVideo.jsx
+++ b/frontend/src/components/FloatingVideo.jsx
@@ -185,7 +185,12 @@ export default function FloatingVideo() {
   }, [isVisible, streamUrl]);
 
   // Modified hideVideo handler to clean up player first
-  const handleClose = () => {
+  const handleClose = (e) => {
+    // Prevent event propagation to avoid triggering drag events
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
     safeDestroyPlayer();
     // Small delay before hiding the video component to ensure cleanup is complete
     setTimeout(() => {
@@ -215,8 +220,24 @@ export default function FloatingVideo() {
         }}
       >
         {/* Simple header row with a close button */}
-        <Flex justify="flex-end" style={{ padding: 3 }}>
-          <CloseButton onClick={handleClose} />
+        <Flex
+          justify="flex-end"
+          style={{
+            padding: 3
+          }}
+        >
+          <CloseButton
+            onClick={handleClose}
+            onTouchEnd={handleClose}
+            onMouseDown={(e) => e.stopPropagation()}
+            onTouchStart={(e) => e.stopPropagation()}
+            style={{
+              minHeight: '32px',
+              minWidth: '32px',
+              cursor: 'pointer',
+              touchAction: 'manipulation'
+            }}
+          />
         </Flex>
 
         {/* Video container with relative positioning for the overlay */}