Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create feature to send and read audio message

Browse source
This commit is contained in:
Gregoire Parant 2020-09-21 15:00:39 +02:00
parent 16b3e48711
commit 8c43c67741
7 changed files with 247 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

49
front/src/Administration/GlobalMessageManager.ts
View file

@ -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<HTMLDivElement>('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<HTMLDivElement>('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){