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

openvidu-components: Made responsive toolbar activities tags

pull/780/head
Carlos Santos 2023-02-22 13:07:08 +01:00
parent 98d7c4415f
commit e45aec750e
3 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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