Changes for legacy browsers

mbf-site/package.json

@@ -4,6 +4,9 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-syntax-bigint": "^7.8.3",
+    "@babel/preset-env": "^7.28.3",
     "@emotion/react": "^11.11.4",
     "@fontsource/roboto": "^5.0.12",
     "@testing-library/jest-dom": "^5.14.1",
@@ -15,17 +18,21 @@
     "@types/w3c-web-usb": "^1.0.10",
     "@types/react-dom": "^18.0.0",
     "@types/semver": "^7.5.8",
+    "@vitejs/plugin-legacy": "^7.2.1",
     "@vitejs/plugin-react": "^4.2.1",
     "@yume-chan/adb": "workspace:^",
     "@yume-chan/adb-credential-web": "workspace:^",
     "@yume-chan/adb-daemon-webusb": "workspace:^",
     "@yume-chan/stream-extra": "workspace:^",
+    "core-js": "^3.46.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-spinners": "^0.14.1",
     "react-toastify": "^10.0.5",
     "semver": "^7.6.0",
+    "terser": "^5.44.0",
     "vite": "^5.2.8",
+    "vite-plugin-babel": "^1.3.2",
     "vite-plugin-mkcert": "^1.17.5",
     "vite-tsconfig-paths": "^4.3.2",
     "web-vitals": "^2.1.0",
@@ -48,7 +55,8 @@
     "production": [
       ">0.2%",
       "not dead",
-      "not op_mini all"
+      "not op_mini all",
+      "chrome >= 74"
     ],
     "development": [
       "last 1 chrome version",

mbf-site/src/AnimatedBackground.tsx

@@ -314,7 +314,7 @@ export function setBgUserPreference(showBg: boolean) {
 // Updates whether or not the background is visible based upon the current user settings
 // and whether the platform is mobile or desktop.
 export function updateBackgroundVisibility() {
-	const showBackground = getBgUserPreference() && !isViewingOnMobile() && Animation !== undefined;
+	const showBackground = getBgUserPreference() && !isViewingOnMobile() && document.body.animate !== undefined;
 	if(showBackground && !isBackgroundVisible()) {
 		createAnimatedBackground();
 	}	else if(!showBackground && isBackgroundVisible()) {

mbf-site/src/css/ModRepoCard.css

@@ -1,5 +1,6 @@
 .modRepoCard {
-    width: min(40rem, 95%);
+    width: 95%;
+    max-width: 40rem;
     padding: 2px;
     display: grid;
     flex-direction: row;

mbf-site/src/css/Modal.css

@@ -18,11 +18,13 @@
 .modal {
     margin: 5rem auto auto;
     background-color: #1f1f1f;
-    max-width: min(30rem, 95%);
+    width: 95%;
+    max-width: 30rem;
 }
 
 .screenWidth {
-    width: min(30rem, 85vw);
+    width: calc(100vw - 6rem);
+    max-width: 30rem;
 }
 
 .syncingWindow {

mbf-site/src/css/index.css

@@ -42,7 +42,8 @@ a {
 }
 
 .mainContainer {
-    max-width: min(40rem, 95vw);
+    width: 95vw;
+    max-width: 40rem;
     overflow: hidden;
 }
 

mbf-site/vite.config.ts

@@ -2,15 +2,47 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
 import mkcert from 'vite-plugin-mkcert'
+import legacy from '@vitejs/plugin-legacy'
+//@ts-ignore
+import type { PluginObj } from '@babel/core'
+import babel from 'vite-plugin-babel'
+
+function babelTransformBigInt(): PluginObj {
+    return {
+        visitor: {
+            BigIntLiteral(path: any) {
+                const value = path.node.value // string representation of the number
+                path.replaceWithSourceString(`BigInt("${value}")`)
+            },
+        },
+    }
+}
 
 export default defineConfig({
     base: process.env.BASE_URL ?? './',
-    plugins: [react(), viteTsconfigPaths(), mkcert()],
+    plugins: [
+
+        react(), 
+        viteTsconfigPaths(), 
+        mkcert(),
+babel({
+            babelConfig: {
+                plugins: [babelTransformBigInt],
+            }
+        }),
+        legacy({ 
+            targets: ['chrome >= 74']
+        }), 
+    ],
     server: {
         open: process.env.BROWSER='chrome',
         port: 3000,
         https: true,
     },
+    preview: {
+        port: 3000,
+        https: true,
+    },
     build: {
         sourcemap: true
     },