From 97e77635033dae777194cf0e9238971f88543e58 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 28 Jul 2024 19:15:22 +0600
Subject: [PATCH] web/download: show explanation when getting blocked by
 browser

---
 web/i18n/en/dialog.json                       |  1 +
 web/src/components/dialog/SavingDialog.svelte | 17 +++++++++++++++--
 web/src/lib/download.ts                       | 19 +++++++++++++------
 web/src/lib/types/dialog.ts                   |  1 +
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/web/i18n/en/dialog.json b/web/i18n/en/dialog.json
index 4a993528..13b5cf3e 100644
--- a/web/i18n/en/dialog.json
+++ b/web/i18n/en/dialog.json
@@ -18,6 +18,7 @@
     "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",
+    "saving.blocked": "cobalt tried opening the file in a new tab, but your browser blocked it. you can allow pop-ups for cobalt to prevent this from happening next time.",
 
     "safety.title": "important safety notice",
 
diff --git a/web/src/components/dialog/SavingDialog.svelte b/web/src/components/dialog/SavingDialog.svelte
index 5e1832ab..4940af3c 100644
--- a/web/src/components/dialog/SavingDialog.svelte
+++ b/web/src/components/dialog/SavingDialog.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
 
-    import { app, device } from "$lib/device";
+    import { device } from "$lib/device";
     import { copyURL, openURL, shareURL } from "$lib/download";
 
     import DialogContainer from "$components/dialog/DialogContainer.svelte";
@@ -17,6 +17,7 @@
 
     export let id: string;
     export let url: string;
+    export let bodyText: string = "";
 
     let close: () => void;
 </script>
@@ -69,6 +70,9 @@
                 </VerticalActionButton>
             </div>
         </div>
+        <div class="body-text">
+            {bodyText}
+        </div>
         <DialogButtons
             buttons={[
                 {
@@ -97,7 +101,6 @@
     }
 
     .popup-body {
-        text-align: center;
         max-width: 340px;
         width: calc(100% - var(--padding) - var(--dialog-padding) * 2);
         max-height: 50%;
@@ -140,4 +143,14 @@
         gap: calc(var(--padding) / 2);
         overflow-x: scroll;
     }
+
+    .body-text {
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 1.5;
+        color: var(--gray);
+        white-space: pre-wrap;
+        user-select: text;
+        -webkit-user-select: text;
+    }
 </style>
diff --git a/web/src/lib/download.ts b/web/src/lib/download.ts
index fbd3a124..60227f21 100644
--- a/web/src/lib/download.ts
+++ b/web/src/lib/download.ts
@@ -1,23 +1,30 @@
 import { get } from "svelte/store";
 
-import { device } from "$lib/device";
 import settings from "$lib/state/settings";
 
-import { createDialog } from "$lib/dialogs";
+import { device } from "$lib/device";
+import { t } from "$lib/i18n/translations";
 
-export const openSavingDialog = (url: string) =>
-    createDialog({
+import { createDialog } from "$lib/dialogs";
+import type { DialogInfo } from "$lib/types/dialog";
+
+export const openSavingDialog = (url: string, body: string | void) => {
+    let dialogData: DialogInfo = {
         type: "saving",
         id: "saving",
         url
-    })
+    }
+    if (body) dialogData.bodyText = body;
+
+    createDialog(dialogData)
+}
 
 export const openURL = (url: string) => {
     const open = window.open(url, "_blank");
 
     /* if new tab got blocked by user agent, show a saving dialog */
     if (!open) {
-        return openSavingDialog(url);
+        return openSavingDialog(url, get(t)("dialog.saving.blocked"));
     }
 }
 
diff --git a/web/src/lib/types/dialog.ts b/web/src/lib/types/dialog.ts
index 0a5004db..d3d086e1 100644
--- a/web/src/lib/types/dialog.ts
+++ b/web/src/lib/types/dialog.ts
@@ -39,6 +39,7 @@ type PickerDialog = Dialog & {
 type SavingDialog = Dialog & {
     type: "saving",
     url: string,
+    bodyText?: string,
 };
 
 export type DialogInfo = SmallDialog | PickerDialog | SavingDialog;