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"
mat-icon-button
(click)="toggleMicrophone()"
[disabled]="isConnectionLost"
*ngIf="hasAudioDevices"
[class.warn-btn]="!isWebcamAudioEnabled"
[disabled]="isConnectionLost || !hasAudioDevices"
[class.warn-btn]="!isWebcamAudioActive"
>
<mat-icon *ngIf="isWebcamAudioEnabled" matTooltip="Mute your audio">mic</mat-icon>
<mat-icon *ngIf="!isWebcamAudioEnabled" matTooltip="Unmute your audio">mic_off</mat-icon>
<mat-icon *ngIf="isWebcamAudioActive" matTooltip="Mute your audio">mic</mat-icon>
<mat-icon *ngIf="!isWebcamAudioActive" matTooltip="Unmute your audio">mic_off</mat-icon>
</button>
<!-- Camera button -->
@ -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"
>
<mat-icon *ngIf="isWebcamVideoEnabled" matTooltip="Mute your cam">videocam</mat-icon>
<mat-icon *ngIf="!isWebcamVideoEnabled" matTooltip="Unmute your cam">videocam_off</mat-icon>
<mat-icon *ngIf="isWebcamVideoActive" matTooltip="Mute your cam">videocam</mat-icon>
<mat-icon *ngIf="!isWebcamVideoActive" matTooltip="Unmute your cam">videocam_off</mat-icon>
</button>
<!-- Screenshare button -->
@ -38,16 +36,16 @@
mat-icon-button
(click)="toggleScreenShare()"
[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="isScreenShareEnabled" matTooltip="Disable screen share">screen_share</mat-icon>
<mat-icon *ngIf="!isScreenShareActive" matTooltip="Enable screen share">screen_share</mat-icon>
<mat-icon *ngIf="isScreenShareActive" matTooltip="Disable screen share">screen_share</mat-icon>
</button>
<!-- Fullscreen button -->
<button mat-icon-button (click)="toggleFullscreen()" [disabled]="isConnectionLost" [class.active-btn]="isFullscreenEnabled">
<mat-icon *ngIf="isFullscreenEnabled" matTooltip="Exit Fullscreen">fullscreen_exit</mat-icon>
<mat-icon *ngIf="!isFullscreenEnabled" matTooltip="Fullscreen">fullscreen</mat-icon>
<button mat-icon-button (click)="toggleFullscreen()" [disabled]="isConnectionLost" [class.active-btn]="isFullscreenActive">
<mat-icon *ngIf="isFullscreenActive" matTooltip="Exit Fullscreen">fullscreen_exit</mat-icon>
<mat-icon *ngIf="!isFullscreenActive" matTooltip="Fullscreen">fullscreen</mat-icon>
</button>
<!-- 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 { 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;
});
}
}

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();
console.log(this.devices);
const customDevices = this.initializeCustomDevices(this.devices);
this.cameras = customDevices.cameras;
this.microphones = customDevices.microphones;