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

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

@ -1,17 +1,23 @@
<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> <!-- Session Info -->
<div <div id="session-info-container" [class.collapsed]="isRecordingStarted || isBroadcastingStarted">
id="activities-tag" <!-- Room Name -->
*ngIf="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED" @if (!isMinimal && showRoomName) {
> <span id="session-name">{{ roomName }}</span>
@if (recordingStatus === _recordingStatus.STARTED) { }
<!-- Activities (Recording / Broadcasting) -->
@if (isRecordingStarted || isBroadcastingStarted) {
<div id="activities-tag">
@if (isRecordingStarted) {
<div id="recording-tag" class="recording-tag" (click)="openRecordingActivityPanel()"> <div id="recording-tag" class="recording-tag" (click)="openRecordingActivityPanel()">
<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>
@ -19,7 +25,7 @@
</div> </div>
} }
@if (broadcastingStatus === _broadcastingStatus.STARTED) { @if (isBroadcastingStarted) {
<!-- Broadcasting tag --> <!-- Broadcasting tag -->
<div id="broadcasting-tag" class="broadcasting-tag"> <div id="broadcasting-tag" class="broadcasting-tag">
<mat-icon class="blink">sensors</mat-icon> <mat-icon class="blink">sensors</mat-icon>
@ -27,9 +33,12 @@
</div> </div>
} }
</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
*/ */