From 46a3a7dd888971999da7b0d8406a666ac0bd0bc5 Mon Sep 17 00:00:00 2001
From: subnub <kyle.hoell@gmail.com>
Date: Wed, 25 Dec 2024 01:59:27 -0500
Subject: [PATCH] disable reloading on page focus, also disabled force touch

---
 src/components/FileItem/FileItem.tsx          |  5 ++-
 src/components/MediaItem/MediaItem.tsx        |  5 ++-
 .../QuickAccessItem/QuickAccessItem.tsx       |  5 ++-
 src/hooks/contextMenu.ts                      | 37 +++++++++++--------
 src/hooks/files.ts                            |  4 ++
 src/hooks/folders.ts                          |  2 +-
 src/styles/styles.scss                        |  4 ++
 7 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/components/FileItem/FileItem.tsx b/src/components/FileItem/FileItem.tsx
index b7a9c08..217235f 100644
--- a/src/components/FileItem/FileItem.tsx
+++ b/src/components/FileItem/FileItem.tsx
@@ -205,7 +205,10 @@ const FileItem: React.FC<FileItemProps> = memo((props) => {
         >
           {!!thumbnail ? (
             <div className="w-full min-h-[88px] max-h-[88px] h-full flex">
-              <img className="object-cover w-full" src={thumbnail} />
+              <img
+                className="object-cover w-full disable-force-touch"
+                src={thumbnail}
+              />
               {file.metadata.isVideo && (
                 <div className="w-full h-full absolute flex justify-center items-center text-white">
                   <PlayButtonIcon className="w-[50px] h-[50px]" />
diff --git a/src/components/MediaItem/MediaItem.tsx b/src/components/MediaItem/MediaItem.tsx
index 50ad018..da38a1c 100644
--- a/src/components/MediaItem/MediaItem.tsx
+++ b/src/components/MediaItem/MediaItem.tsx
@@ -108,7 +108,10 @@ const MediaItem: React.FC<MediaItemType> = memo(({ file }) => {
           <PlayButtonIcon className="w-[50px] h-[50px]" />
         </div>
       )}
-      <img className="object-cover h-full w-full" src={thumbnail} />
+      <img
+        className="object-cover h-full w-full disable-force-touch"
+        src={thumbnail}
+      />
     </div>
   );
 });
diff --git a/src/components/QuickAccessItem/QuickAccessItem.tsx b/src/components/QuickAccessItem/QuickAccessItem.tsx
index 712d2a3..6e93f7d 100644
--- a/src/components/QuickAccessItem/QuickAccessItem.tsx
+++ b/src/components/QuickAccessItem/QuickAccessItem.tsx
@@ -127,7 +127,10 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => {
       >
         {!!thumbnail ? (
           <div className="w-full min-h-[88px] max-h-[88px] h-full flex">
-            <img className=" object-cover w-full" src={thumbnail} />
+            <img
+              className="object-cover w-full disable-force-touch"
+              src={thumbnail}
+            />
             {file.metadata.isVideo && (
               <div className="w-full h-full absolute flex justify-center items-center text-white">
                 <PlayButtonIcon className="w-[50px] h-[50px]" />
diff --git a/src/hooks/contextMenu.ts b/src/hooks/contextMenu.ts
index 053c64c..40c3c28 100644
--- a/src/hooks/contextMenu.ts
+++ b/src/hooks/contextMenu.ts
@@ -7,6 +7,7 @@ export const useContextMenu = () => {
     Y: 0,
   });
   const lastTouched = useRef(0);
+  const timeoutRef = useRef<any>(null);
 
   const onContextMenu = (e: any) => {
     if (e) e.stopPropagation();
@@ -32,27 +33,31 @@ export const useContextMenu = () => {
     });
   };
 
-  const onTouchStart = () => {
-    lastTouched.current = new Date().getTime();
-  };
+  const onTouchStart = (e: any) => {
+    const touches = e.touches[0];
+    let X = e.clientX || touches.clientX;
+    let Y = e.clientY || touches.clientY;
 
-  const onTouchMove = () => {
-    lastTouched.current = 0;
-  };
-
-  const onTouchEnd = () => {
-    if (lastTouched.current === 0) {
-      return;
-    }
-
-    const date = new Date();
-    const difference = date.getTime() - lastTouched.current;
-
-    if (difference > 500) {
+    timeoutRef.current = setTimeout(() => {
+      console.log("timeout");
       setContextData({
         ...contextData,
         selected: true,
+        X,
+        Y,
       });
+    }, 500);
+  };
+
+  const onTouchMove = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  };
+
+  const onTouchEnd = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
     }
   };
 
diff --git a/src/hooks/files.ts b/src/hooks/files.ts
index 408aca2..95ace47 100644
--- a/src/hooks/files.ts
+++ b/src/hooks/files.ts
@@ -69,6 +69,8 @@ export const useFiles = (enabled = true) => {
           };
         },
         enabled,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
       }
     );
 
@@ -112,6 +114,8 @@ export const useQuickFiles = (enabled = true) => {
     getQuickFilesListAPI,
     {
       enabled,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
     }
   );
 
diff --git a/src/hooks/folders.ts b/src/hooks/folders.ts
index 96e7686..030f08f 100644
--- a/src/hooks/folders.ts
+++ b/src/hooks/folders.ts
@@ -25,7 +25,7 @@ export const useFolders = (enabled = true) => {
       },
     ],
     getFoldersListAPI,
-    { enabled }
+    { enabled, refetchOnWindowFocus: false, refetchOnReconnect: false }
   );
 
   return { ...foldersReactQuery };
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index ae214b7..f634a3e 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -37,3 +37,7 @@
 :root {
   --toastify-icon-color-success: #3c85ee !important;
 }
+
+.disable-force-touch {
+  -webkit-touch-callout: none;
+}