Add image loading bars

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

mediarepo-ui/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { FileGridComponent } from './components/file-grid/file-grid.component';
 import {MatSidenavModule} from "@angular/material/sidenav";
 import {MatGridListModule} from "@angular/material/grid-list";
 import { FileGridEntryComponent } from './components/file-grid/file-grid-entry/file-grid-entry.component';
+import {MatProgressBarModule} from "@angular/material/progress-bar";
 
 @NgModule({
   declarations: [
@@ -31,21 +32,22 @@ import { FileGridEntryComponent } from './components/file-grid/file-grid-entry/f
     FileGridComponent,
     FileGridEntryComponent,
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    MatCardModule,
-    MatListModule,
-    MatButtonModule,
-    MatToolbarModule,
-    MatSnackBarModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule,
-    MatSidenavModule,
-    MatGridListModule,
-  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatCardModule,
+        MatListModule,
+        MatButtonModule,
+        MatToolbarModule,
+        MatSnackBarModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        MatSidenavModule,
+        MatGridListModule,
+        MatProgressBarModule,
+    ],
   providers: [],
   bootstrap: [AppComponent]
 })

mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.html

@@ -1,7 +1,9 @@
 <mat-card>
   <mat-card-title *ngIf="!!file?.name">{{file?.name}}</mat-card-title>
-  <mat-card-content>
-    <img class="entry-image" decoding="async" [src]="contentUrl" alt="image">
+  <mat-card-content *ngIf="contentUrl !== undefined">
+    <img *ngIf="contentUrl !== undefined" class="entry-image" decoding="async" [src]="contentUrl" alt="File Image">
   </mat-card-content>
-  <mat-card-footer>{{file?.mime_type}}, {{file?.hash}}</mat-card-footer>
+  <mat-card-footer>
+    <mat-progress-bar *ngIf="contentUrl === undefined" mode="indeterminate"></mat-progress-bar>
+  </mat-card-footer>
 </mat-card>

mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.scss

@@ -1,9 +1,12 @@
-mat-card, mat-card-content {
-  height: 100%;
-  width: 100%;
+mat-card {
+  height: calc(100% - 32px);
+  width: calc(100% - 32px);
+  padding: 16px;
 }
 
 mat-card-content {
+  height: 100%;
+  width: 100%;
   justify-content: center;
   text-align: center;
 }

mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts

@@ -2,6 +2,7 @@ import {Component, Input, OnInit} from '@angular/core';
 import {File} from "../../../models/File";
 import {FileService} from "../../../services/file/file.service";
 import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service";
+import {SafeResourceUrl} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-file-grid-entry',
@@ -11,7 +12,7 @@ import {ErrorBrokerService} from "../../../services/error-broker/error-broker.se
 export class FileGridEntryComponent implements OnInit {
 
   @Input() file: File | undefined;
-  contentUrl: string | undefined;
+  contentUrl: SafeResourceUrl | undefined;
   constructor(private fileService: FileService, private errorBroker: ErrorBrokerService) { }
 
   async ngOnInit(): Promise<void> {

mediarepo-ui/src/app/components/file-grid/file-grid.component.html

@@ -1,4 +1,4 @@
-<mat-grid-list cols="5" rowHeight="1:1">
+<mat-grid-list gutterSize="1em" cols="5" rowHeight="1:1">
   <mat-grid-tile *ngFor="let file of files">
     <app-file-grid-entry [file]="file"></app-file-grid-entry>
   </mat-grid-tile>

mediarepo-ui/src/app/pages/home/home.component.scss

@@ -21,3 +21,7 @@ mat-drawer-content {
 mat-drawer-container {
   height: 100%;
 }
+
+app-file-grid {
+  padding: 1em;
+}

mediarepo-ui/src/app/services/file/file.service.ts

@@ -1,8 +1,9 @@
-import {Inject, Injectable} from '@angular/core';
+import {Inject, Injectable, Sanitizer} from '@angular/core';
 import {BehaviorSubject} from "rxjs";
 import {File} from "../../models/File";
 import {invoke} from "@tauri-apps/api/tauri";
 import {DOCUMENT} from "@angular/common";
+import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
 
 @Injectable({
   providedIn: 'root'
@@ -11,29 +12,20 @@ export class FileService {
 
   displayedFiles = new BehaviorSubject<File[]>([]);
 
-  constructor(@Inject(DOCUMENT) private document: Document) {
+  constructor(@Inject(DomSanitizer) private sanitizer: DomSanitizer) {
 
   }
 
   public async getFiles() {
     let all_files = await invoke<File[]>("get_all_files");
-    this.displayedFiles.next(all_files.slice(0, 50));
+    this.displayedFiles.next(all_files.slice(70, 100));
   }
 
-  public async readFile(hash: string, mime_type: string): Promise<string | undefined> {
+  public async readFile(hash: string, mime_type: string): Promise<SafeResourceUrl> {
     const data = await invoke<number[]>("read_file_by_hash", {hash});
     const blob = new Blob([new Uint8Array(data)], {type: mime_type});
-    return new Promise<string | undefined>((res, rej) => {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const url = e.target?.result
-        if (url === null) {
-          res(undefined);
-        } else {
-          res(url as string)
-        }
-      };
-      reader.readAsDataURL(blob);
-    })
+
+    const url = URL?.createObjectURL(blob);
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
   }
 }