Merge pull request #57 from stephane-r/settings-storage-ui

Settings storage UI

package.json

@@ -40,6 +40,7 @@
     "postcss": "^8.4.31",
     "postcss-preset-mantine": "^1.9.0",
     "postcss-simple-vars": "^7.0.1",
+    "pretty-bytes": "^6.1.1",
     "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-audio-player": "^0.17.0",

src/hooks/useStorage.ts

@@ -0,0 +1,32 @@
+import prettyBytes from "pretty-bytes";
+import { useEffect, useState } from "react";
+
+interface Storage extends StorageEstimate {
+  formatedQuota: string;
+  formatedUsage: string;
+  percentageUsed: number;
+  remaining: number;
+}
+
+export const useStorage = (): Storage | null => {
+  const [storage, setStorage] = useState<Storage | null>(null);
+
+  useEffect(() => {
+    if ("storage" in navigator && "estimate" in navigator.storage) {
+      navigator.storage.estimate().then(({ quota, usage }) => {
+        if (usage !== undefined && quota) {
+          setStorage({
+            usage,
+            quota,
+            formatedQuota: prettyBytes(quota),
+            formatedUsage: prettyBytes(usage),
+            percentageUsed: (usage / quota) * 100,
+            remaining: quota - usage,
+          });
+        }
+      });
+    }
+  }, []);
+
+  return storage;
+};

src/pages/Settings.tsx

@@ -1,11 +1,12 @@
 import {
   Accordion,
+  Box,
   Divider,
   Group,
   SegmentedControl,
   Text,
 } from "@mantine/core";
-import { memo, useState } from "react";
+import { memo, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { ChangeLanguage } from "../components/ChangeLanguage";
@@ -17,6 +18,7 @@ import { SaveData } from "../components/SaveData";
 import { SelectInvidiousInstance } from "../components/SelectInvidiousInstance";
 import { SponsorBlockSettings } from "../components/SponsorBlockSettings";
 import { SwitchVideoMode } from "../components/SwitchVideoMode";
+import { useStorage } from "../hooks/useStorage";
 
 export const SettingsPage = memo(() => {
   const { t } = useTranslation();
@@ -57,11 +59,46 @@ const GeneralItem = memo(() => {
         <ChangeLanguage />
         <Divider mt="md" mb="lg" />
         <SwitchColorScheme />
+        <Divider mt="md" mb="lg" />
+        <StorageEstimate />
       </Accordion.Panel>
     </Accordion.Item>
   );
 });
 
+const StorageEstimate = memo(() => {
+  const storage = useStorage();
+  const hasUsage = useMemo(
+    () => storage?.usage && storage?.usage > 0,
+    [storage],
+  );
+  const { t } = useTranslation();
+
+  if (!storage) {
+    return null;
+  }
+
+  return (
+    <Box>
+      <Text>
+        {t("settings.general.storage.available.storage")} :{" "}
+        <strong>{storage.formatedQuota}</strong>
+      </Text>
+      <Text>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: t("settings.general.storage.usage", {
+              percentage: `<strong>${storage.percentageUsed}%</strong> ${
+                hasUsage ? `(${storage.formatedUsage})` : ""
+              }`,
+            }),
+          }}
+        />
+      </Text>
+    </Box>
+  );
+});
+
 const PlayerItem = memo(() => {
   const { t } = useTranslation("translation", {
     keyPrefix: "settings.player",

src/translations/de.json

@@ -13,7 +13,6 @@
   "settings.general.invidious.button.add": "Eigene Domain hinzufügen",
   "settings.general.language": "Sprache auswählen",
   "settings.general.language.description": "App-Sprache auswählen",
-  "settings.general.language.alert": "Nach jetzigen Stand, ist Holoplay nur in der Englischen Sprache verfügbar. Eine Übersetzung ins französische kommt demnächst. Du kannst HoloPlay auch gerne in eine neue Sprache übersetzen und so das Projekt unterstützen!",
   "settings.general.language.alert.title": "Information",
   "settings.general.darkmode": "Nutze Dunkelmodus",
   "settings.player.title": "Player",

src/translations/en.json

@@ -13,9 +13,10 @@
   "settings.general.invidious.button.add": "Add custom domain",
   "settings.general.language": "Choose language",
   "settings.general.language.description": "Select app language",
-  "settings.general.language.alert": "For now, HoloPlay is only available in English language. French translation is comming soon. Also, you can contribute to new language.",
   "settings.general.language.alert.title": "Information",
   "settings.general.darkmode": "Use dark mode",
+  "settings.general.storage.available.storage": "Available storage",
+  "settings.general.storage.usage": "You've used {{percentage}} of the available storage",
   "settings.player.title": "Player",
   "settings.player.description": "Player settings",
   "settings.player.video.mode.title": "Video mode",

src/translations/fr.json

@@ -12,9 +12,11 @@
   "settings.general.invidious.delete": "Supprimer",
   "settings.general.invidious.button.add": "Ajouter un domaine personnalisé",
   "settings.general.language": "Langage",
-  "settings.general.language.description": "Selectionner la langue de l'application",
+  "settings.general.language.description": "Sélectionner la langue de l'application",
   "settings.general.language.alert.title": "Information",
   "settings.general.darkmode": "Mode sombre",
+  "settings.general.storage.available.storage": "Stockage disponible",
+  "settings.general.storage.usage": "Vous utilisez {{percentage}} du stockage disponible",
   "settings.player.title": "Player",
   "settings.player.description": "Paramètrage du player",
   "settings.player.video.mode.title": "Mode vidéo",

src/translations/ja.json

@@ -13,7 +13,6 @@
   "settings.general.invidious.button.add": "好きなドメインを追加",
   "settings.general.language": "言語の選択",
   "settings.general.language.description": "アプリの言語を選択",
-  "settings.general.language.alert": "英語のほかフランス語でも利用できます。あなたの言語の翻訳を寄稿をお待ちしています。",
   "settings.general.language.alert.title": "情報",
   "settings.general.darkmode": "ダークモードを使用",
   "settings.player.title": "プレイヤー",

src/translations/ru.json

@@ -13,7 +13,6 @@
   "settings.general.invidious.button.add": "Добавить пользовательский домен",
   "settings.general.language": "Выбрать язык",
   "settings.general.language.description": "Выбрать язык приложения",
-  "settings.general.language.alert": "На данный момент HoloPlay доступен только на английском языке. Скоро будет французский перевод. Кроме того, вы можете внести свой вклад в новый язык.",
   "settings.general.language.alert.title": "Информация",
   "settings.general.darkmode": "Использовать темный режим",
   "settings.player.title": "Плеер",