start work on sharing, and fix speeddial again
This commit is contained in:
parent
95a3641345
commit
9f1aed7513
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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(['/']);
|
||||
}
|
||||
|
|
|
@ -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>,
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue