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">
<!-- Title Card -->
<mat-card class="os-card">
<h1 class="line-and-icon">
{{ title }}
<a
mat-icon-button
[disabled]="!viewModelUrl"
[class.disabled]="!viewModelUrl"
[routerLink]="viewModelUrl"
[state]="{ back: 'true' }"
>
<mat-icon>open_in_new</mat-icon>
</a>
</h1>
<a [routerLink]="viewModelUrl || null" [state]="{ back: 'true' }">
<h1 class="line-and-icon">
{{ title }}
</h1>
</a>
</mat-card>
<!-- List of speakers -->
@ -25,6 +18,7 @@
[customTitle]="true"
[speakers]="listOfSpeakers"
*osPerms="permission.agendaCanSeeListOfSpeakers; and: listOfSpeakers"
(canReaddLastSpeakerEvent)="canReaddLastSpeaker = $event"
>
<p class="line-and-icon subtitle-text">
<a [routerLink]="closUrl" [class.disabled]="!closUrl">
@ -37,19 +31,26 @@
</mat-icon>
</ng-container>
<button
*osPerms="permission.agendaCanManageListOfSpeakers"
mat-icon-button
(click)="toggleListOfSpeakersOpen()"
>
<mat-icon *ngIf="isLosClosed" matTooltip="{{ 'The list of speakers is closed.' | translate }}">
lock
</mat-icon>
<ng-container *osPerms="permission.agendaCanManageListOfSpeakers">
<button mat-icon-button (click)="toggleListOfSpeakersOpen()">
<mat-icon *ngIf="isLosClosed" matTooltip="{{ 'The list of speakers is closed.' | translate }}">
lock
</mat-icon>
<mat-icon *ngIf="!isLosClosed" matTooltip="{{ 'The list of speakers is open.' | translate }}">
lock_open
</mat-icon>
</button>
<mat-icon *ngIf="!isLosClosed" matTooltip="{{ 'The list of speakers is open.' | translate }}">
lock_open
</mat-icon>
</button>
<button
mat-icon-button
(click)="readdLastSpeaker()"
matTooltip="{{ 'Re-add last speaker' | translate }}"
[disabled]="!canReaddLastSpeaker"
>
<mat-icon> undo </mat-icon>
</button>
</ng-container>
</p>
</os-list-of-speakers-content>
@ -57,8 +58,11 @@
<!-- Projector -->
<mat-card class="os-card spacer-bottom-60">
<p class="subtitle-text">{{ projectorTitle | translate }}</p>
<a [routerLink]="projectorUrl" [target]="projectionTarget">
<a [routerLink]="projectorUrl" [target]="projectionTarget" [state]="{ back: 'true' }">
<p class="subtitle-text">{{ projectorTitle | translate }}</p>
</a>
<a [routerLink]="viewModelUrl || null" [state]="{ back: 'true' }">
<div class="projector">
<os-projector *ngIf="projector" [projector]="projector"></os-projector>
</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 { Title } from '@angular/platform-browser';
@ -22,12 +22,17 @@ import { CurrentListOfSpeakersService } from 'app/site/projector/services/curren
styleUrls: ['./cinema.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CinemaComponent extends BaseViewComponentDirective implements OnInit {
export class CinemaComponent extends BaseViewComponentDirective implements OnInit, AfterViewInit {
public listOfSpeakers: ViewListOfSpeakers;
public projector: ViewProjector;
private currentProjectorElement: ProjectorElement;
public projectedViewModel: BaseProjectableViewModel;
/**
* filled by child component
*/
public canReaddLastSpeaker: boolean;
public get title(): string {
if (this.projectedViewModel) {
return this.projectedViewModel.getListTitle();
@ -109,7 +114,7 @@ export class CinemaComponent extends BaseViewComponentDirective implements OnIni
} else {
this.projectedViewModel = null;
}
this.cd.markForCheck();
this.delayedCheck();
}),
this.closService.currentListOfSpeakersObservable.subscribe(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> {
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);
}
}