Safe inset stuff for Android (still WIP)

HorusGoul · May 12, 2024 · 691f960 · 691f960
1 parent fa0b3c7
commit 691f960
Show file tree

Hide file tree

Showing 16 changed files with 90 additions and 44 deletions.
diff --git a/apps/pwa/src/NativeBridge.ts b/apps/pwa/src/NativeBridge.ts
@@ -13,6 +13,7 @@ const platformMethods: PlatformMethods = {
       window.open("market://details?id=tk.horusgoul.valenciasquimicas");
     }
   },
+  getSafeInset: () => null,
 };
 
 const AtomNative = window.AtomNative || platformMethods;
@@ -44,6 +45,10 @@ class NativeBridge {
     return !!window.AtomNative?.["rateApp"];
   }
 
+  public getSafeInset() {
+    return this.exec("getSafeInset", [], []);
+  }
+
   private exec<T extends keyof typeof AtomNative>(
     methodName: T,
     nativeArgs: Parameters<NonNullable<typeof AtomNative[T]>>,

diff --git a/apps/pwa/src/app.d.ts b/apps/pwa/src/app.d.ts
@@ -4,6 +4,7 @@ interface Window {
     getDebugMode?: () => boolean;
     getSystemLanguage?: () => string | undefined;
     rateApp?: (openMarket?: boolean) => void;
+    getSafeInset?: () => string | null;
   };
   __DEBUG__?: boolean;
 }

diff --git a/apps/pwa/src/components/about/About.scss b/apps/pwa/src/components/about/About.scss
@@ -63,9 +63,9 @@
   }
 
   &__content {
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
-    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
+    padding-bottom: var(--safe-area-inset-bottom);
 
     max-width: 1024px;
     margin: 0 auto;

diff --git a/apps/pwa/src/components/hub/Hub.module.scss b/apps/pwa/src/components/hub/Hub.module.scss
@@ -7,15 +7,15 @@
   flex-direction: column;
   background-color: var(--backgroundColor);
   color: var(--contentTextColor);
-  padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: var(--safe-area-inset-bottom);
 }
 
 .header {
   display: flex;
   align-items: center;
   flex-direction: column;
   width: 100%;
-  padding-top: env(safe-area-inset-top);
+  padding-top: var(--safe-area-inset-top);
   position: relative;
 
   &::before {

diff --git a/apps/pwa/src/components/mass-calculator/MassCalculator.scss b/apps/pwa/src/components/mass-calculator/MassCalculator.scss
@@ -14,8 +14,8 @@
     display: flex;
     align-items: center;
     padding: 16px;
-    padding-left: calc(16px + env(safe-area-inset-left));
-    padding-right: calc(16px + env(safe-area-inset-right));
+    padding-left: calc(16px + var(--safe-area-inset-left));
+    padding-right: calc(16px + var(--safe-area-inset-right));
     z-index: 2;
 
     @include box-shadow($level: 1);
@@ -176,12 +176,12 @@
 
   &__controls,
   &__element-list {
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
   }
 
   &__element-list {
-    padding-bottom: env(safe-area-inset-bottom);
+    padding-bottom: var(--safe-area-inset-bottom);
   }
 }
 

diff --git a/apps/pwa/src/components/periodic-table-test/PeriodicTableTest.scss b/apps/pwa/src/components/periodic-table-test/PeriodicTableTest.scss
@@ -74,8 +74,8 @@
 
   &__current-question {
     position: fixed;
-    left: calc(24px + env(safe-area-inset-left, 0px));
-    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
+    left: calc(24px + var(--safe-area-inset-left, 0px));
+    bottom: calc(32px + var(--safe-area-inset-bottom, 0px));
     height: 72px;
     width: 72px;
     z-index: 10;

diff --git a/apps/pwa/src/components/periodic-table-test/settings/PeriodicTableTestSettings.scss b/apps/pwa/src/components/periodic-table-test/settings/PeriodicTableTestSettings.scss
@@ -7,8 +7,8 @@
   height: 100%;
 
   &__content {
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
 
     @include themify($themes) {
       background-color: themed("cardBackgroundColor");

diff --git a/apps/pwa/src/components/periodic-table/PeriodicTable.scss b/apps/pwa/src/components/periodic-table/PeriodicTable.scss
@@ -8,7 +8,7 @@
   width: 100%;
   height: 100%;
 
-  padding-left: env(safe-area-inset-left);
+  padding-left: var(--safe-area-inset-left);
 
   @include themify($themes) {
     color: themed("contentTextColor");

diff --git a/apps/pwa/src/components/search-view/SearchView.module.scss b/apps/pwa/src/components/search-view/SearchView.module.scss
@@ -13,10 +13,10 @@
   overflow-y: auto;
   animation: slideIn 180ms ease-in forwards;
 
-  padding-top: env(safe-area-inset-top);
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-left: env(safe-area-inset-left);
-  padding-right: env(safe-area-inset-right);
+  padding-top: var(--safe-area-inset-top);
+  padding-bottom: var(--safe-area-inset-bottom);
+  padding-left: var(--safe-area-inset-left);
+  padding-right: var(--safe-area-inset-right);
 
   @media (prefers-reduced-motion) {
     animation: none;

diff --git a/apps/pwa/src/components/shared/navbar/Navbar.scss b/apps/pwa/src/components/shared/navbar/Navbar.scss
@@ -8,9 +8,9 @@
   display: flex;
   align-items: center;
 
-  padding-left: env(safe-area-inset-left);
-  padding-right: env(safe-area-inset-right);
-  padding-top: env(safe-area-inset-top);
+  padding-left: var(--safe-area-inset-left);
+  padding-right: var(--safe-area-inset-right);
+  padding-top: var(--safe-area-inset-top);
 
   @include themify($themes) {
     @include overscroll-top($color: themed("primary"));

diff --git a/apps/pwa/src/components/test-selection/TestSelection.scss b/apps/pwa/src/components/test-selection/TestSelection.scss
@@ -21,8 +21,8 @@
     max-width: 1024px;
     margin: 0 auto;
 
-    padding-bottom: env(safe-area-inset-bottom);
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
+    padding-bottom: var(--safe-area-inset-bottom);
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
   }
 }
diff --git a/apps/pwa/src/components/valences-test/settings/ValencesTestSettings.scss b/apps/pwa/src/components/valences-test/settings/ValencesTestSettings.scss
@@ -7,8 +7,8 @@
   height: 100%;
 
   &__content {
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
 
     @include themify($themes) {
       background-color: themed("cardBackgroundColor");

diff --git a/apps/pwa/src/contexts/SafeAreaInsetContext.tsx b/apps/pwa/src/contexts/SafeAreaInsetContext.tsx
@@ -1,3 +1,4 @@
+import { loadHybridSafeInsets } from "@/services/safe-inset";
 import { createContext, useContext, useEffect, useState } from "react";
 
 export interface SafeAreaInset {
@@ -7,23 +8,6 @@ export interface SafeAreaInset {
   left: number;
 }
 
-document.documentElement.style.setProperty(
-  "--safe-area-inset-top",
-  "env(safe-area-inset-top, 0px)"
-);
-document.documentElement.style.setProperty(
-  "--safe-area-inset-right",
-  "env(safe-area-inset-right, 0px)"
-);
-document.documentElement.style.setProperty(
-  "--safe-area-inset-bottom",
-  "env(safe-area-inset-bottom, 0px)"
-);
-document.documentElement.style.setProperty(
-  "--safe-area-inset-left",
-  "env(safe-area-inset-left, 0px)"
-);
-
 export const SafeAreaInsetContext = createContext<SafeAreaInset>(
   getSafeAreaInset()
 );
@@ -42,6 +26,7 @@ export function SafeAreaInsetProvider({
 
   useEffect(() => {
     const listener = () => {
+      loadHybridSafeInsets();
       setState(getSafeAreaInset());
     };
 

diff --git a/apps/pwa/src/index.tsx b/apps/pwa/src/index.tsx
@@ -15,9 +15,11 @@ import { initSentry } from "@/services/sentry";
 import { loadFlags } from "@/services/flags";
 import App from "./components/App";
 import invariant from "invariant";
+import { loadHybridSafeInsets } from "@/services/safe-inset";
 
 loadFlags();
 initSentry();
+loadHybridSafeInsets();
 
 const rootElement = document.getElementById("root");
 

diff --git a/apps/pwa/src/main.scss b/apps/pwa/src/main.scss
@@ -1,6 +1,13 @@
 @import "./scss/themes.scss";
 @import "./scss/theming.scss";
 
+:root {
+  --safe-area-inset-top: env(safe-area-inset-top, 0px);
+  --safe-area-inset-right: env(safe-area-inset-right, 0px);
+  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-inset-left: env(safe-area-inset-left, 0px);
+}
+
 * {
   box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

diff --git a/apps/pwa/src/services/safe-inset.ts b/apps/pwa/src/services/safe-inset.ts
@@ -0,0 +1,46 @@
+import NativeBridge from "@/NativeBridge";
+import { useFlagStore } from "./flags";
+
+export function loadHybridSafeInsets() {
+  const flags = useFlagStore.getState();
+
+  if (!flags.isHybrid) {
+    return;
+  }
+
+  if (!flags.isAndroid) {
+    return;
+  }
+
+  const insetJson = NativeBridge.getSafeInset();
+  if (!insetJson) {
+    return;
+  }
+
+  const values = {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  };
+
+  try {
+    const inset = JSON.parse(insetJson);
+    Object.assign(values, inset);
+
+    // Apply pixel ratio
+    values.top /= window.devicePixelRatio;
+    values.bottom /= window.devicePixelRatio;
+    values.left /= window.devicePixelRatio;
+    values.right /= window.devicePixelRatio;
+  } catch {
+    // noop
+  }
+
+  const root = document.documentElement;
+
+  root.style.setProperty("--safe-area-inset-top", `${values.top}px`);
+  root.style.setProperty("--safe-area-inset-right", `${values.right}px`);
+  root.style.setProperty("--safe-area-inset-bottom", `${values.bottom}px`);
+  root.style.setProperty("--safe-area-inset-left", `${values.left}px`);
+}