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

openvidu-components: Fixed bug with show mat menu in iPhone devices

pull/737/head
csantosm 2022-06-09 11:20:01 +02:00
parent e3aaf2a25a
commit 3c323233a5
1 changed files with 32 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,14 @@
import { import { Component, HostListener, OnDestroy, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';
Component, import { MatMenuTrigger } from '@angular/material/menu';
HostListener, import { MatSelect } from '@angular/material/select';
OnDestroy,
OnInit,
Output,
EventEmitter
} from '@angular/core';
import { PublisherProperties } from 'openvidu-browser'; import { PublisherProperties } from 'openvidu-browser';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { CustomDevice } from '../../models/device.model'; import { CustomDevice } from '../../models/device.model';
import { ILogger } from '../../models/logger.model'; import { ILogger } from '../../models/logger.model';
import { PanelType } from '../../models/panel.model'; import { PanelType } from '../../models/panel.model';
import { ParticipantAbstractModel } from '../../models/participant.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 { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
import { DeviceService } from '../../services/device/device.service'; import { DeviceService } from '../../services/device/device.service';
import { LayoutService } from '../../services/layout/layout.service'; import { LayoutService } from '../../services/layout/layout.service';
@ -32,9 +29,18 @@ import { VirtualBackgroundService } from '../../services/virtual-background/virt
styleUrls: ['./pre-join.component.css'] styleUrls: ['./pre-join.component.css']
}) })
export class PreJoinComponent implements OnInit, OnDestroy { export class PreJoinComponent implements OnInit, OnDestroy {
/**
* @ignore
*/
@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
/**
* @ignore
*/
@ViewChild(MatSelect) matSelect: MatSelect;
@Output() onJoinButtonClicked = new EventEmitter<any>(); @Output() onJoinButtonClicked = new EventEmitter<any>();
languages: {name: string, ISO: string}[] = []; languages: { name: string; ISO: string }[] = [];
langSelected: {name: string, ISO: string}; langSelected: { name: string; ISO: string };
cameras: CustomDevice[]; cameras: CustomDevice[];
microphones: CustomDevice[]; microphones: CustomDevice[];
cameraSelected: CustomDevice; cameraSelected: CustomDevice;
@ -81,7 +87,8 @@ export class PreJoinComponent implements OnInit, OnDestroy {
private libService: OpenViduAngularConfigService, private libService: OpenViduAngularConfigService,
private storageSrv: StorageService, private storageSrv: StorageService,
private backgroundService: VirtualBackgroundService, private backgroundService: VirtualBackgroundService,
private translateService: TranslateService private translateService: TranslateService,
protected cdkSrv: CdkOverlayService
) { ) {
this.log = this.loggerSrv.get('PreJoinComponent'); this.log = this.loggerSrv.get('PreJoinComponent');
} }
@ -106,7 +113,19 @@ export class PreJoinComponent implements OnInit, OnDestroy {
this.isLoading = false; 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() { async ngOnDestroy() {
this.cdkSrv.setSelector('body');
if (this.localParticipantSubscription) this.localParticipantSubscription.unsubscribe(); if (this.localParticipantSubscription) this.localParticipantSubscription.unsubscribe();
if (this.screenShareStateSubscription) this.screenShareStateSubscription.unsubscribe(); if (this.screenShareStateSubscription) this.screenShareStateSubscription.unsubscribe();
if (this.backgroundEffectsButtonSub) this.backgroundEffectsButtonSub.unsubscribe(); if (this.backgroundEffectsButtonSub) this.backgroundEffectsButtonSub.unsubscribe();
@ -132,7 +151,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
} }
await this.openviduService.republishTrack(pp); await this.openviduService.republishTrack(pp);
if (this.backgroundService.isBackgroundApplied()) { if (this.backgroundService.isBackgroundApplied()) {
await this.backgroundService.applyBackground(this.backgroundService.backgrounds.find(b => b.id === backgroundSelected)); await this.backgroundService.applyBackground(this.backgroundService.backgrounds.find((b) => b.id === backgroundSelected));
} }
this.deviceSrv.setCameraSelected(videoSource); this.deviceSrv.setCameraSelected(videoSource);
@ -156,7 +175,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
} }
} }
onLangSelected(lang: string){ onLangSelected(lang: string) {
this.translateService.setLanguage(lang); this.translateService.setLanguage(lang);
this.storageSrv.setLang(lang); this.storageSrv.setLang(lang);
this.langSelected = this.translateService.getLangSelected(); this.langSelected = this.translateService.getLangSelected();