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; display: flex;
} }
.colapsed { .collapsed {
flex-direction: column; flex-direction: column;
} }
@ -157,12 +157,20 @@
#session-name { #session-name {
display: none; display: none;
} }
#activities-tag {
display: grid;
gap: 5px;
}
} }
@media (max-width: 850px) { @media (max-width: 850px) {
#branding-logo { #branding-logo {
display: none; display: none;
} }
#session-info-container {
display: inline-flex;
}
} }
@media (max-width: 550px) { @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"> <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> <div>
<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo /> <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> <span id="session-name" *ngIf="!isMinimal && session && session.sessionId && showSessionName">{{ session.sessionId }}</span>
<div id="activities-tag"> <div id="activities-tag">
<div *ngIf="recordingStatus === _recordingStatus.STARTED" id="recording-tag" class="recording-tag"> <div *ngIf="recordingStatus === _recordingStatus.STARTED" id="recording-tag" class="recording-tag">
<mat-icon class="blink">radio_button_checked</mat-icon> <mat-icon class="blink">radio_button_checked</mat-icon>
<span class="blink">REC</span> <span class="blink">REC</span>
<span> | {{ recordingTime | date : 'H:mm:ss' }}</span> <span *ngIf="recordingTime"> | {{ recordingTime | date : 'H:mm:ss' }}</span>
</div> </div>
<div *ngIf="broadcastingStatus === _broadcastingStatus.STARTED" id="broadcasting-tag" class="broadcasting-tag"> <div *ngIf="broadcastingStatus === _broadcastingStatus.STARTED" id="broadcasting-tag" class="broadcasting-tag">
<mat-icon class="blink">sensors</mat-icon> <mat-icon class="blink">sensors</mat-icon>
<span class="blink">LIVE</span> <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> </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() { private subscribeToRecordingStatus() {
this.recordingSubscription = this.recordingService.recordingStatusObs this.recordingSubscription = this.recordingService.recordingStatusObs.subscribe((ev: { info: RecordingInfo; time?: Date }) => {
.pipe(skip(1)) this.recordingStatus = ev.info.status;
.subscribe((ev: { info: RecordingInfo; time?: Date }) => { if (ev.time) {
this.recordingStatus = ev.info.status; this.recordingTime = ev.time;
if (ev.time) { }
this.recordingTime = ev.time; this.cd.markForCheck();
} });
this.cd.markForCheck();
});
} }
private subscribeToBroadcastingStatus() { private subscribeToBroadcastingStatus() {
this.broadcastingSubscription = this.broadcastingService.broadcastingStatusObs this.broadcastingSubscription = this.broadcastingService.broadcastingStatusObs.subscribe(
.pipe(skip(1)) (ev: { status: BroadcastingStatus; time?: Date } | undefined) => {
.subscribe((ev: { status: BroadcastingStatus, time?: Date } | undefined) => {
if (!!ev) { if (!!ev) {
this.broadcastingStatus = ev.status; this.broadcastingStatus = ev.status;
if (ev.time) { if (ev.time) {
@ -717,7 +714,8 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
} }
this.cd.markForCheck(); this.cd.markForCheck();
} }
}); }
);
} }
private subscribeToToolbarDirectives() { private subscribeToToolbarDirectives() {