Bump

web/src/app/utils.js

@@ -1,4 +1,3 @@
-import { Base64 } from "js-base64";
 import beep from "../sounds/beep.mp3";
 import juntos from "../sounds/juntos.mp3";
 import pristine from "../sounds/pristine.mp3";
@@ -63,9 +62,14 @@ export const unmatchedTags = (tags) => {
   return tags.filter((tag) => !(tag in emojisMapped));
 };
 
-export const encodeBase64 = (s) => Base64.encode(s);
+export const encodeBase64 = (s) => {
+  const bytes = new TextEncoder().encode(s);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += 1) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+};
 
-export const encodeBase64Url = (s) => Base64.encodeURI(s);
+export const encodeBase64Url = (s) => encodeBase64(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 
 export const bearerAuth = (token) => `Bearer ${token}`;
 
@@ -151,6 +155,26 @@ export const formatShortDateTime = (timestamp, language) =>
 export const formatShortDate = (timestamp, language) =>
   new Intl.DateTimeFormat(getKebabCaseLangStr(language), { dateStyle: "short" }).format(new Date(timestamp * 1000));
 
+export const formatShortDuration = (ms, language) => {
+  const seconds = Math.round(ms / 1000);
+  const units = [
+    { unit: "year", s: 31536000 },
+    { unit: "month", s: 2592000 },
+    { unit: "week", s: 604800 },
+    { unit: "day", s: 86400 },
+    { unit: "hour", s: 3600 },
+    { unit: "minute", s: 60 },
+    { unit: "second", s: 1 },
+  ];
+  const match = units.find((u) => seconds >= u.s) ?? units[units.length - 1];
+  const value = Math.round(seconds / match.s);
+  return new Intl.NumberFormat(getKebabCaseLangStr(language), {
+    style: "unit",
+    unit: match.unit,
+    unitDisplay: "long",
+  }).format(value);
+};
+
 export const formatBytes = (bytes, decimals = 2) => {
   if (bytes === 0) return "0 bytes";
   const k = 1024;

web/src/components/Account.jsx

@@ -39,13 +39,12 @@ import EditIcon from "@mui/icons-material/Edit";
 import { Trans, useTranslation } from "react-i18next";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import humanizeDuration from "humanize-duration";
 import CelebrationIcon from "@mui/icons-material/Celebration";
 import CloseIcon from "@mui/icons-material/Close";
 import { ContentCopy, Public } from "@mui/icons-material";
 import AddIcon from "@mui/icons-material/Add";
 import routes from "./routes";
-import { copyToClipboard, formatBytes, formatShortDate, formatShortDateTime, openUrl } from "../app/utils";
+import { copyToClipboard, formatBytes, formatShortDate, formatShortDateTime, formatShortDuration, openUrl } from "../app/utils";
 import accountApi, { LimitBasis, Role, SubscriptionInterval, SubscriptionStatus } from "../app/AccountApi";
 import { Pref, PrefGroup } from "./Pref";
 import db from "../app/db";
@@ -896,10 +895,7 @@ const Stats = () => {
           title={t("account_usage_attachment_storage_title")}
           description={t("account_usage_attachment_storage_description", {
             filesize: formatBytes(account.limits.attachment_file_size),
-            expiry: humanizeDuration(account.limits.attachment_expiry_duration * 1000, {
-              language: i18n.resolvedLanguage,
-              fallbacks: ["en"],
-            }),
+            expiry: formatShortDuration(account.limits.attachment_expiry_duration * 1000, i18n.resolvedLanguage),
           })}
         >
           <div>

web/src/components/ErrorBoundary.jsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import StackTrace from "stacktrace-js";
-import { CircularProgress, Link, Button } from "@mui/material";
+import { Link, Button } from "@mui/material";
 import { Trans, withTranslation } from "react-i18next";
 import { copyToClipboard } from "../app/utils";
 
@@ -9,8 +8,7 @@ class ErrorBoundaryImpl extends React.Component {
     super(props);
     this.state = {
       error: false,
-      originalStack: null,
-      niceStack: null,
+      stack: null,
       unsupportedIndexedDB: false,
     };
   }
@@ -32,23 +30,17 @@ class ErrorBoundaryImpl extends React.Component {
   }
 
   handleError(error, info) {
-    // Immediately render original stack trace
-    const prettierOriginalStack = info.componentStack
+    const componentStack = info.componentStack
       .trim()
       .split("\n")
       .map((line) => `  at ${line}`)
       .join("\n");
+    const parts = [error.toString()];
+    if (error.stack) parts.push(error.stack);
+    parts.push(componentStack);
     this.setState({
       error: true,
-      originalStack: `${error.toString()}\n${prettierOriginalStack}`,
-    });
-
-    // Fetch additional info and a better stack trace
-    StackTrace.fromError(error).then((stack) => {
-      console.error("[ErrorBoundary] Stacktrace fetched", stack);
-      const stackString = stack.map((el) => `  at ${el.functionName} (${el.fileName}:${el.columnNumber}:${el.lineNumber})`).join("\n");
-      const niceStack = `${error.toString()}\n${stackString}`;
-      this.setState({ niceStack });
+      stack: parts.join("\n"),
     });
   }
 
@@ -60,12 +52,7 @@ class ErrorBoundaryImpl extends React.Component {
   }
 
   copyStack() {
-    let stack = "";
-    if (this.state.niceStack) {
-      stack += `${this.state.niceStack}\n\n`;
-    }
-    stack += `${this.state.originalStack}\n`;
-    copyToClipboard(stack);
+    copyToClipboard(`${this.state.stack}\n`);
   }
 
   renderUnsupportedIndexedDB() {
@@ -112,14 +99,7 @@ class ErrorBoundaryImpl extends React.Component {
           </Button>
         </div>
         <h3>{t("error_boundary_stack_trace")}</h3>
-        {this.state.niceStack ? (
-          <pre>{this.state.niceStack}</pre>
-        ) : (
-          <>
-            <CircularProgress size="20px" sx={{ verticalAlign: "text-bottom" }} /> {t("error_boundary_gathering_info")}
-          </>
-        )}
-        <pre>{this.state.originalStack}</pre>
+        <pre>{this.state.stack}</pre>
       </div>
     );
   }