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

ov-components: refactor toolbar component to improve readability and add helper methods for recording and broadcasting status

master
Carlos Santos 2025-09-16 17:06:14 +02:00
parent 8f48e9f70c
commit 0a49ca91d8
2 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,35 +1,44 @@
<mat-toolbar id="toolbar" class="toolbar-container">
<!-- Info container (logo, room name, recording/broadcasting status) -->
<div id="info-container" class="info-container">
<div>
<img *ngIf="!isMinimal && showLogo" id="branding-logo" [ovLogo]="brandingLogo" />
<div
id="session-info-container"
[class.collapsed]="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED"
>
<span id="session-name" *ngIf="!isMinimal && showRoomName">{{ roomName }}</span>
<div
id="activities-tag"
*ngIf="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED"
>
@if (recordingStatus === _recordingStatus.STARTED) {
<div id="recording-tag" class="recording-tag" (click)="openRecordingActivityPanel()">
<mat-icon class="blink">radio_button_checked</mat-icon>
<span class="blink">REC</span>
<span *ngIf="recordingTime"> | {{ recordingTime | date: 'H:mm:ss' }}</span>
</div>
}
<!-- Branding Logo -->
@if (!isMinimal && showLogo) {
<img id="branding-logo" [ovLogo]="brandingLogo" />
}
@if (broadcastingStatus === _broadcastingStatus.STARTED) {
<!-- Broadcasting tag -->
<div id="broadcasting-tag" class="broadcasting-tag">
<mat-icon class="blink">sensors</mat-icon>
<span class="blink">LIVE</span>
</div>
}
</div>
<!-- Session Info -->
<div id="session-info-container" [class.collapsed]="isRecordingStarted || isBroadcastingStarted">
<!-- Room Name -->
@if (!isMinimal && showRoomName) {
<span id="session-name">{{ roomName }}</span>
}
<!-- Activities (Recording / Broadcasting) -->
@if (isRecordingStarted || isBroadcastingStarted) {
<div id="activities-tag">
@if (isRecordingStarted) {
<div id="recording-tag" class="recording-tag" (click)="openRecordingActivityPanel()">
<mat-icon class="blink">radio_button_checked</mat-icon>
<span class="blink">REC</span>
<span *ngIf="recordingTime"> | {{ recordingTime | date: 'H:mm:ss' }}</span>
</div>
}
@if (isBroadcastingStarted) {
<!-- Broadcasting tag -->
<div id="broadcasting-tag" class="broadcasting-tag">
<mat-icon class="blink">sensors</mat-icon>
<span class="blink">LIVE</span>
</div>
}
</div>
}
</div>
</div>
</div>
<!-- Media and menu buttons container -->
<div class="media-buttons-container" id="media-buttons-container">
<!-- Camera button -->
<button
@ -229,6 +238,8 @@
<mat-icon>call_end</mat-icon>
</button>
</div>
<!-- Panel buttons (chat, participants, activities) -->
<div class="menu-buttons-container" id="menu-buttons-container">
<!-- Default activities button -->
<button

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

@ -398,6 +398,20 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
) {
this.log = this.loggerSrv.get('ToolbarComponent');
}
/**
* @ignore
*/
get isRecordingStarted(): boolean {
return this.recordingStatus === this._recordingStatus.STARTED;
}
/**
* @ignore
*/
get isBroadcastingStarted(): boolean {
return this.broadcastingStatus === this._broadcastingStatus.STARTED;
}
/**
* @ignore
*/