disable reloading on page focus, also disabled force touch

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]" />

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>
   );
 });

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]" />

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);
     }
   };
 

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,
     }
   );
 

src/hooks/folders.ts

@@ -25,7 +25,7 @@ export const useFolders = (enabled = true) => {
       },
     ],
     getFoldersListAPI,
-    { enabled }
+    { enabled, refetchOnWindowFocus: false, refetchOnReconnect: false }
   );
 
   return { ...foldersReactQuery };

src/styles/styles.scss

@@ -37,3 +37,7 @@
 :root {
   --toastify-icon-color-success: #3c85ee !important;
 }
+
+.disable-force-touch {
+  -webkit-touch-callout: none;
+}