_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

switches dropdown for checkboxes and adjusts wording

Browse Source
This commit is contained in:
Benedicte Quimbert 2022-03-21 18:39:20 +01:00
parent 9442c9c9f1
commit 216f34c113
6 changed files with 308 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

494
front/src/Components/Menu/SettingsSubMenu.svelte
View File

@ -8,274 +8,274 @@
import { displayableLocales, setCurrentLocale } from "../../i18n/locales"; import { displayableLocales, setCurrentLocale } from "../../i18n/locales";
import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils"; import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
let fullscreen: boolean = localUserStore.getFullscreen(); let fullscreen: boolean = localUserStore.getFullscreen();
let notification: boolean = localUserStore.getNotification() === "granted"; let notification: boolean = localUserStore.getNotification() === "granted";
let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger(); let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger();
let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests(); let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests();
let valueGame: number = localUserStore.getGameQualityValue(); let valueGame: number = localUserStore.getGameQualityValue();
let valueVideo: number = localUserStore.getVideoQualityValue(); let valueVideo: number = localUserStore.getVideoQualityValue();
let valueLocale: string = $locale; let valueLocale: string = $locale;
let valuePrivacySettings = localUserStore.getPrivacySettings(); let valueCameraPrivacySettings = localUserStore.getCameraPrivacySettings();
let valueMicrophonePrivacySettings = localUserStore.getMicrophonePrivacySettings();
let previewValueGame = valueGame; let previewValueGame = valueGame;
let previewValueVideo = valueVideo; let previewValueVideo = valueVideo;
let previewValueLocale = valueLocale; let previewValueLocale = valueLocale;
let previewPrivacySettings = valuePrivacySettings; let previewCameraPrivacySettings = valueCameraPrivacySettings;
let previewMicrophonePrivacySettings = valueMicrophonePrivacySettings;
function saveSetting() { function saveSetting() {
let change = false; let change = false;
if (valueLocale !== previewValueLocale) { if (valueLocale !== previewValueLocale) {
previewValueLocale = valueLocale; previewValueLocale = valueLocale;
setCurrentLocale(valueLocale as Locales); setCurrentLocale(valueLocale as Locales);
}
if (valueVideo !== previewValueVideo) {
previewValueVideo = valueVideo;
videoConstraintStore.setFrameRate(valueVideo);
}
if (valueGame !== previewValueGame) {
previewValueGame = valueGame;
localUserStore.setGameQualityValue(valueGame);
change = true;
}
if (valueCameraPrivacySettings !== previewCameraPrivacySettings) {
previewCameraPrivacySettings = valueCameraPrivacySettings;
localUserStore.setCameraPrivacySettings(valueCameraPrivacySettings);
}
if (valueMicrophonePrivacySettings !== previewMicrophonePrivacySettings) {
previewMicrophonePrivacySettings = valueMicrophonePrivacySettings;
localUserStore.setMicrophonePrivacySettings(valueMicrophonePrivacySettings);
}
if (change) {
window.location.reload();
}
closeMenu();
} }
if (valueVideo !== previewValueVideo) { function changeFullscreen() {
previewValueVideo = valueVideo; const body = HtmlUtils.querySelectorOrFail("body");
videoConstraintStore.setFrameRate(valueVideo); 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 (valueGame !== previewValueGame) { function changeNotification() {
previewValueGame = valueGame; if (Notification.permission === "granted") {
localUserStore.setGameQualityValue(valueGame);
change = true;
}
if (valuePrivacySettings !== previewPrivacySettings) {
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"); localUserStore.setNotification(notification ? "granted" : "denied");
} else { } else {
localUserStore.setNotification("denied"); Notification.requestPermission()
notification = false; .then((response) => {
} if (response === "granted") {
}) localUserStore.setNotification(notification ? "granted" : "denied");
.catch((e) => console.error(e)); } else {
localUserStore.setNotification("denied");
notification = false;
}
})
.catch((e) => console.error(e));
}
} }
}
function changeForceCowebsiteTrigger() { function changeForceCowebsiteTrigger() {
localUserStore.setForceCowebsiteTrigger(forceCowebsiteTrigger); localUserStore.setForceCowebsiteTrigger(forceCowebsiteTrigger);
} }
function changeIgnoreFollowRequests() { function changeIgnoreFollowRequests() {
localUserStore.setIgnoreFollowRequests(ignoreFollowRequests); localUserStore.setIgnoreFollowRequests(ignoreFollowRequests);
} }
function closeMenu() { function closeMenu() {
menuVisiblilityStore.set(false); menuVisiblilityStore.set(false);
} }
const isMobile = isMediaBreakpointUp("md"); const isMobile = isMediaBreakpointUp("md");
</script> </script>
<div class="settings-main" on:submit|preventDefault={saveSetting}> <div class="settings-main" on:submit|preventDefault={saveSetting}>
<section> <section>
<h3>{$LL.menu.settings.gameQuality.title()}</h3> <h3>{$LL.menu.settings.gameQuality.title()}</h3>
<div class="nes-select is-dark"> <div class="nes-select is-dark">
<select bind:value={valueGame}> <select bind:value={valueGame}>
<option value={120} <option value={120}
>{isMobile >{isMobile
? $LL.menu.settings.gameQuality.short.high() ? $LL.menu.settings.gameQuality.short.high()
: $LL.menu.settings.gameQuality.long.high()}</option : $LL.menu.settings.gameQuality.long.high()}</option
> >
<option value={60} <option value={60}
>{isMobile >{isMobile
? $LL.menu.settings.gameQuality.short.medium() ? $LL.menu.settings.gameQuality.short.medium()
: $LL.menu.settings.gameQuality.long.medium()}</option : $LL.menu.settings.gameQuality.long.medium()}</option
> >
<option value={40} <option value={40}
>{isMobile >{isMobile
? $LL.menu.settings.gameQuality.short.small() ? $LL.menu.settings.gameQuality.short.small()
: $LL.menu.settings.gameQuality.long.small()}</option : $LL.menu.settings.gameQuality.long.small()}</option
> >
<option value={20} <option value={20}
>{isMobile >{isMobile
? $LL.menu.settings.gameQuality.short.minimum() ? $LL.menu.settings.gameQuality.short.minimum()
: $LL.menu.settings.gameQuality.long.minimum()}</option : $LL.menu.settings.gameQuality.long.minimum()}</option
> >
</select> </select>
</div> </div>
</section> </section>
<section> <section>
<h3>{$LL.menu.settings.videoQuality.title()}</h3> <h3>{$LL.menu.settings.videoQuality.title()}</h3>
<div class="nes-select is-dark"> <div class="nes-select is-dark">
<select bind:value={valueVideo}> <select bind:value={valueVideo}>
<option value={30} <option value={30}
>{isMobile >{isMobile
? $LL.menu.settings.videoQuality.short.high() ? $LL.menu.settings.videoQuality.short.high()
: $LL.menu.settings.videoQuality.long.high()}</option : $LL.menu.settings.videoQuality.long.high()}</option
> >
<option value={20} <option value={20}
>{isMobile >{isMobile
? $LL.menu.settings.videoQuality.short.medium() ? $LL.menu.settings.videoQuality.short.medium()
: $LL.menu.settings.videoQuality.long.medium()}</option : $LL.menu.settings.videoQuality.long.medium()}</option
> >
<option value={10} <option value={10}
>{isMobile >{isMobile
? $LL.menu.settings.videoQuality.short.small() ? $LL.menu.settings.videoQuality.short.small()
: $LL.menu.settings.videoQuality.long.small()}</option : $LL.menu.settings.videoQuality.long.small()}</option
> >
<option value={5} <option value={5}
>{isMobile >{isMobile
? $LL.menu.settings.videoQuality.short.minimum() ? $LL.menu.settings.videoQuality.short.minimum()
: $LL.menu.settings.videoQuality.long.minimum()}</option : $LL.menu.settings.videoQuality.long.minimum()}</option
> >
</select> </select>
</div> </div>
</section> </section>
<section> <section>
<h3>{$LL.menu.settings.language.title()}</h3> <h3>{$LL.menu.settings.language.title()}</h3>
<div class="nes-select is-dark"> <div class="nes-select is-dark">
<select class="languages-switcher" bind:value={valueLocale}> <select class="languages-switcher" bind:value={valueLocale}>
{#each displayableLocales as locale (locale.id)} {#each displayableLocales as locale (locale.id)}
<option value={locale.id}>{`${locale.language} (${locale.country})`}</option> <option value={locale.id}>{`${locale.language} (${locale.country})`}</option>
{/each} {/each}
</select> </select>
</div> </div>
</section> </section>
<section> <section>
<h3>{$LL.menu.settings.privacySettings.title()}</h3> <h3>{$LL.menu.settings.privacySettings.title()}</h3>
<p>{$LL.menu.settings.privacySettings.explaination()}</p> <p>{$LL.menu.settings.privacySettings.explanation()}</p>
<div class="nes-select is-dark"> <label>
<select class="privacy-settings-switcher" bind:value={valuePrivacySettings}> <input type="checkbox" class="nes-checkbox is-dark" bind:checked={valueCameraPrivacySettings} />
<option value={"allEnabled"} <span>{$LL.menu.settings.privacySettings.cameraToggle()}</span>
>{ $LL.menu.settings.privacySettings.allEnabled() } </label>
</option> <label>
<option value={"microphoneEnabled"} <input type="checkbox" class="nes-checkbox is-dark" bind:checked={valueMicrophonePrivacySettings} />
>{ $LL.menu.settings.privacySettings.onlyMicrophoneEnabled() } <span>{$LL.menu.settings.privacySettings.microphoneToggle()}</span>
</option> </label>
<option value={"cameraEnabled"} </section>
>{ $LL.menu.settings.privacySettings.onlyCameraEnabled() } <section class="settings-section-save">
</option> <p>{$LL.menu.settings.save.warning()}</p>
<option value={"noneEnabled"} <button type="button" class="nes-btn is-primary" on:click|preventDefault={saveSetting}
>{ $LL.menu.settings.privacySettings.allDisabled() } >{$LL.menu.settings.save.button()}</button
</option> >
</select> </section>
</div> <section class="settings-section-noSaveOption">
</section> <label>
<section class="settings-section-save"> <input
<p>{$LL.menu.settings.save.warning()}</p> type="checkbox"
<button type="button" class="nes-btn is-primary" on:click|preventDefault={saveSetting} class="nes-checkbox is-dark"
>{$LL.menu.settings.save.button()}</button bind:checked={fullscreen}
> on:change={changeFullscreen}
</section> />
<section class="settings-section-noSaveOption"> <span>{$LL.menu.settings.fullscreen()}</span>
<label> </label>
<input <label>
type="checkbox" <input
class="nes-checkbox is-dark" type="checkbox"
bind:checked={fullscreen} class="nes-checkbox is-dark"
on:change={changeFullscreen} bind:checked={notification}
/> on:change={changeNotification}
<span>{$LL.menu.settings.fullscreen()}</span> />
</label> <span>{$LL.menu.settings.notifications()}</span>
<label> </label>
<input <label>
type="checkbox" <input
class="nes-checkbox is-dark" type="checkbox"
bind:checked={notification} class="nes-checkbox is-dark"
on:change={changeNotification} bind:checked={forceCowebsiteTrigger}
/> on:change={changeForceCowebsiteTrigger}
<span>{$LL.menu.settings.notifications()}</span> />
</label> <span>{$LL.menu.settings.cowebsiteTrigger()}</span>
<label> </label>
<input <label>
type="checkbox" <input
class="nes-checkbox is-dark" type="checkbox"
bind:checked={forceCowebsiteTrigger} class="nes-checkbox is-dark"
on:change={changeForceCowebsiteTrigger} bind:checked={ignoreFollowRequests}
/> on:change={changeIgnoreFollowRequests}
<span>{$LL.menu.settings.cowebsiteTrigger()}</span> />
</label> <span>{$LL.menu.settings.ignoreFollowRequest()}</span>
<label> </label>
<input </section>
type="checkbox"
class="nes-checkbox is-dark"
bind:checked={ignoreFollowRequests}
on:change={changeIgnoreFollowRequests}
/>
<span>{$LL.menu.settings.ignoreFollowRequest()}</span>
</label>
</section>
</div> </div>
<style lang="scss"> <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 { div.settings-main {
section { height: calc(100% - 40px);
padding: 0; 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;
}
}
} }
}
</style> </style>

44
front/src/Connexion/LocalUserStore.ts
View File

@ -24,12 +24,14 @@ const code = "code";
const cameraSetup = "cameraSetup"; const cameraSetup = "cameraSetup";
const cacheAPIIndex = "workavdenture-cache"; const cacheAPIIndex = "workavdenture-cache";
const userProperties = "user-properties"; const userProperties = "user-properties";
const privacySettings = "privacySettings"; const cameraPrivacySettings = "cameraPrivacySettings";
const microphonePrivacySettings = "microphonePrivacySettings";
class LocalUserStore { class LocalUserStore {
saveUser(localUser: LocalUser) { saveUser(localUser: LocalUser) {
localStorage.setItem("localUser", JSON.stringify(localUser)); localStorage.setItem("localUser", JSON.stringify(localUser));
} }
getLocalUser(): LocalUser | null { getLocalUser(): LocalUser | null {
const data = localStorage.getItem("localUser"); const data = localStorage.getItem("localUser");
return data ? JSON.parse(data) : null; return data ? JSON.parse(data) : null;
@ -38,6 +40,7 @@ class LocalUserStore {
setName(name: string): void { setName(name: string): void {
localStorage.setItem(playerNameKey, name); localStorage.setItem(playerNameKey, name);
} }
getName(): string | null { getName(): string | null {
const value = localStorage.getItem(playerNameKey) || ""; const value = localStorage.getItem(playerNameKey) || "";
return isUserNameValid(value) ? value : null; return isUserNameValid(value) ? value : null;
@ -46,6 +49,7 @@ class LocalUserStore {
setPlayerCharacterIndex(playerCharacterIndex: number): void { setPlayerCharacterIndex(playerCharacterIndex: number): void {
localStorage.setItem(selectedPlayerKey, "" + playerCharacterIndex); localStorage.setItem(selectedPlayerKey, "" + playerCharacterIndex);
} }
getPlayerCharacterIndex(): number { getPlayerCharacterIndex(): number {
return parseInt(localStorage.getItem(selectedPlayerKey) || ""); return parseInt(localStorage.getItem(selectedPlayerKey) || "");
} }
@ -53,6 +57,7 @@ class LocalUserStore {
setCustomCursorPosition(activeRow: number, selectedLayers: number[]): void { setCustomCursorPosition(activeRow: number, selectedLayers: number[]): void {
localStorage.setItem(customCursorPositionKey, JSON.stringify({ activeRow, selectedLayers })); localStorage.setItem(customCursorPositionKey, JSON.stringify({ activeRow, selectedLayers }));
} }
getCustomCursorPosition(): { activeRow: number; selectedLayers: number[] } | null { getCustomCursorPosition(): { activeRow: number; selectedLayers: number[] } | null {
return JSON.parse(localStorage.getItem(customCursorPositionKey) || "null"); return JSON.parse(localStorage.getItem(customCursorPositionKey) || "null");
} }
@ -60,6 +65,7 @@ class LocalUserStore {
setCharacterLayers(layers: string[]): void { setCharacterLayers(layers: string[]): void {
localStorage.setItem(characterLayersKey, JSON.stringify(layers)); localStorage.setItem(characterLayersKey, JSON.stringify(layers));
} }
getCharacterLayers(): string[] | null { getCharacterLayers(): string[] | null {
const value = JSON.parse(localStorage.getItem(characterLayersKey) || "null"); const value = JSON.parse(localStorage.getItem(characterLayersKey) || "null");
return areCharacterLayersValid(value) ? value : null; return areCharacterLayersValid(value) ? value : null;
@ -68,6 +74,7 @@ class LocalUserStore {
setCompanion(companion: string | null): void { setCompanion(companion: string | null): void {
return localStorage.setItem(companionKey, JSON.stringify(companion)); return localStorage.setItem(companionKey, JSON.stringify(companion));
} }
getCompanion(): string | null { getCompanion(): string | null {
const companion = JSON.parse(localStorage.getItem(companionKey) || "null"); const companion = JSON.parse(localStorage.getItem(companionKey) || "null");
@ -77,6 +84,7 @@ class LocalUserStore {
return companion; return companion;
} }
wasCompanionSet(): boolean { wasCompanionSet(): boolean {
return localStorage.getItem(companionKey) ? true : false; return localStorage.getItem(companionKey) ? true : false;
} }
@ -84,6 +92,7 @@ class LocalUserStore {
setGameQualityValue(value: number): void { setGameQualityValue(value: number): void {
localStorage.setItem(gameQualityKey, "" + value); localStorage.setItem(gameQualityKey, "" + value);
} }
getGameQualityValue(): number { getGameQualityValue(): number {
return parseInt(localStorage.getItem(gameQualityKey) || "60"); return parseInt(localStorage.getItem(gameQualityKey) || "60");
} }
@ -91,6 +100,7 @@ class LocalUserStore {
setVideoQualityValue(value: number): void { setVideoQualityValue(value: number): void {
localStorage.setItem(videoQualityKey, "" + value); localStorage.setItem(videoQualityKey, "" + value);
} }
getVideoQualityValue(): number { getVideoQualityValue(): number {
return parseInt(localStorage.getItem(videoQualityKey) || "20"); return parseInt(localStorage.getItem(videoQualityKey) || "20");
} }
@ -98,6 +108,7 @@ class LocalUserStore {
setAudioPlayerVolume(value: number): void { setAudioPlayerVolume(value: number): void {
localStorage.setItem(audioPlayerVolumeKey, "" + value); localStorage.setItem(audioPlayerVolumeKey, "" + value);
} }
getAudioPlayerVolume(): number { getAudioPlayerVolume(): number {
return parseFloat(localStorage.getItem(audioPlayerVolumeKey) || "1"); return parseFloat(localStorage.getItem(audioPlayerVolumeKey) || "1");
} }
@ -105,6 +116,7 @@ class LocalUserStore {
setAudioPlayerMuted(value: boolean): void { setAudioPlayerMuted(value: boolean): void {
localStorage.setItem(audioPlayerMuteKey, value.toString()); localStorage.setItem(audioPlayerMuteKey, value.toString());
} }
getAudioPlayerMuted(): boolean { getAudioPlayerMuted(): boolean {
return localStorage.getItem(audioPlayerMuteKey) === "true"; return localStorage.getItem(audioPlayerMuteKey) === "true";
} }
@ -112,6 +124,7 @@ class LocalUserStore {
setHelpCameraSettingsShown(): void { setHelpCameraSettingsShown(): void {
localStorage.setItem(helpCameraSettingsShown, "1"); localStorage.setItem(helpCameraSettingsShown, "1");
} }
getHelpCameraSettingsShown(): boolean { getHelpCameraSettingsShown(): boolean {
return localStorage.getItem(helpCameraSettingsShown) === "1"; return localStorage.getItem(helpCameraSettingsShown) === "1";
} }
@ -119,6 +132,7 @@ class LocalUserStore {
setFullscreen(value: boolean): void { setFullscreen(value: boolean): void {
localStorage.setItem(fullscreenKey, value.toString()); localStorage.setItem(fullscreenKey, value.toString());
} }
getFullscreen(): boolean { getFullscreen(): boolean {
return localStorage.getItem(fullscreenKey) === "true"; return localStorage.getItem(fullscreenKey) === "true";
} }
@ -126,6 +140,7 @@ class LocalUserStore {
setForceCowebsiteTrigger(value: boolean): void { setForceCowebsiteTrigger(value: boolean): void {
localStorage.setItem(forceCowebsiteTriggerKey, value.toString()); localStorage.setItem(forceCowebsiteTriggerKey, value.toString());
} }
getForceCowebsiteTrigger(): boolean { getForceCowebsiteTrigger(): boolean {
return localStorage.getItem(forceCowebsiteTriggerKey) === "true"; return localStorage.getItem(forceCowebsiteTriggerKey) === "true";
} }
@ -133,6 +148,7 @@ class LocalUserStore {
setIgnoreFollowRequests(value: boolean): void { setIgnoreFollowRequests(value: boolean): void {
localStorage.setItem(ignoreFollowRequests, value.toString()); localStorage.setItem(ignoreFollowRequests, value.toString());
} }
getIgnoreFollowRequests(): boolean { getIgnoreFollowRequests(): boolean {
return localStorage.getItem(ignoreFollowRequests) === "true"; return localStorage.getItem(ignoreFollowRequests) === "true";
} }
@ -149,11 +165,13 @@ class LocalUserStore {
} }
} }
} }
getLastRoomUrl(): string { getLastRoomUrl(): string {
return ( return (
localStorage.getItem(lastRoomUrl) ?? window.location.protocol + "//" + window.location.host + START_ROOM_URL localStorage.getItem(lastRoomUrl) ?? window.location.protocol + "//" + window.location.host + START_ROOM_URL
); );
} }
getLastRoomUrlCacheApi(): Promise<string | undefined> { getLastRoomUrlCacheApi(): Promise<string | undefined> {
if (!("caches" in window)) { if (!("caches" in window)) {
return Promise.resolve(undefined); return Promise.resolve(undefined);
@ -170,6 +188,7 @@ class LocalUserStore {
setAuthToken(value: string | null) { setAuthToken(value: string | null) {
value ? localStorage.setItem(authToken, value) : localStorage.removeItem(authToken); value ? localStorage.setItem(authToken, value) : localStorage.removeItem(authToken);
} }
getAuthToken(): string | null { getAuthToken(): string | null {
return localStorage.getItem(authToken); return localStorage.getItem(authToken);
} }
@ -196,23 +215,29 @@ class LocalUserStore {
} }
return oldValue === value; return oldValue === value;
} }
setState(value: string) { setState(value: string) {
localStorage.setItem(state, value); localStorage.setItem(state, value);
} }
getState(): string | null { getState(): string | null {
return localStorage.getItem(state); return localStorage.getItem(state);
} }
generateNonce(): string { generateNonce(): string {
const newNonce = uuidv4(); const newNonce = uuidv4();
localStorage.setItem(nonce, newNonce); localStorage.setItem(nonce, newNonce);
return newNonce; return newNonce;
} }
getNonce(): string | null { getNonce(): string | null {
return localStorage.getItem(nonce); return localStorage.getItem(nonce);
} }
setCode(value: string): void { setCode(value: string): void {
localStorage.setItem(code, value); localStorage.setItem(code, value);
} }
getCode(): string | null { getCode(): string | null {
return localStorage.getItem(code); return localStorage.getItem(code);
} }
@ -220,17 +245,26 @@ class LocalUserStore {
setCameraSetup(cameraId: string) { setCameraSetup(cameraId: string) {
localStorage.setItem(cameraSetup, cameraId); localStorage.setItem(cameraSetup, cameraId);
} }
getCameraSetup(): { video: unknown; audio: unknown } | undefined { getCameraSetup(): { video: unknown; audio: unknown } | undefined {
const cameraSetupValues = localStorage.getItem(cameraSetup); const cameraSetupValues = localStorage.getItem(cameraSetup);
return cameraSetupValues != undefined ? JSON.parse(cameraSetupValues) : undefined; return cameraSetupValues != undefined ? JSON.parse(cameraSetupValues) : undefined;
} }
setPrivacySettings(option: string) { setCameraPrivacySettings(option: boolean) {
localStorage.setItem(privacySettings, option) localStorage.setItem(cameraPrivacySettings, option.toString());
} }
getPrivacySettings() { getCameraPrivacySettings() {
return localStorage.getItem(privacySettings); return localStorage.getItem(cameraPrivacySettings) === "true";
}
setMicrophonePrivacySettings(option: boolean) {
localStorage.setItem(microphonePrivacySettings, option.toString());
}
getMicrophonePrivacySettings() {
return localStorage.getItem(microphonePrivacySettings) === "true";
} }
getAllUserProperties(): Map<string, unknown> { getAllUserProperties(): Map<string, unknown> {

20
front/src/Stores/MediaStore.ts
View File

@ -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) // Disable webcam for privacy reasons (the game is not visible and we were talking to no one)
if ($privacyShutdownStore === true) { if ($privacyShutdownStore === true) {
const userSetting = localUserStore.getPrivacySettings(); const userMicrophonePrivacySetting = localUserStore.getMicrophonePrivacySettings();
switch (userSetting) { const userCameraPrivacySetting = localUserStore.getCameraPrivacySettings();
case "cameraEnabled": if (!userMicrophonePrivacySetting) {
currentAudioConstraint = false; currentAudioConstraint = false;
break; }
case "microphoneEnabled": if (!userCameraPrivacySetting) {
currentVideoConstraint = false; currentVideoConstraint = false;
break;
case "noneEnabled":
currentVideoConstraint = false;
currentAudioConstraint = false;
break;
} }
} }
@ -322,7 +317,6 @@ export const mediaStreamConstraintsStore = derived(
currentAudioConstraint = false; currentAudioConstraint = false;
} }
// Let's make the changes only if the new value is different from the old one. // Let's make the changes only if the new value is different from the old one.
if ( if (
previousComputedVideoConstraint != currentVideoConstraint || previousComputedVideoConstraint != currentVideoConstraint ||

11
front/src/i18n/de-DE/menu.ts
View File

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

11
front/src/i18n/en-US/menu.ts
View File

@ -58,12 +58,11 @@ const menu: BaseTranslation = {
title: "Language", title: "Language",
}, },
privacySettings: { privacySettings: {
title: "Privacy settings", title: "Away mode settings",
explaination: "Here you can set an option to keep your microphone/camera enabled when switching active tabs.", explanation:
allEnabled: "Camera and microphone always enabled", '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.',
onlyCameraEnabled: "Microphone disabled when the WA tab is not focused", cameraToggle: "Camera",
onlyMicrophoneEnabled: "Camera disabled when the WA tab is not focused", microphoneToggle: "Microphone",
allDisabled: "Both disabled when the WA tab is not focused"
}, },
save: { save: {
warning: "(Saving these settings will restart the game)", warning: "(Saving these settings will restart the game)",

11
front/src/i18n/fr-FR/menu.ts
View File

@ -58,12 +58,11 @@ const menu: NonNullable<Translation["menu"]> = {
title: "Langage", title: "Langage",
}, },
privacySettings: { privacySettings: {
title: "Paramètres de confidentialité", title: "Paramètres du mode absent",
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.", explanation:
allEnabled: "Camera et microphone toujours actifs", "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",
onlyCameraEnabled: "Seul le microphone est activé quand l'onglet WA n'est pas sélectionné", cameraToggle: "Camera",
onlyMicrophoneEnabled: "Seule la caméra est activé quand l'onglet WA n'est pas sélectionné", microphoneToggle: "Microphone",
allDisabled: "Tout désactiver quand l'onglet WA n'est pas sélectionné"
}, },
save: { save: {
warning: "(La sauvegarde de ces paramètres redémarre le jeu)", warning: "(La sauvegarde de ces paramètres redémarre le jeu)",