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