openvidu-components: Refactored video enlarged feature

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

@@ -2,7 +2,7 @@
 	*ngIf="this._stream"
 	class="OT_widget-container"
 	[id]="'container-' + this._stream.streamManager?.stream?.streamId"
-	#streamComponent
+	#streamContainer
 >
 	<div class="nickname" [class.fullscreen]="isFullscreen">
 		<div (click)="toggleNicknameForm()" class="nicknameContainer" selected *ngIf="!toggleNickname">
@@ -32,10 +32,9 @@
 	</div>
 
 	<ov-video
-		(dblclick)="toggleVideoSize()"
+		(dblclick)="toggleVideoEnlarged()"
 		[streamManager]="this._stream.streamManager"
 		[mutedSound]="mutedSound"
-		(toggleVideoSizeEvent)="toggleVideoSize($event)"
 	></ov-video>
 
 
@@ -61,7 +60,7 @@
 		</button>
 		<span [matMenuTriggerFor]="menu"></span>
 		<mat-menu #menu="matMenu" yPosition="above" xPosition="before">
-			<button mat-menu-item id="videoZoomButton" (click)="toggleVideoSize()">
+			<button mat-menu-item id="videoZoomButton" (click)="toggleVideoEnlarged()">
 				<mat-icon>{{ this.videoSizeIcon }}</mat-icon>
 				<span *ngIf="videoSizeIcon === videoSizeIconEnum.NORMAL">Zoom out</span>
 				<span *ngIf="videoSizeIcon === videoSizeIconEnum.BIG">Zoom in</span>

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

@@ -1,4 +1,4 @@
-import { Component, ContentChild, ElementRef, HostListener, Input, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, ContentChild, ElementRef, HostListener, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
 import { NicknameMatcher } from '../../matchers/nickname.matcher';
@@ -32,8 +32,7 @@ export class StreamComponent implements OnInit {
 	nicknameFormControl: FormControl;
 	matcher: NicknameMatcher;
 	_stream: StreamModel;
-
-	@ViewChild('streamComponent', { read: ViewContainerRef }) streamComponent: ViewContainerRef;
+	private _streamContainer: ElementRef;
 	@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
 	@ViewChild('menu') menu: MatMenuPanel;
 
@@ -54,11 +53,22 @@ export class StreamComponent implements OnInit {
 	// 	this.isFullscreenEnabled = !this.isFullscreenEnabled;
 	// }
 
+	@ViewChild('streamContainer', { static: false, read: ElementRef })
+	set streamContainer(streamContainer: ElementRef) {
+		setTimeout(() => {
+			if (streamContainer) {
+				this._streamContainer = streamContainer;
+				if (this._stream.type === VideoType.SCREEN) {
+					this.toggleVideoEnlarged(true);
+				}
+			}
+		}, 0);
+	}
 
 	@Input()
 	set stream(stream: StreamModel) {
 		this._stream = stream;
-		this.checkVideoSizeBigIcon(this._stream.videoEnlarged);
+		this.checkVideoEnlarged();
 		this.nicknameFormControl = new FormControl(this._stream.nickname, [Validators.maxLength(25), Validators.required]);
 	}
 
@@ -77,21 +87,21 @@ export class StreamComponent implements OnInit {
 		this.cdkSrv.setSelector('body');
 	}
 
-	toggleVideoSize(resetAll?) {
-		const element = this.documentService.getHTMLElementByClassName(this.streamComponent.element.nativeElement, LayoutClass.ROOT_ELEMENT);
+	toggleVideoEnlarged(resetAll?) {
+		const element = this.documentService.getHTMLElementByClassName(this._streamContainer.nativeElement, LayoutClass.ROOT_ELEMENT);
 		if (!!resetAll) {
 			this.documentService.removeAllBigElementClass();
-			this.participantService.resetUsersZoom();
-			this.participantService.resetUsersZoom();
+			this.participantService.resetMyVideoEnlarged();
+			this.participantService.resetRemotesVideoEnlarged();
 		}
 
 		this.documentService.toggleBigElementClass(element);
 
 		if (!!this._stream.streamManager?.stream?.connection?.connectionId) {
 			if (this.openViduWebRTCService.isMyOwnConnection(this._stream.streamManager?.stream?.connection?.connectionId)) {
-				this.participantService.toggleZoom(this._stream.streamManager?.stream?.connection?.connectionId);
+				this.participantService.toggleMyVideoEnlarged(this._stream.streamManager?.stream?.connection?.connectionId);
 			} else {
-				this.participantService.toggleUserZoom(this._stream.streamManager?.stream?.connection?.connectionId);
+				this.participantService.toggleRemoteVideoEnlarged(this._stream.streamManager?.stream?.connection?.connectionId);
 			}
 		}
 		this.layoutService.update();
@@ -136,8 +146,7 @@ export class StreamComponent implements OnInit {
 		await this.openViduWebRTCService.replaceTrack(this.participantService.getMyScreenPublisher(), properties);
 	}
 
-	protected checkVideoSizeBigIcon(videoEnlarged: boolean) {
-		this.videoSizeIcon = videoEnlarged ? VideoSizeIcon.NORMAL : VideoSizeIcon.BIG;
+	protected checkVideoEnlarged() {
+		this.videoSizeIcon = this._stream.videoEnlarged ? VideoSizeIcon.NORMAL : VideoSizeIcon.BIG;
 	}
-
 }

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

@@ -1,11 +1,16 @@
-import { AfterViewInit, Component, ElementRef, Input, EventEmitter, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { StreamManager } from 'openvidu-browser';
 import { VideoType } from '../../models/video-type.model';
 
 @Component({
 	selector: 'ov-video',
 	template: `
-		<img *ngIf="!_streamManager?.stream?.videoActive && (type === 'CAMERA' || !type)" class="poster_img" alt="OpenVidu Logo" src="assets/images/poster.png" />
+		<img
+			*ngIf="!_streamManager?.stream?.videoActive && (type === 'CAMERA' || !type)"
+			class="poster_img"
+			alt="OpenVidu Logo"
+			src="assets/images/poster.png"
+		/>
 		<video
 			#videoElement
 			[attr.id]="streamManager && _streamManager.stream ? 'video-' + _streamManager.stream.streamId : 'video-undefined'"
@@ -17,8 +22,6 @@ import { VideoType } from '../../models/video-type.model';
 export class VideoComponent implements AfterViewInit {
 	@Input() mutedSound: boolean;
 
-	@Output() toggleVideoSizeEvent = new EventEmitter<any>();
-
 	_streamManager: StreamManager;
 
 	_videoElement: ElementRef;
@@ -45,8 +48,7 @@ export class VideoComponent implements AfterViewInit {
 				this.type = <VideoType>this._streamManager?.stream?.typeOfVideo;
 				if (this.type === VideoType.SCREEN) {
 					this._videoElement.nativeElement.style.objectFit = 'contain';
-					this._videoElement.nativeElement.style.background = '#272727';
-					this.enableVideoSizeBig();
+					// this._videoElement.nativeElement.style.background = '#272727';
 				} else {
 					this._videoElement.nativeElement.style.objectFit = 'cover';
 				}
@@ -54,12 +56,4 @@ export class VideoComponent implements AfterViewInit {
 			}
 		});
 	}
-
-	enableVideoSizeBig() {
-		// Doing video size bigger.
-		// Timeout because of connectionId is null and icon does not change
-		setTimeout(() => {
-			this.toggleVideoSizeEvent.emit(true);
-		}, 590);
-	}
 }

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

@@ -139,11 +139,11 @@ export class ParticipantService {
 		return this.localParticipant.getScreenNickname();
 	}
 
-	resetUsersZoom() {
+	resetMyVideoEnlarged() {
 		this.localParticipant?.setAllVideoEnlarged(false);
 	}
 
-	toggleZoom(connectionId: string) {
+	toggleMyVideoEnlarged(connectionId: string) {
 		this.localParticipant.toggleVideoEnlarged(connectionId);
 	}
 
@@ -263,12 +263,12 @@ export class ParticipantService {
 		return this.remoteParticipants.some((p) => p.someHasVideoEnlarged());
 	}
 
-	toggleUserZoom(connectionId: string) {
+	toggleRemoteVideoEnlarged(connectionId: string) {
 		const p = this.getRemoteParticipantByConnectionId(connectionId);
 		p.toggleVideoEnlarged(connectionId);
 	}
 
-	resetRemotesZoom() {
+	resetRemotesVideoEnlarged() {
 		this.remoteParticipants.forEach((u) => u.setAllVideoEnlarged(false));
 	}