openvidu-components: Fixed prejoin selectors when is iPhone

openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html

@@ -3,8 +3,7 @@
 	<!-- <span>OpenVidu Call</span> -->
 	<span class="spacer"></span>
 
-	<ov-lang-selector *ngIf="!isMinimal"></ov-lang-selector>
-
+	<ov-lang-selector *ngIf="!isMinimal" (onLangSelectorClicked)="onDeviceSelectorClicked()"></ov-lang-selector>
 </mat-toolbar>
 
 <div class="container" id="prejoin-container" fxLayout.gt-sm="row" fxLayout.lt-md="column">
@@ -51,11 +50,10 @@
 					<hr *ngIf="windowSize >= 960" />
 
 					<!-- Camera -->
-					<ov-video-devices-select></ov-video-devices-select>
+					<ov-video-devices-select (onDeviceSelectorClicked)="onDeviceSelectorClicked()"></ov-video-devices-select>
 
 					<!-- Microphone -->
-					<ov-audio-devices-select></ov-audio-devices-select>
-
+					<ov-audio-devices-select (onDeviceSelectorClicked)="onDeviceSelectorClicked()"></ov-audio-devices-select>
 				</div>
 
 				<div fxFlex.gt-sm="60%" fxLayout.lt-md="column" fxLayoutAlign="center center" fxFlexFill class="join-btn-container">

openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts

@@ -1,6 +1,4 @@
-import { Component, HostListener, OnDestroy, OnInit, Output, EventEmitter, ViewChild, AfterViewInit } from '@angular/core';
-import { MatMenuTrigger } from '@angular/material/menu';
-import { MatSelect } from '@angular/material/select';
+import { Component, HostListener, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 import { CustomDevice } from '../../models/device.model';
@@ -22,16 +20,7 @@ import { ParticipantService } from '../../services/participant/participant.servi
 	templateUrl: './pre-join.component.html',
 	styleUrls: ['./pre-join.component.css']
 })
-export class PreJoinComponent implements OnInit, OnDestroy, AfterViewInit {
-	/**
-	 * @ignore
-	 */
-	@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
-	/**
-	 * @ignore
-	 */
-	@ViewChild(MatSelect) matSelect: MatSelect;
-
+export class PreJoinComponent implements OnInit, OnDestroy {
 	@Output() onJoinButtonClicked = new EventEmitter<any>();
 	cameras: CustomDevice[];
 	microphones: CustomDevice[];
@@ -88,17 +77,6 @@ export class PreJoinComponent implements OnInit, OnDestroy, AfterViewInit {
 		this.isLoading = false;
 	}
 
-	ngAfterViewInit() {
-		// Some devices as iPhone do not show the menu panels correctly
-		// Updating the container where the panel is added fix the problem.
-		this.menuTrigger?.menuOpened.subscribe(() => {
-			this.cdkSrv.setSelector('#prejoin-container');
-		});
-		this.matSelect?.openedChange.subscribe(() => {
-			this.cdkSrv.setSelector('#prejoin-container');
-		});
-	}
-
 	async ngOnDestroy() {
 		this.cdkSrv.setSelector('body');
 		if (this.localParticipantSubscription) this.localParticipantSubscription.unsubscribe();
@@ -108,6 +86,12 @@ export class PreJoinComponent implements OnInit, OnDestroy, AfterViewInit {
 		this.panelService.closePanel();
 	}
 
+	onDeviceSelectorClicked() {
+		// Some devices as iPhone do not show the menu panels correctly
+		// Updating the container where the panel is added fix the problem.
+		this.cdkSrv.setSelector('#prejoin-container');
+	}
+
 	joinSession() {
 		this.onJoinButtonClicked.emit();
 		this.panelService.closePanel();

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

@@ -16,6 +16,7 @@
 		<mat-select
 			[disabled]="isAudioMuted || !hasAudioDevices"
 			[value]="microphoneSelected?.device"
+			(click)="onDeviceSelectorClicked.emit()"
 			(selectionChange)="onMicrophoneSelected($event)"
 		>
 			<mat-option *ngFor="let microphone of microphones" [value]="microphone.device">

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { EventEmitter, Component, OnDestroy, OnInit, Output } from '@angular/core';
 import { PublisherProperties } from 'openvidu-browser';
 import { DeviceService } from '../../../services/device/device.service';
 import { OpenViduService } from '../../../services/openvidu/openvidu.service';
@@ -18,6 +18,7 @@ import { VideoType } from '../../../models/video-type.model';
 	styleUrls: ['./audio-devices.component.css']
 })
 export class AudioDevicesComponent implements OnInit, OnDestroy {
+	@Output() onDeviceSelectorClicked = new EventEmitter<void>();
 	hasAudioDevices: boolean;
 	isAudioMuted: boolean;
 	microphoneSelected: CustomDevice;
@@ -28,7 +29,7 @@ export class AudioDevicesComponent implements OnInit, OnDestroy {
 		private openviduService: OpenViduService,
 		private deviceSrv: DeviceService,
 		private storageSrv: StorageService,
-		protected participantService: ParticipantService
+		private participantService: ParticipantService
 	) {}
 
 	async ngOnInit() {

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

@@ -1,16 +1,32 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit, Output, ViewChild,EventEmitter } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material/menu';
+import { MatSelect } from '@angular/material/select';
 import { StorageService } from '../../../services/storage/storage.service';
 import { TranslateService } from '../../../services/translate/translate.service';
 
+/**
+ * @internal
+ */
 @Component({
 	selector: 'ov-lang-selector',
 	templateUrl: './lang-selector.component.html',
 	styleUrls: ['./lang-selector.component.css']
 })
-export class LangSelectorComponent implements OnInit {
+export class LangSelectorComponent implements OnInit, AfterViewInit {
+	@Output()  onLangSelectorClicked = new EventEmitter<void>();
 	langSelected: { name: string; ISO: string };
 	languages: { name: string; ISO: string }[] = [];
 
+	/**
+	 * @ignore
+	 */
+	@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
+
+	/**
+	 * @ignore
+	 */
+	@ViewChild(MatSelect) matSelect: MatSelect;
+
 	constructor(private translateService: TranslateService, private storageSrv: StorageService) {}
 
 	ngOnInit(): void {
@@ -18,6 +34,15 @@ export class LangSelectorComponent implements OnInit {
 		this.langSelected = this.translateService.getLangSelected();
 	}
 
+	ngAfterViewInit() {
+		this.menuTrigger?.menuOpened.subscribe(() => {
+			this.onLangSelectorClicked.emit();
+		});
+		this.matSelect?.openedChange.subscribe(() => {
+			this.onLangSelectorClicked.emit();
+		});
+	}
+
 	onLangSelected(lang: string) {
 		this.translateService.setLanguage(lang);
 		this.storageSrv.setLang(lang);

openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/video-devices/video-devices.component.html

@@ -14,6 +14,7 @@
 		<mat-select
 			[disabled]="isVideoMuted || !hasVideoDevices"
 			[value]="cameraSelected?.device"
+			(click)="onDeviceSelectorClicked.emit()"
 			(selectionChange)="onCameraSelected($event)"
 		>
 			<mat-option *ngFor="let camera of cameras" [value]="camera.device">

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
 import { PublisherProperties } from 'openvidu-browser';
 import { Subscription } from 'rxjs';
 import { CustomDevice } from '../../../models/device.model';
@@ -21,6 +21,8 @@ import { VirtualBackgroundService } from '../../../services/virtual-background/v
 	styleUrls: ['./video-devices.component.css']
 })
 export class VideoDevicesComponent implements OnInit, OnDestroy {
+	@Output()  onDeviceSelectorClicked = new EventEmitter<void>();
+
 	videoMuteChanging: boolean;
 	isVideoMuted: boolean;
 	cameraSelected: CustomDevice;