workadventure/front/src/Administration/GlobalMessageManager.ts

93 lines
3.1 KiB
TypeScript
Raw Normal View History

2020-09-20 17:12:27 +02:00
import {HtmlUtils} from "./../WebRtc/HtmlUtils";
import {Connection, GlobalMessageInterface} from "../Connection";
2020-09-20 17:12:27 +02:00
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) => {
2020-09-20 17:12:27 +02:00
this.playMessage(message);
});
//receive signal to close message
this.Connection.receiveStopGlobalMessage((message: GlobalMessageInterface) => {
this.stopMessage(message.id);
});
}
2020-09-20 17:12:27 +02:00
private playMessage(message : GlobalMessageInterface){
let previousMessage = document.getElementById(this.getHtmlMessageId(message.id));
if(previousMessage){
previousMessage.remove();
}
2020-09-20 17:12:27 +02:00
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
2020-09-20 17:12:27 +02:00
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}`;
}
}