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"> <mat-toolbar id="toolbar" class="toolbar-container">
<!-- Info container (logo, room name, recording/broadcasting status) -->
<div id="info-container" class="info-container"> <div id="info-container" class="info-container">
<div> <div>
<img *ngIf="!isMinimal && showLogo" id="branding-logo" [ovLogo]="brandingLogo" /> <!-- Branding Logo -->
<div @if (!isMinimal && showLogo) {
id="session-info-container" <img id="branding-logo" [ovLogo]="brandingLogo" />
[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>
}
@if (broadcastingStatus === _broadcastingStatus.STARTED) { <!-- Session Info -->
<!-- Broadcasting tag --> <div id="session-info-container" [class.collapsed]="isRecordingStarted || isBroadcastingStarted">
<div id="broadcasting-tag" class="broadcasting-tag"> <!-- Room Name -->
<mat-icon class="blink">sensors</mat-icon> @if (!isMinimal && showRoomName) {
<span class="blink">LIVE</span> <span id="session-name">{{ roomName }}</span>
</div> }
}
</div> <!-- 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> </div>
</div> </div>
<!-- Media and menu buttons container -->
<div class="media-buttons-container" id="media-buttons-container"> <div class="media-buttons-container" id="media-buttons-container">
<!-- Camera button --> <!-- Camera button -->
<button <button
@ -229,6 +238,8 @@
<mat-icon>call_end</mat-icon> <mat-icon>call_end</mat-icon>
</button> </button>
</div> </div>
<!-- Panel buttons (chat, participants, activities) -->
<div class="menu-buttons-container" id="menu-buttons-container"> <div class="menu-buttons-container" id="menu-buttons-container">
<!-- Default activities button --> <!-- Default activities button -->
<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'); 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 * @ignore
*/ */