From 57755ebf4be2d36b4b6d11ebe145ddf2fa7fdb87 Mon Sep 17 00:00:00 2001 From: Sean Date: Thu, 24 Jun 2021 13:20:31 +0200 Subject: [PATCH] Move applause timeout to service Fixes a bug where the applaus timeout would require reload to work Fixes a but where the "Show applause amount" config was ignored Moves the applause timeout logic to service comonents can now lazily listen to events from sendsApplauseObservable to know if their applause is in progress Show applause level depending on config --- .../action-bar/action-bar.component.html | 6 +-- .../action-bar/action-bar.component.ts | 16 +++---- .../applause-bar-display.component.html | 8 +--- .../applause-bar-display.component.scss | 9 ---- .../applause-bar-display.component.ts | 3 -- .../interaction-container.component.ts | 2 +- .../interaction/services/applause.service.ts | 43 ++++++++++++++----- 7 files changed, 42 insertions(+), 45 deletions(-) diff --git a/client/src/app/site/interaction/components/action-bar/action-bar.component.html b/client/src/app/site/interaction/components/action-bar/action-bar.component.html index 45cf27ec9..86f27a510 100644 --- a/client/src/app/site/interaction/components/action-bar/action-bar.component.html +++ b/client/src/app/site/interaction/components/action-bar/action-bar.component.html @@ -52,9 +52,9 @@ mat-mini-fab class="action-bar-shadow background-default" matTooltip="{{ 'Give applause' | translate }}" - [disabled]="applauseDisabled" - [matBadge]="applauseLevelObservable | async" - [matBadgeHidden]="!(applauseLevelObservable | async)" + [disabled]="sendsApplause | async" + [matBadge]="applauseLevel | async" + [matBadgeHidden]="!(showApplauseLevel | async)" (click)="sendApplause()" *ngIf="showApplause | async" @fade diff --git a/client/src/app/site/interaction/components/action-bar/action-bar.component.ts b/client/src/app/site/interaction/components/action-bar/action-bar.component.ts index 7faf81c70..b064907ae 100644 --- a/client/src/app/site/interaction/components/action-bar/action-bar.component.ts +++ b/client/src/app/site/interaction/components/action-bar/action-bar.component.ts @@ -24,12 +24,12 @@ const cannotEnterTooltip = _('Add yourself to the current list of speakers to jo animations: [fadeInOut, fadeAnimation] }) export class ActionBarComponent extends BaseViewComponentDirective { - public applauseLevel = 0; - public applauseDisabled = false; + public showApplause: Observable = this.applauseService.showApplauseObservable; - public showApplause: Observable = this.applauseService.showApplause; - public applauseLevelObservable: Observable = this.applauseService.applauseLevelObservable; - public applauseTimeout = this.applauseService.applauseTimeout; + public showApplauseLevel = this.applauseService.showApplauseLevelObservable; + public applauseLevel: Observable = this.applauseService.applauseLevelObservable; + + public sendsApplause: Observable = this.applauseService.sendsApplauseObservable; public isJoined: Observable = this.rtcService.isJoinedObservable; public showCallDialog: Observable = this.rtcService.showCallDialogObservable; public showLiveConf: Observable = this.interactionService.showLiveConfObservable; @@ -109,13 +109,7 @@ export class ActionBarComponent extends BaseViewComponentDirective { } public sendApplause(): void { - this.applauseDisabled = true; this.applauseService.sendApplause(); - this.cd.markForCheck(); - setTimeout(() => { - this.applauseDisabled = false; - this.cd.markForCheck(); - }, this.applauseTimeout); } public triggerCallHiddenAnimation(): void { diff --git a/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.html b/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.html index 44077f7b7..377126ff7 100644 --- a/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.html +++ b/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.html @@ -1,9 +1,3 @@
- -
-
- {{ level }} -
-
- +
diff --git a/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.scss b/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.scss index ae0795216..5008ebcee 100644 --- a/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.scss +++ b/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.scss @@ -9,12 +9,3 @@ margin-left: auto; } } - -.level-indicator { - display: block; - text-align: center; - - .level { - display: inline-block; - } -} diff --git a/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.ts b/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.ts index 08ea847e6..8cf469110 100644 --- a/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.ts +++ b/client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.ts @@ -43,9 +43,6 @@ export class ApplauseBarDisplayComponent extends BaseViewComponentDirective { }), configService.get('general_system_applause_type').subscribe(() => { cd.markForCheck(); - }), - configService.get('general_system_applause_show_level').subscribe(show => { - this.showLevel = show; }) ); } diff --git a/client/src/app/site/interaction/components/interaction-container/interaction-container.component.ts b/client/src/app/site/interaction/components/interaction-container/interaction-container.component.ts index 67a9c60ba..1eee55a27 100644 --- a/client/src/app/site/interaction/components/interaction-container/interaction-container.component.ts +++ b/client/src/app/site/interaction/components/interaction-container/interaction-container.component.ts @@ -28,7 +28,7 @@ export class InteractionContainerComponent extends BaseViewComponentDirective im public containerHeadSubtitle = ''; public get isApplausEnabled(): Observable { - return this.applauseService.showApplause; + return this.applauseService.showApplauseObservable; } public get showApplauseBar(): Observable { diff --git a/client/src/app/site/interaction/services/applause.service.ts b/client/src/app/site/interaction/services/applause.service.ts index 0d94616c8..68a8d7cb0 100644 --- a/client/src/app/site/interaction/services/applause.service.ts +++ b/client/src/app/site/interaction/services/applause.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; -import { Observable, Subject } from 'rxjs'; +import { combineLatest, Observable, Subject } from 'rxjs'; import { distinctUntilChanged, filter, map } from 'rxjs/operators'; import { ConfigService } from '../../../core/ui-services/config.service'; @@ -31,10 +31,14 @@ export class ApplauseService { private presentApplauseUsers: number; private applauseTypeObservable: Observable; - public showApplause: Observable; - public showApplauseLevel: boolean; - public applauseTimeout: number; + public applauseTimeoutObservable: Observable; + private applauseTimeout = 0; + private sendsApplauseSubject: Subject = new Subject(); + public sendsApplauseObservable: Observable = this.sendsApplauseSubject.asObservable(); + + public showApplauseObservable: Observable; + private showApplauseLevelConfigObservable: Observable; private applauseLevelSubject: Subject = new Subject(); public applauseLevelObservable: Observable = this.applauseLevelSubject.asObservable(); @@ -50,13 +54,30 @@ export class ApplauseService { return this.applauseTypeObservable.pipe(map(type => type === ApplauseType.bar)); } + public get showApplauseLevelObservable(): Observable { + return combineLatest([this.showApplauseLevelConfigObservable, this.applauseLevelObservable]).pipe( + map(([enabled, amount]) => { + return enabled && amount > 0; + }) + ); + } + public constructor( configService: ConfigService, private httpService: HttpService, private notifyService: NotifyService ) { - this.showApplause = configService.get('general_system_applause_enable'); + this.showApplauseObservable = configService.get('general_system_applause_enable'); this.applauseTypeObservable = configService.get('general_system_applause_type'); + this.showApplauseLevelConfigObservable = configService.get('general_system_applause_show_level'); + + this.applauseTimeoutObservable = configService + .get('general_system_stream_applause_timeout') + .pipe(map(timeout => timeout * 1000)); + + this.applauseTimeoutObservable.subscribe(timeout => { + this.applauseTimeout = timeout; + }); configService.get('general_system_applause_min_amount').subscribe(minLevel => { this.minApplauseLevel = minLevel; @@ -64,12 +85,7 @@ export class ApplauseService { configService.get('general_system_applause_max_amount').subscribe(maxLevel => { this.maxApplauseLevel = maxLevel; }); - configService.get('general_system_applause_show_level').subscribe(show => { - this.showApplauseLevel = show; - }); - configService.get('general_system_stream_applause_timeout').subscribe(timeout => { - this.applauseTimeout = (timeout || 1) * 1000; - }); + this.notifyService .getMessageObservable(applauseNotifyMessageName) .pipe( @@ -92,6 +108,11 @@ export class ApplauseService { public async sendApplause(): Promise { await this.httpService.post(applausePath); + + this.sendsApplauseSubject.next(true); + setTimeout(() => { + this.sendsApplauseSubject.next(false); + }, this.applauseTimeout); } public getApplauseQuote(applauseLevel: number): number {