From 267d0a2cd12d15d38c25ff26c69d475408336194 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 2 Jun 2021 16:46:28 +0200 Subject: [PATCH 1/3] Moving audio message to Svelte --- front/dist/index.tmpl.html | 3 -- .../Administration/GlobalMessageManager.ts | 43 ++------------- front/src/Components/App.svelte | 7 +++ front/src/Components/Login/LoginScene.svelte | 2 +- front/src/Components/UI/AudioPlaying.svelte | 53 +++++++++++++++++++ front/src/Components/UI/images/megaphone.svg | 18 +++++++ front/src/Phaser/Game/GameScene.ts | 2 +- front/src/Phaser/Game/SoundManager.ts | 4 +- front/src/Stores/SoundPlayingStore.ts | 22 ++++++++ front/style/style.scss | 29 ---------- front/webpack.config.ts | 1 + 11 files changed, 110 insertions(+), 74 deletions(-) create mode 100644 front/src/Components/UI/AudioPlaying.svelte create mode 100644 front/src/Components/UI/images/megaphone.svg create mode 100644 front/src/Stores/SoundPlayingStore.ts diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index 279609e8..7f541145 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -87,9 +87,6 @@ -
- -
diff --git a/front/src/Administration/GlobalMessageManager.ts b/front/src/Administration/GlobalMessageManager.ts index 95364e4c..1500a6ec 100644 --- a/front/src/Administration/GlobalMessageManager.ts +++ b/front/src/Administration/GlobalMessageManager.ts @@ -3,6 +3,8 @@ import {AUDIO_TYPE, MESSAGE_TYPE} from "./ConsoleGlobalMessageManager"; import {PUSHER_URL, UPLOADER_URL} from "../Enum/EnvironmentVariable"; import type {RoomConnection} from "../Connexion/RoomConnection"; import type {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels"; +import {soundPlayingStore} from "../Stores/SoundPlayingStore"; +import {soundManager} from "../Phaser/Game/SoundManager"; export class GlobalMessageManager { @@ -43,45 +45,8 @@ export class GlobalMessageManager { } } - private playAudioMessage(messageId : string, urlMessage: string){ - //delete previous elements - const previousDivAudio = document.getElementsByClassName('audio-playing'); - for(let i = 0; i < previousDivAudio.length; i++){ - previousDivAudio[i].remove(); - } - - //create new element - const divAudio : HTMLDivElement = document.createElement('div'); - divAudio.id = `audio-playing-${messageId}`; - divAudio.classList.add('audio-playing'); - const imgAudio : HTMLImageElement = document.createElement('img'); - imgAudio.src = '/resources/logos/megaphone.svg'; - const pAudio : HTMLParagraphElement = document.createElement('p'); - pAudio.textContent = 'Message audio' - divAudio.appendChild(imgAudio); - divAudio.appendChild(pAudio); - - const mainSectionDiv = HtmlUtils.getElementByIdOrFail('main-container'); - mainSectionDiv.appendChild(divAudio); - - const messageAudio : HTMLAudioElement = document.createElement('audio'); - messageAudio.id = this.getHtmlMessageId(messageId); - messageAudio.autoplay = true; - messageAudio.style.display = 'none'; - messageAudio.onended = () => { - divAudio.classList.remove('active'); - messageAudio.remove(); - setTimeout(() => { - divAudio.remove(); - }, 1000); - } - messageAudio.onplay = () => { - divAudio.classList.add('active'); - } - const messageAudioSource : HTMLSourceElement = document.createElement('source'); - messageAudioSource.src = `${UPLOADER_URL}${urlMessage}`; - messageAudio.appendChild(messageAudioSource); - mainSectionDiv.appendChild(messageAudio); + private playAudioMessage(messageId : string, urlMessage: string) { + soundPlayingStore.playSound(UPLOADER_URL + urlMessage); } private playTextMessage(messageId : string, htmlMessage: string){ diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte index 5e2b88ee..97cb5071 100644 --- a/front/src/Components/App.svelte +++ b/front/src/Components/App.svelte @@ -17,6 +17,8 @@ import {Game} from "../Phaser/Game/Game"; import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore"; import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte"; + import AudioPlaying from "./UI/AudioPlaying.svelte"; + import {soundPlayingStore} from "../Stores/SoundPlayingStore"; export let game: Game; @@ -47,6 +49,11 @@
{/if} + {#if $soundPlayingStore} +
+ +
+ {/if} + + + + + + + + + diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 10a038ba..fff6912c 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -280,7 +280,7 @@ export class GameScene extends DirtyScene implements CenterListener { this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32}); this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); //eslint-disable-next-line @typescript-eslint/no-explicit-any - (this.load as any).rexWebFont({ + (this.load as any).rexWebFont({ custom: { families: ['Press Start 2P'], urls: ['/resources/fonts/fonts.css'], diff --git a/front/src/Phaser/Game/SoundManager.ts b/front/src/Phaser/Game/SoundManager.ts index f0210494..47614fca 100644 --- a/front/src/Phaser/Game/SoundManager.ts +++ b/front/src/Phaser/Game/SoundManager.ts @@ -17,7 +17,9 @@ class SoundManager { return res(sound); } loadPlugin.audio(soundUrl, soundUrl); - loadPlugin.once('filecomplete-audio-' + soundUrl, () => res(soundManager.add(soundUrl))); + loadPlugin.once('filecomplete-audio-' + soundUrl, () => { + res(soundManager.add(soundUrl)); + }); loadPlugin.start(); }); this.soundPromises.set(soundUrl,soundPromise); diff --git a/front/src/Stores/SoundPlayingStore.ts b/front/src/Stores/SoundPlayingStore.ts new file mode 100644 index 00000000..cf1d681c --- /dev/null +++ b/front/src/Stores/SoundPlayingStore.ts @@ -0,0 +1,22 @@ +import { writable } from "svelte/store"; + +/** + * A store that contains the URL of the sound currently playing + */ +function createSoundPlayingStore() { + const { subscribe, set, update } = writable(null); + + return { + subscribe, + playSound: (url: string) => { + set(url); + }, + soundEnded: () => { + set(null); + } + + + }; +} + +export const soundPlayingStore = createSoundPlayingStore(); diff --git a/front/style/style.scss b/front/style/style.scss index 883f63bb..f43fb240 100644 --- a/front/style/style.scss +++ b/front/style/style.scss @@ -810,35 +810,6 @@ input[type=range]:focus::-ms-fill-upper { } - -/*audio html when audio message playing*/ -.main-container .audio-playing { - position: absolute; - width: 200px; - height: 54px; - right: -210px; - top: 40px; - transition: all 0.1s ease-out; - background-color: black; - border-radius: 30px 0 0 30px; - display: inline-flex; -} - -.main-container .audio-playing.active{ - right: 0; -} -.main-container .audio-playing img{ - /*width: 30px;*/ - border-radius: 50%; - background-color: #ffda01; - padding: 10px; -} -.main-container .audio-playing p{ - color: white; - margin-left: 10px; - margin-top: 14px; -} - /* VIDEO QUALITY */ .main-console div.setting h1{ color: white; diff --git a/front/webpack.config.ts b/front/webpack.config.ts index 5ff37028..3a69b74a 100644 --- a/front/webpack.config.ts +++ b/front/webpack.config.ts @@ -94,6 +94,7 @@ module.exports = { // See https://github.com/sveltejs/svelte/issues/4946#issuecomment-662168782 if (warning.code === 'a11y-no-onchange') { return } + if (warning.code === 'a11y-autofocus') { return } // process as usual handleWarning(warning); From d43633e936448bc44740ebdb3f21164c2a135ebe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 2 Jun 2021 16:52:25 +0200 Subject: [PATCH 2/3] Added an animation when audio message played --- front/src/Components/UI/AudioPlaying.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front/src/Components/UI/AudioPlaying.svelte b/front/src/Components/UI/AudioPlaying.svelte index 1001c5b2..a2c6d321 100644 --- a/front/src/Components/UI/AudioPlaying.svelte +++ b/front/src/Components/UI/AudioPlaying.svelte @@ -1,4 +1,5 @@ -
+
Audio playing

Audio message