merged develop

2022-03-28 13:16:29 +02:00
parent a8cd37bcf9 9d3e06ca10
commit b95d5f1d10
284 changed files with 13296 additions and 3161 deletions
@@ -2,10 +2,12 @@
    import { actionsMenuStore } from "../../Stores/ActionsMenuStore";
    import { onDestroy } from "svelte";

+    import type { ActionsMenuAction } from "../../Stores/ActionsMenuStore";
    import type { Unsubscriber } from "svelte/store";
    import type { ActionsMenuData } from "../../Stores/ActionsMenuStore";

    let actionsMenuData: ActionsMenuData | undefined;
+    let sortedActions: ActionsMenuAction[] | undefined;

    let actionsMenuStoreUnsubscriber: Unsubscriber | null;

@@ -21,6 +23,20 @@

    actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe((value) => {
        actionsMenuData = value;
+        if (actionsMenuData) {
+            sortedActions = [...actionsMenuData.actions.values()].sort((a, b) => {
+                const ap = a.priority ?? 0;
+                const bp = b.priority ?? 0;
+                if (ap > bp) {
+                    return -1;
+                }
+                if (ap < bp) {
+                    return 1;
+                } else {
+                    return 0;
+                }
+            });
+        }
    });

    onDestroy(() => {
@@ -37,15 +53,15 @@
        <button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>&times</button>
        <h2>{actionsMenuData.playerName}</h2>
        <div class="actions">
-            {#each [...actionsMenuData.actions] as { actionName, callback }}
+            {#each sortedActions ?? [] as action}
                <button
                    type="button"
-                    class="nes-btn"
+                    class="nes-btn {action.style ?? ''}"
                    on:click|preventDefault={() => {
-                        callback();
+                        action.callback();
                    }}
                >
-                    {actionName}
+                    {action.actionName}
                </button>
            {/each}
        </div>
@@ -61,6 +77,7 @@
        height: max-content !important;
        max-height: 40vh;
        margin-top: 200px;
+        z-index: 425;

        pointer-events: auto;
        font-family: "Press Start 2P";
@@ -68,7 +85,7 @@
        color: whitesmoke;

        .actions {
-            max-height: calc(100% - 50px);
+            max-height: 30vh;
            width: 100%;
            display: block;
            overflow-x: hidden;
@@ -13,20 +13,20 @@
    let unsubscriberFileStore: Unsubscriber | null = null;
    let unsubscriberVolumeStore: Unsubscriber | null = null;

-    let decreaseWhileTalking: boolean = true;
+    let isAudioAllowed: boolean = true;

    onMount(() => {
        let volume = Math.min(localUserStore.getAudioPlayerVolume(), get(audioManagerVolumeStore).volume);
        audioManagerVolumeStore.setVolume(volume);
        audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());

-        unsubscriberFileStore = audioManagerFileStore.subscribe((src) => {
+        unsubscriberFileStore = audioManagerFileStore.subscribe((src: string) => {
            HTMLAudioPlayer.pause();
            HTMLAudioPlayer.src = src;
            HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop;
            HTMLAudioPlayer.volume = get(audioManagerVolumeStore).volume;
            HTMLAudioPlayer.muted = get(audioManagerVolumeStore).muted;
-            void HTMLAudioPlayer.play();
+            tryPlay();
        });
        unsubscriberVolumeStore = audioManagerVolumeStore.subscribe((audioManager: audioManagerVolume) => {
            const reduceVolume = audioManager.talking && audioManager.decreaseWhileTalking;
@@ -52,6 +52,16 @@
        }
    });

+    function tryPlay() {
+        void HTMLAudioPlayer.play()
+            .then(() => {
+                isAudioAllowed = true;
+            })
+            .catch(() => {
+                isAudioAllowed = false;
+            });
+    }
+
    function updateVolumeUI() {
        if (get(audioManagerVolumeStore).muted) {
            audioPlayerVolumeIcon.classList.add("muted");
@@ -90,73 +100,67 @@
        audioPlayerVol.blur();
        return false;
    }
-
-    function setDecrease() {
-        audioManagerVolumeStore.setDecreaseWhileTalking(decreaseWhileTalking);
-    }
 </script>

 <div class="main-audio-manager nes-container is-rounded">
-    <div class="audio-manager-player-volume">
-        <span
-            id="audioplayer_volume_icon_playing"
-            alt="player volume"
-            bind:this={audioPlayerVolumeIcon}
-            on:click={onMute}
-        >
-            <svg
-                width="2em"
-                height="2em"
-                viewBox="0 0 16 16"
-                class="bi bi-volume-up"
-                fill="white"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    fill-rule="evenodd"
-                    d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z"
-                />
-                <g id="audioplayer_volume_icon_playing_high">
+    <div class:hidden={!isAudioAllowed}>
+        <div class="audio-manager-player-volume">
+            <span id="audioplayer_volume_icon_playing" bind:this={audioPlayerVolumeIcon} on:click={onMute}>
+                <svg
+                    width="2em"
+                    height="2em"
+                    viewBox="0 0 16 16"
+                    class="bi bi-volume-up"
+                    fill="white"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
                    <path
-                        d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"
+                        fill-rule="evenodd"
+                        d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z"
                    />
-                </g>
-                <g id="audioplayer_volume_icon_playing_mid">
-                    <path
-                        d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"
-                    />
-                </g>
-                <g id="audioplayer_volume_icon_playing_low">
-                    <path
-                        d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707z"
-                    />
-                </g>
-            </svg>
-        </span>
-        <input
-            type="range"
-            min="0"
-            max="1"
-            step="0.025"
-            bind:this={audioPlayerVol}
-            on:change={setVolume}
-            on:keydown={disallowKeys}
-        />
-    </div>
-    <div class="audio-manager-reduce-conversation">
-        <label>
-            {$LL.audio.manager.reduce()}
-            <input type="checkbox" bind:checked={decreaseWhileTalking} on:change={setDecrease} />
-        </label>
+                    <g id="audioplayer_volume_icon_playing_high">
+                        <path
+                            d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"
+                        />
+                    </g>
+                    <g id="audioplayer_volume_icon_playing_mid">
+                        <path
+                            d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"
+                        />
+                    </g>
+                    <g id="audioplayer_volume_icon_playing_low">
+                        <path
+                            d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707z"
+                        />
+                    </g>
+                </svg>
+            </span>
+            <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.025"
+                bind:this={audioPlayerVol}
+                on:change={setVolume}
+                on:keydown={disallowKeys}
+            />
+        </div>
        <section class="audio-manager-file">
            <!-- svelte-ignore a11y-media-has-caption -->
            <audio class="audio-manager-audioplayer" bind:this={HTMLAudioPlayer} />
        </section>
    </div>
+    <div class:hidden={isAudioAllowed}>
+        <button type="button" class="nes-btn" on:click={tryPlay}>{$LL.audio.manager.allow()}</button>
+    </div>
 </div>

 <style lang="scss">
-    div.main-audio-manager.nes-container.is-rounded {
+    .hidden {
+        display: none;
+    }
+
+    div.main-audio-manager {
        position: absolute;
        top: 1%;
        max-height: clamp(150px, 10vh, 15vh); //replace @media for small screen
@@ -9,6 +9,8 @@
    import { iframeStates } from "../../WebRtc/CoWebsiteManager";
    import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";

+    import uploadFile from "../images/jitsi.png";
+
    export let index: number;
    export let coWebsite: CoWebsite;
    export let vertical: boolean;
@@ -21,7 +23,7 @@

    onMount(() => {
        icon.src = isJitsi
-            ? "/resources/logos/jitsi.png"
+            ? uploadFile
            : `${ICON_URL}/icon?url=${coWebsite.getUrl().hostname}&size=64..96..256&fallback_icon_color=14304c`;
        icon.alt = coWebsite.getUrl().hostname;
        icon.onload = () => {
@@ -350,9 +352,14 @@
            color: white;
            padding: 4px;
            border-radius: 4px;
+
            p {
                margin-bottom: 0;
            }
+
+            &.hide {
+                display: none;
+            }
        }
    }
 </style>
@@ -18,5 +18,7 @@
        display: flex;
        padding-top: 2%;
        height: 100%;
+        position: relative;
+        z-index: 200;
    }
 </style>
@@ -1,8 +1,6 @@
 <script lang="ts">
    import { fly } from "svelte/transition";
    import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore";
-    import firefoxImg from "./images/help-setting-camera-permission-firefox.png";
-    import chromeImg from "./images/help-setting-camera-permission-chrome.png";
    import { getNavigatorType, isAndroid as isAndroidFct, NavigatorType } from "../../WebRtc/DeviceUtils";
    import LL from "../../i18n/i18n-svelte";

@@ -33,9 +31,9 @@
                <p class="err">
                    {$LL.camera.help.firefoxContent()}
                </p>
-                <img src={firefoxImg} alt="" />
+                <img src={$LL.camera.help.screen.firefox()} alt="" />
            {:else if isChrome && !isAndroid}
-                <img src={chromeImg} alt="" />
+                <img src={$LL.camera.help.screen.chrome()} alt="" />
            {/if}
        </p>
    </section>
@@ -0,0 +1,21 @@
+<!-- https://lihautan.com/notes/svelte-lazy-load/ -->
+<script>
+    export let when = false;
+    export let component;
+
+    let loading;
+
+    $: if (when) {
+        load();
+    }
+
+    function load() {
+        loading = component();
+    }
+</script>
+
+{#if when}
+    {#await loading then { default: Component }}
+        <Component />
+    {/await}
+{/if}
@@ -3,6 +3,7 @@
    import { LoginScene, LoginSceneName } from "../../Phaser/Login/LoginScene";
    import { DISPLAY_TERMS_OF_USE, MAX_USERNAME_LENGTH } from "../../Enum/EnvironmentVariable";
    import logoImg from "../images/logo.png";
+    import poweredByWorkAdventureImg from "../images/Powered_By_WorkAdventure_Big.png";
    import { gameManager } from "../../Phaser/Game/GameManager";
    import LL from "../../i18n/i18n-svelte";

@@ -13,6 +14,8 @@
    let name = gameManager.getPlayerName() || "";
    let startValidating = false;

+    let logo = gameManager.currentStartedRoom.loginSceneLogo ?? logoImg;
+
    function submit() {
        startValidating = true;

@@ -25,7 +28,7 @@

 <form class="loginScene" on:submit|preventDefault={submit}>
    <section class="text-center">
-        <img src={logoImg} alt="WorkAdventure logo" />
+        <img src={logo} alt="" />
    </section>
    <section class="text-center">
        <h2>{$LL.login.input.name.placeholder()}</h2>
@@ -60,6 +63,11 @@
    <section class="action">
        <button type="submit" class="nes-btn is-primary loginSceneFormSubmit">{$LL.login.continue()}</button>
    </section>
+    {#if logo !== logoImg}
+        <section class="text-center powered-by">
+            <img src={poweredByWorkAdventureImg} alt="Powered by WorkAdventure" />
+        </section>
+    {/if}
 </form>

 <style lang="scss">
@@ -132,6 +140,11 @@
                width: 100%;
                margin: 20px 0;
            }
+
+            &.powered-by {
+                position: fixed;
+                bottom: 0;
+            }
        }
    }
 </style>
@@ -12,7 +12,6 @@
    import AudioManager from "./AudioManager/AudioManager.svelte";
    import CameraControls from "./CameraControls.svelte";
    import EmbedScreensContainer from "./EmbedScreens/EmbedScreensContainer.svelte";
-    import EmoteMenu from "./EmoteMenu/EmoteMenu.svelte";
    import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
    import LayoutActionManager from "./LayoutActionManager/LayoutActionManager.svelte";
    import Menu from "./Menu/Menu.svelte";
@@ -38,6 +37,7 @@
    import { LayoutMode } from "../WebRtc/LayoutManager";
    import { actionsMenuStore } from "../Stores/ActionsMenuStore";
    import ActionsMenu from "./ActionsMenu/ActionsMenu.svelte";
+    import Lazy from "./Lazy.svelte";

    let mainLayout: HTMLDivElement;

@@ -54,6 +54,7 @@
    });
 </script>

+<!-- Components ordered by z-index -->
 <div id="main-layout" bind:this={mainLayout}>
    <aside id="main-layout-left-aside">
        {#if $menuIconVisiblilityStore}
@@ -104,21 +105,19 @@
            <ShareLinkMapModal />
        {/if}

-        {#if $followStateStore !== "off" || $peerStore.size > 0}
-            <FollowMenu />
-        {/if}
-
        {#if $actionsMenuStore}
            <ActionsMenu />
        {/if}

+        {#if $followStateStore !== "off" || $peerStore.size > 0}
+            <FollowMenu />
+        {/if}
+
        {#if $requestVisitCardsStore}
            <VisitCard visitCardUrl={$requestVisitCardsStore} />
        {/if}

-        {#if $emoteMenuStore}
-            <EmoteMenu />
-        {/if}
+        <Lazy when={$emoteMenuStore} component={() => import("./EmoteMenu/EmoteMenu.svelte")} />

        {#if hasEmbedScreen}
            <EmbedScreensContainer />
@@ -44,7 +44,6 @@

    async function logOut() {
        disableMenuStores();
-        loginSceneVisibleStore.set(true);
        return connectionManager.logout();
    }

@@ -7,17 +7,24 @@
    import type { Locales } from "../../i18n/i18n-types";
    import { displayableLocales, setCurrentLocale } from "../../i18n/locales";
    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 valueCameraPrivacySettings = localUserStore.getCameraPrivacySettings();
+    let valueMicrophonePrivacySettings = localUserStore.getMicrophonePrivacySettings();
+
    let previewValueGame = valueGame;
    let previewValueVideo = valueVideo;
    let previewValueLocale = valueLocale;
+    let previewCameraPrivacySettings = valueCameraPrivacySettings;
+    let previewMicrophonePrivacySettings = valueMicrophonePrivacySettings;

    function saveSetting() {
        let change = false;
@@ -38,6 +45,18 @@
            change = true;
        }

+        if (valueCameraPrivacySettings !== previewCameraPrivacySettings) {
+            previewCameraPrivacySettings = valueCameraPrivacySettings;
+            localUserStore.setCameraPrivacySettings(valueCameraPrivacySettings);
+        }
+
+        if (valueMicrophonePrivacySettings !== previewMicrophonePrivacySettings) {
+            previewMicrophonePrivacySettings = valueMicrophonePrivacySettings;
+            localUserStore.setMicrophonePrivacySettings(valueMicrophonePrivacySettings);
+        }
+
+        audioManagerVolumeStore.setDecreaseWhileTalking(decreaseAudioPlayerVolumeWhileTalking);
+
        if (change) {
            window.location.reload();
        }
@@ -82,6 +101,10 @@
        localUserStore.setIgnoreFollowRequests(ignoreFollowRequests);
    }

+    function changeDecreaseAudioPlayerVolumeWhileTalking() {
+        localUserStore.setDecreaseAudioPlayerVolumeWhileTalking(decreaseAudioPlayerVolumeWhileTalking);
+    }
+
    function closeMenu() {
        menuVisiblilityStore.set(false);
    }
@@ -154,6 +177,19 @@
            </select>
        </div>
    </section>
+
+    <section>
+        <h3>{$LL.menu.settings.privacySettings.title()}</h3>
+        <p>{$LL.menu.settings.privacySettings.explanation()}</p>
+        <label>
+            <input type="checkbox" class="nes-checkbox is-dark" bind:checked={valueCameraPrivacySettings} />
+            <span>{$LL.menu.settings.privacySettings.cameraToggle()}</span>
+        </label>
+        <label>
+            <input type="checkbox" class="nes-checkbox is-dark" bind:checked={valueMicrophonePrivacySettings} />
+            <span>{$LL.menu.settings.privacySettings.microphoneToggle()}</span>
+        </label>
+    </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}
@@ -196,6 +232,15 @@
                on:change={changeIgnoreFollowRequests}
            />
            <span>{$LL.menu.settings.ignoreFollowRequest()}</span>
+            <label>
+                <input
+                    type="checkbox"
+                    class="nes-checkbox is-dark"
+                    bind:checked={decreaseAudioPlayerVolumeWhileTalking}
+                    on:change={changeDecreaseAudioPlayerVolumeWhileTalking}
+                />
+                <span>{$LL.audio.manager.reduce()}</span>
+            </label>
        </label>
    </section>
 </div>
@@ -217,12 +262,15 @@
                outline: none;
            }
        }
+
        section.settings-section-save {
            text-align: center;
+
            p {
                margin: 16px 0;
            }
        }
+
        section.settings-section-noSaveOption {
            display: flex;
            align-items: center;
@@ -76,6 +76,7 @@
        transform: translate(-50%, 0);
        margin-top: 200px;
        max-width: 80vw;
+        z-index: 350;

        iframe {
            border: 0;
@@ -2,6 +2,7 @@
    import type { Game } from "../../Phaser/Game/Game";
    import { SelectCharacterScene, SelectCharacterSceneName } from "../../Phaser/Login/SelectCharacterScene";
    import LL from "../../i18n/i18n-svelte";
+    import { customizeAvailableStore } from "../../Stores/SelectCharacterSceneStore";

    export let game: Game;

@@ -40,11 +41,13 @@
            class="selectCharacterSceneFormSubmit nes-btn is-primary"
            on:click|preventDefault={cameraScene}>{$LL.woka.selectWoka.continue()}</button
        >
-        <button
-            type="submit"
-            class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn"
-            on:click|preventDefault={customizeScene}>{$LL.woka.selectWoka.customize()}</button
-        >
+        {#if $customizeAvailableStore}
+            <button
+                type="submit"
+                class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn"
+                on:click|preventDefault={customizeScene}>{$LL.woka.selectWoka.customize()}</button
+            >
+        {/if}
    </section>
 </form>