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

Replace meeting room keyframe animation

Browse Source 
Replaces the meeting room keyframe css animation with anuglar
animations.
The css keyframe animation declaration was
"optimized away" on prod build
This commit is contained in:
Sean 2020-08-11 14:55:59 +02:00 committed by Emanuel Schütze
parent ccc3e38427
commit c0f5c7b548
3 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/app/shared/components/jitsi/jitsi.component.html
View File

@ -90,12 +90,7 @@
(click)="enterConversation()"
matTooltip="{{ 'Enter live conference' | translate }}"
>
<mat-icon
color="primary"
[ngClass]="{
'enter-meeting-room': !canManageSpeaker
}"
>
<mat-icon color="primary" [@fadeInOut]="isEnterMeetingRoomVisible" (@fadeInOut.done)="triggerMeetingRoomButtonAnimation()">
meeting_room
</mat-icon>
</button>

16
client/src/app/shared/components/jitsi/jitsi.component.scss
View File

@ -75,22 +75,6 @@
text-align: center;
margin: auto $wrapper-padding auto 0;
}
/**
* appear animation
*/
@keyframes fade-in-out {
from {
opacity: 100%;
}
to {
opacity: 25%;
}
}
.enter-meeting-room {
animation: fade-in-out 1s linear infinite alternate;
}
}
.stream-width-wrapper {

51
client/src/app/shared/components/jitsi/jitsi.component.ts
View File

@ -1,10 +1,11 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Title } from '@angular/platform-browser';
import { StorageMap } from '@ngx-pwa/local-storage';
import { TranslateService } from '@ngx-translate/core';
import { distinctUntilChanged, map } from 'rxjs/operators';
import { delay, distinctUntilChanged, map } from 'rxjs/operators';
import { ConstantsService } from 'app/core/core-services/constants.service';
import { OperatorService } from 'app/core/core-services/operator.service';
@ -55,6 +56,23 @@ enum ConferenceState {
selector: 'os-jitsi',
templateUrl: './jitsi.component.html',
styleUrls: ['./jitsi.component.scss'],
animations: [
trigger('fadeInOut', [
state(
'true',
style({
opacity: 1
})
),
state(
'false',
style({
opacity: 0.2
})
),
transition('true <=> false', animate('1s'))
])
],
encapsulation: ViewEncapsulation.None
})
export class JitsiComponent extends BaseViewComponent implements OnInit, OnDestroy {
@ -114,15 +132,11 @@ export class JitsiComponent extends BaseViewComponent implements OnInit, OnDestr
return this.roomPassword?.length > 0;
}
public get canSeeLiveStream(): boolean {
return this.operator.hasPerms(this.permission.coreCanSeeLiveStream);
}
private isOnCurrentLos: boolean;
public get canManageSpeaker(): boolean {
return this.operator.hasPerms(this.permission.agendaCanManageListOfSpeakers);
}
public canSeeLiveStream: boolean;
public canManageSpeaker: boolean;
public get isAccessPermitted(): boolean {
return !this.restricted || this.canManageSpeaker || this.isOnCurrentLos;
@ -138,6 +152,7 @@ export class JitsiComponent extends BaseViewComponent implements OnInit, OnDestr
*/
public state = ConferenceState;
public currentState: ConferenceState;
public isEnterMeetingRoomVisible = true;
private configOverwrite = {
startAudioOnly: false,
@ -218,6 +233,14 @@ export class JitsiComponent extends BaseViewComponent implements OnInit, OnDestr
await this.stopConference();
}
public triggerMeetingRoomButtonAnimation(): void {
if (this.canManageSpeaker) {
this.isEnterMeetingRoomVisible = true;
} else {
this.isEnterMeetingRoomVisible = !this.isEnterMeetingRoomVisible;
}
}
private async stopConference(): Promise<void> {
await this.stopJitsi();
if (this.streamActiveInAnotherTab && this.streamRunning) {
@ -227,6 +250,16 @@ export class JitsiComponent extends BaseViewComponent implements OnInit, OnDestr
private async setUp(): Promise<void> {
this.subscriptions.push(
// if the operators users has changes, check if we have to start the animation
this.operator
.getUserObservable()
.pipe(delay(0))
.subscribe(() => {
this.canManageSpeaker = this.operator.hasPerms(this.permission.agendaCanManageListOfSpeakers);
this.canSeeLiveStream = this.operator.hasPerms(this.permission.coreCanSeeLiveStream);
this.isEnterMeetingRoomVisible = this.canManageSpeaker;
}),
this.storageMap
.watch(this.RTC_LOGGED_STORAGE_KEY)
.pipe(distinctUntilChanged())
@ -312,7 +345,7 @@ export class JitsiComponent extends BaseViewComponent implements OnInit, OnDestr
)
.subscribe(isOnList => {
this.isOnCurrentLos = isOnList;
console.log('this.isOnCurrentLos: ', this.isOnCurrentLos);
this.triggerMeetingRoomButtonAnimation();
if (!this.isAccessPermitted) {
this.viewStream();