Refine AP Interaction

In auto pilot view:
klicking the projector opens the content object (rather than the
projector detail view)
clicking AP title now opens the content objects as normal link, rather
than having an "open external" icon
clicking the projector name opens the projector detail view
add "readd last speaker" in AP

Some CD Enhancements for AP Projector

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