From 45ad4bbb36c6852ef2ca6c9e0b711d5c95d6d64c Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sun, 20 Sep 2020 17:12:27 +0200 Subject: [PATCH] Send and play audio message --- back/src/Controller/FileController.ts | 40 +++++++++++++++++++ front/dist/resources/style/style.css | 21 +++++----- .../ConsoleGlobalMessageManager.ts | 29 ++++++++++++-- .../GlobalMessageManager.ts | 37 ++++++++++++++--- front/src/Connection.ts | 9 +++++ front/src/Phaser/Game/GameScene.ts | 4 +- front/src/index.ts | 1 - 7 files changed, 117 insertions(+), 24 deletions(-) create mode 100644 back/src/Controller/FileController.ts rename front/src/{WebRtc => Administration}/ConsoleGlobalMessageManager.ts (79%) rename front/src/{WebRtc => Administration}/GlobalMessageManager.ts (61%) diff --git a/back/src/Controller/FileController.ts b/back/src/Controller/FileController.ts new file mode 100644 index 00000000..162429dc --- /dev/null +++ b/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); + }); + } +} \ No newline at end of file diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 90ca3826..bf66bf3d 100644 --- a/front/dist/resources/style/style.css +++ b/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, -.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, diff --git a/front/src/WebRtc/ConsoleGlobalMessageManager.ts b/front/src/Administration/ConsoleGlobalMessageManager.ts similarity index 79% rename from front/src/WebRtc/ConsoleGlobalMessageManager.ts rename to front/src/Administration/ConsoleGlobalMessageManager.ts index 40f0587e..61bdc744 100644 --- a/front/src/WebRtc/ConsoleGlobalMessageManager.ts +++ b/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(INPUT_CONSOLE_MESSAGE); const inputType = HtmlUtils.getElementByIdOrFail(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(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(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'; diff --git a/front/src/WebRtc/GlobalMessageManager.ts b/front/src/Administration/GlobalMessageManager.ts similarity index 61% rename from front/src/WebRtc/GlobalMessageManager.ts rename to front/src/Administration/GlobalMessageManager.ts index 6a0ef7e4..ec1693f8 100644 --- a/front/src/WebRtc/GlobalMessageManager.ts +++ b/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){ - 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('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'; diff --git a/front/src/Connection.ts b/front/src/Connection.ts index 1341347b..f8aeb9bc 100644 --- a/front/src/Connection.ts +++ b/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(); } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 332c3bcd..15b269ae 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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 {ConsoleGlobalMessageManager} from "../../WebRtc/ConsoleGlobalMessageManager"; +import {GlobalMessageManager} from "../../Administration/GlobalMessageManager"; +import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager"; export enum Textures { diff --git a/front/src/index.ts b/front/src/index.ts index 2356bd0a..8009843e 100644 --- a/front/src/index.ts +++ b/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');