WIP: show PDF, PNG and JPEG files in projector

client/package.json

@@ -51,6 +51,7 @@
         "ng-pick-datetime": "^7.0.0",
         "ngx-file-drop": "^6.0.0",
         "ngx-mat-select-search": "^1.7.2",
+        "ng2-pdf-viewer": "^5.2.3",
         "ngx-papaparse": "^3.0.2",
         "pdfmake": "^0.1.53",
         "po2json": "^1.0.0-alpha",

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

@@ -1,5 +1,13 @@
 <div *ngIf="data">
-    <p>{{ data.data.path }}</p>
-    <p>{{ data.data.type }}</p>
-    <p>{{ data.data.media_url_prefix }}</p>
+    <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>

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

@@ -1,4 +1,6 @@
 import {Component} from '@angular/core';
+import {computed} from 'mobx-angular';
+
 
 import {BaseSlideComponent} from 'app/slides/base-slide-component';
 import {MediafileSlideData} from './mediafile-slide-data';
@@ -12,4 +14,8 @@ export class MediafileSlideComponent extends BaseSlideComponent<MediafileSlideDa
     public constructor() {
         super();
     }
+
+    @computed get url() {
+        return `${this.data.data.media_url_prefix}/${this.data.data.path}`;
+    }
 }

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

@@ -2,6 +2,12 @@ import { NgModule } from '@angular/core';
 
 import { makeSlideModule } from 'app/slides/base-slide-module';
 import { MediafileSlideComponent } from './mediafile-slide.component';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
 
-@NgModule(makeSlideModule(MediafileSlideComponent))
+
+let moduleConfiguration = makeSlideModule(MediafileSlideComponent);
+
+moduleConfiguration.imports.push(PdfViewerModule)
+
+@NgModule(moduleConfiguration)
 export class MediafileSlideModule {}