openvidu-components: Updated background effects panel

pull/722/head
csantosm 2022-04-28 13:01:34 +02:00
parent a209e57fd5
commit 8382aaf179
10 changed files with 86 additions and 76 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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';

View File

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

View File

@ -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';