Adds settings options and localUser functions

front/src/Components/Menu/SettingsSubMenu.svelte

@@ -8,243 +8,275 @@
     import { displayableLocales, setCurrentLocale } from "../../i18n/locales";
     import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
 
-    let fullscreen: boolean = localUserStore.getFullscreen();
-    let notification: boolean = localUserStore.getNotification() === "granted";
-    let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger();
-    let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests();
-    let valueGame: number = localUserStore.getGameQualityValue();
-    let valueVideo: number = localUserStore.getVideoQualityValue();
-    let valueLocale: string = $locale;
-    let previewValueGame = valueGame;
-    let previewValueVideo = valueVideo;
-    let previewValueLocale = valueLocale;
+  let fullscreen: boolean = localUserStore.getFullscreen();
+  let notification: boolean = localUserStore.getNotification() === "granted";
+  let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger();
+  let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests();
+  let valueGame: number = localUserStore.getGameQualityValue();
+  let valueVideo: number = localUserStore.getVideoQualityValue();
+  let valueLocale: string = $locale;
+  let valuePrivacySettings = localUserStore.getPrivacySettings();
 
-    function saveSetting() {
-        let change = false;
+  let previewValueGame = valueGame;
+  let previewValueVideo = valueVideo;
+  let previewValueLocale = valueLocale;
+  let previewPrivacySettings = valuePrivacySettings; // TODO: retreive from local storage
 
-        if (valueLocale !== previewValueLocale) {
-            previewValueLocale = valueLocale;
-            setCurrentLocale(valueLocale as Locales);
-        }
+  function saveSetting() {
+    let change = false;
 
-        if (valueVideo !== previewValueVideo) {
-            previewValueVideo = valueVideo;
-            videoConstraintStore.setFrameRate(valueVideo);
-        }
-
-        if (valueGame !== previewValueGame) {
-            previewValueGame = valueGame;
-            localUserStore.setGameQualityValue(valueGame);
-            change = true;
-        }
-
-        if (change) {
-            window.location.reload();
-        }
-
-        closeMenu();
+    if (valueLocale !== previewValueLocale) {
+      previewValueLocale = valueLocale;
+      setCurrentLocale(valueLocale as Locales);
     }
 
-    function changeFullscreen() {
-        const body = HtmlUtils.querySelectorOrFail("body");
-        if (body) {
-            if (document.fullscreenElement !== null && !fullscreen) {
-                document.exitFullscreen().catch((e) => console.error(e));
-            } else {
-                body.requestFullscreen().catch((e) => console.error(e));
-            }
-            localUserStore.setFullscreen(fullscreen);
-        }
+    if (valueVideo !== previewValueVideo) {
+      previewValueVideo = valueVideo;
+      videoConstraintStore.setFrameRate(valueVideo);
     }
 
-    function changeNotification() {
-        if (Notification.permission === "granted") {
+    if (valueGame !== previewValueGame) {
+      previewValueGame = valueGame;
+      localUserStore.setGameQualityValue(valueGame);
+      change = true;
+    }
+
+    if (valuePrivacySettings !== previewPrivacySettings) {
+      console.log(`was: ${previewPrivacySettings} | is: ${valuePrivacySettings}`)
+      localUserStore.setPrivacySettings(valuePrivacySettings);
+    }
+
+    if (change) {
+      window.location.reload();
+    }
+
+    closeMenu();
+  }
+
+  function changeFullscreen() {
+    const body = HtmlUtils.querySelectorOrFail("body");
+    if (body) {
+      if (document.fullscreenElement !== null && !fullscreen) {
+        document.exitFullscreen().catch((e) => console.error(e));
+      } else {
+        body.requestFullscreen().catch((e) => console.error(e));
+      }
+      localUserStore.setFullscreen(fullscreen);
+    }
+  }
+
+  function changeNotification() {
+    if (Notification.permission === "granted") {
+      localUserStore.setNotification(notification ? "granted" : "denied");
+    } else {
+      Notification.requestPermission()
+        .then((response) => {
+          if (response === "granted") {
             localUserStore.setNotification(notification ? "granted" : "denied");
-        } else {
-            Notification.requestPermission()
-                .then((response) => {
-                    if (response === "granted") {
-                        localUserStore.setNotification(notification ? "granted" : "denied");
-                    } else {
-                        localUserStore.setNotification("denied");
-                        notification = false;
-                    }
-                })
-                .catch((e) => console.error(e));
-        }
+          } else {
+            localUserStore.setNotification("denied");
+            notification = false;
+          }
+        })
+        .catch((e) => console.error(e));
     }
+  }
 
-    function changeForceCowebsiteTrigger() {
-        localUserStore.setForceCowebsiteTrigger(forceCowebsiteTrigger);
-    }
+  function changeForceCowebsiteTrigger() {
+    localUserStore.setForceCowebsiteTrigger(forceCowebsiteTrigger);
+  }
 
-    function changeIgnoreFollowRequests() {
-        localUserStore.setIgnoreFollowRequests(ignoreFollowRequests);
-    }
+  function changeIgnoreFollowRequests() {
+    localUserStore.setIgnoreFollowRequests(ignoreFollowRequests);
+  }
 
-    function closeMenu() {
-        menuVisiblilityStore.set(false);
-    }
+  function closeMenu() {
+    menuVisiblilityStore.set(false);
+  }
 
-    const isMobile = isMediaBreakpointUp("md");
+  const isMobile = isMediaBreakpointUp("md");
 </script>
 
 <div class="settings-main" on:submit|preventDefault={saveSetting}>
-    <section>
-        <h3>{$LL.menu.settings.gameQuality.title()}</h3>
-        <div class="nes-select is-dark">
-            <select bind:value={valueGame}>
-                <option value={120}
-                    >{isMobile
-                        ? $LL.menu.settings.gameQuality.short.high()
-                        : $LL.menu.settings.gameQuality.long.high()}</option
-                >
-                <option value={60}
-                    >{isMobile
-                        ? $LL.menu.settings.gameQuality.short.medium()
-                        : $LL.menu.settings.gameQuality.long.medium()}</option
-                >
-                <option value={40}
-                    >{isMobile
-                        ? $LL.menu.settings.gameQuality.short.small()
-                        : $LL.menu.settings.gameQuality.long.small()}</option
-                >
-                <option value={20}
-                    >{isMobile
-                        ? $LL.menu.settings.gameQuality.short.minimum()
-                        : $LL.menu.settings.gameQuality.long.minimum()}</option
-                >
-            </select>
-        </div>
-    </section>
-    <section>
-        <h3>{$LL.menu.settings.videoQuality.title()}</h3>
-        <div class="nes-select is-dark">
-            <select bind:value={valueVideo}>
-                <option value={30}
-                    >{isMobile
-                        ? $LL.menu.settings.videoQuality.short.high()
-                        : $LL.menu.settings.videoQuality.long.high()}</option
-                >
-                <option value={20}
-                    >{isMobile
-                        ? $LL.menu.settings.videoQuality.short.medium()
-                        : $LL.menu.settings.videoQuality.long.medium()}</option
-                >
-                <option value={10}
-                    >{isMobile
-                        ? $LL.menu.settings.videoQuality.short.small()
-                        : $LL.menu.settings.videoQuality.long.small()}</option
-                >
-                <option value={5}
-                    >{isMobile
-                        ? $LL.menu.settings.videoQuality.short.minimum()
-                        : $LL.menu.settings.videoQuality.long.minimum()}</option
-                >
-            </select>
-        </div>
-    </section>
-    <section>
-        <h3>{$LL.menu.settings.language.title()}</h3>
-        <div class="nes-select is-dark">
-            <select class="languages-switcher" bind:value={valueLocale}>
-                {#each displayableLocales as locale (locale.id)}
-                    <option value={locale.id}>{`${locale.language} (${locale.country})`}</option>
-                {/each}
-            </select>
-        </div>
-    </section>
-    <section class="settings-section-save">
-        <p>{$LL.menu.settings.save.warning()}</p>
-        <button type="button" class="nes-btn is-primary" on:click|preventDefault={saveSetting}
-            >{$LL.menu.settings.save.button()}</button
+  <section>
+    <h3>{$LL.menu.settings.gameQuality.title()}</h3>
+    <div class="nes-select is-dark">
+      <select bind:value={valueGame}>
+        <option value={120}
+        >{isMobile
+          ? $LL.menu.settings.gameQuality.short.high()
+          : $LL.menu.settings.gameQuality.long.high()}</option
         >
-    </section>
-    <section class="settings-section-noSaveOption">
-        <label>
-            <input
-                type="checkbox"
-                class="nes-checkbox is-dark"
-                bind:checked={fullscreen}
-                on:change={changeFullscreen}
-            />
-            <span>{$LL.menu.settings.fullscreen()}</span>
-        </label>
-        <label>
-            <input
-                type="checkbox"
-                class="nes-checkbox is-dark"
-                bind:checked={notification}
-                on:change={changeNotification}
-            />
-            <span>{$LL.menu.settings.notifications()}</span>
-        </label>
-        <label>
-            <input
-                type="checkbox"
-                class="nes-checkbox is-dark"
-                bind:checked={forceCowebsiteTrigger}
-                on:change={changeForceCowebsiteTrigger}
-            />
-            <span>{$LL.menu.settings.cowebsiteTrigger()}</span>
-        </label>
-        <label>
-            <input
-                type="checkbox"
-                class="nes-checkbox is-dark"
-                bind:checked={ignoreFollowRequests}
-                on:change={changeIgnoreFollowRequests}
-            />
-            <span>{$LL.menu.settings.ignoreFollowRequest()}</span>
-        </label>
-    </section>
+        <option value={60}
+        >{isMobile
+          ? $LL.menu.settings.gameQuality.short.medium()
+          : $LL.menu.settings.gameQuality.long.medium()}</option
+        >
+        <option value={40}
+        >{isMobile
+          ? $LL.menu.settings.gameQuality.short.small()
+          : $LL.menu.settings.gameQuality.long.small()}</option
+        >
+        <option value={20}
+        >{isMobile
+          ? $LL.menu.settings.gameQuality.short.minimum()
+          : $LL.menu.settings.gameQuality.long.minimum()}</option
+        >
+      </select>
+    </div>
+  </section>
+  <section>
+    <h3>{$LL.menu.settings.videoQuality.title()}</h3>
+    <div class="nes-select is-dark">
+      <select bind:value={valueVideo}>
+        <option value={30}
+        >{isMobile
+          ? $LL.menu.settings.videoQuality.short.high()
+          : $LL.menu.settings.videoQuality.long.high()}</option
+        >
+        <option value={20}
+        >{isMobile
+          ? $LL.menu.settings.videoQuality.short.medium()
+          : $LL.menu.settings.videoQuality.long.medium()}</option
+        >
+        <option value={10}
+        >{isMobile
+          ? $LL.menu.settings.videoQuality.short.small()
+          : $LL.menu.settings.videoQuality.long.small()}</option
+        >
+        <option value={5}
+        >{isMobile
+          ? $LL.menu.settings.videoQuality.short.minimum()
+          : $LL.menu.settings.videoQuality.long.minimum()}</option
+        >
+      </select>
+    </div>
+  </section>
+  <section>
+    <h3>{$LL.menu.settings.language.title()}</h3>
+    <div class="nes-select is-dark">
+      <select class="languages-switcher" bind:value={valueLocale}>
+        {#each displayableLocales as locale (locale.id)}
+          <option value={locale.id}>{`${locale.language} (${locale.country})`}</option>
+        {/each}
+      </select>
+    </div>
+  </section>
+
+  <section>
+    <h3>{$LL.menu.settings.privacySettings.title()}</h3>
+    <p>{$LL.menu.settings.privacySettings.explaination()}</p>
+    <div class="nes-select is-dark">
+      <select class="privacy-settings-switcher" bind:value={valuePrivacySettings}>
+        <option value={"allEnabled"}
+        >{ $LL.menu.settings.privacySettings.allEnabled() }
+        </option>
+        <option value={"microphoneEnabled"}
+        >{ $LL.menu.settings.privacySettings.onlyMicrophoneEnabled() }
+        </option>
+        <option value={"cameraEnabled"}
+        >{ $LL.menu.settings.privacySettings.onlyCameraEnabled() }
+        </option>
+        <option value={"noneEnabled"}
+        >{ $LL.menu.settings.privacySettings.allDisabled() }
+        </option>
+      </select>
+    </div>
+  </section>
+  <section class="settings-section-save">
+    <p>{$LL.menu.settings.save.warning()}</p>
+    <button type="button" class="nes-btn is-primary" on:click|preventDefault={saveSetting}
+    >{$LL.menu.settings.save.button()}</button
+    >
+  </section>
+  <section class="settings-section-noSaveOption">
+    <label>
+      <input
+        type="checkbox"
+        class="nes-checkbox is-dark"
+        bind:checked={fullscreen}
+        on:change={changeFullscreen}
+      />
+      <span>{$LL.menu.settings.fullscreen()}</span>
+    </label>
+    <label>
+      <input
+        type="checkbox"
+        class="nes-checkbox is-dark"
+        bind:checked={notification}
+        on:change={changeNotification}
+      />
+      <span>{$LL.menu.settings.notifications()}</span>
+    </label>
+    <label>
+      <input
+        type="checkbox"
+        class="nes-checkbox is-dark"
+        bind:checked={forceCowebsiteTrigger}
+        on:change={changeForceCowebsiteTrigger}
+      />
+      <span>{$LL.menu.settings.cowebsiteTrigger()}</span>
+    </label>
+    <label>
+      <input
+        type="checkbox"
+        class="nes-checkbox is-dark"
+        bind:checked={ignoreFollowRequests}
+        on:change={changeIgnoreFollowRequests}
+      />
+      <span>{$LL.menu.settings.ignoreFollowRequest()}</span>
+    </label>
+  </section>
 </div>
 
 <style lang="scss">
-    @import "../../../style/breakpoints.scss";
+  @import "../../../style/breakpoints.scss";
 
+  div.settings-main {
+    height: calc(100% - 40px);
+    overflow-y: auto;
+
+    section {
+      width: 100%;
+      padding: 20px 20px 0;
+      margin-bottom: 20px;
+      text-align: center;
+
+      div.nes-select select:focus {
+        outline: none;
+      }
+    }
+
+    section.settings-section-save {
+      text-align: center;
+
+      p {
+        margin: 16px 0;
+      }
+    }
+
+    section.settings-section-noSaveOption {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+
+      label {
+        flex: 1 1 auto;
+        text-align: center;
+        margin: 0 0 15px;
+      }
+    }
+
+    .languages-switcher option {
+      text-transform: capitalize;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
     div.settings-main {
-        height: calc(100% - 40px);
-        overflow-y: auto;
-
-        section {
-            width: 100%;
-            padding: 20px 20px 0;
-            margin-bottom: 20px;
-            text-align: center;
-
-            div.nes-select select:focus {
-                outline: none;
-            }
-        }
-        section.settings-section-save {
-            text-align: center;
-            p {
-                margin: 16px 0;
-            }
-        }
-        section.settings-section-noSaveOption {
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-
-            label {
-                flex: 1 1 auto;
-                text-align: center;
-                margin: 0 0 15px;
-            }
-        }
-
-        .languages-switcher option {
-            text-transform: capitalize;
-        }
-    }
-
-    @include media-breakpoint-up(md) {
-        div.settings-main {
-            section {
-                padding: 0;
-            }
-        }
+      section {
+        padding: 0;
+      }
     }
+  }
 </style>

front/src/Connexion/LocalUserStore.ts

@@ -24,6 +24,7 @@ const code = "code";
 const cameraSetup = "cameraSetup";
 const cacheAPIIndex = "workavdenture-cache";
 const userProperties = "user-properties";
+const privacySettings = "privacySettings";
 
 class LocalUserStore {
     saveUser(localUser: LocalUser) {
@@ -224,6 +225,14 @@ class LocalUserStore {
         return cameraSetupValues != undefined ? JSON.parse(cameraSetupValues) : undefined;
     }
 
+    setPrivacySettings(option: string) {
+        localStorage.setItem(privacySettings, option)
+    }
+
+    getPrivacySettings() {
+        return localStorage.getItem(privacySettings);
+    }
+
     getAllUserProperties(): Map<string, unknown> {
         const result = new Map<string, string>();
         for (let i = 0; i < localStorage.length; i++) {

front/src/Stores/MediaStore.ts

@@ -12,6 +12,7 @@ import { privacyShutdownStore } from "./PrivacyShutdownStore";
 import { MediaStreamConstraintsError } from "./Errors/MediaStreamConstraintsError";
 import { SoundMeter } from "../Phaser/Components/SoundMeter";
 import { AudioContext } from "standardized-audio-context";
+import { visibilityStore } from "./VisibilityStore";
 
 /**
  * A store that contains the camera state requested by the user (on or off).
@@ -242,6 +243,8 @@ export const mediaStreamConstraintsStore = derived(
         privacyShutdownStore,
         cameraEnergySavingStore,
         isSilentStore,
+        visibilityStore,
+        //TODO: optionState
     ],
     (
         [
@@ -254,6 +257,7 @@ export const mediaStreamConstraintsStore = derived(
             $privacyShutdownStore,
             $cameraEnergySavingStore,
             $isSilentStore,
+            $visibilityStore
         ],
         set
     ) => {
@@ -308,6 +312,11 @@ export const mediaStreamConstraintsStore = derived(
             currentAudioConstraint = false;
         }
 
+        // if ($visibilityStore === false && $option) {
+        //
+        // }
+        //TODO
+
         // Let's make the changes only if the new value is different from the old one.
         if (
             previousComputedVideoConstraint != currentVideoConstraint ||

front/src/i18n/de-DE/menu.ts

@@ -57,6 +57,14 @@ const menu: NonNullable<Translation["menu"]> = {
         language: {
             title: "Sprache",
         },
+        privacySettings: {
+            title: "Datenschutzeinstellungen", //TODO: confirm & complete translation
+            explaination: "",
+            allEnabled: "",
+            onlyCameraEnabled: "",
+            onlyMicrophoneEnabled: "",
+            allDisabled: ""
+        },
         save: {
             warning: "(Das Spiel wird nach dem Speichern neugestartet)",
             button: "Speichern",

front/src/i18n/en-US/menu.ts

@@ -57,6 +57,14 @@ const menu: BaseTranslation = {
         language: {
             title: "Language",
         },
+        privacySettings: {
+            title: "Privacy settings",
+            explaination: "Here you can set an option to keep your microphone/camera enabled when switching active tabs.",
+            allEnabled: "Camera and microphone always enabled",
+            onlyCameraEnabled: "Microphone disabled when the WA tab is not focused",
+            onlyMicrophoneEnabled: "Camera disabled when the WA tab is not focused",
+            allDisabled: "Both disabled when the WA tab is not focused"
+        },
         save: {
             warning: "(Saving these settings will restart the game)",
             button: "Save",

front/src/i18n/fr-FR/menu.ts

@@ -57,6 +57,14 @@ const menu: NonNullable<Translation["menu"]> = {
         language: {
             title: "Langage",
         },
+        privacySettings: {
+            title: "Paramètres de confidentialité",
+            explaination: "Vous pouvez définir ici si vous souhaitez conserver ou non l'activation du microphone/de la caméra au passage sur un autre onglet.",
+            allEnabled: "Camera et microphone toujours actifs",
+            onlyCameraEnabled: "Seul le microphone est activé quand l'onglet WA n'est pas sélectionné",
+            onlyMicrophoneEnabled: "Seule la caméra est activé quand l'onglet WA n'est pas sélectionné",
+            allDisabled: "Tout désactiver quand l'onglet WA n'est pas sélectionné"
+        },
         save: {
             warning: "(La sauvegarde de ces paramètres redémarre le jeu)",
             button: "Sauvegarder",