ov-components: Updated logo directive

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

@@ -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"

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

@@ -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();

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts

@@ -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,

openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/directive-config.service.ts

@@ -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();
 	}