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

Refine AP Interaction

client/src/app/site/cinema/components/cinema/cinema.component.html

@@ -6,18 +6,11 @@
 <div class="content-container">
     <!-- Title Card -->
     <mat-card class="os-card">
-        <h1 class="line-and-icon">
+        <a [routerLink]="viewModelUrl || null" [state]="{ back: 'true' }">
-            {{ title }}
+            <h1 class="line-and-icon">
-            <a
+                {{ title }}
-                mat-icon-button
+            </h1>
-                [disabled]="!viewModelUrl"
+        </a>
-                [class.disabled]="!viewModelUrl"
-                [routerLink]="viewModelUrl"
-                [state]="{ back: 'true' }"
-            >
-                <mat-icon>open_in_new</mat-icon>
-            </a>
-        </h1>
     </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
+            <ng-container *osPerms="permission.agendaCanManageListOfSpeakers">
-                *osPerms="permission.agendaCanManageListOfSpeakers"
+                <button mat-icon-button (click)="toggleListOfSpeakersOpen()">
-                mat-icon-button
+                    <mat-icon *ngIf="isLosClosed" matTooltip="{{ 'The list of speakers is closed.' | translate }}">
-                (click)="toggleListOfSpeakersOpen()"
+                        lock
-            >
+                    </mat-icon>
-                <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 }}">
+                    <mat-icon *ngIf="!isLosClosed" matTooltip="{{ 'The list of speakers is open.' | translate }}">
-                    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>
     </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" [state]="{ back: 'true' }">
-        <a [routerLink]="projectorUrl" [target]="projectionTarget">
+            <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>

client/src/app/site/cinema/components/cinema/cinema.component.ts

@@ -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);
+    }
 }