Implement comprehensive PWA with offline Bible reading capabilities
- Add Web App Manifest with app metadata, icons, and installation support - Create Service Worker with intelligent caching strategies for Bible content, static assets, and dynamic content - Implement IndexedDB-based offline storage system for Bible versions, books, chapters, and verses - Add offline download manager component for browsing and downloading Bible versions - Create offline Bible reader component for seamless offline reading experience - Integrate PWA install prompt with platform-specific instructions - Add offline reading interface to existing Bible reader with download buttons - Create dedicated offline page with tabbed interface for reading and downloading - Add PWA and offline-related translations for English and Romanian locales - Implement background sync for Bible downloads and cache management - Add storage usage monitoring and management utilities - Ensure SSR-safe implementation with dynamic imports for client-side components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
371
components/bible/offline-bible-reader.tsx
Normal file
371
components/bible/offline-bible-reader.tsx
Normal file
@@ -0,0 +1,371 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
// import { useTranslations } from 'next-intl'
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Typography,
|
||||
Select,
|
||||
MenuItem,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Button,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
Chip,
|
||||
Paper,
|
||||
Divider,
|
||||
IconButton,
|
||||
Tooltip
|
||||
} from '@mui/material'
|
||||
import {
|
||||
CloudOff,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
NavigateBefore,
|
||||
NavigateNext,
|
||||
MenuBook,
|
||||
Download
|
||||
} from '@mui/icons-material'
|
||||
import {
|
||||
offlineStorage,
|
||||
type BibleVersion,
|
||||
type BibleBook,
|
||||
type BibleChapter
|
||||
} from '@/lib/offline-storage'
|
||||
|
||||
interface OfflineBibleReaderProps {
|
||||
onRequestDownload?: () => void
|
||||
}
|
||||
|
||||
export function OfflineBibleReader({ onRequestDownload }: OfflineBibleReaderProps) {
|
||||
// const t = useTranslations('bible')
|
||||
const [isOnline, setIsOnline] = useState(true)
|
||||
const [versions, setVersions] = useState<BibleVersion[]>([])
|
||||
const [selectedVersion, setSelectedVersion] = useState<string>('')
|
||||
const [books, setBooks] = useState<BibleBook[]>([])
|
||||
const [selectedBook, setSelectedBook] = useState<string>('')
|
||||
const [currentChapter, setCurrentChapter] = useState<BibleChapter | null>(null)
|
||||
const [selectedChapterNum, setSelectedChapterNum] = useState<number>(1)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
checkOnlineStatus()
|
||||
loadOfflineVersions()
|
||||
|
||||
// Listen for online/offline events
|
||||
const handleOnline = () => setIsOnline(true)
|
||||
const handleOffline = () => setIsOnline(false)
|
||||
|
||||
window.addEventListener('online', handleOnline)
|
||||
window.addEventListener('offline', handleOffline)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('online', handleOnline)
|
||||
window.removeEventListener('offline', handleOffline)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedVersion) {
|
||||
loadBooksForVersion(selectedVersion)
|
||||
}
|
||||
}, [selectedVersion])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedBook && selectedVersion) {
|
||||
loadChapter(selectedVersion, selectedBook, selectedChapterNum)
|
||||
}
|
||||
}, [selectedBook, selectedChapterNum, selectedVersion])
|
||||
|
||||
const checkOnlineStatus = () => {
|
||||
setIsOnline(navigator.onLine)
|
||||
}
|
||||
|
||||
const loadOfflineVersions = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const offlineVersions = await offlineStorage.getAllVersions()
|
||||
setVersions(offlineVersions)
|
||||
|
||||
if (offlineVersions.length > 0 && !selectedVersion) {
|
||||
setSelectedVersion(offlineVersions[0].id)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load offline versions:', error)
|
||||
setError('Failed to load offline Bible versions')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const loadBooksForVersion = async (versionId: string) => {
|
||||
try {
|
||||
const versionBooks = await offlineStorage.getBooksForVersion(versionId)
|
||||
setBooks(versionBooks.sort((a, b) => a.orderNum - b.orderNum))
|
||||
|
||||
if (versionBooks.length > 0 && !selectedBook) {
|
||||
setSelectedBook(versionBooks[0].id)
|
||||
setSelectedChapterNum(1)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load books:', error)
|
||||
setError('Failed to load books for this version')
|
||||
}
|
||||
}
|
||||
|
||||
const loadChapter = async (versionId: string, bookId: string, chapterNum: number) => {
|
||||
try {
|
||||
setError(null)
|
||||
const chapter = await offlineStorage.getChapter(versionId, bookId, chapterNum)
|
||||
|
||||
if (chapter) {
|
||||
setCurrentChapter(chapter)
|
||||
} else {
|
||||
setError(`Chapter ${chapterNum} not found in offline storage`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load chapter:', error)
|
||||
setError('Failed to load chapter from offline storage')
|
||||
}
|
||||
}
|
||||
|
||||
const navigateChapter = (direction: 'prev' | 'next') => {
|
||||
if (!currentChapter || !selectedBook) return
|
||||
|
||||
const currentBook = books.find(b => b.id === selectedBook)
|
||||
if (!currentBook) return
|
||||
|
||||
let newChapterNum = selectedChapterNum
|
||||
let newBookId = selectedBook
|
||||
|
||||
if (direction === 'next') {
|
||||
if (selectedChapterNum < currentBook.chaptersCount) {
|
||||
newChapterNum = selectedChapterNum + 1
|
||||
} else {
|
||||
// Move to next book
|
||||
const currentBookIndex = books.findIndex(b => b.id === selectedBook)
|
||||
if (currentBookIndex < books.length - 1) {
|
||||
newBookId = books[currentBookIndex + 1].id
|
||||
newChapterNum = 1
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (selectedChapterNum > 1) {
|
||||
newChapterNum = selectedChapterNum - 1
|
||||
} else {
|
||||
// Move to previous book
|
||||
const currentBookIndex = books.findIndex(b => b.id === selectedBook)
|
||||
if (currentBookIndex > 0) {
|
||||
const prevBook = books[currentBookIndex - 1]
|
||||
newBookId = prevBook.id
|
||||
newChapterNum = prevBook.chaptersCount
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (newBookId !== selectedBook) {
|
||||
setSelectedBook(newBookId)
|
||||
}
|
||||
setSelectedChapterNum(newChapterNum)
|
||||
}
|
||||
|
||||
const getCurrentBookName = () => {
|
||||
return books.find(b => b.id === selectedBook)?.name || ''
|
||||
}
|
||||
|
||||
const getVersionName = () => {
|
||||
return versions.find(v => v.id === selectedVersion)?.name || ''
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
if (versions.length === 0) {
|
||||
return (
|
||||
<Card sx={{ m: 2 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6 }}>
|
||||
<CloudOff sx={{ fontSize: 60, color: 'text.secondary', mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
No Offline Bible Versions
|
||||
</Typography>
|
||||
<Typography color="text.secondary" paragraph>
|
||||
You haven't downloaded any Bible versions for offline reading yet.
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Download />}
|
||||
onClick={onRequestDownload}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
Download Bible Versions
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 2 }}>
|
||||
{/* Header with status */}
|
||||
<Box sx={{ mb: 3, display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<MenuBook color="primary" />
|
||||
<Typography variant="h5">Offline Bible Reader</Typography>
|
||||
<Chip
|
||||
icon={isOnline ? <Wifi /> : <WifiOff />}
|
||||
label={isOnline ? 'Online' : 'Offline'}
|
||||
color={isOnline ? 'success' : 'warning'}
|
||||
size="small"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Controls */}
|
||||
<Paper sx={{ p: 2, mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<FormControl size="small" sx={{ minWidth: 200 }}>
|
||||
<InputLabel>Bible Version</InputLabel>
|
||||
<Select
|
||||
value={selectedVersion}
|
||||
label="Bible Version"
|
||||
onChange={(e) => setSelectedVersion(e.target.value)}
|
||||
>
|
||||
{versions.map((version) => (
|
||||
<MenuItem key={version.id} value={version.id}>
|
||||
{version.name} ({version.abbreviation})
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl size="small" sx={{ minWidth: 200 }}>
|
||||
<InputLabel>Book</InputLabel>
|
||||
<Select
|
||||
value={selectedBook}
|
||||
label="Book"
|
||||
onChange={(e) => {
|
||||
setSelectedBook(e.target.value)
|
||||
setSelectedChapterNum(1)
|
||||
}}
|
||||
>
|
||||
{books.map((book) => (
|
||||
<MenuItem key={book.id} value={book.id}>
|
||||
{book.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl size="small" sx={{ minWidth: 120 }}>
|
||||
<InputLabel>Chapter</InputLabel>
|
||||
<Select
|
||||
value={selectedChapterNum}
|
||||
label="Chapter"
|
||||
onChange={(e) => setSelectedChapterNum(Number(e.target.value))}
|
||||
>
|
||||
{Array.from(
|
||||
{ length: books.find(b => b.id === selectedBook)?.chaptersCount || 1 },
|
||||
(_, i) => (
|
||||
<MenuItem key={i + 1} value={i + 1}>
|
||||
{i + 1}
|
||||
</MenuItem>
|
||||
)
|
||||
)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Error Alert */}
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 3 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Chapter Content */}
|
||||
{currentChapter && (
|
||||
<Card>
|
||||
<CardContent>
|
||||
{/* Chapter Header */}
|
||||
<Box sx={{ mb: 3, textAlign: 'center' }}>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
{getCurrentBookName()} {selectedChapterNum}
|
||||
</Typography>
|
||||
<Typography variant="subtitle1" color="text.secondary">
|
||||
{getVersionName()}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ mb: 3 }} />
|
||||
|
||||
{/* Verses */}
|
||||
<Box sx={{ lineHeight: 2, fontSize: '1.1rem' }}>
|
||||
{currentChapter.verses.map((verse) => (
|
||||
<Box key={verse.id} sx={{ mb: 1 }}>
|
||||
<Typography
|
||||
component="span"
|
||||
sx={{
|
||||
fontWeight: 'bold',
|
||||
color: 'primary.main',
|
||||
fontSize: '0.9em',
|
||||
mr: 1
|
||||
}}
|
||||
>
|
||||
{verse.verseNum}
|
||||
</Typography>
|
||||
<Typography component="span">
|
||||
{verse.text}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{/* Navigation */}
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mt: 4,
|
||||
pt: 2,
|
||||
borderTop: 1,
|
||||
borderColor: 'divider'
|
||||
}}>
|
||||
<Tooltip title="Previous Chapter">
|
||||
<IconButton
|
||||
onClick={() => navigateChapter('prev')}
|
||||
disabled={selectedChapterNum === 1 && books.findIndex(b => b.id === selectedBook) === 0}
|
||||
>
|
||||
<NavigateBefore />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{currentChapter.verses.length} verses
|
||||
</Typography>
|
||||
|
||||
<Tooltip title="Next Chapter">
|
||||
<IconButton
|
||||
onClick={() => navigateChapter('next')}
|
||||
disabled={
|
||||
selectedChapterNum === (books.find(b => b.id === selectedBook)?.chaptersCount || 1) &&
|
||||
books.findIndex(b => b.id === selectedBook) === books.length - 1
|
||||
}
|
||||
>
|
||||
<NavigateNext />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
377
components/bible/offline-download-manager.tsx
Normal file
377
components/bible/offline-download-manager.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
// import { useTranslations } from 'next-intl'
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Typography,
|
||||
Button,
|
||||
LinearProgress,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
ListItemSecondaryAction,
|
||||
IconButton,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Chip,
|
||||
Alert,
|
||||
Tooltip
|
||||
} from '@mui/material'
|
||||
import {
|
||||
Download,
|
||||
Delete,
|
||||
CloudDownload,
|
||||
Storage,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
CheckCircle,
|
||||
Error,
|
||||
Info
|
||||
} from '@mui/icons-material'
|
||||
import { bibleDownloadManager, type BibleVersion, type DownloadProgress } from '@/lib/offline-storage'
|
||||
|
||||
interface OfflineDownloadManagerProps {
|
||||
availableVersions: BibleVersion[]
|
||||
onVersionDownloaded?: (versionId: string) => void
|
||||
}
|
||||
|
||||
export function OfflineDownloadManager({ availableVersions, onVersionDownloaded }: OfflineDownloadManagerProps) {
|
||||
// const t = useTranslations('bible')
|
||||
const [downloadedVersions, setDownloadedVersions] = useState<BibleVersion[]>([])
|
||||
const [downloads, setDownloads] = useState<Record<string, DownloadProgress>>({})
|
||||
const [storageInfo, setStorageInfo] = useState({ used: 0, quota: 0, percentage: 0 })
|
||||
const [isOnline, setIsOnline] = useState(true)
|
||||
const [confirmDelete, setConfirmDelete] = useState<string | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
loadDownloadedVersions()
|
||||
loadStorageInfo()
|
||||
checkOnlineStatus()
|
||||
|
||||
// Listen for online/offline events
|
||||
const handleOnline = () => setIsOnline(true)
|
||||
const handleOffline = () => setIsOnline(false)
|
||||
|
||||
window.addEventListener('online', handleOnline)
|
||||
window.addEventListener('offline', handleOffline)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('online', handleOnline)
|
||||
window.removeEventListener('offline', handleOffline)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const loadDownloadedVersions = async () => {
|
||||
try {
|
||||
const versions = await bibleDownloadManager.getDownloadedVersions()
|
||||
setDownloadedVersions(versions)
|
||||
} catch (error: unknown) {
|
||||
console.error('Failed to load downloaded versions:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const loadStorageInfo = async () => {
|
||||
try {
|
||||
const info = await bibleDownloadManager.getStorageInfo()
|
||||
setStorageInfo(info)
|
||||
} catch (error: unknown) {
|
||||
console.error('Failed to load storage info:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const checkOnlineStatus = () => {
|
||||
setIsOnline(navigator.onLine)
|
||||
}
|
||||
|
||||
const handleDownload = async (version: BibleVersion) => {
|
||||
if (!isOnline) {
|
||||
alert('You need an internet connection to download Bible versions')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await bibleDownloadManager.downloadVersion(
|
||||
version.id,
|
||||
(progress: DownloadProgress) => {
|
||||
setDownloads(prev => ({
|
||||
...prev,
|
||||
[version.id]: progress
|
||||
}))
|
||||
|
||||
if (progress.status === 'completed') {
|
||||
loadDownloadedVersions()
|
||||
loadStorageInfo()
|
||||
onVersionDownloaded?.(version.id)
|
||||
|
||||
// Remove from downloads state after completion
|
||||
setTimeout(() => {
|
||||
setDownloads(prev => {
|
||||
const { [version.id]: _, ...rest } = prev
|
||||
return rest
|
||||
})
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
)
|
||||
} catch (error: unknown) {
|
||||
console.error('Download failed:', error)
|
||||
const errorMessage = 'Download failed'
|
||||
alert(errorMessage)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (versionId: string) => {
|
||||
try {
|
||||
await bibleDownloadManager.deleteVersion(versionId)
|
||||
setDownloadedVersions(prev => prev.filter(v => v.id !== versionId))
|
||||
loadStorageInfo()
|
||||
setConfirmDelete(null)
|
||||
} catch (error: unknown) {
|
||||
console.error('Delete failed:', error)
|
||||
alert('Failed to delete version')
|
||||
}
|
||||
}
|
||||
|
||||
const formatBytes = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 Bytes'
|
||||
const k = 1024
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return <CheckCircle color="success" />
|
||||
case 'failed':
|
||||
return <Error color="error" />
|
||||
case 'downloading':
|
||||
return <CloudDownload color="primary" />
|
||||
default:
|
||||
return <Info color="info" />
|
||||
}
|
||||
}
|
||||
|
||||
const isVersionDownloaded = (versionId: string) => {
|
||||
return downloadedVersions.some(v => v.id === versionId)
|
||||
}
|
||||
|
||||
const isVersionDownloading = (versionId: string) => {
|
||||
return downloads[versionId]?.status === 'downloading'
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Typography>Loading offline storage...</Typography>
|
||||
<LinearProgress sx={{ mt: 2 }} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 3 }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ mb: 3, display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Storage color="primary" />
|
||||
<Typography variant="h5">Offline Bible Storage</Typography>
|
||||
<Chip
|
||||
icon={isOnline ? <Wifi /> : <WifiOff />}
|
||||
label={isOnline ? 'Online' : 'Offline'}
|
||||
color={isOnline ? 'success' : 'error'}
|
||||
size="small"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Storage Info */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Storage Usage
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={storageInfo.percentage}
|
||||
sx={{ height: 8, borderRadius: 4 }}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{storageInfo.percentage.toFixed(1)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{formatBytes(storageInfo.used)} of {formatBytes(storageInfo.quota)} used
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{downloadedVersions.length} Bible versions downloaded
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Available Versions for Download */}
|
||||
{isOnline && (
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Available for Download
|
||||
</Typography>
|
||||
<List dense>
|
||||
{availableVersions
|
||||
.filter(version => !isVersionDownloaded(version.id))
|
||||
.map((version) => (
|
||||
<ListItem key={version.id}>
|
||||
<ListItemText
|
||||
primary={version.name}
|
||||
secondary={`${version.abbreviation} - ${version.language}`}
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
<Button
|
||||
startIcon={<Download />}
|
||||
onClick={() => handleDownload(version)}
|
||||
disabled={isVersionDownloading(version.id)}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
{availableVersions.filter(v => !isVersionDownloaded(v.id)).length === 0 && (
|
||||
<Typography color="text.secondary">
|
||||
All available versions are already downloaded
|
||||
</Typography>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Active Downloads */}
|
||||
{Object.keys(downloads).length > 0 && (
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Downloads in Progress
|
||||
</Typography>
|
||||
<List dense>
|
||||
{Object.entries(downloads).map(([versionId, progress]) => {
|
||||
const version = availableVersions.find(v => v.id === versionId)
|
||||
return (
|
||||
<ListItem key={versionId}>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{getStatusIcon(progress.status)}
|
||||
<Typography>
|
||||
{version?.name || versionId}
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
secondary={
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={progress.progress}
|
||||
sx={{ mb: 1 }}
|
||||
/>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{progress.downloadedChapters} / {progress.totalChapters} chapters
|
||||
({progress.progress}%)
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Downloaded Versions */}
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Downloaded Versions
|
||||
</Typography>
|
||||
{downloadedVersions.length === 0 ? (
|
||||
<Alert severity="info">
|
||||
No Bible versions downloaded yet. Download versions above to read offline.
|
||||
</Alert>
|
||||
) : (
|
||||
<List dense>
|
||||
{downloadedVersions.map((version) => (
|
||||
<ListItem key={version.id}>
|
||||
<ListItemText
|
||||
primary={version.name}
|
||||
secondary={
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{version.abbreviation} - {version.language}
|
||||
</Typography>
|
||||
{version.downloadedAt && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Downloaded: {new Date(version.downloadedAt).toLocaleDateString()}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
<Tooltip title="Delete from offline storage">
|
||||
<IconButton
|
||||
edge="end"
|
||||
onClick={() => setConfirmDelete(version.id)}
|
||||
color="error"
|
||||
size="small"
|
||||
>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog
|
||||
open={!!confirmDelete}
|
||||
onClose={() => setConfirmDelete(null)}
|
||||
>
|
||||
<DialogTitle>Delete Bible Version</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography>
|
||||
Are you sure you want to delete this Bible version from offline storage?
|
||||
You'll need to download it again to read offline.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setConfirmDelete(null)}>Cancel</Button>
|
||||
<Button
|
||||
onClick={() => confirmDelete && handleDelete(confirmDelete)}
|
||||
color="error"
|
||||
variant="contained"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user