start work on sharing, and fix speeddial again

frontend/src/app/components/fab/speed-dial/speed-dial-option.directive.ts

@@ -7,10 +7,10 @@ import { MatTooltip } from '@angular/material/tooltip';
 })
 export class SpeedDialOptionDirective {
   constructor(
-    @Host() @Optional() test?: MatTooltip,
-    @Host() @Optional() test2?: MatButton
+    @Host() @Optional() tooltip?: MatTooltip,
+    @Host() @Optional() button?: MatButton
   ) {
-    if (test) test.position = 'left';
-    if (test2) test2.color = 'primary';
+    if (tooltip) tooltip.position = 'left';
+    if (button) button.color = 'primary';
   }
 }

frontend/src/app/components/fab/speed-dial/speed-dial.component.ts

@@ -21,37 +21,48 @@ export class SpeedDialComponent {
 
   public openManager = new OpenManager();
 
-  private lastMouseEvent: number = 0;
+  private touchUntil: number = 0;
+
+  @HostListener('document:touchstart', ['$event'])
+  @HostListener('document:touchend', ['$event'])
+  touchEvent(e: TouchEvent) {
+    if (e.type === 'touchstart') {
+      this.touchUntil = Infinity;
+    } else {
+      this.touchUntil = e.timeStamp + 2000;
+    }
+  }
 
   @HostListener('document:click', ['$event'])
-  anyClick(e: MouseEvent) {
-    if (!this.openManager.isOpen) return;
-    if (this.lastMouseEvent === e.timeStamp) return;
+  @HostListener('document:keydown.escape', ['$event'])
+  anyClick(e: Event) {
+    console.log(e);
+    if (!this.openManager.isOpen || this.openManager.isAnimating) return;
 
     this.openManager.close();
   }
 
   click(e: MouseEvent) {
-    if (this.lastMouseEvent === e.timeStamp) return;
-
-    this.lastMouseEvent = e.timeStamp;
-    const value = this.openManager.toggle();
-
-    if (value === false) {
+    console.log(e);
+    if (!this.openManager.isOpen) {
+      this.openManager.open();
+    } else {
       this.clickEmitter.next();
     }
   }
 
   enter(e: MouseEvent) {
+    if (e.timeStamp <= this.touchUntil) return;
+
     if (this.openOnHover) {
-      this.lastMouseEvent = e.timeStamp;
       this.openManager.open();
     }
   }
 
   leave(e: MouseEvent) {
+    if (e.timeStamp <= this.touchUntil) return;
+
     if (this.openOnHover) {
-      this.lastMouseEvent = e.timeStamp;
       this.openManager.close();
     }
   }

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

@@ -47,13 +47,7 @@
   [open-on-hover]="true"
   (main-click)="download()"
 >
-  <button mat-mini-fab matTooltip="Close menu">
-    <mat-icon>close</mat-icon>
-  </button>
-  <button mat-mini-fab matTooltip="Info about the action">
-    <mat-icon>edit</mat-icon>
-  </button>
-  <button mat-mini-fab matTooltip="Info about the action">
-    <mat-icon>filter_list</mat-icon>
+  <button mat-mini-fab matTooltip="Share image" (click)="share()">
+    <mat-icon> share </mat-icon>
   </button>
 </speed-dial>

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

@@ -39,6 +39,10 @@ export class ViewComponent implements OnInit {
     this.utilService.downloadFile(this.imageLinks.source);
   }
 
+  share() {
+    this.utilService.shareLink(this.imageLinks.source);
+  }
+
   goBackHome() {
     this.router.navigate(['/']);
   }

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

@@ -38,6 +38,10 @@ export class ApiService {
     return this.fetchHead(url, { method: 'HEAD' });
   }
 
+  public async getBuffer(url: string): AsyncFailable<ArrayBuffer> {
+    return this.fetchBuffer(url, { method: 'GET' });
+  }
+
   public async post<T extends z.AnyZodObject, W extends z.AnyZodObject>(
     sendType: ZodDtoStatic<T>,
     receiveType: ZodDtoStatic<W>,

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

@@ -3,7 +3,10 @@ import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
+import { HasFailed } from 'picsur-shared/dist/types';
 import { map, Observable } from 'rxjs';
+import { ApiService } from 'src/app/services/api/api.service';
+import { Logger } from 'src/app/services/logger/logger.service';
 import { SnackBarType } from '../../models/dto/snack-bar-type.dto';
 import {
   ConfirmDialogComponent,
@@ -14,13 +17,16 @@ import {
   providedIn: 'root',
 })
 export class UtilService {
+  private readonly logger = new Logger('UtilService');
+
   private isDesktopObservable: Observable<boolean>;
 
   constructor(
     private snackBar: MatSnackBar,
     private dialog: MatDialog,
     private router: Router,
-    private breakPointObserver: BreakpointObserver
+    private breakPointObserver: BreakpointObserver,
+    private api: ApiService
   ) {
     this.isDesktopObservable = this.breakPointObserver
       .observe(['(min-width: 576px)']) // Bootstrap breakpoints
@@ -73,6 +79,50 @@ export class UtilService {
     link.remove();
   }
 
+  public canShare(): boolean {
+    return navigator.canShare !== undefined && navigator.share !== undefined;
+  }
+
+  public async shareLink(url: string) {
+    if (!this.canShare()) {
+      this.showSnackBar(
+        'Sharing is not supported on your device',
+        SnackBarType.Warning
+      );
+      return;
+    }
+
+    let image = await this.api.getBuffer(url);
+    if (HasFailed(image)){
+      this.showSnackBar(
+        'Sharing is not supported on your device',
+        SnackBarType.Warning
+      );
+      return;
+    }
+
+    let file = new File([image], 'image.gif', { type: 'image/gif' });
+
+    let a = navigator.canShare({
+      title: 'test',
+      files: [file],
+    });
+    console.log(a);
+
+    try {
+      await navigator.share({
+        title: 'test',
+        files: [file],
+      });
+    } catch (e) {
+      this.logger.error(e);
+      this.showSnackBar(
+        'Sharing is not supported on your device',
+        SnackBarType.Warning
+      );
+    }
+  }
+
   public async sleep(ms: number) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }