From 0fde10874da6b1b36317394e855dc68413268859 Mon Sep 17 00:00:00 2001 From: Code Love Date: Sat, 7 Jun 2025 20:13:29 -0400 Subject: feat(mobile): Add support for viewing PDFs (#1519) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(mobile): add react-native-pdf dependency Add react-native-pdf package to enable PDF viewing functionality in the mobile app. This will be used to display PDF bookmarks directly within the app. Part of #597 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * feat(mobile): add PDF viewer component with authentication support Add a dedicated PDFViewer component that handles downloading and displaying PDF assets with proper authentication headers. Features include: - Download progress indication - Error handling with user-friendly messages - Automatic cleanup of temporary files - Proper memory management to prevent leaks - Content type validation for PDF files Part of #597 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * feat(mobile): integrate PDF viewing in bookmark detail view Integrate the PDFViewer component to display PDF bookmarks inline. When a bookmark is a PDF asset, it now renders using the dedicated PDF viewer instead of treating it as an image. Also adds external PDF opening functionality with platform-specific handling for iOS and Android, proper filename handling, and temporary file cleanup. Additionally fixes dark mode styling for the navigation header to ensure proper contrast in both light and dark themes. Part of #597 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * revert the open externally button * use react query for downloading the pdf --------- Co-authored-by: Claude Co-authored-by: MohamedBassem --- apps/mobile/components/bookmarks/PDFViewer.tsx | 135 +++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 apps/mobile/components/bookmarks/PDFViewer.tsx (limited to 'apps/mobile/components') diff --git a/apps/mobile/components/bookmarks/PDFViewer.tsx b/apps/mobile/components/bookmarks/PDFViewer.tsx new file mode 100644 index 00000000..24b9edfb --- /dev/null +++ b/apps/mobile/components/bookmarks/PDFViewer.tsx @@ -0,0 +1,135 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { ActivityIndicator, StyleSheet, Text, View } from "react-native"; +import ReactNativeBlobUtil from "react-native-blob-util"; +import Pdf from "react-native-pdf"; +import { useQuery } from "@tanstack/react-query"; +import { useColorScheme } from "nativewind"; + +interface PDFViewerProps { + source: string; + headers?: Record; +} + +export function PDFViewer({ source, headers }: PDFViewerProps) { + const [pdfRenderError, setPdfRenderError] = useState(null); + const { colorScheme } = useColorScheme(); + const isDark = colorScheme === "dark"; + const colors = { + background: isDark ? "#000" : "#fff", + foreground: isDark ? "#fff" : "#000", + mutedForeground: isDark ? "#888" : "#666", + }; + + const { + data: localPath, + isLoading, + error: downloadError, + } = useQuery({ + queryKey: ["pdf", source], + queryFn: async () => { + // Create a temporary filename + const fileName = `temp_${Date.now()}.pdf`; + const { dirs } = ReactNativeBlobUtil.fs; + const path = `${dirs.DocumentDir}/${fileName}`; + + const response = await ReactNativeBlobUtil.config({ + fileCache: true, + path, + }).fetch("GET", source, headers ?? {}); + return response.path(); + }, + enabled: !!source, + }); + + // Merge download and render errors + const error = useMemo(() => { + if (downloadError) { + let errorMessage = "Failed to download PDF"; + if (downloadError.message.includes("Network request failed")) { + errorMessage = "Network error. Please check your connection."; + } else if ( + downloadError.message.includes("401") || + downloadError.message.includes("403") + ) { + errorMessage = "Authentication failed. Please sign in again."; + } else if (downloadError.message.includes("404")) { + errorMessage = "PDF not found."; + } + return errorMessage; + } + if (pdfRenderError) { + return pdfRenderError; + } + return null; + }, [downloadError, pdfRenderError]); + + // Cleanup function to remove temporary file on unmount + useEffect(() => { + return () => { + if (localPath) { + ReactNativeBlobUtil.fs.unlink(localPath).catch(() => ({})); + } + }; + }, [source, headers]); + + if (error) { + return ( + + + {error} + + + ); + } + + if (isLoading || !localPath) { + return ( + + + + + Downloading PDF... + + + + ); + } + + return ( + + ({})} + onError={() => setPdfRenderError("Failed to render PDF")} + trustAllCerts={false} + renderActivityIndicator={() => ( + + )} + /> + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + loadingContainer: { + ...StyleSheet.absoluteFillObject, + justifyContent: "center", + alignItems: "center", + zIndex: 1, + }, + loadingText: { + marginTop: 12, + fontSize: 16, + }, + errorText: { + fontSize: 16, + textAlign: "center", + padding: 20, + }, +}); -- cgit v1.2.3-70-g09d2