Send and play audio message

front/src/Administration/ConsoleGlobalMessageManager.ts

@@ -0,0 +1,114 @@
+import {HtmlUtils} from "../WebRtc/HtmlUtils";
+import {Connection, GlobalMessageInterface} from "../Connection";
+
+export const CLASS_CONSOLE_MESSAGE = 'main-console';
+export const INPUT_CONSOLE_MESSAGE = 'input-send-text';
+export const UPLOAD_CONSOLE_MESSAGE = 'input-upload-music';
+export const BUTTON_CONSOLE_SEND = 'button-send';
+export const INPUT_TYPE_CONSOLE = 'input-type';
+
+export const AUDIO_TYPE = 'audio';
+export const MESSAGE_TYPE = 'message';
+
+export class ConsoleGlobalMessageManager {
+
+    private Connection: Connection;
+    private divMainConsole: HTMLDivElement;
+    private buttonMainConsole: HTMLDivElement;
+    private activeConsole: boolean = false;
+
+    constructor(Connection: Connection) {
+        this.Connection = Connection;
+        this.buttonMainConsole = document.createElement('div');
+        this.divMainConsole = document.createElement('div');
+        this.initialise();
+    }
+
+    initialise() {
+        const buttonText = document.createElement('p');
+        buttonText.innerText = 'Console';
+
+        this.buttonMainConsole.appendChild(buttonText);
+        this.buttonMainConsole.addEventListener('click', () => {
+            if(this.activeConsole){
+                this.disabled();
+            }else{
+                this.active();
+            }
+        });
+
+        this.divMainConsole.className = CLASS_CONSOLE_MESSAGE;
+        this.divMainConsole.appendChild(this.buttonMainConsole);
+
+        this.createTextMessagePart();
+
+        const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
+        mainSectionDiv.appendChild(this.divMainConsole);
+    }
+
+    createTextMessagePart(){
+        const input = document.createElement('textarea');
+        this.divMainConsole.appendChild(input);
+        input.id = INPUT_CONSOLE_MESSAGE;
+        const buttonSend = document.createElement('button');
+
+        buttonSend.innerText = 'Envoyer';
+        buttonSend.addEventListener('click', (event: MouseEvent) => {
+            this.sendMessage();
+            this.disabled();
+        });
+        this.divMainConsole.appendChild(buttonSend);
+
+        const typeConsole = document.createElement('input');
+        typeConsole.id = INPUT_TYPE_CONSOLE;
+        typeConsole.value = MESSAGE_TYPE;
+        typeConsole.type = 'hidden';
+        this.divMainConsole.appendChild(typeConsole);
+    }
+
+    sendMessage(){
+        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: 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';
+    }
+
+    disabled(){
+        this.activeConsole = false;
+        this.divMainConsole.style.top = '-80%';
+    }
+}

front/src/Administration/GlobalMessageManager.ts

@@ -0,0 +1,92 @@
+import {HtmlUtils} from "./../WebRtc/HtmlUtils";
+import {Connection, GlobalMessageInterface} from "../Connection";
+import {AUDIO_TYPE, MESSAGE_TYPE} from "./ConsoleGlobalMessageManager";
+
+export class GlobalMessageManager {
+
+    private Connection: Connection;
+
+    constructor(Connection: Connection) {
+        this.Connection = Connection;
+        this.initialise();
+    }
+
+    initialise(){
+        //receive signal to show message
+        this.Connection.receivePlayGlobalMessage((message: GlobalMessageInterface) => {
+            this.playMessage(message);
+        });
+
+        //receive signal to close message
+        this.Connection.receiveStopGlobalMessage((message: GlobalMessageInterface) => {
+            this.stopMessage(message.id);
+        });
+    }
+
+    private playMessage(message : GlobalMessageInterface){
+        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('p');
+        buttonText.id = 'button-clear-message'
+        buttonText.innerText = 'Clear';
+
+        const buttonMainConsole = document.createElement('div');
+        buttonMainConsole.appendChild(buttonText);
+        buttonMainConsole.addEventListener('click', () => {
+            messageContainer.style.top = '-80%';
+            setTimeout(() => {
+                messageContainer.remove();
+                buttonMainConsole.remove();
+            });
+        });
+
+        //add message container
+        const messageContainer = document.createElement('div');
+        messageContainer.innerHTML = htmlMessage;
+        messageContainer.id = this.getHtmlMessageId(messageId);
+        messageContainer.className = "message-container";
+        messageContainer.appendChild(buttonMainConsole);
+
+        const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
+        mainSectionDiv.appendChild(messageContainer);
+    }
+
+    private stopMessage(messageId: number){
+        HtmlUtils.removeElementByIdOrFail<HTMLDivElement>(this.getHtmlMessageId(messageId));
+    }
+
+    private getHtmlMessageId(messageId: number) : string{
+        return `message-${messageId}`;
+    }
+
+}