From dca0020cafaadd76637679d31aedd0b441ade80c Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Thu, 28 Nov 2024 16:38:16 -0300
Subject: [PATCH] feat(mobile): add device detection and screen orientation
 locking

---
 src/lib/utils/Mobile.ts   |  7 +++++++
 src/routes/+layout.svelte | 14 ++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/lib/utils/Mobile.ts b/src/lib/utils/Mobile.ts
index a7d2340b4..0573feb9c 100644
--- a/src/lib/utils/Mobile.ts
+++ b/src/lib/utils/Mobile.ts
@@ -1,3 +1,10 @@
+import { Device } from "@capacitor/device"
+
 export function checkMobile(): boolean {
     return window.matchMedia("screen and (max-width: 800px)").matches
 }
+
+export async function isAndroidOriOS(): Promise<boolean> {
+    const info = await Device.getInfo()
+    return info.platform === "ios" || info.platform === "android"
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index de59df00e..fe484db5a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -27,6 +27,8 @@
     import InstallBanner from "$lib/components/ui/InstallBanner.svelte"
     import Market from "$lib/components/market/Market.svelte"
     import { swipe } from "$lib/components/ui/Swipe"
+    import { ScreenOrientation } from "@capacitor/screen-orientation"
+    import { isAndroidOriOS } from "$lib/utils/Mobile"
 
     log.debug("Initializing app, layout routes page.")
 
@@ -264,7 +266,19 @@
         isLocaleSet = true
     }
 
+    const lockOrientation = async () => {
+        try {
+            await ScreenOrientation.lock({ orientation: "portrait" })
+            log.info("Screen orientation locked to portrait.")
+        } catch (error) {
+            console.error("Failed to lock screen orientation:", error)
+        }
+    }
+
     onMount(async () => {
+        if (await isAndroidOriOS()) {
+            lockOrientation()
+        }
         await checkIfUserIsLogged($page.route.id)
         await initializeLocale()
         buildStyle()