diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts
index 55393f4a..8be21045 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts
@@ -2,7 +2,6 @@ import { Component, HostListener, OnDestroy, OnInit, Output, EventEmitter, ViewC
import { MatMenuTrigger } from '@angular/material/menu';
import { MatSelect } from '@angular/material/select';
-import { PublisherProperties } from 'openvidu-browser';
import { Subscription } from 'rxjs';
import { CustomDevice } from '../../models/device.model';
import { ILogger } from '../../models/logger.model';
@@ -10,15 +9,10 @@ import { PanelType } from '../../models/panel.model';
import { ParticipantAbstractModel } from '../../models/participant.model';
import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
-import { DeviceService } from '../../services/device/device.service';
import { LayoutService } from '../../services/layout/layout.service';
import { LoggerService } from '../../services/logger/logger.service';
-import { OpenViduService } from '../../services/openvidu/openvidu.service';
import { PanelService } from '../../services/panel/panel.service';
import { ParticipantService } from '../../services/participant/participant.service';
-import { StorageService } from '../../services/storage/storage.service';
-import { TranslateService } from '../../services/translate/translate.service';
-import { VirtualBackgroundService } from '../../services/virtual-background/virtual-background.service';
/**
* @internal
@@ -39,8 +33,6 @@ export class PreJoinComponent implements OnInit, OnDestroy, AfterViewInit {
@ViewChild(MatSelect) matSelect: MatSelect;
@Output() onJoinButtonClicked = new EventEmitter
();
- languages: { name: string; ISO: string }[] = [];
- langSelected: { name: string; ISO: string };
cameras: CustomDevice[];
microphones: CustomDevice[];
cameraSelected: CustomDevice;
@@ -79,15 +71,10 @@ export class PreJoinComponent implements OnInit, OnDestroy, AfterViewInit {
constructor(
private layoutService: LayoutService,
- private deviceSrv: DeviceService,
private loggerSrv: LoggerService,
- private openviduService: OpenViduService,
private participantService: ParticipantService,
protected panelService: PanelService,
private libService: OpenViduAngularConfigService,
- private storageSrv: StorageService,
- private backgroundService: VirtualBackgroundService,
- private translateService: TranslateService,
protected cdkSrv: CdkOverlayService
) {
this.log = this.loggerSrv.get('PreJoinComponent');
@@ -96,20 +83,8 @@ export class PreJoinComponent implements OnInit, OnDestroy, AfterViewInit {
ngOnInit() {
this.subscribeToPrejoinDirectives();
this.subscribeToLocalParticipantEvents();
- this.languages = this.translateService.getLanguagesInfo();
- this.langSelected = this.translateService.getLangSelected();
this.windowSize = window.innerWidth;
- this.hasVideoDevices = this.deviceSrv.hasVideoDeviceAvailable();
- this.hasAudioDevices = this.deviceSrv.hasAudioDeviceAvailable();
- this.microphones = this.deviceSrv.getMicrophones();
- this.cameras = this.deviceSrv.getCameras();
- this.cameraSelected = this.deviceSrv.getCameraSelected();
- this.microphoneSelected = this.deviceSrv.getMicrophoneSelected();
-
- this.isVideoMuted = this.deviceSrv.isVideoMuted();
- this.isAudioMuted = this.deviceSrv.isAudioMuted();
-
this.isLoading = false;
}
@@ -133,79 +108,6 @@ export class PreJoinComponent implements OnInit, OnDestroy, AfterViewInit {
this.panelService.closePanel();
}
- async onCameraSelected(event: any) {
- const videoSource = event?.value;
- // Is New deviceId different from the old one?
- if (this.deviceSrv.needUpdateVideoTrack(videoSource)) {
- const mirror = this.deviceSrv.cameraNeedsMirror(videoSource);
- //TODO: Uncomment this when replaceTrack issue is fixed
- // const pp: PublisherProperties = { videoSource, audioSource: false, mirror };
- // await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
- // TODO: Remove this when replaceTrack issue is fixed
- const pp: PublisherProperties = { videoSource, audioSource: this.microphoneSelected.device, mirror };
-
- // Reapply Virtual Background to new Publisher if necessary
- const backgroundSelected = this.backgroundService.backgroundSelected.getValue();
- if (this.backgroundService.isBackgroundApplied()) {
- await this.backgroundService.removeBackground();
- }
- await this.openviduService.republishTrack(pp);
- if (this.backgroundService.isBackgroundApplied()) {
- await this.backgroundService.applyBackground(this.backgroundService.backgrounds.find((b) => b.id === backgroundSelected));
- }
-
- this.deviceSrv.setCameraSelected(videoSource);
- this.cameraSelected = this.deviceSrv.getCameraSelected();
- }
- }
-
- async onMicrophoneSelected(event: any) {
- const audioSource = event?.value;
- if (this.deviceSrv.needUpdateAudioTrack(audioSource)) {
- //TODO: Uncomment this when replaceTrack issue is fixed
- // const pp: PublisherProperties = { audioSource, videoSource: false };
- // await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
- // TODO: Remove this when replaceTrack issue is fixed
- const mirror = this.deviceSrv.cameraNeedsMirror(this.cameraSelected.device);
- const pp: PublisherProperties = { videoSource: this.cameraSelected.device, audioSource, mirror };
- await this.openviduService.republishTrack(pp);
-
- this.deviceSrv.setMicSelected(audioSource);
- this.microphoneSelected = this.deviceSrv.getMicrophoneSelected();
- }
- }
-
- onLangSelected(lang: string) {
- this.translateService.setLanguage(lang);
- this.storageSrv.setLang(lang);
- this.langSelected = this.translateService.getLangSelected();
- }
-
- async toggleCam() {
- this.videoMuteChanging = true;
- const publish = this.isVideoMuted;
- await this.openviduService.publishVideo(publish);
- this.isVideoMuted = !this.isVideoMuted;
- this.storageSrv.setVideoMuted(this.isVideoMuted);
- if (this.isVideoMuted && this.panelService.isExternalPanelOpened()) {
- this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS);
- }
- this.videoMuteChanging = false;
- }
-
- toggleMic() {
- const publish = this.isAudioMuted;
- this.openviduService.publishAudio(publish);
- this.isAudioMuted = !this.isAudioMuted;
- this.storageSrv.setAudioMuted(this.isAudioMuted);
- }
-
- updateNickname() {
- this.nickname = this.nickname === '' ? this.participantService.getMyNickname() : this.nickname;
- this.participantService.setMyNickname(this.nickname);
- this.storageSrv.setNickname(this.nickname);
- }
-
joinSession() {
this.onJoinButtonClicked.emit();
this.panelService.closePanel();
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
index 4537917d..042cb4db 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
@@ -24,6 +24,11 @@
z-index: 1;
}
+.big {
+ width: 650px;
+ max-width: 100%;
+}
+
.mat-drawer.mat-drawer-side {
z-index: 0 !important;
}
@@ -44,7 +49,8 @@
background-color: var(--ov-primary-color);
}
-#toolbar-container, #footer-container {
+#toolbar-container,
+#footer-container {
background-color: var(--ov-primary-color);
min-width: 400px !important;
width: 100%;
@@ -63,9 +69,7 @@
min-width: 400px !important;
}
-
-
-.reconnecting-container{
+.reconnecting-container {
width: 100%;
height: 100%;
z-index: 1000;
@@ -74,10 +78,28 @@
position: absolute;
}
-
@media only screen and (max-width: 600px) {
#session-container {
width: 100%;
/* position: fixed; */
}
}
+
+::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+ padding: 1px !important;
+}
+
+::ng-deep .mat-input-element {
+ caret-color: #000000;
+}
+::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
+ color: #000000;
+}
+
+::ng-deep .mat-form-field-label {
+ color: var(--ov-panel-text-color) !important;
+}
+
+::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
+ background-color: var(--ov-panel-text-color) !important;
+}
\ No newline at end of file
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
index 7e2fc943..6a9bb0f8 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
@@ -1,10 +1,11 @@
-
+