ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix firefox endless spinner in stream

Browse Source 
fix a firefox bug where the spinner would not disappear, apparently when
the user would see a stream.
The reason seems to be ngparticles in combination with firefox, where
firefox would be stuck in never-stable when ngparticles was loaded
before the browser was ready
This commit is contained in:
Sean 2021-06-24 15:50:15 +02:00
parent c286e0ff76
commit eed3bca25b
3 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/site/interaction/components/applause-particle-display/applause-particle-display.component.html
View File

@ -1,3 +1,3 @@
<div [osResized]="resizeSubject" class="particle-wrapper"> <div [osResized]="resizeSubject" *ngIf="isStable" class="particle-wrapper">
<Particles id="particles" [options]="options" (particlesLoaded)="particlesLoaded($event)"> </Particles> <Particles id="particles" [options]="options" (particlesLoaded)="particlesLoaded($event)"> </Particles>
</div> </div>

11
client/src/app/site/interaction/components/applause-particle-display/applause-particle-display.component.ts
View File

@ -7,6 +7,7 @@ import { Subject } from 'rxjs';
import { auditTime } from 'rxjs/operators'; import { auditTime } from 'rxjs/operators';
import { Container } from 'tsparticles'; import { Container } from 'tsparticles';
import { OpenSlidesStatusService } from 'app/core/core-services/openslides-status.service';
import { ConfigService } from 'app/core/ui-services/config.service'; import { ConfigService } from 'app/core/ui-services/config.service';
import { ElementSize } from 'app/shared/directives/resized.directive'; import { ElementSize } from 'app/shared/directives/resized.directive';
import { BaseViewComponentDirective } from 'app/site/base/base-view'; import { BaseViewComponentDirective } from 'app/site/base/base-view';
@ -20,6 +21,11 @@ import { particleConfig, particleOptions } from './particle-options';
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class ApplauseParticleDisplayComponent extends BaseViewComponentDirective { export class ApplauseParticleDisplayComponent extends BaseViewComponentDirective {
/**
* Firefox has an issue with ngParticles and stable state
*/
public isStable = false;
public options = particleOptions; public options = particleOptions;
public resizeSubject = new Subject<ElementSize>(); public resizeSubject = new Subject<ElementSize>();
private resizeAuditTime = 200; private resizeAuditTime = 200;
@ -38,6 +44,7 @@ export class ApplauseParticleDisplayComponent extends BaseViewComponentDirective
translate: TranslateService, translate: TranslateService,
matSnackBar: MatSnackBar, matSnackBar: MatSnackBar,
configService: ConfigService, configService: ConfigService,
osStatus: OpenSlidesStatusService,
private applauseService: ApplauseService private applauseService: ApplauseService
) { ) {
super(title, translate, matSnackBar); super(title, translate, matSnackBar);
@ -52,6 +59,10 @@ export class ApplauseParticleDisplayComponent extends BaseViewComponentDirective
this.particleImage = particleImage || undefined; this.particleImage = particleImage || undefined;
}) })
); );
osStatus.stable.then(() => {
this.isStable = true;
});
} }
private setParticleImage(particleImage: string): void { private setParticleImage(particleImage: string): void {

1
client/src/app/site/interaction/components/interaction-container/interaction-container.component.scss
View File

@ -44,7 +44,6 @@ $radius: 5px;
.video-player { .video-player {
display: block; display: block;
width: 500px; width: 500px;
max-height: 280px;
} }
.call-body { .call-body {