diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index fd81be1b..2e2c6c10 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -1072,17 +1072,22 @@ div.modal-report-user{ } .discussion .messages .message p.body{ + color: white; font-size: 16px; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; } +.discussion .messages .message p.a{ + color: white; +} .discussion .send-message{ position: absolute; bottom: 45px; width: 220px; height: 26px; + margin-bottom: 10px; } .discussion .send-message input{ diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts index 583b1384..4282603b 100644 --- a/front/src/WebRtc/DiscussionManager.ts +++ b/front/src/WebRtc/DiscussionManager.ts @@ -59,6 +59,16 @@ export class DiscussionManager { const sendDivMessage: HTMLDivElement = document.createElement('div'); sendDivMessage.classList.add('send-message'); const inputMessage: HTMLInputElement = document.createElement('input'); + inputMessage.onfocus = () => { + if(this.userInputManager) { + this.userInputManager.clearAllInputKeyboard(); + } + } + inputMessage.onblur = () => { + if(this.userInputManager) { + this.userInputManager.initKeyBoardEvent(); + } + } inputMessage.type = "text"; inputMessage.addEventListener('keyup', (event: KeyboardEvent) => { if (event.key === 'Enter') { @@ -141,6 +151,15 @@ export class DiscussionManager { this.nbpParticipants.innerText = `PARTICIPANTS (${nb})`; } + private urlify(text: string) { + const urlRegex = /(https?:\/\/[^\s]+)/g; + return text.replace(urlRegex, (url: string) => { + return '' + url + ''; + }) + // or alternatively + // return text.replace(urlRegex, '$1') + } + public addMessage(name: string, message: string, isMe: boolean = false) { const divMessage: HTMLDivElement = document.createElement('div'); divMessage.classList.add('message'); @@ -160,11 +179,18 @@ export class DiscussionManager { divMessage.appendChild(pMessage); const userMessage: HTMLParagraphElement = document.createElement('p'); - userMessage.innerText = message; + userMessage.innerHTML = this.urlify(message); userMessage.classList.add('body'); divMessage.appendChild(userMessage); - this.divMessages?.appendChild(divMessage); + + //automatic scroll when there are new message + setTimeout(() => { + this.divMessages?.scroll({ + top: this.divMessages?.scrollTop + divMessage.getBoundingClientRect().y, + behavior: 'smooth' + }); + }, 200); } public removeParticipant(userId: number|string){ @@ -188,17 +214,11 @@ export class DiscussionManager { private showDiscussion(){ this.activeDiscussion = true; - if(this.userInputManager) { - this.userInputManager.clearAllInputKeyboard(); - } this.divDiscuss?.classList.add('active'); } private hideDiscussion(){ this.activeDiscussion = false; - if(this.userInputManager) { - this.userInputManager.initKeyBoardEvent(); - } this.divDiscuss?.classList.remove('active'); }