From e45aec750e1dd1121b5353b6319e91e7ee3e12af Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Wed, 22 Feb 2023 13:07:08 +0100
Subject: [PATCH] openvidu-components: Made responsive toolbar activities tags

---
 .../components/toolbar/toolbar.component.css  | 10 +++++++-
 .../components/toolbar/toolbar.component.html | 17 +++++++++----
 .../components/toolbar/toolbar.component.ts   | 24 +++++++++----------
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
index dcc89c5f..84c706ff 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
@@ -66,7 +66,7 @@
 	display: flex;
 }
 
-.colapsed {
+.collapsed {
 	flex-direction: column;
 }
 
@@ -157,12 +157,20 @@
 	#session-name {
 		display: none;
 	}
+
+	#activities-tag {
+		display: grid;
+		gap: 5px;
+	}
 }
 
 @media (max-width: 850px) {
 	#branding-logo {
 		display: none;
 	}
+	#session-info-container {
+		display: inline-flex;
+	}
 }
 
 @media (max-width: 550px) {
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 f3c22f80..58213d81 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
@@ -1,22 +1,29 @@
 <mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="40px">
-	<div fxFlex="20%" fxLayoutAlign="start center" id="info-container" *ngIf="screenSize !== 'xs'">
+	<div
+		fxFlex="20%"
+		fxLayoutAlign="start center"
+		id="info-container"
+		*ngIf="screenSize !== 'xs' || recordingStatus === _recordingStatus.STARTED || broadcastingStatus !== _broadcastingStatus.STARTED"
+	>
 		<div>
 			<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
-			<div id="session-info-container" [class.colapsed]="recordingStatus === _recordingStatus.STARTED">
+			<div
+				id="session-info-container"
+				[class.collapsed]="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED"
+			>
 				<span id="session-name" *ngIf="!isMinimal && session && session.sessionId && showSessionName">{{ session.sessionId }}</span>
 				<div id="activities-tag">
 					<div *ngIf="recordingStatus === _recordingStatus.STARTED" id="recording-tag" class="recording-tag">
 						<mat-icon class="blink">radio_button_checked</mat-icon>
 						<span class="blink">REC</span>
-						<span> | {{ recordingTime | date : 'H:mm:ss' }}</span>
+						<span *ngIf="recordingTime"> | {{ recordingTime | date : 'H:mm:ss' }}</span>
 					</div>
 					<div *ngIf="broadcastingStatus === _broadcastingStatus.STARTED" id="broadcasting-tag" class="broadcasting-tag">
 						<mat-icon class="blink">sensors</mat-icon>
 						<span class="blink">LIVE</span>
-						<span> | {{ broadcastingTime | date : 'H:mm:ss' }}</span>
+						<span *ngIf="broadcastingTime"> | {{ broadcastingTime | date : 'H:mm:ss' }}</span>
 					</div>
 				</div>
-
 			</div>
 		</div>
 	</div>
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 ea59f4d5..419023f2 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
@@ -695,21 +695,18 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	}
 
 	private subscribeToRecordingStatus() {
-		this.recordingSubscription = this.recordingService.recordingStatusObs
-			.pipe(skip(1))
-			.subscribe((ev: { info: RecordingInfo; time?: Date }) => {
-				this.recordingStatus = ev.info.status;
-				if (ev.time) {
-					this.recordingTime = ev.time;
-				}
-				this.cd.markForCheck();
-			});
+		this.recordingSubscription = this.recordingService.recordingStatusObs.subscribe((ev: { info: RecordingInfo; time?: Date }) => {
+			this.recordingStatus = ev.info.status;
+			if (ev.time) {
+				this.recordingTime = ev.time;
+			}
+			this.cd.markForCheck();
+		});
 	}
 
 	private subscribeToBroadcastingStatus() {
-		this.broadcastingSubscription = this.broadcastingService.broadcastingStatusObs
-			.pipe(skip(1))
-			.subscribe((ev: { status: BroadcastingStatus, time?: Date } | undefined) => {
+		this.broadcastingSubscription = this.broadcastingService.broadcastingStatusObs.subscribe(
+			(ev: { status: BroadcastingStatus; time?: Date } | undefined) => {
 				if (!!ev) {
 					this.broadcastingStatus = ev.status;
 					if (ev.time) {
@@ -717,7 +714,8 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 					}
 					this.cd.markForCheck();
 				}
-			});
+			}
+		);
 	}
 
 	private subscribeToToolbarDirectives() {