Merge pull request #6121 from tsiegleauq/applause-timeout-to-service

Move applause timeout to service

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"
+        [disabled]="sendsApplause | async"
-        [matBadge]="applauseLevelObservable | async"
+        [matBadge]="applauseLevel | async"
-        [matBadgeHidden]="!(applauseLevelObservable | 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 showApplause: Observable<boolean> = this.applauseService.showApplauseObservable;
-    public applauseDisabled = false;
 
-    public showApplause: Observable<boolean> = this.applauseService.showApplause;
+    public showApplauseLevel = this.applauseService.showApplauseLevelObservable;
-    public applauseLevelObservable: Observable<number> = this.applauseService.applauseLevelObservable;
+    public applauseLevel: Observable<number> = this.applauseService.applauseLevelObservable;
-    public applauseTimeout = this.applauseService.applauseTimeout;
+
+    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">
+    <os-progress class="progress-bar" [value]="percent"></os-progress>
-        <div class="level-indicator">
-            <div class="level">
-                <b *ngIf="showLevel && hasLevel" [@fade]="'in'">{{ level }}</b>
-            </div>
-        </div>
-    </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 applauseTimeoutObservable: Observable<number>;
-    public showApplauseLevel: boolean;
+    private applauseTimeout = 0;
-    public applauseTimeout: number;
 
+    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 {