From 5e981b3e302b34256d2f2888e8f781833a064932 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Thu, 8 Oct 2020 10:47:53 +0300
Subject: [PATCH] UI rework - pdf viwer and loading

---
 .../file-preview-screen.component.html                | 11 ++++++++---
 .../file-preview-screen.component.ts                  |  9 +++++++++
 .../screens/file/pdf-viewer/pdf-viewer.component.ts   |  6 ++++--
 apps/red-ui/src/assets/styles/red-page-layout.scss    |  5 ++++-
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index 000b99ffa..47f052825 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -1,4 +1,4 @@
-<section>
+<section [class.hidden]="!viewReady">
   <div class="red-top-bar">
     <div class="top-bar-row">
       <div class="menu left">
@@ -18,12 +18,17 @@
 
   <div class="view-container">
     <redaction-pdf-viewer [class.visible]="group.value === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
-                          [fileStatus]="appStateService.activeFile"></redaction-pdf-viewer>
+                          [fileStatus]="appStateService.activeFile"
+                          (fileReady)="fileReady('ANNOTATED')"></redaction-pdf-viewer>
     <redaction-pdf-viewer [class.visible]="group.value === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
-                          [fileStatus]="appStateService.activeFile"></redaction-pdf-viewer>
+                          (fileReady)="fileReady('REDACTED')">
+      [fileStatus]="appStateService.activeFile">
+    </redaction-pdf-viewer>
   </div>
 
   <button (click)="showDetailsDialog($event)" aria-label="details" class="details-button" color="primary" mat-fab>
     <mat-icon svgIcon="red:info"></mat-icon>
   </button>
 </section>
+
+<redaction-full-page-loading-indicator [displayed]="!viewReady"></redaction-full-page-loading-indicator>
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
index 895537694..0b25c1d94 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
@@ -17,6 +17,7 @@ export class FilePreviewScreenComponent implements OnInit {
 
   projectId: string;
   fileId: string;
+  private _readyViewers: string[] = [];
 
   constructor(
     public readonly appStateService: AppStateService,
@@ -53,4 +54,12 @@ export class FilePreviewScreenComponent implements OnInit {
   viewerChanged(value: any) {
     this._viewerSyncService.activateViewer(value);
   }
+
+  fileReady(viewer: string) {
+    this._readyViewers.push(viewer);
+  }
+
+  get viewReady() {
+    return this._readyViewers.length >= 2;
+  }
 }
diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
index 7a8ec21e4..31a7b65e5 100644
--- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
+++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, Output, ViewChild, EventEmitter} from '@angular/core';
 import {AppConfigKey, AppConfigService} from "../../../app-config/app-config.service";
 import {FileStatus, FileUploadControllerService} from "@redaction/red-ui-http";
 import {Observable, of} from "rxjs";
@@ -24,6 +24,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() fileId: string;
   @Input() fileType: FileType;
   @Input() fileStatus: FileStatus;
+  @Output() fileReady = new EventEmitter();
 
   @ViewChild('viewer', {static: true}) viewer: ElementRef;
   wvInstance: WebViewerInstance;
@@ -73,7 +74,8 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
       this._configureTextPopup();
       instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler)
       instance.loadDocument(pdfBlob, {filename: this.fileStatus ? this.fileStatus.filename : 'file.pdf'});
-    })
+      this.fileReady.emit();
+    });
   }
 
   private _loadFile(): Observable<any> {
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index b66c41bb2..a6b44a892 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -178,7 +178,6 @@ html, body {
 }
 
 
-
 .red-top-bar {
   height: 61px;
   width: 100%;
@@ -224,3 +223,7 @@ html, body {
   overflow: auto;
 
 }
+
+.hidden {
+  display: none;
+}