openvidu-components: Updated background effects panel

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css

@@ -34,14 +34,30 @@
 	margin: 5px;
 	border-radius: var(--ov-panel-radius);
 	background-color: var(--ov-light-color);
-	width: 50px;
-	height: 50px;
+	width: 60px;
+	height: 60px;
+}
+
+.effect-button:hover {
+	cursor: pointer;
 }
 
 .active-effect-btn {
-	border: 2px solid;
+	border: 2px solid var(--ov-tertiary-color);
 }
 
 #hard-blur-btn .mat-icon {
 	font-weight: bold !important;
+}
+
+.grid {
+	display: grid;
+    grid-template-columns: repeat(auto-fit, 70px);
+}
+
+.grid img {
+	max-width: 100%;
+	max-height: 100%;
+	border-radius: var(--ov-panel-radius);
+
 }

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html

@@ -8,38 +8,42 @@
 
 	<div class="effects-container" fxFlex="100%" fxLayoutAlign="space-evenly none">
 		<div>
-			<h4>Blurred background</h4>
+			<h4>No effects and blurred background</h4>
 			<div>
 				<button
+					*ngFor="let effect of noEffectAndBlurredBackground"
 					mat-icon-button
 					class="effect-button"
-					[class.active-effect-btn]="effectActive === 'no_effect'"
-					(click)="effectActive = 'no_effect'"
+					[class.active-effect-btn]="backgroundSelectedId === effect.id"
+					(click)="applyBackground(effect)"
 				>
-					<mat-icon matTooltip="No background effect">block</mat-icon>
+					<mat-icon [matTooltip]="effect.description">{{effect.thumbnail}}</mat-icon>
 				</button>
-				<button
-					mat-icon-button
-					class="effect-button"
-					[class.active-effect-btn]="effectActive === 'soft_blur'"
-					(click)="effectActive = 'soft_blur'"
-				>
-					<mat-icon matTooltip="Soft blur effect">blur_on</mat-icon>
-				</button>
-				<button
+				<!-- <button
 					mat-icon-button
 					class="effect-button"
 					id="hard-blur-btn"
-					[class.active-effect-btn]="effectActive === 'hard_blur'"
-					(click)="effectActive = 'hard_blur'"
+					[class.active-effect-btn]="backgroundSelectedId === 'hard_blur'"
+					(click)="applyBackground('hard_blur')"
 				>
 					<mat-icon matTooltip="Hard blur effect">blur_on</mat-icon>
-				</button>
+				</button> -->
 			</div>
 		</div>
 		<hr />
 		<div>
 			<h4>Background images</h4>
+
+			<div class="grid">
+				<div
+					*ngFor="let effect of backgroundImages"
+					class="effect-button"
+					[class.active-effect-btn]="backgroundSelectedId === effect.id"
+					(click)="applyBackground(effect)"
+				>
+					<img [src]="effect.thumbnail" />
+				</div>
+			</div>
 		</div>
 	</div>
 </div>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts

@@ -1,24 +1,55 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { BackgroundEffect, EffectType } from '../../../models/background-effect.model';
 import { PanelType } from '../../../models/panel.model';
 import { PanelService } from '../../../services/panel/panel.service';
+import { VirtualBackgroundService } from '../../../services/virtual-background/virtual-background.service';
 
 @Component({
-  selector: 'ov-background-effects-panel',
-  templateUrl: './background-effects-panel.component.html',
-  styleUrls: ['./background-effects-panel.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+	selector: 'ov-background-effects-panel',
+	templateUrl: './background-effects-panel.component.html',
+	styleUrls: ['./background-effects-panel.component.css'],
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BackgroundEffectsPanelComponent implements OnInit {
 
-  effectActive: string;
+  backgroundSelectedId: string;
+	backgroundImages: BackgroundEffect[] = [];
+  noEffectAndBlurredBackground: BackgroundEffect[] = [];
+  private backgrounds: BackgroundEffect[];
+  private backgroundSubs: Subscription;
 
-  constructor(private panelService: PanelService) { }
+	constructor(private panelService: PanelService, private backgroundService: VirtualBackgroundService) {}
 
-  ngOnInit(): void {
+	ngOnInit(): void {
+    this.subscribeToBackgroundSelected();
+    this.backgrounds = this.backgroundService.getBackgrounds();
+    this.noEffectAndBlurredBackground = this.backgrounds.filter(f => f.type === EffectType.BLUR || f.type === EffectType.NONE);
+    this.backgroundImages = this.backgrounds.filter(f => f.type === EffectType.IMAGE);
   }
 
-  close() {
+  ngOnDestroy() {
+    if(this.backgroundSubs) this.backgroundSubs.unsubscribe();
+  }
+  subscribeToBackgroundSelected() {
+    this.backgroundSubs = this.backgroundService.backgroundSelectedObs.subscribe((id) => this.backgroundSelectedId = id);
+  }
+
+	close() {
 		this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS);
 	}
 
+  async applyBackground(effect: BackgroundEffect) {
+
+    if(effect.type === EffectType.NONE){
+      await this.removeBackground();
+    } else {
+      await this.backgroundService.applyBackground(effect);
+    }
+
+  }
+
+  async removeBackground() {
+    await this.backgroundService.removeBackground();
+  }
 }

openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css

@@ -32,6 +32,10 @@ hr {
 	width: 320px;
 }
 
+#prejoin-container ::ng-deep .layout {
+	min-width: 0px !important;
+}
+
 #background-effects-btn {
 	position: absolute;
     z-index: 1;

openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts

@@ -165,6 +165,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 
 	joinSession() {
 		this.onJoinButtonClicked.emit();
+		this.panelService.closePanel();
 	}
 
 	toggleBackgroundEffects() {

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

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { LogoDirective } from './internals.directive';
 import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
 import {
 	StreamDisplayParticipantNameDirective,
@@ -13,7 +14,6 @@ import {
 	ToolbarChatPanelButtonDirective,
 	ToolbarDisplaySessionNameDirective,
 	ToolbarDisplayLogoDirective,
-	LogoDirective,
 	ToolbarActivitiesPanelButtonDirective,
 	ToolbarBackgroundEffectsButtonDirective
 } from './toolbar.directive';

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

@@ -268,9 +268,8 @@ export class OpenViduService {
 		} else if (this.participantService.isOnlyMyScreenActive()) {
 			// Enabling webcam
 			const hasAudio = this.participantService.hasScreenAudioActive();
-			console.warn('Es audio activo?', hasAudio);
 			if (!this.isWebcamSessionConnected()) {
-				//TODO: should be the token in th participant?
+				//TODO: should be the token in the participant?
 				await this.connectSession(this.getWebcamSession(), this.tokenService.getWebcamToken());
 			}
 			await this.publish(this.participantService.getMyCameraPublisher());

openvidu-components-angular/projects/openvidu-angular/src/public-api.ts

@@ -53,7 +53,7 @@ export * from './lib/pipes/participant.pipe';
 // Directives
 export * from './lib/directives/api/api.directive.module';
 export * from './lib/directives/template/openvidu-angular.directive.module';
-
+export * from './lib/directives/api/internals.directive';
 export * from './lib/directives/template/openvidu-angular.directive';
 export * from './lib/directives/api/toolbar.directive';
 export * from './lib/directives/api/stream.directive';