From 748b1877e02cceec7b7daa93d421ddd3e1e08fa5 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 13 Jun 2023 18:09:25 +0100
Subject: [PATCH] feat: only display oia button on mobile devices

---
 src/components/site/OIAButton.tsx | 10 +++++-----
 src/lib/utils.ts                  | 13 +++++++++++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/site/OIAButton.tsx b/src/components/site/OIAButton.tsx
index caa3a222..6fe72fe9 100644
--- a/src/components/site/OIAButton.tsx
+++ b/src/components/site/OIAButton.tsx
@@ -2,8 +2,8 @@
 
 import React, { useCallback, useEffect, useState } from "react"
 
-import { useIsMobileLayout } from "~/hooks/useMobileLayout"
 import { useTranslation } from "~/lib/i18n/client"
+import { isMobileDevice } from "~/lib/utils"
 
 export const OIAButton = ({
   link,
@@ -19,10 +19,10 @@ export const OIAButton = ({
     window.open(`https://oia.xlog.app${link}`, "_blank")
   }, [])
 
-  const isMobileLayout = useIsMobileLayout()
+  const enabled = isMobileDevice() && !isInRN
 
   useEffect(() => {
-    if (!isMobileLayout) {
+    if (!enabled) {
       return
     }
 
@@ -34,9 +34,9 @@ export const OIAButton = ({
     }
     window.addEventListener("scroll", handleScroll)
     return () => window.removeEventListener("scroll", handleScroll)
-  }, [isMobileLayout])
+  }, [])
 
-  if (!isMobileLayout || isInRN) {
+  if (!enabled) {
     return null
   }
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 223a9f81..51282db8 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -81,3 +81,16 @@ export function getStringLength(str: string) {
   }
   return len
 }
+
+export const isMobileDevice = () => {
+  if (isServerSide()) {
+    return false
+  } else {
+    const userAgent = window.navigator.userAgent
+    const isIOS = /(iPad|iPhone|iPod)/.test(userAgent)
+    const isIPadOS = /Macintosh/.test(userAgent) && navigator.maxTouchPoints > 1
+    // const isAndroid = /Android/.test(userAgent);
+
+    return isIOS || isIPadOS
+  }
+}