openvidu-components: Refactored participants and openvidu service

- Migrated publishAudio method from OpenViduService to ParticipantService

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

@@ -194,11 +194,11 @@ export class SessionComponent implements OnInit, OnDestroy {
 		this.cd.markForCheck();
 	}
 
-	ngOnDestroy() {
+	async ngOnDestroy() {
 		// Reconnecting session is received in Firefox
 		// To avoid 'Connection lost' message uses session.off()
 		this.session?.off('reconnecting');
-		this.participantService.clear();
+		await this.participantService.clear();
 		this.session = null;
 		this.sessionScreen = null;
 		if (this.menuSubscription) this.menuSubscription.unsubscribe();

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

@@ -58,7 +58,7 @@ export class AudioDevicesComponent implements OnInit, OnDestroy {
 
 	toggleMic() {
 		const publish = this.isAudioMuted;
-		this.openviduService.publishAudio(publish);
+		this.participantService.publishAudio(publish);
 		this.onAudioMutedClicked.emit(publish);
 	}
 

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

@@ -500,7 +500,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	async toggleMicrophone() {
 		this.onMicrophoneButtonClicked.emit();
 		try {
-			await this.openviduService.publishAudio(!this.isAudioActive);
+			this.participantService.publishAudio(!this.isAudioActive);
 		} catch (error) {
 			this.log.e('There was an error toggling microphone:', error.code, error.message);
 			this.actionService.openDialog(

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

@@ -601,7 +601,14 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
 						await this.handlePublisherError(e);
 						resolve();
 					});
-					publisher.once('accessAllowed', () => resolve());
+					publisher.once('accessAllowed', () => {
+						this.participantService.setMyCameraPublisher(publisher);
+						this.participantService.updateLocalParticipant();
+						resolve();
+					});
+				} else {
+					this.participantService.setMyCameraPublisher(undefined);
+					this.participantService.updateLocalParticipant();
 				}
 			} catch (error) {
 				this.actionService.openDialog(error.name.replace(/_/g, ' '), error.message, true);

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

@@ -238,7 +238,7 @@ export abstract class ParticipantAbstractModel {
 	/**
 	 * @internal
 	 */
-	setCameraPublisher(publisher: Publisher) {
+	setCameraPublisher(publisher: Publisher | undefined) {
 		const cameraConnection = this.getCameraConnection();
 		if (cameraConnection) cameraConnection.streamManager = publisher;
 	}

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

@@ -140,8 +140,8 @@ export class OpenViduService {
 	async clear() {
 		this.videoSource = undefined;
 		this.audioSource = undefined;
-		await this.participantService.getMyCameraPublisher()?.stream?.disposeMediaStream();
-		await this.participantService.getMyScreenPublisher()?.stream?.disposeMediaStream();
+		// await this.participantService.getMyCameraPublisher()?.stream?.disposeMediaStream();
+		// await this.participantService.getMyScreenPublisher()?.stream?.disposeMediaStream();
 	}
 
 	/**
@@ -273,12 +273,7 @@ export class OpenViduService {
 			mirror
 		};
 		if (hasVideoDevices || hasAudioDevices) {
-			const publisher = await this.initPublisher(properties);
-			this.participantService.setMyCameraPublisher(publisher);
-			this.participantService.updateLocalParticipant();
-			return publisher;
-		} else {
-			this.participantService.setMyCameraPublisher(null);
+			return this.initPublisher(properties);
 		}
 	}
 
@@ -372,25 +367,11 @@ export class OpenViduService {
 		}
 	}
 
-	/**
-	 * Publish or unpublish the audio stream (if available).
-	 * See openvidu-browser {@link https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/Publisher.html#publishAudio publishAudio}.
-	 */
-	async publishAudio(publish: boolean): Promise<void> {
-		if (this.participantService.isMyCameraActive()) {
-			if (this.participantService.isMyScreenActive() && this.participantService.hasScreenAudioActive()) {
-				this.publishAudioAux(this.participantService.getMyScreenPublisher(), false);
-			}
-
-			this.publishAudioAux(this.participantService.getMyCameraPublisher(), publish);
-		} else {
-			this.publishAudioAux(this.participantService.getMyScreenPublisher(), publish);
-		}
-	}
-
 	/**
 	 * Share or unshare the screen.
 	 * Hide the camera muted stream when screen is sharing.
+	 *
+	 * TODO: This method should be in participant service
 	 */
 	async toggleScreenshare() {
 		if (this.participantService.haveICameraAndScreenActive()) {
@@ -459,6 +440,7 @@ export class OpenViduService {
 
 	/**
 	 * @internal
+	 * TODO: Remove when it is in participant service
 	 */
 	private publishAudioAux(publisher: Publisher, value: boolean): void {
 		if (!!publisher) {

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

@@ -41,7 +41,6 @@ export class ParticipantService {
 	 */
 	constructor(protected openviduAngularConfigSrv: OpenViduAngularConfigService, protected loggerSrv: LoggerService) {
 		this.log = this.loggerSrv.get('ParticipantService');
-
 		this.localParticipantObs = this._localParticipant.asObservable();
 		this.remoteParticipantsObs = this._remoteParticipants.asObservable();
 	}
@@ -58,6 +57,24 @@ export class ParticipantService {
 		return this.localParticipant;
 	}
 
+	/**
+	 * Publish or unpublish the audio stream (if available).
+	 * See openvidu-browser {@link https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/Publisher.html#publishAudio publishAudio}.
+	 *
+	 */
+	publishAudio(publish: boolean): void {
+		if (this.isMyCameraActive()) {
+			if (this.isMyScreenActive() && this.hasScreenAudioActive()) {
+				this.publishAudioAux(this.getMyScreenPublisher(), false);
+			}
+
+			this.publishAudioAux(this.getMyCameraPublisher(), publish);
+		} else {
+			this.publishAudioAux(this.getMyScreenPublisher(), publish);
+		}
+		this.updateLocalParticipant();
+	}
+
 	/**
 	 * @internal
 	 */
@@ -68,7 +85,7 @@ export class ParticipantService {
 	/**
 	 * @internal
 	 */
-	setMyCameraPublisher(publisher: Publisher) {
+	setMyCameraPublisher(publisher: Publisher | undefined) {
 		this.localParticipant.setCameraPublisher(publisher);
 	}
 	/**
@@ -186,11 +203,13 @@ export class ParticipantService {
 	/**
 	 * @internal
 	 */
-	clear() {
+	async clear() {
+		await this.getMyCameraPublisher()?.stream?.disposeMediaStream();
+		await this.getMyScreenPublisher()?.stream?.disposeMediaStream();
 		this.disableScreenStream();
 		this.remoteParticipants = [];
 		this.updateRemoteParticipants();
-		this.updateLocalParticipant();
+		// this.updateLocalParticipant();
 	}
 
 	/**
@@ -252,6 +271,12 @@ export class ParticipantService {
 		);
 	}
 
+	private publishAudioAux(publisher: Publisher, value: boolean): void {
+		if (!!publisher) {
+			publisher.publishAudio(value);
+		}
+	}
+
 	/**
 	 * REMOTE USERS
 	 */