Merge pull request #5811 from tsiegleauq/applause-client

Add applause in client

client/package.json

@@ -66,6 +66,7 @@
         "lz4js": "^0.2.0",
         "material-icon-font": "git+https://github.com/petergng/materialIconFont.git",
         "moment": "^2.27.0",
+        "ng-particles": "^2.1.11",
         "ng2-charts": "^2.4.0",
         "ng2-pdf-viewer": "6.3.2",
         "ngx-device-detector": "^2.0.0",
@@ -78,6 +79,7 @@
         "rxjs": "^6.6.2",
         "tinymce": "5.4.2",
         "tslib": "^1.10.0",
+        "tsparticles": "^1.18.11",
         "video.js": "^7.8.4",
         "zone.js": "~0.10.2"
     },

client/src/app/app.component.ts

@@ -1,4 +1,6 @@
 import { ApplicationRef, Component } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 
 import { TranslateService } from '@ngx-translate/core';
@@ -70,6 +72,8 @@ export class AppComponent {
      * @param dataStoreUpgradeService
      */
     public constructor(
+        private matIconRegistry: MatIconRegistry,
+        private domSanitizer: DomSanitizer,
         translate: TranslateService,
         appRef: ApplicationRef,
         servertimeService: ServertimeService,
@@ -100,6 +104,7 @@ export class AppComponent {
         this.overloadArrayFunctions();
         this.overloadSetFunctions();
         this.overloadModulo();
+        this.loadCustomIcons();
 
         // Wait until the App reaches a stable state.
         // Required for the Service Worker.
@@ -204,4 +209,11 @@ export class AppComponent {
             enumerable: false
         });
     }
+
+    private loadCustomIcons(): void {
+        this.matIconRegistry.addSvgIcon(
+            `clapping_hands`,
+            this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/svg/clapping_hands.svg')
+        );
+    }
 }

client/src/app/core/ui-services/applause.service.spec.ts

@@ -0,0 +1,20 @@
+import { TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from 'e2e-imports.module';
+
+import { ApplauseService } from './applause.service';
+
+describe('ApplauseService', () => {
+    let service: ApplauseService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule]
+        });
+        service = TestBed.inject(ApplauseService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+});

client/src/app/core/ui-services/applause.service.ts

@@ -0,0 +1,84 @@
+import { Injectable } from '@angular/core';
+
+import { Observable, Subject } from 'rxjs';
+import { distinctUntilChanged, filter, map } from 'rxjs/operators';
+
+import { ConfigService } from './config.service';
+import { HttpService } from '../core-services/http.service';
+import { NotifyService } from '../core-services/notify.service';
+
+export interface Applause {
+    level: number;
+    presentUsers: number;
+}
+
+export enum ApplauseType {
+    particles = 'applause-type-particles',
+    bar = 'applause-type-bar'
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ApplauseService {
+    private applausePath = '/system/applause';
+    private applauseNotifyPath = 'applause';
+    private minApplauseLevel: number;
+    private maxApplauseLevel: number;
+    private presentApplauseUsers: number;
+
+    public applauseType: ApplauseType;
+
+    private applauseLevelSubject: Subject<number> = new Subject<number>();
+    public applauseLevelObservable = this.applauseLevelSubject.asObservable();
+
+    private get maxApplause(): number {
+        return this.maxApplauseLevel || this.presentApplauseUsers || 0;
+    }
+
+    public constructor(
+        configService: ConfigService,
+        private httpService: HttpService,
+        private notifyService: NotifyService
+    ) {
+        configService.get<number>('general_system_applause_min_amount').subscribe(minLevel => {
+            this.minApplauseLevel = minLevel;
+        });
+        configService.get<number>('general_system_applause_max_amount').subscribe(maxLevel => {
+            this.maxApplauseLevel = maxLevel;
+        });
+        configService.get<ApplauseType>('general_system_applause_type').subscribe((type: ApplauseType) => {
+            this.applauseType = type;
+        });
+        this.notifyService
+            .getMessageObservable<Applause>(this.applauseNotifyPath)
+            .pipe(
+                map(notify => notify.message as Applause),
+                /**
+                 * only updates when the effective applause level changes
+                 */
+                distinctUntilChanged((prev, curr) => {
+                    return prev.level === curr.level;
+                }),
+                filter(curr => {
+                    return curr.level === 0 || curr.level >= this.minApplauseLevel;
+                })
+            )
+            .subscribe(applause => {
+                this.presentApplauseUsers = applause.presentUsers;
+                this.applauseLevelSubject.next(applause.level);
+            });
+    }
+
+    public async sendApplause(): Promise<void> {
+        await this.httpService.post(this.applausePath);
+    }
+
+    public getApplauseQuote(applauseLevel: number): number {
+        if (!applauseLevel) {
+            return 0;
+        }
+        const quote = applauseLevel / this.maxApplause || 0;
+        return quote > 1 ? 1 : quote;
+    }
+}

client/src/app/shared/animations.ts

@@ -1,4 +1,4 @@
-import { animate, style, transition, trigger } from '@angular/animations';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
 const slideIn = [style({ transform: 'translateX(-85%)' }), animate('600ms ease')];
 const slideOut = [
@@ -11,4 +11,9 @@ const slideOut = [
     )
 ];
 
+export const fadeAnimation = trigger('fade', [
+    state('in', style({ opacity: 1 })),
+    transition(':enter', [style({ opacity: 0 }), animate(600)]),
+    transition(':leave', animate(600, style({ opacity: 0 })))
+]);
 export const navItemAnim = trigger('navItemAnim', [transition(':enter', slideIn), transition(':leave', slideOut)]);

client/src/app/shared/components/applause-display/applause-display.component.html

@@ -0,0 +1,9 @@
+<div class="bar-wrapper" *ngIf="isApplauseTypeBar">
+    <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>
+</div>

client/src/app/shared/components/applause-display/applause-display.component.scss

@@ -0,0 +1,26 @@
+.bar-wrapper {
+    min-width: 30px;
+    height: 100%;
+
+    .progress-bar {
+        display: block;
+        width: 30px;
+        height: 100%;
+        margin-left: auto;
+    }
+}
+
+.level-indicator {
+    height: 50px;
+    display: block;
+    text-align: center;
+
+    .level {
+        display: inline-block;
+        margin-top: 25px;
+    }
+}
+
+.particle-display {
+    // height: 100%;
+}

client/src/app/shared/components/applause-display/applause-display.component.spec.ts

@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from 'e2e-imports.module';
+
+import { ApplauseDisplayComponent } from './applause-display.component';
+
+describe('ApplauseDisplayComponent', () => {
+    let component: ApplauseDisplayComponent;
+    let fixture: ComponentFixture<ApplauseDisplayComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ApplauseDisplayComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

client/src/app/shared/components/applause-display/applause-display.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Title } from '@angular/platform-browser';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { Applause, ApplauseService, ApplauseType } from 'app/core/ui-services/applause.service';
+import { ConfigService } from 'app/core/ui-services/config.service';
+import { fadeAnimation } from 'app/shared/animations';
+import { BaseViewComponentDirective } from 'app/site/base/base-view';
+
+@Component({
+    selector: 'os-applause-display',
+    templateUrl: './applause-display.component.html',
+    styleUrls: ['./applause-display.component.scss'],
+    animations: [fadeAnimation],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
+})
+export class ApplauseDisplayComponent extends BaseViewComponentDirective {
+    public level = 0;
+    public showLevel: boolean;
+    public percent = 0;
+
+    public get hasLevel(): boolean {
+        return !!this.level;
+    }
+
+    public get isApplauseTypeBar(): boolean {
+        return this.applauseService.applauseType === ApplauseType.bar;
+    }
+
+    public constructor(
+        title: Title,
+        translate: TranslateService,
+        matSnackBar: MatSnackBar,
+        cd: ChangeDetectorRef,
+        private applauseService: ApplauseService,
+        configService: ConfigService
+    ) {
+        super(title, translate, matSnackBar);
+        this.subscriptions.push(
+            applauseService.applauseLevelObservable.subscribe(applauseLevel => {
+                this.level = applauseLevel || 0;
+                this.percent = this.applauseService.getApplauseQuote(this.level) * 100;
+                cd.markForCheck();
+            }),
+            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/shared/components/jitsi/jitsi.component.html

@@ -61,9 +61,7 @@
                     matTooltip="{{ 'Exit live conference and continue livestream' | translate }}"
                     *ngIf="videoStreamUrl && canSeeLiveStream && !isJitsiDialogOpen"
                 >
-                    <mat-icon color="warn">
+                    <mat-icon color="warn"> meeting_room </mat-icon>
-                        meeting_room
-                    </mat-icon>
                 </button>
 
                 <!-- mute/unmute button -->
@@ -90,7 +88,11 @@
                     (click)="enterConversation()"
                     matTooltip="{{ 'Enter live conference' | translate }}"
                 >
-                    <mat-icon color="primary" [@fadeInOut]="isEnterMeetingRoomVisible" (@fadeInOut.done)="triggerMeetingRoomButtonAnimation()">
+                    <mat-icon
+                        color="primary"
+                        [@fadeInOut]="isEnterMeetingRoomVisible"
+                        (@fadeInOut.done)="triggerMeetingRoomButtonAnimation()"
+                    >
                         meeting_room
                     </mat-icon>
                 </button>
@@ -103,11 +105,23 @@
                     *ngIf="enableJitsi && !isAccessPermitted"
                     [routerLink]="['/agenda/speakers']"
                 >
-                    <mat-icon>
+                    <mat-icon> no_meeting_room </mat-icon>
-                        no_meeting_room
-                    </mat-icon>
                 </a>
             </ng-container>
+
+            <!-- applause button -->
+            <button
+                class="quick-icon indicator"
+                [disabled]="applauseDisabled"
+                mat-mini-fab
+                (click)="sendApplause()"
+                matTooltip="{{ 'Send applause' | translate }}"
+                *ngIf="showApplause"
+                [matBadge]="showApplauseBadge ? applauseLevel : null"
+                matBadgeColor="accent"
+            >
+                <mat-icon svgIcon="clapping_hands"></mat-icon>
+            </button>
         </span>
 
         <span
@@ -118,6 +132,8 @@
                 'cast-shadow': showJitsiWindow
             }"
         >
+            <os-applause-display *ngIf="showApplause && isApplauseTypeBar" class="applause"></os-applause-display>
+
             <!-- open-window button -->
             <button class="toggle-list-button" mat-button (click)="toggleShowJitsi()">
                 <ng-container *ngIf="currentState == state.jitsi">
@@ -149,7 +165,7 @@
             <div
                 class="jitsi-list"
                 [ngClass]="{
-                    'cdk-visually-hidden': !showJitsiWindow
+                    'hide-height': !showJitsiWindow
                 }"
             >
                 <ng-container *ngIf="currentState == state.jitsi">
@@ -175,6 +191,10 @@
 
                         <!-- user list -->
                         <div class="room-members" *ngIf="isJitsiActive && isJoined">
+                            <os-particle-display
+                                *ngIf="isApplauseTypeParticles"
+                                class="room-list-applause-particles"
+                            ></os-particle-display>
                             <div class="member-list">
                                 <ol>
                                     <li
@@ -196,6 +216,7 @@
                 <ng-container *ngIf="currentState == state.stream">
                     <os-vjs-player
                         [videoUrl]="videoStreamUrl"
+                        [showParticles]="isApplauseTypeParticles"
                         (started)="onSteamStarted()"
                         *ngIf="(canSeeLiveStream && !streamActiveInAnotherTab) || streamRunning"
                     ></os-vjs-player>

client/src/app/shared/components/jitsi/jitsi.component.scss

@@ -56,6 +56,7 @@
 
     .jitsi-bar {
         display: flex;
+        position: relative;
         justify-content: flex-end;
         $wrapper-padding: 5px;
         $bar-height: 40px;
@@ -90,11 +91,20 @@
         }
 
         .list-wrapper {
+            position: relative;
             pointer-events: all;
             min-height: $bar-height;
             padding-top: $wrapper-padding;
             border-top-right-radius: 4px;
 
+            .applause {
+                position: absolute;
+                top: 0;
+                width: 90px;
+                left: -90px;
+                bottom: 50px;
+            }
+
             .toggle-list-button {
                 position: relative;
                 line-height: normal;
@@ -121,6 +131,7 @@
             .jitsi-list {
                 .content {
                     height: 40vh;
+                    max-height: 100%;
                     clear: both;
 
                     .disconnected {
@@ -136,7 +147,15 @@
                     }
 
                     .room-members {
-                        height: inherit;
+                        height: 100%;
+                        position: relative;
+
+                        .room-list-applause-particles {
+                            position: absolute;
+                            height: 100%;
+                            width: 70px;
+                            right: 0;
+                        }
 
                         .member-list {
                             max-height: 100%;

client/src/app/shared/components/jitsi/jitsi.component.scss-theme.scss

@@ -17,6 +17,10 @@
 
             .indicator {
                 color: mat-color($primary, default-contrast);
+
+                svg path {
+                    fill: mat-color($primary) !important;
+                }
             }
 
             .toggle-list-button {

client/src/app/shared/components/jitsi/jitsi.component.ts

@@ -11,6 +11,7 @@ import { ConstantsService } from 'app/core/core-services/constants.service';
 import { OperatorService } from 'app/core/core-services/operator.service';
 import { Deferred } from 'app/core/promises/deferred';
 import { UserRepositoryService } from 'app/core/repositories/users/user-repository.service';
+import { ApplauseService, ApplauseType } from 'app/core/ui-services/applause.service';
 import { ConfigService } from 'app/core/ui-services/config.service';
 import { UserMediaPermService } from 'app/core/ui-services/user-media-perm.service';
 import { UserListIndexType } from 'app/site/agenda/models/view-list-of-speakers';
@@ -96,6 +97,10 @@ export class JitsiComponent extends BaseViewComponentDirective implements OnInit
     public showJitsiWindow = true;
     public muted = true;
 
+    public showApplause: boolean;
+    public applauseDisabled = false;
+    private applauseTimeout: number;
+
     @ViewChild('jitsi')
     private jitsiNode: ElementRef;
 
@@ -180,6 +185,26 @@ export class JitsiComponent extends BaseViewComponentDirective implements OnInit
     public currentState: ConferenceState;
     public isEnterMeetingRoomVisible = true;
 
+    public applauseLevel = 0;
+    private showApplauseLevel: boolean;
+    private isApplausBarUsed: boolean;
+
+    public get showApplauseBadge(): boolean {
+        return this.showApplauseLevel && this.applauseLevel > 0 && (!this.showJitsiWindow || !this.isApplausBarUsed);
+    }
+
+    private get applauseType(): ApplauseType {
+        return this.applauseService.applauseType;
+    }
+
+    public get isApplauseTypeBar(): boolean {
+        return this.applauseType === ApplauseType.bar;
+    }
+
+    public get isApplauseTypeParticles(): boolean {
+        return this.applauseType === ApplauseType.particles;
+    }
+
     private configOverwrite = {
         startAudioOnly: false,
         // allows jitsi on mobile devices
@@ -237,7 +262,8 @@ export class JitsiComponent extends BaseViewComponentDirective implements OnInit
         private constantsService: ConstantsService,
         private configService: ConfigService,
         private closService: CurrentListOfSpeakersService,
-        private userMediaPermService: UserMediaPermService
+        private userMediaPermService: UserMediaPermService,
+        private applauseService: ApplauseService
     ) {
         super(titleService, translate, snackBar);
     }
@@ -350,6 +376,22 @@ export class JitsiComponent extends BaseViewComponentDirective implements OnInit
             }),
             this.configService.get<boolean>('general_system_conference_open_video').subscribe(open => {
                 this.configOverwrite.startWithVideoMuted = !open;
+            }),
+            this.configService.get<boolean>('general_system_applause_enable').subscribe(enable => {
+                this.showApplause = enable;
+            }),
+            this.configService.get<number>('general_system_stream_applause_timeout').subscribe(timeout => {
+                this.applauseTimeout = (timeout || 1) * 1000;
+            }),
+            this.configService.get<boolean>('general_system_applause_show_level').subscribe(show => {
+                this.showApplauseLevel = show;
+            }),
+            this.configService.get<any>('general_system_applause_type').subscribe(type => {
+                if (type === 'applause-type-bar') {
+                    this.isApplausBarUsed = true;
+                } else {
+                    this.isApplausBarUsed = false;
+                }
             })
         );
 
@@ -362,7 +404,10 @@ export class JitsiComponent extends BaseViewComponentDirective implements OnInit
                     map(los => los?.findUserIndexOnList(this.operator.user.id) ?? -1),
                     distinctUntilChanged()
                 )
-                .subscribe(userLosIndex => this.autoJoinJitsiByLosIndex(userLosIndex))
+                .subscribe(userLosIndex => this.autoJoinJitsiByLosIndex(userLosIndex)),
+            this.applauseService.applauseLevelObservable.subscribe(applauseLevel => {
+                this.applauseLevel = applauseLevel || 0;
+            })
         );
     }
 
@@ -595,4 +640,12 @@ export class JitsiComponent extends BaseViewComponentDirective implements OnInit
     private setConferenceState(newState: ConferenceState): void {
         this.currentState = newState;
     }
+
+    public sendApplause(): void {
+        this.applauseDisabled = true;
+        this.applauseService.sendApplause();
+        setTimeout(() => {
+            this.applauseDisabled = false;
+        }, this.applauseTimeout);
+    }
 }

client/src/app/shared/components/particle-display/particle-display.component.html

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

client/src/app/shared/components/particle-display/particle-display.component.scss

@@ -0,0 +1,7 @@
+.particle-wrapper {
+    height: 100%;
+}
+
+.tsparticles-canvas-el {
+    pointer-events: none !important;
+}

client/src/app/shared/components/particle-display/particle-display.component.spec.ts

@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from 'e2e-imports.module';
+
+import { ParticleDisplayComponent } from './particle-display.component';
+
+describe('ParticleDisplayComponent', () => {
+    let component: ParticleDisplayComponent;
+    let fixture: ComponentFixture<ParticleDisplayComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ParticleDisplayComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

client/src/app/shared/components/particle-display/particle-display.component.ts

@@ -0,0 +1,233 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Title } from '@angular/platform-browser';
+
+import { TranslateService } from '@ngx-translate/core';
+import { Subject } from 'rxjs';
+import { auditTime } from 'rxjs/operators';
+import { Container, SizeMode } from 'tsparticles';
+import { Shape } from 'tsparticles/dist/Options/Classes/Particles/Shape/Shape';
+import { IImageShape } from 'tsparticles/dist/Options/Interfaces/Particles/Shape/IImageShape';
+import { Emitters } from 'tsparticles/dist/Plugins/Emitters/Emitters';
+
+import { ApplauseService } from 'app/core/ui-services/applause.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';
+
+@Component({
+    selector: 'os-particle-display',
+    templateUrl: './particle-display.component.html',
+    styleUrls: ['./particle-display.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ParticleDisplayComponent extends BaseViewComponentDirective {
+    public resizeSubject = new Subject<ElementSize>();
+    private resizeAuditTime = 200;
+
+    private particleContainer: Container;
+
+    public set particleImage(imageUrl: string) {
+        this.setParticleImage(imageUrl);
+    }
+
+    public set particleLevel(level: number) {
+        this.setParticleLevel(level);
+    }
+
+    private noAutomaticParticles = {
+        value: 0
+    };
+
+    private slowBlinkingOpacity = {
+        value: 0.8,
+        animation: {
+            enable: true,
+            speed: 1,
+            sync: false,
+            minimumValue: 0.3
+        },
+        random: {
+            enable: true,
+            minimumValue: 0.8
+        }
+    };
+
+    private imageOptions: IImageShape = {
+        replace_color: false,
+        replaceColor: false,
+        src: '',
+        width: 24,
+        height: 24
+    };
+
+    private customImageShape = {
+        type: 'image',
+        image: this.imageOptions
+    };
+
+    private charShapeHearth = {
+        type: 'char',
+        options: {
+            char: {
+                fill: true,
+                font: 'Verdana',
+                weight: '200',
+                style: '',
+                value: ['❤']
+            }
+        }
+    };
+
+    private slightlyRandomSize: any = {
+        value: 16,
+        random: {
+            enable: true,
+            minimumValue: 10
+        }
+    };
+
+    private moveUpOptions = {
+        enable: true,
+        direction: 'top',
+        speed: 1.0,
+        angle: {
+            offset: 45,
+            value: 90
+        },
+        gravity: {
+            enable: true,
+            maxSpeed: 1.5,
+            acceleration: -3
+        },
+        outModes: {
+            left: 'bounce',
+            right: 'bounce',
+            top: 'destroy'
+        }
+    };
+
+    private slowRandomRotation = {
+        value: 0,
+        enable: true,
+        direction: 'random',
+        animation: {
+            enable: true,
+            speed: 9
+        },
+        random: {
+            enable: true,
+            minimumValue: 0
+        }
+    };
+
+    private randomColor = {
+        value: 'random'
+    };
+
+    private singleBottomEmitter = [
+        {
+            direction: 'top',
+            rate: {
+                quantity: 0,
+                delay: 0.33
+            },
+            position: {
+                x: 50,
+                y: 100
+            },
+            size: {
+                mode: SizeMode.percent,
+                width: 100
+            }
+        }
+    ];
+
+    public particlesOptions = {
+        fpsLimit: 30,
+        particles: {
+            number: this.noAutomaticParticles,
+            opacity: this.slowBlinkingOpacity,
+            rotate: this.slowRandomRotation,
+            move: this.moveUpOptions,
+            color: this.randomColor,
+            shape: this.charShapeHearth,
+            size: this.slightlyRandomSize
+        },
+        emitters: this.singleBottomEmitter,
+        detectRetina: true
+    };
+
+    public constructor(
+        title: Title,
+        translate: TranslateService,
+        matSnackBar: MatSnackBar,
+        configService: ConfigService,
+        private applauseService: ApplauseService
+    ) {
+        super(title, translate, matSnackBar);
+        this.subscriptions.push(
+            this.resizeSubject.pipe(auditTime(this.resizeAuditTime)).subscribe(size => {
+                this.updateParticleContainer(size);
+            }),
+            applauseService.applauseLevelObservable.subscribe(applause => {
+                this.particleLevel = this.calcEmitterLevel(applause || 0);
+            }),
+            configService.get<string>('general_system_applause_particle_image').subscribe(particleImage => {
+                this.particleImage = particleImage || undefined;
+            })
+        );
+    }
+
+    private setParticleImage(particleImage: string): void {
+        if (particleImage) {
+            this.imageOptions.src = particleImage;
+            (this.particlesOptions.particles.shape as any) = this.customImageShape;
+        } else {
+            (this.particlesOptions.particles.shape as any) = this.charShapeHearth;
+        }
+        if (this.particleContainer) {
+            this.particleContainer.options.particles.load(this.particlesOptions.particles as any);
+            this.refresh();
+        }
+    }
+
+    private calcEmitterLevel(applauseLevel: number): number {
+        if (!applauseLevel) {
+            return 0;
+        }
+        let emitterLevel = this.applauseService.getApplauseQuote(applauseLevel);
+        emitterLevel = Math.ceil(emitterLevel * 10);
+        return emitterLevel;
+    }
+
+    private setParticleLevel(level: number): void {
+        if (this.particleContainer) {
+            const emitters = this.particleContainer.plugins.get('emitters') as Emitters;
+            if (emitters) {
+                emitters.array[0].emitterOptions.rate.quantity = level;
+            }
+        }
+    }
+
+    private updateParticleContainer(size: ElementSize): void {
+        if (!size.height || !size.width) {
+            this.stop();
+        } else {
+            this.refresh();
+        }
+    }
+
+    private stop(): void {
+        this.particleContainer?.stop();
+    }
+
+    private refresh(): void {
+        this.particleContainer?.refresh();
+    }
+
+    public particlesLoaded(container: Container): void {
+        this.particleContainer = container;
+        this.refresh();
+    }
+}

client/src/app/shared/components/progress/progress.component.html

@@ -0,0 +1,10 @@
+<div class="progress-wrapper">
+    <mat-icon class="end-icon" *ngIf="endIcon"> {{ endIcon }} </mat-icon>
+    <div class="slot">
+        <ng-content></ng-content>
+    </div>
+    <div class="progress-bar">
+        <div class="buffer bar"></div>
+        <div class="progress bar" [style.height.%]="value"></div>
+    </div>
+</div>

client/src/app/shared/components/progress/progress.component.scss

@@ -0,0 +1,36 @@
+$bar-margin: 10px;
+$bar-border-radius: 15px;
+
+.progress-wrapper {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+
+    .end-icon {
+        display: block;
+        margin: auto;
+    }
+
+    .progress-bar {
+        position: relative;
+        width: 100%;
+
+        .bar {
+            position: absolute;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            margin-left: $bar-margin;
+            margin-right: $bar-margin;
+            border-radius: $bar-border-radius;
+        }
+
+        .buffer {
+            height: 100%;
+        }
+
+        .progress {
+            transition: height 0.5s ease;
+        }
+    }
+}

client/src/app/shared/components/progress/progress.component.scss-theme.scss

@@ -0,0 +1,26 @@
+@import '~@angular/material/theming';
+
+@mixin os-progress-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+
+    .progress-wrapper {
+        background-color: mat-color($primary);
+    }
+
+    .end-icon {
+        color: mat-color($primary, default-contrast);
+    }
+
+    .slot {
+        color: mat-color($primary, default-contrast);
+    }
+
+    .buffer {
+        background-color: mat-color($primary, darker);
+    }
+
+    .progress {
+        background-color: mat-color($accent);
+    }
+}

client/src/app/shared/components/progress/progress.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressComponent } from './progress.component';
+
+describe('ProgressComponent', () => {
+    let component: ProgressComponent;
+    let fixture: ComponentFixture<ProgressComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ProgressComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ProgressComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

client/src/app/shared/components/progress/progress.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'os-progress',
+    templateUrl: './progress.component.html',
+    styleUrls: ['./progress.component.scss']
+})
+export class ProgressComponent {
+    @Input()
+    public value = 0;
+
+    @Input()
+    public endIcon: string;
+}

client/src/app/shared/components/vjs-player/vjs-player.component.html

@@ -1,4 +1,5 @@
 <div class="video-wrapper">
+    <os-particle-display *ngIf="showParticles" class="applause-particles"></os-particle-display>
     <div class="player-container" [ngClass]="{ hide: !isUrlOnline }">
         <video #videoPlayer class="video-js" controls preload="none"></video>
     </div>

client/src/app/shared/components/vjs-player/vjs-player.component.scss

@@ -1,7 +1,17 @@
 .video-wrapper {
+    position: relative;
     display: flex;
+    height: 100%;
     width: 100%;
-    min-height: 200px;
+
+    .applause-particles {
+        position: absolute;
+        display: block;
+        pointer-events: none !important;
+        width: 100px;
+        height: 100%;
+        z-index: 1;
+    }
 
     .is-offline-wrapper {
         width: 100%;

client/src/app/shared/components/vjs-player/vjs-player.component.ts

@@ -48,6 +48,9 @@ export class VjsPlayerComponent implements OnInit, OnDestroy {
         this.checkVideoUrl();
     }
 
+    @Input()
+    public showParticles: boolean;
+
     @Output()
     private started: EventEmitter<void> = new EventEmitter();
 

client/src/app/shared/directives/resized.directive.ts

@@ -1,10 +1,15 @@
 import { Directive, ElementRef, Input, OnInit } from '@angular/core';
 
 import { ResizeSensor } from 'css-element-queries';
+import { Interface } from 'readline';
 import { Subject } from 'rxjs';
 
+export interface ElementSize {
+    width: number;
+    height: number;
+}
 /**
- * This directive takes a Subject<void> as input and everytime the surrounding element
+ * This directive takes a Subject<ElementSize> as input and everytime the surrounding element
  * was resized, the subject is fired.
  *
  * Usage:
@@ -15,7 +20,7 @@ import { Subject } from 'rxjs';
 })
 export class ResizedDirective implements OnInit {
     @Input()
-    public osResized: Subject<void>;
+    public osResized: Subject<ElementSize>;
 
     /**
      * Old width, to check, if the width has actually changed.
@@ -54,7 +59,10 @@ export class ResizedDirective implements OnInit {
         this.oldHeight = newHeight;
 
         if (this.osResized) {
-            this.osResized.next();
+            this.osResized.next({
+                width: newWidth,
+                height: newHeight
+            });
         }
     }
 }

client/src/app/shared/shared.module.ts

@@ -130,6 +130,10 @@ import { JitsiComponent } from './components/jitsi/jitsi.component';
 import { VjsPlayerComponent } from './components/vjs-player/vjs-player.component';
 import { LiveStreamComponent } from './components/live-stream/live-stream.component';
 import { ListOfSpeakersContentComponent } from './components/list-of-speakers-content/list-of-speakers-content.component';
+import { ApplauseDisplayComponent } from './components/applause-display/applause-display.component';
+import { ProgressComponent } from './components/progress/progress.component';
+import { NgParticlesModule } from 'ng-particles';
+import { ParticleDisplayComponent } from './components/particle-display/particle-display.component';
 
 /**
  * Share Module for all "dumb" components and pipes.
@@ -194,7 +198,8 @@ import { ListOfSpeakersContentComponent } from './components/list-of-speakers-co
         PblNgridTargetEventsModule,
         PdfViewerModule,
         NgxMaterialTimepickerModule,
-        ChartsModule
+        ChartsModule,
+        NgParticlesModule
     ],
     exports: [
         FormsModule,
@@ -364,7 +369,10 @@ import { ListOfSpeakersContentComponent } from './components/list-of-speakers-co
         JitsiComponent,
         VjsPlayerComponent,
         LiveStreamComponent,
-        ListOfSpeakersContentComponent
+        ListOfSpeakersContentComponent,
+        ApplauseDisplayComponent,
+        ProgressComponent,
+        ParticleDisplayComponent
     ],
     providers: [
         {

client/src/app/site/common/components/start/start.component.html

@@ -13,7 +13,6 @@
 </os-head-bar>
 
 <mat-card class="spacer-bottom-60" [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
-<mat-card [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
     <ng-container *ngIf="!isEditing">
         <div class="app-content">
             <h1>{{ startContent.general_event_welcome_title | translate }}</h1>

client/src/assets/styles/component-themes.scss

@@ -9,43 +9,44 @@ $narrow-spacing: (
 );
 
 /** Import brand theme */
-@import './assets/styles/themes/default-dark.scss';
+@import '~assets/styles/themes/default-dark.scss';
-@import './assets/styles/themes/default-light.scss';
+@import '~assets/styles/themes/default-light.scss';
-@import './assets/styles/themes/green-dark.scss';
+@import '~assets/styles/themes/green-dark.scss';
-@import './assets/styles/themes/green-light.scss';
+@import '~assets/styles/themes/green-light.scss';
-@import './assets/styles/themes/red-dark.scss';
+@import '~assets/styles/themes/red-dark.scss';
-@import './assets/styles/themes/red-light.scss';
+@import '~assets/styles/themes/red-light.scss';
-@import './assets/styles/themes/solarized-dark.scss';
+@import '~assets/styles/themes/solarized-dark.scss';
 
 /** Global component style definition */
-@import './assets/styles/global-components-style.scss';
+@import '~assets/styles/global-components-style.scss';
 
 /** Import the component-related style sheets here */
-@import './app/site/site.component.scss-theme.scss';
+@import '~app/site/site.component.scss-theme.scss';
-@import './app/shared/components/projector-button/projector-button.component.scss';
+@import '~app/shared/components/projector-button/projector-button.component.scss';
-@import './app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss-theme.scss';
+@import '~app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss-theme.scss';
-@import './app/shared/components/sorting-tree/sorting-tree.component.scss';
+@import '~app/shared/components/sorting-tree/sorting-tree.component.scss';
-@import './app/shared/components/global-spinner/global-spinner.component.scss';
+@import '~app/shared/components/global-spinner/global-spinner.component.scss';
-@import './app/shared/components/tile/tile.component.scss';
+@import '~app/shared/components/tile/tile.component.scss';
-@import './app/shared/components/block-tile/block-tile.component.scss';
+@import '~app/shared/components/block-tile/block-tile.component.scss';
-@import './app/shared/components/icon-container/icon-container.component.scss';
+@import '~app/shared/components/icon-container/icon-container.component.scss';
-@import './app/site/common/components/start/start.component.scss';
+@import '~app/site/common/components/start/start.component.scss';
-@import './app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss-theme.scss';
+@import '~app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss-theme.scss';
-@import './app/site/common/components/super-search/super-search.component.scss';
+@import '~app/site/common/components/super-search/super-search.component.scss';
-@import './app/shared/components/rounded-input/rounded-input.component.scss';
+@import '~app/shared/components/rounded-input/rounded-input.component.scss';
-@import './app/shared/components/meta-text-block/meta-text-block.component.scss';
+@import '~app/shared/components/meta-text-block/meta-text-block.component.scss';
-@import './app/site/config/components/config-field/config-field.component.scss-theme.scss';
+@import '~app/site/config/components/config-field/config-field.component.scss-theme.scss';
-@import './app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.components.scss-theme.scss';
+@import '~app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.components.scss-theme.scss';
-@import './app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss';
+@import '~app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss';
-@import './app/shared/components/banner/banner.component.scss-theme.scss';
+@import '~app/shared/components/banner/banner.component.scss-theme.scss';
-@import './app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss';
+@import '~app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss';
-@import './app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss';
+@import '~app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss';
-@import './app/site/assignments/modules/assignment-poll/components/assignment-poll-detail/assignment-poll-detail-component.scss-theme.scss';
+@import '~app/site/assignments/modules/assignment-poll/components/assignment-poll-detail/assignment-poll-detail-component.scss-theme.scss';
-@import './app/shared/components/progress-snack-bar/progress-snack-bar.component.scss-theme.scss';
+@import '~app/shared/components/progress-snack-bar/progress-snack-bar.component.scss-theme.scss';
-@import './app/shared/components/jitsi/jitsi.component.scss-theme.scss';
+@import '~app/shared/components/jitsi/jitsi.component.scss-theme.scss';
-@import './app/shared/components/list-view-table/list-view-table.component.scss-theme.scss';
+@import '~app/shared/components/list-view-table/list-view-table.component.scss-theme.scss';
-@import './app/site/common/components/user-statistics/user-statistics.component.scss-theme.scss';
+@import '~app/site/common/components/user-statistics/user-statistics.component.scss-theme.scss';
-@import './app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss';
+@import '~app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss';
+@import '~app/shared/components/progress/progress.component.scss-theme.scss';
 
 /** Mix the component-related style-rules. Every single custom style goes here */
 @mixin openslides-components-theme($theme) {
@@ -72,6 +73,7 @@ $narrow-spacing: (
     @include os-list-view-table-theme($theme);
     @include os-user-statistics-style($theme);
     @include os-login-wrapper-theme($theme);
+    @include os-progress-theme($theme);
 }
 
 .openslides-default-light-theme {
@@ -126,7 +128,7 @@ $narrow-spacing: (
 /**
  * Custom configuration for light themes
  */
- [class^="openslides-"][class*="-light-theme"] {
+[class^='openslides-'][class*='-light-theme'] {
     .logo-container {
         img.dark {
             display: none;
@@ -140,7 +142,7 @@ $narrow-spacing: (
 /**
  * Custom configuration for dark themes
  */
- [class^="openslides-"][class*="-dark-theme"] {
+[class^='openslides-'][class*='-dark-theme'] {
     color: white;
     .logo-container {
         img.dark {

client/src/assets/styles/themes/default-dark.scss

@@ -1,4 +1,4 @@
-@import './assets/styles/color-palettes/os-blue';
+@import '.~assets/styles/color-palettes/os-blue';
 
 $openslides-primary: mat-palette($openslides-blue);
 $openslides-accent: mat-palette($mat-light-blue);

client/src/assets/styles/themes/default-light.scss

@@ -1,4 +1,4 @@
-@import './assets/styles/color-palettes/os-blue';
+@import '~assets/styles/color-palettes/os-blue';
 
 // Generate paletes using: https://material.io/design/color/
 // default values for mat-palette: $default: 500, $lighter: 100, $darker: 700.

client/src/assets/styles/themes/green-dark.scss

@@ -1,4 +1,4 @@
-@import './assets/styles/color-palettes/os-green.scss';
+@import '~assets/styles/color-palettes/os-green.scss';
 
 $openslides-primary: mat-palette($openslides-green);
 $openslides-accent: mat-palette($mat-amber);

client/src/assets/styles/themes/green-light.scss

@@ -1,4 +1,4 @@
-@import './assets/styles/color-palettes/os-green.scss';
+@import '~assets/styles/color-palettes/os-green.scss';
 
 $openslides-primary: mat-palette($openslides-green);
 $openslides-accent: mat-palette($mat-amber);

client/src/assets/styles/themes/red-dark.scss

@@ -1,4 +1,4 @@
-@import './assets/styles/color-palettes/os-red.scss';
+@import '~assets/styles/color-palettes/os-red.scss';
 
 $openslides-primary: mat-palette($openslides-primary-red, 500, 300, 900);
 $openslides-accent: mat-palette($mat-amber);

client/src/assets/styles/themes/red-light.scss

@@ -1,4 +1,4 @@
-@import './assets/styles/color-palettes/os-red.scss';
+@import '~assets/styles/color-palettes/os-red.scss';
 
 $openslides-primary: mat-palette($openslides-primary-red, 500, 300, 900);
 $openslides-accent: mat-palette($mat-amber);

client/src/assets/styles/themes/solarized-dark.scss

@@ -1,5 +1,5 @@
-@import './assets/styles/color-palettes/os-cyan.scss';
+@import '~assets/styles/color-palettes/os-cyan.scss';
-@import './assets/styles/color-palettes/os-gray.scss';
+@import '~assets/styles/color-palettes/os-gray.scss';
 
 $openslides-primary: mat-palette($openslides-grey);
 $openslides-accent: mat-palette($openslides-cyan);

client/src/assets/svg/clapping_hands.svg

@@ -0,0 +1,226 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg2"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   sodipodi:docname="clapping_hands.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient1782">
+      <stop
+         style="stop-color:#0c2c40;stop-opacity:1"
+         offset="0"
+         id="stop1778" />
+      <stop
+         style="stop-color:#2ca2ec;stop-opacity:1"
+         offset="1"
+         id="stop1780" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient1722">
+      <stop
+         style="stop-color:#f56055;stop-opacity:1;"
+         offset="0"
+         id="stop1718" />
+      <stop
+         style="stop-color:#f56055;stop-opacity:0;"
+         offset="1"
+         id="stop1720" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient1505">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop1501" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop1503" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1505"
+       id="linearGradient1507"
+       x1="-72.521545"
+       y1="-354.46579"
+       x2="-72.521545"
+       y2="-220.85248"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(4.5351563e-5,0.25821471)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1722"
+       id="linearGradient1724"
+       x1="1637.6523"
+       y1="687.29828"
+       x2="1637.6523"
+       y2="726.80103"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1,0,0,1.708266,4.6566406e-4,-480.80936)" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1782"
+       id="radialGradient1784"
+       cx="773.6098"
+       cy="-57.234745"
+       fx="773.6098"
+       fy="-57.234745"
+       r="507.56699"
+       gradientTransform="matrix(0.78017444,0,0,0.14366746,326.05843,630.13805)"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1080"
+     id="namedview4"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:zoom="22.627417"
+     inkscape:cx="19.730628"
+     inkscape:cy="14.778162"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g2182"
+     inkscape:snap-global="true"
+     inkscape:document-rotation="0">
+    <sodipodi:guide
+       position="-8.5967379,25.493463"
+       orientation="1,0"
+       id="guide1229" />
+    <sodipodi:guide
+       position="-5.4316862,28.164944"
+       orientation="0,-1"
+       id="guide1231" />
+  </sodipodi:namedview>
+  <g
+     id="g2441"
+     transform="matrix(0.93524686,0,0,0.93524686,-1220.0337,-836.48596)"
+     style="fill:#000000;fill-opacity:1">
+    <g
+       transform="matrix(0.76088502,0,0,0.76030764,311.54674,218.13833)"
+       id="g2397"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.13311">
+      <g
+         id="g1964-4"
+         transform="rotate(90,218.24928,1114.2299)"
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.13311">
+        <g
+           id="g1948-2"
+           style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.13311">
+          <g
+             id="g1946-2"
+             style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.13311">
+            <g
+               id="g1944-4"
+               style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.13311">
+              <path
+                 id="path1942-5"
+                 d="M 23,5.5 V 20 c 0,2.2 -1.8,4 -4,4 H 11.7 C 10.62,24 9.6,23.57 8.85,22.81 L 1,14.83 c 0,0 1.26,-1.23 1.3,-1.25 0.22,-0.19 0.49,-0.29 0.79,-0.29 0.22,0 0.42,0.06 0.6,0.16 C 3.73,13.46 8,15.91 8,15.91 V 4 C 8,3.17 8.67,2.5 9.5,2.5 10.33,2.5 11,3.17 11,4 v 7 h 1 V 1.5 C 12,0.67 12.67,0 13.5,0 14.33,0 15,0.67 15,1.5 V 11 h 1 V 2.5 C 16,1.67 16.67,1 17.5,1 18.33,1 19,1.67 19,2.5 V 11 h 1 V 5.5 C 20,4.67 20.67,4 21.5,4 22.33,4 23,4.67 23,5.5 Z"
+                 inkscape:connector-curvature="0"
+                 style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.13311" />
+            </g>
+            <g
+               transform="translate(5.4402324e-7,4.0928558e-5)"
+               id="g1944-4-0"
+               style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.13311" />
+          </g>
+        </g>
+      </g>
+    </g>
+    <g
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.894784;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(1.1175883,0,0,1.1175883,-155.61227,-104.47506)"
+       id="g2182">
+      <g
+         id="g860"
+         style="opacity:1;stroke-width:0.855545"
+         transform="matrix(1.0458649,0,0,1.0458649,-60.689016,-41.511804)">
+        <path
+           style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.855541;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
+           d="m 1326.2009,898.5852 -2.6143,2.61248 c 0.054,0.0477 0.1074,0.097 0.1593,0.14738 0.05,0.0525 0.099,0.10627 0.1459,0.16112 l 2.6168,-2.61488 z m -4.6234,-2.21282 -0.434,-3e-5 v 3.69727 c 0.1446,-0.006 0.2894,-0.006 0.434,4e-5 z m 7.1449,6.80056 -3.7002,3e-5 c 0.013,0.14447 0.013,0.28922 2e-4,0.43368 l 3.7,-2e-5 z"
+           id="path862" />
+        <path
+           style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.855541;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
+           d="m 1321.1426,895.92578 a 0.44743473,0.44743473 0 0 0 -0.4473,0.44727 v 3.69726 a 0.44743473,0.44743473 0 0 0 0.4668,0.44727 c 0.1322,-0.005 0.2643,-0.006 0.3965,0 a 0.44743473,0.44743473 0 0 0 0.4668,-0.44727 v -3.69726 a 0.44743473,0.44743473 0 0 0 -0.4473,-0.44727 z m 5.0703,2.21289 a 0.44743473,0.44743473 0 0 0 -0.3281,0.13086 l -2.6153,2.61133 a 0.44743473,0.44743473 0 0 0 0.021,0.65234 c 0.049,0.0433 0.096,0.0877 0.1426,0.13282 0.041,0.0437 0.082,0.0873 0.1191,0.13086 a 0.44743473,0.44743473 0 0 0 0.6563,0.0254 l 2.6152,-2.61524 a 0.44743473,0.44743473 0 0 0 0,-0.63281 l -0.3086,-0.30664 a 0.44743473,0.44743473 0 0 0 -0.3027,-0.12891 z m -1.1914,4.58594 a 0.44743473,0.44743473 0 0 0 -0.4453,0.48828 c 0.011,0.1179 0.011,0.23523 0,0.35352 a 0.44743473,0.44743473 0 0 0 0.4453,0.48828 h 3.7012 a 0.44743473,0.44743473 0 0 0 0.4472,-0.44727 v -0.43359 a 0.44743473,0.44743473 0 0 0 -0.4472,-0.44922 z"
+           id="path864" />
+      </g>
+    </g>
+    <g
+       transform="matrix(0.86183474,0,0,0.86183474,180.09301,126.9712)"
+       id="g2397-4"
+       style="fill:#000000;fill-opacity:1">
+      <g
+         id="g1964-4-5"
+         transform="rotate(90,218.24928,1114.2299)"
+         style="fill:#000000;fill-opacity:1">
+        <g
+           id="g1948-2-0"
+           style="fill:#000000;fill-opacity:1">
+          <g
+             id="g1946-2-57"
+             style="fill:#000000;fill-opacity:1">
+            <g
+               id="g1944-4-32"
+               style="fill:#000000;fill-opacity:1" />
+            <g
+               transform="translate(5.4402324e-7,4.0928558e-5)"
+               id="g1944-4-0-2"
+               style="fill:#000000;fill-opacity:1" />
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+  <path
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.806028"
+     d="M 6.5569914,2.9864148 0.87698077,8.56734 C 0.33613684,9.1006455 0.03031238,9.8273997 0.03031238,10.595361 v 5.189794 c 0,1.181491 0.73189623,2.199492 1.76396712,2.62764 -0.00888,-0.08924 -0.02737,-0.174463 -0.02737,-0.265356 v -5.191514 c 0,-0.955146 0.3829864,-1.864797 1.0569667,-2.529425 L 6.3743238,6.9356205 C 6.8910656,6.0338659 7.5323796,4.9178609 7.538295,4.8989906 7.6098007,4.7710011 7.6521007,4.6281034 7.6521007,4.4716724 7.6521007,4.2583484 7.5805947,4.066391 7.4451576,3.90996 7.4310282,3.8814651 6.5571713,2.9864148 6.5571713,2.9864148 Z m 3.8401146,4.9778558 c -0.02737,0.048433 -0.0459,0.080279 -0.07769,0.1361228 C 10.154314,8.3899921 9.9344832,8.7732978 9.7158851,9.1548918 9.5822184,9.3881797 9.5695934,9.4091143 9.4485527,9.6201187 h 5.6800103 c 0.116884,-0.1710937 0.201821,-0.3659799 0.201821,-0.5892814 0,-0.5901895 -0.476748,-1.0665667 -1.067387,-1.0665667 z"
+     id="path1942-5-3" />
+</svg>

client/src/styles.scss

@@ -1,18 +1,18 @@
 /** theming */
-@import './assets/styles/component-themes.scss';
+@import '~assets/styles/component-themes.scss';
 
 /** fonts */
-@import './assets/styles/fonts.scss';
+@import '~assets/styles/fonts.scss';
 @import '~material-icon-font/dist/Material-Icons.css';
 
 /** Videojs */
 @import '~video.js/dist/video-js.css';
 
 /** Load projector specific SCSS values */
-@import './assets/styles/projector.scss';
+@import '~assets/styles/projector.scss';
 
 /** Load global scss variables and device mixing */
-@import './assets/styles/variables.scss';
+@import '~assets/styles/variables.scss';
 
 .pbl-ngrid-cell {
     .fill {
@@ -788,3 +788,7 @@ button.mat-menu-item.selected {
 .hide {
     display: none;
 }
+
+.hide-height {
+    height: 0 !important;
+}

server/docker/Dockerfile.dev

@@ -15,7 +15,6 @@ RUN apt-get -y update &&  apt-get install --no-install-recommends -y \
     libxmlsec1-dev \
     libxmlsec1-openssl \
     pkg-config
-  
 RUN rm -rf /var/lib/apt/lists/*
 
 COPY requirements /app/requirements

server/openslides/core/config_variables.py

@@ -169,6 +169,85 @@ def get_config_variables():
         subgroup="Live conference",
     )
 
+    # Applause
+
+    yield ConfigVariable(
+        name="general_system_applause_enable",
+        default_value=False,
+        input_type="boolean",
+        label="Enable virtual applause",
+        help_text="Shows a 'Send applause' icon in the live stream bar",
+        weight=170,
+        subgroup="Virtual applause",
+    )
+
+    yield ConfigVariable(
+        name="general_system_applause_type",
+        default_value="applause-type-bar",
+        input_type="choice",
+        choices=(
+            {
+                "value": "applause-type-bar",
+                "display_name": "Bar",
+            },
+            {
+                "value": "applause-type-particles",
+                "display_name": "Particles",
+            },
+        ),
+        label="Applause Type",
+        weight=171,
+        subgroup="Virtual applause",
+    )
+
+    yield ConfigVariable(
+        name="general_system_applause_show_level",
+        default_value=False,
+        input_type="boolean",
+        label="Show applause amount",
+        weight=172,
+        subgroup="Virtual applause",
+    )
+
+    yield ConfigVariable(
+        name="general_system_applause_min_amount",
+        default_value=1,
+        input_type="integer",
+        label="Lowest applause amount",
+        help_text="Lowest amount required for OpenSlides to recognize applause",
+        weight=173,
+        subgroup="Virtual applause",
+    )
+
+    yield ConfigVariable(
+        name="general_system_applause_max_amount",
+        default_value=0,
+        input_type="integer",
+        label="Highest applause amount",
+        help_text="Defines the maximum deflection of the amount. Entering zero will use the amount of present users instead.",
+        weight=174,
+        subgroup="Virtual applause",
+    )
+
+    yield ConfigVariable(
+        name="general_system_stream_applause_timeout",
+        default_value=5,
+        input_type="integer",
+        label="Applause timeout in seconds",
+        help_text="Determines how long a user has to wait to applaud again. Also determines the time in which applause is collected",
+        weight=175,
+        subgroup="Virtual applause",
+    )
+
+    yield ConfigVariable(
+        name="general_system_applause_particle_image",
+        default_value="",
+        label="Applause particle image url",
+        help_text="Shows the given image as applause particle. Recommended image format: 24x24px, PNG, JPG or SVG",
+        weight=176,
+        subgroup="Virtual applause",
+    )
+
     # General System
 
     yield ConfigVariable(