import { Component , OnInit , OnDestroy , ElementRef } from '@angular/core' ; import { FormGroup , FormBuilder , Validators , FormControl , } from '@angular/forms' ; import { Router , ActivatedRoute , Params } from '@angular/router' ; import { Message } from '../../models/message.model' ; import { ChatService } from '../../services/chat.service' ; import { AuthService } from '../../services/auth.service' ; @ Component ( { selector : 'app-chat-room' , templateUrl : './chat-room.component.html' , styleUrls : [ './chat-room.component.scss' ] , } ) export class ChatRoomComponent implements OnInit , OnDestroy { messageList : Array < Message > ; userList : Array < any > ; showActive : boolean ; sendForm : FormGroup ; username : string ; chatWith : string ; currentOnline : boolean ; receiveMessageObs : any ; receiveActiveObs : any ; noMsg : boolean ; conversationId : string ; notify : boolean ; notification : any = { timeout : null } ; constructor ( public route , public router , public formBuilder , public el , public authService , public chatService ) { } ngOnInit ( ) { let userData = this . authService . getUserData ( ) ; this . username = userData . user . username ; this . route . params . subscribe ( ( params ) => { this . chatWith = params . chatWith ; } ) ; this . sendForm = this . formBuilder . group ( { message : [ '' , Validators . required ] , } ) ; this . getMessages ( this . chatWith ) ; this . connectToChat ( ) ; } ngOnDestroy ( ) { this . receiveActiveObs && this . receiveActiveObs . unsubscribe ( ) ; this . receiveMessageObs && this . receiveMessageObs . unsubscribe ( ) ; } connectToChat ( ) { let connected = this . chatService . isConnected ( ) ; if ( connected == true ) { this . initReceivers ( ) ; } else { this . chatService . connect ( this . username , ( ) => { this . initReceivers ( ) ; } ) ; } } getMessages ( name ) { this . chatService . getConversation ( this . username , name ) . subscribe ( data => { if ( data . success == true ) { this . conversationId = data . conversation . _id || data . conversation . _doc . _id ; let messages = data . conversation . messages || null ; if ( messages && messages . length > 0 ) { for ( let message of messages ) { this . checkMine ( message ) ; } this . noMsg = false ; this . messageList = messages ; this . scrollToBottom ( ) ; } else { this . noMsg = true ; this . messageList = [ ] ; } } else { this . onNewConv ( 'chat-room' ) ; } } ) ; } getUserList ( ) { this . chatService . getUserList ( ) . subscribe ( data => { if ( data . success == true ) { let users = data . users ; for ( let i = 0 ; i < users . length ; i ++ ) { if ( users [ i ] . username == this . username ) { users . splice ( i , 1 ) ; break ; } } this . userList = users . sort ( this . compareByUsername ) ; this . receiveActiveObs = this . chatService . receiveActiveList ( ) . subscribe ( users => { for ( let onlineUsr of users ) { if ( onlineUsr . username != this . username ) { let flaggy = 0 ; for ( let registered of this . userList ) { if ( registered . username == onlineUsr . username ) { flaggy = 1 ; break ; } } if ( flaggy == 0 ) { this . userList . push ( onlineUsr ) ; this . userList . sort ( this . compareByUsername ) ; } } } for ( let user of this . userList ) { let flag = 0 ; for ( let liveUser of users ) { if ( liveUser . username == user . username ) { user . online = true ; flag = 1 ; break ; } } if ( flag == 0 ) { user . online = false ; } } this . currentOnline = this . checkOnline ( this . chatWith ) ; } ) ; this . chatService . getActiveList ( ) ; } else { this . onNewConv ( 'chat-room' ) ; } } ) ; } initReceivers ( ) { this . getUserList ( ) ; this . receiveMessageObs = this . chatService . receiveMessage ( ) . subscribe ( message => { this . checkMine ( message ) ; if ( message . conversationId == this . conversationId ) { this . noMsg = false ; this . messageList . push ( message ) ; this . scrollToBottom ( ) ; this . msgSound ( ) ; } else if ( message . mine != true ) { if ( this . notification . timeout ) { clearTimeout ( this . notification . timeout ) ; } this . notification = { from : message . from , inChatRoom : message . inChatRoom , text : message . text , timeout : setTimeout ( ( ) => { this . notify = false ; } , 4000 ) , } ; this . notify = true ; this . notifSound ( ) ; } } ) ; } onSendSubmit ( ) { let newMessage = { created : new Date ( ) , from : this . username , text : this . sendForm . value . message , conversationId : this . conversationId , inChatRoom : this . chatWith == 'chat-room' , } ; this . chatService . sendMessage ( newMessage , this . chatWith ) ; newMessage . mine = true ; this . noMsg = false ; this . messageList . push ( newMessage ) ; this . scrollToBottom ( ) ; this . msgSound ( ) ; this . sendForm . setValue ( { message : '' } ) ; } checkMine ( message ) { if ( message . from == this . username ) { message . mine = true ; } } onUsersClick ( ) { this . showActive = ! this . showActive ; } onNewConv ( username ) { if ( this . chatWith != username ) { this . router . navigate ( [ '/chat' , username ] ) ; this . getMessages ( username ) ; } else { this . getMessages ( username ) ; } this . currentOnline = this . checkOnline ( username ) ; this . showActive = false ; } notifSound ( ) { let sound = this . el . nativeElement . querySelector ( '#notifSound' ) ; sound . play ( ) ; } msgSound ( ) { let sound = this . el . nativeElement . querySelector ( '#msgSound' ) ; sound . load ( ) ; sound . play ( ) ; } scrollToBottom ( ) { let element = this . el . nativeElement . querySelector ( '.msg-container' ) ; setTimeout ( ( ) => { element . scrollTop = element . scrollHeight ; } , 100 ) ; } checkOnline ( name ) { if ( name == 'chat-room' ) { for ( let user of this . userList ) { if ( user . online == true ) { return true ; } } return false ; } else { for ( let user of this . userList ) { if ( user . username == name ) { return user . online ; } } } } compareByUsername ( a , b ) { if ( a . username < b . username ) return - 1 ; if ( a . username > b . username ) return 1 ; return 0 ; } }