diff --git a/front/dist/index.html b/front/dist/index.html index f885079a..9d883ffe 100644 --- a/front/dist/index.html +++ b/front/dist/index.html @@ -95,6 +95,9 @@
+
+ +
+ + + + + + + + + diff --git a/front/dist/resources/logos/music-file.svg b/front/dist/resources/logos/music-file.svg new file mode 100644 index 00000000..a97656ba --- /dev/null +++ b/front/dist/resources/logos/music-file.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + diff --git a/front/dist/resources/logos/music-file.svg.back b/front/dist/resources/logos/music-file.svg.back new file mode 100644 index 00000000..185bff28 --- /dev/null +++ b/front/dist/resources/logos/music-file.svg.back @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 3fc554ec..4b292df4 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -499,4 +499,63 @@ body { .main-console .menu span.active { color: white; border-bottom: solid 1px white; +} + +.main-console section{ + text-align: center; + display: none; +} + +.main-console section.active{ + display: block; +} + +.main-console section div.upload{ + text-align: center; + border: solid 1px #ffda01; + height: 150px; + margin: 10px 200px; + padding: 20px; + min-height: 200px; +} + +.main-console section div.upload label{ + color: #ffda01; +} +.main-console section div.upload input{ + display: none; +} +.main-console section div.upload label img{ + height: 150px; + cursor: pointer; +} +.main-console section div.upload label img{ + cursor: pointer; +} + +/*audio html when audio message playing*/ +.main-container .audio-playing { + position: absolute; + width: 200px; + height: 54px; + right: -210px; + top: 40px; + transition: all 0.1s ease-out; + background-color: black; + border-radius: 30px 0 0 30px; + display: inline-flex; +} + +.main-container .audio-playing.active{ + right: 0; +} +.main-container .audio-playing img{ + width: 30px; + border-radius: 50%; + background-color: #ffda01; + padding: 10px; +} +.main-container .audio-playing p{ + color: white; + margin-left: 10px; } \ No newline at end of file diff --git a/front/src/Administration/ConsoleGlobalMessageManager.ts b/front/src/Administration/ConsoleGlobalMessageManager.ts index efabd25a..37ba6dbb 100644 --- a/front/src/Administration/ConsoleGlobalMessageManager.ts +++ b/front/src/Administration/ConsoleGlobalMessageManager.ts @@ -34,10 +34,14 @@ export class ConsoleGlobalMessageManager { initialise() { try { - let mainConsole = HtmlUtils.getElementByIdOrFail(CLASS_CONSOLE_MESSAGE); - mainConsole.remove(); + HtmlUtils.removeElementByIdOrFail(CLASS_CONSOLE_MESSAGE); }catch (err){} + const typeConsole = document.createElement('input'); + typeConsole.id = INPUT_TYPE_CONSOLE; + typeConsole.value = MESSAGE_TYPE; + typeConsole.type = 'hidden'; + const menu = document.createElement('div'); menu.classList.add('menu') const textMessage = document.createElement('span'); @@ -45,14 +49,28 @@ export class ConsoleGlobalMessageManager { textMessage.classList.add('active'); textMessage.addEventListener('click', () => { textMessage.classList.add('active'); + const messageSection = HtmlUtils.getElementByIdOrFail(this.getSectionId(INPUT_CONSOLE_MESSAGE)); + messageSection.classList.add('active'); + textAudio.classList.remove('active'); + const audioSection = HtmlUtils.getElementByIdOrFail(this.getSectionId(UPLOAD_CONSOLE_MESSAGE)); + audioSection.classList.remove('active'); + + typeConsole.value = MESSAGE_TYPE; }); menu.appendChild(textMessage); const textAudio = document.createElement('span'); textAudio.innerText = "Audio"; textAudio.addEventListener('click', () => { textAudio.classList.add('active'); + const audioSection = HtmlUtils.getElementByIdOrFail(this.getSectionId(UPLOAD_CONSOLE_MESSAGE)); + audioSection.classList.add('active'); + textMessage.classList.remove('active'); + const messageSection = HtmlUtils.getElementByIdOrFail(this.getSectionId(INPUT_CONSOLE_MESSAGE)); + messageSection.classList.remove('active'); + + typeConsole.value = AUDIO_TYPE; }); menu.appendChild(textMessage); menu.appendChild(textAudio); @@ -72,8 +90,10 @@ export class ConsoleGlobalMessageManager { this.divMainConsole.className = CLASS_CONSOLE_MESSAGE; this.divMainConsole.appendChild(this.buttonMainConsole); + this.divMainConsole.appendChild(typeConsole); this.createTextMessagePart(); + this.createUploadAudioPart(); const mainSectionDiv = HtmlUtils.getElementByIdOrFail('main-container'); mainSectionDiv.appendChild(this.divMainConsole); @@ -81,8 +101,7 @@ export class ConsoleGlobalMessageManager { createTextMessagePart(){ const div = document.createElement('div'); - div.id = INPUT_CONSOLE_MESSAGE; - + div.id = INPUT_CONSOLE_MESSAGE const buttonSend = document.createElement('button'); buttonSend.innerText = 'Envoyer'; buttonSend.classList.add('btn'); @@ -94,15 +113,11 @@ export class ConsoleGlobalMessageManager { buttonDiv.classList.add('btn-action'); buttonDiv.appendChild(buttonSend) - const typeConsole = document.createElement('input'); - typeConsole.id = INPUT_TYPE_CONSOLE; - typeConsole.value = MESSAGE_TYPE; - typeConsole.type = 'hidden'; - const section = document.createElement('section'); + section.id = this.getSectionId(INPUT_CONSOLE_MESSAGE); + section.classList.add('active'); section.appendChild(div); section.appendChild(buttonDiv); - section.appendChild(typeConsole); this.divMainConsole.appendChild(section); //TODO refactor @@ -140,6 +155,62 @@ export class ConsoleGlobalMessageManager { }, 1000); } + createUploadAudioPart(){ + const div = document.createElement('div'); + div.classList.add('upload'); + + const label = document.createElement('label'); + label.setAttribute('for', UPLOAD_CONSOLE_MESSAGE); + + const img = document.createElement('img'); + img.setAttribute('for', UPLOAD_CONSOLE_MESSAGE); + img.src = 'resources/logos/music-file.svg'; + + const input = document.createElement('input'); + input.type = 'file'; + input.id = UPLOAD_CONSOLE_MESSAGE + input.addEventListener('input', (e: any) => { + if(!e.target || !e.target.files || e.target.files.length === 0){ + return; + } + let file : File = e.target.files[0]; + + if(!file){ + return; + } + + try { + HtmlUtils.removeElementByIdOrFail('audi-message-filename'); + }catch (e) {} + + const p = document.createElement('p'); + p.id = 'audi-message-filename'; + p.innerText = `${file.name} : ${this.getFileSize(file.size)}`; + label.appendChild(p); + }); + + label.appendChild(img); + div.appendChild(label); + div.appendChild(input); + + const buttonSend = document.createElement('button'); + buttonSend.innerText = 'Envoyer'; + buttonSend.classList.add('btn'); + buttonSend.addEventListener('click', (event: MouseEvent) => { + this.sendMessage(); + this.disabled(); + }); + const buttonDiv = document.createElement('div'); + buttonDiv.classList.add('btn-action'); + buttonDiv.appendChild(buttonSend) + + const section = document.createElement('section'); + section.id = this.getSectionId(UPLOAD_CONSOLE_MESSAGE); + section.appendChild(div); + section.appendChild(buttonDiv); + this.divMainConsole.appendChild(section); + } + sendMessage(){ const inputType = HtmlUtils.getElementByIdOrFail(INPUT_TYPE_CONSOLE); if(AUDIO_TYPE !== inputType.value && MESSAGE_TYPE !== inputType.value){ @@ -176,9 +247,12 @@ export class ConsoleGlobalMessageManager { let GlobalMessage : GlobalMessageInterface = { id: res.id, message: res.path, - type: MESSAGE_TYPE + type: AUDIO_TYPE }; inputAudio.value = ''; + try { + HtmlUtils.removeElementByIdOrFail('audi-message-filename'); + }catch (e) {} this.Connection.emitGlobalMessage(GlobalMessage); } @@ -194,4 +268,20 @@ export class ConsoleGlobalMessageManager { this.activeConsole = false; this.divMainConsole.style.top = '-80%'; } + + private getSectionId(id: string) : string { + return `section-${id}`; + } + + private getFileSize(number: number) :string { + if (number < 1024) { + return number + 'bytes'; + } else if (number >= 1024 && number < 1048576) { + return (number / 1024).toFixed(1) + 'KB'; + } else if (number >= 1048576) { + return (number / 1048576).toFixed(1) + 'MB'; + }else{ + return ''; + } + } } \ No newline at end of file diff --git a/front/src/Administration/GlobalMessageManager.ts b/front/src/Administration/GlobalMessageManager.ts index ec1693f8..ec700e2a 100644 --- a/front/src/Administration/GlobalMessageManager.ts +++ b/front/src/Administration/GlobalMessageManager.ts @@ -1,6 +1,7 @@ import {HtmlUtils} from "./../WebRtc/HtmlUtils"; import {Connection, GlobalMessageInterface} from "../Connection"; import {AUDIO_TYPE, MESSAGE_TYPE} from "./ConsoleGlobalMessageManager"; +import {API_URL} from "../Enum/EnvironmentVariable"; export class GlobalMessageManager { @@ -39,19 +40,45 @@ export class GlobalMessageManager { } private playAudioMessage(messageId : number, urlMessage: string){ - const messageVideo : HTMLAudioElement = document.createElement('audio'); - messageVideo.id = this.getHtmlMessageId(messageId); - messageVideo.src = urlMessage; - messageVideo.onended = () => { - messageVideo.remove(); + //delete previous elements + const previousDivAudio = document.getElementsByClassName('audio-playing'); + for(let i = 0; i < previousDivAudio.length; i++){ + previousDivAudio[i].remove(); } - messageVideo.onloadeddata = () => { - messageVideo.play(); - }; - const mainSectionDiv = HtmlUtils.getElementByIdOrFail('main-container'); - mainSectionDiv.appendChild(messageVideo); - //TODO add element when audio message is played + //create new element + const divAudio : HTMLDivElement = document.createElement('div'); + divAudio.id = `audio-playing-${messageId}`; + divAudio.classList.add('audio-playing'); + const imgAudio : HTMLImageElement = document.createElement('img'); + imgAudio.src = '/resources/logos/megaphone.svg'; + const pAudio : HTMLParagraphElement = document.createElement('p'); + pAudio.textContent = 'Message audio' + divAudio.appendChild(imgAudio); + divAudio.appendChild(pAudio); + + const mainSectionDiv = HtmlUtils.getElementByIdOrFail('main-container'); + mainSectionDiv.appendChild(divAudio); + + const messageAudio : HTMLAudioElement = document.createElement('audio'); + messageAudio.id = this.getHtmlMessageId(messageId); + messageAudio.autoplay = true; + messageAudio.style.display = 'none'; + messageAudio.onended = () => { + divAudio.classList.remove('active'); + messageAudio.remove(); + setTimeout(() => { + divAudio.remove(); + }, 1000); + } + messageAudio.onplay = () => { + console.log('play'); + divAudio.classList.add('active'); + } + const messageAudioSource : HTMLSourceElement = document.createElement('source'); + messageAudioSource.src = `${API_URL}${urlMessage}`; + messageAudio.appendChild(messageAudioSource); + mainSectionDiv.appendChild(messageAudio); } private playTextMessage(messageId : number, htmlMessage: string){