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 {