Change change detection of filecard component

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

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

@@ -1,4 +1,7 @@
 import {
+    AfterViewChecked,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
     ElementRef,
     EventEmitter,
@@ -12,42 +15,49 @@ import {
 } from "@angular/core";
 import {File} from "../../../../../api/models/File";
 import {Selectable} from "../../../../models/Selectable";
-import {
+import {SchedulingService} from "../../../../services/scheduling/scheduling.service";
-    SchedulingService
-} from "../../../../services/scheduling/scheduling.service";
 
 const LOADING_WORK_KEY = "FILE_THUMBNAIL_LOADING";
 
 @Component({
     selector: "app-file-card",
     templateUrl: "./file-card.component.html",
-    styleUrls: ["./file-card.component.scss"]
+    styleUrls: ["./file-card.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FileCardComponent implements OnInit, OnChanges, OnDestroy {
+export class FileCardComponent implements OnInit, OnChanges, OnDestroy, AfterViewChecked {
     @ViewChild("card") card!: ElementRef;
     @Input() public entry!: Selectable<File>;
     @Output() clickEvent = new EventEmitter<FileCardComponent>();
     @Output() dblClickEvent = new EventEmitter<FileCardComponent>();
-
+    public loading = false;
     private cachedId: number | undefined;
     private workId: number | undefined;
-    public loading = false;
+    private selectedPrevious = false;
 
-    constructor(private schedulingService: SchedulingService) {
+    constructor(private changeDetector: ChangeDetectorRef, private schedulingService: SchedulingService) {
     }
 
     async ngOnInit() {
         this.cachedId = this.entry.data.id;
+        this.selectedPrevious = this.entry.selected;
         this.setImageDelayed();
     }
 
     async ngOnChanges(changes: SimpleChanges) {
-        if (changes["file"] && (this.cachedId === undefined || this.entry.data.id !== this.cachedId)) {
+        if (changes["entry"] && (this.cachedId === undefined || this.entry.data.id !== this.cachedId)) {
             this.cachedId = this.entry.data.id;
             this.setImageDelayed();
         }
     }
 
+    public ngAfterViewChecked(): void {
+        if (this.entry.selected != this.selectedPrevious) {
+            this.selectedPrevious = this.entry.selected;
+            this.changeDetector.markForCheck();
+        }
+    }
+
     public ngOnDestroy(): void {
         if (this.workId) {
             this.schedulingService.cancelWork(LOADING_WORK_KEY, this.workId);
@@ -59,10 +69,13 @@ export class FileCardComponent implements OnInit, OnChanges, OnDestroy {
             this.schedulingService.cancelWork(LOADING_WORK_KEY, this.workId);
         }
         this.loading = true;
-        this.workId = this.schedulingService.addWork(LOADING_WORK_KEY,
+        this.workId = this.schedulingService.addWork(
+            LOADING_WORK_KEY,
             async () => {
                 await this.schedulingService.delay(1);
                 this.loading = false;
-            });
+                this.changeDetector.markForCheck();
+            }
+        );
     }
 }

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

@@ -1,14 +1,14 @@
 <app-content-aware-image *ngIf="this.getThumbnailSupported() && this.thumbUrl" [imageSrc]="this.thumbUrl"
                          borderRadius="0.25em"></app-content-aware-image>
 <div *ngIf="this.getThumbnailSupported() && this.thumbUrl" class="file-icon-overlay">
-    <ng-icon *ngIf="getFileType() === 'video'" name="mat-movie"></ng-icon>
+    <ng-icon *ngIf="fileType === 'video'" name="mat-movie"></ng-icon>
     <ng-icon *ngIf="this.file.mimeType === 'image/gif'" class="gif-icon" name="mat-gif"></ng-icon>
 </div>
 <div *ngIf="!this.getThumbnailSupported() || !this.thumbUrl" class="file-type-icon">
-    <ng-icon *ngIf="getFileType() === 'image'" name="mat-image"></ng-icon>
+    <ng-icon *ngIf="fileType === 'image'" name="mat-image"></ng-icon>
-    <ng-icon *ngIf="getFileType() === 'video'" name="mat-movie"></ng-icon>
+    <ng-icon *ngIf="fileType === 'video'" name="mat-movie"></ng-icon>
-    <ng-icon *ngIf="getFileType() === 'audio'" name="mat-audiotrack"></ng-icon>
+    <ng-icon *ngIf="fileType === 'audio'" name="mat-audiotrack"></ng-icon>
-    <ng-icon *ngIf="getFileType() === 'text'" name="mat-description"></ng-icon>
+    <ng-icon *ngIf="fileType === 'text'" name="mat-description"></ng-icon>
 </div>
 <div *ngIf="file.status !== 'Archived'" class="file-status-icon">
     <ng-icon *ngIf="file.status === 'Deleted'" name="mat-auto-delete"></ng-icon>

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

@@ -14,6 +14,8 @@ export class FileThumbnailComponent implements OnChanges, AfterViewInit {
     @Input() file!: File;
 
     public thumbUrl: SafeResourceUrl | undefined;
+    public fileType!: string;
+    public thumbnailSupported: boolean = false;
 
     private supportedThumbnailTypes = ["image", "video"];
 
@@ -21,14 +23,18 @@ export class FileThumbnailComponent implements OnChanges, AfterViewInit {
     }
 
     public async ngAfterViewInit() {
+        if (this.thumbnailSupported) {
             this.thumbUrl = this.fileService.buildThumbnailUrl(this.file, 250, 250);
         }
+    }
 
     public async ngOnChanges(changes: SimpleChanges) {
         if (changes["file"]) {
             this.thumbUrl = this.fileService.buildThumbnailUrl(this.file,
                 250, 250
             );
+            this.fileType = this.getFileType();
+            this.thumbnailSupported = this.getThumbnailSupported();
         }
     }