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

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

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<boolean> = this.applauseService.showApplauseObservable;
 
-    public showApplause: Observable<boolean> = this.applauseService.showApplause;
-    public applauseLevelObservable: Observable<number> = this.applauseService.applauseLevelObservable;
-    public applauseTimeout = this.applauseService.applauseTimeout;
+    public showApplauseLevel = this.applauseService.showApplauseLevelObservable;
+    public applauseLevel: Observable<number> = this.applauseService.applauseLevelObservable;
+
+    public sendsApplause: Observable<boolean> = this.applauseService.sendsApplauseObservable;
     public isJoined: Observable<boolean> = this.rtcService.isJoinedObservable;
     public showCallDialog: Observable<boolean> = this.rtcService.showCallDialogObservable;
     public showLiveConf: Observable<boolean> = 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 {

client/src/app/site/interaction/components/applause-bar-display/applause-bar-display.component.html

@@ -1,9 +1,3 @@
 <div class="bar-wrapper">
-    <os-progress class="progress-bar" [value]="percent">
-        <div class="level-indicator">
-            <div class="level">
-                <b *ngIf="showLevel && hasLevel" [@fade]="'in'">{{ level }}</b>
-            </div>
-        </div>
-    </os-progress>
+    <os-progress class="progress-bar" [value]="percent"></os-progress>
 </div>

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;
-    }
-}

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<ApplauseType>('general_system_applause_type').subscribe(() => {
                 cd.markForCheck();
-            }),
-            configService.get<boolean>('general_system_applause_show_level').subscribe(show => {
-                this.showLevel = show;
             })
         );
     }

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<boolean> {
-        return this.applauseService.showApplause;
+        return this.applauseService.showApplauseObservable;
     }
 
     public get showApplauseBar(): Observable<boolean> {

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<ApplauseType>;
 
-    public showApplause: Observable<boolean>;
-    public showApplauseLevel: boolean;
-    public applauseTimeout: number;
+    public applauseTimeoutObservable: Observable<number>;
+    private applauseTimeout = 0;
 
+    private sendsApplauseSubject: Subject<boolean> = new Subject<boolean>();
+    public sendsApplauseObservable: Observable<boolean> = this.sendsApplauseSubject.asObservable();
+
+    public showApplauseObservable: Observable<boolean>;
+    private showApplauseLevelConfigObservable: Observable<boolean>;
     private applauseLevelSubject: Subject<number> = new Subject<number>();
     public applauseLevelObservable: Observable<number> = this.applauseLevelSubject.asObservable();
 
@@ -50,13 +54,30 @@ export class ApplauseService {
         return this.applauseTypeObservable.pipe(map(type => type === ApplauseType.bar));
     }
 
+    public get showApplauseLevelObservable(): Observable<boolean> {
+        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<boolean>('general_system_applause_enable');
+        this.showApplauseObservable = configService.get<boolean>('general_system_applause_enable');
         this.applauseTypeObservable = configService.get<ApplauseType>('general_system_applause_type');
+        this.showApplauseLevelConfigObservable = configService.get<boolean>('general_system_applause_show_level');
+
+        this.applauseTimeoutObservable = configService
+            .get<number>('general_system_stream_applause_timeout')
+            .pipe(map(timeout => timeout * 1000));
+
+        this.applauseTimeoutObservable.subscribe(timeout => {
+            this.applauseTimeout = timeout;
+        });
 
         configService.get<number>('general_system_applause_min_amount').subscribe(minLevel => {
             this.minApplauseLevel = minLevel;
@@ -64,12 +85,7 @@ export class ApplauseService {
         configService.get<number>('general_system_applause_max_amount').subscribe(maxLevel => {
             this.maxApplauseLevel = maxLevel;
         });
-        configService.get<boolean>('general_system_applause_show_level').subscribe(show => {
-            this.showApplauseLevel = show;
-        });
-        configService.get<number>('general_system_stream_applause_timeout').subscribe(timeout => {
-            this.applauseTimeout = (timeout || 1) * 1000;
-        });
+
         this.notifyService
             .getMessageObservable<Applause>(applauseNotifyMessageName)
             .pipe(
@@ -92,6 +108,11 @@ export class ApplauseService {
 
     public async sendApplause(): Promise<void> {
         await this.httpService.post(applausePath);
+
+        this.sendsApplauseSubject.next(true);
+        setTimeout(() => {
+            this.sendsApplauseSubject.next(false);
+        }, this.applauseTimeout);
     }
 
     public getApplauseQuote(applauseLevel: number): number {