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

openvidu-components: Made toolbar responsive

pull/739/head
csantosm 2022-06-14 13:22:53 +02:00
parent d18d37de82
commit 57869cb358
4 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
View File

@ -136,6 +136,13 @@
}
}
@media (max-width: 550px) {
#toolbar {
padding: 0px;
place-content: space-evenly;
}
}
::ng-deep .mat-menu-panel {
margin-bottom: 10px;
}

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

@ -1,5 +1,5 @@
<mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
<div fxFlex="20%" fxLayoutAlign="start center" id="info-container">
<mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="40px">
<div fxFlex="20%" fxLayoutAlign="start center" id="info-container" *ngIf="screenSize !== 'xs'">
<div>
<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
<div id="session-info-container" [class.colapsed]="recordingStatus === _recordingStatus.STARTED">

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

@ -12,7 +12,7 @@ import {
TemplateRef,
ViewChild
} from '@angular/core';
import { skip, Subscription } from 'rxjs';
import { first, skip, Subscription } from 'rxjs';
import { TokenService } from '../../services/token/token.service';
import { ChatService } from '../../services/chat/chat.service';
import { PanelService } from '../../services/panel/panel.service';
@ -38,6 +38,7 @@ import { MatMenuTrigger } from '@angular/material/menu';
import { RecordingService } from '../../services/recording/recording.service';
import { RecordingInfo, RecordingStatus } from '../../models/recording.model';
import { TranslateService } from '../../services/translate/translate.service';
import { MediaChange } from '@angular/flex-layout';
/**
*
@ -321,6 +322,11 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
*/
isSessionCreator: boolean = false;
/**
* @ignore
*/
screenSize: string;
private log: ILogger;
private minimalSub: Subscription;
private panelTogglingSubscription: Subscription;
@ -337,6 +343,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
private chatPanelButtonSub: Subscription;
private displayLogoSub: Subscription;
private displaySessionNameSub: Subscription;
private screenSizeSub: Subscription;
private currentWindowHeight = window.innerHeight;
/**
@ -398,6 +405,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.subscribeToMenuToggling();
this.subscribeToChatMessages();
this.subscribeToRecordingStatus();
this.subscribeToScreenSize();
}
ngAfterViewInit() {
@ -423,6 +431,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
if (this.minimalSub) this.minimalSub.unsubscribe();
if (this.activitiesPanelButtonSub) this.activitiesPanelButtonSub.unsubscribe();
if (this.recordingSubscription) this.recordingSubscription.unsubscribe();
if (this.screenSizeSub) this.screenSizeSub.unsubscribe();
}
/**
@ -650,6 +659,13 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
});
}
private subscribeToScreenSize() {
this.screenSizeSub = this.documentService.screenSizeObs.subscribe((change: MediaChange[]) => {
console.log(change[0].mqAlias)
this.screenSize = change[0].mqAlias;
});
}
private checkDisplayMoreOptions() {
this.showMoreOptionsButton = this.showFullscreenButton || this.showBackgroundEffectsButton || this.showRecordingButton;
}

9
openvidu-components-angular/projects/openvidu-angular/src/lib/services/document/document.service.ts
View File

@ -1,4 +1,6 @@
import { Injectable } from '@angular/core';
import { MediaChange, MediaObserver } from '@angular/flex-layout';
import { BehaviorSubject, Observable } from 'rxjs';
import { LayoutClass } from '../../models/layout.model';
/**
@ -8,7 +10,12 @@ import { LayoutClass } from '../../models/layout.model';
providedIn: 'root'
})
export class DocumentService {
constructor() {}
screenSizeObs: Observable<MediaChange[]>;
private screenSize = <BehaviorSubject<MediaChange>><unknown>new BehaviorSubject(MediaChange);
constructor(private media: MediaObserver) {
this.screenSizeObs= this.media.asObservable();
}
getHTMLElementByClassName(element: HTMLElement, className: string): HTMLElement {
while (!!element && element !== document.body) {