From 7459985e00969009ea3bc84f4b0e5bf6ab103aeb Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 20 Oct 2020 17:50:43 +0200
Subject: [PATCH] show storage usage in settings

---
 src/domain/RootViewModel.js                   |  3 ++-
 src/domain/session/SessionViewModel.js        |  4 +++-
 .../session/settings/SettingsViewModel.js     | 24 +++++++++++++++++++
 src/main.js                                   |  4 +++-
 src/ui/web/dom/StorageEstimate.js             | 24 +++++++++++++++++++
 src/ui/web/session/settings/SettingsView.js   |  1 +
 6 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/ui/web/dom/StorageEstimate.js

diff --git a/src/domain/RootViewModel.js b/src/domain/RootViewModel.js
index a5ba1da3..6669b778 100644
--- a/src/domain/RootViewModel.js
+++ b/src/domain/RootViewModel.js
@@ -127,7 +127,8 @@ export class RootViewModel extends ViewModel {
         this._setSection(() => {
             this._sessionViewModel = new SessionViewModel(this.childOptions({
                 sessionContainer,
-                updateService: this.getOption("updateService")
+                updateService: this.getOption("updateService"),
+                estimateStorageUsage: this.getOption("estimateStorageUsage"),
             }));
             this._sessionViewModel.start();
         });
diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js
index 081e9f16..ed779747 100644
--- a/src/domain/session/SessionViewModel.js
+++ b/src/domain/session/SessionViewModel.js
@@ -189,8 +189,10 @@ export class SessionViewModel extends ViewModel {
         if (settingsOpen) {
             this._settingsViewModel = this.track(new SettingsViewModel(this.childOptions({
                 updateService: this.getOption("updateService"),
-                session: this._sessionContainer.session
+                session: this._sessionContainer.session,
+                estimateStorageUsage: this.getOption("estimateStorageUsage")
             })));
+            this._settingsViewModel.load();
         }
         this.emitChange("activeSection");
     }
diff --git a/src/domain/session/settings/SettingsViewModel.js b/src/domain/session/settings/SettingsViewModel.js
index 76931884..fce74294 100644
--- a/src/domain/session/settings/SettingsViewModel.js
+++ b/src/domain/session/settings/SettingsViewModel.js
@@ -35,6 +35,13 @@ export class SettingsViewModel extends ViewModel {
         this._session = session;
         this._sessionBackupViewModel = this.track(new SessionBackupViewModel(this.childOptions({session})));
         this._closeUrl = this.urlCreator.urlUntilSegment("session");
+        this._estimateStorageUsage = options.estimateStorageUsage;
+        this._estimate = null;
+    }
+
+    async load() {
+        this._estimate = await this._estimateStorageUsage();
+        this.emitChange("");
     }
 
     get closeUrl() {
@@ -71,4 +78,21 @@ export class SettingsViewModel extends ViewModel {
     get sessionBackupViewModel() {
         return this._sessionBackupViewModel;
     }
+
+    get storageQuota() {
+        return this._formatBytes(this._estimate?.quota);
+    }
+
+    get storageUsage() {
+        return this._formatBytes(this._estimate?.usage);
+    }
+
+    _formatBytes(n) {
+        if (typeof n === "number") {
+            return Math.round(n / (1024 * 1024)).toFixed(1) + " MB";
+        } else {
+            return this.i18n`unknown`;
+        }
+    }
 }
+
diff --git a/src/main.js b/src/main.js
index 2626b2f9..1eb29c4c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,6 +29,7 @@ import {ServiceWorkerHandler} from "./ui/web/dom/ServiceWorkerHandler.js";
 import {History} from "./ui/web/dom/History.js";
 import {OnlineStatus} from "./ui/web/dom/OnlineStatus.js";
 import {CryptoDriver} from "./ui/web/dom/CryptoDriver.js";
+import {estimateStorageUsage} from "./ui/web/dom/StorageEstimate.js";
 import {WorkerPool} from "./utils/WorkerPool.js";
 import {OlmWorker} from "./matrix/e2ee/OlmWorker.js";
 
@@ -147,7 +148,8 @@ export async function main(container, paths, legacyExtras) {
             // so we call it that in the view models
             urlCreator: urlRouter,
             navigation,
-            updateService: serviceWorkerHandler
+            updateService: serviceWorkerHandler,
+            estimateStorageUsage
         });
         window.__hydrogenViewModel = vm;
         await vm.load();
diff --git a/src/ui/web/dom/StorageEstimate.js b/src/ui/web/dom/StorageEstimate.js
new file mode 100644
index 00000000..cc6eef32
--- /dev/null
+++ b/src/ui/web/dom/StorageEstimate.js
@@ -0,0 +1,24 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export async function estimateStorageUsage() {
+    if (navigator?.storage?.estimate) {
+        const {quota, usage} = await navigator.storage.estimate();
+        return {quota, usage};
+    } else {
+        return {quota: null, usage: null};
+    }
+}
diff --git a/src/ui/web/session/settings/SettingsView.js b/src/ui/web/session/settings/SettingsView.js
index 82e41939..e350d806 100644
--- a/src/ui/web/session/settings/SettingsView.js
+++ b/src/ui/web/session/settings/SettingsView.js
@@ -48,6 +48,7 @@ export class SettingsView extends TemplateView {
                 t.view(new SessionBackupSettingsView(vm.sessionBackupViewModel)),
                 t.h3("Application"),
                 row(vm.i18n`Version`, version),
+                row(vm.i18n`Storage usage`, vm => `${vm.storageUsage} / ${vm.storageQuota}`),
             ])
         ]);
     }