web/download: show explanation when getting blocked by browser

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",
 

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>

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"));
     }
 }
 

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;