From e02f72a0f165c6a44c58936208c5ce81a689c37e Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Thu, 24 Feb 2022 10:16:23 +0100 Subject: [PATCH] openvidu-components: Fixed bug with fullscreen Listened the F11 keydown for updating the UI --- .../components/toolbar/toolbar.component.html | 30 +++++---- .../components/toolbar/toolbar.component.ts | 62 +++++++++++++------ .../src/lib/services/device/device.service.ts | 1 - 3 files changed, 57 insertions(+), 36 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html index bcd52178..43ac495a 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html @@ -11,12 +11,11 @@ id="navMicrophoneButton" mat-icon-button (click)="toggleMicrophone()" - [disabled]="isConnectionLost" - *ngIf="hasAudioDevices" - [class.warn-btn]="!isWebcamAudioEnabled" + [disabled]="isConnectionLost || !hasAudioDevices" + [class.warn-btn]="!isWebcamAudioActive" > - mic - mic_off + mic + mic_off @@ -24,12 +23,11 @@ id="navCameraButton" mat-icon-button (click)="toggleCamera()" - [disabled]="isConnectionLost" - *ngIf="hasVideoDevices" - [class.warn-btn]="!isWebcamVideoEnabled" + [disabled]="isConnectionLost || !hasVideoDevices" + [class.warn-btn]="!isWebcamVideoActive" > - videocam - videocam_off + videocam + videocam_off @@ -38,16 +36,16 @@ mat-icon-button (click)="toggleScreenShare()" [disabled]="isConnectionLost" - [class.active-btn]="isScreenShareEnabled" + [class.active-btn]="isScreenShareActive" > - screen_share - screen_share + screen_share + screen_share - diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts index 5bb3613a..ac14fa66 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts @@ -1,4 +1,13 @@ -import { Component, ContentChild, EventEmitter, HostListener, OnDestroy, OnInit, Output, TemplateRef } from '@angular/core'; +import { + Component, + ContentChild, + EventEmitter, + HostListener, + OnDestroy, + OnInit, + Output, + TemplateRef +} from '@angular/core'; import { skip, Subscription } from 'rxjs'; import { TokenService } from '../../services/token/token.service'; import { ChatService } from '../../services/chat/chat.service'; @@ -33,13 +42,13 @@ export class ToolbarComponent implements OnInit, OnDestroy { session: Session; unreadMessages: number = 0; messageList: ChatMessage[] = []; - isScreenShareEnabled: boolean; - isWebcamVideoEnabled: boolean; - isWebcamAudioEnabled: boolean; + isScreenShareActive: boolean; + isWebcamVideoActive: boolean; + isWebcamAudioActive: boolean; isConnectionLost: boolean; hasVideoDevices: boolean; hasAudioDevices: boolean; - isFullscreenEnabled: boolean = false; + isFullscreenActive: boolean = false; isChatOpened: boolean = false; isParticipantsOpened: boolean = false; logoUrl = 'assets/images/openvidu_globe.png'; @@ -51,6 +60,8 @@ export class ToolbarComponent implements OnInit, OnDestroy { protected webcamVideoStateSubscription: Subscription; protected webcamAudioStateSubscription: Subscription; + private currentWindowHeight = window.innerHeight; + constructor( protected documentService: DocumentService, protected chatService: ChatService, @@ -85,11 +96,21 @@ export class ToolbarComponent implements OnInit, OnDestroy { @HostListener('window:resize', ['$event']) sizeChange(event) { - const maxHeight = window.screen.height; - const maxWidth = window.screen.width; - const curHeight = window.innerHeight; - const curWidth = window.innerWidth; - this.isFullscreenEnabled = maxWidth == curWidth && maxHeight == curHeight; + if(this.currentWindowHeight >= window.innerHeight) { + // The user has exit the fullscreen mode + this.isFullscreenActive = false; + this.currentWindowHeight = window.innerHeight; + } + } + + @HostListener('document:keydown', ['$event']) + keyDown(event: KeyboardEvent) { + if(event.key === 'F11'){ + event.preventDefault(); + this.toggleFullscreen(); + this.currentWindowHeight = window.innerHeight; + return false; + } } async ngOnInit() { @@ -188,7 +209,10 @@ export class ToolbarComponent implements OnInit, OnDestroy { this.participantService.enableScreenUser(screenPublisher); if (!this.openviduService.isScreenSessionConnected()) { - await this.openviduService.connectSession(this.openviduService.getScreenSession(), this.tokenService.getScreenToken()); + await this.openviduService.connectSession( + this.openviduService.getScreenSession(), + this.tokenService.getScreenToken() + ); } await this.openviduService.publish(this.participantService.getMyScreenPublisher()); // this.openviduService.sendNicknameSignal(); @@ -237,8 +261,8 @@ export class ToolbarComponent implements OnInit, OnDestroy { } toggleFullscreen() { + this.isFullscreenActive = !this.isFullscreenActive; this.documentService.toggleFullscreen('session-container'); - this.isFullscreenEnabled = !this.isFullscreenEnabled; } protected subscribeToReconnection() { @@ -253,7 +277,7 @@ export class ToolbarComponent implements OnInit, OnDestroy { }); } protected subscribeToMenuToggling() { - this.menuTogglingSubscription = this.menuService.menuOpenedObs.subscribe((ev: {opened: boolean, type?: MenuType}) => { + this.menuTogglingSubscription = this.menuService.menuOpenedObs.subscribe((ev: { opened: boolean; type?: MenuType }) => { this.isChatOpened = ev.opened && ev.type === MenuType.CHAT; this.isParticipantsOpened = ev.opened && ev.type === MenuType.PARTICIPANTS; if (this.isChatOpened) { @@ -271,15 +295,15 @@ export class ToolbarComponent implements OnInit, OnDestroy { }); } protected subscribeToUserMediaProperties() { - this.screenShareStateSubscription = this.participantService.screenShareState.subscribe((enabled) => { - this.isScreenShareEnabled = enabled; + this.screenShareStateSubscription = this.participantService.screenShareState.subscribe((active) => { + this.isScreenShareActive = active; }); - this.webcamVideoStateSubscription = this.participantService.webcamVideoActive.subscribe((enabled) => { - this.isWebcamVideoEnabled = enabled; + this.webcamVideoStateSubscription = this.participantService.webcamVideoActive.subscribe((active) => { + this.isWebcamVideoActive = active; }); - this.webcamAudioStateSubscription = this.participantService.webcamAudioActive.subscribe((enabled) => { - this.isWebcamAudioEnabled = enabled; + this.webcamAudioStateSubscription = this.participantService.webcamAudioActive.subscribe((active) => { + this.isWebcamAudioActive = active; }); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts index 5f610e99..86a73d00 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts @@ -50,7 +50,6 @@ export class DeviceService { } this.devices = await this.OV.getDevices(); - console.log(this.devices); const customDevices = this.initializeCustomDevices(this.devices); this.cameras = customDevices.cameras; this.microphones = customDevices.microphones;