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
This commit is contained in:
Sean 2021-06-24 13:20:31 +02:00
parent c286e0ff76
commit 57755ebf4b
7 changed files with 42 additions and 45 deletions

View File

@ -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

View File

@ -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 {

View File

@ -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>

View File

@ -9,12 +9,3 @@
margin-left: auto;
}
}
.level-indicator {
display: block;
text-align: center;
.level {
display: inline-block;
}
}

View File

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

View File

@ -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> {

View File

@ -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 {