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

Adds settings options and localUser functions

Browse Source
This commit is contained in:
Benedicte Quimbert 2022-03-07 15:43:00 +01:00
parent a10f327f45
commit 453ccb7745
6 changed files with 290 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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++) {

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

@ -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 ||

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

@ -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",

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

@ -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",

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

@ -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",