2021-08-26 12:01:07 +02:00
|
|
|
<script lang="typescript">
|
2021-12-06 16:12:37 +01:00
|
|
|
import { localUserStore } from "../../Connexion/LocalUserStore";
|
|
|
|
import { videoConstraintStore } from "../../Stores/MediaStore";
|
|
|
|
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
|
|
|
|
import { menuVisiblilityStore } from "../../Stores/MenuStore";
|
2022-01-21 17:06:03 +01:00
|
|
|
import LL, { locale } from "../../i18n/i18n-svelte";
|
|
|
|
import type { Locales } from "../../i18n/i18n-types";
|
|
|
|
import { displayableLocales, setCurrentLocale } from "../../i18n/locales";
|
2022-01-05 10:27:40 +01:00
|
|
|
import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
let fullscreen: boolean = localUserStore.getFullscreen();
|
|
|
|
let notification: boolean = localUserStore.getNotification() === "granted";
|
2021-12-06 23:13:44 +01:00
|
|
|
let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger();
|
2021-12-15 19:47:14 +01:00
|
|
|
let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests();
|
2021-12-06 16:12:37 +01:00
|
|
|
let valueGame: number = localUserStore.getGameQualityValue();
|
|
|
|
let valueVideo: number = localUserStore.getVideoQualityValue();
|
2022-01-21 17:06:03 +01:00
|
|
|
let valueLocale: string = $locale;
|
2021-12-06 16:12:37 +01:00
|
|
|
let previewValueGame = valueGame;
|
|
|
|
let previewValueVideo = valueVideo;
|
2022-01-21 17:06:03 +01:00
|
|
|
let previewValueLocale = valueLocale;
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
function saveSetting() {
|
2022-01-07 01:50:47 +01:00
|
|
|
let change = false;
|
|
|
|
|
2022-01-21 17:06:03 +01:00
|
|
|
if (valueLocale !== previewValueLocale) {
|
|
|
|
previewValueLocale = valueLocale;
|
|
|
|
setCurrentLocale(valueLocale as Locales);
|
2021-12-06 16:12:37 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if (valueVideo !== previewValueVideo) {
|
|
|
|
previewValueVideo = valueVideo;
|
|
|
|
videoConstraintStore.setFrameRate(valueVideo);
|
|
|
|
}
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2022-01-07 01:50:47 +01:00
|
|
|
if (valueGame !== previewValueGame) {
|
|
|
|
previewValueGame = valueGame;
|
|
|
|
localUserStore.setGameQualityValue(valueGame);
|
|
|
|
change = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (change) {
|
|
|
|
window.location.reload();
|
|
|
|
}
|
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
closeMenu();
|
2021-08-26 12:01:07 +02:00
|
|
|
}
|
2021-09-14 16:43:00 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
function changeFullscreen() {
|
|
|
|
const body = HtmlUtils.querySelectorOrFail("body");
|
|
|
|
if (body) {
|
|
|
|
if (document.fullscreenElement !== null && !fullscreen) {
|
2022-01-04 16:48:47 +01:00
|
|
|
document.exitFullscreen().catch((e) => console.error(e));
|
2021-12-06 16:12:37 +01:00
|
|
|
} else {
|
2022-01-04 16:48:47 +01:00
|
|
|
body.requestFullscreen().catch((e) => console.error(e));
|
2021-12-06 16:12:37 +01:00
|
|
|
}
|
|
|
|
localUserStore.setFullscreen(fullscreen);
|
|
|
|
}
|
|
|
|
}
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
function changeNotification() {
|
|
|
|
if (Notification.permission === "granted") {
|
|
|
|
localUserStore.setNotification(notification ? "granted" : "denied");
|
2021-08-26 12:01:07 +02:00
|
|
|
} else {
|
2022-01-04 16:48:47 +01:00
|
|
|
Notification.requestPermission()
|
|
|
|
.then((response) => {
|
|
|
|
if (response === "granted") {
|
|
|
|
localUserStore.setNotification(notification ? "granted" : "denied");
|
|
|
|
} else {
|
|
|
|
localUserStore.setNotification("denied");
|
|
|
|
notification = false;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch((e) => console.error(e));
|
2021-08-26 12:01:07 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-06 23:13:44 +01:00
|
|
|
function changeForceCowebsiteTrigger() {
|
|
|
|
localUserStore.setForceCowebsiteTrigger(forceCowebsiteTrigger);
|
|
|
|
}
|
|
|
|
|
2021-12-15 19:47:14 +01:00
|
|
|
function changeIgnoreFollowRequests() {
|
|
|
|
localUserStore.setIgnoreFollowRequests(ignoreFollowRequests);
|
|
|
|
}
|
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
function closeMenu() {
|
|
|
|
menuVisiblilityStore.set(false);
|
2021-08-26 12:01:07 +02:00
|
|
|
}
|
2022-01-05 10:27:40 +01:00
|
|
|
|
|
|
|
const isMobile = isMediaBreakpointUp("md");
|
2021-08-26 12:01:07 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="settings-main" on:submit|preventDefault={saveSetting}>
|
|
|
|
<section>
|
2022-01-21 17:06:03 +01:00
|
|
|
<h3>{$LL.menu.settings.gameQuality.title()}</h3>
|
2021-08-26 12:01:07 +02:00
|
|
|
<div class="nes-select is-dark">
|
|
|
|
<select bind:value={valueGame}>
|
2021-12-19 16:01:51 +01:00
|
|
|
<option value={120}
|
2022-01-05 10:27:40 +01:00
|
|
|
>{isMobile
|
2022-01-21 17:06:03 +01:00
|
|
|
? $LL.menu.settings.gameQuality.short.high()
|
|
|
|
: $LL.menu.settings.gameQuality.long.high()}</option
|
2021-12-19 16:01:51 +01:00
|
|
|
>
|
2021-12-06 16:12:37 +01:00
|
|
|
<option value={60}
|
2022-01-05 10:27:40 +01:00
|
|
|
>{isMobile
|
2022-01-21 17:06:03 +01:00
|
|
|
? $LL.menu.settings.gameQuality.short.medium()
|
|
|
|
: $LL.menu.settings.gameQuality.long.medium()}</option
|
2021-12-19 16:01:51 +01:00
|
|
|
>
|
|
|
|
<option value={40}
|
2022-01-05 10:27:40 +01:00
|
|
|
>{isMobile
|
2022-01-26 10:33:07 +01:00
|
|
|
? $LL.menu.settings.gameQuality.short.small()
|
|
|
|
: $LL.menu.settings.gameQuality.long.small()}</option
|
2021-12-19 16:01:51 +01:00
|
|
|
>
|
|
|
|
<option value={20}
|
2022-01-05 10:27:40 +01:00
|
|
|
>{isMobile
|
2022-01-26 10:33:07 +01:00
|
|
|
? $LL.menu.settings.gameQuality.short.minimum()
|
|
|
|
: $LL.menu.settings.gameQuality.long.minimum()}</option
|
2021-12-06 16:12:37 +01:00
|
|
|
>
|
2021-08-26 12:01:07 +02:00
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
2022-01-21 17:06:03 +01:00
|
|
|
<h3>{$LL.menu.settings.videoQuality.title()}</h3>
|
2021-08-26 12:01:07 +02:00
|
|
|
<div class="nes-select is-dark">
|
|
|
|
<select bind:value={valueVideo}>
|
2021-12-19 16:01:51 +01:00
|
|
|
<option value={30}
|
2022-01-05 10:27:40 +01:00
|
|
|
>{isMobile
|
2022-01-21 17:06:03 +01:00
|
|
|
? $LL.menu.settings.videoQuality.short.high()
|
|
|
|
: $LL.menu.settings.videoQuality.long.high()}</option
|
2021-12-19 16:01:51 +01:00
|
|
|
>
|
2021-12-06 16:12:37 +01:00
|
|
|
<option value={20}
|
2022-01-05 10:27:40 +01:00
|
|
|
>{isMobile
|
2022-01-21 17:06:03 +01:00
|
|
|
? $LL.menu.settings.videoQuality.short.medium()
|
|
|
|
: $LL.menu.settings.videoQuality.long.medium()}</option
|
2021-12-19 16:01:51 +01:00
|
|
|
>
|
|
|
|
<option value={10}
|
2022-01-05 10:27:40 +01:00
|
|
|
>{isMobile
|
2022-01-26 10:33:07 +01:00
|
|
|
? $LL.menu.settings.videoQuality.short.small()
|
|
|
|
: $LL.menu.settings.videoQuality.long.small()}</option
|
2021-12-19 16:01:51 +01:00
|
|
|
>
|
|
|
|
<option value={5}
|
2022-01-05 10:27:40 +01:00
|
|
|
>{isMobile
|
2022-01-26 10:33:07 +01:00
|
|
|
? $LL.menu.settings.videoQuality.short.minimum()
|
|
|
|
: $LL.menu.settings.videoQuality.long.minimum()}</option
|
2021-12-06 16:12:37 +01:00
|
|
|
>
|
2021-08-26 12:01:07 +02:00
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</section>
|
2022-01-07 01:50:47 +01:00
|
|
|
<section>
|
2022-01-21 17:06:03 +01:00
|
|
|
<h3>{$LL.menu.settings.language.title()}</h3>
|
2022-01-07 01:50:47 +01:00
|
|
|
<div class="nes-select is-dark">
|
2022-01-21 17:06:03 +01:00
|
|
|
<select class="languages-switcher" bind:value={valueLocale}>
|
|
|
|
{#each displayableLocales as locale (locale.id)}
|
|
|
|
<option value={locale.id}>{`${locale.language} (${locale.country})`}</option>
|
2022-01-07 01:50:47 +01:00
|
|
|
{/each}
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</section>
|
2021-08-26 12:01:07 +02:00
|
|
|
<section class="settings-section-save">
|
2022-01-21 17:06:03 +01:00
|
|
|
<p>{$LL.menu.settings.save.warning()}</p>
|
2021-12-19 16:01:51 +01:00
|
|
|
<button type="button" class="nes-btn is-primary" on:click|preventDefault={saveSetting}
|
2022-01-21 17:06:03 +01:00
|
|
|
>{$LL.menu.settings.save.button()}</button
|
2021-12-19 16:01:51 +01:00
|
|
|
>
|
2021-08-26 12:01:07 +02:00
|
|
|
</section>
|
|
|
|
<section class="settings-section-noSaveOption">
|
|
|
|
<label>
|
2021-12-06 16:12:37 +01:00
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
class="nes-checkbox is-dark"
|
|
|
|
bind:checked={fullscreen}
|
|
|
|
on:change={changeFullscreen}
|
|
|
|
/>
|
2022-01-21 17:06:03 +01:00
|
|
|
<span>{$LL.menu.settings.fullscreen()}</span>
|
2021-08-26 12:01:07 +02:00
|
|
|
</label>
|
|
|
|
<label>
|
2021-12-06 16:12:37 +01:00
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
class="nes-checkbox is-dark"
|
|
|
|
bind:checked={notification}
|
|
|
|
on:change={changeNotification}
|
|
|
|
/>
|
2022-01-21 17:06:03 +01:00
|
|
|
<span>{$LL.menu.settings.notifications()}</span>
|
2021-12-06 23:13:44 +01:00
|
|
|
</label>
|
|
|
|
<label>
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
class="nes-checkbox is-dark"
|
|
|
|
bind:checked={forceCowebsiteTrigger}
|
|
|
|
on:change={changeForceCowebsiteTrigger}
|
|
|
|
/>
|
2022-01-21 17:06:03 +01:00
|
|
|
<span>{$LL.menu.settings.cowebsiteTrigger()}</span>
|
2021-12-15 19:47:14 +01:00
|
|
|
</label>
|
|
|
|
<label>
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
class="nes-checkbox is-dark"
|
|
|
|
bind:checked={ignoreFollowRequests}
|
|
|
|
on:change={changeIgnoreFollowRequests}
|
|
|
|
/>
|
2022-01-21 17:06:03 +01:00
|
|
|
<span>{$LL.menu.settings.ignoreFollowRequest()}</span>
|
2021-08-26 12:01:07 +02:00
|
|
|
</label>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2022-01-05 10:27:40 +01:00
|
|
|
@import "../../../style/breakpoints.scss";
|
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
div.settings-main {
|
|
|
|
height: calc(100% - 40px);
|
|
|
|
overflow-y: auto;
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
section {
|
|
|
|
width: 100%;
|
|
|
|
padding: 20px 20px 0;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
text-align: center;
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
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;
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
label {
|
|
|
|
flex: 1 1 auto;
|
|
|
|
text-align: center;
|
|
|
|
margin: 0 0 15px;
|
|
|
|
}
|
|
|
|
}
|
2022-01-07 01:50:47 +01:00
|
|
|
|
|
|
|
.languages-switcher option {
|
|
|
|
text-transform: capitalize;
|
|
|
|
}
|
2021-08-26 12:01:07 +02:00
|
|
|
}
|
|
|
|
|
2022-01-05 10:27:40 +01:00
|
|
|
@include media-breakpoint-up(md) {
|
2021-12-06 16:12:37 +01:00
|
|
|
div.settings-main {
|
|
|
|
section {
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
}
|
2021-08-26 12:01:07 +02:00
|
|
|
}
|
2021-12-06 16:12:37 +01:00
|
|
|
</style>
|