Branch update

chat-client/src/app/room/room.component.css

@@ -7,7 +7,16 @@
 input.ng-invalid.ng-touched {
 	border: 2px solid red;
 }
-
+.FirstLetter
+{
+	color: white;
+	font-size:7vw;
+	position: absolute;
+	top:6.5vh;
+	left:8vw;
+	border-radius:50%;
+    padding: 0.1vw 3vw;
+}
 .container-room {
 	padding: 0 1rem;
 }
@@ -495,6 +504,14 @@ button:focus {
 		position: relative;
 	}
 }
+@media only screen and (max-width: 991px) {
+
+.FirstLetter{
+	top:4vh;
+	left:10vw
+
+}	
+}
 
 @media only screen and (max-width: 455px) {
 	.button-hide {
@@ -527,6 +544,11 @@ button:focus {
 	.image5{
 		height: 4vh;
 	}
+	.FirstLetter
+	{
+		top:3vh;
+		left:13vw;
+	}
 	#video-container
 	{
 		height: 50vh;

chat-client/src/app/room/room.component.html

@@ -83,6 +83,8 @@
 						<div class="col-md-12 col-xs-4 disable-padding">
 							<user-video [streamManager]="publisher" (click)="updateMainStreamManager(publisher)">
 							</user-video>
+							<div *ngIf="!videoOn" [ngStyle]="{'background': getRandomColor(7)}" class="FirstLetter">{{Myfirstletter()}}</div>
+
 							<div>
 								<img *ngIf="!audioOn" class="subsaudiooff" src="../../assets/images/audiooff.png" alt="audio-off">
 							</div>
@@ -102,7 +104,7 @@
 						</div>
 					</div>
 
-					<div *ngFor="let sub of subscribers" class="stream-container">
+					<div *ngFor="let sub of subscribers,let i=index" class="stream-container">
 						<div class="row disable-padding">
 							<div class="col-md-12  col-xs-4 disable-padding">
 								<user-video [streamManager]="sub" (click)="updateMainStreamManager(sub)"></user-video>
@@ -114,6 +116,11 @@
 										src="../../assets/images/giphy.gif" alt="audio-off">
 									</div>	
 								</div>
+								<!-- <div *ngIf="checkVideo(sub)" class="FirstLetter">{{getFirstLetter(sub)}}</div> -->
+								<div *ngIf="checkVideo(sub)" [ngStyle]="{'background': getRandomColor(i)}" class="FirstLetter">{{getFirstLetter(sub)}}</div>
+
+
+
 							</div>
 							<div class="col-md-12 col-xs-8" style="padding:0px 0px ">
 								<div class="row row-padding">

chat-client/src/app/room/room.component.ts

@@ -2,7 +2,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Component, HostListener, OnDestroy, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { OpenVidu, Publisher, Session, StreamEvent, StreamManager, Subscriber, Connection } from 'openvidu-browser';
 import { throwError as observableThrowError, Subscription } from 'rxjs';
-import { catchError } from 'rxjs/operators';
+import { catchError, first } from 'rxjs/operators';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { NgForm } from '@angular/forms';
 import { ChangeService } from '../services/chat.service';
@@ -42,6 +42,7 @@ export class RoomComponent implements OnInit, OnDestroy {
   subscribers: StreamManager[] = []; // Remotes
   connection: Connection[] = [];
   audioconnectionId: any[] = [];
+  videoconnectionId: any[] = [];
   show = false;
   Host = false;
   mySessionId: string;
@@ -51,12 +52,13 @@ export class RoomComponent implements OnInit, OnDestroy {
   startSpeaking:any[] = [];
   connectionId: any;
   subaudio: any;
+  subvideo:any;
   ename:any;
   enter=false;
   exitname:any;
   exit=false;
   share=false;
-
+  color=["#F1C40F","#212F3C","#F4D03F","#1F618D","#212F3C","#F4D03F","#2E86C1","#F8C471","#1F618D"] 
   token: any;
   seconds=0;
 
@@ -209,6 +211,8 @@ export class RoomComponent implements OnInit, OnDestroy {
       this.connection.push(subscriber.stream.connection);
       const mess: any = { "data": String(this.audioOn), "to": subscriber.stream.connection, "type": "audio" }
       this.session.signal(mess);
+      const messs: any = { "data": String(this.videoOn), "to":subscriber.stream.connection, "type": "video" }
+      this.session.signal(messs)
       // console.log(this.getNicknameTag(event));
       this.enter=true;
       this.ename=this.getNicknameTag(event)+' joined';
@@ -258,7 +262,13 @@ export class RoomComponent implements OnInit, OnDestroy {
     });
 
     this.session.on('signal:video', (data: any) => {
-      // console.log(data);
+      this.subvideo = JSON.parse(data.data)
+      if (!this.subvideo) {
+        this.videoconnectionId.push(data.from.connectionId)
+      }
+      else {
+        this.videoconnectionId.splice(this.videoconnectionId.indexOf(data.from.connectionId), 1)
+      }
     });
 
     this.session.on('signal:stopRemoteAudio', (data: any) => {
@@ -525,4 +535,25 @@ export class RoomComponent implements OnInit, OnDestroy {
   {
     this.show=false
   }
+  checkVideo(sub:any)
+  {
+    return this.videoconnectionId.includes(sub.stream.connection.connectionId)
+  }
+  getFirstLetter(sub:any)
+  { let FirstName=this.getNicknameTag(sub)
+    FirstName=FirstName.split("")
+     return FirstName[0]
+  }
+  Myfirstletter()
+  {
+    let FirstName:any=this.myUserName;
+    FirstName=FirstName.split("")
+     return FirstName[0]
+  }
+
+    getRandomColor(i:any) {
+
+      return this.color[i%10]
+    }
+
 }