Send and play audio message

This commit is contained in:
Gregoire Parant 2020-09-20 17:12:27 +02:00
parent 4c7e458e52
commit 45ad4bbb36
7 changed files with 117 additions and 24 deletions

View File

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

View File

@ -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,
.main-console div span{
position: absolute;
top: -20px;
left: 30%;
.message-container div p,
.main-console div p{
margin-top: 6px;
}
.message-container div:hover,

View File

@ -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';

View File

@ -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){
let previousMessage = document.getElementById(this.getHtmlMessageId(messageId));
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('span');
const buttonText = document.createElement('p');
buttonText.id = 'button-clear-message'
buttonText.innerText = 'Clear';

View File

@ -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();
}

View File

@ -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 {ConsoleGlobalMessageManager} from "../../WebRtc/ConsoleGlobalMessageManager";
import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
export enum Textures {

View File

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