From 6057d1c11e5e9dd3f6a4680470f3ec2e9e47d1b9 Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Fri, 25 Feb 2022 13:53:49 +0100 Subject: [PATCH] openvidu-components: Refactored the video enlarged logic --- .../components/layout/layout.component.html | 4 +- .../components/session/session.component.ts | 16 ++--- .../lib/components/stream/stream.component.ts | 15 +---- .../components/toolbar/toolbar.component.ts | 2 +- .../user-settings/user-settings.component.ts | 2 +- .../lib/components/video/video.component.ts | 1 - .../src/lib/models/participant.model.ts | 15 ++++- .../lib/services/document/document.service.ts | 20 ------ .../participant/participant.service.ts | 64 +++++++++++++------ 9 files changed, 69 insertions(+), 70 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html index ca9c8403..1a7e39a5 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html @@ -2,7 +2,7 @@
@@ -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 }" > diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts index 30b22b8e..616e5674 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts +++ b/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) => { - // const connectionId = event.stream.connection.connectionId; - // const isRemoteConnection: boolean = !this.openviduService.isMyOwnConnection(connectionId); - // if (isRemoteConnection) { - // if (event.changedProperty === 'videoActive') { - // // this.participantService.updateUsers(); - // } - // } - // }); + this.session.on('streamPropertyChanged', (event: StreamPropertyChangedEvent) => { + const connectionId = event.stream.connection.connectionId; + const isRemoteConnection: boolean = !this.openviduService.isMyOwnConnection(connectionId); + if (isRemoteConnection) { + this.participantService.updateRemoteParticipants(); + } + }); } private subscribeToNicknameChanged() { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts index 94a786e1..62106e3c 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts +++ b/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?) { - 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); - + toggleVideoEnlarged() { 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); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts index 212ad5bd..817ccbe2 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts +++ b/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( diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts index bc3ba3d9..bbd1e8e6 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts +++ b/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(); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts index 5ac50ef1..86dcb215 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts +++ b/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'; diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts index 10b7c1fb..ed0b94fb 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts +++ b/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) { - this.streams.delete(this.getConnectionById(connectionId).type); + removeConnection(connectionId: string): StreamModel { + 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) { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/document/document.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/document/document.service.ts index 3dcf8332..6b0c7e76 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/document/document.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/document/document.service.ts @@ -48,30 +48,10 @@ export class DocumentService { } } - removeAllBigElementClass() { - const elements: HTMLCollectionOf = 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); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts index 0c9f5737..d2376fea 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts +++ b/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), - videoEnlarged: false, + type, + 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); - const remoteParticipant = this.newParticipant(steramModel, participantId); + this.log.w('Creating new participant with id: ', 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()){