Fix issue with unselecting files

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

mediarepo-ui/src/app/app.component-theme.scss

@@ -10,6 +10,18 @@
     background-color: darken(mat.get-color-from-palette($primary-palette, 'darker'), 35);
     color: white
   }
+  ::ng-deep ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  ::ng-deep ::-webkit-scrollbar-thumb {
+    background: mat.get-color-from-palette($primary-palette, 'darker');
+    border-radius: 1px;
+  }
+
+  ::ng-deep ::-webkit-scrollbar-thumb:hover {
+    background: mat.get-color-from-palette($primary-palette);
+  }
 
   .warn {
     background-color: mat.get-color-from-palette($warn-palette);

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

@@ -27,6 +27,7 @@ export class FileGridEntryComponent implements OnInit, OnDestroy {
   selectedThumbnail: Thumbnail | undefined;
 
   contentUrl: SafeResourceUrl | undefined;
+
   constructor(private fileService: FileService, private errorBroker: ErrorBrokerService) { }
 
   async ngOnInit() {
@@ -37,21 +38,20 @@ export class FileGridEntryComponent implements OnInit, OnDestroy {
     if (this.contentUrl) {
       const url = this.contentUrl;
       this.contentUrl = undefined;
-      URL?.revokeObjectURL(url as string);
     }
   }
 
   async loadImage() {
     try {
-      const thumbnails = await this.fileService.getThumbnails(this.gridEntry.file.hash);
-      let thumbnail = thumbnails.find(t => (t.height > 250 || t.width > 250) && (t.height < 500 && t.width < 500));
-      this.selectedThumbnail = thumbnail;
-
-      if (!thumbnail) {
-        console.log("Thumbnail is empty?!", thumbnails);
-      } else {
-        this.contentUrl = await this.fileService.readThumbnail(thumbnail!!);
-      }
+        const thumbnails = await this.fileService.getThumbnails(this.gridEntry.file.hash);
+        let thumbnail = thumbnails.find(t => (t.height > 250 || t.width > 250) && (t.height < 500 && t.width < 500));
+        this.selectedThumbnail = thumbnail;
+
+        if (!thumbnail) {
+          console.log("Thumbnail is empty?!", thumbnails);
+        } else {
+          this.contentUrl = await this.fileService.readThumbnail(thumbnail!!);
+        }
     } catch (err) {
       this.errorBroker.showError(err);
     }

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

@@ -62,7 +62,14 @@ export class FileGridComponent implements OnChanges {
       this.handleShiftSelect(clickedEntry);
     } else {
       clickedEntry.selected = !clickedEntry.selected;
-      this.selectedEntries.push(clickedEntry);
+      if (!clickedEntry.selected) {
+        const index = this.selectedEntries.indexOf(clickedEntry);
+        if (index > -1) {
+          this.selectedEntries.splice(index, 1);
+        }
+      } else {
+        this.selectedEntries.push(clickedEntry);
+      }
     }
     if (this.selectedEntries.length == 1) {
       this.fileSelectEvent.emit(this.selectedEntries.map(entry => entry.file)[0]);

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

@@ -4,6 +4,7 @@
   </mat-toolbar>
   <mat-drawer-container>
     <mat-drawer mode="side" opened>
+      <div class="drawer-sidebar-inner">
       <mat-form-field id="tag-search" appearance="fill">
         <mat-chip-list #chipList>
           <mat-chip *ngFor="let tag of searchTags" (removed)="removeSearchTag(tag)" [removable]="true">
@@ -20,15 +21,20 @@
                (matChipInputTokenEnd)="addSearchTag($event)"/>
       </mat-form-field>
 
-      <h1>Tags</h1>
-      <mat-selection-list [multiple]="false">
-        <mat-list-option
-          *ngFor="let tag of tags">{{tag.namespace ? tag.namespace + ':' + tag.name : tag.name}}</mat-list-option>
-      </mat-selection-list>
+      <div id="file-tag-list">
+        <h1>Selection Tags</h1>
+        <mat-selection-list [multiple]="false" *ngIf="tags.length > 0">
+          <mat-list-option
+            *ngFor="let tag of tags">{{tag.namespace ? tag.namespace + ':' + tag.name : tag.name}}</mat-list-option>
+        </mat-selection-list>
+      </div>
+      </div>
     </mat-drawer>
     <mat-drawer-content>
       <app-file-grid (fileDblClickEvent)="openFile($event)" [files]="files"
-                     (fileSelectEvent)="onFileSelect($event)"></app-file-grid>
+                     (fileSelectEvent)="onFileSelect($event)"
+                     (fileMultiselectEvent)="onFileMultiSelect($event)"
+      ></app-file-grid>
     </mat-drawer-content>
   </mat-drawer-container>
 

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

@@ -12,9 +12,21 @@
   width: 100%;
 }
 
+#file-tag-list {
+  height: calc(100% - 8em);
+  overflow: auto;
+}
+
+.drawer-sidebar-inner {
+  height: 100%;
+  width: 100%;
+  display: block;
+}
+
 mat-drawer {
   height: 100%;
   width: 25%;
+  overflow: hidden;
 }
 
 mat-drawer-content {

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

@@ -35,6 +35,12 @@ export class HomeComponent implements OnInit {
     await this.fileService.getFiles();
   }
 
+  async onFileMultiSelect(files: File[]) {
+    if (files.length === 0) {
+      this.clearFileDetails();
+    }
+  }
+
   async onFileSelect(file: File | undefined) {
     if (file) {
       await this.showFileDetails(file);