Merge pull request #6084 from tsiegleauq/cinema-interaction-enhanced

Refine AP Interaction
This commit is contained in:
Emanuel Schütze 2021-05-27 21:10:29 +02:00 committed by GitHub
commit 5d57301fb0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 29 deletions

View File

@ -6,18 +6,11 @@
<div class="content-container"> <div class="content-container">
<!-- Title Card --> <!-- Title Card -->
<mat-card class="os-card"> <mat-card class="os-card">
<a [routerLink]="viewModelUrl || null" [state]="{ back: 'true' }">
<h1 class="line-and-icon"> <h1 class="line-and-icon">
{{ title }} {{ title }}
<a
mat-icon-button
[disabled]="!viewModelUrl"
[class.disabled]="!viewModelUrl"
[routerLink]="viewModelUrl"
[state]="{ back: 'true' }"
>
<mat-icon>open_in_new</mat-icon>
</a>
</h1> </h1>
</a>
</mat-card> </mat-card>
<!-- List of speakers --> <!-- List of speakers -->
@ -25,6 +18,7 @@
[customTitle]="true" [customTitle]="true"
[speakers]="listOfSpeakers" [speakers]="listOfSpeakers"
*osPerms="permission.agendaCanSeeListOfSpeakers; and: listOfSpeakers" *osPerms="permission.agendaCanSeeListOfSpeakers; and: listOfSpeakers"
(canReaddLastSpeakerEvent)="canReaddLastSpeaker = $event"
> >
<p class="line-and-icon subtitle-text"> <p class="line-and-icon subtitle-text">
<a [routerLink]="closUrl" [class.disabled]="!closUrl"> <a [routerLink]="closUrl" [class.disabled]="!closUrl">
@ -37,11 +31,8 @@
</mat-icon> </mat-icon>
</ng-container> </ng-container>
<button <ng-container *osPerms="permission.agendaCanManageListOfSpeakers">
*osPerms="permission.agendaCanManageListOfSpeakers" <button mat-icon-button (click)="toggleListOfSpeakersOpen()">
mat-icon-button
(click)="toggleListOfSpeakersOpen()"
>
<mat-icon *ngIf="isLosClosed" matTooltip="{{ 'The list of speakers is closed.' | translate }}"> <mat-icon *ngIf="isLosClosed" matTooltip="{{ 'The list of speakers is closed.' | translate }}">
lock lock
</mat-icon> </mat-icon>
@ -50,6 +41,16 @@
lock_open lock_open
</mat-icon> </mat-icon>
</button> </button>
<button
mat-icon-button
(click)="readdLastSpeaker()"
matTooltip="{{ 'Re-add last speaker' | translate }}"
[disabled]="!canReaddLastSpeaker"
>
<mat-icon> undo </mat-icon>
</button>
</ng-container>
</p> </p>
</os-list-of-speakers-content> </os-list-of-speakers-content>
@ -57,8 +58,11 @@
<!-- Projector --> <!-- Projector -->
<mat-card class="os-card spacer-bottom-60"> <mat-card class="os-card spacer-bottom-60">
<a [routerLink]="projectorUrl" [target]="projectionTarget" [state]="{ back: 'true' }">
<p class="subtitle-text">{{ projectorTitle | translate }}</p> <p class="subtitle-text">{{ projectorTitle | translate }}</p>
<a [routerLink]="projectorUrl" [target]="projectionTarget"> </a>
<a [routerLink]="viewModelUrl || null" [state]="{ back: 'true' }">
<div class="projector"> <div class="projector">
<os-projector *ngIf="projector" [projector]="projector"></os-projector> <os-projector *ngIf="projector" [projector]="projector"></os-projector>
</div> </div>

View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core'; import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { Title } from '@angular/platform-browser'; import { Title } from '@angular/platform-browser';
@ -22,12 +22,17 @@ import { CurrentListOfSpeakersService } from 'app/site/projector/services/curren
styleUrls: ['./cinema.component.scss'], styleUrls: ['./cinema.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class CinemaComponent extends BaseViewComponentDirective implements OnInit { export class CinemaComponent extends BaseViewComponentDirective implements OnInit, AfterViewInit {
public listOfSpeakers: ViewListOfSpeakers; public listOfSpeakers: ViewListOfSpeakers;
public projector: ViewProjector; public projector: ViewProjector;
private currentProjectorElement: ProjectorElement; private currentProjectorElement: ProjectorElement;
public projectedViewModel: BaseProjectableViewModel; public projectedViewModel: BaseProjectableViewModel;
/**
* filled by child component
*/
public canReaddLastSpeaker: boolean;
public get title(): string { public get title(): string {
if (this.projectedViewModel) { if (this.projectedViewModel) {
return this.projectedViewModel.getListTitle(); return this.projectedViewModel.getListTitle();
@ -109,7 +114,7 @@ export class CinemaComponent extends BaseViewComponentDirective implements OnIni
} else { } else {
this.projectedViewModel = null; this.projectedViewModel = null;
} }
this.cd.markForCheck(); this.delayedCheck();
}), }),
this.closService.currentListOfSpeakersObservable.subscribe(clos => { this.closService.currentListOfSpeakersObservable.subscribe(clos => {
this.listOfSpeakers = clos; this.listOfSpeakers = clos;
@ -118,7 +123,27 @@ export class CinemaComponent extends BaseViewComponentDirective implements OnIni
); );
} }
public ngAfterViewInit(): void {
this.delayedCheck();
}
public async toggleListOfSpeakersOpen(): Promise<void> { public async toggleListOfSpeakersOpen(): Promise<void> {
await this.listOfSpeakersRepo.setListOpenness(this.listOfSpeakers, this.isLosClosed).catch(this.raiseError); await this.listOfSpeakersRepo.setListOpenness(this.listOfSpeakers, this.isLosClosed).catch(this.raiseError);
} }
public async readdLastSpeaker(): Promise<void> {
await this.listOfSpeakersRepo.readdLastSpeaker(this.listOfSpeakers).catch(this.raiseError);
}
/**
* Ref Projector Update fireing and Projector content updates
* are not in sync.
* This is a deep projector issue, OpenSlides has no chance
* to really know when the projector content is ready
*/
private delayedCheck(): void {
setTimeout(() => {
this.cd.markForCheck();
}, 2000);
}
} }