From 4e5fb735bddf75081f7f63e33700752f20aa4953 Mon Sep 17 00:00:00 2001 From: Benedicte Quimbert Date: Mon, 21 Mar 2022 18:39:20 +0100 Subject: [PATCH] switches dropdown for checkboxes and adjusts wording --- .../Components/Menu/SettingsSubMenu.svelte | 490 +++++++++--------- front/src/Connexion/LocalUserStore.ts | 44 +- front/src/Stores/MediaStore.ts | 20 +- front/src/i18n/de-DE/menu.ts | 11 +- front/src/i18n/en-US/menu.ts | 11 +- front/src/i18n/fr-FR/menu.ts | 11 +- 6 files changed, 306 insertions(+), 281 deletions(-) diff --git a/front/src/Components/Menu/SettingsSubMenu.svelte b/front/src/Components/Menu/SettingsSubMenu.svelte index 67a3073e..6623ea44 100644 --- a/front/src/Components/Menu/SettingsSubMenu.svelte +++ b/front/src/Components/Menu/SettingsSubMenu.svelte @@ -9,84 +9,92 @@ import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils"; import { audioManagerVolumeStore } from "../../Stores/AudioManagerStore"; - let fullscreen: boolean = localUserStore.getFullscreen(); - let notification: boolean = localUserStore.getNotification() === "granted"; - let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger(); - let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests(); - let decreaseAudioPlayerVolumeWhileTalking: boolean = localUserStore.getDecreaseAudioPlayerVolumeWhileTalking(); - let valueGame: number = localUserStore.getGameQualityValue(); - let valueVideo: number = localUserStore.getVideoQualityValue(); - let valueLocale: string = $locale; - let valuePrivacySettings = localUserStore.getPrivacySettings(); + let fullscreen: boolean = localUserStore.getFullscreen(); + let notification: boolean = localUserStore.getNotification() === "granted"; + let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger(); + let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests(); + let decreaseAudioPlayerVolumeWhileTalking: boolean = localUserStore.getDecreaseAudioPlayerVolumeWhileTalking(); + let valueGame: number = localUserStore.getGameQualityValue(); + let valueVideo: number = localUserStore.getVideoQualityValue(); + let valueLocale: string = $locale; + let valueCameraPrivacySettings = localUserStore.getCameraPrivacySettings(); + let valueMicrophonePrivacySettings = localUserStore.getMicrophonePrivacySettings(); - let previewValueGame = valueGame; - let previewValueVideo = valueVideo; - let previewValueLocale = valueLocale; - let previewPrivacySettings = valuePrivacySettings; + let previewValueGame = valueGame; + let previewValueVideo = valueVideo; + let previewValueLocale = valueLocale; + let previewCameraPrivacySettings = valueCameraPrivacySettings; + let previewMicrophonePrivacySettings = valueMicrophonePrivacySettings; - function saveSetting() { - let change = false; + function saveSetting() { + let change = false; - if (valueLocale !== previewValueLocale) { - previewValueLocale = valueLocale; - setCurrentLocale(valueLocale as Locales); - } + if (valueLocale !== previewValueLocale) { + previewValueLocale = valueLocale; + setCurrentLocale(valueLocale as Locales); + } - if (valueVideo !== previewValueVideo) { - previewValueVideo = valueVideo; - videoConstraintStore.setFrameRate(valueVideo); - } + if (valueVideo !== previewValueVideo) { + previewValueVideo = valueVideo; + videoConstraintStore.setFrameRate(valueVideo); + } - if (valueGame !== previewValueGame) { - previewValueGame = valueGame; - localUserStore.setGameQualityValue(valueGame); - change = true; - } + if (valueGame !== previewValueGame) { + previewValueGame = valueGame; + localUserStore.setGameQualityValue(valueGame); + change = true; + } - if (valuePrivacySettings !== previewPrivacySettings) { - localUserStore.setPrivacySettings(valuePrivacySettings); - } + if (valueCameraPrivacySettings !== previewCameraPrivacySettings) { + previewCameraPrivacySettings = valueCameraPrivacySettings; + localUserStore.setCameraPrivacySettings(valueCameraPrivacySettings); + } + + if (valueMicrophonePrivacySettings !== previewMicrophonePrivacySettings) { + previewMicrophonePrivacySettings = valueMicrophonePrivacySettings; + localUserStore.setMicrophonePrivacySettings(valueMicrophonePrivacySettings); + } if (change) { window.location.reload(); } audioManagerVolumeStore.setDecreaseWhileTalking(decreaseAudioPlayerVolumeWhileTalking); - 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); + closeMenu(); } - } - function changeNotification() { - if (Notification.permission === "granted") { - localUserStore.setNotification(notification ? "granted" : "denied"); - } else { - Notification.requestPermission() - .then((response) => { - if (response === "granted") { + 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 { - localUserStore.setNotification("denied"); - notification = false; - } - }) - .catch((e) => console.error(e)); + } else { + Notification.requestPermission() + .then((response) => { + if (response === "granted") { + localUserStore.setNotification(notification ? "granted" : "denied"); + } 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); @@ -99,198 +107,190 @@ localUserStore.setDecreaseAudioPlayerVolumeWhileTalking(decreaseAudioPlayerVolumeWhileTalking); } - const isMobile = isMediaBreakpointUp("md"); + const isMobile = isMediaBreakpointUp("md");
-
-

{$LL.menu.settings.gameQuality.title()}

-
- -
-
-
-

{$LL.menu.settings.videoQuality.title()}

-
- -
-
-
-

{$LL.menu.settings.language.title()}

-
- -
-
+
+

{$LL.menu.settings.gameQuality.title()}

+
+ +
+
+
+

{$LL.menu.settings.videoQuality.title()}

+
+ +
+
+
+

{$LL.menu.settings.language.title()}

+
+ +
+
-
-

{$LL.menu.settings.privacySettings.title()}

-

{$LL.menu.settings.privacySettings.explaination()}

-
- -
-
-
-

{$LL.menu.settings.save.warning()}

- -
-
- - - - -
+
+

{$LL.menu.settings.privacySettings.title()}

+

{$LL.menu.settings.privacySettings.explanation()}

+ + +
+
+

{$LL.menu.settings.save.warning()}

+ +
+
+ + + + +
diff --git a/front/src/Connexion/LocalUserStore.ts b/front/src/Connexion/LocalUserStore.ts index fd3a5931..8e0d6f07 100644 --- a/front/src/Connexion/LocalUserStore.ts +++ b/front/src/Connexion/LocalUserStore.ts @@ -25,12 +25,14 @@ const code = "code"; const cameraSetup = "cameraSetup"; const cacheAPIIndex = "workavdenture-cache"; const userProperties = "user-properties"; -const privacySettings = "privacySettings"; +const cameraPrivacySettings = "cameraPrivacySettings"; +const microphonePrivacySettings = "microphonePrivacySettings"; class LocalUserStore { saveUser(localUser: LocalUser) { localStorage.setItem("localUser", JSON.stringify(localUser)); } + getLocalUser(): LocalUser | null { const data = localStorage.getItem("localUser"); return data ? JSON.parse(data) : null; @@ -39,6 +41,7 @@ class LocalUserStore { setName(name: string): void { localStorage.setItem(playerNameKey, name); } + getName(): string | null { const value = localStorage.getItem(playerNameKey) || ""; return isUserNameValid(value) ? value : null; @@ -47,6 +50,7 @@ class LocalUserStore { setPlayerCharacterIndex(playerCharacterIndex: number): void { localStorage.setItem(selectedPlayerKey, "" + playerCharacterIndex); } + getPlayerCharacterIndex(): number { return parseInt(localStorage.getItem(selectedPlayerKey) || ""); } @@ -54,6 +58,7 @@ class LocalUserStore { setCustomCursorPosition(activeRow: number, selectedLayers: number[]): void { localStorage.setItem(customCursorPositionKey, JSON.stringify({ activeRow, selectedLayers })); } + getCustomCursorPosition(): { activeRow: number; selectedLayers: number[] } | null { return JSON.parse(localStorage.getItem(customCursorPositionKey) || "null"); } @@ -61,6 +66,7 @@ class LocalUserStore { setCharacterLayers(layers: string[]): void { localStorage.setItem(characterLayersKey, JSON.stringify(layers)); } + getCharacterLayers(): string[] | null { const value = JSON.parse(localStorage.getItem(characterLayersKey) || "null"); return areCharacterLayersValid(value) ? value : null; @@ -69,6 +75,7 @@ class LocalUserStore { setCompanion(companion: string | null): void { return localStorage.setItem(companionKey, JSON.stringify(companion)); } + getCompanion(): string | null { const companion = JSON.parse(localStorage.getItem(companionKey) || "null"); @@ -78,6 +85,7 @@ class LocalUserStore { return companion; } + wasCompanionSet(): boolean { return localStorage.getItem(companionKey) ? true : false; } @@ -85,6 +93,7 @@ class LocalUserStore { setGameQualityValue(value: number): void { localStorage.setItem(gameQualityKey, "" + value); } + getGameQualityValue(): number { return parseInt(localStorage.getItem(gameQualityKey) || "60"); } @@ -92,6 +101,7 @@ class LocalUserStore { setVideoQualityValue(value: number): void { localStorage.setItem(videoQualityKey, "" + value); } + getVideoQualityValue(): number { return parseInt(localStorage.getItem(videoQualityKey) || "20"); } @@ -99,6 +109,7 @@ class LocalUserStore { setAudioPlayerVolume(value: number): void { localStorage.setItem(audioPlayerVolumeKey, "" + value); } + getAudioPlayerVolume(): number { return parseFloat(localStorage.getItem(audioPlayerVolumeKey) || "1"); } @@ -106,6 +117,7 @@ class LocalUserStore { setAudioPlayerMuted(value: boolean): void { localStorage.setItem(audioPlayerMuteKey, value.toString()); } + getAudioPlayerMuted(): boolean { return localStorage.getItem(audioPlayerMuteKey) === "true"; } @@ -113,6 +125,7 @@ class LocalUserStore { setHelpCameraSettingsShown(): void { localStorage.setItem(helpCameraSettingsShown, "1"); } + getHelpCameraSettingsShown(): boolean { return localStorage.getItem(helpCameraSettingsShown) === "1"; } @@ -120,6 +133,7 @@ class LocalUserStore { setFullscreen(value: boolean): void { localStorage.setItem(fullscreenKey, value.toString()); } + getFullscreen(): boolean { return localStorage.getItem(fullscreenKey) === "true"; } @@ -127,6 +141,7 @@ class LocalUserStore { setForceCowebsiteTrigger(value: boolean): void { localStorage.setItem(forceCowebsiteTriggerKey, value.toString()); } + getForceCowebsiteTrigger(): boolean { return localStorage.getItem(forceCowebsiteTriggerKey) === "true"; } @@ -134,6 +149,7 @@ class LocalUserStore { setIgnoreFollowRequests(value: boolean): void { localStorage.setItem(ignoreFollowRequests, value.toString()); } + getIgnoreFollowRequests(): boolean { return localStorage.getItem(ignoreFollowRequests) === "true"; } @@ -156,11 +172,13 @@ class LocalUserStore { } } } + getLastRoomUrl(): string { return ( localStorage.getItem(lastRoomUrl) ?? window.location.protocol + "//" + window.location.host + START_ROOM_URL ); } + getLastRoomUrlCacheApi(): Promise { if (!("caches" in window)) { return Promise.resolve(undefined); @@ -177,6 +195,7 @@ class LocalUserStore { setAuthToken(value: string | null) { value ? localStorage.setItem(authToken, value) : localStorage.removeItem(authToken); } + getAuthToken(): string | null { return localStorage.getItem(authToken); } @@ -203,23 +222,29 @@ class LocalUserStore { } return oldValue === value; } + setState(value: string) { localStorage.setItem(state, value); } + getState(): string | null { return localStorage.getItem(state); } + generateNonce(): string { const newNonce = uuidv4(); localStorage.setItem(nonce, newNonce); return newNonce; } + getNonce(): string | null { return localStorage.getItem(nonce); } + setCode(value: string): void { localStorage.setItem(code, value); } + getCode(): string | null { return localStorage.getItem(code); } @@ -227,17 +252,26 @@ class LocalUserStore { setCameraSetup(cameraId: string) { localStorage.setItem(cameraSetup, cameraId); } + getCameraSetup(): { video: unknown; audio: unknown } | undefined { const cameraSetupValues = localStorage.getItem(cameraSetup); return cameraSetupValues != undefined ? JSON.parse(cameraSetupValues) : undefined; } - setPrivacySettings(option: string) { - localStorage.setItem(privacySettings, option) + setCameraPrivacySettings(option: boolean) { + localStorage.setItem(cameraPrivacySettings, option.toString()); } - getPrivacySettings() { - return localStorage.getItem(privacySettings); + getCameraPrivacySettings() { + return localStorage.getItem(cameraPrivacySettings) === "true"; + } + + setMicrophonePrivacySettings(option: boolean) { + localStorage.setItem(microphonePrivacySettings, option.toString()); + } + + getMicrophonePrivacySettings() { + return localStorage.getItem(microphonePrivacySettings) === "true"; } getAllUserProperties(): Map { diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts index f94a3c55..557cbcd8 100644 --- a/front/src/Stores/MediaStore.ts +++ b/front/src/Stores/MediaStore.ts @@ -294,18 +294,13 @@ export const mediaStreamConstraintsStore = derived( // Disable webcam for privacy reasons (the game is not visible and we were talking to no one) if ($privacyShutdownStore === true) { - const userSetting = localUserStore.getPrivacySettings(); - switch (userSetting) { - case "cameraEnabled": - currentAudioConstraint = false; - break; - case "microphoneEnabled": - currentVideoConstraint = false; - break; - case "noneEnabled": - currentVideoConstraint = false; - currentAudioConstraint = false; - break; + const userMicrophonePrivacySetting = localUserStore.getMicrophonePrivacySettings(); + const userCameraPrivacySetting = localUserStore.getCameraPrivacySettings(); + if (!userMicrophonePrivacySetting) { + currentAudioConstraint = false; + } + if (!userCameraPrivacySetting) { + currentVideoConstraint = false; } } @@ -322,7 +317,6 @@ export const mediaStreamConstraintsStore = derived( currentAudioConstraint = false; } - // Let's make the changes only if the new value is different from the old one. if ( previousComputedVideoConstraint != currentVideoConstraint || diff --git a/front/src/i18n/de-DE/menu.ts b/front/src/i18n/de-DE/menu.ts index dc19e481..3d785b6f 100644 --- a/front/src/i18n/de-DE/menu.ts +++ b/front/src/i18n/de-DE/menu.ts @@ -57,13 +57,12 @@ const menu: NonNullable = { language: { title: "Sprache", }, + //TODO: complete translation privacySettings: { - title: "Datenschutzeinstellungen", //TODO: confirm & complete translation - explaination: "", - allEnabled: "", - onlyCameraEnabled: "", - onlyMicrophoneEnabled: "", - allDisabled: "" + title: "", + explanation: "", + cameraToggle: "", + microphoneToggle: "", }, save: { warning: "(Das Spiel wird nach dem Speichern neugestartet)", diff --git a/front/src/i18n/en-US/menu.ts b/front/src/i18n/en-US/menu.ts index 04f2f377..6eb6de21 100644 --- a/front/src/i18n/en-US/menu.ts +++ b/front/src/i18n/en-US/menu.ts @@ -58,12 +58,11 @@ const menu: BaseTranslation = { 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" + title: "Away mode settings", + explanation: + 'When the WorkAdventure tab is not visible, it switches to "away mode". In this mode, you can decide to automatically disable your webcam and/or microphone for as long as the tab stays hidden.', + cameraToggle: "Camera", + microphoneToggle: "Microphone", }, save: { warning: "(Saving these settings will restart the game)", diff --git a/front/src/i18n/fr-FR/menu.ts b/front/src/i18n/fr-FR/menu.ts index 9e32e9ba..1515ea8f 100644 --- a/front/src/i18n/fr-FR/menu.ts +++ b/front/src/i18n/fr-FR/menu.ts @@ -58,12 +58,11 @@ const menu: NonNullable = { 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é" + title: "Paramètres du mode absent", + explanation: + "Quand l'onglet WorkAdventure n'est pas visible, vous passez en \"mode absent\". Lorsque ce mode est actif, vous pouvez décider de garder vos webcam et/ou micro désactivés tant que vous ne revenez pas sur l'onglet", + cameraToggle: "Camera", + microphoneToggle: "Microphone", }, save: { warning: "(La sauvegarde de ces paramètres redémarre le jeu)",