ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/748/head
Carlos Santos 2022-10-27 13:32:09 +02:00
parent 1898057e2a
commit 98ecdc278e
15 changed files with 200 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,25 @@
<div class="device-container-element">
<button
mat-icon-button
id="microhpone-button"
[disabled]="!hasAudioDevices"
[class.warn-btn]="isAudioMuted"
(click)="toggleMic()"
<button mat-icon-button id="microhpone-button" [disabled]="!hasAudioDevices" [class.warn-btn]="isAudioMuted" (click)="toggleMic()">
<mat-icon
*ngIf="!isAudioMuted"
[matTooltipDisabled]="!hasAudioDevices"
matTooltip="{{ 'TOOLBAR.MUTE_AUDIO' | translate }}"
id="mic"
>
<mat-icon *ngIf="!isAudioMuted" matTooltip="{{ 'TOOLBAR.MUTE_AUDIO' | translate }}" id="mic">mic</mat-icon>
<mat-icon *ngIf="isAudioMuted" matTooltip="{{ 'TOOLBAR.UNMUTE_AUDIO' | translate }}" id="mic_off"
>mic_off</mat-icon
mic
</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"

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

@ -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();

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

@ -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 *ngIf="isVideoMuted" matTooltip="{{ 'TOOLBAR.UNMUTE_VIDEO' | translate }}" id="videocam_off">videocam_off</mat-icon>
<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"

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

@ -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 {

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

@ -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 *ngIf="!isAudioActive" matTooltip="{{ 'TOOLBAR.UNMUTE_AUDIO' | translate }}" id="mic_off">mic_off</mat-icon>
<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 *ngIf="!isWebcamVideoActive" matTooltip="{{ 'TOOLBAR.UNMUTE_VIDEO' | translate }}" id="videocam_off"
>videocam_off</mat-icon
<mat-icon
*ngIf="isWebcamVideoActive"
[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 -->

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

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

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

@ -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..."
},

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

@ -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..."
},

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

@ -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"
},

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

@ -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": {

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

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

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

@ -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..."
},

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

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

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

@ -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 ..."
},

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

@ -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..."
},