From 5072ea5ab5110820e99058ea9faab71950f8f7ce Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Fri, 2 Sep 2022 12:33:09 +0300
Subject: [PATCH] change viewport size justification to use a javascript
 solution

---
 frontend/public/global.css | 27 ++-------------------------
 frontend/src/responsive.js | 25 +++++++++++++++++++++++++
 frontend/src/storage.js    | 21 +++++++++++++++++++--
 3 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index 9965eec..4e988b1 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -65,9 +65,6 @@
 	--radius-lg: calc(2 * var(--radius-unit));
 	--radius-xl: calc(3.25 * var(--radius-unit));
 	--radius-xxl: calc(5.25 * var(--sradius-unit));
-
-	--100vw: calc(100.0 * 1vw);
-	--100vh: calc(100.0 * 1vh);
 }
 
 html, body {
@@ -77,12 +74,8 @@ html, body {
 	color-scheme: dark;
 	accent-color: var(--purple-2);
 
-	width: 100%;
-	height: 100%;
-	min-width: 100%;
-	min-height: 100%;
-	max-width: 100%;
-	max-height: 100%;
+	width: var(--viewportWidth);
+	height: var(--viewportHeight);
 }
 
 body {
@@ -99,22 +92,6 @@ body {
 	flex-direction: column;
 }
 
-@supports(width: 1dvw) {
-	html, body {
-		min-width: 100dvw;
-		max-width: 100dvw;
-		width: 100dvw;
-	}
-}
-
-@supports(height: 1dvh) {
-	html, body {
-		min-height: 100dvh;
-		max-height: 100dvh;
-		height: 100dvh;
-	}
-}
-
 /* fullscreen message */
 
 .fullscreen-message {
diff --git a/frontend/src/responsive.js b/frontend/src/responsive.js
index d6a2bf2..3fdd2f4 100644
--- a/frontend/src/responsive.js
+++ b/frontend/src/responsive.js
@@ -1,6 +1,31 @@
+import { getItem } from "./storage";
 import { showSidebar, smallViewport } from "./stores";
 
+function initViewportSizeHandler() {
+    const root = document.querySelector(':root');
+    const method = getItem("ui:useragent:viewportSizeJustificationMethod");
+
+    if (method === "dynamicViewportUnits") {
+        root.style.setProperty("--viewportWidth", "100dvw");
+        root.style.setProperty("--viewportHeight", "100dvh");
+    } else if (method === "javascriptResponsive") {
+        const updateUnits = () => {
+            root.style.setProperty("--viewportWidth", `${window.innerWidth}px`);
+            root.style.setProperty("--viewportHeight", `${window.innerHeight}px`);
+        };
+        window.addEventListener("resize", updateUnits);
+        updateUnits();
+    } else if (method === "normalUnits") {
+        root.style.setProperty("--viewportWidth", "100vw");
+        root.style.setProperty("--viewportHeight", "100vh");
+    } else {
+        throw new Error("initViewportSizeHandler(): got unexpected value from getItem('ui:useragent:viewportSizeJustificationMethod').");
+    }
+}
+
 export function initResponsiveHandlers() {
+    initViewportSizeHandler();
+
     const mediaQuery = window.matchMedia('(min-width: 768px)');
 
     const update = ({ matches }) => {
diff --git a/frontend/src/storage.js b/frontend/src/storage.js
index ed32924..8359942 100644
--- a/frontend/src/storage.js
+++ b/frontend/src/storage.js
@@ -13,7 +13,20 @@ const defaults = {
     "ui:online:processRemoteTypingEvents": true,
     "ui:online:processRemotePresenceEvents": true,
     "ui:online:loadMessageHistory": true,
-    "ui:online:sendTypingUpdates": true
+    "ui:online:sendTypingUpdates": true,
+
+    "ui:useragent:formFactor": () => {
+        return (window.navigator && window.navigator.maxTouchPoints > 0) ? "touch" : "desktop";
+    },
+    "ui:useragent:viewportSizeJustificationMethod": () => {
+        if (CSS.supports("(width: 1dvw)")) {
+            return "dynamicViewportUnits";
+        } else if (getItem("ui:useragent:formFactor") === "touch") {
+            return "javascriptResponsive";
+        } else {
+            return "normalUnits";
+        }
+    }
 };
 const store = new Map(Object.entries(defaults));
 const persistentProvider = localStorage;
@@ -30,7 +43,11 @@ export function getItem(key) {
     if (!didCacheProvider) {
         init();
     }
-    return store.get(key);
+    const value = store.get(key);
+    if (typeof value === "function") {
+        return value();
+    }
+    return value;
 }
 
 export function removeItem(key) {