add ability to select download format

frontend/src/app/routes/view/view.component.html

@@ -8,9 +8,28 @@
       <picsur-img class="uploadedimage" [src]="previewLink"></picsur-img>
     </div>
 
-    <div class="col-12">
+    <div class="col-md-6 col-12">
       <copy-field label="Image URL" [value]="imageLinks.source"></copy-field>
     </div>
+
+    <div class="col-md-6 col-12">
+      <mat-form-field appearance="outline" color="accent">
+        <mat-label>Image Format</mat-label>
+        <mat-select
+          (valueChange)="selectedFormat($event)"
+          [value]="setSelectedValue"
+        >
+          <mat-option *ngFor="let format of formatOptions" [value]="format.key">
+            {{ format.value }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div class="col-12 mb-3">
+      <mat-divider class="" [inset]="false"></mat-divider>
+    </div>
+
     <div class="col-md-6 col-12">
       <copy-field label="Markdown" [value]="imageLinks.markdown"></copy-field>
     </div>

frontend/src/app/routes/view/view.component.scss

@@ -6,3 +6,7 @@
 .content-border {
   padding-block: 1rem;
 }
+
+mat-form-field {
+  width: 100%;
+}

frontend/src/app/routes/view/view.component.ts

@@ -1,8 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ImageLinks } from 'picsur-shared/dist/dto/image-links.dto';
-import { HasFailed } from 'picsur-shared/dist/types';
+import {
+  AnimMime,
+  FullMime,
+  ImageMime,
+  Mime2Ext,
+  SupportedAnimMimes,
+  SupportedImageMimes,
+  SupportedMimeCategory
+} from 'picsur-shared/dist/dto/mimes.dto';
+import { HasFailed, HasSuccess } from 'picsur-shared/dist/types';
 import { UUIDRegex } from 'picsur-shared/dist/util/common-regex';
+import { ParseMime } from 'picsur-shared/dist/util/parse-mime';
 import { ImageService } from 'src/app/services/api/image.service';
 import { UtilService } from 'src/app/util/util-module/util.service';
 
@@ -18,31 +28,72 @@ export class ViewComponent implements OnInit {
     private utilService: UtilService
   ) {}
 
+  private id: string;
+  private hasOriginal: boolean = false;
+  private masterMime: FullMime = {
+    mime: ImageMime.JPEG,
+    type: SupportedMimeCategory.Image,
+  };
+
+  public formatOptions: {
+    value: string;
+    key: string;
+  }[] = [];
+
+  public setSelectedValue: string = ImageMime.JPEG;
+
   public previewLink = '';
   public imageLinks = new ImageLinks();
 
   async ngOnInit() {
     const params = this.route.snapshot.paramMap;
-    const id = params.get('id') ?? '';
-    if (!UUIDRegex.test(id)) {
+
+    this.id = params.get('id') ?? '';
+    if (!UUIDRegex.test(this.id)) {
       return this.utilService.quitError('Invalid image link');
     }
 
-    const metadata = await this.imageService.GetImageMeta(id);
-    if (HasFailed(metadata)) {
+    const metadata = await this.imageService.GetImageMeta(this.id);
+    if (HasFailed(metadata))
       return this.utilService.quitError(metadata.getReason());
-    }
 
-    const hasOriginal = metadata.fileMimes.original !== undefined;
     this.previewLink = this.imageService.GetImageURL(
-      id,
+      this.id,
       metadata.fileMimes.master
     );
 
-    this.imageLinks = this.imageService.CreateImageLinksFromID(
-      id,
-      hasOriginal ? null : metadata.fileMimes.master
-    );
+    this.hasOriginal = metadata.fileMimes.original !== undefined;
+
+    const masterMime = ParseMime(metadata.fileMimes.master);
+    if (HasSuccess(masterMime)) {
+      this.masterMime = masterMime;
+    }
+
+    if (this.hasOriginal) {
+      this.setSelectedValue = 'original';
+    } else {
+      if (this.masterMime.type === SupportedMimeCategory.Image) {
+        this.setSelectedValue = ImageMime.JPEG;
+      } else if (this.masterMime.type === SupportedMimeCategory.Animation) {
+        this.setSelectedValue = AnimMime.GIF;
+      } else {
+        this.setSelectedValue = metadata.fileMimes.master;
+      }
+    }
+
+    this.selectedFormat(this.setSelectedValue);
+    this.updateFormatOptions();
+  }
+
+  selectedFormat(format: string) {
+    if (format === 'original') {
+      this.imageLinks = this.imageService.CreateImageLinksFromID(this.id, null);
+    } else {
+      this.imageLinks = this.imageService.CreateImageLinksFromID(
+        this.id,
+        format
+      );
+    }
   }
 
   download() {
@@ -56,4 +107,35 @@ export class ViewComponent implements OnInit {
   goBackHome() {
     this.router.navigate(['/']);
   }
+
+  private updateFormatOptions() {
+    let newOptions: {
+      value: string;
+      key: string;
+    }[] = [];
+    if (this.hasOriginal) {
+      newOptions.push({
+        value: 'Original',
+        key: 'original',
+      });
+    }
+
+    if (this.masterMime.type === SupportedMimeCategory.Image) {
+      newOptions.push(
+        ...SupportedImageMimes.map((mime) => ({
+          value: Mime2Ext(mime)?.toUpperCase() ?? 'Error',
+          key: mime,
+        }))
+      );
+    } else if (this.masterMime.type === SupportedMimeCategory.Animation) {
+      newOptions.push(
+        ...SupportedAnimMimes.map((mime) => ({
+          value: Mime2Ext(mime)?.toUpperCase() ?? 'Error',
+          key: mime,
+        }))
+      );
+    }
+
+    this.formatOptions = newOptions;
+  }
 }

frontend/src/app/routes/view/view.module.ts

@@ -1,7 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
 import { CopyFieldModule } from 'src/app/components/copy-field/copy-field.module';
 import { FabModule } from 'src/app/components/fab/fab.module';
 import { PicsurImgModule } from 'src/app/components/picsur-img/picsur-img.module';
@@ -14,9 +16,11 @@ import { ViewRoutingModule } from './view.routing.module';
     CopyFieldModule,
     ViewRoutingModule,
     MatButtonModule,
+    MatSelectModule,
+    MatDividerModule,
     PicsurImgModule,
     MatIconModule,
-    FabModule
+    FabModule,
   ],
 })
 export class ViewRouteModule {}

frontend/src/app/services/api/image.service.ts

@@ -46,7 +46,10 @@ export class ImageService {
     };
   }
 
-  public CreateImageLinksFromID(imageID: string, mime: string | null): ImageLinks {
+  public CreateImageLinksFromID(
+    imageID: string,
+    mime: string | null
+  ): ImageLinks {
     return this.CreateImageLinks(this.GetImageURL(imageID, mime));
   }
 }

frontend/src/app/util/util-module/util.service.ts

@@ -121,6 +121,7 @@ export class UtilService {
       new Blob([file.buffer], { type: file.mimeType })
     );
     a.download = file.name;
+    a.target = '_self';
     a.click();
 
     closeDialog();

shared/src/dto/mimes.dto.ts

@@ -35,20 +35,20 @@ export interface FullMime {
 export const ImageMime2ExtMap: {
   [key in ImageMime]: string;
 } = {
+  [ImageMime.QOI]: 'qoi',
   [ImageMime.JPEG]: 'jpg',
   [ImageMime.PNG]: 'png',
   [ImageMime.WEBP]: 'webp',
   [ImageMime.TIFF]: 'tiff',
   [ImageMime.BMP]: 'bmp',
   // [ImageMime.ICO]: 'ico',
-  [ImageMime.QOI]: 'qoi',
 };
 
 export const AnimMime2ExtMap: {
   [key in AnimMime]: string;
 } = {
-  [AnimMime.APNG]: 'apng',
   [AnimMime.GIF]: 'gif',
+  [AnimMime.APNG]: 'apng',
 };
 
 export const Mime2ExtMap: {