From a9f9a3e34225ec82e9a03aec6a91ab97dc7052d4 Mon Sep 17 00:00:00 2001 From: wukko Date: Sat, 27 Jul 2024 15:07:26 +0600 Subject: [PATCH] web/dialogs: add saving method dialog --- web/i18n/en/dialog.json | 7 +- .../buttons/VerticalActionButton.svelte | 31 ++++ web/src/components/dialog/DialogHolder.svelte | 6 +- web/src/components/dialog/SavingDialog.svelte | 139 ++++++++++++++++++ web/src/components/misc/Meowbalt.svelte | 5 +- web/src/lib/download.ts | 42 +++++- web/src/lib/types/dialog.ts | 10 +- 7 files changed, 230 insertions(+), 10 deletions(-) create mode 100644 web/src/components/buttons/VerticalActionButton.svelte create mode 100644 web/src/components/dialog/SavingDialog.svelte diff --git a/web/i18n/en/dialog.json b/web/i18n/en/dialog.json index bfe30bec..75f673f8 100644 --- a/web/i18n/en/dialog.json +++ b/web/i18n/en/dialog.json @@ -4,6 +4,9 @@ "button.reset": "reset", "button.done": "done", "button.downloadAudio": "download audio", + "button.download": "download", + "button.share": "share", + "button.copy": "copy", "reset.title": "reset all settings?", "reset.body": "are you sure you want to reset all settings? this action is immediate and irreversible.", @@ -11,5 +14,7 @@ "picker.title": "select what to save", "picker.description.desktop": "click an item to save it. images can also be saved via the right click menu.", "picker.description.phone": "press an item to save it. images can also be saved with a long press.", - "picker.description.ios": "press an item to save it with a shortcut. images can also be saved with a long press." + "picker.description.ios": "press an item to save it with a shortcut. images can also be saved with a long press.", + + "saving.title": "choose how to save" } diff --git a/web/src/components/buttons/VerticalActionButton.svelte b/web/src/components/buttons/VerticalActionButton.svelte new file mode 100644 index 00000000..a9d37689 --- /dev/null +++ b/web/src/components/buttons/VerticalActionButton.svelte @@ -0,0 +1,31 @@ + + + + + diff --git a/web/src/components/dialog/DialogHolder.svelte b/web/src/components/dialog/DialogHolder.svelte index 141491d0..7a481d42 100644 --- a/web/src/components/dialog/DialogHolder.svelte +++ b/web/src/components/dialog/DialogHolder.svelte @@ -3,6 +3,7 @@ import SmallDialog from "$components/dialog/SmallDialog.svelte"; import PickerDialog from "$components/dialog/PickerDialog.svelte"; + import SavingDialog from "$components/dialog/SavingDialog.svelte"; $: backdropVisible = $dialogs.length > 0; @@ -10,10 +11,13 @@
{#each $dialogs as dialog} {@const { type, ...data } = dialog} + {#if type === "small"} - {:else if dialog.type === "picker"} + {:else if type === "picker"} + {:else if type === "saving"} + {/if} {/each}
diff --git a/web/src/components/dialog/SavingDialog.svelte b/web/src/components/dialog/SavingDialog.svelte new file mode 100644 index 00000000..6e039df8 --- /dev/null +++ b/web/src/components/dialog/SavingDialog.svelte @@ -0,0 +1,139 @@ + + + +
+
+ +
+
+
+ +

+ {$t("dialog.saving.title")} +

+
+
+ openURL(url)} + > + + {$t("dialog.button.download")} + + await shareURL(url)} + > + + {$t("dialog.button.share")} + + copyURL(url)} + > + + {$t("dialog.button.copy")} + +
+
+ {}, + }, + ]} + closeFunc={close} + /> +
+ + + + + diff --git a/web/src/components/misc/Meowbalt.svelte b/web/src/components/misc/Meowbalt.svelte index 13c52556..26ad14b3 100644 --- a/web/src/components/misc/Meowbalt.svelte +++ b/web/src/components/misc/Meowbalt.svelte @@ -21,11 +21,14 @@ object-fit: cover; } - .think, .error { height: 160px; } + .question { + height: 140px; + } + .error { margin-left: 25px; } diff --git a/web/src/lib/download.ts b/web/src/lib/download.ts index e08320ef..74f65606 100644 --- a/web/src/lib/download.ts +++ b/web/src/lib/download.ts @@ -1,9 +1,41 @@ -import { device } from "$lib/device"; +import { get } from "svelte/store"; + +import { app, device } from "$lib/device"; +import settings from "$lib/state/settings"; + +import { createDialog } from "$lib/dialogs"; + +export const openURL = (url: string) => { + return window.open(url, "_blank"); +} + +export const shareURL = async (url: string) => { + try { + return await navigator?.share({ url }); + } catch { + return false; + } +} + +export const copyURL = async (url: string) => { + try { + return await navigator?.clipboard.writeText(url); + } catch { + return false; + } +} export const downloadFile = (url: string) => { - if (device.is.iOS) { - return navigator?.share({ url }).catch(() => {}); + const savingPreference = get(settings).save.downloadPopup; + if (savingPreference) { + createDialog({ + type: "saving", + id: "saving", + url + }) + } else if (device.is.iOS && app.is.installed) { + return shareURL(url); } else { - return window.open(url, "_blank"); + return openURL(url); } -}; +} diff --git a/web/src/lib/types/dialog.ts b/web/src/lib/types/dialog.ts index f01af5e4..f7951309 100644 --- a/web/src/lib/types/dialog.ts +++ b/web/src/lib/types/dialog.ts @@ -17,7 +17,6 @@ export type DialogPickerItem = { type Dialog = { id: string, - buttons?: DialogButton[], }; type SmallDialog = Dialog & { @@ -27,11 +26,18 @@ type SmallDialog = Dialog & { title?: string, bodyText?: string, bodySubText?: string, + buttons?: DialogButton[], }; type PickerDialog = Dialog & { type: "picker", items?: DialogPickerItem[], + buttons?: DialogButton[], }; -export type DialogInfo = SmallDialog | PickerDialog; \ No newline at end of file +type SavingDialog = Dialog & { + type: "saving", + url: string, +}; + +export type DialogInfo = SmallDialog | PickerDialog | SavingDialog;