Template rework and fullscreen mode

client/src/app/shared/components/slide-container/slide-container.component.scss

@@ -10,8 +10,6 @@
         line-height: 1.5em;
     }
 }
-
+#slide {
-::ng-deep #slide {
-    z-index: 5;
     height: 100%;
 }

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;

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() }}
+        <i>{{ getMediafile(element).getTitle() }}</i>
-        <span *ngIf="getMediafile(element).isImage()">
+        <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)">
+            <span translate>fullscreen</span>
-                <mat-icon>refresh</mat-icon>
+        </div>
-            </button>
+        <div *ngIf="getMediafile(element).isPdf()">
-        </span>
-        <span *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 }}
+            <span translate>Page</span> {{ getPage(element) }}/{{ getMediafile(element).pages }}
-            <button type="button" mat-icon-button (click)="rotate(element)">
+            <br>
-                <mat-icon>refresh</mat-icon>
-            </button>
             <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>

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

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}">
 

client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html

@@ -1,10 +1,8 @@
 <div *ngIf="data">
-    <div *ngIf="isImage">
+    <div *ngIf="isImage" [ngClass]="data.element.fullscreen ? 'fullscreen' : 'nofullscreen'" >
-        <img [src]="url" alt="" [ngClass]="'rotate' + (data.element.rotation || 0)"/>
+        <img [src]="url" alt="" />
-        {{ data.element.fullscreen || false }}
     </div>
-    <div *ngIf="isPdf">
+    <div *ngIf="isPdf" class="fullscreen">
-        {{ data.element.rotation || 0 }}
         <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>

client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.scss

@@ -1,12 +1,30 @@
-.rotate0 {
+.fullscreen img,
-    transform: rotate(0deg);
+.nofullscreen img {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
 }
-.rotate90 {
+.fullscreen {
-    transform: rotate(90deg);
+    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);
+.nofullscreen {
-}
+    max-width: 100%;
-.rotate270 {
+    max-height: 100%;
-    transform: rotate(270deg);
+    width: auto;
+    height: auto;
 }