openvidu-components: Made toolbar responsive

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

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

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

@@ -1,5 +1,5 @@
-<mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
+<mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="40px">
-	<div fxFlex="20%" fxLayoutAlign="start center" id="info-container">
+	<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">

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

@@ -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;
 	}

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

@@ -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) {