allowing chosing preferred format for sharex

frontend/src/app/routes/settings/sharex/settings-sharex.component.html

@@ -1,10 +1,17 @@
 <div *ngIf="available > 0">
   <h1>Create a ShareX target config</h1>
 
-  <p>Please select an api key to associate with the ShareX target.</p>
+  <p>
+    Please select an api key to associate with the ShareX target, and then the
+    preferred file format you'd like when sharing.
+  </p>
 
   <div class="row">
-    <mat-form-field class="col-12 col-md-6 col-xl-4" appearance="outline">
+    <mat-form-field
+      class="col-12 col-md-6 col-xl-4"
+      appearance="outline"
+      color="accent"
+    >
       <mat-label>Api Key</mat-label>
       <mat-select
         msInfiniteScroll
@@ -17,11 +24,29 @@
         }}</mat-option>
       </mat-select>
     </mat-form-field>
+
+    <mat-form-field
+      class="col-12 col-md-3 col-xl-2"
+      appearance="outline"
+      color="accent"
+    >
+      <mat-label>Image Format</mat-label>
+      <mat-select [(value)]="selectedFormat">
+        <mat-option *ngFor="let format of formatOptions" [value]="format.key">
+          {{ format.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
   </div>
 
   <div class="row">
     <div class="col">
-      <button mat-raised-button color="accent" [disabled]="key === null" (click)="onExport()">
+      <button
+        mat-raised-button
+        color="accent"
+        [disabled]="key === null"
+        (click)="onExport()"
+      >
         Export Config
       </button>
     </div>

frontend/src/app/routes/settings/sharex/settings-sharex.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { MatSelectChange } from '@angular/material/select';
+import { FileType2Ext, ImageFileType } from 'picsur-shared/dist/dto/mimes.dto';
 import { Permission } from 'picsur-shared/dist/dto/permissions.enum';
 import { EApiKey } from 'picsur-shared/dist/entities/apikey.entity';
 import { HasFailed } from 'picsur-shared/dist/types';
@@ -20,6 +21,12 @@ import { BuildShareX } from './sharex-builder';
 export class SettingsShareXComponent implements OnInit {
   private readonly logger = new Logger(SettingsShareXComponent.name);
 
+  public selectedFormat: string = ImageFileType.PNG;
+  public formatOptions: {
+    value: string;
+    key: string;
+  }[] = [];
+
   public apikeys = new BehaviorSubject<EApiKey[]>([]);
   public apikeys$ = this.apikeys.asObservable().pipe(
     scan((acc, curr) => {
@@ -40,6 +47,7 @@ export class SettingsShareXComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
+    this.formatOptions = this.simpleUtil.getBaseFormatOptions();
     this.getNextBatch();
   }
 
@@ -53,9 +61,15 @@ export class SettingsShareXComponent implements OnInit {
     const permissions = await this.permissionService.getLoadedSnapshot();
     const canUseDelete = permissions.includes(Permission.ImageDeleteKey);
 
+    const ext = FileType2Ext(this.selectedFormat);
+    if (HasFailed(ext)) {
+      this.logger.error(ext.print());
+    }
+
     const sharexConfig = BuildShareX(
       this.simpleUtil.getHost(),
       this.key,
+      '.' + ext,
       canUseDelete,
     );
 

frontend/src/app/routes/settings/sharex/sharex-builder.ts

@@ -38,6 +38,7 @@ export interface ShareXObject {
 export function BuildShareX(
   host: string,
   apikey: string,
+  preferredExt: string,
   canDelete: boolean,
 ): ShareXObject {
   const base: ShareXObject = {
@@ -51,8 +52,8 @@ export function BuildShareX(
     },
     Body: 'MultipartFormData',
     FileFormName: 'image',
-    URL: `${host}/view/{json:data.id}`,
-    ThumbnailURL: `${host}/i/{json:data.id}.png?width=256&shrinkonly=yes`,
+    URL: `${host}/i/{json:data.id}${preferredExt}`,
+    ThumbnailURL: `${host}/i/{json:data.id}.jpg?width=128&shrinkonly=yes`,
     ErrorMessage: '{json:data.message}',
   };
 

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

@@ -4,11 +4,8 @@ import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { ImageLinks } from 'picsur-shared/dist/dto/image-links.class';
 import {
   AnimFileType,
-  FileType,
-  FileType2Ext,
-  ImageFileType,
-  SupportedFileTypeCategory,
-  SupportedFileTypes
+  FileType, ImageFileType,
+  SupportedFileTypeCategory
 } from 'picsur-shared/dist/dto/mimes.dto';
 import { Permission } from 'picsur-shared/dist/dto/permissions.enum';
 
@@ -21,6 +18,7 @@ import { SnackBarType } from 'src/app/models/dto/snack-bar-type.dto';
 import { ImageService } from 'src/app/services/api/image.service';
 import { PermissionService } from 'src/app/services/api/permission.service';
 import { UserService } from 'src/app/services/api/user.service';
+import { SimpleUtilService } from 'src/app/util/util-module/simple-util.service';
 import { UtilService } from 'src/app/util/util-module/util.service';
 import {
   CustomizeDialogComponent,
@@ -37,6 +35,7 @@ export class ViewComponent implements OnInit {
     private readonly router: Router,
     private readonly imageService: ImageService,
     private readonly utilService: UtilService,
+    private readonly simpleUtil: SimpleUtilService,
     private readonly permissionService: PermissionService,
     private readonly userService: UserService,
   ) {}
@@ -174,7 +173,7 @@ export class ViewComponent implements OnInit {
     const options: CustomizeDialogData = {
       imageID: this.id,
       selectedFormat: this.currentSelectedFormat,
-      formatOptions: this.getBaseFormatOptions(),
+      formatOptions: this.simpleUtil.getBaseFormatOptions(),
     };
 
     if (options.selectedFormat === 'original') {
@@ -225,28 +224,8 @@ export class ViewComponent implements OnInit {
       });
     }
 
-    newOptions = newOptions.concat(this.getBaseFormatOptions());
+    newOptions = newOptions.concat(this.simpleUtil.getBaseFormatOptions());
 
     this.formatOptions = newOptions;
   }
-
-  private getBaseFormatOptions() {
-    let newOptions: {
-      value: string;
-      key: string;
-    }[] = [];
-
-    newOptions.push(
-      ...SupportedFileTypes.map((mime) => {
-        let ext = FileType2Ext(mime);
-        if (HasFailed(ext)) ext = 'Error';
-        return {
-          value: ext.toUpperCase(),
-          key: mime,
-        };
-      }),
-    );
-
-    return newOptions;
-  }
 }

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

@@ -1,5 +1,7 @@
 import { Inject, Injectable } from '@angular/core';
 import { LOCATION } from '@ng-web-apis/common';
+import { FileType2Ext, SupportedFileTypes } from 'picsur-shared/dist/dto/mimes.dto';
+import { HasFailed } from 'picsur-shared/dist/types';
 import { Logger } from '../../services/logger/logger.service';
 
 @Injectable({
@@ -27,4 +29,24 @@ export class SimpleUtilService {
     a.target = '_self';
     a.click();
   }
+
+  public getBaseFormatOptions() {
+    let newOptions: {
+      value: string;
+      key: string;
+    }[] = [];
+
+    newOptions.push(
+      ...SupportedFileTypes.map((mime) => {
+        let ext = FileType2Ext(mime);
+        if (HasFailed(ext)) ext = 'Error';
+        return {
+          value: ext.toUpperCase(),
+          key: mime,
+        };
+      }),
+    );
+
+    return newOptions;
+  }
 }