feat(resource): better progress indicator handling in resource viewer (DEV-638)

src/app/workspace/resource/representation/archive/archive.component.ts

@@ -1,7 +1,17 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import { Constants, UpdateFileValue, UpdateResource, UpdateValue, WriteValueResponse, ReadResource, ApiResponseError, KnoraApiConnection, ReadArchiveFileValue } from '@dasch-swiss/dsp-js';
+import {
+    ApiResponseError,
+    Constants,
+    KnoraApiConnection,
+    ReadArchiveFileValue,
+    ReadResource,
+    UpdateFileValue,
+    UpdateResource,
+    UpdateValue,
+    WriteValueResponse
+} from '@dasch-swiss/dsp-js';
 import { mergeMap } from 'rxjs/operators';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { DialogComponent } from 'src/app/main/dialog/dialog.component';
@@ -14,11 +24,14 @@ import { FileRepresentation } from '../file-representation';
     templateUrl: './archive.component.html',
     styleUrls: ['./archive.component.scss']
 })
-export class ArchiveComponent implements OnInit {
+export class ArchiveComponent implements OnInit, AfterViewInit {
 
     @Input() src: FileRepresentation;
+
     @Input() parentResource: ReadResource;
 
+    @Output() loaded = new EventEmitter<boolean>();
+
     originalFilename: string;
 
     constructor(
@@ -33,6 +46,10 @@ export class ArchiveComponent implements OnInit {
         this._getOriginalFilename();
     }
 
+    ngAfterViewInit() {
+        this.loaded.emit(true);
+    }
+
     // https://stackoverflow.com/questions/66986983/angular-10-download-file-from-firebase-link-without-opening-into-new-tab
     async downloadArchive(url: string) {
         try {

src/app/workspace/resource/representation/audio/audio.component.ts

@@ -1,25 +1,38 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
-import { UpdateFileValue, UpdateResource, Constants, UpdateValue, WriteValueResponse, ReadResource, ApiResponseError, KnoraApiConnection, ReadAudioFileValue } from '@dasch-swiss/dsp-js';
+import {
+    ApiResponseError,
+    Constants,
+    KnoraApiConnection,
+    ReadAudioFileValue,
+    ReadResource,
+    UpdateFileValue,
+    UpdateResource,
+    UpdateValue,
+    WriteValueResponse
+} from '@dasch-swiss/dsp-js';
 import { mergeMap } from 'rxjs/operators';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { DialogComponent } from 'src/app/main/dialog/dialog.component';
 import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
 import { EmitEvent, Events, UpdatedFileEventValue, ValueOperationEventService } from '../../services/value-operation-event.service';
-
 import { FileRepresentation } from '../file-representation';
 
+
 @Component({
     selector: 'app-audio',
     templateUrl: './audio.component.html',
     styleUrls: ['./audio.component.scss']
 })
-export class AudioComponent implements OnInit {
+export class AudioComponent implements OnInit, AfterViewInit {
 
     @Input() src: FileRepresentation;
+
     @Input() parentResource: ReadResource;
 
+    @Output() loaded = new EventEmitter<boolean>();
+
     audio: SafeUrl;
 
     constructor(
@@ -34,6 +47,10 @@ export class AudioComponent implements OnInit {
         this.audio = this._sanitizer.bypassSecurityTrustUrl(this.src.fileValue.fileUrl);
     }
 
+    ngAfterViewInit() {
+        this.loaded.emit(true);
+    }
+
     openReplaceFileDialog(){
         const propId = this.parentResource.properties[Constants.HasAudioFileValue][0].id;
 

src/app/workspace/resource/representation/document/document.component.ts

@@ -1,6 +1,16 @@
-import { Component, Inject, Input, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import { ApiResponseError, Constants, KnoraApiConnection, ReadDocumentFileValue, ReadResource, UpdateFileValue, UpdateResource, UpdateValue, WriteValueResponse } from '@dasch-swiss/dsp-js';
+import {
+    ApiResponseError,
+    Constants,
+    KnoraApiConnection,
+    ReadDocumentFileValue,
+    ReadResource,
+    UpdateFileValue,
+    UpdateResource,
+    UpdateValue,
+    WriteValueResponse
+} from '@dasch-swiss/dsp-js';
 import { PdfViewerComponent } from 'ng2-pdf-viewer';
 import { mergeMap } from 'rxjs/operators';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
@@ -14,11 +24,14 @@ import { FileRepresentation } from '../file-representation';
     templateUrl: './document.component.html',
     styleUrls: ['./document.component.scss']
 })
-export class DocumentComponent implements OnInit {
+export class DocumentComponent implements OnInit, AfterViewInit {
 
     @Input() src: FileRepresentation;
+
     @Input() parentResource: ReadResource;
 
+    @Output() loaded = new EventEmitter<boolean>();
+
     @ViewChild(PdfViewerComponent) private _pdfComponent: PdfViewerComponent;
 
     zoomFactor = 1.0;
@@ -36,6 +49,10 @@ export class DocumentComponent implements OnInit {
 
     }
 
+    ngAfterViewInit() {
+        this.loaded.emit(true);
+    }
+
     searchQueryChanged(newQuery: string) {
         if (newQuery !== this.pdfQuery) {
             this.pdfQuery = newQuery;

src/app/workspace/resource/representation/still-image/still-image.component.html

@@ -89,5 +89,5 @@
             </button>
         </span>
     </div>
-    <!-- /openseadragon (osd) -->
 </div>
+<!-- /openseadragon (osd) -->

src/app/workspace/resource/representation/still-image/still-image.component.ts

@@ -1,10 +1,13 @@
 import {
+    AfterViewInit,
     Component,
     ElementRef,
-    EventEmitter, Inject,
+    EventEmitter,
+    Inject,
     Input,
     OnChanges,
-    OnDestroy, Output,
+    OnDestroy,
+    Output,
     Renderer2,
     SimpleChanges
 } from '@angular/core';
@@ -110,7 +113,7 @@ interface PolygonsForRegion {
     templateUrl: './still-image.component.html',
     styleUrls: ['./still-image.component.scss']
 })
-export class StillImageComponent implements OnChanges, OnDestroy {
+export class StillImageComponent implements OnChanges, OnDestroy, AfterViewInit {
 
     @Input() images: FileRepresentation[];
     @Input() imageCaption?: string;
@@ -127,7 +130,10 @@ export class StillImageComponent implements OnChanges, OnDestroy {
     @Output() regionClicked = new EventEmitter<string>();
 
     @Output() regionAdded = new EventEmitter<string>();
-    regionDrawMode: Boolean = false; // stores whether viewer is currently drawing a region
+
+    @Output() loaded = new EventEmitter<boolean>();
+
+    regionDrawMode = false; // stores whether viewer is currently drawing a region
     private _regionDragInfo; // stores the information of the first click for drawing a region
     private _viewer: OpenSeadragon.Viewer;
     private _regions: PolygonsForRegion = {};
@@ -195,6 +201,10 @@ export class StillImageComponent implements OnChanges, OnDestroy {
         }
     }
 
+    ngAfterViewInit() {
+        this.loaded.emit(true);
+    }
+
     ngOnDestroy() {
         if (this._viewer) {
             this._viewer.destroy();

src/app/workspace/resource/representation/video/video.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostListener, Inject, Input, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import {
@@ -16,12 +16,7 @@ import { mergeMap } from 'rxjs/operators';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { DialogComponent } from 'src/app/main/dialog/dialog.component';
 import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
-import {
-    EmitEvent,
-    Events,
-    UpdatedFileEventValue,
-    ValueOperationEventService
-} from '../../services/value-operation-event.service';
+import { EmitEvent, Events, UpdatedFileEventValue, ValueOperationEventService } from '../../services/value-operation-event.service';
 import { PointerValue } from '../av-timeline/av-timeline.component';
 import { FileRepresentation } from '../file-representation';
 
@@ -30,14 +25,16 @@ import { FileRepresentation } from '../file-representation';
     templateUrl: './video.component.html',
     styleUrls: ['./video.component.scss']
 })
-export class VideoComponent implements OnInit {
+export class VideoComponent implements OnInit, AfterViewInit {
 
     @Input() src: FileRepresentation;
 
     @Input() start?= 0;
 
     @Input() parentResource: ReadResource;
 
+    @Output() loaded = new EventEmitter<boolean>();
+
     @ViewChild('videoEle') videoEle: ElementRef;
 
     @ViewChild('timeline') timeline: ElementRef;
@@ -116,6 +113,10 @@ export class VideoComponent implements OnInit {
         this.fileHasChanged = false;
     }
 
+    ngAfterViewInit() {
+        this.loaded.emit(true);
+    }
+
     /**
      * stop playing and go back to start
      */