Change change detection of file gallery and metadata

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/shared/file/content-viewer/content-viewer.component.html

@@ -1,8 +1,8 @@
-<app-image-viewer *ngIf="getContentType() === 'image' && contentUrl" [imageUrl]="contentUrl"></app-image-viewer>
-<app-video-viewer *ngIf="getContentType() === 'video' && this.blobUrl" [blobUrl]="this.blobUrl!"></app-video-viewer>
-<app-audio-viewer *ngIf="getContentType() === 'audio' && this.blobUrl" [blobUrl]="this.blobUrl!"></app-audio-viewer>
+<app-image-viewer *ngIf="contentType === 'image' && contentUrl" [imageUrl]="contentUrl"></app-image-viewer>
+<app-video-viewer *ngIf="contentType === 'video' && this.blobUrl" [blobUrl]="this.blobUrl!"></app-video-viewer>
+<app-audio-viewer *ngIf="contentType === 'audio' && this.blobUrl" [blobUrl]="this.blobUrl!"></app-audio-viewer>
 
-<div *ngIf="getContentType() === 'other'" class="download-prompt">
+<div *ngIf="contentType === 'other'" class="download-prompt">
     <span>Unsupported content type <b>{{this.file.mimeType}}</b></span>
     <button (click)="this.downloadContent()" color="primary" mat-flat-button>Download</button>
 </div>

mediarepo-ui/src/app/components/shared/file/content-viewer/content-viewer.component.ts

@@ -1,5 +1,6 @@
 import {
     AfterViewInit,
+    ChangeDetectionStrategy,
     Component,
     Input,
     OnChanges,
@@ -11,25 +12,23 @@ import {SafeResourceUrl} from "@angular/platform-browser";
 import {File} from "../../../../../api/models/File";
 import {FileService} from "../../../../services/file/file.service";
 import {FileHelper} from "../../../../services/file/file.helper";
-import {
-    ErrorBrokerService
-} from "../../../../services/error-broker/error-broker.service";
-import {
-    BusyIndicatorComponent
-} from "../../app-common/busy-indicator/busy-indicator.component";
+import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
+import {BusyIndicatorComponent} from "../../app-common/busy-indicator/busy-indicator.component";
 
 type ContentType = "image" | "video" | "audio" | "other";
 
 @Component({
     selector: "app-content-viewer",
     templateUrl: "./content-viewer.component.html",
-    styleUrls: ["./content-viewer.component.scss"]
+    styleUrls: ["./content-viewer.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContentViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
     @Input() file!: File;
 
     public contentUrl: SafeResourceUrl | undefined;
     public blobUrl: SafeResourceUrl | undefined;
+    public contentType: ContentType = "other";
 
     @ViewChild(BusyIndicatorComponent) busyIndicator!: BusyIndicatorComponent;
 
@@ -40,7 +39,8 @@ export class ContentViewerComponent implements AfterViewInit, OnChanges, OnDestr
     }
 
     public async ngAfterViewInit() {
-        if (["audio", "video"].includes(this.getContentType())) {
+        this.contentType = this.getContentType();
+        if (["audio", "video"].includes(this.contentType)) {
             await this.loadBlobUrl();
         } else {
             this.contentUrl = this.fileService.buildContentUrl(this.file);
@@ -49,8 +49,9 @@ export class ContentViewerComponent implements AfterViewInit, OnChanges, OnDestr
 
     public async ngOnChanges(changes: SimpleChanges) {
         if (changes["file"]) {
-            if (["audio", "video"].includes(
-                this.getContentType()) && this.busyIndicator) {
+            this.contentType = this.getContentType();
+
+            if (["audio", "video"].includes(this.contentType) && this.busyIndicator) {
                 await this.loadBlobUrl();
             } else {
                 this.contentUrl = this.fileService.buildContentUrl(this.file);
@@ -63,23 +64,6 @@ export class ContentViewerComponent implements AfterViewInit, OnChanges, OnDestr
         this.unloadBlobUrl();
     }
 
-    public getContentType(): ContentType {
-        let mimeParts = this.file.mimeType.split("/");
-        const type = mimeParts.shift() ?? "other";
-        const subtype = mimeParts.shift() ?? "*";
-
-        switch (type) {
-            case "image":
-                return "image";
-            case "video":
-                return "video";
-            case "audio":
-                return "audio";
-            default:
-                return "other";
-        }
-    }
-
     public async downloadContent() {
         const path = await FileHelper.getFileDownloadLocation(this.file);
 
@@ -103,6 +87,22 @@ export class ContentViewerComponent implements AfterViewInit, OnChanges, OnDestr
         });
     }
 
+    private getContentType(): ContentType {
+        let mimeParts = this.file.mimeType.split("/");
+        const type = mimeParts.shift() ?? "other";
+
+        switch (type) {
+            case "image":
+                return "image";
+            case "video":
+                return "video";
+            case "audio":
+                return "audio";
+            default:
+                return "other";
+        }
+    }
+
     private unloadBlobUrl() {
         if (this.blobUrl) {
             URL?.revokeObjectURL(this.blobUrl as string);

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html

@@ -3,15 +3,21 @@
         <h1>File Metadata</h1>
         <mat-divider></mat-divider>
     </div>
-    <app-busy-indicator [blurBackground]="true" [busy]="this.loading" [darkenBackground]="false">
+    <app-busy-indicator [blurBackground]="true" [darkenBackground]="false">
         <div class="file-metadata-entries-scroll-container">
             <div class="file-metadata-entries">
-                <app-editable-metadata-entry *ngIf="fileMetadata" attributeName="Name" [value]="fileMetadata.name ?? ''" (valueChangeEvent)="this.saveFileName($event)"></app-editable-metadata-entry>
+                <app-editable-metadata-entry (valueChangeEvent)="this.saveFileName($event)"
+                                             *ngIf="fileMetadata"
+                                             [value]="fileMetadata.name ?? ''"
+                                             attributeName="Name"></app-editable-metadata-entry>
                 <app-metadata-entry attributeName="Content Descriptor (CD)">{{file.cd}}</app-metadata-entry>
                 <app-metadata-entry attributeName="Mime Type">{{file.mimeType}}</app-metadata-entry>
-                <app-metadata-entry *ngIf="fileMetadata" attributeName="Imported at">{{fileMetadata.import_time.toLocaleString()}}</app-metadata-entry>
-                <app-metadata-entry *ngIf="fileMetadata" attributeName="Created at">{{fileMetadata.creation_time.toLocaleString()}}</app-metadata-entry>
-                <app-metadata-entry *ngIf="fileMetadata" attributeName="Changed at">{{fileMetadata.change_time.toLocaleString()}}</app-metadata-entry>
+                <app-metadata-entry *ngIf="fileMetadata"
+                                    attributeName="Imported at">{{fileMetadata.import_time.toLocaleString()}}</app-metadata-entry>
+                <app-metadata-entry *ngIf="fileMetadata"
+                                    attributeName="Created at">{{fileMetadata.creation_time.toLocaleString()}}</app-metadata-entry>
+                <app-metadata-entry *ngIf="fileMetadata"
+                                    attributeName="Changed at">{{fileMetadata.change_time.toLocaleString()}}</app-metadata-entry>
             </div>
         </div>
     </app-busy-indicator>

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts

@@ -1,48 +1,45 @@
-import {
-    Component,
-    Input,
-    OnChanges,
-    OnInit,
-    SimpleChanges
-} from "@angular/core";
+import {ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from "@angular/core";
 import {File} from "../../../../../api/models/File";
 import {FileService} from "../../../../services/file/file.service";
 import {FileMetadata} from "../../../../../api/api-types/files";
+import {BusyIndicatorComponent} from "../../app-common/busy-indicator/busy-indicator.component";
 
 @Component({
     selector: "app-file-metadata",
     templateUrl: "./file-metadata.component.html",
-    styleUrls: ["./file-metadata.component.scss"]
+    styleUrls: ["./file-metadata.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FileMetadataComponent implements OnInit, OnChanges {
 
     @Input() file!: File;
     public fileMetadata: FileMetadata | undefined;
-    public loading = false;
+
+    @ViewChild(BusyIndicatorComponent) busyIndicator!: BusyIndicatorComponent;
 
     constructor(private fileService: FileService) {
     }
 
     public async ngOnInit() {
-        this.loading = true;
-        this.fileMetadata = await this.fileService.getFileMetadata(this.file.id);
-        this.loading = false;
+        await this.busyIndicator.wrapAsyncOperation(async () => {
+            this.fileMetadata = await this.fileService.getFileMetadata(this.file.id);
+        });
     }
 
-    public async ngOnChanges(changes:SimpleChanges) {
+    public async ngOnChanges(changes: SimpleChanges) {
         if (changes["file"] && (!this.fileMetadata || this.fileMetadata.file_id != this.file.id)) {
-            this.loading = true;
-            this.fileMetadata = await this.fileService.getFileMetadata(this.file.id);
-            this.loading = false;
+            await this.busyIndicator.wrapAsyncOperation(async () => {
+                this.fileMetadata = await this.fileService.getFileMetadata(this.file.id);
+            });
         }
     }
 
     public async saveFileName(name: string) {
-        this.loading = true;
-        const newFile = await this.fileService.updateFileName(this.file.id, name);
-        if (this.fileMetadata) {
-            this.fileMetadata.name = newFile.name;
-        }
-        this.loading = false;
+        await this.busyIndicator.wrapAsyncOperation(async () => {
+            const newFile = await this.fileService.updateFileName(this.file.id, name);
+            if (this.fileMetadata) {
+                this.fileMetadata.name = newFile.name;
+            }
+        });
     }
 }