From eed3bca25be54f8c63936baf257ad868959a1afd Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Thu, 24 Jun 2021 15:50:15 +0200
Subject: [PATCH] Fix firefox endless spinner in stream

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
---
 .../applause-particle-display.component.html          |  2 +-
 .../applause-particle-display.component.ts            | 11 +++++++++++
 .../interaction-container.component.scss              |  1 -
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/client/src/app/site/interaction/components/applause-particle-display/applause-particle-display.component.html b/client/src/app/site/interaction/components/applause-particle-display/applause-particle-display.component.html
index 7d53fad9c..70c71608c 100644
--- a/client/src/app/site/interaction/components/applause-particle-display/applause-particle-display.component.html
+++ b/client/src/app/site/interaction/components/applause-particle-display/applause-particle-display.component.html
@@ -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>
 </div>
diff --git a/client/src/app/site/interaction/components/applause-particle-display/applause-particle-display.component.ts b/client/src/app/site/interaction/components/applause-particle-display/applause-particle-display.component.ts
index 14c19dab4..6e63ef92e 100644
--- a/client/src/app/site/interaction/components/applause-particle-display/applause-particle-display.component.ts
+++ b/client/src/app/site/interaction/components/applause-particle-display/applause-particle-display.component.ts
@@ -7,6 +7,7 @@ import { Subject } from 'rxjs';
 import { auditTime } from 'rxjs/operators';
 import { Container } from 'tsparticles';
 
+import { OpenSlidesStatusService } from 'app/core/core-services/openslides-status.service';
 import { ConfigService } from 'app/core/ui-services/config.service';
 import { ElementSize } from 'app/shared/directives/resized.directive';
 import { BaseViewComponentDirective } from 'app/site/base/base-view';
@@ -20,6 +21,11 @@ import { particleConfig, particleOptions } from './particle-options';
     encapsulation: ViewEncapsulation.None
 })
 export class ApplauseParticleDisplayComponent extends BaseViewComponentDirective {
+    /**
+     * Firefox has an issue with ngParticles and stable state
+     */
+    public isStable = false;
+
     public options = particleOptions;
     public resizeSubject = new Subject<ElementSize>();
     private resizeAuditTime = 200;
@@ -38,6 +44,7 @@ export class ApplauseParticleDisplayComponent extends BaseViewComponentDirective
         translate: TranslateService,
         matSnackBar: MatSnackBar,
         configService: ConfigService,
+        osStatus: OpenSlidesStatusService,
         private applauseService: ApplauseService
     ) {
         super(title, translate, matSnackBar);
@@ -52,6 +59,10 @@ export class ApplauseParticleDisplayComponent extends BaseViewComponentDirective
                 this.particleImage = particleImage || undefined;
             })
         );
+
+        osStatus.stable.then(() => {
+            this.isStable = true;
+        });
     }
 
     private setParticleImage(particleImage: string): void {
diff --git a/client/src/app/site/interaction/components/interaction-container/interaction-container.component.scss b/client/src/app/site/interaction/components/interaction-container/interaction-container.component.scss
index a86d9635e..8a3791413 100644
--- a/client/src/app/site/interaction/components/interaction-container/interaction-container.component.scss
+++ b/client/src/app/site/interaction/components/interaction-container/interaction-container.component.scss
@@ -44,7 +44,6 @@ $radius: 5px;
 .video-player {
     display: block;
     width: 500px;
-    max-height: 280px;
 }
 
 .call-body {