feat: add a modal window for blobs

fixes #37

Author: enko

package-lock.json

@@ -45,19 +45,22 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/common": "6.1.0-beta.3",
         "@angular/animations": "6.1.0-beta.3",
+        "@angular/cdk": "6.3.3",
+        "@angular/common": "6.1.0-beta.3",
         "@angular/compiler": "6.1.0-beta.3",
         "@angular/core": "6.1.0-beta.3",
         "@angular/forms": "6.1.0-beta.3",
         "@angular/http": "6.1.0-beta.3",
+        "@angular/material": "6.3.3",
         "@angular/platform-browser-dynamic": "6.1.0-beta.3",
         "@angular/platform-browser": "6.1.0-beta.3",
         "@angular/router": "6.1.0-beta.3",
         "@ngxs/store": "3.1.4",
         "@nicky-lenaers/ngx-scroll-to": "1.0.0",
         "@types/cheerio": "0.22.8",
         "@types/codemirror": "0.0.58",
+        "@types/fs-extra": "5.0.4",
         "@types/jquery": "3.3.4",
         "@types/mmmagic": "0.4.29",
         "@types/semantic-ui-sidebar": "2.2.2",
@@ -66,17 +69,19 @@
         "cheerio": "1.0.0-rc.2",
         "class-validator": "0.8.5",
         "codemirror": "5.39.0",
-        "highlight.js": "9.12.0",
         "core-js": "2.5.7",
         "debug": "3.1.0",
         "decko": "1.2.0",
         "emoji-named-characters": "1.0.2",
         "esrever": "0.2.0",
+        "fs-extra": "6.0.1",
+        "highlight.js": "9.12.0",
         "humanize-duration": "3.15.0",
         "hypermd": "0.3.9",
         "jquery": "3.3.1",
         "mmmagic": "0.5.0",
         "moment": "2.22.2",
+        "pdfjs-dist": "2.0.489",
         "pretty-error": "2.1.1",
         "pull-stream": "3.6.8",
         "reading-time": "1.1.3",

package.json

@@ -5,9 +5,15 @@
 import {
     NgModule,
 } from '@angular/core';
+import {
+    MatDialogModule,
+} from '@angular/material';
 import {
     BrowserModule,
 } from '@angular/platform-browser';
+import {
+    NoopAnimationsModule,
+} from '@angular/platform-browser/animations';
 import {
     RouterModule,
 } from '@angular/router';
@@ -18,6 +24,7 @@ import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 import { HotkeyModule } from 'angular2-hotkeys';
 
 import {
+    BlobComponent,
     NewPostComponent,
     PostComponent,
     SuggestionBoxComponent,
@@ -62,6 +69,7 @@ import {
         PublicFeedComponent,
         SafeSSBUrlPipe,
         SuggestionBoxComponent,
+        BlobComponent,
     ],
     imports: [
         RouterModule.forRoot([
@@ -93,6 +101,8 @@ import {
             disableCheatSheet: false,
             cheatSheetCloseEsc: true,
         }),
+        NoopAnimationsModule,
+        MatDialogModule,
     ],
     providers: [
         ElectronService,
@@ -104,6 +114,7 @@ import {
     entryComponents: [
         PostDetailComponent,
         PublicFeedComponent,
+        BlobComponent,
     ],
 })
 export class AppModule { }

src/app/app.module.ts

@@ -0,0 +1,23 @@
+<div class="ui image segment">
+    <div class="container">
+        <div class="image">
+            <div #pdf *ngIf="(mimeType | async) == 'application/pdf'">
+                <p>
+                    Here should be <a href="http://mozilla.github.io/pdf.js/">pdf.js</a> instance to render this pdf. If you want to work on this have a look at <a href="https://github.com/datenknoten/ngx-ssb-client/issues/42">bug #42</a>
+                </p>
+            </div>
+            <img class="ui fluid rounded image" [src]="blobLink  | safeSSBUrlPipe" *ngIf="(mimeType | async) != 'application/pdf'">
+        </div>
+        <div class="details">
+            <h3 class="ui dividing header">{{ blobId }}</h3>
+            <p>
+                MimeType: {{ mimeType | async }}
+            </p>
+            <p>
+                <button class="ui green button" (click)="saveBlob()">
+                    Download
+                </button>
+            </p>
+        </div>
+    </div>
+</div>