From 78d107e37c7e9c9a26dd0f68806ffecb3f55fc6e Mon Sep 17 00:00:00 2001
From: FinnStutzenstein <finn.stutzenstein@hotmail.de>
Date: Wed, 27 Feb 2019 08:43:51 +0100
Subject: [PATCH] some controls, integrate the pdfviewer

---
 .../core/core-services/projector.service.ts   |  9 ++
 .../mediafile-list.component.html             |  2 +-
 .../site/mediafiles/models/view-mediafile.ts  |  8 ++
 .../presentation-control.component.html       | 34 +++++++
 .../presentation-control.component.scss       |  0
 .../presentation-control.component.spec.ts    | 26 +++++
 .../presentation-control.component.ts         | 97 +++++++++++++++++++
 .../app/site/projector/projector.module.ts    |  7 +-
 .../mediafile/mediafile-slide.component.html  | 14 ++-
 .../mediafile-slide.component.spec.ts         |  3 +-
 .../mediafile/mediafile-slide.component.ts    | 14 +--
 .../mediafile/mediafile-slide.module.ts       | 17 ++--
 12 files changed, 210 insertions(+), 21 deletions(-)
 create mode 100644 client/src/app/site/projector/components/presentation-control/presentation-control.component.html
 create mode 100644 client/src/app/site/projector/components/presentation-control/presentation-control.component.scss
 create mode 100644 client/src/app/site/projector/components/presentation-control/presentation-control.component.spec.ts
 create mode 100644 client/src/app/site/projector/components/presentation-control/presentation-control.component.ts

diff --git a/client/src/app/core/core-services/projector.service.ts b/client/src/app/core/core-services/projector.service.ts
index 1d36ee3a2..4e958b5b0 100644
--- a/client/src/app/core/core-services/projector.service.ts
+++ b/client/src/app/core/core-services/projector.service.ts
@@ -186,6 +186,15 @@ export class ProjectorService {
         }
     }
 
+    public async updateElement(
+        projector: Projector,
+        obj: Projectable | ProjectorElementBuildDeskriptor | IdentifiableProjectorElement
+    ): Promise<void> {
+        const element = this.getProjectorElement(obj);
+        projector.replaceElements(element);
+        await this.projectRequest(projector, projector.elements, projector.elements_preview);
+    }
+
     /**
      * Executes the request to change projector elements.
      *
diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
index 168e6c4be..87659fb3d 100644
--- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
+++ b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
@@ -71,7 +71,7 @@
         <ng-container matColumnDef="projector">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Projector</mat-header-cell>
             <mat-cell *matCellDef="let file">
-                <os-projector-button [object]="file"></os-projector-button>
+                <os-projector-button *ngIf="file.isProjectable()" [object]="file"></os-projector-button>
             </mat-cell>
         </ng-container>
 
diff --git a/client/src/app/site/mediafiles/models/view-mediafile.ts b/client/src/app/site/mediafiles/models/view-mediafile.ts
index dbeb91857..bc4cc4fb0 100644
--- a/client/src/app/site/mediafiles/models/view-mediafile.ts
+++ b/client/src/app/site/mediafiles/models/view-mediafile.ts
@@ -57,6 +57,10 @@ export class ViewMediafile extends BaseViewModelWithListOfSpeakers<Mediafile>
         return this.mediafile.downloadUrl;
     }
 
+    public get pages(): number | null {
+        return this.mediafile.mediafile.pages;
+    }
+
     /**
      * Determines if the file has the 'hidden' attribute
      * @returns the hidden attribute, also 'hidden' if there is no file
@@ -96,6 +100,10 @@ export class ViewMediafile extends BaseViewModelWithListOfSpeakers<Mediafile>
         };
     }
 
+    public isProjectable(): boolean {
+        return this.isImage() || this.isPdf();
+    }
+
     /**
      * Determine if the file is an image
      *
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
new file mode 100644
index 000000000..93b737280
--- /dev/null
+++ b/client/src/app/site/projector/components/presentation-control/presentation-control.component.html
@@ -0,0 +1,34 @@
+<h5 *ngIf="elements.length" translate>Presentation control</h5>
+<div *ngFor="let element of elements">
+    {{ getMediafile(element).getTitle() }}
+    <span *ngIf="getMediafile(element).isImage()">
+        <button type="button" mat-icon-button (click)="imageFullscreen(element)">
+            <mat-icon>fullscreen</mat-icon>
+        </button>
+        <button type="button" mat-icon-button (click)="imageRotate(element)">
+            <mat-icon>refresh</mat-icon>
+        </button>
+    </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>
+        <button type="button" mat-icon-button (click)="pdfForward(element)" [disabled]="getPage(element) >= getMediafile(element).pages">
+            <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)="pdfRotate(element)">
+            <mat-icon>refresh</mat-icon>
+        </button>
+        <button type="button" mat-icon-button (click)="pdfZoom(element, 'in')">
+            <mat-icon>zoom_in</mat-icon>
+        </button>
+        <button type="button" mat-icon-button (click)="pdfZoom(element, 'reset')">
+            <mat-icon>replay</mat-icon>
+        </button>
+        <button type="button" mat-icon-button (click)="pdfZoom(element, 'out')">
+            <mat-icon>zoom_out</mat-icon>
+        </button>
+    </span>
+</div>
diff --git a/client/src/app/site/projector/components/presentation-control/presentation-control.component.scss b/client/src/app/site/projector/components/presentation-control/presentation-control.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/app/site/projector/components/presentation-control/presentation-control.component.spec.ts b/client/src/app/site/projector/components/presentation-control/presentation-control.component.spec.ts
new file mode 100644
index 000000000..b4cce692c
--- /dev/null
+++ b/client/src/app/site/projector/components/presentation-control/presentation-control.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../../../e2e-imports.module';
+import { PresentationControlComponent } from './presentation-control.component';
+import { ProjectorModule } from '../../projector.module';
+
+describe('PresentationControlComponent', () => {
+    let component: PresentationControlComponent;
+    let fixture: ComponentFixture<PresentationControlComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule, ProjectorModule]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PresentationControlComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
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
new file mode 100644
index 000000000..6c7bf4bb7
--- /dev/null
+++ b/client/src/app/site/projector/components/presentation-control/presentation-control.component.ts
@@ -0,0 +1,97 @@
+import { Component, Input } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { MatSnackBar } from '@angular/material';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { BaseViewComponent } from 'app/site/base/base-view';
+import { ViewProjector } from '../../models/view-projector';
+import { ProjectorElements, ProjectorElement } from 'app/shared/models/core/projector';
+import { Mediafile } from 'app/shared/models/mediafiles/mediafile';
+import { MediafileRepositoryService } from 'app/core/repositories/mediafiles/mediafile-repository.service';
+import { ViewMediafile } from 'app/site/mediafiles/models/view-mediafile';
+import { SlideManager } from 'app/slides/services/slide-manager.service';
+import { ProjectorService } from 'app/core/core-services/projector.service';
+
+/**
+ * The presentation controls.
+ */
+@Component({
+    selector: 'os-presentation-control',
+    templateUrl: './presentation-control.component.html',
+    styleUrls: ['./presentation-control.component.scss']
+})
+export class PresentationControlComponent extends BaseViewComponent {
+    /**
+     * The projector.
+     */
+    private _projector: ViewProjector;
+
+    @Input()
+    public set projector(projector: ViewProjector) {
+        this._projector = projector;
+        this.updateElements();
+    }
+
+    public get projector(): ViewProjector {
+        return this._projector;
+    }
+
+    // All mediafile elements.
+    public elements: ProjectorElements = [];
+
+    public constructor(
+        titleService: Title,
+        translate: TranslateService,
+        matSnackBar: MatSnackBar,
+        private mediafileRepo: MediafileRepositoryService,
+        private slideManager: SlideManager,
+        private projectorService: ProjectorService
+    ) {
+        super(titleService, translate, matSnackBar);
+    }
+
+    private updateElements(): void {
+        this.elements = this.projector.elements.filter(element => {
+            if (element.name !== Mediafile.COLLECTIONSTRING && !element.id) {
+                return false;
+            }
+            const mediafile = this.mediafileRepo.getViewModel(element.id);
+            return !!mediafile && mediafile.isProjectable();
+        });
+    }
+
+    public getMediafile(element: ProjectorElement): ViewMediafile {
+        return this.mediafileRepo.getViewModel(element.id);
+    }
+
+    public getPage(element: ProjectorElement): number {
+        return element.page || 1;
+    }
+
+    public pdfForward(element: ProjectorElement): void {
+        if (this.getPage(element) < this.getMediafile(element).pages) {
+            this.pdfSetPage(element, this.getPage(element) + 1);
+        }
+    }
+
+    public pdfBackward(element: ProjectorElement): void {
+        if (this.getPage(element) > 1) {
+            this.pdfSetPage(element, this.getPage(element) - 1);
+        }
+    }
+
+    public pdfSetPage(element: ProjectorElement, page: number): void {
+        const idElement = this.slideManager.getIdentifialbeProjectorElement(element);
+        idElement.page = page;
+        this.projectorService.updateElement(this.projector.projector, idElement).then(null, this.raiseError);
+    }
+
+    public pdfZoom(element: ProjectorElement, direction: 'in' | 'out' | 'reset'): void {}
+
+    public pdfRotate(element: ProjectorElement): void {}
+
+    public imageFullscreen(element: ProjectorElement): void {}
+
+    public imageRotate(element: ProjectorElement): void {}
+}
diff --git a/client/src/app/site/projector/projector.module.ts b/client/src/app/site/projector/projector.module.ts
index 5ce0a9a13..269f274f7 100644
--- a/client/src/app/site/projector/projector.module.ts
+++ b/client/src/app/site/projector/projector.module.ts
@@ -9,6 +9,7 @@ import { CountdownControlsComponent } from './components/countdown-controls/coun
 import { CountdownDialogComponent } from './components/countdown-dialog/countdown-dialog.component';
 import { MessageControlsComponent } from './components/message-controls/message-controls.component';
 import { MessageDialogComponent } from './components/message-dialog/message-dialog.component';
+import { PresentationControlComponent } from './components/presentation-control/presentation-control.component';
 import { ProjectorListEntryComponent } from './components/projector-list-entry/projector-list-entry.component';
 
 @NgModule({
@@ -22,6 +23,10 @@ import { ProjectorListEntryComponent } from './components/projector-list-entry/p
         MessageControlsComponent,
         MessageDialogComponent
     ],
-    entryComponents: [CountdownDialogComponent, MessageDialogComponent]
+    entryComponents: [
+        CountdownDialogComponent,
+        MessageDialogComponent,
+        PresentationControlComponent
+    ]
 })
 export class ProjectorModule {}
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 c0b7bb4fe..74d3f4245 100644
--- a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html
+++ b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html
@@ -2,12 +2,16 @@
     <div *ngIf="data.data.type == 'image/png'">
         <img [src]="url" alt=""/>
     </div>
-    <div *ngIf="data.data.type == 'application/pdf'">
-          <pdf-viewer [src]="url"
-              [render-text]="true"
-              style="display: block;"></pdf-viewer>
-    </div>
     <div *ngIf="data.data.type == 'image/jpeg'">
         <img [src]="url" alt=""/>
     </div>
+    <div *ngIf="data.data.type == 'application/pdf'">
+          <pdf-viewer
+              [show-all]="false"
+              [original-size]="false"
+              [autoresize]="true"
+              [page]="page"
+              [src]="url"
+              style="display: block;"></pdf-viewer>
+    </div>
 </div>
diff --git a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.spec.ts b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.spec.ts
index 49b245453..3cd1b9998 100644
--- a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.spec.ts
+++ b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.spec.ts
@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MediafileSlideComponent } from './mediafile-slide.component';
 import { E2EImportsModule } from '../../../../e2e-imports.module';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
 
 describe('MediafileSlideComponent', () => {
     let component: MediafileSlideComponent;
@@ -9,7 +10,7 @@ describe('MediafileSlideComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [E2EImportsModule],
+            imports: [E2EImportsModule, PdfViewerModule],
             declarations: [MediafileSlideComponent]
         }).compileComponents();
     }));
diff --git a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.ts b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.ts
index e62a48122..ec60bcdcb 100644
--- a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.ts
+++ b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.ts
@@ -1,9 +1,7 @@
-import {Component} from '@angular/core';
-import {computed} from 'mobx-angular';
+import { Component } from '@angular/core';
 
-
-import {BaseSlideComponent} from 'app/slides/base-slide-component';
-import {MediafileSlideData} from './mediafile-slide-data';
+import { BaseSlideComponent } from 'app/slides/base-slide-component';
+import { MediafileSlideData } from './mediafile-slide-data';
 
 @Component({
     selector: 'os-mediafile-slide',
@@ -15,7 +13,11 @@ export class MediafileSlideComponent extends BaseSlideComponent<MediafileSlideDa
         super();
     }
 
-    @computed get url() {
+    public get page(): string {
+        return this.data.element.page;
+    }
+
+    public get url(): string {
         return `${this.data.data.media_url_prefix}/${this.data.data.path}`;
     }
 }
diff --git a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.module.ts b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.module.ts
index 3ba88ebb3..39d899293 100644
--- a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.module.ts
+++ b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.module.ts
@@ -1,13 +1,16 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
-import { makeSlideModule } from 'app/slides/base-slide-module';
-import { MediafileSlideComponent } from './mediafile-slide.component';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
 
+import { MediafileSlideComponent } from './mediafile-slide.component';
+import { SLIDE } from 'app/slides/slide-token';
+import { SharedModule } from 'app/shared/shared.module';
 
-let moduleConfiguration = makeSlideModule(MediafileSlideComponent);
-
-moduleConfiguration.imports.push(PdfViewerModule)
-
-@NgModule(moduleConfiguration)
+@NgModule({
+    imports: [CommonModule, SharedModule, PdfViewerModule],
+    declarations: [MediafileSlideComponent],
+    providers: [{ provide: SLIDE, useValue: MediafileSlideComponent }],
+    entryComponents: [MediafileSlideComponent]
+})
 export class MediafileSlideModule {}