ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

some controls, integrate the pdfviewer

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/app/core/core-services/projector.service.ts
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.
*

2
client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
View File

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

8
client/src/app/site/mediafiles/models/view-mediafile.ts
View File

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

34
client/src/app/site/projector/components/presentation-control/presentation-control.component.html Normal file
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>

0
client/src/app/site/projector/components/presentation-control/presentation-control.component.scss Normal file
View File

26
client/src/app/site/projector/components/presentation-control/presentation-control.component.spec.ts Normal file
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();
});
});

97
client/src/app/site/projector/components/presentation-control/presentation-control.component.ts Normal file
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 {}
}

7
client/src/app/site/projector/projector.module.ts
View File

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

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

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

3
client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.spec.ts
View File

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

14
client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.ts
View File

@ -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}`;
}
}

17
client/src/app/slides/mediafiles/mediafile/mediafile-slide.module.ts
View File

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