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
2026-06-05 19:06:53 +08:00
parent abfd92b16a
commit 7a33a62c8f
16 changed files with 494 additions and 106 deletions

View File

@@ -10,6 +10,7 @@ import { I18nProvider } from "./i18n";
import { MotionProvider } from "./motion";
import { ToastProvider } from "./components/Toast";
import { SaveToAlbumGuideProvider } from "./components/SaveToAlbumGuide";
import { InAppDownloadGuideProvider } from "./components/InAppDownloadGuide";
import { FavoritesProvider } from "./favorites/FavoritesProvider";
import { AutoInjectedLogin } from "./wallet/AutoInjectedLogin";
import { RainbowWalletProvider } from "./wallet/RainbowWalletProvider";
@@ -62,120 +63,127 @@ export default function App() {
</RainbowWalletProvider>
</WalletStackErrorBoundary>
<FavoritesProvider>
<SaveToAlbumGuideProvider>
<AdminRouterModeProvider value="absolute">
<ImageLightboxProvider>
<VideoPlayerProvider>
<PageTitleProvider>
<BrowserRouter>
<ScrollToTop />
<Routes>
<Route element={<PublicLayout />}>
<Route
path="/"
element={<LocalizedHomePage targetLang="en" />}
/>
<Route path="/browse" element={<Browse />} />
<Route
path="/categories"
element={<CategoriesPage />}
/>
<Route
path="/official-recommendations"
element={<OfficialRecommendationsPage />}
/>
<Route
path="/category/:slug"
element={<CategoryPage />}
/>
<Route path="/search" element={<SearchPage />} />
<Route
path="/resource/:id"
element={<PostRedirect />}
/>
<Route
path="/favorites"
element={<Favorites />}
/>
<InAppDownloadGuideProvider>
<SaveToAlbumGuideProvider>
<AdminRouterModeProvider value="absolute">
<ImageLightboxProvider>
<VideoPlayerProvider>
<PageTitleProvider>
<BrowserRouter>
<ScrollToTop />
<Routes>
<Route element={<PublicLayout />}>
<Route
path="/"
element={
<LocalizedHomePage targetLang="en" />
}
/>
<Route path="/browse" element={<Browse />} />
<Route
path="/categories"
element={<CategoriesPage />}
/>
<Route
path="/official-recommendations"
element={<OfficialRecommendationsPage />}
/>
<Route
path="/category/:slug"
element={<CategoryPage />}
/>
<Route
path="/search"
element={<SearchPage />}
/>
<Route
path="/resource/:id"
element={<PostRedirect />}
/>
<Route
path="/favorites"
element={<Favorites />}
/>
{localizedHomeRoutes.map((route) => (
<Route key={route.path} path={route.path}>
{localizedHomeRoutes.map((route) => (
<Route key={route.path} path={route.path}>
<Route
index
element={
<LocalizedHomePage
targetLang={route.lang}
/>
}
/>
<Route path="browse" element={<Browse />} />
<Route
path="categories"
element={<CategoriesPage />}
/>
<Route
path="official-recommendations"
element={<OfficialRecommendationsPage />}
/>
<Route
path="category/:slug"
element={<CategoryPage />}
/>
<Route
path="search"
element={<SearchPage />}
/>
<Route
path="resource/:id"
element={<PostRedirect />}
/>
<Route
path="favorites"
element={<Favorites />}
/>
</Route>
))}
</Route>
{/* Legacy long-form language URLs → short-code
redirects. Shared links (e.g. WeChat) keep working. */}
{legacyLanguageRedirects.map((redirect) => (
<Route key={redirect.from}>
<Route
index
path={redirect.from}
element={
<LocalizedHomePage
targetLang={route.lang}
/>
<LegacyLangRedirect to={redirect.to} />
}
/>
<Route path="browse" element={<Browse />} />
<Route
path="categories"
element={<CategoriesPage />}
/>
<Route
path="official-recommendations"
element={<OfficialRecommendationsPage />}
/>
<Route
path="category/:slug"
element={<CategoryPage />}
/>
<Route
path="search"
element={<SearchPage />}
/>
<Route
path="resource/:id"
element={<PostRedirect />}
/>
<Route
path="favorites"
element={<Favorites />}
path={`${redirect.from}/*`}
element={
<LegacyLangRedirect to={redirect.to} />
}
/>
</Route>
))}
</Route>
{/* Legacy long-form language URLs → short-code
redirects. Shared links (e.g. WeChat) keep working. */}
{legacyLanguageRedirects.map((redirect) => (
<Route key={redirect.from}>
{adminEnabled ? (
AdminRouteTree()
) : (
<Route
path={redirect.from}
element={
<LegacyLangRedirect to={redirect.to} />
}
path={`${adminUiPrefix}/*`}
element={<Navigate to="/" replace />}
/>
<Route
path={`${redirect.from}/*`}
element={
<LegacyLangRedirect to={redirect.to} />
}
/>
</Route>
))}
)}
{adminEnabled ? (
AdminRouteTree()
) : (
<Route
path={`${adminUiPrefix}/*`}
path="*"
element={<Navigate to="/" replace />}
/>
)}
<Route
path="*"
element={<Navigate to="/" replace />}
/>
</Routes>
</BrowserRouter>
</PageTitleProvider>
</VideoPlayerProvider>
</ImageLightboxProvider>
</AdminRouterModeProvider>
</SaveToAlbumGuideProvider>
</Routes>
</BrowserRouter>
</PageTitleProvider>
</VideoPlayerProvider>
</ImageLightboxProvider>
</AdminRouterModeProvider>
</SaveToAlbumGuideProvider>
</InAppDownloadGuideProvider>
</FavoritesProvider>
</WalletProvider>
</ToastProvider>