Merge pull request #1499 from thecodingmachine/develop

Release 1.5.3

front/src/Components/App.svelte

@@ -1,6 +1,7 @@
 <script lang="typescript">
     import MenuIcon from "./Menu/MenuIcon.svelte";
     import {menuIconVisiblilityStore, menuVisiblilityStore} from "../Stores/MenuStore";
+    import {emoteMenuStore} from "../Stores/EmoteStore";
     import {enableCameraSceneVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
     import MyCamera from "./MyCamera.svelte";
@@ -26,6 +27,7 @@
     import {soundPlayingStore} from "../Stores/SoundPlayingStore";
     import ErrorDialog from "./UI/ErrorDialog.svelte";
     import Menu from "./Menu/Menu.svelte";
+    import EmoteMenu from "./EmoteMenu/EmoteMenu.svelte";
     import VideoOverlay from "./Video/VideoOverlay.svelte";
     import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility";
     import AdminMessage from "./TypeMessage/BanMessage.svelte";
@@ -111,6 +113,11 @@
             <Menu></Menu>
         </div>
     {/if}
+    {#if $emoteMenuStore}
+        <div>
+            <EmoteMenu></EmoteMenu>
+        </div>
+    {/if}
     {#if $gameOverlayVisibilityStore}
         <div>
             <VideoOverlay></VideoOverlay>

front/src/Components/AudioManager/AudioManager.svelte

@@ -23,6 +23,8 @@
         audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());
         changeVolume();
 
+        loadAudioSettings();
+
         unsubscriberFileStore = audioManagerFileStore.subscribe(() => {
             HTMLAudioPlayer.pause();
             HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop;
@@ -79,6 +81,11 @@
         changeVolume();
     }
 
+    function loadAudioSettings() {
+        audioManagerVolumeStore.setVolume(localUserStore.getAudioPlayerVolume());
+        audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());
+    }
+
     function setVolume() {
         volume = parseFloat(audioPlayerVol.value);
         audioManagerVolumeStore.setVolume(volume);
@@ -88,6 +95,11 @@
         changeVolume();
     }
 
+    function disallowKeys() {
+        audioPlayerVol.blur();
+        return false;
+    }
+
     function setDecrease() {
         audioManagerVolumeStore.setDecreaseWhileTalking(decreaseWhileTalking);
     }
@@ -116,7 +128,7 @@
                 </g>
             </svg>
         </span>
-        <input type="range" min="0" max="1" step="0.025" bind:this={audioPlayerVol} on:change={setVolume}>
+        <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>

front/src/Components/EmoteMenu/EmoteMenu.svelte

@@ -0,0 +1,70 @@
+<script lang="typescript">
+
+  import type { Unsubscriber } from "svelte/store";
+  import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
+  import { onDestroy, onMount } from "svelte";
+  import { EmojiButton } from '@joeattardi/emoji-button';
+  import { isMobile } from "../../Enum/EnvironmentVariable";
+
+  let emojiContainer: HTMLElement;
+  let picker: EmojiButton;
+
+  let unsubscriber: Unsubscriber | null = null;
+
+  onMount(() => {
+    picker = new EmojiButton({
+      rootElement: emojiContainer,
+      styleProperties: {
+        '--font': 'Press Start 2P'
+      },
+      emojisPerRow: isMobile() ? 6 : 8,
+      autoFocusSearch: false
+    });
+    //the timeout is here to prevent the menu from flashing
+    setTimeout(() => picker.showPicker(emojiContainer), 100);
+
+    picker.on("emoji", (selection) => {
+      emoteStore.set(selection.emoji);
+    });
+
+    picker.on("hidden", () => {
+      emoteMenuStore.closeEmoteMenu();
+    });
+
+  })
+
+  function onKeyDown(e:KeyboardEvent) {
+    if (e.key === 'Escape') {
+      emoteMenuStore.closeEmoteMenu();
+    }
+  }
+
+  onDestroy(() => {
+    if (unsubscriber) {
+      unsubscriber();
+    }
+
+    picker.destroyPicker();
+  })
+
+</script>
+
+<svelte:window on:keydown={onKeyDown}/>
+
+<div class="emote-menu-container">
+  <div class="emote-menu" bind:this={emojiContainer}></div>
+</div>
+
+<style lang="scss">
+  .emote-menu-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .emote-menu {
+    pointer-events: all;
+  }
+</style>

front/src/Components/Menu/ContactSubMenu.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-    import {CONTACT_URL} from "../../Enum/EnvironmentVariable";
-
+    import {contactPageStore} from "../../Stores/MenuStore";
 </script>
 
-<iframe title="contact" src="{CONTACT_URL}"></iframe>
+<iframe title="contact" src="{$contactPageStore}" allow="clipboard-read; clipboard-write self {$contactPageStore}" allowfullscreen></iframe>
 
 <style lang="scss">
     iframe {