From 1eb29cd6143476565cadb143f750faffb701dd20 Mon Sep 17 00:00:00 2001
From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com>
Date: Wed, 8 May 2024 11:03:23 +0800
Subject: [PATCH] fix: open and download (#529)

* fix: open and download

* fix: remove listener

* fix: mobile event

* fix: mobile download

* fix: remove

* fix: replace click

* fix: adjust code order

* fix: open type

* fix: open link

* fix: open link

* fix: open link

* fix: open link

* fix: open link

* fix: open link

* fix: open link

* fix: open link

* fix: open link

* fix: open link

* fix: open link
---
 .../pages/open_appflowy_or_download.html      | 119 +++++++++++++++---
 1 file changed, 105 insertions(+), 14 deletions(-)
diff --git a/admin_frontend/templates/pages/open_appflowy_or_download.html b/admin_frontend/templates/pages/open_appflowy_or_download.html
index de4ec4fd..f9ed2f82 100644
--- a/admin_frontend/templates/pages/open_appflowy_or_download.html
+++ b/admin_frontend/templates/pages/open_appflowy_or_download.html
@@ -6,29 +6,120 @@
   </head>
   <body>
     <script>
-      document.addEventListener("DOMContentLoaded", function() {
-        var fallbackLink = 'https://appflowy.io/download/'+window.location.search+window.location.hash;
+      const getDeviceType = () => {
+        const ua = navigator.userAgent;
 
-        // Mobile
-        const isiOS = navigator.userAgent.match(/iPad|iPhone|iPod/);
-        const isAndroid = navigator.userAgent.match(/Android/);
+        if (/(iPad|iPhone|iPod)/g.test(ua)) {
+          return 'iOS';
+        } else if (/Android/g.test(ua)) {
+          return 'Android';
+        } else {
+          return 'Desktop';
+        }
+      };
+      const deviceType = getDeviceType();
+      const isMobile = deviceType !== 'Desktop';
+      const getFallbackLink = () => {
 
-        if (isiOS) {
-          fallbackLink = 'https://testflight.apple.com/join/6CexvkDz';
-        } else if (isAndroid) {
-          fallbackLink = 'https://play.google.com/store/apps/details?id=io.appflowy.appflowy';
+        if (deviceType === 'iOS') {
+          return 'https://testflight.apple.com/join/6CexvkDz';
+        } else if (deviceType === 'Android') {
+          return 'https://play.google.com/store/apps/details?id=io.appflowy.appflowy';
+        } else {
+          return 'https://appflowy.io/download/#pop';
+        }
+      };
+
+      const getDuration = () => {
+        switch (deviceType) {
+          case 'iOS':
+            return 250;
+          default:
+            return 1500;
+        }
+      }
+
+      const APPFLOWY_SCHEME = 'appflowy-flutter://';
+
+      const iframe = document.createElement('iframe');
+      iframe.style.display = 'none'
+      iframe.src = APPFLOWY_SCHEME;
+
+      const openSchema = () => {
+        if (isMobile) return window.location.href = APPFLOWY_SCHEME;
+        document.body.appendChild(iframe);
+        setTimeout(() => {
+          document.body.removeChild(iframe);
+        }, 1000);
+      };
+
+      const openAppFlowy = (force) => {
+        openSchema();
+
+        if (force) return;
+
+        const initialTime = new Date();
+        let interactTime = initialTime;
+        let waitTime = 0;
+        const duration = getDuration();
+
+        const updateInteractTime = () => {
+          interactTime = new Date();
+        };
+
+        document.removeEventListener('mousemove', updateInteractTime);
+        document.removeEventListener('mouseenter', updateInteractTime);
+
+        const checkOpen = setInterval(() => {
+          waitTime = new Date() - initialTime;
+
+          if (waitTime > duration) {
+            clearInterval(checkOpen);
+            if (isMobile || new Date() - interactTime < duration) {
+              document.getElementById('download-link').click();
+            }
+          }
+        }, 20);
+
+        if (!isMobile) {
+          document.addEventListener('mouseenter', updateInteractTime);
+          document.addEventListener('mousemove', updateInteractTime);
         }
 
-        // Attempt to redirect
-        window.location = 'appflowy-flutter://'+window.location.search+window.location.hash;
+        document.addEventListener('visibilitychange', () => {
+          const isHidden = document.hidden;
+          if (isHidden) {
+            clearInterval(checkOpen);
+          }
+        });
+
+        window.onpagehide = () => {
+          clearInterval(checkOpen);
+        };
+
+        window.onbeforeunload = () => {
+          clearInterval(checkOpen);
+        };
+
+      };
+      document.addEventListener("DOMContentLoaded", function() {
+        document.getElementById('open-appflowy').addEventListener('click', (e) => {
+          e.preventDefault();
+          openAppFlowy(true);
+        });
+
+        document.getElementById('download-link').addEventListener('click', (e) => {
+          e.preventDefault();
+          window.open(getFallbackLink(), '_current');
+        });
+
+        openAppFlowy();
 
-        // Update the fallback download link
-        document.getElementById('download-link').href = fallbackLink;
       });
     </script>
 
     <h1>Opening AppFlowy</h1>
-    <p>If AppFlowy does not open, you can click <a href="appflowy-flutter://">here</a> to launch the app.</p>
+    <p>If AppFlowy does not open, you can click <a id="open-appflowy" href="#">here</a> to launch the app.</p>
     <p>If AppFlowy is not installed, you can <a id="download-link" href="#">download AppFlowy manually</a>.</p>
   </body>
 </html>
