From 04eedc7c372d4a5f69af227ecfa69c3172439c86 Mon Sep 17 00:00:00 2001 From: Sean Date: Tue, 2 Feb 2021 15:14:47 +0100 Subject: [PATCH] Cleanup some applause code Cleans some applause code --- .../app/core/ui-services/applause.service.ts | 9 +- .../applause-bar-display.component.html} | 0 .../applause-bar-display.component.scss} | 0 .../applause-bar-display.component.spec.ts} | 8 +- .../applause-bar-display.component.ts} | 8 +- .../applause-particle-display.component.html | 3 + .../applause-particle-display.component.scss} | 0 ...plause-particle-display.component.spec.ts} | 10 +- .../applause-particle-display.component.ts | 109 ++++++++ .../particle-options.ts | 122 +++++++++ .../components/jitsi/jitsi.component.html | 6 +- .../particle-display.component.html | 3 - .../particle-display.component.ts | 233 ------------------ .../vjs-player/vjs-player.component.html | 2 +- .../shared/directives/resized.directive.ts | 1 - client/src/app/shared/shared.module.ts | 8 +- 16 files changed, 260 insertions(+), 262 deletions(-) rename client/src/app/shared/components/{applause-display/applause-display.component.html => applause-bar-display/applause-bar-display.component.html} (100%) rename client/src/app/shared/components/{applause-display/applause-display.component.scss => applause-bar-display/applause-bar-display.component.scss} (100%) rename client/src/app/shared/components/{applause-display/applause-display.component.spec.ts => applause-bar-display/applause-bar-display.component.spec.ts} (66%) rename client/src/app/shared/components/{applause-display/applause-display.component.ts => applause-bar-display/applause-bar-display.component.ts} (88%) create mode 100644 client/src/app/shared/components/applause-particle-display/applause-particle-display.component.html rename client/src/app/shared/components/{particle-display/particle-display.component.scss => applause-particle-display/applause-particle-display.component.scss} (100%) rename client/src/app/shared/components/{particle-display/particle-display.component.spec.ts => applause-particle-display/applause-particle-display.component.spec.ts} (58%) create mode 100644 client/src/app/shared/components/applause-particle-display/applause-particle-display.component.ts create mode 100644 client/src/app/shared/components/applause-particle-display/particle-options.ts delete mode 100644 client/src/app/shared/components/particle-display/particle-display.component.html delete mode 100644 client/src/app/shared/components/particle-display/particle-display.component.ts diff --git a/client/src/app/core/ui-services/applause.service.ts b/client/src/app/core/ui-services/applause.service.ts index 15c1811e3..ebf3a0b03 100644 --- a/client/src/app/core/ui-services/applause.service.ts +++ b/client/src/app/core/ui-services/applause.service.ts @@ -17,12 +17,13 @@ export enum ApplauseType { bar = 'applause-type-bar' } +const applausePath = '/system/applause'; +const applauseNotifyMessageName = 'applause'; + @Injectable({ providedIn: 'root' }) export class ApplauseService { - private applausePath = '/system/applause'; - private applauseNotifyPath = 'applause'; private minApplauseLevel: number; private maxApplauseLevel: number; private presentApplauseUsers: number; @@ -51,7 +52,7 @@ export class ApplauseService { this.applauseType = type; }); this.notifyService - .getMessageObservable(this.applauseNotifyPath) + .getMessageObservable(applauseNotifyMessageName) .pipe( map(notify => notify.message as Applause), /** @@ -71,7 +72,7 @@ export class ApplauseService { } public async sendApplause(): Promise { - await this.httpService.post(this.applausePath); + await this.httpService.post(applausePath); } public getApplauseQuote(applauseLevel: number): number { diff --git a/client/src/app/shared/components/applause-display/applause-display.component.html b/client/src/app/shared/components/applause-bar-display/applause-bar-display.component.html similarity index 100% rename from client/src/app/shared/components/applause-display/applause-display.component.html rename to client/src/app/shared/components/applause-bar-display/applause-bar-display.component.html diff --git a/client/src/app/shared/components/applause-display/applause-display.component.scss b/client/src/app/shared/components/applause-bar-display/applause-bar-display.component.scss similarity index 100% rename from client/src/app/shared/components/applause-display/applause-display.component.scss rename to client/src/app/shared/components/applause-bar-display/applause-bar-display.component.scss diff --git a/client/src/app/shared/components/applause-display/applause-display.component.spec.ts b/client/src/app/shared/components/applause-bar-display/applause-bar-display.component.spec.ts similarity index 66% rename from client/src/app/shared/components/applause-display/applause-display.component.spec.ts rename to client/src/app/shared/components/applause-bar-display/applause-bar-display.component.spec.ts index ac9f07ec5..1584add12 100644 --- a/client/src/app/shared/components/applause-display/applause-display.component.spec.ts +++ b/client/src/app/shared/components/applause-bar-display/applause-bar-display.component.spec.ts @@ -2,11 +2,11 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { E2EImportsModule } from 'e2e-imports.module'; -import { ApplauseDisplayComponent } from './applause-display.component'; +import { ApplauseBarDisplayComponent } from './applause-bar-display.component'; describe('ApplauseDisplayComponent', () => { - let component: ApplauseDisplayComponent; - let fixture: ComponentFixture; + let component: ApplauseBarDisplayComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -15,7 +15,7 @@ describe('ApplauseDisplayComponent', () => { })); beforeEach(() => { - fixture = TestBed.createComponent(ApplauseDisplayComponent); + fixture = TestBed.createComponent(ApplauseBarDisplayComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/client/src/app/shared/components/applause-display/applause-display.component.ts b/client/src/app/shared/components/applause-bar-display/applause-bar-display.component.ts similarity index 88% rename from client/src/app/shared/components/applause-display/applause-display.component.ts rename to client/src/app/shared/components/applause-bar-display/applause-bar-display.component.ts index 71700c389..5e59e66de 100644 --- a/client/src/app/shared/components/applause-display/applause-display.component.ts +++ b/client/src/app/shared/components/applause-bar-display/applause-bar-display.component.ts @@ -10,14 +10,14 @@ import { fadeAnimation } from 'app/shared/animations'; import { BaseViewComponentDirective } from 'app/site/base/base-view'; @Component({ - selector: 'os-applause-display', - templateUrl: './applause-display.component.html', - styleUrls: ['./applause-display.component.scss'], + selector: 'os-applause-bar-display', + templateUrl: './applause-bar-display.component.html', + styleUrls: ['./applause-bar-display.component.scss'], animations: [fadeAnimation], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None }) -export class ApplauseDisplayComponent extends BaseViewComponentDirective { +export class ApplauseBarDisplayComponent extends BaseViewComponentDirective { public level = 0; public showLevel: boolean; public percent = 0; diff --git a/client/src/app/shared/components/applause-particle-display/applause-particle-display.component.html b/client/src/app/shared/components/applause-particle-display/applause-particle-display.component.html new file mode 100644 index 000000000..7d53fad9c --- /dev/null +++ b/client/src/app/shared/components/applause-particle-display/applause-particle-display.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/client/src/app/shared/components/particle-display/particle-display.component.scss b/client/src/app/shared/components/applause-particle-display/applause-particle-display.component.scss similarity index 100% rename from client/src/app/shared/components/particle-display/particle-display.component.scss rename to client/src/app/shared/components/applause-particle-display/applause-particle-display.component.scss diff --git a/client/src/app/shared/components/particle-display/particle-display.component.spec.ts b/client/src/app/shared/components/applause-particle-display/applause-particle-display.component.spec.ts similarity index 58% rename from client/src/app/shared/components/particle-display/particle-display.component.spec.ts rename to client/src/app/shared/components/applause-particle-display/applause-particle-display.component.spec.ts index 2db6a56a1..06732fa99 100644 --- a/client/src/app/shared/components/particle-display/particle-display.component.spec.ts +++ b/client/src/app/shared/components/applause-particle-display/applause-particle-display.component.spec.ts @@ -2,11 +2,11 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { E2EImportsModule } from 'e2e-imports.module'; -import { ParticleDisplayComponent } from './particle-display.component'; +import { ApplauseParticleDisplayComponent } from './applause-particle-display.component'; -describe('ParticleDisplayComponent', () => { - let component: ParticleDisplayComponent; - let fixture: ComponentFixture; +describe('ApplauseParticleDisplayComponent', () => { + let component: ApplauseParticleDisplayComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -15,7 +15,7 @@ describe('ParticleDisplayComponent', () => { })); beforeEach(() => { - fixture = TestBed.createComponent(ParticleDisplayComponent); + fixture = TestBed.createComponent(ApplauseParticleDisplayComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/client/src/app/shared/components/applause-particle-display/applause-particle-display.component.ts b/client/src/app/shared/components/applause-particle-display/applause-particle-display.component.ts new file mode 100644 index 000000000..4eb45a726 --- /dev/null +++ b/client/src/app/shared/components/applause-particle-display/applause-particle-display.component.ts @@ -0,0 +1,109 @@ +import { Component, ViewEncapsulation } from '@angular/core'; +import { MatSnackBar } from '@angular/material/snack-bar'; +import { Title } from '@angular/platform-browser'; + +import { TranslateService } from '@ngx-translate/core'; +import { Subject } from 'rxjs'; +import { auditTime } from 'rxjs/operators'; +import { Container } from 'tsparticles'; +import { Emitters } from 'tsparticles/dist/Plugins/Emitters/Emitters'; + +import { ApplauseService } from 'app/core/ui-services/applause.service'; +import { ConfigService } from 'app/core/ui-services/config.service'; +import { ElementSize } from 'app/shared/directives/resized.directive'; +import { BaseViewComponentDirective } from 'app/site/base/base-view'; +import { particleConfig, particleOptions } from './particle-options'; + +@Component({ + selector: 'os-applause-particle-display', + templateUrl: './applause-particle-display.component.html', + styleUrls: ['./applause-particle-display.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class ApplauseParticleDisplayComponent extends BaseViewComponentDirective { + public options = particleOptions; + public resizeSubject = new Subject(); + private resizeAuditTime = 200; + private particleContainer: Container; + + public set particleImage(imageUrl: string) { + this.setParticleImage(imageUrl); + } + + public set particleLevel(level: number) { + this.setParticleLevel(level); + } + + public constructor( + title: Title, + translate: TranslateService, + matSnackBar: MatSnackBar, + configService: ConfigService, + private applauseService: ApplauseService + ) { + super(title, translate, matSnackBar); + this.subscriptions.push( + this.resizeSubject.pipe(auditTime(this.resizeAuditTime)).subscribe(size => { + this.updateParticleContainer(size); + }), + applauseService.applauseLevelObservable.subscribe(applauseLevel => { + this.particleLevel = this.calcEmitterLevel(applauseLevel || 0); + }), + configService.get('general_system_applause_particle_image').subscribe(particleImage => { + this.particleImage = particleImage || undefined; + }) + ); + } + + private setParticleImage(particleImage: string): void { + if (particleImage) { + particleConfig.customImageShape.image.src = particleImage; + (this.options.particles.shape as any) = particleConfig.customImageShape; + } else { + (this.options.particles.shape as any) = particleConfig.charShapeHearth; + } + if (this.particleContainer) { + this.particleContainer.options.particles.load(this.options.particles as any); + this.refresh(); + } + } + + private calcEmitterLevel(applauseLevel: number): number { + if (!applauseLevel) { + return 0; + } + let emitterLevel = this.applauseService.getApplauseQuote(applauseLevel); + emitterLevel = Math.ceil(emitterLevel * 10); + return emitterLevel; + } + + private setParticleLevel(level: number): void { + if (this.particleContainer) { + const emitters = this.particleContainer.plugins.get('emitters') as Emitters; + if (emitters) { + emitters.array[0].emitterOptions.rate.quantity = level; + } + } + } + + private updateParticleContainer(size: ElementSize): void { + if (!size.height || !size.width) { + this.stop(); + } else { + this.refresh(); + } + } + + private stop(): void { + this.particleContainer?.stop(); + } + + private refresh(): void { + this.particleContainer?.refresh(); + } + + public particlesLoaded(container: Container): void { + this.particleContainer = container; + this.refresh(); + } +} diff --git a/client/src/app/shared/components/applause-particle-display/particle-options.ts b/client/src/app/shared/components/applause-particle-display/particle-options.ts new file mode 100644 index 000000000..5999ac478 --- /dev/null +++ b/client/src/app/shared/components/applause-particle-display/particle-options.ts @@ -0,0 +1,122 @@ +import { SizeMode } from 'tsparticles'; + +export const particleConfig = { + noAutomaticParticles: { + value: 0 + }, + slowBlinkingOpacity: { + value: 0.8, + animation: { + enable: true, + speed: 1, + sync: false, + minimumValue: 0.3 + }, + random: { + enable: true, + minimumValue: 0.8 + } + }, + customImageShape: { + type: 'image', + image: { + replace_color: false, + replaceColor: false, + src: '', + width: 24, + height: 24 + } + }, + charShapeHearth: { + type: 'char', + options: { + char: { + fill: true, + value: ['❤'], + /** + * has to be here due to a bug + * TRACK: https://github.com/matteobruni/tsparticles/issues/1087 + * --- + */ + font: 'Verdana', + weight: '200', + style: '' + /** --- */ + } + } + }, + slightlyRandomSize: { + value: 16, + random: { + enable: true, + minimumValue: 10 + } + }, + moveUpOptions: { + enable: true, + direction: 'top', + speed: 1.0, + angle: { + offset: 45, + value: 90 + }, + gravity: { + enable: true, + maxSpeed: 1.5, + acceleration: -3 + }, + outModes: { + left: 'bounce', + right: 'bounce', + top: 'destroy' + } + }, + slowRandomRotation: { + value: 0, + enable: true, + direction: 'random', + animation: { + enable: true, + speed: 9 + }, + random: { + enable: true, + minimumValue: 0 + } + }, + randomColor: { + value: 'random' + }, + singleBottomEmitter: [ + { + direction: 'top', + rate: { + quantity: 0, + delay: 0.33 + }, + position: { + x: 50, + y: 100 + }, + size: { + mode: SizeMode.percent, + width: 100 + } + } + ] +}; + +export const particleOptions = { + fpsLimit: 30, + particles: { + number: particleConfig.noAutomaticParticles, + opacity: particleConfig.slowBlinkingOpacity, + rotate: particleConfig.slowRandomRotation, + move: particleConfig.moveUpOptions, + color: particleConfig.randomColor, + shape: particleConfig.charShapeHearth, + size: particleConfig.slightlyRandomSize + }, + emitters: particleConfig.singleBottomEmitter, + detectRetina: true +}; diff --git a/client/src/app/shared/components/jitsi/jitsi.component.html b/client/src/app/shared/components/jitsi/jitsi.component.html index 35d26d3e9..f3b817fa1 100644 --- a/client/src/app/shared/components/jitsi/jitsi.component.html +++ b/client/src/app/shared/components/jitsi/jitsi.component.html @@ -132,7 +132,7 @@ 'cast-shadow': showJitsiWindow }" > - +