ov-components: Updated logo directive

pull/851/merge
Carlos Santos 2025-01-28 21:37:53 +01:00
parent 4cdb761737
commit 6e1d9c7ee7
5 changed files with 99 additions and 10 deletions

View File

@ -4,7 +4,7 @@
<mat-toolbar id="toolbar" class="toolbar-container">
<div id="info-container" class="info-container">
<div>
<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
<img *ngIf="!isMinimal && showLogo" id="branding-logo" [ovLogo]="brandingLogo" />
<div
id="session-info-container"
[class.collapsed]="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED"

View File

@ -258,6 +258,11 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
* @ignore
*/
showLogo: boolean = true;
/**
* @ignore
*/
brandingLogo: string = '';
/**
* @ignore
*/
@ -337,6 +342,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
private participantsPanelButtonSub: Subscription;
private chatPanelButtonSub: Subscription;
private displayLogoSub: Subscription;
private brandingLogoSub: Subscription;
private displayRoomNameSub: Subscription;
private settingsButtonSub: Subscription;
private captionsSubs: Subscription;
@ -429,6 +435,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
if (this.participantsPanelButtonSub) this.participantsPanelButtonSub.unsubscribe();
if (this.chatPanelButtonSub) this.chatPanelButtonSub.unsubscribe();
if (this.displayLogoSub) this.displayLogoSub.unsubscribe();
if (this.brandingLogoSub) this.brandingLogoSub.unsubscribe();
if (this.displayRoomNameSub) this.displayRoomNameSub.unsubscribe();
if (this.minimalSub) this.minimalSub.unsubscribe();
if (this.activitiesPanelButtonSub) this.activitiesPanelButtonSub.unsubscribe();
@ -695,6 +702,10 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.isMinimal = value;
this.cd.markForCheck();
});
this.brandingLogoSub = this.libService.brandingLogo$.subscribe((value: string) => {
this.brandingLogo = value;
this.cd.markForCheck();
});
this.screenshareButtonSub = this.libService.screenshareButton$.subscribe((value: boolean) => {
this.showScreenshareButton = value && !this.platformService.isMobile();
this.cd.markForCheck();
@ -747,6 +758,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.showLogo = value;
this.cd.markForCheck();
});
this.displayRoomNameSub = this.libService.displayRoomName$.subscribe((value: boolean) => {
this.showSessionName = value;
this.cd.markForCheck();

View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { ActivitiesPanelBroadcastingActivityDirective, ActivitiesPanelRecordingActivityDirective } from './activities-panel.directive';
import { AdminLoginErrorDirective, AdminDashboardRecordingsListDirective, AdminLoginTitleDirective, AdminDashboardTitleDirective } from './admin.directive';
import { LayoutRemoteParticipantsDirective, LogoDirective } from './internals.directive';
import { LayoutRemoteParticipantsDirective, FallbackLogoDirective, ToolbarBrandingLogoDirective } from './internals.directive';
import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
import {
StreamDisplayAudioDetectionDirective,
@ -70,7 +70,8 @@ import {
StreamDisplayParticipantNameDirective,
StreamDisplayAudioDetectionDirective,
StreamVideoControlsDirective,
LogoDirective,
FallbackLogoDirective,
ToolbarBrandingLogoDirective,
ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective,
ActivitiesPanelRecordingActivityDirective,
@ -110,7 +111,8 @@ import {
StreamDisplayParticipantNameDirective,
StreamDisplayAudioDetectionDirective,
StreamVideoControlsDirective,
LogoDirective,
FallbackLogoDirective,
ToolbarBrandingLogoDirective,
ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective,
ActivitiesPanelRecordingActivityDirective,

View File

@ -57,6 +57,9 @@ export class OpenViduComponentsConfigService {
private displayRoomName = <BehaviorSubject<boolean>>new BehaviorSubject(true);
displayRoomName$: Observable<boolean>;
private brandingLogo = <BehaviorSubject<string>>new BehaviorSubject('');
brandingLogo$: Observable<string>;
private displayLogo = <BehaviorSubject<boolean>>new BehaviorSubject(true);
displayLogo$: Observable<boolean>;
@ -117,6 +120,7 @@ export class OpenViduComponentsConfigService {
this.activitiesPanelButton$ = this.activitiesPanelButton.asObservable();
this.displayRoomName$ = this.displayRoomName.asObservable();
this.displayLogo$ = this.displayLogo.asObservable();
this.brandingLogo$ = this.brandingLogo.asObservable();
this.recordingButton$ = this.recordingButton.asObservable();
this.broadcastingButton$ = this.broadcastingButton.asObservable();
this.toolbarSettingsButton$ = this.toolbarSettingsButton.asObservable();
@ -262,6 +266,10 @@ export class OpenViduComponentsConfigService {
this.displayRoomName.next(displayRoomName);
}
setBrandingLogo(brandingLogo: string) {
this.brandingLogo.next(brandingLogo);
}
showRoomName(): boolean {
return this.displayRoomName.getValue();
}