Initialise global message

- Create new class to manager global message. My idea is that this class permit to manage audio or text message.
 - Update html to have main content id and inject html in this.
 - Create front event to receive startMessage and stopMessage.
 - Delete impoted variable not used.

front/src/Connection.ts

@@ -1,6 +1,5 @@
 import Axios from "axios";
 import {API_URL} from "./Enum/EnvironmentVariable";
-import {MessageUI} from "./Logger/MessageUI";
 import {SetPlayerDetailsMessage} from "./Messages/SetPlayerDetailsMessage";
 
 const SocketIo = require('socket.io-client');
@@ -28,6 +27,9 @@ enum EventMessage{
     SET_SILENT = "set_silent", // Set or unset the silent mode for this user.
     SET_VIEWPORT = "set-viewport",
     BATCH = "batch",
+
+    PLAY_GLOBAL_MESSAGE = "play-global-message",
+    STOP_GLOBAL_MESSAGE = "stop-global-message",
 }
 
 export interface PointInterface {
@@ -128,6 +130,12 @@ export interface RoomJoinedMessageInterface {
     items: { [itemId: number] : unknown }
 }
 
+export interface GlobalMessageInterface {
+    id: number
+    type: string
+    message: string
+}
+
 export class Connection implements Connection {
     private readonly socket: Socket;
     private userId: string|null = null;
@@ -275,6 +283,14 @@ export class Connection implements Connection {
         return this.socket.on(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, callback);
     }
 
+    public receivePlayGlobalMessage(callback: (message: GlobalMessageInterface) => void) {
+        return this.socket.on(EventMessage.PLAY_GLOBAL_MESSAGE, callback);
+    }
+
+    public receiveStopGlobalMessage(callback: (message: GlobalMessageInterface) => void) {
+        return this.socket.on(EventMessage.STOP_GLOBAL_MESSAGE, callback);
+    }
+
     public onServerDisconnected(callback: (reason: string) => void): void {
         this.socket.on('disconnect', (reason: string) => {
             if (reason === 'io client disconnect') {