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 fullscreen 

Listened the F11 keydown for updating the UI
pull/707/head
csantosm 2022-02-24 10:16:23 +01:00
parent ad06e2239b
commit e02f72a0f1
3 changed files with 57 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,12 +11,11 @@
id="navMicrophoneButton" id="navMicrophoneButton"
mat-icon-button mat-icon-button
(click)="toggleMicrophone()" (click)="toggleMicrophone()"
[disabled]="isConnectionLost" [disabled]="isConnectionLost || !hasAudioDevices"
*ngIf="hasAudioDevices" [class.warn-btn]="!isWebcamAudioActive"
[class.warn-btn]="!isWebcamAudioEnabled"
> >
<mat-icon *ngIf="isWebcamAudioEnabled" matTooltip="Mute your audio">mic</mat-icon> <mat-icon *ngIf="isWebcamAudioActive" matTooltip="Mute your audio">mic</mat-icon>
<mat-icon *ngIf="!isWebcamAudioEnabled" matTooltip="Unmute your audio">mic_off</mat-icon> <mat-icon *ngIf="!isWebcamAudioActive" matTooltip="Unmute your audio">mic_off</mat-icon>
</button> </button>
<!-- Camera button --> <!-- Camera button -->
@ -24,12 +23,11 @@
id="navCameraButton" id="navCameraButton"
mat-icon-button mat-icon-button
(click)="toggleCamera()" (click)="toggleCamera()"
[disabled]="isConnectionLost" [disabled]="isConnectionLost || !hasVideoDevices"
*ngIf="hasVideoDevices" [class.warn-btn]="!isWebcamVideoActive"
[class.warn-btn]="!isWebcamVideoEnabled"
> >
<mat-icon *ngIf="isWebcamVideoEnabled" matTooltip="Mute your cam">videocam</mat-icon> <mat-icon *ngIf="isWebcamVideoActive" matTooltip="Mute your cam">videocam</mat-icon>
<mat-icon *ngIf="!isWebcamVideoEnabled" matTooltip="Unmute your cam">videocam_off</mat-icon> <mat-icon *ngIf="!isWebcamVideoActive" matTooltip="Unmute your cam">videocam_off</mat-icon>
</button> </button>
<!-- Screenshare button --> <!-- Screenshare button -->
@ -38,16 +36,16 @@
mat-icon-button mat-icon-button
(click)="toggleScreenShare()" (click)="toggleScreenShare()"
[disabled]="isConnectionLost" [disabled]="isConnectionLost"
[class.active-btn]="isScreenShareEnabled" [class.active-btn]="isScreenShareActive"
> >
<mat-icon *ngIf="!isScreenShareEnabled" matTooltip="Enable screen share">screen_share</mat-icon> <mat-icon *ngIf="!isScreenShareActive" matTooltip="Enable screen share">screen_share</mat-icon>
<mat-icon *ngIf="isScreenShareEnabled" matTooltip="Disable screen share">screen_share</mat-icon> <mat-icon *ngIf="isScreenShareActive" matTooltip="Disable screen share">screen_share</mat-icon>
</button> </button>
<!-- Fullscreen button --> <!-- Fullscreen button -->
<button mat-icon-button (click)="toggleFullscreen()" [disabled]="isConnectionLost" [class.active-btn]="isFullscreenEnabled"> <button mat-icon-button (click)="toggleFullscreen()" [disabled]="isConnectionLost" [class.active-btn]="isFullscreenActive">
<mat-icon *ngIf="isFullscreenEnabled" matTooltip="Exit Fullscreen">fullscreen_exit</mat-icon> <mat-icon *ngIf="isFullscreenActive" matTooltip="Exit Fullscreen">fullscreen_exit</mat-icon>
<mat-icon *ngIf="!isFullscreenEnabled" matTooltip="Fullscreen">fullscreen</mat-icon> <mat-icon *ngIf="!isFullscreenActive" matTooltip="Fullscreen">fullscreen</mat-icon>
</button> </button>
<!-- Custom toolbar buttons --> <!-- Custom toolbar buttons -->

62
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
View File

@ -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 { skip, Subscription } from 'rxjs';
import { TokenService } from '../../services/token/token.service'; import { TokenService } from '../../services/token/token.service';
import { ChatService } from '../../services/chat/chat.service'; import { ChatService } from '../../services/chat/chat.service';
@ -33,13 +42,13 @@ export class ToolbarComponent implements OnInit, OnDestroy {
session: Session; session: Session;
unreadMessages: number = 0; unreadMessages: number = 0;
messageList: ChatMessage[] = []; messageList: ChatMessage[] = [];
isScreenShareEnabled: boolean; isScreenShareActive: boolean;
isWebcamVideoEnabled: boolean; isWebcamVideoActive: boolean;
isWebcamAudioEnabled: boolean; isWebcamAudioActive: boolean;
isConnectionLost: boolean; isConnectionLost: boolean;
hasVideoDevices: boolean; hasVideoDevices: boolean;
hasAudioDevices: boolean; hasAudioDevices: boolean;
isFullscreenEnabled: boolean = false; isFullscreenActive: boolean = false;
isChatOpened: boolean = false; isChatOpened: boolean = false;
isParticipantsOpened: boolean = false; isParticipantsOpened: boolean = false;
logoUrl = 'assets/images/openvidu_globe.png'; logoUrl = 'assets/images/openvidu_globe.png';
@ -51,6 +60,8 @@ export class ToolbarComponent implements OnInit, OnDestroy {
protected webcamVideoStateSubscription: Subscription; protected webcamVideoStateSubscription: Subscription;
protected webcamAudioStateSubscription: Subscription; protected webcamAudioStateSubscription: Subscription;
private currentWindowHeight = window.innerHeight;
constructor( constructor(
protected documentService: DocumentService, protected documentService: DocumentService,
protected chatService: ChatService, protected chatService: ChatService,
@ -85,11 +96,21 @@ export class ToolbarComponent implements OnInit, OnDestroy {
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
sizeChange(event) { sizeChange(event) {
const maxHeight = window.screen.height; if(this.currentWindowHeight >= window.innerHeight) {
const maxWidth = window.screen.width; // The user has exit the fullscreen mode
const curHeight = window.innerHeight; this.isFullscreenActive = false;
const curWidth = window.innerWidth; this.currentWindowHeight = window.innerHeight;
this.isFullscreenEnabled = maxWidth == curWidth && maxHeight == curHeight; }
}
@HostListener('document:keydown', ['$event'])
keyDown(event: KeyboardEvent) {
if(event.key === 'F11'){
event.preventDefault();
this.toggleFullscreen();
this.currentWindowHeight = window.innerHeight;
return false;
}
} }
async ngOnInit() { async ngOnInit() {
@ -188,7 +209,10 @@ export class ToolbarComponent implements OnInit, OnDestroy {
this.participantService.enableScreenUser(screenPublisher); this.participantService.enableScreenUser(screenPublisher);
if (!this.openviduService.isScreenSessionConnected()) { 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()); await this.openviduService.publish(this.participantService.getMyScreenPublisher());
// this.openviduService.sendNicknameSignal(); // this.openviduService.sendNicknameSignal();
@ -237,8 +261,8 @@ export class ToolbarComponent implements OnInit, OnDestroy {
} }
toggleFullscreen() { toggleFullscreen() {
this.isFullscreenActive = !this.isFullscreenActive;
this.documentService.toggleFullscreen('session-container'); this.documentService.toggleFullscreen('session-container');
this.isFullscreenEnabled = !this.isFullscreenEnabled;
} }
protected subscribeToReconnection() { protected subscribeToReconnection() {
@ -253,7 +277,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
}); });
} }
protected subscribeToMenuToggling() { 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.isChatOpened = ev.opened && ev.type === MenuType.CHAT;
this.isParticipantsOpened = ev.opened && ev.type === MenuType.PARTICIPANTS; this.isParticipantsOpened = ev.opened && ev.type === MenuType.PARTICIPANTS;
if (this.isChatOpened) { if (this.isChatOpened) {
@ -271,15 +295,15 @@ export class ToolbarComponent implements OnInit, OnDestroy {
}); });
} }
protected subscribeToUserMediaProperties() { protected subscribeToUserMediaProperties() {
this.screenShareStateSubscription = this.participantService.screenShareState.subscribe((enabled) => { this.screenShareStateSubscription = this.participantService.screenShareState.subscribe((active) => {
this.isScreenShareEnabled = enabled; this.isScreenShareActive = active;
}); });
this.webcamVideoStateSubscription = this.participantService.webcamVideoActive.subscribe((enabled) => { this.webcamVideoStateSubscription = this.participantService.webcamVideoActive.subscribe((active) => {
this.isWebcamVideoEnabled = enabled; this.isWebcamVideoActive = active;
}); });
this.webcamAudioStateSubscription = this.participantService.webcamAudioActive.subscribe((enabled) => { this.webcamAudioStateSubscription = this.participantService.webcamAudioActive.subscribe((active) => {
this.isWebcamAudioEnabled = enabled; this.isWebcamAudioActive = active;
}); });
} }
} }

1
openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts
View File

@ -50,7 +50,6 @@ export class DeviceService {
} }
this.devices = await this.OV.getDevices(); this.devices = await this.OV.getDevices();
console.log(this.devices);
const customDevices = this.initializeCustomDevices(this.devices); const customDevices = this.initializeCustomDevices(this.devices);
this.cameras = customDevices.cameras; this.cameras = customDevices.cameras;
this.microphones = customDevices.microphones; this.microphones = customDevices.microphones;