From 2cfff9e1b9640332d671e055a06d8814c5f6f6b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emanuel=20Sch=C3=BCtze?= <emanuel@intevation.de>
Date: Fri, 17 May 2019 08:56:18 +0200
Subject: [PATCH] Template rework and fullscreen mode

---
 .../slide-container.component.scss            |  4 +--
 .../site/mediafiles/models/view-mediafile.ts  |  1 -
 .../presentation-control.component.html       | 27 ++++++--------
 .../presentation-control.component.ts         | 16 ---------
 ...urrent-speaker-chyron-slide.component.html |  2 +-
 .../mediafile/mediafile-slide.component.html  |  9 ++---
 .../mediafile/mediafile-slide.component.scss  | 36 ++++++++++++++-----
 7 files changed, 43 insertions(+), 52 deletions(-)

diff --git a/client/src/app/shared/components/slide-container/slide-container.component.scss b/client/src/app/shared/components/slide-container/slide-container.component.scss
index cb29e038e..ad8395fe0 100644
--- a/client/src/app/shared/components/slide-container/slide-container.component.scss
+++ b/client/src/app/shared/components/slide-container/slide-container.component.scss
@@ -10,8 +10,6 @@
         line-height: 1.5em;
     }
 }
-
-::ng-deep #slide {
-    z-index: 5;
+#slide {
     height: 100%;
 }
diff --git a/client/src/app/site/mediafiles/models/view-mediafile.ts b/client/src/app/site/mediafiles/models/view-mediafile.ts
index fa12cac5f..51a9cf5ae 100644
--- a/client/src/app/site/mediafiles/models/view-mediafile.ts
+++ b/client/src/app/site/mediafiles/models/view-mediafile.ts
@@ -17,7 +17,6 @@ export interface MediafileTitleInformation {
 
 export class ViewMediafile extends BaseViewModelWithListOfSpeakers<Mediafile>
     implements MediafileTitleInformation, Searchable {
-
     public static COLLECTIONSTRING = Mediafile.COLLECTIONSTRING;
 
     private _uploader: ViewUser;
diff --git a/client/src/app/site/projector/components/presentation-control/presentation-control.component.html b/client/src/app/site/projector/components/presentation-control/presentation-control.component.html
index 41e285865..a3b01a6e6 100644
--- a/client/src/app/site/projector/components/presentation-control/presentation-control.component.html
+++ b/client/src/app/site/projector/components/presentation-control/presentation-control.component.html
@@ -1,22 +1,19 @@
 <mat-expansion-panel *ngIf="elements.length">
     <mat-expansion-panel-header>
-            <span translate>Media controls</span>
+        <span translate>Media file</span>
     </mat-expansion-panel-header>
-    <h5 translate>Presentation control</h5>
     <div *ngFor="let element of elements">
-        {{ getMediafile(element).getTitle() }}
-        <span *ngIf="getMediafile(element).isImage()">
+        <i>{{ getMediafile(element).getTitle() }}</i>
+        <div *ngIf="getMediafile(element).isImage()">
             <button type="button" *ngIf="!element.fullscreen" mat-icon-button (click)="fullscreen(element)">
-                <mat-icon>fullscreen</mat-icon>
+                <mat-icon>check_box_outline_blank</mat-icon>
             </button>
             <button type="button" *ngIf="!!element.fullscreen" mat-icon-button (click)="fullscreen(element)">
-                <mat-icon>fullscreen_exit</mat-icon>
+                <mat-icon>check_box</mat-icon>
             </button>
-            <button type="button" mat-icon-button (click)="rotate(element)">
-                <mat-icon>refresh</mat-icon>
-            </button>
-        </span>
-        <span *ngIf="getMediafile(element).isPdf()">
+            <span translate>fullscreen</span>
+        </div>
+        <div *ngIf="getMediafile(element).isPdf()">
             <button type="button" mat-icon-button (click)="pdfBackward(element)" [disabled]="getPage(element) <= 1">
                 <mat-icon>arrow_back</mat-icon>
             </button>
@@ -24,10 +21,8 @@
                 <mat-icon>arrow_forward</mat-icon>
             </button>
             <!-- TODO: Use form for page number; use pdfSetPage then. -->
-            Page {{ getPage(element) }}/{{ getMediafile(element).pages }}
-            <button type="button" mat-icon-button (click)="rotate(element)">
-                <mat-icon>refresh</mat-icon>
-            </button>
+            <span translate>Page</span> {{ getPage(element) }}/{{ getMediafile(element).pages }}
+            <br>
             <button type="button" mat-icon-button (click)="zoom(element, 'in')">
                 <mat-icon>zoom_in</mat-icon>
             </button>
@@ -37,6 +32,6 @@
             <button type="button" mat-icon-button (click)="zoom(element, 'out')">
                 <mat-icon>zoom_out</mat-icon>
             </button>
-        </span>
+        </div>
     </div>
 </mat-expansion-panel>
diff --git a/client/src/app/site/projector/components/presentation-control/presentation-control.component.ts b/client/src/app/site/projector/components/presentation-control/presentation-control.component.ts
index 5618204ff..5eafcf77b 100644
--- a/client/src/app/site/projector/components/presentation-control/presentation-control.component.ts
+++ b/client/src/app/site/projector/components/presentation-control/presentation-control.component.ts
@@ -137,22 +137,6 @@ export class PresentationControlComponent extends BaseViewComponent {
         this.updateElement(element);
     }
 
-    public rotate(element: MediafileProjectorElement): void {
-        let rotation: 0 | 90 | 180 | 270 = element.rotation || 0;
-        if (rotation === 0) {
-            rotation = 90;
-        } else if (rotation === 90) {
-            rotation = 180;
-        } else if (rotation === 180) {
-            rotation = 270;
-        } else {
-            // 270
-            rotation = 0;
-        }
-        element.rotation = rotation;
-        this.updateElement(element);
-    }
-
     private updateElement(element: MediafileProjectorElement): void {
         const idElement = this.slideManager.getIdentifialbeProjectorElement(element);
         this.projectorService.updateElement(this.projector.projector, idElement).then(null, this.raiseError);
diff --git a/client/src/app/slides/agenda/current-speaker-chyron/current-speaker-chyron-slide.component.html b/client/src/app/slides/agenda/current-speaker-chyron/current-speaker-chyron-slide.component.html
index eba96bae0..81ff50cb8 100644
--- a/client/src/app/slides/agenda/current-speaker-chyron/current-speaker-chyron-slide.component.html
+++ b/client/src/app/slides/agenda/current-speaker-chyron/current-speaker-chyron-slide.component.html
@@ -1,4 +1,4 @@
-<div id="chyron" *ngIf="data"[ngStyle]="{
+<div id="chyron" *ngIf="data" [ngStyle]="{
     'background-color': data.data.background_color,
     color: data.data.font_color}">
 
diff --git a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html
index 225838d5b..618db8aa4 100644
--- a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html
+++ b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html
@@ -1,10 +1,8 @@
 <div *ngIf="data">
-    <div *ngIf="isImage">
-        <img [src]="url" alt="" [ngClass]="'rotate' + (data.element.rotation || 0)"/>
-        {{ data.element.fullscreen || false }}
+    <div *ngIf="isImage" [ngClass]="data.element.fullscreen ? 'fullscreen' : 'nofullscreen'" >
+        <img [src]="url" alt="" />
     </div>
-    <div *ngIf="isPdf">
-        {{ data.element.rotation || 0 }}
+    <div *ngIf="isPdf" class="fullscreen">
         <pdf-viewer
             [show-all]="false"
             [original-size]="false"
@@ -12,7 +10,6 @@
             [autoresize]="true"
             [page]="data.element.page || 1"
             [zoom]="zoom"
-            [rotation]="data.element.rotation || 0"
             [src]="url"
             style="display: block;"></pdf-viewer>
     </div>
diff --git a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.scss b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.scss
index 53fc4c228..0ff1a9b0f 100644
--- a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.scss
+++ b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.scss
@@ -1,12 +1,30 @@
-.rotate0 {
-    transform: rotate(0deg);
+.fullscreen img,
+.nofullscreen img {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
 }
-.rotate90 {
-    transform: rotate(90deg);
+.fullscreen {
+    z-index: 100; /* TODO: find solution to overlap header/footer */
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    img {
+        width: 100%;
+        height: auto; /* TODO: use dynamic auto width/height for landscape/portrait format */
+    }
 }
-.rotate180 {
-    transform: rotate(180deg);
-}
-.rotate270 {
-    transform: rotate(270deg);
+
+.nofullscreen {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
 }