Send and play audio message

back/src/Controller/FileController.ts

@@ -0,0 +1,40 @@
+import {Application, Request, Response} from "express";
+import {OK} from "http-status-codes";
+import {URL_ROOM_STARTED} from "_Enum/EnvironmentVariable";
+import {uuid} from "uuidv4";
+
+export class FileController {
+    App : Application;
+
+    constructor(App : Application) {
+        this.App = App;
+        this.uploadAudioMessage();
+        this.downloadAudioMessage();
+    }
+
+    uploadAudioMessage(){
+        this.App.post("/upload-audio-message", (req: Request, res: Response) => {
+            //TODO check user connected and admin role
+            //TODO upload audio message
+            const audioMessageId = uuid();
+            return res.status(OK).send({
+                id: audioMessageId,
+                audioMessageUrl: `/audi-message/${audioMessageId}`,
+            });
+        });
+    }
+
+    downloadAudioMessage(){
+        this.App.post("/download-audio-message/:id", (req: Request, res: Response) => {
+            //TODO check user connected and admin role
+            //TODO upload audio message
+            let audiMessageId = req.params.id;
+
+            let fs = require('fs');
+            let path = `/dist/files/${audiMessageId}`;
+            let file = fs.createReadStream(path);
+            res.writeHead(200);
+            file.pipe(res);
+        });
+    }
+}

front/dist/resources/style/style.css

@@ -427,24 +427,21 @@ body {
 .message-container div,
 .main-console div{
     position: absolute;
-    background: none repeat scroll 0% 0% #ccc0;
-    border-color: #000000cf #ffffff00 #ffffff00 #ffffff00;
-    border-style: solid;
-    border-width: 20px 7px;
-    height: auto;
-    width: 10%;
     color: white;
     z-index: 200;
-    left: 45%;
     transition: all 0.1s ease-out;
     top: 100%;
+    width: 100px;
+    height: 40px;
+    background-color: black;
+    left: calc(50% - 50px);
+    border-radius: 0 0 10px 10px;
+    text-align: center;
 }
 
-.message-container div span,
+.message-container div p,
-.main-console div span{
+.main-console div p{
-    position: absolute;
+    margin-top: 6px;
-    top: -20px;
-    left: 30%;
 }
 
 .message-container div:hover,

front/src/Administration/ConsoleGlobalMessageManager.ts

@@ -1,4 +1,4 @@
-import {HtmlUtils} from "./HtmlUtils";
+import {HtmlUtils} from "../WebRtc/HtmlUtils";
 import {Connection, GlobalMessageInterface} from "../Connection";
 
 export const CLASS_CONSOLE_MESSAGE = 'main-console';
@@ -25,7 +25,7 @@ export class ConsoleGlobalMessageManager {
     }
 
     initialise() {
-        const buttonText = document.createElement('span');
+        const buttonText = document.createElement('p');
         buttonText.innerText = 'Console';
 
         this.buttonMainConsole.appendChild(buttonText);
@@ -67,20 +67,41 @@ export class ConsoleGlobalMessageManager {
     }
 
     sendMessage(){
-        const inputText = HtmlUtils.getElementByIdOrFail<HTMLTextAreaElement>(INPUT_CONSOLE_MESSAGE);
         const inputType = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(INPUT_TYPE_CONSOLE);
         if(AUDIO_TYPE !== inputType.value && MESSAGE_TYPE !== inputType.value){
             throw "Error event type";
         }
+        if(AUDIO_TYPE !== inputType.value){
+            return this.sendAudioMessage();
+        }
+        return this.sendTextMessage();
+    }
+
+    private sendTextMessage(){
+        const inputText = HtmlUtils.getElementByIdOrFail<HTMLTextAreaElement>(INPUT_CONSOLE_MESSAGE);
         let GlobalMessage : GlobalMessageInterface = {
             id: 1,
             message: inputText.value,
-            type: inputType.value
+            type: MESSAGE_TYPE
         };
         inputText.value = '';
         this.Connection.emitGlobalMessage(GlobalMessage);
     }
 
+    private async sendAudioMessage(){
+        const inputAudio = HtmlUtils.getElementByIdOrFail<HTMLTextAreaElement>(UPLOAD_CONSOLE_MESSAGE);
+        let res = await this.Connection.uploadAudio(inputAudio.value);
+
+        let GlobalMessage : GlobalMessageInterface = {
+            id: res.id,
+            message: res.audioMessageUrl,
+            type: MESSAGE_TYPE
+        };
+        inputAudio.value = '';
+        this.Connection.emitGlobalMessage(GlobalMessage);
+    }
+
+
     active(){
         this.activeConsole = true;
         this.divMainConsole.style.top = '0';

front/src/Administration/GlobalMessageManager.ts

@@ -1,5 +1,6 @@
-import {HtmlUtils} from "./HtmlUtils";
+import {HtmlUtils} from "./../WebRtc/HtmlUtils";
 import {Connection, GlobalMessageInterface} from "../Connection";
+import {AUDIO_TYPE, MESSAGE_TYPE} from "./ConsoleGlobalMessageManager";
 
 export class GlobalMessageManager {
 
@@ -13,7 +14,7 @@ export class GlobalMessageManager {
     initialise(){
         //receive signal to show message
         this.Connection.receivePlayGlobalMessage((message: GlobalMessageInterface) => {
-            this.playMessage(message.id, message.message);
+            this.playMessage(message);
         });
 
         //receive signal to close message
@@ -22,14 +23,40 @@ export class GlobalMessageManager {
         });
     }
 
-    private playMessage(messageId : number, htmlMessage: string){
+    private playMessage(message : GlobalMessageInterface){
-        let previousMessage = document.getElementById(this.getHtmlMessageId(messageId));
+        let previousMessage = document.getElementById(this.getHtmlMessageId(message.id));
         if(previousMessage){
             previousMessage.remove();
         }
 
+        if(AUDIO_TYPE === message.type){
+            this.playAudioMessage(message.id, message.message);
+        }
+
+        if(MESSAGE_TYPE === message.type){
+            this.playTextMessage(message.id, message.message);
+        }
+    }
+
+    private playAudioMessage(messageId : number, urlMessage: string){
+        const messageVideo : HTMLAudioElement = document.createElement('audio');
+        messageVideo.id = this.getHtmlMessageId(messageId);
+        messageVideo.src = urlMessage;
+        messageVideo.onended = () => {
+            messageVideo.remove();
+        }
+        messageVideo.onloadeddata = () => {
+            messageVideo.play();
+        };
+        const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
+        mainSectionDiv.appendChild(messageVideo);
+
+        //TODO add element when audio message is played
+    }
+
+    private playTextMessage(messageId : number, htmlMessage: string){
         //add button to clear message
-        const buttonText = document.createElement('span');
+        const buttonText = document.createElement('p');
         buttonText.id = 'button-clear-message'
         buttonText.innerText = 'Clear';
 

front/src/Connection.ts

@@ -199,6 +199,15 @@ export class Connection implements Connection {
             });
     }
 
+    public uploadAudio(file : any){
+        return Axios.post(`${API_URL}/upload-audio-message`, {file}).then((res: any) => {
+            return res.data;
+        }).catch((err) => {
+            console.error(err);
+            throw err;
+        });
+    }
+
     public closeConnection(): void {
         this.socket?.close();
     }

front/src/Phaser/Game/GameScene.ts

@@ -40,8 +40,8 @@ import {FourOFourSceneName} from "../Reconnecting/FourOFourScene";
 import {ItemFactoryInterface} from "../Items/ItemFactoryInterface";
 import {ActionableItem} from "../Items/ActionableItem";
 import {UserInputManager} from "../UserInput/UserInputManager";
-import {GlobalMessageManager} from "../../WebRtc/GlobalMessageManager";
+import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
-import {ConsoleGlobalMessageManager} from "../../WebRtc/ConsoleGlobalMessageManager";
+import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
 
 
 export enum Textures {

front/src/index.ts

@@ -10,7 +10,6 @@ import {FourOFourScene} from "./Phaser/Reconnecting/FourOFourScene";
 import WebGLRenderer = Phaser.Renderer.WebGL.WebGLRenderer;
 import {OutlinePipeline} from "./Phaser/Shaders/OutlinePipeline";
 import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
-import {HtmlUtils} from "./WebRtc/HtmlUtils";
 import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
 
 //CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');