mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Updated background effects panel
parent
a209e57fd5
commit
8382aaf179
|
@ -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);
|
||||
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -32,6 +32,10 @@ hr {
|
|||
width: 320px;
|
||||
}
|
||||
|
||||
#prejoin-container ::ng-deep .layout {
|
||||
min-width: 0px !important;
|
||||
}
|
||||
|
||||
#background-effects-btn {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
|
@ -165,6 +165,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
|
|||
|
||||
joinSession() {
|
||||
this.onJoinButtonClicked.emit();
|
||||
this.panelService.closePanel();
|
||||
}
|
||||
|
||||
toggleBackgroundEffects() {
|
||||
|
|
|
@ -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';
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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());
|
||||
|
|
|
@ -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';
|
||||
|
|
Loading…
Reference in New Issue