Storage-Info hinzugefügt

public/html/application/fragment/settings.html

@@ -1 +1 @@
-<div class="max-height fill-me"><div class="row max-width grow flex-center"><div class="columns small-centered small-12 smedium-11 medium-9 large-7"><div class="row setting-row hidden" id=install-button><span class="columns small-6" data-translation=install></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=theme-chooser><span class="columns small-6" data-translation=theme></span> <span class="columns small-6 text-right"><div id=theme-name></div></span></div><label class="switch row setting-row"><span class="columns small-6" data-translation=sound></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=play-sound name=play-sound value=1 data-default=1> <span class=slider></span></span></label> <label class="switch row setting-row"><span class="columns small-6" data-translation=music></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=play-music name=play-music value=1 data-default=1> <span class=slider></span></span></label><div class="row setting-row" id=credits-button><span class="columns small-6" data-translation=credits></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=privacy-policy-button><span class="columns small-6" data-translation=privacy-policy></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=impressum-button><span class="columns small-6" data-translation=impressum></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=contact-button><span class="columns small-6" data-translation=contact></span> <span class="columns small-6 text-right" data-translation=">"></span></div><label class="switch row setting-row"><span class="columns small-6" data-translation=track></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=track-switch name=matomoShouldTrack value=1 data-default=1 data-raw=1> <span class=slider></span></span></label> <button id=reset-levels class="button hidden" data-translation=reset-levels></button></div></div></div>
+<div class="max-height fill-me"><div class="row max-width grow flex-center"><div class="columns small-centered small-12 smedium-11 medium-9 large-7"><div class="row setting-row hidden" id=install-button><span class="columns small-6" data-translation=install></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=theme-chooser><span class="columns small-6" data-translation=theme></span> <span class="columns small-6 text-right"><div id=theme-name></div></span></div><label class="switch row setting-row"><span class="columns small-6" data-translation=sound></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=play-sound name=play-sound value=1 data-default=1> <span class=slider></span></span></label> <label class="switch row setting-row"><span class="columns small-6" data-translation=music></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=play-music name=play-music value=1 data-default=1> <span class=slider></span></span></label><div class="row setting-row" id=credits-button><span class="columns small-6" data-translation=credits></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=privacy-policy-button><span class="columns small-6" data-translation=privacy-policy></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=impressum-button><span class="columns small-6" data-translation=impressum></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=contact-button><span class="columns small-6" data-translation=contact></span> <span class="columns small-6 text-right" data-translation=">"></span></div><label class="switch row setting-row"><span class="columns small-6" data-translation=track></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=track-switch name=matomoShouldTrack value=1 data-default=1 data-raw=1> <span class=slider></span></span></label><div class="row setting-row"><div class="column hidden" id=storage-info></div></div><button id=reset-levels class="button hidden" data-translation=reset-levels></button></div></div></div>

public/js/app.js

@@ -5340,6 +5340,50 @@ InitPromise.addPromise(() => {
     });
 });
 
+// AndroidBridge.addDefinition(() => {
+    // window["soundManagerInstance"] = SoundManager.getInstance();
+    // window["soundManagerInstance"]["stopAll"] = window["soundManagerInstance"].stopAll;
+    // window["soundManagerInstance"]["resumeAllIfNotMuted"] = window["soundManagerInstance"].resumeAllIfNotMuted;
+// });
+
+class StorageManager {
+    static getInstance() {
+        if (Helper.isNull(StorageManager.instance)) {
+            StorageManager.instance = new StorageManager();
+        }
+        return StorageManager.instance;
+    }
+
+    async estimate() {
+        if ('storage' in navigator && 'estimate' in navigator.storage) {
+            // We've got the real thing! Return its response.
+            return navigator.storage.estimate();
+        }
+
+        if ('webkitTemporaryStorage' in navigator &&
+            'queryUsageAndQuota' in navigator.webkitTemporaryStorage) {
+            // Return a promise-based wrapper that will follow the expected interface.
+            return new Promise(function (resolve, reject) {
+                navigator.webkitTemporaryStorage.queryUsageAndQuota(
+                    function (usage, quota) {
+                        resolve({usage: usage, quota: quota});
+                    },
+                    reject
+                );
+            });
+        }
+        // If we can't estimate the values, return a Promise that resolves with NaN.
+        return Promise.resolve({usage: NaN, quota: NaN});
+    }
+
+    canEstimateStorage() {
+        return ('storage' in navigator && 'estimate' in navigator.storage || 'webkitTemporaryStorage' in navigator &&
+            'queryUsageAndQuota' in navigator.webkitTemporaryStorage);
+    }
+}
+
+StorageManager.instance = null;
+
 class Code {
     constructor(args) {
         if (typeof args === "string") {
@@ -6772,6 +6816,9 @@ class LevelSite extends WordRotatorBaseSite {
 
                     break;
                 }
+                default:{
+                    this._siteContent.classList.remove("tutorial");
+                }
             }
         }
         else if (this.level.id === LevelSite.TUTORIAL.SECOND_LEVEL) {
@@ -6799,6 +6846,9 @@ class LevelSite extends WordRotatorBaseSite {
                     scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2);
                     break;
                 }
+                default:{
+                    this._siteContent.classList.remove("tutorial");
+                }
             }
         }
         else if (this.level.id === LevelSite.TUTORIAL.BIG_SEGMENT_LEVEL) {
@@ -6834,6 +6884,9 @@ class LevelSite extends WordRotatorBaseSite {
 
                     break;
                 }
+                default:{
+                    this._siteContent.classList.remove("tutorial");
+                }
             }
         }
     }
@@ -7242,7 +7295,7 @@ class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
                 installButton.classList.add("hidden");
                 InstallManager.prompt().then((e) => {
                     console.log("clicked", e);
-                    if (e["outcome"] === "accepted"){
+                    if (e["outcome"] === "accepted") {
                         Matomo.trackEvent("installed", "installed");
                     }
                 });
@@ -7250,6 +7303,19 @@ class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
             installButton.classList.remove("hidden");
         });
 
+        let storageManager = StorageManager.getInstance();
+        if (storageManager.canEstimateStorage()) {
+            console.log("can estimate storage!");
+            storageManager.estimate().then(storage => {
+                let storageObject = this.findBy("#storage-info");
+            console.log("estimating storage 2", storageObject);
+                storageObject.appendChild(Translator.makePersistentTranslation("storage-info", [Math.round(storage.usage/(1024*1024)*100)/100, Math.round(storage.quota/(1024*1024)*100)/100, Math.round(storage.usage/storage.quota*10000)/100]));
+            console.log("estimating storage 3", storage);
+                storageObject.classList.remove("hidden");
+            console.log("estimating storage 4", storage);
+            });
+        }
+
         return super.onFirstStart();
     }