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);