ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Improved backgrounds component

pull/722/head
csantosm 2022-04-29 11:41:43 +02:00
parent b52f8922cb
commit bad018a10e
2 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,12 +52,39 @@
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, 70px); grid-template-columns: repeat(auto-fit, 70px);
} }
.grid img { .grid img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-panel-radius);
}
::ng-deep .mat-slider-thumb {
visibility: hidden;
}
::ng-deep .mat-slider-vertical .mat-slider-track-fill,
::ng-deep .mat-slider-vertical .mat-slider-track-background,
::ng-deep .mat-slider-vertical .mat-slider-track-wrapper {
width: 10px !important;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: #a7a7a7;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7c7c7c;
}
::-webkit-scrollbar-track {
background: var(--ov-light-color);
border-radius: 4px;
} }

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

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { BackgroundEffect, EffectType } from '../../../models/background-effect.model'; import { BackgroundEffect, EffectType } from '../../../models/background-effect.model';
import { PanelType } from '../../../models/panel.model'; import { PanelType } from '../../../models/panel.model';
@ -19,7 +19,7 @@ export class BackgroundEffectsPanelComponent implements OnInit {
private backgrounds: BackgroundEffect[]; private backgrounds: BackgroundEffect[];
private backgroundSubs: Subscription; private backgroundSubs: Subscription;
constructor(private panelService: PanelService, private backgroundService: VirtualBackgroundService) {} constructor(private panelService: PanelService, private backgroundService: VirtualBackgroundService, private cd: ChangeDetectorRef) {}
ngOnInit(): void { ngOnInit(): void {
this.subscribeToBackgroundSelected(); this.subscribeToBackgroundSelected();
@ -32,7 +32,10 @@ export class BackgroundEffectsPanelComponent implements OnInit {
if(this.backgroundSubs) this.backgroundSubs.unsubscribe(); if(this.backgroundSubs) this.backgroundSubs.unsubscribe();
} }
subscribeToBackgroundSelected() { subscribeToBackgroundSelected() {
this.backgroundSubs = this.backgroundService.backgroundSelectedObs.subscribe((id) => this.backgroundSelectedId = id); this.backgroundSubs = this.backgroundService.backgroundSelectedObs.subscribe((id) => {
this.backgroundSelectedId = id;
this.cd.markForCheck();
});
} }
close() { close() {