some controls, integrate the pdfviewer

This commit is contained in:
FinnStutzenstein 2019-02-27 08:43:51 +01:00 committed by Emanuel Schütze
parent b3ff250d38
commit 78d107e37c
12 changed files with 210 additions and 21 deletions

View File

@ -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. * Executes the request to change projector elements.
* *

View File

@ -71,7 +71,7 @@
<ng-container matColumnDef="projector"> <ng-container matColumnDef="projector">
<mat-header-cell *matHeaderCellDef mat-sort-header>Projector</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>Projector</mat-header-cell>
<mat-cell *matCellDef="let file"> <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> </mat-cell>
</ng-container> </ng-container>

View File

@ -57,6 +57,10 @@ export class ViewMediafile extends BaseViewModelWithListOfSpeakers<Mediafile>
return this.mediafile.downloadUrl; return this.mediafile.downloadUrl;
} }
public get pages(): number | null {
return this.mediafile.mediafile.pages;
}
/** /**
* Determines if the file has the 'hidden' attribute * Determines if the file has the 'hidden' attribute
* @returns the hidden attribute, also 'hidden' if there is no file * @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 * Determine if the file is an image
* *

View File

@ -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>

View File

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

View File

@ -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 {}
}

View File

@ -9,6 +9,7 @@ import { CountdownControlsComponent } from './components/countdown-controls/coun
import { CountdownDialogComponent } from './components/countdown-dialog/countdown-dialog.component'; import { CountdownDialogComponent } from './components/countdown-dialog/countdown-dialog.component';
import { MessageControlsComponent } from './components/message-controls/message-controls.component'; import { MessageControlsComponent } from './components/message-controls/message-controls.component';
import { MessageDialogComponent } from './components/message-dialog/message-dialog.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'; import { ProjectorListEntryComponent } from './components/projector-list-entry/projector-list-entry.component';
@NgModule({ @NgModule({
@ -22,6 +23,10 @@ import { ProjectorListEntryComponent } from './components/projector-list-entry/p
MessageControlsComponent, MessageControlsComponent,
MessageDialogComponent MessageDialogComponent
], ],
entryComponents: [CountdownDialogComponent, MessageDialogComponent] entryComponents: [
CountdownDialogComponent,
MessageDialogComponent,
PresentationControlComponent
]
}) })
export class ProjectorModule {} export class ProjectorModule {}

View File

@ -2,12 +2,16 @@
<div *ngIf="data.data.type == 'image/png'"> <div *ngIf="data.data.type == 'image/png'">
<img [src]="url" alt=""/> <img [src]="url" alt=""/>
</div> </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'"> <div *ngIf="data.data.type == 'image/jpeg'">
<img [src]="url" alt=""/> <img [src]="url" alt=""/>
</div> </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> </div>

View File

@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MediafileSlideComponent } from './mediafile-slide.component'; import { MediafileSlideComponent } from './mediafile-slide.component';
import { E2EImportsModule } from '../../../../e2e-imports.module'; import { E2EImportsModule } from '../../../../e2e-imports.module';
import { PdfViewerModule } from 'ng2-pdf-viewer';
describe('MediafileSlideComponent', () => { describe('MediafileSlideComponent', () => {
let component: MediafileSlideComponent; let component: MediafileSlideComponent;
@ -9,7 +10,7 @@ describe('MediafileSlideComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [E2EImportsModule], imports: [E2EImportsModule, PdfViewerModule],
declarations: [MediafileSlideComponent] declarations: [MediafileSlideComponent]
}).compileComponents(); }).compileComponents();
})); }));

View File

@ -1,6 +1,4 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {computed} from 'mobx-angular';
import { BaseSlideComponent } from 'app/slides/base-slide-component'; import { BaseSlideComponent } from 'app/slides/base-slide-component';
import { MediafileSlideData } from './mediafile-slide-data'; import { MediafileSlideData } from './mediafile-slide-data';
@ -15,7 +13,11 @@ export class MediafileSlideComponent extends BaseSlideComponent<MediafileSlideDa
super(); 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}`; return `${this.data.data.media_url_prefix}/${this.data.data.path}`;
} }
} }

View File

@ -1,13 +1,16 @@
import { NgModule } from '@angular/core'; 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 { 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); @NgModule({
imports: [CommonModule, SharedModule, PdfViewerModule],
moduleConfiguration.imports.push(PdfViewerModule) declarations: [MediafileSlideComponent],
providers: [{ provide: SLIDE, useValue: MediafileSlideComponent }],
@NgModule(moduleConfiguration) entryComponents: [MediafileSlideComponent]
})
export class MediafileSlideModule {} export class MediafileSlideModule {}