openvidu-components: Refactored names and particicipant observables

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

@@ -164,12 +164,12 @@ export class SessionComponent implements OnInit {
 
 	private async connectToSession(): Promise<void> {
 		try {
-			if (this.participantService.areBothEnabled()) {
+			if (this.participantService.haveICameraAndScreenActive()) {
 				await this.openviduService.connectSession(this.openviduService.getWebcamSession(), this.tokenService.getWebcamToken());
 				await this.openviduService.connectSession(this.openviduService.getScreenSession(), this.tokenService.getScreenToken());
 				await this.openviduService.publish(this.participantService.getMyCameraPublisher());
 				await this.openviduService.publish(this.participantService.getMyScreenPublisher());
-			} else if (this.participantService.isOnlyMyScreenEnabled()) {
+			} else if (this.participantService.isOnlyMyScreenActive()) {
 				await this.openviduService.connectSession(this.openviduService.getScreenSession(), this.tokenService.getScreenToken());
 				await this.openviduService.publish(this.participantService.getMyScreenPublisher());
 			} else {

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

@@ -137,7 +137,7 @@ export class StreamComponent implements OnInit {
 		const properties: PublisherProperties = {
 			videoSource: ScreenType.SCREEN,
 			publishVideo: true,
-			publishAudio: !this.participantService.isMyCameraEnabled(),
+			publishAudio: !this.participantService.isMyCameraActive(),
 			mirror: false
 		};
 		await this.openviduService.replaceTrack(VideoType.SCREEN, properties);

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

@@ -59,10 +59,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 	protected log: ILogger;
 	protected menuTogglingSubscription: Subscription;
 	protected chatMessagesSubscription: Subscription;
-	protected screenShareStateSubscription: Subscription;
-	protected webcamVideoStateSubscription: Subscription;
-	protected webcamAudioStateSubscription: Subscription;
-
+	protected localParticipantSubscription: Subscription;
 	private currentWindowHeight = window.innerHeight;
 
 	constructor(
@@ -87,14 +84,8 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 		if (this.chatMessagesSubscription) {
 			this.chatMessagesSubscription.unsubscribe();
 		}
-		if (this.screenShareStateSubscription) {
-			this.screenShareStateSubscription.unsubscribe();
-		}
-		if (this.webcamVideoStateSubscription) {
-			this.webcamVideoStateSubscription.unsubscribe();
-		}
-		if (this.webcamAudioStateSubscription) {
-			this.webcamAudioStateSubscription.unsubscribe();
+		if (this.localParticipantSubscription) {
+			this.localParticipantSubscription.unsubscribe();
 		}
 	}
 
@@ -132,7 +123,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 	toggleMicrophone() {
 		this.onMicClicked.emit();
 
-		if (this.participantService.isMyCameraEnabled()) {
+		if (this.participantService.isMyCameraActive()) {
 			this.openviduService.publishAudio(
 				this.participantService.getMyCameraPublisher(),
 				!this.participantService.hasCameraAudioActive()
@@ -149,7 +140,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 			const publishVideo = !this.participantService.hasCameraVideoActive();
 			const publishAudio = this.participantService.hasCameraAudioActive();
 			// Disabling webcam
-			if (this.participantService.areBothEnabled()) {
+			if (this.participantService.haveICameraAndScreenActive()) {
 				this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publishVideo);
 				this.participantService.disableWebcamUser();
 				this.openviduService.unpublish(this.participantService.getMyCameraPublisher());
@@ -157,7 +148,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 				return;
 			}
 			// Enabling webcam
-			if (this.participantService.isOnlyMyScreenEnabled()) {
+			if (this.participantService.isOnlyMyScreenActive()) {
 				const hasAudio = this.participantService.hasScreenAudioActive();
 
 				if (!this.openviduService.isWebcamSessionConnected()) {
@@ -181,15 +172,15 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 
 		try {
 			// Disabling screenShare
-			if (this.participantService.areBothEnabled()) {
+			if (this.participantService.haveICameraAndScreenActive()) {
 				this.participantService.disableScreenUser();
 				this.openviduService.unpublish(this.participantService.getMyScreenPublisher());
 				return;
 			}
 
 			// Enabling screenShare
-			if (this.participantService.isOnlyMyCameraEnabled()) {
-				const willThereBeWebcam = this.participantService.isMyCameraEnabled() && this.participantService.hasCameraVideoActive();
+			if (this.participantService.isOnlyMyCameraActive()) {
+				const willThereBeWebcam = this.participantService.isMyCameraActive() && this.participantService.hasCameraVideoActive();
 				const hasAudio = willThereBeWebcam ? false : this.hasAudioDevices && this.participantService.hasCameraAudioActive();
 				const properties: PublisherProperties = {
 					videoSource: ScreenType.SCREEN,
@@ -300,17 +291,10 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 		});
 	}
 	protected subscribeToUserMediaProperties() {
-		this.screenShareStateSubscription = this.participantService.screenShareState.subscribe((active) => {
-			this.isScreenShareActive = active;
-			this.cd.markForCheck();
-		});
-
-		this.webcamVideoStateSubscription = this.participantService.webcamVideoActive.subscribe((active) => {
-			this.isWebcamVideoActive = active;
-			this.cd.markForCheck();
-		});
-		this.webcamAudioStateSubscription = this.participantService.webcamAudioActive.subscribe((active) => {
-			this.isWebcamAudioActive = active;
+		this.localParticipantSubscription = this.participantService.localParticipantObs.subscribe((p) => {
+			this.isWebcamVideoActive = p.isCameraVideoActive();
+			this.isWebcamAudioActive = p.isCameraAudioActive();
+			this.isScreenShareActive = p.isScreenActive();
 			this.cd.markForCheck();
 		});
 	}

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

@@ -48,7 +48,7 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 	hasAudioDevices: boolean;
 	isLoading = true;
 	private log: ILogger;
-	private oVUsersSubscription: Subscription;
+	private localParticipantSubscription: Subscription;
 	private screenShareStateSubscription: Subscription;
 
 	constructor(
@@ -83,8 +83,8 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 	}
 
 	ngOnDestroy() {
-		if (this.oVUsersSubscription) {
-			this.oVUsersSubscription.unsubscribe();
+		if (this.localParticipantSubscription) {
+			this.localParticipantSubscription.unsubscribe();
 		}
 
 		if (this.screenShareStateSubscription) {
@@ -132,11 +132,11 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 		const publish = this.isVideoMuted;
 		this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publish);
 
-		if (this.participantService.areBothEnabled()) {
+		if (this.participantService.haveICameraAndScreenActive()) {
 			// Cam will not published, disable webcam with screensharing active
 			this.participantService.disableWebcamUser();
 			this.openviduService.publishAudio(this.participantService.getMyScreenPublisher(), publish);
-		} else if (this.participantService.isOnlyMyScreenEnabled()) {
+		} else if (this.participantService.isOnlyMyScreenActive()) {
 			// Cam will be published, enable webcam
 			this.participantService.enableWebcamUser();
 		}
@@ -147,14 +147,14 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 
 	async toggleScreenShare() {
 		// Disabling screenShare
-		if (this.participantService.areBothEnabled()) {
+		if (this.participantService.haveICameraAndScreenActive()) {
 			this.participantService.disableScreenUser();
 			return;
 		}
 
 		// Enabling screenShare
-		if (this.participantService.isOnlyMyCameraEnabled()) {
-			const willThereBeWebcam = this.participantService.isMyCameraEnabled() && this.participantService.hasCameraVideoActive();
+		if (this.participantService.isOnlyMyCameraActive()) {
+			const willThereBeWebcam = this.participantService.isMyCameraActive() && this.participantService.hasCameraVideoActive();
 			const hasAudio = willThereBeWebcam ? false : this.hasAudioDevices && this.isAudioMuted;
 			const properties: PublisherProperties = {
 				videoSource: ScreenType.SCREEN,
@@ -242,11 +242,9 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 	}
 
 	private subscribeToLocalParticipantEvents() {
-		this.oVUsersSubscription = this.participantService.localParticipantObs.subscribe((p) => {
+		this.localParticipantSubscription = this.participantService.localParticipantObs.subscribe((p) => {
 			this.localParticipant = p;
-		});
-		this.screenShareStateSubscription = this.participantService.screenShareState.subscribe((enabled) => {
-			this.screenShareEnabled = enabled;
+			this.screenShareEnabled = p.isScreenActive();
 		});
 	}
 

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

@@ -37,7 +37,10 @@ export abstract class ParticipantAbstractModel {
 
 	public isCameraAudioActive(): boolean {
 		const cameraConnection = this.getCameraConnection();
-		return cameraConnection.connected && cameraConnection.streamManager.stream.audioActive;
+		if(cameraConnection) {
+			return cameraConnection.connected && cameraConnection.streamManager.stream.audioActive;
+		}
+		return this.isScreenAudioActive();;
 	}
 
 	public isCameraVideoActive(): boolean {
@@ -46,7 +49,10 @@ export abstract class ParticipantAbstractModel {
 	}
 	isScreenAudioActive(): boolean {
 		const screenConnection = this.getScreenConnection();
-		return screenConnection?.connected && screenConnection?.streamManager?.stream?.audioActive;
+		if(screenConnection){
+			return screenConnection?.connected && screenConnection?.streamManager?.stream?.audioActive;
+		}
+		return false;
 	}
 
 	hasConnectionType(type: VideoType): boolean {
@@ -61,10 +67,10 @@ export abstract class ParticipantAbstractModel {
 		return this.streams.get(VideoType.SCREEN);
 	}
 
-	getConnectionTypesEnabled(): VideoType[] {
+	getConnectionTypesActive(): VideoType[] {
 		let connType = [];
-		if (this.isCameraEnabled()) connType.push(VideoType.CAMERA);
-		if (this.isScreenEnabled()) connType.push(VideoType.SCREEN);
+		if (this.isCameraActive()) connType.push(VideoType.CAMERA);
+		if (this.isScreenActive()) connType.push(VideoType.SCREEN);
 
 		return connType;
 	}
@@ -131,7 +137,7 @@ export abstract class ParticipantAbstractModel {
 		}
 	}
 
-	isCameraEnabled(): boolean {
+	isCameraActive(): boolean {
 		return this.getCameraConnection()?.connected;
 	}
 
@@ -145,11 +151,11 @@ export abstract class ParticipantAbstractModel {
 		if (cameraConnection) cameraConnection.connected = false;
 	}
 
-	isScreenEnabled(): boolean {
+	isScreenActive(): boolean {
 		return this.getScreenConnection()?.connected;
 	}
 
-	enablescreen() {
+	enableScreen() {
 		const screenConnection = this.getScreenConnection();
 		if (screenConnection) screenConnection.connected = true;
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant.pipe.ts

@@ -23,7 +23,7 @@ export class StreamsEnabledPipe implements PipeTransform {
 	constructor() {}
 
 	transform(participant: ParticipantAbstractModel): string {
-		return `(${participant?.getConnectionTypesEnabled().toString().replace(',', ', ')})`;
+		return `(${participant?.getConnectionTypesActive().toString().replace(',', ', ')})`;
 	}
 }
 

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

@@ -31,8 +31,6 @@ export class OpenViduService {
 	protected screenSession: Session = null;
 	protected videoSource = undefined;
 	protected audioSource = undefined;
-	// protected screenMediaStream: MediaStream = null;
-	// protected webcamMediaStream: MediaStream = null;
 	protected log: ILogger;
 
 	constructor(
@@ -153,7 +151,7 @@ export class OpenViduService {
 		if (hasVideoDevices || hasAudioDevices) {
 			const publisher = await this.initPublisher(targetElement, properties);
 			this.participantService.setMyCameraPublisher(publisher);
-			this.participantService.updateParticipantMediaStatus();
+			this.participantService.updateLocalParticipant();
 			return publisher;
 		} else {
 			this.participantService.setMyCameraPublisher(null);
@@ -211,16 +209,14 @@ export class OpenViduService {
 	publishVideo(publisher: Publisher, value: boolean): void {
 		if (!!publisher) {
 			publisher.publishVideo(value);
-			// Send event to subscribers because of video has changed and view must update
-			this.participantService.updateParticipantMediaStatus();
+			this.participantService.updateLocalParticipant();
 		}
 	}
 
 	publishAudio(publisher: Publisher, value: boolean): void {
 		if (!!publisher) {
 			publisher.publishAudio(value);
-			// Send event to subscribers because of video has changed and view must update
-			this.participantService.updateParticipantMediaStatus();
+			this.participantService.updateLocalParticipant();
 		}
 	}
 

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

@@ -13,13 +13,7 @@ import { LoggerService } from '../logger/logger.service';
 export class ParticipantService {
 	//Local participants observables
 	localParticipantObs: Observable<ParticipantAbstractModel>;
-	screenShareState: Observable<boolean>;
-	webcamVideoActive: Observable<boolean>;
-	webcamAudioActive: Observable<boolean>;
 	protected _localParticipant = <BehaviorSubject<ParticipantAbstractModel>>new BehaviorSubject(null);
-	protected _screensharing = <BehaviorSubject<boolean>>new BehaviorSubject(false);
-	protected _cameraVideoActive = <BehaviorSubject<boolean>>new BehaviorSubject(true);
-	protected _cameraAudioActive = <BehaviorSubject<boolean>>new BehaviorSubject(true);
 
 	//Remote participants observable
 	remoteParticipantsObs: Observable<ParticipantAbstractModel[]>;
@@ -35,9 +29,6 @@ export class ParticipantService {
 
 		this.localParticipantObs = this._localParticipant.asObservable();
 		this.remoteParticipantsObs = this._remoteParticipants.asObservable();
-		this.screenShareState = this._screensharing.asObservable();
-		this.webcamVideoActive = this._cameraVideoActive.asObservable();
-		this.webcamAudioActive = this._cameraAudioActive.asObservable();
 
 		this.localParticipant = this.newParticipant();
 		this.updateLocalParticipant();
@@ -101,25 +92,12 @@ export class ParticipantService {
 		};
 
 		this.localParticipant.addConnection(steramModel);
-
-		this._screensharing.next(true);
-
 		this.updateLocalParticipant();
 	}
 
 	disableScreenUser() {
 		this.localParticipant.disableScreen();
 		this.updateLocalParticipant();
-		this._screensharing.next(false);
-	}
-
-	updateParticipantMediaStatus() {
-		this._cameraVideoActive.next(this.localParticipant.isCameraVideoActive());
-		if (this.isMyCameraEnabled()) {
-			this._cameraAudioActive.next(this.localParticipant.isCameraAudioActive());
-		} else {
-			this._cameraAudioActive.next(this.hasScreenAudioActive());
-		}
 	}
 
 	setNickname(connectionId: string, nickname: string) {
@@ -154,31 +132,31 @@ export class ParticipantService {
 	clear() {
 		this.disableScreenUser();
 		this.localParticipant = this.newParticipant();
-		this._screensharing.next(false);
+		// this._screensharing.next(false);
 		this.remoteParticipants = [];
 		this._remoteParticipants = <BehaviorSubject<ParticipantAbstractModel[]>>new BehaviorSubject([]);
 		this.remoteParticipantsObs = this._remoteParticipants.asObservable();
 		this.updateLocalParticipant();
 	}
 
-	isMyCameraEnabled(): boolean {
-		return this.localParticipant.isCameraEnabled();
+	isMyCameraActive(): boolean {
+		return this.localParticipant.isCameraActive();
 	}
 
-	isMyScreenEnabled(): boolean {
-		return this.localParticipant.isScreenEnabled();
+	isMyScreenActive(): boolean {
+		return this.localParticipant.isScreenActive();
 	}
 
-	isOnlyMyCameraEnabled(): boolean {
-		return this.isMyCameraEnabled() && !this.isMyScreenEnabled();
+	isOnlyMyCameraActive(): boolean {
+		return this.isMyCameraActive() && !this.isMyScreenActive();
 	}
 
-	isOnlyMyScreenEnabled(): boolean {
-		return this.isMyScreenEnabled() && !this.isMyCameraEnabled();
+	isOnlyMyScreenActive(): boolean {
+		return this.isMyScreenActive() && !this.isMyCameraActive();
 	}
 
-	areBothEnabled(): boolean {
-		return this.isMyCameraEnabled() && this.isMyScreenEnabled();
+	haveICameraAndScreenActive(): boolean {
+		return this.isMyCameraActive() && this.isMyScreenActive();
 	}
 
 	hasCameraVideoActive(): boolean {