fix: in-app browser download opens file inline
- Detect in-app WebViews (WeChat / TokenPocket / imToken / Telegram / iOS WKWebView, etc.) and show a guide modal asking the user to open the link in their system browser, with a copy-link action. - For normal browsers, fetch the attachment as a Blob and trigger download from a same-origin object URL so the file always lands in the user's Downloads folder with the original filename, even when the browser would otherwise inline-preview the response. - Fall back to the anchor download for files larger than 50MB (avoid loading them entirely into memory) or when fetch fails. - Pass `sizeBytes` from known call sites so the threshold actually applies. - Add localized strings for the guide modal in all 7 locales. See .unipi/docs/debug/2026-06-05-in-app-browser-download-debug.md.
This commit is contained in:
TerryM
179
src/components/InAppDownloadGuide.tsx
Normal file
179
src/components/InAppDownloadGuide.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import { Copy, X } from "lucide-react";
|
||||
import { useEffect, useState, type ReactNode } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { useI18n } from "../i18n";
|
||||
import { useToast } from "./Toast";
|
||||
import {
|
||||
IN_APP_DOWNLOAD_GUIDE_EVENT,
|
||||
type InAppDownloadGuideDetail,
|
||||
} from "./messageStream/utils/downloadFile";
|
||||
import { inAppBrowserName } from "../utils/inAppBrowser";
|
||||
|
||||
async function copyTextToClipboard(text: string): Promise<boolean> {
|
||||
try {
|
||||
if (
|
||||
typeof navigator !== "undefined" &&
|
||||
navigator.clipboard &&
|
||||
typeof navigator.clipboard.writeText === "function"
|
||||
) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
}
|
||||
} catch {
|
||||
// fall through to legacy path
|
||||
}
|
||||
try {
|
||||
const ta = document.createElement("textarea");
|
||||
ta.value = text;
|
||||
ta.setAttribute("readonly", "");
|
||||
ta.style.position = "fixed";
|
||||
ta.style.top = "0";
|
||||
ta.style.left = "0";
|
||||
ta.style.opacity = "0";
|
||||
document.body.append(ta);
|
||||
ta.select();
|
||||
const ok = document.execCommand("copy");
|
||||
ta.remove();
|
||||
return ok;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function InAppDownloadGuideProvider({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const { showToast } = useToast();
|
||||
const [detail, setDetail] = useState<InAppDownloadGuideDetail | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const onShow = (event: Event) => {
|
||||
const ce = event as CustomEvent<InAppDownloadGuideDetail>;
|
||||
if (!ce.detail) return;
|
||||
setDetail(ce.detail);
|
||||
};
|
||||
window.addEventListener(IN_APP_DOWNLOAD_GUIDE_EVENT, onShow);
|
||||
return () =>
|
||||
window.removeEventListener(IN_APP_DOWNLOAD_GUIDE_EVENT, onShow);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!detail) return;
|
||||
const onKey = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") setDetail(null);
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [detail]);
|
||||
|
||||
const close = () => setDetail(null);
|
||||
|
||||
const handleCopy = async () => {
|
||||
if (!detail) return;
|
||||
const ok = await copyTextToClipboard(detail.url);
|
||||
if (ok) {
|
||||
showToast(t("inAppDownloadCopied"));
|
||||
} else {
|
||||
showToast(t("inAppDownloadCopyFail"), "error");
|
||||
}
|
||||
};
|
||||
|
||||
const browser = inAppBrowserName();
|
||||
const intro = browser
|
||||
? t("inAppDownloadIntroNamed").replace("{browser}", browser)
|
||||
: t("inAppDownloadIntro");
|
||||
|
||||
return (
|
||||
<>
|
||||
{children}
|
||||
{detail
|
||||
? createPortal(
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="in-app-download-guide-title"
|
||||
className="fixed inset-0 z-[140] flex items-center justify-center bg-black/70 px-4 backdrop-blur-sm"
|
||||
onClick={close}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-md overflow-hidden rounded-3xl border border-white/10 bg-[#1c1c21] text-neutral-100 shadow-2xl shadow-black/70"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4 border-b border-white/10 px-5 py-4">
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-ark-gold/80">
|
||||
{t("download")}
|
||||
</p>
|
||||
<h2
|
||||
id="in-app-download-guide-title"
|
||||
className="mt-1 text-lg font-semibold text-white"
|
||||
>
|
||||
{t("inAppDownloadTitle")}
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={close}
|
||||
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80"
|
||||
aria-label={t("cancel")}
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 px-5 py-5">
|
||||
<p className="text-sm leading-6 text-neutral-300">{intro}</p>
|
||||
|
||||
<ol className="space-y-3 text-sm leading-6 text-neutral-100">
|
||||
<li className="flex gap-3">
|
||||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ark-gold text-sm font-bold text-black">
|
||||
1
|
||||
</span>
|
||||
<span className="pt-0.5">
|
||||
{t("inAppDownloadStepCopy")}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex gap-3">
|
||||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ark-gold text-sm font-bold text-black">
|
||||
2
|
||||
</span>
|
||||
<span className="pt-0.5">
|
||||
{t("inAppDownloadStepOpen")}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex gap-3">
|
||||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ark-gold text-sm font-bold text-black">
|
||||
3
|
||||
</span>
|
||||
<span className="pt-0.5">
|
||||
{t("inAppDownloadStepDownload")}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div className="rounded-2xl border border-white/10 bg-black/30 p-3">
|
||||
<p className="break-all text-xs leading-5 text-neutral-300">
|
||||
{detail.url}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
className="flex h-11 w-full items-center justify-center gap-2 rounded-full bg-ark-gold px-4 text-sm font-semibold text-black transition hover:bg-ark-gold2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#1c1c21]"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
{t("copyLink")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
: null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user