openvidu-components: Refactored the video enlarged logic

openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html

@@ -2,7 +2,7 @@
 	<div
 		class="OT_root OT_publisher"
 		*ngFor="let stream of localParticipant | streams"
-		[ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }"
+		[ngClass]="{ OV_big: stream.videoEnlarged }"
 	>
 		<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: stream }"></ng-container>
 	</div>
@@ -11,7 +11,7 @@
 		*ngFor="let stream of remoteParticipants | streams"
 		class="OT_root OT_publisher"
 		id="remote-participant"
-		[ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }"
+		[ngClass]="{ OV_big: stream.videoEnlarged }"
 	>
 		<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: stream }"></ng-container>
 	</div>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts

@@ -236,15 +236,13 @@ export class SessionComponent implements OnInit {
 	}
 
 	private subscribeToStreamPropertyChange() {
-		// this.session.on('streamPropertyChanged', (event: StreamPropertyChangedEvent) => {
+		this.session.on('streamPropertyChanged', (event: StreamPropertyChangedEvent) => {
-		// 	const connectionId = event.stream.connection.connectionId;
+			const connectionId = event.stream.connection.connectionId;
-		// 	const isRemoteConnection: boolean = !this.openviduService.isMyOwnConnection(connectionId);
+			const isRemoteConnection: boolean = !this.openviduService.isMyOwnConnection(connectionId);
-		// 	if (isRemoteConnection) {
+			if (isRemoteConnection) {
-		// 		if (event.changedProperty === 'videoActive') {
+				this.participantService.updateRemoteParticipants();
-		// 			// this.participantService.updateUsers();
+			}
-		// 		}
+		});
-		// 	}
-		// });
 	}
 
 	private subscribeToNicknameChanged() {

openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts

@@ -51,12 +51,8 @@ export class StreamComponent implements OnInit {
 		setTimeout(() => {
 			if (streamContainer) {
 				this._streamContainer = streamContainer;
-				if (this._stream.type === VideoType.SCREEN) {
-					this.toggleVideoEnlarged(true);
-				}
 				// Remove 'no-size' css class for showing the element in the view.
 				// This is a workaround for fixing a layout bug which provide a bad UX with each new elements created.
-				//
 				this.documentService.removeNoSizeElementClass(this._streamContainer.nativeElement);
 			}
 		}, 0);
@@ -84,16 +80,7 @@ export class StreamComponent implements OnInit {
 		this.cdkSrv.setSelector('body');
 	}
 
-	toggleVideoEnlarged(resetAll?) {
+	toggleVideoEnlarged() {
-		const element = this.documentService.getHTMLElementByClassName(this._streamContainer.nativeElement, LayoutClass.ROOT_ELEMENT);
-		if (!!resetAll) {
-			this.documentService.removeAllBigElementClass();
-			this.participantService.resetMyVideoEnlarged();
-			this.participantService.resetRemotesVideoEnlarged();
-		}
-
-		this.documentService.toggleBigElementClass(element);
-
 		if (!!this._stream.streamManager?.stream?.connection?.connectionId) {
 			if (this.openviduService.isMyOwnConnection(this._stream.streamManager?.stream?.connection?.connectionId)) {
 				this.participantService.toggleMyVideoEnlarged(this._stream.streamManager?.stream?.connection?.connectionId);

openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts

@@ -201,7 +201,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 							this.toggleScreenShare();
 						});
 					this.log.d('ACCESS ALOWED screenPublisher');
-					this.participantService.enableScreenUser(screenPublisher);
+					this.participantService.activeMyScreenShare(screenPublisher);
 
 					if (!this.openviduService.isScreenSessionConnected()) {
 						await this.openviduService.connectSession(

openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts

@@ -173,7 +173,7 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 						this.log.d('Clicked native stop button. Stopping screen sharing');
 						this.toggleScreenShare();
 					});
-				this.participantService.enableScreenUser(screenPublisher);
+				this.participantService.activeMyScreenShare(screenPublisher);
 				if (!this.participantService.hasCameraVideoActive()) {
 					this.participantService.disableWebcamUser();
 				}

openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts

@@ -1,4 +1,3 @@
-import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
 import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { StreamManager } from 'openvidu-browser';
 import { VideoType } from '../../models/video-type.model';

openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts

@@ -82,8 +82,10 @@ export abstract class ParticipantAbstractModel {
 		this.getScreenConnection().connectionId = connectionId;
 	}
 
-	removeConnection(connectionId: string) {
+	removeConnection(connectionId: string): StreamModel {
-		this.streams.delete(this.getConnectionById(connectionId).type);
+		const removeStream = this.getConnectionById(connectionId);
+		this.streams.delete(removeStream.type);
+		return removeStream;
 	}
 
 	hasConnectionId(connectionId: string): boolean {
@@ -164,10 +166,19 @@ export abstract class ParticipantAbstractModel {
 		const screenConnection = this.getScreenConnection();
 		if (screenConnection) screenConnection.connected = false;
 	}
+
 	setAllVideoEnlarged(enlarged: boolean) {
 		this.streams.forEach((conn) => (conn.videoEnlarged = enlarged));
 	}
 
+	setCameraEnlarged(enlarged: boolean) {
+		this.streams.get(VideoType.CAMERA).videoEnlarged = enlarged;
+	}
+	setScreenEnlarged(enlarged: boolean) {
+		this.streams.get(VideoType.SCREEN).videoEnlarged = enlarged;
+	}
+
+
 	toggleVideoEnlarged(connectionId: string) {
 		this.streams.forEach((conn) => {
 			if (conn.connectionId === connectionId) {

openvidu-components-angular/projects/openvidu-angular/src/lib/services/document/document.service.ts

@@ -48,30 +48,10 @@ export class DocumentService {
 		}
 	}
 
-	removeAllBigElementClass() {
-		const elements: HTMLCollectionOf<Element> = document.getElementsByClassName(LayoutClass.BIG_ELEMENT);
-		while (elements.length > 0) {
-			this.removeBigElementClass(elements[0]);
-		}
-	}
-
-
 	removeNoSizeElementClass(element: HTMLElement | Element) {
 		element?.classList.remove(LayoutClass.NO_SIZE_ELEMENT);
 	}
 
-	removeBigElementClass(element: HTMLElement | Element) {
-		element?.classList.remove(LayoutClass.BIG_ELEMENT);
-	}
-
-	toggleBigElementClass(element: HTMLElement | Element) {
-		if (element?.className.includes(LayoutClass.BIG_ELEMENT)) {
-			this.removeBigElementClass(element);
-		} else {
-			element.classList.add(LayoutClass.BIG_ELEMENT);
-		}
-	}
-
 	isSmallElement(element: HTMLElement | Element): boolean {
 		return element?.className.includes(LayoutClass.SMALL_ELEMENT);
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts

@@ -78,7 +78,7 @@ export class ParticipantService {
 		this.updateLocalParticipant();
 	}
 
-	enableScreenUser(screenPublisher: Publisher) {
+	activeMyScreenShare(screenPublisher: Publisher) {
 		this.log.d('Enabling screen publisher');
 
 		const steramModel: StreamModel = {
@@ -91,6 +91,8 @@ export class ParticipantService {
 			connectionId: null
 		};
 
+		this.resetRemoteStreamsToNormalSize();
+		this.resetMyStreamsToNormalSize();
 		this.localParticipant.addConnection(steramModel);
 		this.updateLocalParticipant();
 	}
@@ -121,14 +123,19 @@ export class ParticipantService {
 		return this.localParticipant.getScreenNickname();
 	}
 
-	resetMyVideoEnlarged() {
-		this.localParticipant?.setAllVideoEnlarged(false);
-	}
 
 	toggleMyVideoEnlarged(connectionId: string) {
 		this.localParticipant.toggleVideoEnlarged(connectionId);
 	}
 
+
+	resetMyStreamsToNormalSize() {
+		if(this.localParticipant.someHasVideoEnlarged()){
+			this.localParticipant.setAllVideoEnlarged(false);
+			this.updateLocalParticipant();
+		}
+	}
+
 	clear() {
 		this.disableScreenUser();
 		this.localParticipant = this.newParticipant();
@@ -186,10 +193,11 @@ export class ParticipantService {
 
 	addRemoteConnection(connectionId:string, data: string, subscriber: Subscriber) {
 
-		const steramModel: StreamModel = {
+		const type: VideoType = this.getTypeConnectionData(data);
+		const streamModel: StreamModel = {
 			local: false,
-			type: this.getTypeConnectionData(data),
+			type,
-			videoEnlarged: false,
+			videoEnlarged: type === VideoType.SCREEN,
 			streamManager: subscriber,
 			nickname: this.getNicknameFromConnectionData(data),
 			connected: true,
@@ -200,21 +208,28 @@ export class ParticipantService {
 		const participantAdded = this.getRemoteParticipantById(participantId);
 		if (!!participantAdded) {
 			this.log.d('Adding connection to existing participant: ', participantId);
-			if(participantAdded.hasConnectionType(steramModel.type)) {
+			if(participantAdded.hasConnectionType(streamModel.type)) {
 				this.log.d('Participant has publisher, updating it');
-				participantAdded.setPublisher(steramModel.type, subscriber);
+				participantAdded.setPublisher(streamModel.type, subscriber);
 			} else {
 				this.log.d('Participant has not publisher, adding it');
-				participantAdded.addConnection(steramModel);
+				this.resetRemoteStreamsToNormalSize();
+				this.resetMyStreamsToNormalSize();
+				participantAdded.addConnection(streamModel);
 			}
 		} else {
-			this.log.d('Creating new participant with id: ', participantId);
+			this.log.w('Creating new participant with id: ', participantId);
-			const remoteParticipant = this.newParticipant(steramModel, participantId);
+			const remoteParticipant = this.newParticipant(streamModel, participantId);
 			this.remoteParticipants.push(remoteParticipant);
 		}
 		this.updateRemoteParticipants();
 	}
 
+	resetRemoteStreamsToNormalSize() {
+		this.remoteParticipants.forEach(participant => participant.setAllVideoEnlarged(false));
+		this.updateRemoteParticipants();
+	}
+
 	removeConnectionByConnectionId(connectionId: string) {
 		this.log.w('Deleting connection: ', connectionId);
 		let participant = null;
@@ -225,12 +240,24 @@ export class ParticipantService {
 		}
 
 		if (participant) {
-			participant.removeConnection(connectionId);
+			const removeStream: StreamModel = participant.removeConnection(connectionId);
 			//TODO: Timeout of X seconds?? Its possible sometimes the connections map was empty but must not be deleted
 			if (participant.streams.size === 0) {
 				// Remove participants without connections
 				this.remoteParticipants = this.remoteParticipants.filter((p) => p !== participant);
 			}
+			if(removeStream.type === VideoType.SCREEN){
+				const remoteScreens = this.remoteParticipants.filter(p => p.isScreenActive());
+				if(remoteScreens.length > 0){
+					// Enlarging the last screen connection active
+					const lastScreenActive = remoteScreens[remoteScreens.length -1];
+					lastScreenActive.setScreenEnlarged(true);
+				} else if(this.localParticipant.isScreenActive()) {
+					// Enlarging my screen if thereare not any remote screen active
+					this.localParticipant.setScreenEnlarged(true);
+				}
+			}
+
 			this.updateRemoteParticipants();
 		}
 	}
@@ -250,10 +277,6 @@ export class ParticipantService {
 		p.toggleVideoEnlarged(connectionId);
 	}
 
-	resetRemotesVideoEnlarged() {
-		this.remoteParticipants.forEach((u) => u.setAllVideoEnlarged(false));
-	}
-
 	getNicknameFromConnectionData(data: string): string {
 		try {
 			return JSON.parse(data).clientData;
@@ -262,6 +285,10 @@ export class ParticipantService {
 		}
 	}
 
+	updateRemoteParticipants() {
+		this._remoteParticipants.next(this.remoteParticipants);
+	}
+
 	protected getTypeConnectionData(data: string): VideoType {
 		try {
 			return JSON.parse(data).type;
@@ -278,9 +305,6 @@ export class ParticipantService {
 		}
 	}
 
-	updateRemoteParticipants() {
-		this._remoteParticipants.next(this.remoteParticipants);
-	}
 	protected newParticipant(streamModel?: StreamModel, participantId?: string) {
 
 		if(this.openviduAngularConfigSrv.hasParticipantFactory()){