openvidu-components: Improved UI when media devices are not available

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

@@ -1,18 +1,25 @@
 <div class="device-container-element">
-	<button
+	<button mat-icon-button id="microhpone-button" [disabled]="!hasAudioDevices" [class.warn-btn]="isAudioMuted" (click)="toggleMic()">
-		mat-icon-button
+		<mat-icon
-		id="microhpone-button"
+			*ngIf="!isAudioMuted"
-		[disabled]="!hasAudioDevices"
+			[matTooltipDisabled]="!hasAudioDevices"
-		[class.warn-btn]="isAudioMuted"
+			matTooltip="{{ 'TOOLBAR.MUTE_AUDIO' | translate }}"
-		(click)="toggleMic()"
+			id="mic"
 		>
-		<mat-icon *ngIf="!isAudioMuted" matTooltip="{{ 'TOOLBAR.MUTE_AUDIO' | translate }}" id="mic">mic</mat-icon>
+			mic
-		<mat-icon *ngIf="isAudioMuted" matTooltip="{{ 'TOOLBAR.UNMUTE_AUDIO' | translate }}" id="mic_off"
+		</mat-icon>
-			>mic_off</mat-icon
+		<mat-icon
+			*ngIf="isAudioMuted"
+			[matTooltipDisabled]="!hasAudioDevices"
+			matTooltip="{{ 'TOOLBAR.UNMUTE_AUDIO' | translate }}"
+			id="mic_off"
 		>
+			mic_off
+		</mat-icon>
 	</button>
 	<mat-form-field>
-		<mat-label>{{ 'PREJOIN.AUDIO_DEVICE' | translate }}</mat-label>
+		<mat-label *ngIf="hasAudioDevices">{{ 'PREJOIN.AUDIO_DEVICE' | translate }}</mat-label>
+		<mat-label *ngIf="!hasAudioDevices">{{ 'PREJOIN.NO_AUDIO_DEVICE' | translate }}</mat-label>
 		<mat-select
 			[disabled]="isAudioMuted || !hasAudioDevices"
 			[value]="microphoneSelected?.device"

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

@@ -22,7 +22,7 @@ export class AudioDevicesComponent implements OnInit, OnDestroy {
 	@Output() onAudioMutedClicked = new EventEmitter<boolean>();
 	hasAudioDevices: boolean;
 	isAudioMuted: boolean;
-	microphoneSelected: CustomDevice;
+	microphoneSelected: CustomDevice | null;
 	microphones: CustomDevice[] = [];
 	private localParticipantSubscription: Subscription;
 
@@ -40,8 +40,10 @@ export class AudioDevicesComponent implements OnInit, OnDestroy {
 			await this.deviceSrv.initializeDevices();
 		}
 		this.hasAudioDevices = this.deviceSrv.hasAudioDeviceAvailable();
+		if(this.hasAudioDevices) {
 			this.microphones = this.deviceSrv.getMicrophones();
 			this.microphoneSelected = this.deviceSrv.getMicrophoneSelected();
+		}
 		this.isAudioMuted = this.deviceSrv.isAudioMuted();
 		if (this.openviduService.isSessionConnected()) {
 			this.isAudioMuted = !this.participantService.isMyAudioActive();

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

@@ -6,11 +6,26 @@
 		[class.warn-btn]="isVideoMuted"
 		(click)="toggleCam()"
 	>
-		<mat-icon *ngIf="!isVideoMuted" matTooltip="{{ 'TOOLBAR.MUTE_VIDEO' | translate }}" id="videocam">videocam</mat-icon>
+		<mat-icon
-		<mat-icon *ngIf="isVideoMuted" matTooltip="{{ 'TOOLBAR.UNMUTE_VIDEO' | translate }}" id="videocam_off">videocam_off</mat-icon>
+			*ngIf="!isVideoMuted"
+			[matTooltipDisabled]="!hasVideoDevices"
+			matTooltip="{{ 'TOOLBAR.MUTE_VIDEO' | translate }}"
+			id="videocam"
+		>
+			videocam
+		</mat-icon>
+		<mat-icon
+			*ngIf="isVideoMuted"
+			[matTooltipDisabled]="!hasVideoDevices"
+			matTooltip="{{ 'TOOLBAR.UNMUTE_VIDEO' | translate }}"
+			id="videocam_off"
+		>
+			videocam_off
+		</mat-icon>
 	</button>
 	<mat-form-field>
-		<mat-label>{{ 'PREJOIN.VIDEO_DEVICE' | translate }}</mat-label>
+		<mat-label *ngIf="hasVideoDevices">{{ 'PREJOIN.VIDEO_DEVICE' | translate }}</mat-label>
+		<mat-label *ngIf="!hasVideoDevices">{{ 'PREJOIN.NO_VIDEO_DEVICE' | translate }}</mat-label>
 		<mat-select
 			[disabled]="isVideoMuted || !hasVideoDevices"
 			[value]="cameraSelected?.device"

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

@@ -26,9 +26,9 @@ export class VideoDevicesComponent implements OnInit, OnDestroy {
 
 	videoMuteChanging: boolean;
 	isVideoMuted: boolean;
-	cameraSelected: CustomDevice;
+	cameraSelected: CustomDevice | null;
 	hasVideoDevices: boolean;
-	cameras: CustomDevice[];
+	cameras: CustomDevice[] = [];
 	localParticipantSubscription: Subscription;
 
 	constructor(
@@ -47,8 +47,10 @@ export class VideoDevicesComponent implements OnInit, OnDestroy {
 			await this.deviceSrv.initializeDevices();
 		}
 		this.hasVideoDevices = this.deviceSrv.hasVideoDeviceAvailable();
+		if(this.hasVideoDevices){
 			this.cameras = this.deviceSrv.getCameras();
 			this.cameraSelected = this.deviceSrv.getCameraSelected();
+		}
 		if (this.openviduService.isSessionConnected()) {
 			this.isVideoMuted = !this.participantService.getLocalParticipant().isCameraVideoActive();
 		} else {

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

@@ -21,8 +21,22 @@
 			[disabled]="isConnectionLost || !hasAudioDevices"
 			[class.warn-btn]="!isAudioActive"
 		>
-			<mat-icon *ngIf="isAudioActive" matTooltip="{{ 'TOOLBAR.MUTE_AUDIO' | translate }}" id="mic">mic</mat-icon>
+			<mat-icon
-			<mat-icon *ngIf="!isAudioActive" matTooltip="{{ 'TOOLBAR.UNMUTE_AUDIO' | translate }}" id="mic_off">mic_off</mat-icon>
+				*ngIf="isAudioActive"
+				[matTooltipDisabled]="!hasAudioDevices"
+				matTooltip="{{ 'TOOLBAR.MUTE_AUDIO' | translate }}"
+				id="mic"
+			>
+				mic
+			</mat-icon>
+			<mat-icon
+				*ngIf="!isAudioActive"
+				[matTooltipDisabled]="!hasAudioDevices"
+				matTooltip="{{ 'TOOLBAR.UNMUTE_AUDIO' | translate }}"
+				id="mic_off"
+			>
+				mic_off
+			</mat-icon>
 		</button>
 
 		<!-- Camera button -->
@@ -33,10 +47,22 @@
 			[disabled]="isConnectionLost || !hasVideoDevices || videoMuteChanging"
 			[class.warn-btn]="!isWebcamVideoActive"
 		>
-			<mat-icon *ngIf="isWebcamVideoActive" matTooltip="{{ 'TOOLBAR.MUTE_VIDEO' | translate }}" id="videocam">videocam</mat-icon>
+			<mat-icon
-			<mat-icon *ngIf="!isWebcamVideoActive" matTooltip="{{ 'TOOLBAR.UNMUTE_VIDEO' | translate }}" id="videocam_off"
+				*ngIf="isWebcamVideoActive"
-				>videocam_off</mat-icon
+				[matTooltipDisabled]="!hasVideoDevices"
+				matTooltip="{{ 'TOOLBAR.MUTE_VIDEO' | translate }}"
+				id="videocam"
 			>
+				videocam
+			</mat-icon>
+			<mat-icon
+				*ngIf="!isWebcamVideoActive"
+				[matTooltipDisabled]="!hasVideoDevices"
+				matTooltip="{{ 'TOOLBAR.UNMUTE_VIDEO' | translate }}"
+				id="videocam_off"
+			>
+				videocam_off
+			</mat-icon>
 		</button>
 
 		<!-- Screenshare button -->

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json

@@ -21,6 +21,8 @@
 		"DEVICE_SECTION": "选择你的设备",
 		"VIDEO_DEVICE": "视频设备",
 		"AUDIO_DEVICE": "音频设备",
+		"NO_VIDEO_DEVICE": "未找到视频设备",
+		"NO_AUDIO_DEVICE": "未找到音频设备",
 		"JOIN": "加入会话",
 		"PREPARING": "筹备会议"
 	},

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json

@@ -21,6 +21,8 @@
 		"DEVICE_SECTION": "Wählen Sie Ihre Geräte",
 		"VIDEO_DEVICE": "Videogerät",
 		"AUDIO_DEVICE": "Audiogerät",
+		"NO_VIDEO_DEVICE": "Video-Gerät nicht gefunden",
+		"NO_AUDIO_DEVICE": "Audio-Gerät nicht gefunden",
 		"JOIN": "Sitzung beitreten",
 		"PREPARING": "Sitzung vorbereiten..."
 	},

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json

@@ -14,7 +14,6 @@
 		"SESSION": "Session",
 		"OUTPUT": "Output mode",
 		"POWERED_BY": "Powered by"
-
 	},
 	"PREJOIN": {
 		"NICKNAME_SECTION": "Set your nickname",
@@ -22,6 +21,8 @@
 		"DEVICE_SECTION": "Choose your devices",
 		"VIDEO_DEVICE": "Video device",
 		"AUDIO_DEVICE": "Audio device",
+		"NO_VIDEO_DEVICE": "Video device not found",
+		"NO_AUDIO_DEVICE": "Audio device not found",
 		"JOIN": "Join session",
 		"PREPARING": "Preparing session..."
 	},

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json

@@ -21,6 +21,8 @@
 		"DEVICE_SECTION": "Elige tus dispositivos",
 		"VIDEO_DEVICE": "Dispositivo de video",
 		"AUDIO_DEVICE": "Dispositivo de audio",
+		"NO_VIDEO_DEVICE": "Dispositivo de vídeo no encontrado",
+		"NO_AUDIO_DEVICE": "Dispositivo de audio no encontrado",
 		"PREPARING": "Preparando la session ...",
 		"JOIN": "Unirme ahora"
 	},

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json

@@ -21,6 +21,8 @@
 		"DEVICE_SECTION": "Choisissez vos appareils",
 		"VIDEO_DEVICE": "Périphérique vidéo",
 		"AUDIO_DEVICE": "Périphérique audio",
+		"NO_VIDEO_DEVICE": "Appareil vidéo introuvable",
+		"NO_AUDIO_DEVICE": "Appareil audio introuvable",
 		"JOIN": "Joindre une session",
 		"PREPARING": "Préparation de la session ..."
 	},
@@ -96,7 +98,6 @@
 			"DOWNLOAD": "Télécharger",
 			"RECORDINGS": "ENREGISTREMENTS",
 			"NO_MODERATOR": "Seul le MODERATEUR peut lancer l'enregistrement"
-
 		}
 	},
 	"ERRORS": {

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json

@@ -21,6 +21,8 @@
 		"DEVICE_SECTION": "अपने डिवाइस चुनें",
 		"VIDEO_DEVICE": "वीडियो डिवाइस",
 		"AUDIO_DEVICE": "ऑडियो डिवाइस",
+		"NO_VIDEO_DEVICE": "वीडियो डिवाइस नहीं मिला",
+		"NO_AUDIO_DEVICE": "ऑडियो डिवाइस नहीं मिला",
 		"JOIN": "सत्र में शामिल हों",
 		"PREPARING": "सत्र तैयार कर रहा है ..."
 	},

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json

@@ -21,6 +21,8 @@
 		"DEVICE_SECTION": "Scegli i tuoi dispositivi",
 		"VIDEO_DEVICE": "Dispositivo video",
 		"AUDIO_DEVICE": "Dispositivo audio",
+		"NO_VIDEO_DEVICE": "Dispositivo video non trovato",
+		"NO_AUDIO_DEVICE": "Dispositivo audio non trovato",
 		"JOIN": "Unisciti alla sessione",
 		"PREPARING": "Preparazione della sessione in corso..."
 	},

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json

@@ -21,6 +21,8 @@
 		"DEVICE_SECTION": "デバイスを選択してください",
 		"VIDEO_DEVICE": "ビデオデバイス",
 		"AUDIO_DEVICE": "オーディオデバイス",
+		"NO_VIDEO_DEVICE": "ビデオデバイスが見つかりません",
+		"NO_AUDIO_DEVICE": "オーディオデバイスが見つかりません",
 		"JOIN": "セッションに参加する",
 		"PREPARING": "セッションの準備中..."
 	},

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json

@@ -21,6 +21,8 @@
 		"DEVICE_SECTION": "Kies je apparaten",
 		"VIDEO_DEVICE": "Videospeler",
 		"AUDIO_DEVICE": "Audiospeler",
+		"NO_VIDEO_DEVICE": "Videoapparaat niet gevonden",
+		"NO_AUDIO_DEVICE": "Audioapparaat niet gevonden",
 		"JOIN": "Deelnemen aan sessie",
 		"PREPARING": "Sessie voorbereiden ..."
 	},

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json

@@ -21,6 +21,8 @@
 		"DEVICE_SECTION": "Escolha seus dispositivos",
 		"VIDEO_DEVICE": "Dispositivo de vídeo",
 		"AUDIO_DEVICE": "Dispositivo de áudio",
+		"NO_VIDEO_DEVICE": "Dispositivo de vídeo não encontrado",
+		"NO_AUDIO_DEVICE": "Dispositivo de áudio não encontrado",
 		"JOIN": "Entrar na sessão",
 		"PREPARING": "Preparando sessão..."
 	},