diff --git a/app/components/EnhancedOfflineManager.tsx b/app/components/EnhancedOfflineManager.tsx
deleted file mode 100644
index 0c930b7..0000000
--- a/app/components/EnhancedOfflineManager.tsx
+++ /dev/null
@@ -1,627 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useToast } from '@/hooks/use-toast';
-import { useOfflineLibrary } from '@/hooks/use-offline-library';
-import { useNavidrome } from '@/app/components/NavidromeContext';
-import {
- Download,
- Trash2,
- RefreshCw,
- Wifi,
- WifiOff,
- Database,
- Clock,
- AlertCircle,
- CheckCircle,
- Music,
- User,
- List,
- HardDrive,
- Disc,
- Search,
- Filter,
- SlidersHorizontal
-} from 'lucide-react';
-import { Input } from '@/components/ui/input';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import Image from 'next/image';
-import { Album, Playlist } from '@/lib/navidrome';
-import { Switch } from '@/components/ui/switch';
-import { Label } from '@/components/ui/label';
-import { OfflineManagement } from './OfflineManagement';
-import { Skeleton } from '@/components/ui/skeleton';
-
-// Helper functions
-function 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];
-}
-
-function formatDate(date: Date | null): string {
- if (!date) return 'Never';
- return date.toLocaleDateString() + ' at ' + date.toLocaleTimeString();
-}
-
-// Album card for selection
-function AlbumSelectionCard({
- album,
- isSelected,
- onToggleSelection,
- isDownloading,
- downloadProgress,
- estimatedSize
-}: {
- album: Album;
- isSelected: boolean;
- onToggleSelection: () => void;
- isDownloading: boolean;
- downloadProgress?: number;
- estimatedSize: string;
-}) {
- const { api } = useNavidrome();
-
- return (
-
-
-
-
-
-
{album.name}
-
{album.artist}
-
- {album.songCount} songs • {estimatedSize}
-
-
-
- );
-}
-
-// Playlist selection card
-function PlaylistSelectionCard({
- playlist,
- isSelected,
- onToggleSelection,
- isDownloading,
- downloadProgress,
- estimatedSize
-}: {
- playlist: Playlist;
- isSelected: boolean;
- onToggleSelection: () => void;
- isDownloading: boolean;
- downloadProgress?: number;
- estimatedSize: string;
-}) {
- const { api } = useNavidrome();
-
- return (
-
-
-
-
-
{playlist.name}
-
by {playlist.owner}
-
- {playlist.songCount} songs • {estimatedSize}
-
-
-
- );
-}
-
-export default function EnhancedOfflineManager() {
- const { toast } = useToast();
- const [activeTab, setActiveTab] = useState('overview');
- const [albums, setAlbums] = useState
([]);
- const [playlists, setPlaylists] = useState([]);
- const [loading, setLoading] = useState({
- albums: false,
- playlists: false
- });
- const [searchQuery, setSearchQuery] = useState('');
- const [selectedAlbums, setSelectedAlbums] = useState>(new Set());
- const [selectedPlaylists, setSelectedPlaylists] = useState>(new Set());
- const [downloadingItems, setDownloadingItems] = useState>(new Map());
-
- // Filter state
- const [sortBy, setSortBy] = useState('recent');
- const [filtersVisible, setFiltersVisible] = useState(false);
-
- const offline = useOfflineLibrary();
- const { api } = useNavidrome();
-
- // Load albums and playlists
- // ...existing code...
-
- // ...existing code...
- // Place useEffect after the first (and only) declarations of loadAlbums and loadPlaylists
-
- // Load albums data
- const loadAlbums = async () => {
- setLoading(prev => ({ ...prev, albums: true }));
- try {
- const albumData = await offline.getAlbums();
- setAlbums(albumData);
-
- // Load previously selected albums from localStorage
- const savedSelections = localStorage.getItem('navidrome-offline-albums');
- if (savedSelections) {
- setSelectedAlbums(new Set(JSON.parse(savedSelections)));
- }
-
- } catch (error) {
- console.error('Failed to load albums:', error);
- toast({
- title: 'Error',
- description: 'Failed to load albums. Please try again.',
- variant: 'destructive'
- });
- } finally {
- setLoading(prev => ({ ...prev, albums: false }));
- }
- };
-
- // Load playlists data
- const loadPlaylists = async () => {
- setLoading(prev => ({ ...prev, playlists: true }));
- try {
- const playlistData = await offline.getPlaylists();
- setPlaylists(playlistData);
-
- // Load previously selected playlists from localStorage
- const savedSelections = localStorage.getItem('navidrome-offline-playlists');
- if (savedSelections) {
- setSelectedPlaylists(new Set(JSON.parse(savedSelections)));
- }
-
- } catch (error) {
- console.error('Failed to load playlists:', error);
- toast({
- title: 'Error',
- description: 'Failed to load playlists. Please try again.',
- variant: 'destructive'
- });
- } finally {
- setLoading(prev => ({ ...prev, playlists: false }));
- }
- };
-
- // Toggle album selection
- const toggleAlbumSelection = (albumId: string) => {
- setSelectedAlbums(prev => {
- const newSelection = new Set(prev);
- if (newSelection.has(albumId)) {
- newSelection.delete(albumId);
- } else {
- newSelection.add(albumId);
- }
-
- // Save to localStorage
- localStorage.setItem('navidrome-offline-albums', JSON.stringify([...newSelection]));
-
- return newSelection;
- });
- };
-
- // Toggle playlist selection
- const togglePlaylistSelection = (playlistId: string) => {
- setSelectedPlaylists(prev => {
- const newSelection = new Set(prev);
- if (newSelection.has(playlistId)) {
- newSelection.delete(playlistId);
- } else {
- newSelection.add(playlistId);
- }
-
- // Save to localStorage
- localStorage.setItem('navidrome-offline-playlists', JSON.stringify([...newSelection]));
-
- return newSelection;
- });
- };
-
- // Download selected items
- const downloadSelected = async () => {
- // Mock implementation - in a real implementation, you'd integrate with the download system
- const selectedIds = [...selectedAlbums, ...selectedPlaylists];
- if (selectedIds.length === 0) {
- toast({
- title: 'No items selected',
- description: 'Please select albums or playlists to download.',
- });
- return;
- }
-
- toast({
- title: 'Download Started',
- description: `Downloading ${selectedIds.length} items for offline use.`,
- });
-
- // Mock download progress
- const downloadMap = new Map();
- selectedIds.forEach(id => downloadMap.set(id, 0));
- setDownloadingItems(downloadMap);
-
- // Simulate download progress
- const interval = setInterval(() => {
- setDownloadingItems(prev => {
- const updated = new Map(prev);
- let allComplete = true;
-
- for (const [id, progress] of prev.entries()) {
- if (progress < 100) {
- updated.set(id, Math.min(progress + Math.random() * 10, 100));
- allComplete = false;
- }
- }
-
- if (allComplete) {
- clearInterval(interval);
- toast({
- title: 'Download Complete',
- description: `${selectedIds.length} items are now available offline.`,
- });
-
- setTimeout(() => {
- setDownloadingItems(new Map());
- }, 1000);
- }
-
- return updated;
- });
- }, 500);
- };
-
- // Filter and sort albums
- const filteredAlbums = albums
- .filter(album => {
- if (!searchQuery) return true;
- return album.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
- album.artist.toLowerCase().includes(searchQuery.toLowerCase());
- })
- .sort((a, b) => {
- switch (sortBy) {
- case 'recent':
- return new Date(b.created || '').getTime() - new Date(a.created || '').getTime();
- case 'name':
- return a.name.localeCompare(b.name);
- case 'artist':
- return a.artist.localeCompare(b.artist);
- default:
- return 0;
- }
- });
-
- // Filter and sort playlists
- const filteredPlaylists = playlists
- .filter(playlist => {
- if (!searchQuery) return true;
- return playlist.name.toLowerCase().includes(searchQuery.toLowerCase());
- })
- .sort((a, b) => {
- switch (sortBy) {
- case 'recent':
- return new Date(b.changed || '').getTime() - new Date(a.changed || '').getTime();
- case 'name':
- return a.name.localeCompare(b.name);
- default:
- return 0;
- }
- });
-
- // Estimate album size (mock implementation)
- const estimateSize = (songCount: number) => {
- const averageSongSizeMB = 8;
- const totalSizeMB = songCount * averageSongSizeMB;
- if (totalSizeMB > 1000) {
- return `${(totalSizeMB / 1000).toFixed(1)} GB`;
- }
- return `${totalSizeMB.toFixed(0)} MB`;
- };
-
- return (
-
-
- Overview
- Albums
- Playlists
-
-
-
-
-
-
-
-
-
-
-
- Choose albums to make available offline
-
-
-
-
-
-
-
setFiltersVisible(!filtersVisible)}
- >
-
-
-
-
Sort By
-
- setSortBy('recent')}
- >
- Recent
-
- setSortBy('name')}
- >
- Name
-
- setSortBy('artist')}
- >
- Artist
-
-
-
-
-
- {selectedAlbums.size} album{selectedAlbums.size !== 1 ? 's' : ''} selected
-
-
setSelectedAlbums(new Set())}
- disabled={selectedAlbums.size === 0}
- >
- Clear Selection
-
-
- {loading.albums ? (
- // Loading skeletons
- Array.from({ length: 5 }).map((_, i) => (
-
-
-
- ))
- ) : filteredAlbums.length > 0 ? (
- filteredAlbums.map(album => (
- toggleAlbumSelection(album.id)}
- isDownloading={downloadingItems.has(album.id)}
- downloadProgress={downloadingItems.get(album.id)}
- estimatedSize={estimateSize(album.songCount)}
- />
- ))
- ) : (
-
-
-
- {searchQuery ? 'No albums found matching your search' : 'No albums available'}
-
-
-
-
- 0}
- >
-
-
-
-
-
-
-
-
-
-
- Select Playlists
-
-
- Choose playlists to make available offline
-
-
-
-
-
-
-
setFiltersVisible(!filtersVisible)}
- >
-
-
-
-
Sort By
-
- setSortBy('recent')}
- >
- Recent
-
- setSortBy('name')}
- >
- Name
-
-
-
-
-
- {selectedPlaylists.size} playlist{selectedPlaylists.size !== 1 ? 's' : ''} selected
-
-
setSelectedPlaylists(new Set())}
- disabled={selectedPlaylists.size === 0}
- >
- Clear Selection
-
-
- {loading.playlists ? (
- // Loading skeletons
- Array.from({ length: 5 }).map((_, i) => (
-
-
-
- ))
- ) : filteredPlaylists.length > 0 ? (
- filteredPlaylists.map(playlist => (
- togglePlaylistSelection(playlist.id)}
- isDownloading={downloadingItems.has(playlist.id)}
- downloadProgress={downloadingItems.get(playlist.id)}
- estimatedSize={estimateSize(playlist.songCount)}
- />
- ))
- ) : (
-
-
-
- {searchQuery ? 'No playlists found matching your search' : 'No playlists available'}
-
-
-
-
- 0}
- >
-
-
-
-
-
- );
-}
diff --git a/app/components/OfflineIndicator.tsx b/app/components/OfflineIndicator.tsx
deleted file mode 100644
index 977f3a1..0000000
--- a/app/components/OfflineIndicator.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { Download, Check, X, Loader2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import { useOfflineDownloads } from '@/hooks/use-offline-downloads';
-
-interface OfflineIndicatorProps {
- id: string;
- type: 'album' | 'song';
- className?: string;
- showLabel?: boolean;
- size?: 'sm' | 'md' | 'lg';
-}
-
-export function OfflineIndicator({
- id,
- type,
- className,
- showLabel = false,
- size = 'md'
-}: OfflineIndicatorProps) {
- const [isOffline, setIsOffline] = useState(false);
- const [isChecking, setIsChecking] = useState(true);
- const { checkOfflineStatus, isInitialized } = useOfflineDownloads();
-
- useEffect(() => {
- let mounted = true;
-
- const checkStatus = async () => {
- if (!isInitialized) return;
-
- setIsChecking(true);
- try {
- const status = await checkOfflineStatus(id, type);
- if (mounted) {
- setIsOffline(status);
- }
- } catch (error) {
- console.error('Failed to check offline status:', error);
- if (mounted) {
- setIsOffline(false);
- }
- } finally {
- if (mounted) {
- setIsChecking(false);
- }
- }
- };
-
- checkStatus();
-
- return () => {
- mounted = false;
- };
- }, [id, type, isInitialized, checkOfflineStatus]);
-
- const iconSize = {
- sm: 'h-3 w-3',
- md: 'h-4 w-4',
- lg: 'h-5 w-5'
- }[size];
-
- const textSize = {
- sm: 'text-xs',
- md: 'text-sm',
- lg: 'text-base'
- }[size];
-
- if (isChecking) {
- return (
-
- Checking... }
-
- );
- }
-
- if (!isOffline) {
- return null; // Don't show anything if not downloaded
- }
-
- return (
-
-
- {type === 'album' ? 'Album Downloaded' : 'Downloaded'}
-
- )}
-
- );
-}
-
-interface DownloadButtonProps {
- id: string;
- type: 'album' | 'song';
- onDownload?: () => void;
- className?: string;
- size?: 'sm' | 'md' | 'lg';
- variant?: 'default' | 'outline' | 'ghost';
- children?: React.ReactNode;
-}
-
-export function DownloadButton({
- id,
- type,
- onDownload,
- className,
- size = 'md',
- variant = 'outline',
- children
-}: DownloadButtonProps) {
- const [isOffline, setIsOffline] = useState(false);
- const [isChecking, setIsChecking] = useState(true);
- const {
- checkOfflineStatus,
- deleteOfflineContent,
- isInitialized,
- downloadProgress
- } = useOfflineDownloads();
-
- const isDownloading = downloadProgress.status === 'downloading' || downloadProgress.status === 'starting';
-
- useEffect(() => {
- let mounted = true;
-
- const checkStatus = async () => {
- if (!isInitialized) return;
-
- setIsChecking(true);
- try {
- const status = await checkOfflineStatus(id, type);
- if (mounted) {
- setIsOffline(status);
- }
- } catch (error) {
- console.error('Failed to check offline status:', error);
- if (mounted) {
- setIsOffline(false);
- }
- } finally {
- if (mounted) {
- setIsChecking(false);
- }
- }
- };
-
- checkStatus();
-
- return () => {
- mounted = false;
- };
- }, [id, type, isInitialized, checkOfflineStatus]);
-
- const handleClick = async () => {
- if (isOffline) {
- // Remove from offline storage
- try {
- await deleteOfflineContent(id, type);
- setIsOffline(false);
- } catch (error) {
- console.error('Failed to delete offline content:', error);
- }
- } else {
- // Start download
- if (onDownload) {
- onDownload();
- }
- }
- };
-
- const buttonSize = {
- sm: 'sm',
- md: 'default',
- lg: 'lg'
- }[size] as 'sm' | 'default' | 'lg';
-
- const iconSize = {
- sm: 'h-3 w-3',
- md: 'h-4 w-4',
- lg: 'h-5 w-5'
- }[size];
-
- if (isChecking) {
- return (
-
-
- );
- }
-
- return (
-
- {isDownloading ? (
- <>
-
- );
-}
diff --git a/app/components/OfflineLibrarySync.tsx b/app/components/OfflineLibrarySync.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/app/components/OfflineManagement.tsx b/app/components/OfflineManagement.tsx
deleted file mode 100644
index e296486..0000000
--- a/app/components/OfflineManagement.tsx
+++ /dev/null
@@ -1,395 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { useToast } from '@/hooks/use-toast';
-import { useOfflineLibrary } from '@/hooks/use-offline-library';
-import {
- Download,
- Trash2,
- RefreshCw,
- Wifi,
- WifiOff,
- Database,
- Clock,
- AlertCircle,
- CheckCircle,
- Music,
- User,
- List,
- HardDrive
-} from 'lucide-react';
-
-function 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];
-}
-
-function formatDate(date: Date | null): string {
- if (!date) return 'Never';
- return date.toLocaleDateString() + ' at ' + date.toLocaleTimeString();
-}
-
-export function OfflineManagement() {
- const { toast } = useToast();
- const [isClearing, setIsClearing] = useState(false);
-
- const {
- isInitialized,
- isOnline,
- isSyncing,
- lastSync,
- stats,
- syncProgress,
- syncLibraryFromServer,
- syncPendingOperations,
- clearOfflineData,
- refreshStats
- } = useOfflineLibrary();
-
- // Refresh stats periodically
- useEffect(() => {
- const interval = setInterval(() => {
- if (isInitialized && !isSyncing) {
- refreshStats();
- }
- }, 10000); // Every 10 seconds
-
- return () => clearInterval(interval);
- }, [isInitialized, isSyncing, refreshStats]);
-
- const handleFullSync = async () => {
- try {
- await syncLibraryFromServer();
- toast({
- title: "Sync Complete",
- description: "Your music library has been synced for offline use.",
- });
- } catch (error) {
- console.error('Full sync failed:', error);
- toast({
- title: "Sync Failed",
- description: "Failed to sync library. Check your connection and try again.",
- variant: "destructive"
- });
- }
- };
-
- const handlePendingSync = async () => {
- try {
- await syncPendingOperations();
- toast({
- title: "Pending Operations Synced",
- description: "All pending changes have been synced to the server.",
- });
- } catch (error) {
- console.error('Pending sync failed:', error);
- toast({
- title: "Sync Failed",
- description: "Failed to sync pending operations. Will retry automatically when online.",
- variant: "destructive"
- });
- }
- };
-
- const handleClearData = async () => {
- if (!confirm('Are you sure you want to clear all offline data? This cannot be undone.')) {
- return;
- }
-
- setIsClearing(true);
- try {
- await clearOfflineData();
- toast({
- title: "Offline Data Cleared",
- description: "All offline music data has been removed.",
- });
- } catch (error) {
- console.error('Clear data failed:', error);
- toast({
- title: "Clear Failed",
- description: "Failed to clear offline data. Please try again.",
- variant: "destructive"
- });
- } finally {
- setIsClearing(false);
- }
- };
-
- if (!isInitialized) {
- return (
-
-
-
-
-
- Setting up offline library...
-
-
-
-
-
-
-
Initializing offline storage...
-
-
-
- );
- }
-
- return (
-
- {/* Connection Status */}
-
-
-
- {isOnline ? (
-
-
-
-
-
-
- {isOnline ? "Online" : "Offline"}
-
-
- {isOnline ? "Connected to Navidrome server" : "Working offline"}
-
-
-
- {stats.pendingOperations > 0 && (
-
-
-
- {stats.pendingOperations} pending operation{stats.pendingOperations !== 1 ? 's' : ''}
-
-
- )}
-
-
-
- {/* Sync Status */}
-
-
-
-
-
- Keep your offline library up to date
-
-
-
- {isSyncing && syncProgress && (
-
-
- {syncProgress.stage}
- {syncProgress.current}%
-
-
-
-
-
Last Sync
-
-
-
-
-
- {stats.pendingOperations > 0 && isOnline && (
-
-
- )}
-
-
-
-
-
-
-
- {/* Library Statistics */}
-
-
-
-
-
- Your offline music collection
-
-
-
-
-
-
-
-
-
{stats.albums.toLocaleString()}
-
Albums
-
-
-
-
-
-
-
-
{stats.artists.toLocaleString()}
-
Artists
-
-
-
-
-
-
-
-
{stats.songs.toLocaleString()}
-
Songs
-
-
-
-
-
-
-
-
-
{stats.playlists.toLocaleString()}
-
Playlists
-
-
-
-
- Storage Used
-
-
- {formatBytes(stats.storageSize)}
-
-
-
-
- {/* Offline Features */}
-
-
- Offline Features
-
- What works when you're offline
-
-
-
-
-
-
-
-
Browse & Search
-
- Browse your synced albums, artists, and search offline
-
-
-
-
-
-
-
-
Favorites & Playlists
-
- Star songs/albums and create playlists (syncs when online)
-
-
-
-
-
-
-
-
Play Downloaded Music
-
- Play songs you've downloaded for offline listening
-
-
-
-
-
-
-
-
Auto-Sync
-
- Changes sync automatically when you reconnect
-
-
-
-
-
-
- {/* Danger Zone */}
-
-
- Danger Zone
-
- Permanently delete all offline data
-
-
-
-
-
-
Clear All Offline Data
-
- This will remove all synced library data and downloaded audio
-
-
-
-
-
-
-
-
;
- refreshData: () => Promise;
-
- // Offline-capable operations
- starItem: (id: string, type: 'song' | 'album' | 'artist') => Promise;
- unstarItem: (id: string, type: 'song' | 'album' | 'artist') => Promise;
- createPlaylist: (name: string, songIds?: string[]) => Promise;
- scrobble: (songId: string) => Promise;
-
- // Sync management
- syncLibrary: () => Promise;
- syncPendingOperations: () => Promise;
- clearOfflineData: () => Promise;
-}
-
-const OfflineNavidromeContext = createContext(undefined);
-
-interface OfflineNavidromeProviderProps {
- children: ReactNode;
-}
-
-export const OfflineNavidromeProvider: React.FC = ({ children }) => {
- const [albums, setAlbums] = useState([]);
- const [artists, setArtists] = useState([]);
- const [playlists, setPlaylists] = useState([]);
-
- const [albumsLoading, setAlbumsLoading] = useState(false);
- const [artistsLoading, setArtistsLoading] = useState(false);
- const [playlistsLoading, setPlaylistsLoading] = useState(false);
-
- const [error, setError] = useState(null);
-
- // Use the original Navidrome context for online operations
- const originalNavidrome = useNavidrome();
-
- // Use offline library for offline operations
- const {
- isInitialized: isOfflineReady,
- isOnline,
- isSyncing,
- lastSync,
- stats,
- syncLibraryFromServer,
- syncPendingOperations: syncPendingOps,
- getAlbums: getAlbumsOffline,
- getArtists: getArtistsOffline,
- getAlbum: getAlbumOffline,
- getPlaylists: getPlaylistsOffline,
- searchOffline,
- starOffline,
- unstarOffline,
- createPlaylistOffline,
- scrobbleOffline,
- clearOfflineData: clearOfflineDataInternal,
- refreshStats
- } = useOfflineLibrary();
-
- const isLoading = albumsLoading || artistsLoading || playlistsLoading;
- const pendingOperations = stats.pendingOperations;
-
- // Load initial data (offline-first approach)
- const loadAlbums = useCallback(async () => {
- setAlbumsLoading(true);
- setError(null);
-
- try {
- const albumData = await getAlbumsOffline();
- setAlbums(albumData);
- } catch (err) {
- console.error('Failed to load albums:', err);
- setError('Failed to load albums');
- } finally {
- setAlbumsLoading(false);
- }
- }, [getAlbumsOffline]);
-
- const loadArtists = useCallback(async () => {
- setArtistsLoading(true);
- setError(null);
-
- try {
- const artistData = await getArtistsOffline();
- setArtists(artistData);
- } catch (err) {
- console.error('Failed to load artists:', err);
- setError('Failed to load artists');
- } finally {
- setArtistsLoading(false);
- }
- }, [getArtistsOffline]);
-
- const loadPlaylists = useCallback(async () => {
- setPlaylistsLoading(true);
- setError(null);
-
- try {
- const playlistData = await getPlaylistsOffline();
- setPlaylists(playlistData);
- } catch (err) {
- console.error('Failed to load playlists:', err);
- setError('Failed to load playlists');
- } finally {
- setPlaylistsLoading(false);
- }
- }, [getPlaylistsOffline]);
-
- const refreshData = useCallback(async () => {
- await Promise.all([loadAlbums(), loadArtists(), loadPlaylists()]);
- await refreshStats();
- }, [loadAlbums, loadArtists, loadPlaylists, refreshStats]);
-
- // Initialize data when offline library is ready
- useEffect(() => {
- if (isOfflineReady) {
- refreshData();
- }
- }, [isOfflineReady, refreshData]);
-
- // Auto-sync when coming back online
- useEffect(() => {
- if (isOnline && isOfflineReady && pendingOperations > 0) {
- console.log('Back online with pending operations, starting sync...');
- syncPendingOps();
- }
- }, [isOnline, isOfflineReady, pendingOperations, syncPendingOps]);
-
- // Offline-first methods
- const searchMusic = useCallback(async (query: string) => {
- setError(null);
- try {
- return await searchOffline(query);
- } catch (err) {
- console.error('Search failed:', err);
- setError('Search failed');
- return { artists: [], albums: [], songs: [] };
- }
- }, [searchOffline]);
-
- const getAlbum = useCallback(async (albumId: string) => {
- setError(null);
- try {
- return await getAlbumOffline(albumId);
- } catch (err) {
- console.error('Failed to get album:', err);
- setError('Failed to get album');
- return null;
- }
- }, [getAlbumOffline]);
-
- const getArtist = useCallback(async (artistId: string): Promise<{ artist: Artist; albums: Album[] } | null> => {
- setError(null);
- try {
- // For now, use the original implementation if online, or search offline
- if (isOnline && originalNavidrome.api) {
- return await originalNavidrome.getArtist(artistId);
- } else {
- // Try to find artist in offline data
- const allArtists = await getArtistsOffline();
- const artist = allArtists.find(a => a.id === artistId);
- if (!artist) return null;
-
- const allAlbums = await getAlbumsOffline();
- const artistAlbums = allAlbums.filter(a => a.artistId === artistId);
-
- return { artist, albums: artistAlbums };
- }
- } catch (err) {
- console.error('Failed to get artist:', err);
- setError('Failed to get artist');
- return null;
- }
- }, [isOnline, originalNavidrome, getArtistsOffline, getAlbumsOffline]);
-
- const getPlaylistsWrapper = useCallback(async (): Promise => {
- try {
- return await getPlaylistsOffline();
- } catch (err) {
- console.error('Failed to get playlists:', err);
- return [];
- }
- }, [getPlaylistsOffline]);
-
- // Offline-capable operations
- const starItem = useCallback(async (id: string, type: 'song' | 'album' | 'artist') => {
- setError(null);
- try {
- await starOffline(id, type);
- // Refresh relevant data
- if (type === 'album') {
- await loadAlbums();
- } else if (type === 'artist') {
- await loadArtists();
- }
- } catch (err) {
- console.error('Failed to star item:', err);
- setError('Failed to star item');
- throw err;
- }
- }, [starOffline, loadAlbums, loadArtists]);
-
- const unstarItem = useCallback(async (id: string, type: 'song' | 'album' | 'artist') => {
- setError(null);
- try {
- await unstarOffline(id, type);
- // Refresh relevant data
- if (type === 'album') {
- await loadAlbums();
- } else if (type === 'artist') {
- await loadArtists();
- }
- } catch (err) {
- console.error('Failed to unstar item:', err);
- setError('Failed to unstar item');
- throw err;
- }
- }, [unstarOffline, loadAlbums, loadArtists]);
-
- const createPlaylist = useCallback(async (name: string, songIds?: string[]): Promise => {
- setError(null);
- try {
- const playlist = await createPlaylistOffline(name, songIds);
- await loadPlaylists(); // Refresh playlists
- return playlist;
- } catch (err) {
- console.error('Failed to create playlist:', err);
- setError('Failed to create playlist');
- throw err;
- }
- }, [createPlaylistOffline, loadPlaylists]);
-
- const scrobble = useCallback(async (songId: string) => {
- try {
- await scrobbleOffline(songId);
- } catch (err) {
- console.error('Failed to scrobble:', err);
- // Don't set error state for scrobbling failures as they're not critical
- }
- }, [scrobbleOffline]);
-
- // Sync management
- const syncLibrary = useCallback(async () => {
- setError(null);
- try {
- await syncLibraryFromServer();
- await refreshData(); // Refresh local state after sync
- } catch (err) {
- console.error('Library sync failed:', err);
- setError('Library sync failed');
- throw err;
- }
- }, [syncLibraryFromServer, refreshData]);
-
- const syncPendingOperations = useCallback(async () => {
- try {
- await syncPendingOps();
- await refreshStats();
- } catch (err) {
- console.error('Failed to sync pending operations:', err);
- // Don't throw or set error for pending operations sync
- }
- }, [syncPendingOps, refreshStats]);
-
- const clearOfflineData = useCallback(async () => {
- try {
- await clearOfflineDataInternal();
- setAlbums([]);
- setArtists([]);
- setPlaylists([]);
- } catch (err) {
- console.error('Failed to clear offline data:', err);
- setError('Failed to clear offline data');
- throw err;
- }
- }, [clearOfflineDataInternal]);
-
- const value: OfflineNavidromeContextType = {
- // Data
- albums,
- artists,
- playlists,
-
- // Loading states
- isLoading,
- albumsLoading,
- artistsLoading,
- playlistsLoading,
-
- // Connection state
- isOnline,
- isOfflineReady,
-
- // Error state
- error,
-
- // Offline sync status
- isSyncing,
- lastSync,
- pendingOperations,
-
- // Methods
- searchMusic,
- getAlbum,
- getArtist,
- getPlaylists: getPlaylistsWrapper,
- refreshData,
-
- // Offline-capable operations
- starItem,
- unstarItem,
- createPlaylist,
- scrobble,
-
- // Sync management
- syncLibrary,
- syncPendingOperations,
- clearOfflineData
- };
-
- return (
-
- {children}
-
- );
-};
-
-export const useOfflineNavidrome = (): OfflineNavidromeContextType => {
- const context = useContext(OfflineNavidromeContext);
- if (context === undefined) {
- throw new Error('useOfflineNavidrome must be used within an OfflineNavidromeProvider');
- }
- return context;
-};
diff --git a/app/components/OfflineNavidromeProvider.tsx b/app/components/OfflineNavidromeProvider.tsx
deleted file mode 100644
index b1abd49..0000000
--- a/app/components/OfflineNavidromeProvider.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-'use client';
-
-import React, { createContext, useContext, ReactNode } from 'react';
-import { Album, Artist, Song, Playlist } from '@/lib/navidrome';
-import { NavidromeProvider, useNavidrome } from '@/app/components/NavidromeContext';
-import { useOfflineLibrary } from '@/hooks/use-offline-library';
-
-interface OfflineNavidromeContextType {
- // All the original NavidromeContext methods but with offline-first behavior
- getAlbums: (starred?: boolean) => Promise;
- getArtists: (starred?: boolean) => Promise;
- getSongs: (albumId?: string, artistId?: string) => Promise;
- getPlaylists: () => Promise;
-
- // Offline-aware operations
- starItem: (id: string, type: 'song' | 'album' | 'artist') => Promise;
- unstarItem: (id: string, type: 'song' | 'album' | 'artist') => Promise;
- createPlaylist: (name: string, songIds?: string[]) => Promise;
- updatePlaylist: (id: string, name?: string, comment?: string, songIds?: string[]) => Promise;
- deletePlaylist: (id: string) => Promise;
- scrobble: (songId: string) => Promise;
-
- // Offline state
- isOfflineMode: boolean;
- hasPendingOperations: boolean;
- lastSync: Date | null;
-}
-
-const OfflineNavidromeContext = createContext(undefined);
-
-interface OfflineNavidromeProviderInnerProps {
- children: ReactNode;
-}
-
-// Inner component that has access to both contexts
-const OfflineNavidromeProviderInner: React.FC = ({ children }) => {
- const navidromeContext = useNavidrome();
- const offlineLibrary = useOfflineLibrary();
-
- // Offline-first data retrieval methods
- const getAlbums = async (starred?: boolean): Promise => {
- if (!offlineLibrary.isOnline || !navidromeContext.api) {
- // Offline mode - get from IndexedDB
- return await offlineLibrary.getAlbums(starred);
- }
-
- try {
- // Online mode - try server first, fallback to offline
- const albums = starred
- ? await navidromeContext.api.getAlbums('starred', 1000)
- : await navidromeContext.api.getAlbums('alphabeticalByName', 1000);
- return albums;
- } catch (error) {
- console.warn('Server request failed, falling back to offline data:', error);
- return await offlineLibrary.getAlbums(starred);
- }
- };
-
- const getArtists = async (starred?: boolean): Promise => {
- if (!offlineLibrary.isOnline || !navidromeContext.api) {
- return await offlineLibrary.getArtists(starred);
- }
-
- try {
- const artists = await navidromeContext.api.getArtists();
- if (starred) {
- // Filter starred artists from the full list
- const starredData = await navidromeContext.api.getStarred2();
- const starredArtistIds = new Set(starredData.starred2.artist?.map(a => a.id) || []);
- return artists.filter(artist => starredArtistIds.has(artist.id));
- }
- return artists;
- } catch (error) {
- console.warn('Server request failed, falling back to offline data:', error);
- return await offlineLibrary.getArtists(starred);
- }
- };
-
- const getSongs = async (albumId?: string, artistId?: string): Promise => {
- if (!offlineLibrary.isOnline || !navidromeContext.api) {
- return await offlineLibrary.getSongs(albumId, artistId);
- }
-
- try {
- if (albumId) {
- const { songs } = await navidromeContext.api.getAlbum(albumId);
- return songs;
- } else if (artistId) {
- const { albums } = await navidromeContext.api.getArtist(artistId);
- const allSongs: Song[] = [];
- for (const album of albums) {
- const { songs } = await navidromeContext.api.getAlbum(album.id);
- allSongs.push(...songs);
- }
- return allSongs;
- } else {
- return await navidromeContext.getAllSongs();
- }
- } catch (error) {
- console.warn('Server request failed, falling back to offline data:', error);
- return await offlineLibrary.getSongs(albumId, artistId);
- }
- };
-
- const getPlaylists = async (): Promise => {
- if (!offlineLibrary.isOnline || !navidromeContext.api) {
- return await offlineLibrary.getPlaylists();
- }
-
- try {
- return await navidromeContext.api.getPlaylists();
- } catch (error) {
- console.warn('Server request failed, falling back to offline data:', error);
- return await offlineLibrary.getPlaylists();
- }
- };
-
- // Offline-aware operations (queue for sync when offline)
- const starItem = async (id: string, type: 'song' | 'album' | 'artist'): Promise => {
- if (offlineLibrary.isOnline && navidromeContext.api) {
- try {
- await navidromeContext.starItem(id, type);
- // Update offline data immediately
- await offlineLibrary.starOffline(id, type);
- return;
- } catch (error) {
- console.warn('Server star failed, queuing for sync:', error);
- }
- }
-
- // Queue for sync when back online
- await offlineLibrary.starOffline(id, type);
- await offlineLibrary.queueSyncOperation({
- type: 'star',
- entityType: type,
- entityId: id,
- data: {}
- });
- };
-
- const unstarItem = async (id: string, type: 'song' | 'album' | 'artist'): Promise => {
- if (offlineLibrary.isOnline && navidromeContext.api) {
- try {
- await navidromeContext.unstarItem(id, type);
- await offlineLibrary.unstarOffline(id, type);
- return;
- } catch (error) {
- console.warn('Server unstar failed, queuing for sync:', error);
- }
- }
-
- await offlineLibrary.unstarOffline(id, type);
- await offlineLibrary.queueSyncOperation({
- type: 'unstar',
- entityType: type,
- entityId: id,
- data: {}
- });
- };
-
- const createPlaylist = async (name: string, songIds?: string[]): Promise => {
- if (offlineLibrary.isOnline && navidromeContext.api) {
- try {
- const playlist = await navidromeContext.createPlaylist(name, songIds);
- await offlineLibrary.createPlaylistOffline(name, songIds || []);
- return;
- } catch (error) {
- console.warn('Server playlist creation failed, queuing for sync:', error);
- }
- }
-
- // Create offline
- await offlineLibrary.createPlaylistOffline(name, songIds || []);
- await offlineLibrary.queueSyncOperation({
- type: 'create_playlist',
- entityType: 'playlist',
- entityId: 'temp-' + Date.now(),
- data: { name, songIds: songIds || [] }
- });
- };
-
- const updatePlaylist = async (id: string, name?: string, comment?: string, songIds?: string[]): Promise => {
- if (offlineLibrary.isOnline && navidromeContext.api) {
- try {
- await navidromeContext.updatePlaylist(id, name, comment, songIds);
- await offlineLibrary.updatePlaylistOffline(id, name, comment, songIds);
- return;
- } catch (error) {
- console.warn('Server playlist update failed, queuing for sync:', error);
- }
- }
-
- await offlineLibrary.updatePlaylistOffline(id, name, comment, songIds);
- await offlineLibrary.queueSyncOperation({
- type: 'update_playlist',
- entityType: 'playlist',
- entityId: id,
- data: { name, comment, songIds }
- });
- };
-
- const deletePlaylist = async (id: string): Promise => {
- if (offlineLibrary.isOnline && navidromeContext.api) {
- try {
- await navidromeContext.deletePlaylist(id);
- await offlineLibrary.deletePlaylistOffline(id);
- return;
- } catch (error) {
- console.warn('Server playlist deletion failed, queuing for sync:', error);
- }
- }
-
- await offlineLibrary.deletePlaylistOffline(id);
- await offlineLibrary.queueSyncOperation({
- type: 'delete_playlist',
- entityType: 'playlist',
- entityId: id,
- data: {}
- });
- };
-
- const scrobble = async (songId: string): Promise => {
- if (offlineLibrary.isOnline && navidromeContext.api) {
- try {
- await navidromeContext.scrobble(songId);
- return;
- } catch (error) {
- console.warn('Server scrobble failed, queuing for sync:', error);
- }
- }
-
- await offlineLibrary.queueSyncOperation({
- type: 'scrobble',
- entityType: 'song',
- entityId: songId,
- data: { timestamp: Date.now() }
- });
- };
-
- const contextValue: OfflineNavidromeContextType = {
- getAlbums,
- getArtists,
- getSongs,
- getPlaylists,
- starItem,
- unstarItem,
- createPlaylist,
- updatePlaylist,
- deletePlaylist,
- scrobble,
- isOfflineMode: !offlineLibrary.isOnline,
- hasPendingOperations: offlineLibrary.stats.pendingOperations > 0,
- lastSync: offlineLibrary.lastSync
- };
-
- return (
-
- {children}
-
- );
-};
-
-// Main provider component
-export const OfflineNavidromeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
- return (
-
-
- {children}
-
-
- );
-};
-
-// Hook to use the offline-aware Navidrome context
-export const useOfflineNavidrome = (): OfflineNavidromeContextType => {
- const context = useContext(OfflineNavidromeContext);
- if (!context) {
- throw new Error('useOfflineNavidrome must be used within an OfflineNavidromeProvider');
- }
- return context;
-};
diff --git a/app/components/OfflineStatusIndicator.tsx b/app/components/OfflineStatusIndicator.tsx
deleted file mode 100644
index f739db8..0000000
--- a/app/components/OfflineStatusIndicator.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Badge } from '@/components/ui/badge';
-import { useOfflineLibrary } from '@/hooks/use-offline-library';
-import { Wifi, WifiOff, Download, Clock } from 'lucide-react';
-
-export function OfflineStatusIndicator() {
- const { isOnline, stats, isSyncing, lastSync } = useOfflineLibrary();
-
- if (!isOnline) {
- return (
-
-
- );
- }
-
- if (isSyncing) {
- return (
-
-
- );
- }
-
- if (stats.pendingOperations > 0) {
- return (
-
-
- );
- }
-
- return (
-
-
- );
-}
-
-export function OfflineLibraryStats() {
- const { stats, lastSync } = useOfflineLibrary();
-
- if (!stats.albums && !stats.songs && !stats.artists) {
- return null;
- }
-
- return (
-
-
- 📀 {stats.albums} albums • 🎵 {stats.songs} songs • 👤 {stats.artists} artists
-
- {lastSync && (
-
- Last sync: {lastSync.toLocaleDateString()} at {lastSync.toLocaleTimeString()}
-
- )}
-
-
+
@@ -116,7 +116,7 @@ export default function RootLayoutClient({ children }: { children: React.ReactNo
-
+
);
diff --git a/app/components/SongRecommendations.tsx b/app/components/SongRecommendations.tsx
index 9d85bca..067fafb 100644
--- a/app/components/SongRecommendations.tsx
+++ b/app/components/SongRecommendations.tsx
@@ -2,7 +2,7 @@
import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { Song, Album, getNavidromeAPI } from '@/lib/navidrome';
-import { useOfflineNavidrome } from '@/app/components/OfflineNavidromeProvider';
+import { useNavidrome } from '@/app/components/NavidromeContext';
import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
import { useIsMobile } from '@/hooks/use-mobile';
import { Button } from '@/components/ui/button';
@@ -17,7 +17,7 @@ interface SongRecommendationsProps {
}
export function SongRecommendations({ userName }: SongRecommendationsProps) {
- const offline = useOfflineNavidrome();
+ const { api } = useNavidrome();
const { playTrack, shuffle, toggleShuffle } = useAudioPlayer();
const isMobile = useIsMobile();
const [recommendedSongs, setRecommendedSongs] = useState([]);
@@ -45,10 +45,9 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
setLoading(true);
try {
const api = getNavidromeAPI();
- const isOnline = !offline.isOfflineMode && !!api;
- if (isOnline && api) {
- // Online: use server-side recommendations
+ if (api) {
+ // Use server-side recommendations
const randomAlbums = await api.getAlbums('random', 10);
if (isMobile) {
setRecommendedAlbums(randomAlbums.slice(0, 6));
@@ -69,29 +68,6 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
recommendations.forEach((song: Song) => { states[song.id] = !!song.starred; });
setSongStates(states);
}
- } else {
- // Offline: use cached library
- const albums = await offline.getAlbums(false);
- const shuffledAlbums = [...(albums || [])].sort(() => Math.random() - 0.5);
- if (isMobile) {
- setRecommendedAlbums(shuffledAlbums.slice(0, 6));
- } else {
- const pick = shuffledAlbums.slice(0, 3);
- const allSongs: Song[] = [];
- for (const a of pick) {
- try {
- const songs = await offline.getSongs(a.id);
- allSongs.push(...songs);
- } catch (e) {
- // ignore per-album errors
- }
- }
- const recommendations = allSongs.sort(() => Math.random() - 0.5).slice(0, 6);
- setRecommendedSongs(recommendations);
- const states: Record = {};
- recommendations.forEach((song: Song) => { states[song.id] = !!song.starred; });
- setSongStates(states);
- }
}
} catch (error) {
console.error('Failed to load recommendations:', error);
@@ -103,13 +79,15 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
};
loadRecommendations();
- }, [offline, isMobile]);
+ }, [isMobile]);
const handlePlaySong = async (song: Song) => {
try {
const api = getNavidromeAPI();
- const url = api ? api.getStreamUrl(song.id) : `offline-song-${song.id}`;
- const coverArt = song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 300) : undefined;
+ if (!api) return;
+
+ const url = api.getStreamUrl(song.id);
+ const coverArt = song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined;
const track = {
id: song.id,
name: song.title,
@@ -131,16 +109,13 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
const handlePlayAlbum = async (album: Album) => {
try {
const api = getNavidromeAPI();
- let albumSongs: Song[] = [];
- if (api) {
- albumSongs = await api.getAlbumSongs(album.id);
- } else {
- albumSongs = await offline.getSongs(album.id);
- }
+ if (!api) return;
+
+ const albumSongs = await api.getAlbumSongs(album.id);
if (albumSongs.length > 0) {
const first = albumSongs[0];
- const url = api ? api.getStreamUrl(first.id) : `offline-song-${first.id}`;
- const coverArt = first.coverArt && api ? api.getCoverArtUrl(first.coverArt, 300) : undefined;
+ const url = api.getStreamUrl(first.id);
+ const coverArt = first.coverArt ? api.getCoverArtUrl(first.coverArt, 300) : undefined;
const track = {
id: first.id,
name: first.title,
@@ -246,7 +221,7 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
className="group cursor-pointer block"
>
- {album.coverArt && !offline.isOfflineMode && getNavidromeAPI() ? (
+ {album.coverArt && getNavidromeAPI() ? (
- {song.coverArt && !offline.isOfflineMode && getNavidromeAPI() ? (
+ {song.coverArt && getNavidromeAPI() ? (
<>
,
@@ -49,7 +47,6 @@ export function AlbumArtwork({
...props
}: AlbumArtworkProps) {
const { api, isConnected } = useNavidrome();
- const offline = useOfflineNavidrome();
const router = useRouter();
const { addAlbumToQueue, playTrack, addToQueue } = useAudioPlayer();
const { playlists, starItem, unstarItem } = useNavidrome();
@@ -153,7 +150,7 @@ export function AlbumArtwork({
handleClick()} onMouseEnter={handlePrefetch} onFocus={handlePrefetch}>
- {album.coverArt && api && !offline.isOfflineMode ? (
+ {album.coverArt && api ? (
handlePlayAlbum(album)}/>
-
diff --git a/app/page.tsx b/app/page.tsx
index 68935eb..7647683 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,7 +4,7 @@ import { ScrollArea, ScrollBar } from '../components/ui/scroll-area';
import { Separator } from '../components/ui/separator';
import { Tabs, TabsContent } from '../components/ui/tabs';
import { AlbumArtwork } from './components/album-artwork';
-import { useOfflineNavidrome } from './components/OfflineNavidromeProvider';
+import { useNavidrome } from './components/NavidromeContext';
import { useEffect, useState, Suspense } from 'react';
import { Album, Song, getNavidromeAPI } from '@/lib/navidrome';
import { useNavidromeConfig } from './components/NavidromeConfigContext';
@@ -14,14 +14,12 @@ import { SongRecommendations } from './components/SongRecommendations';
import { Skeleton } from '@/components/ui/skeleton';
import { useIsMobile } from '@/hooks/use-mobile';
import { UserProfile } from './components/UserProfile';
-import { OfflineStatusIndicator } from './components/OfflineStatusIndicator';
import CompactListeningStreak from './components/CompactListeningStreak';
type TimeOfDay = 'morning' | 'afternoon' | 'evening';
function MusicPageContent() {
- // Offline-first provider (falls back to offline data when not connected)
- const offline = useOfflineNavidrome();
+ const { api } = useNavidrome();
const { playAlbum, playTrack, shuffle, toggleShuffle, addToQueue } = useAudioPlayer();
const searchParams = useSearchParams();
const [allAlbums, setAllAlbums] = useState([]);
@@ -33,13 +31,14 @@ function MusicPageContent() {
const [shortcutProcessed, setShortcutProcessed] = useState(false);
const isMobile = useIsMobile();
- // Load albums (offline-first)
+ // Load albums
useEffect(() => {
let mounted = true;
const load = async () => {
+ if (!api) return;
setAlbumsLoading(true);
try {
- const list = await offline.getAlbums(false);
+ const list = await api.getAlbums('newest', 500);
if (!mounted) return;
setAllAlbums(list || []);
// Split albums into two sections
@@ -48,7 +47,7 @@ function MusicPageContent() {
setRecentAlbums(recent);
setNewestAlbums(newest);
} catch (e) {
- console.error('Failed to load albums (offline-first):', e);
+ console.error('Failed to load albums:', e);
if (mounted) {
setAllAlbums([]);
setRecentAlbums([]);
@@ -60,17 +59,18 @@ function MusicPageContent() {
};
load();
return () => { mounted = false; };
- }, [offline]);
+ }, [api]);
useEffect(() => {
let mounted = true;
const loadFavoriteAlbums = async () => {
+ if (!api) return;
setFavoritesLoading(true);
try {
- const starred = await offline.getAlbums(true);
- if (mounted) setFavoriteAlbums((starred || []).slice(0, 20));
+ const starred = await api.getAlbums('starred', 20);
+ if (mounted) setFavoriteAlbums(starred || []);
} catch (error) {
- console.error('Failed to load favorite albums (offline-first):', error);
+ console.error('Failed to load favorite albums:', error);
if (mounted) setFavoriteAlbums([]);
} finally {
if (mounted) setFavoritesLoading(false);
@@ -78,7 +78,7 @@ function MusicPageContent() {
};
loadFavoriteAlbums();
return () => { mounted = false; };
- }, [offline]);
+ }, [api]);
// Handle PWA shortcuts
useEffect(() => {
@@ -115,29 +115,31 @@ function MusicPageContent() {
await playAlbum(shuffledAlbums[0].id);
// Add remaining albums to queue
- for (let i = 1; i < shuffledAlbums.length; i++) {
- try {
- const songs = await offline.getSongs(shuffledAlbums[i].id);
- const api = getNavidromeAPI();
- songs.forEach((song: Song) => {
- addToQueue({
- id: song.id,
- name: song.title,
- url: api ? api.getStreamUrl(song.id) : `offline-song-${song.id}`,
- artist: song.artist || 'Unknown Artist',
- artistId: song.artistId || '',
- album: song.album || 'Unknown Album',
- albumId: song.parent,
+ const navidromeApi = getNavidromeAPI();
+ if (navidromeApi) {
+ for (let i = 1; i < shuffledAlbums.length; i++) {
+ try {
+ const songs = await navidromeApi.getAlbumSongs(shuffledAlbums[i].id);
+ songs.forEach((song: Song) => {
+ addToQueue({
+ id: song.id,
+ name: song.title,
+ url: navidromeApi.getStreamUrl(song.id),
+ artist: song.artist || 'Unknown Artist',
+ artistId: song.artistId || '',
+ album: song.album || 'Unknown Album',
+ albumId: song.parent,
duration: song.duration || 0,
coverArt: song.coverArt,
starred: !!song.starred
});
});
} catch (error) {
- console.error('Failed to load album tracks (offline-first):', error);
+ console.error('Failed to load album tracks:', error);
}
}
}
+ }
break;
case 'shuffle-favorites':
@@ -154,29 +156,31 @@ function MusicPageContent() {
await playAlbum(shuffledFavorites[0].id);
// Add remaining albums to queue
- for (let i = 1; i < shuffledFavorites.length; i++) {
- try {
- const songs = await offline.getSongs(shuffledFavorites[i].id);
- const api = getNavidromeAPI();
- songs.forEach((song: Song) => {
- addToQueue({
- id: song.id,
- name: song.title,
- url: api ? api.getStreamUrl(song.id) : `offline-song-${song.id}`,
- artist: song.artist || 'Unknown Artist',
- artistId: song.artistId || '',
- album: song.album || 'Unknown Album',
- albumId: song.parent,
+ const navidromeApiFav = getNavidromeAPI();
+ if (navidromeApiFav) {
+ for (let i = 1; i < shuffledFavorites.length; i++) {
+ try {
+ const songs = await navidromeApiFav.getAlbumSongs(shuffledFavorites[i].id);
+ songs.forEach((song: Song) => {
+ addToQueue({
+ id: song.id,
+ name: song.title,
+ url: navidromeApiFav.getStreamUrl(song.id),
+ artist: song.artist || 'Unknown Artist',
+ artistId: song.artistId || '',
+ album: song.album || 'Unknown Album',
+ albumId: song.parent,
duration: song.duration || 0,
coverArt: song.coverArt,
starred: !!song.starred
});
});
} catch (error) {
- console.error('Failed to load album tracks (offline-first):', error);
+ console.error('Failed to load album tracks:', error);
}
}
}
+ }
break;
}
setShortcutProcessed(true);
@@ -188,7 +192,7 @@ function MusicPageContent() {
// Delay to ensure data is loaded
const timeout = setTimeout(handleShortcuts, 1000);
return () => clearTimeout(timeout);
- }, [searchParams, recentAlbums, favoriteAlbums, shortcutProcessed, playAlbum, playTrack, shuffle, toggleShuffle, addToQueue, offline]);
+ }, [searchParams, recentAlbums, favoriteAlbums, shortcutProcessed, playAlbum, playTrack, shuffle, toggleShuffle, addToQueue]);
// Try to get user name from navidrome context, fallback to 'user'
let userName = '';
@@ -202,19 +206,7 @@ function MusicPageContent() {
return (
{/* Connection status (offline indicator) */}
- {!offline.isOfflineMode ? null : (
-
-
- )}
- {/* Offline empty state when nothing is cached */}
- {offline.isOfflineMode && !albumsLoading && recentAlbums.length === 0 && newestAlbums.length === 0 && favoriteAlbums.length === 0 && (
-
-
- You are offline and no albums are cached yet. Download albums for offline use from an album page, or open Settings → Offline Library to sync your library.
-
-
- )}
+
{/* Song Recommendations Section */}
- {/* Offline Library Management */}
-
-
-
{/* Auto-Tagging Settings */}
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
index 12bbd0b..7ceed5c 100644
--- a/components/ui/resizable.tsx
+++ b/components/ui/resizable.tsx
@@ -2,16 +2,16 @@
import * as React from "react"
import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import { Group as PanelGroup, Panel, Separator as PanelResizeHandle } from "react-resizable-panels"
import { cn } from "@/lib/utils"
function ResizablePanelGroup({
className,
...props
-}: React.ComponentProps
) {
+}: React.ComponentProps) {
return (
- ) {
- return ) {
+ return & {
+}: React.ComponentProps & {
withHandle?: boolean
}) {
return (
- div]:rotate-90",
@@ -49,7 +49,7 @@ function ResizableHandle({
)}
-
+
)
}
diff --git a/hooks/use-offline-audio-player.ts b/hooks/use-offline-audio-player.ts
deleted file mode 100644
index fae138d..0000000
--- a/hooks/use-offline-audio-player.ts
+++ /dev/null
@@ -1,281 +0,0 @@
-'use client';
-
-import { useCallback } from 'react';
-import { useAudioPlayer, Track } from '@/app/components/AudioPlayerContext';
-import { useOfflineDownloads } from '@/hooks/use-offline-downloads';
-import { useOfflineLibrary } from '@/hooks/use-offline-library';
-import { Album, Song } from '@/lib/navidrome';
-import { getNavidromeAPI } from '@/lib/navidrome';
-
-export interface OfflineTrack extends Track {
- isOffline?: boolean;
- offlineUrl?: string;
-}
-
-export function useOfflineAudioPlayer() {
- const {
- playTrack,
- addToQueue,
- currentTrack,
- ...audioPlayerProps
- } = useAudioPlayer();
-
- const { isSupported: isOfflineSupported, checkOfflineStatus } = useOfflineDownloads();
- const { isOnline, scrobbleOffline } = useOfflineLibrary();
-
- const api = getNavidromeAPI();
-
- // Convert song to track with offline awareness
- const songToTrack = useCallback(async (song: Song): Promise
=> {
- let track: OfflineTrack = {
- id: song.id,
- name: song.title,
- url: api?.getStreamUrl(song.id) || '',
- artist: song.artist,
- album: song.album || '',
- duration: song.duration,
- coverArt: song.coverArt ? api?.getCoverArtUrl(song.coverArt, 1200) : undefined,
- albumId: song.albumId,
- artistId: song.artistId,
- starred: !!song.starred
- };
-
- // Check if song is available offline
- if (isOfflineSupported) {
- const offlineStatus = await checkOfflineStatus(song.id, 'song');
- if (offlineStatus) {
- track.isOffline = true;
- track.offlineUrl = `offline-song-${song.id}`;
- // Prefer offline cached URL to avoid re-streaming even when online
- track.url = track.offlineUrl;
- }
- }
-
- return track;
- }, [api, isOfflineSupported, checkOfflineStatus]);
-
- // Play track with offline fallback
- const playTrackOffline = useCallback(async (song: Song | OfflineTrack) => {
- try {
- let track: OfflineTrack;
-
- if ('url' in song) {
- // Already a track
- track = song as OfflineTrack;
- } else {
- // Convert song to track
- track = await songToTrack(song);
- }
-
- // If offline and track has offline URL, use that
- if (!isOnline && track.isOffline && track.offlineUrl) {
- track.url = track.offlineUrl;
- }
-
- playTrack(track);
-
- // Scrobble with offline support
- scrobbleOffline(track.id);
-
- } catch (error) {
- console.error('Failed to play track:', error);
- throw error;
- }
- }, [songToTrack, playTrack, scrobbleOffline, isOnline]);
-
- // Play album with offline awareness
- const playAlbumOffline = useCallback(async (album: Album, songs: Song[], startIndex: number = 0) => {
- try {
- if (songs.length === 0) return;
-
- // Convert all songs to tracks with offline awareness
- const tracks = await Promise.all(songs.map(songToTrack));
-
- // Filter to only available tracks (online or offline)
- const availableTracks = tracks.filter((track: OfflineTrack) => {
- if (isOnline) return true; // All tracks available when online
- return track.isOffline; // Only offline tracks when offline
- });
-
- if (availableTracks.length === 0) {
- throw new Error('No tracks available for playback');
- }
-
- // Adjust start index if needed
- const safeStartIndex = Math.min(startIndex, availableTracks.length - 1);
-
- // Play first track
- playTrack(availableTracks[safeStartIndex]);
-
- // Add remaining tracks to queue
- const remainingTracks = [
- ...availableTracks.slice(safeStartIndex + 1),
- ...availableTracks.slice(0, safeStartIndex)
- ];
-
- remainingTracks.forEach(track => addToQueue(track));
-
- // Scrobble first track
- scrobbleOffline(availableTracks[safeStartIndex].id);
-
- } catch (error) {
- console.error('Failed to play album offline:', error);
- throw error;
- }
- }, [songToTrack, playTrack, addToQueue, scrobbleOffline, isOnline]);
-
- // Add track to queue with offline awareness
- const addToQueueOffline = useCallback(async (song: Song | OfflineTrack) => {
- try {
- let track: OfflineTrack;
-
- if ('url' in song) {
- track = song as OfflineTrack;
- } else {
- track = await songToTrack(song);
- }
-
- // Check if track is available
- if (!isOnline && !track.isOffline) {
- throw new Error('Track not available offline');
- }
-
- // If offline and track has offline URL, use that
- if (!isOnline && track.isOffline && track.offlineUrl) {
- track.url = track.offlineUrl;
- }
-
- addToQueue(track);
-
- } catch (error) {
- console.error('Failed to add track to queue:', error);
- throw error;
- }
- }, [songToTrack, addToQueue, isOnline]);
-
- // Shuffle play with offline awareness
- const shufflePlayOffline = useCallback(async (songs: Song[]) => {
- try {
- if (songs.length === 0) return;
-
- // Convert all songs to tracks
- const tracks = await Promise.all(songs.map(songToTrack));
-
- // Filter available tracks
- const availableTracks = tracks.filter((track: OfflineTrack) => {
- if (isOnline) return true;
- return track.isOffline;
- });
-
- if (availableTracks.length === 0) {
- throw new Error('No tracks available for shuffle play');
- }
-
- // Shuffle the available tracks
- const shuffledTracks = [...availableTracks].sort(() => Math.random() - 0.5);
-
- // Play first track
- playTrack(shuffledTracks[0]);
-
- // Add remaining tracks to queue
- shuffledTracks.slice(1).forEach(track => addToQueue(track));
-
- // Scrobble first track
- scrobbleOffline(shuffledTracks[0].id);
-
- } catch (error) {
- console.error('Failed to shuffle play offline:', error);
- throw error;
- }
- }, [songToTrack, playTrack, addToQueue, scrobbleOffline, isOnline]);
-
- // Get availability info for a song
- const getTrackAvailability = useCallback(async (song: Song): Promise<{
- isAvailable: boolean;
- isOffline: boolean;
- requiresConnection: boolean;
- }> => {
- try {
- const track = await songToTrack(song);
-
- return {
- isAvailable: isOnline || !!track.isOffline,
- isOffline: !!track.isOffline,
- requiresConnection: !track.isOffline
- };
- } catch (error) {
- console.error('Failed to check track availability:', error);
- return {
- isAvailable: false,
- isOffline: false,
- requiresConnection: true
- };
- }
- }, [songToTrack, isOnline]);
-
- // Get album availability info
- const getAlbumAvailability = useCallback(async (songs: Song[]): Promise<{
- totalTracks: number;
- availableTracks: number;
- offlineTracks: number;
- onlineOnlyTracks: number;
- }> => {
- try {
- const tracks = await Promise.all(songs.map(songToTrack));
-
- const offlineTracks = tracks.filter((t: OfflineTrack) => t.isOffline).length;
- const onlineOnlyTracks = tracks.filter((t: OfflineTrack) => !t.isOffline).length;
- const availableTracks = isOnline ? tracks.length : offlineTracks;
-
- return {
- totalTracks: tracks.length,
- availableTracks,
- offlineTracks,
- onlineOnlyTracks
- };
- } catch (error) {
- console.error('Failed to check album availability:', error);
- return {
- totalTracks: songs.length,
- availableTracks: 0,
- offlineTracks: 0,
- onlineOnlyTracks: songs.length
- };
- }
- }, [songToTrack, isOnline]);
-
- // Enhanced track info with offline status
- const getCurrentTrackInfo = useCallback(() => {
- if (!currentTrack) return null;
-
- const offlineTrack = currentTrack as OfflineTrack;
-
- return {
- ...currentTrack,
- isAvailableOffline: offlineTrack.isOffline || false,
- isPlayingOffline: !isOnline && !!offlineTrack.isOffline
- };
- }, [currentTrack, isOnline]);
-
- return {
- // Original audio player props
- ...audioPlayerProps,
- currentTrack,
-
- // Enhanced offline methods
- playTrackOffline,
- playAlbumOffline,
- addToQueueOffline,
- shufflePlayOffline,
-
- // Utility methods
- songToTrack,
- getTrackAvailability,
- getAlbumAvailability,
- getCurrentTrackInfo,
-
- // State
- isOnline,
- isOfflineSupported
- };
-}
diff --git a/hooks/use-offline-downloads.ts b/hooks/use-offline-downloads.ts
deleted file mode 100644
index 644c9df..0000000
--- a/hooks/use-offline-downloads.ts
+++ /dev/null
@@ -1,682 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { Album, Song, getNavidromeAPI } from '@/lib/navidrome';
-
-export interface DownloadProgress {
- completed: number;
- total: number;
- failed: number;
- status: 'idle' | 'starting' | 'downloading' | 'complete' | 'error' | 'paused';
- currentSong?: string;
- currentArtist?: string;
- currentAlbum?: string;
- error?: string;
- downloadSpeed?: number; // In bytes per second
- timeRemaining?: number; // In seconds
- percentComplete?: number; // 0-100
-}
-
-export interface OfflineItem {
- id: string;
- type: 'album' | 'song';
- name: string;
- artist: string;
- downloadedAt: number;
- size?: number;
- bitRate?: number;
- duration?: number;
- format?: string;
- lastPlayed?: number;
-}
-
-export interface OfflineStats {
- totalSize: number;
- audioSize: number;
- imageSize: number;
- metaSize: number;
- downloadedAlbums: number;
- downloadedSongs: number;
- lastDownload: number | null;
- downloadErrors: number;
- remainingStorage: number | null;
- autoDownloadEnabled: boolean;
- downloadQuality: 'original' | 'high' | 'medium' | 'low';
- downloadOnWifiOnly: boolean;
- priorityContent: string[]; // IDs of albums or playlists that should always be available offline
-}
-
-class DownloadManager {
- private worker: ServiceWorker | null = null;
- private messageChannel: MessageChannel | null = null;
-
- async initialize(): Promise {
- if ('serviceWorker' in navigator) {
- try {
- const registration = await navigator.serviceWorker.register('/sw.js');
- console.log('Service Worker registered:', registration);
-
- // Wait for the service worker to be ready
- const readyRegistration = await navigator.serviceWorker.ready;
- this.worker = readyRegistration.active;
-
- return true;
- } catch (error) {
- console.error('Service Worker registration failed:', error);
- return false;
- }
- }
- return false;
- }
-
- private async sendMessage(type: string, data: any): Promise {
- if (!this.worker) {
- throw new Error('Service Worker not available');
- }
-
- return new Promise((resolve, reject) => {
- const channel = new MessageChannel();
-
- channel.port1.onmessage = (event) => {
- const { type: responseType, data: responseData } = event.data;
- if (responseType.includes('ERROR')) {
- reject(new Error(responseData.error));
- } else {
- resolve(responseData);
- }
- };
-
- this.worker!.postMessage({ type, data }, [channel.port2]);
- });
- }
-
- async downloadAlbum(
- album: Album,
- songs: Song[],
- onProgress?: (progress: DownloadProgress) => void
- ): Promise {
- if (!this.worker) {
- throw new Error('Service Worker not available');
- }
-
- return new Promise((resolve, reject) => {
- const channel = new MessageChannel();
-
- channel.port1.onmessage = (event) => {
- const { type, data } = event.data;
-
- switch (type) {
- case 'DOWNLOAD_PROGRESS':
- if (onProgress) {
- onProgress(data);
- }
- break;
- case 'DOWNLOAD_COMPLETE':
- resolve();
- break;
- case 'DOWNLOAD_ERROR':
- reject(new Error(data.error));
- break;
- }
- };
-
- // Add direct download URLs to songs (use 'streamUrl' field name to keep SW compatibility)
- const songsWithUrls = songs.map(song => ({
- ...song,
- streamUrl: this.getDownloadUrl(song.id),
- offlineUrl: `offline-song-${song.id}`,
- duration: song.duration,
- bitRate: song.bitRate,
- size: song.size
- }));
-
- this.worker!.postMessage({
- type: 'DOWNLOAD_ALBUM',
- data: { album, songs: songsWithUrls }
- }, [channel.port2]);
- });
- }
-
- async downloadSong(
- song: Song,
- options?: { quality?: 'original' | 'high' | 'medium' | 'low', priority?: boolean }
- ): Promise {
- const songWithUrl = {
- ...song,
- streamUrl: this.getDownloadUrl(song.id, options?.quality),
- offlineUrl: `offline-song-${song.id}`,
- duration: song.duration,
- bitRate: song.bitRate,
- size: song.size,
- priority: options?.priority || false,
- quality: options?.quality || 'original'
- };
-
- return this.sendMessage('DOWNLOAD_SONG', songWithUrl);
- }
-
- async downloadQueue(
- songs: Song[],
- options?: {
- quality?: 'original' | 'high' | 'medium' | 'low',
- priority?: boolean,
- onProgressUpdate?: (progress: DownloadProgress) => void
- }
- ): Promise {
- if (!this.worker) {
- throw new Error('Service Worker not available');
- }
-
- return new Promise((resolve, reject) => {
- const channel = new MessageChannel();
-
- channel.port1.onmessage = (event) => {
- const { type, data } = event.data;
-
- switch (type) {
- case 'DOWNLOAD_PROGRESS':
- if (options?.onProgressUpdate) {
- options.onProgressUpdate(data);
- }
- break;
- case 'DOWNLOAD_COMPLETE':
- resolve();
- break;
- case 'DOWNLOAD_ERROR':
- reject(new Error(data.error));
- break;
- }
- };
-
- const songsWithUrls = songs.map(song => ({
- ...song,
- streamUrl: this.getDownloadUrl(song.id, options?.quality),
- offlineUrl: `offline-song-${song.id}`,
- duration: song.duration,
- bitRate: song.bitRate,
- size: song.size,
- priority: options?.priority || false,
- quality: options?.quality || 'original'
- }));
-
- this.worker!.postMessage({
- type: 'DOWNLOAD_QUEUE',
- data: { songs: songsWithUrls }
- }, [channel.port2]);
- });
- }
-
- async pauseDownloads(): Promise {
- return this.sendMessage('PAUSE_DOWNLOADS', {});
- }
-
- async resumeDownloads(): Promise {
- return this.sendMessage('RESUME_DOWNLOADS', {});
- }
-
- async cancelDownloads(): Promise {
- return this.sendMessage('CANCEL_DOWNLOADS', {});
- }
-
- async setDownloadPreferences(preferences: {
- quality: 'original' | 'high' | 'medium' | 'low',
- wifiOnly: boolean,
- autoDownloadRecent: boolean,
- autoDownloadFavorites: boolean,
- maxStoragePercent: number,
- priorityContent?: string[] // IDs of albums or playlists
- }): Promise {
- return this.sendMessage('SET_DOWNLOAD_PREFERENCES', preferences);
- }
-
- async getDownloadPreferences(): Promise<{
- quality: 'original' | 'high' | 'medium' | 'low',
- wifiOnly: boolean,
- autoDownloadRecent: boolean,
- autoDownloadFavorites: boolean,
- maxStoragePercent: number,
- priorityContent: string[]
- }> {
- return this.sendMessage('GET_DOWNLOAD_PREFERENCES', {});
- }
-
- async enableOfflineMode(settings: {
- autoDownloadQueue?: boolean;
- forceOffline?: boolean;
- currentQueue?: Song[];
- }): Promise {
- return this.sendMessage('ENABLE_OFFLINE_MODE', settings);
- }
-
- async checkOfflineStatus(id: string, type: 'album' | 'song'): Promise {
- try {
- const result = await this.sendMessage('CHECK_OFFLINE_STATUS', { id, type });
- return result.isAvailable;
- } catch (error) {
- console.error('Failed to check offline status:', error);
- return false;
- }
- }
-
- async deleteOfflineContent(id: string, type: 'album' | 'song'): Promise {
- return this.sendMessage('DELETE_OFFLINE_CONTENT', { id, type });
- }
-
- async getOfflineStats(): Promise {
- return this.sendMessage('GET_OFFLINE_STATS', {});
- }
-
- async getOfflineItems(): Promise<{ albums: OfflineItem[]; songs: OfflineItem[] }> {
- return this.sendMessage('GET_OFFLINE_ITEMS', {});
- }
-
- private getDownloadUrl(songId: string, quality?: 'original' | 'high' | 'medium' | 'low'): string {
- const api = getNavidromeAPI();
- if (!api) throw new Error('Navidrome server not configured');
-
- // Use direct download to fetch original file by default
- if (quality === 'original' || !quality) {
- if (typeof (api as any).getDownloadUrl === 'function') {
- return (api as any).getDownloadUrl(songId);
- }
- }
-
- // For other quality settings, use the stream URL with appropriate parameters
- const maxBitRate = quality === 'high' ? 320 :
- quality === 'medium' ? 192 :
- quality === 'low' ? 128 : undefined;
-
- // Note: format parameter is not supported by the Navidrome API
- // The server will automatically transcode based on maxBitRate
- return api.getStreamUrl(songId, maxBitRate);
- }
-
- // LocalStorage fallback for browsers without service worker support
- async downloadAlbumFallback(album: Album, songs: Song[]): Promise {
- const offlineData = this.getOfflineData();
-
- // Store album metadata
- offlineData.albums[album.id] = {
- id: album.id,
- name: album.name,
- artist: album.artist,
- downloadedAt: Date.now(),
- songCount: songs.length,
- songs: songs.map(song => song.id)
- };
-
- // Mark songs as downloaded (metadata only in localStorage fallback)
- songs.forEach(song => {
- offlineData.songs[song.id] = {
- id: song.id,
- title: song.title,
- artist: song.artist,
- album: song.album,
- albumId: song.albumId,
- downloadedAt: Date.now()
- };
- });
-
- this.saveOfflineData(offlineData);
- }
-
- public getOfflineData() {
- const stored = localStorage.getItem('offline-downloads');
- if (stored) {
- try {
- return JSON.parse(stored);
- } catch (error) {
- console.error('Failed to parse offline data:', error);
- }
- }
-
- return {
- albums: {},
- songs: {},
- lastUpdated: Date.now()
- };
- }
-
- public saveOfflineData(data: any) {
- data.lastUpdated = Date.now();
- localStorage.setItem('offline-downloads', JSON.stringify(data));
- }
-
- async checkOfflineStatusFallback(id: string, type: 'album' | 'song'): Promise {
- const offlineData = this.getOfflineData();
-
- if (type === 'album') {
- return !!offlineData.albums[id];
- } else {
- return !!offlineData.songs[id];
- }
- }
-
- async deleteOfflineContentFallback(id: string, type: 'album' | 'song'): Promise {
- const offlineData = this.getOfflineData();
-
- if (type === 'album') {
- const album = offlineData.albums[id];
- if (album && album.songs) {
- // Remove associated songs
- album.songs.forEach((songId: string) => {
- delete offlineData.songs[songId];
- });
- }
- delete offlineData.albums[id];
- } else {
- delete offlineData.songs[id];
- }
-
- this.saveOfflineData(offlineData);
- }
-
- getOfflineAlbums(): OfflineItem[] {
- const offlineData = this.getOfflineData();
- return Object.values(offlineData.albums).map((album: any) => ({
- id: album.id,
- type: 'album' as const,
- name: album.name,
- artist: album.artist,
- downloadedAt: album.downloadedAt
- }));
- }
-
- getOfflineSongs(): OfflineItem[] {
- const offlineData = this.getOfflineData();
- return Object.values(offlineData.songs).map((song: any) => ({
- id: song.id,
- type: 'song' as const,
- name: song.title,
- artist: song.artist,
- downloadedAt: song.downloadedAt
- }));
- }
-}
-
-// Create a singleton instance that will be initialized on the client side
-let downloadManagerInstance: DownloadManager | null = null;
-
-// Only create the download manager instance on the client side
-if (typeof window !== 'undefined') {
- downloadManagerInstance = new DownloadManager();
-}
-
-// Create a safe wrapper around the download manager
-const downloadManager = {
- initialize: async () => {
- if (!downloadManagerInstance) return false;
- return downloadManagerInstance.initialize();
- },
- getOfflineStats: async () => {
- if (!downloadManagerInstance) return {
- totalSize: 0,
- audioSize: 0,
- imageSize: 0,
- metaSize: 0,
- downloadedAlbums: 0,
- downloadedSongs: 0,
- lastDownload: null,
- downloadErrors: 0,
- remainingStorage: null,
- autoDownloadEnabled: false,
- downloadQuality: 'original' as const,
- downloadOnWifiOnly: true,
- priorityContent: []
- };
- return downloadManagerInstance.getOfflineStats();
- },
- downloadAlbum: async (album: Album, songs: Song[], progressCallback: (progress: DownloadProgress) => void) => {
- if (!downloadManagerInstance) return;
- return downloadManagerInstance.downloadAlbum(album, songs, progressCallback);
- },
- downloadAlbumFallback: async (album: Album, songs: Song[]) => {
- if (!downloadManagerInstance) return;
- return downloadManagerInstance.downloadAlbumFallback(album, songs);
- },
- downloadSong: async (song: Song) => {
- if (!downloadManagerInstance) return;
- return downloadManagerInstance.downloadSong(song);
- },
- getOfflineData: () => {
- if (!downloadManagerInstance) return { albums: {}, songs: {} };
- return downloadManagerInstance.getOfflineData();
- },
- saveOfflineData: (data: any) => {
- if (!downloadManagerInstance) return;
- return downloadManagerInstance.saveOfflineData(data);
- },
- checkOfflineStatus: async (id: string, type: 'album' | 'song') => {
- if (!downloadManagerInstance) return false;
- return downloadManagerInstance.checkOfflineStatus(id, type);
- },
- checkOfflineStatusFallback: (id: string, type: 'album' | 'song') => {
- if (!downloadManagerInstance) return false;
- return downloadManagerInstance.checkOfflineStatusFallback(id, type);
- },
- deleteOfflineContent: async (id: string, type: 'album' | 'song') => {
- if (!downloadManagerInstance) return;
- return downloadManagerInstance.deleteOfflineContent(id, type);
- },
- deleteOfflineContentFallback: async (id: string, type: 'album' | 'song') => {
- if (!downloadManagerInstance) return;
- return downloadManagerInstance.deleteOfflineContentFallback(id, type);
- },
- getOfflineItems: async () => {
- if (!downloadManagerInstance) return { albums: [], songs: [] };
- return downloadManagerInstance.getOfflineItems();
- },
- getOfflineAlbums: () => {
- if (!downloadManagerInstance) return [];
- return downloadManagerInstance.getOfflineAlbums();
- },
- getOfflineSongs: () => {
- if (!downloadManagerInstance) return [];
- return downloadManagerInstance.getOfflineSongs();
- },
- downloadQueue: async (songs: Song[]) => {
- if (!downloadManagerInstance) return;
- return downloadManagerInstance.downloadQueue(songs);
- },
- enableOfflineMode: async (settings: any) => {
- if (!downloadManagerInstance) return;
- return downloadManagerInstance.enableOfflineMode(settings);
- }
-};
-
-export function useOfflineDownloads() {
- const [isSupported, setIsSupported] = useState(false);
- const [isInitialized, setIsInitialized] = useState(false);
- const [downloadProgress, setDownloadProgress] = useState({
- completed: 0,
- total: 0,
- failed: 0,
- status: 'idle'
- });
-
- const [offlineStats, setOfflineStats] = useState({
- totalSize: 0,
- audioSize: 0,
- imageSize: 0,
- metaSize: 0,
- downloadedAlbums: 0,
- downloadedSongs: 0,
- lastDownload: null,
- downloadErrors: 0,
- remainingStorage: null,
- autoDownloadEnabled: false,
- downloadQuality: 'original',
- downloadOnWifiOnly: true,
- priorityContent: []
- });
-
- useEffect(() => {
- const initializeDownloadManager = async () => {
- // Skip initialization on server-side
- if (!downloadManager) {
- setIsSupported(false);
- setIsInitialized(true);
- return;
- }
-
- const supported = await downloadManager.initialize();
- setIsSupported(supported);
- setIsInitialized(true);
-
- if (supported) {
- // Load initial stats
- try {
- const stats = await downloadManager.getOfflineStats();
- setOfflineStats(stats);
- } catch (error) {
- console.error('Failed to load offline stats:', error);
- }
- }
- };
-
- initializeDownloadManager();
- }, []);
-
- const downloadAlbum = useCallback(async (album: Album, songs: Song[]) => {
- try {
- if (isSupported) {
- await downloadManager.downloadAlbum(album, songs, setDownloadProgress);
- } else {
- // Fallback to localStorage metadata only
- await downloadManager.downloadAlbumFallback(album, songs);
- }
-
- // Refresh stats
- if (isSupported) {
- const stats = await downloadManager.getOfflineStats();
- setOfflineStats(stats);
- }
- } catch (error) {
- console.error('Download failed:', error);
- setDownloadProgress(prev => ({ ...prev, status: 'error', error: (error as Error).message }));
- throw error;
- }
- }, [isSupported]);
-
- const downloadSong = useCallback(async (song: Song) => {
- if (isSupported) {
- await downloadManager.downloadSong(song);
- } else {
- // Fallback - just save metadata
- const offlineData = downloadManager.getOfflineData();
- offlineData.songs[song.id] = {
- id: song.id,
- title: song.title,
- artist: song.artist,
- album: song.album,
- downloadedAt: Date.now()
- };
- downloadManager.saveOfflineData(offlineData);
- }
- }, [isSupported]);
-
- const checkOfflineStatus = useCallback(async (id: string, type: 'album' | 'song'): Promise => {
- if (isSupported) {
- return downloadManager.checkOfflineStatus(id, type);
- } else {
- return downloadManager.checkOfflineStatusFallback(id, type);
- }
- }, [isSupported]);
-
- const deleteOfflineContent = useCallback(async (id: string, type: 'album' | 'song') => {
- if (isSupported) {
- await downloadManager.deleteOfflineContent(id, type);
- } else {
- await downloadManager.deleteOfflineContentFallback(id, type);
- }
-
- // Refresh stats
- if (isSupported) {
- const stats = await downloadManager.getOfflineStats();
- setOfflineStats(stats);
- }
- }, [isSupported]);
-
- const getOfflineItems = useCallback(async (): Promise => {
- if (isSupported) {
- try {
- const { albums, songs } = await downloadManager.getOfflineItems();
- return [...albums, ...songs].sort((a, b) => b.downloadedAt - a.downloadedAt);
- } catch (e) {
- console.error('Failed to get offline items from SW, falling back:', e);
- }
- }
- const albums = downloadManager.getOfflineAlbums();
- const songs = downloadManager.getOfflineSongs();
- return [...albums, ...songs].sort((a, b) => b.downloadedAt - a.downloadedAt);
- }, [isSupported]);
-
- const clearDownloadProgress = useCallback(() => {
- setDownloadProgress({
- completed: 0,
- total: 0,
- failed: 0,
- status: 'idle'
- });
- }, []);
-
- const downloadQueue = useCallback(async (songs: Song[]) => {
- if (isSupported) {
- setDownloadProgress({ completed: 0, total: songs.length, failed: 0, status: 'downloading' });
-
- try {
- await downloadManager.downloadQueue(songs);
- // Stats will be updated via progress events
- } catch (error) {
- console.error('Queue download failed:', error);
- setDownloadProgress(prev => ({ ...prev, status: 'error' }));
- }
- } else {
- // Fallback: just store metadata
- const offlineData = downloadManager.getOfflineData();
- songs.forEach(song => {
- offlineData.songs[song.id] = {
- id: song.id,
- title: song.title,
- artist: song.artist,
- album: song.album,
- albumId: song.albumId,
- downloadedAt: Date.now()
- };
- });
- downloadManager.saveOfflineData(offlineData);
- }
- }, [isSupported]);
-
- const enableOfflineMode = useCallback(async (settings: {
- autoDownloadQueue?: boolean;
- forceOffline?: boolean;
- currentQueue?: Song[];
- }) => {
- if (isSupported) {
- try {
- await downloadManager.enableOfflineMode(settings);
- } catch (error) {
- console.error('Failed to enable offline mode:', error);
- }
- }
- }, [isSupported]);
-
- return {
- isSupported,
- isInitialized,
- downloadProgress,
- offlineStats,
- downloadAlbum,
- downloadSong,
- downloadQueue,
- enableOfflineMode,
- checkOfflineStatus,
- deleteOfflineContent,
- getOfflineItems,
- clearDownloadProgress
- };
-}
-
-// Export the manager instance for direct use if needed
-export { downloadManager };
diff --git a/hooks/use-offline-library-sync.ts b/hooks/use-offline-library-sync.ts
deleted file mode 100644
index dfc2f68..0000000
--- a/hooks/use-offline-library-sync.ts
+++ /dev/null
@@ -1,517 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { offlineLibraryDB, LibrarySyncStats, OfflineAlbum, OfflineArtist, OfflineSong, OfflinePlaylist } from '@/lib/indexeddb';
-import { useNavidromeConfig } from '@/app/components/NavidromeConfigContext';
-import { useToast } from '@/hooks/use-toast';
-import { getNavidromeAPI, Song } from '@/lib/navidrome';
-
-export interface LibrarySyncProgress {
- phase: 'idle' | 'albums' | 'artists' | 'songs' | 'playlists' | 'operations' | 'complete' | 'error';
- current: number;
- total: number;
- message: string;
-}
-
-export interface LibrarySyncOptions {
- includeAlbums: boolean;
- includeArtists: boolean;
- includeSongs: boolean;
- includePlaylists: boolean;
- syncStarred: boolean;
- maxSongs: number; // Limit to prevent overwhelming the database
-}
-
-const defaultSyncOptions: LibrarySyncOptions = {
- includeAlbums: true,
- includeArtists: true,
- includeSongs: true,
- includePlaylists: true,
- syncStarred: true,
- maxSongs: 1000 // Default limit
-};
-
-export function useOfflineLibrarySync() {
- const [isInitialized, setIsInitialized] = useState(false);
- const [isSyncing, setIsSyncing] = useState(false);
- const [syncProgress, setSyncProgress] = useState({
- phase: 'idle',
- current: 0,
- total: 0,
- message: ''
- });
- const [stats, setStats] = useState({
- albums: 0,
- artists: 0,
- songs: 0,
- playlists: 0,
- lastSync: null,
- pendingOperations: 0,
- storageSize: 0,
- syncInProgress: false
- });
- const [isOnline, setIsOnline] = useState(true);
- const [autoSyncEnabled, setAutoSyncEnabled] = useState(false);
- const [syncOptions, setSyncOptions] = useState(defaultSyncOptions);
-
- const { config, isConnected } = useNavidromeConfig();
- const api = useMemo(() => getNavidromeAPI(config), [config]);
- const { toast } = useToast();
- const syncTimeoutRef = useRef(null);
-
- // Initialize the offline library database
- useEffect(() => {
- const initializeDB = async () => {
- try {
- const initialized = await offlineLibraryDB.initialize();
- setIsInitialized(initialized);
-
- if (initialized) {
- await refreshStats();
- loadSyncSettings();
- }
- } catch (error) {
- console.error('Failed to initialize offline library:', error);
- }
- };
-
- initializeDB();
- }, []);
-
- // Monitor online status
- useEffect(() => {
- const handleOnline = () => setIsOnline(true);
- const handleOffline = () => setIsOnline(false);
-
- window.addEventListener('online', handleOnline);
- window.addEventListener('offline', handleOffline);
-
- // Check if navigator is available (client-side only)
- if (typeof navigator !== 'undefined') {
- setIsOnline(navigator.onLine);
- }
-
- return () => {
- window.removeEventListener('online', handleOnline);
- window.removeEventListener('offline', handleOffline);
- };
- }, []);
-
- // Auto-sync when coming back online
- useEffect(() => {
- if (isOnline && isConnected && autoSyncEnabled && !isSyncing) {
- const pendingOpsSync = async () => {
- try {
- await syncPendingOperations();
- } catch (error) {
- console.error('Auto-sync failed:', error);
- }
- };
-
- // Delay auto-sync to avoid immediate trigger
- syncTimeoutRef.current = setTimeout(pendingOpsSync, 2000);
- }
-
- return () => {
- if (syncTimeoutRef.current) {
- clearTimeout(syncTimeoutRef.current);
- }
- };
- }, [isOnline, isConnected, autoSyncEnabled, isSyncing]);
-
- const loadSyncSettings = useCallback(async () => {
- try {
- const [autoSync, savedOptions] = await Promise.all([
- offlineLibraryDB.getMetadata('autoSyncEnabled'),
- offlineLibraryDB.getMetadata('syncOptions')
- ]);
-
- if (typeof autoSync === 'boolean') setAutoSyncEnabled(autoSync);
-
- if (savedOptions) {
- setSyncOptions({ ...defaultSyncOptions, ...savedOptions });
- }
- } catch (error) {
- console.error('Failed to load sync settings:', error);
- }
- }, []);
-
- const refreshStats = useCallback(async () => {
- if (!isInitialized) return;
-
- try {
- const newStats = await offlineLibraryDB.getStats();
- setStats(newStats);
- } catch (error) {
- console.error('Failed to refresh stats:', error);
- }
- }, [isInitialized]);
-
- const updateSyncProgress = useCallback((phase: LibrarySyncProgress['phase'], current: number, total: number, message: string) => {
- setSyncProgress({ phase, current, total, message });
- }, []);
-
- const syncLibraryFromServer = useCallback(async (options: Partial = {}) => {
- if (!api || !isConnected || !isInitialized) {
- throw new Error('Cannot sync: API not available or not connected');
- }
-
- if (isSyncing) {
- throw new Error('Sync already in progress');
- }
-
- const actualOptions = { ...syncOptions, ...options };
-
- try {
- setIsSyncing(true);
- await offlineLibraryDB.setMetadata('syncInProgress', true);
-
- updateSyncProgress('albums', 0, 0, 'Testing server connection...');
-
- // Test connection first
- const connected = await api.ping();
- if (!connected) {
- throw new Error('No connection to Navidrome server');
- }
-
- let totalItems = 0;
- let processedItems = 0;
-
- // Sync albums
- if (actualOptions.includeAlbums) {
- updateSyncProgress('albums', 0, 0, 'Fetching albums from server...');
-
- const albums = await api.getAlbums('alphabeticalByName', 5000);
- totalItems += albums.length;
-
- updateSyncProgress('albums', 0, albums.length, `Storing ${albums.length} albums...`);
-
- const mappedAlbums: OfflineAlbum[] = albums.map(album => ({
- ...album,
- lastModified: Date.now(),
- synced: true
- }));
-
- await offlineLibraryDB.storeAlbums(mappedAlbums);
- processedItems += albums.length;
-
- updateSyncProgress('albums', albums.length, albums.length, `Stored ${albums.length} albums`);
- }
-
- // Sync artists
- if (actualOptions.includeArtists) {
- updateSyncProgress('artists', processedItems, totalItems, 'Fetching artists from server...');
-
- const artists = await api.getArtists();
- totalItems += artists.length;
-
- updateSyncProgress('artists', 0, artists.length, `Storing ${artists.length} artists...`);
-
- const mappedArtists: OfflineArtist[] = artists.map(artist => ({
- ...artist,
- lastModified: Date.now(),
- synced: true
- }));
-
- await offlineLibraryDB.storeArtists(mappedArtists);
- processedItems += artists.length;
-
- updateSyncProgress('artists', artists.length, artists.length, `Stored ${artists.length} artists`);
- }
-
- // Sync playlists
- if (actualOptions.includePlaylists) {
- updateSyncProgress('playlists', processedItems, totalItems, 'Fetching playlists from server...');
-
- const playlists = await api.getPlaylists();
- totalItems += playlists.length;
-
- updateSyncProgress('playlists', 0, playlists.length, `Storing ${playlists.length} playlists...`);
-
- const mappedPlaylists: OfflinePlaylist[] = await Promise.all(
- playlists.map(async (playlist) => {
- try {
- const playlistDetails = await api.getPlaylist(playlist.id);
- return {
- ...playlist,
- songIds: (playlistDetails.songs || []).map((song: Song) => song.id),
- lastModified: Date.now(),
- synced: true
- };
- } catch (error) {
- console.warn(`Failed to get details for playlist ${playlist.id}:`, error);
- return {
- ...playlist,
- songIds: [],
- lastModified: Date.now(),
- synced: true
- };
- }
- })
- );
-
- await offlineLibraryDB.storePlaylists(mappedPlaylists);
- processedItems += playlists.length;
-
- updateSyncProgress('playlists', playlists.length, playlists.length, `Stored ${playlists.length} playlists`);
- }
-
- // Sync songs (limited to avoid overwhelming the database)
- if (actualOptions.includeSongs) {
- updateSyncProgress('songs', processedItems, totalItems, 'Fetching songs from server...');
-
- const albums = await offlineLibraryDB.getAlbums();
- const albumsToSync = albums.slice(0, Math.floor(actualOptions.maxSongs / 10)); // Roughly 10 songs per album
-
- let songCount = 0;
- updateSyncProgress('songs', 0, albumsToSync.length, `Processing songs for ${albumsToSync.length} albums...`);
-
- for (let i = 0; i < albumsToSync.length; i++) {
- const album = albumsToSync[i];
- try {
- const { songs } = await api.getAlbum(album.id);
-
- if (songCount + songs.length > actualOptions.maxSongs) {
- const remaining = actualOptions.maxSongs - songCount;
- if (remaining > 0) {
- const limitedSongs = songs.slice(0, remaining);
- const mappedSongs: OfflineSong[] = limitedSongs.map(song => ({
- ...song,
- lastModified: Date.now(),
- synced: true
- }));
- await offlineLibraryDB.storeSongs(mappedSongs);
- songCount += limitedSongs.length;
- }
- break;
- }
-
- const mappedSongs: OfflineSong[] = songs.map(song => ({
- ...song,
- lastModified: Date.now(),
- synced: true
- }));
-
- await offlineLibraryDB.storeSongs(mappedSongs);
- songCount += songs.length;
-
- updateSyncProgress('songs', i + 1, albumsToSync.length, `Processed ${i + 1}/${albumsToSync.length} albums (${songCount} songs)`);
- } catch (error) {
- console.warn(`Failed to sync songs for album ${album.id}:`, error);
- }
- }
-
- updateSyncProgress('songs', albumsToSync.length, albumsToSync.length, `Stored ${songCount} songs`);
- }
-
- // Sync pending operations to server
- updateSyncProgress('operations', 0, 0, 'Syncing pending operations...');
- await syncPendingOperations();
-
- // Update sync timestamp
- await offlineLibraryDB.setMetadata('lastSync', Date.now());
-
- updateSyncProgress('complete', 100, 100, 'Library sync completed successfully');
-
- toast({
- title: "Sync Complete",
- description: `Successfully synced library data offline`,
- });
-
- } catch (error) {
- console.error('Library sync failed:', error);
- updateSyncProgress('error', 0, 0, `Sync failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
-
- toast({
- title: "Sync Failed",
- description: error instanceof Error ? error.message : 'Unknown error occurred',
- variant: "destructive"
- });
-
- throw error;
- } finally {
- setIsSyncing(false);
- await offlineLibraryDB.setMetadata('syncInProgress', false);
- await refreshStats();
- }
- }, [api, isConnected, isInitialized, isSyncing, syncOptions, toast, updateSyncProgress, refreshStats]);
-
- const syncPendingOperations = useCallback(async () => {
- if (!api || !isConnected || !isInitialized) {
- return;
- }
-
- try {
- const operations = await offlineLibraryDB.getSyncOperations();
-
- if (operations.length === 0) {
- return;
- }
-
- updateSyncProgress('operations', 0, operations.length, 'Syncing pending operations...');
-
- for (let i = 0; i < operations.length; i++) {
- const operation = operations[i];
-
- try {
- switch (operation.type) {
- case 'star':
- if (operation.entityType !== 'playlist') {
- await api.star(operation.entityId, operation.entityType);
- }
- break;
- case 'unstar':
- if (operation.entityType !== 'playlist') {
- await api.unstar(operation.entityId, operation.entityType);
- }
- break;
- case 'scrobble':
- await api.scrobble(operation.entityId);
- break;
- case 'create_playlist':
- if ('name' in operation.data && typeof operation.data.name === 'string') {
- await api.createPlaylist(
- operation.data.name,
- 'songIds' in operation.data ? operation.data.songIds : undefined
- );
- }
- break;
- case 'update_playlist':
- if ('name' in operation.data || 'comment' in operation.data || 'songIds' in operation.data) {
- const d = operation.data as { name?: string; comment?: string; songIds?: string[] };
- await api.updatePlaylist(operation.entityId, d.name, d.comment, d.songIds);
- }
- break;
- case 'delete_playlist':
- await api.deletePlaylist(operation.entityId);
- break;
- }
-
- await offlineLibraryDB.removeSyncOperation(operation.id);
- updateSyncProgress('operations', i + 1, operations.length, `Synced ${i + 1}/${operations.length} operations`);
-
- } catch (error) {
- console.error(`Failed to sync operation ${operation.id}:`, error);
- // Don't remove failed operations, they'll be retried later
- }
- }
-
- } catch (error) {
- console.error('Failed to sync pending operations:', error);
- }
- }, [api, isConnected, isInitialized, updateSyncProgress]);
-
- const clearOfflineData = useCallback(async () => {
- if (!isInitialized) return;
-
- try {
- await offlineLibraryDB.clearAllData();
- await refreshStats();
-
- toast({
- title: "Offline Data Cleared",
- description: "All offline library data has been removed",
- });
- } catch (error) {
- console.error('Failed to clear offline data:', error);
- toast({
- title: "Clear Failed",
- description: "Failed to clear offline data",
- variant: "destructive"
- });
- }
- }, [isInitialized, refreshStats, toast]);
-
- const updateAutoSync = useCallback(async (enabled: boolean) => {
- setAutoSyncEnabled(enabled);
- try {
- await offlineLibraryDB.setMetadata('autoSyncEnabled', enabled);
- } catch (error) {
- console.error('Failed to save auto-sync setting:', error);
- }
- }, []);
-
- const updateSyncOptions = useCallback(async (newOptions: Partial) => {
- const updatedOptions = { ...syncOptions, ...newOptions };
- setSyncOptions(updatedOptions);
-
- try {
- await offlineLibraryDB.setMetadata('syncOptions', updatedOptions);
- } catch (error) {
- console.error('Failed to save sync options:', error);
- }
- }, [syncOptions]);
-
- // Offline-first operations
- const starItem = useCallback(async (id: string, type: 'song' | 'album' | 'artist') => {
- if (!isInitialized) throw new Error('Offline library not initialized');
-
- try {
- await offlineLibraryDB.starItem(id, type);
- await refreshStats();
-
- // Try to sync immediately if online
- if (isOnline && isConnected && api) {
- try {
- await api.star(id, type);
- await offlineLibraryDB.removeSyncOperation(`star-${id}`);
- } catch (error) {
- console.log('Failed to sync star operation immediately, will retry later:', error);
- }
- }
- } catch (error) {
- console.error('Failed to star item:', error);
- throw error;
- }
- }, [isInitialized, refreshStats, isOnline, isConnected, api]);
-
- const unstarItem = useCallback(async (id: string, type: 'song' | 'album' | 'artist') => {
- if (!isInitialized) throw new Error('Offline library not initialized');
-
- try {
- await offlineLibraryDB.unstarItem(id, type);
- await refreshStats();
-
- // Try to sync immediately if online
- if (isOnline && isConnected && api) {
- try {
- await api.unstar(id, type);
- await offlineLibraryDB.removeSyncOperation(`unstar-${id}`);
- } catch (error) {
- console.log('Failed to sync unstar operation immediately, will retry later:', error);
- }
- }
- } catch (error) {
- console.error('Failed to unstar item:', error);
- throw error;
- }
- }, [isInitialized, refreshStats, isOnline, isConnected, api]);
-
- return {
- // State
- isInitialized,
- isSyncing,
- syncProgress,
- stats,
- isOnline,
- autoSyncEnabled,
- syncOptions,
-
- // Actions
- syncLibraryFromServer,
- syncPendingOperations,
- clearOfflineData,
- updateAutoSync,
- updateSyncOptions,
- refreshStats,
- starItem,
- unstarItem,
-
- // Data access (for offline access)
- getOfflineAlbums: () => offlineLibraryDB.getAlbums(),
- getOfflineArtists: () => offlineLibraryDB.getArtists(),
- getOfflineSongs: (albumId?: string) => offlineLibraryDB.getSongs(albumId),
- getOfflinePlaylists: () => offlineLibraryDB.getPlaylists(),
- getOfflineAlbum: (id: string) => offlineLibraryDB.getAlbum(id)
- };
-}
diff --git a/hooks/use-offline-library.ts b/hooks/use-offline-library.ts
deleted file mode 100644
index b5f6cae..0000000
--- a/hooks/use-offline-library.ts
+++ /dev/null
@@ -1,538 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { offlineLibraryManager, type OfflineLibraryStats, type SyncOperation } from '@/lib/offline-library';
-import { Album, Artist, Song, Playlist } from '@/lib/navidrome';
-import { useNavidrome } from '@/app/components/NavidromeContext';
-
-export interface OfflineLibraryState {
- isInitialized: boolean;
- isOnline: boolean;
- isSyncing: boolean;
- lastSync: Date | null;
- stats: OfflineLibraryStats;
- syncProgress: {
- current: number;
- total: number;
- stage: string;
- } | null;
-}
-
-export function useOfflineLibrary() {
- // Check if we're on the client side
- const isClient = typeof window !== 'undefined';
-
- const [state, setState] = useState({
- isInitialized: false,
- isOnline: isClient ? navigator.onLine : true, // Default to true during SSR
- isSyncing: false,
- lastSync: null,
- stats: {
- albums: 0,
- artists: 0,
- songs: 0,
- playlists: 0,
- lastSync: null,
- pendingOperations: 0,
- storageSize: 0
- },
- syncProgress: null
- });
-
- const { api } = useNavidrome();
-
- // Initialize offline library
- useEffect(() => {
- const initializeOfflineLibrary = async () => {
- try {
- const initialized = await offlineLibraryManager.initialize();
- if (initialized) {
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({
- ...prev,
- isInitialized: true,
- stats,
- lastSync: stats.lastSync
- }));
- }
- } catch (error) {
- console.error('Failed to initialize offline library:', error);
- }
- };
-
- initializeOfflineLibrary();
- }, []);
-
- // Listen for online/offline events
- useEffect(() => {
- const handleOnline = () => {
- setState(prev => ({ ...prev, isOnline: true }));
- // Automatically sync when back online
- if (state.isInitialized && api) {
- syncPendingOperations();
- }
- };
-
- const handleOffline = () => {
- setState(prev => ({ ...prev, isOnline: false }));
- };
-
- window.addEventListener('online', handleOnline);
- window.addEventListener('offline', handleOffline);
-
- return () => {
- window.removeEventListener('online', handleOnline);
- window.removeEventListener('offline', handleOffline);
- };
- }, [state.isInitialized, api]);
-
- // Full library sync from server
- const syncLibraryFromServer = useCallback(async (): Promise => {
- if (!api || !state.isInitialized || state.isSyncing) return;
-
- try {
- setState(prev => ({
- ...prev,
- isSyncing: true,
- syncProgress: { current: 0, total: 100, stage: 'Starting sync...' }
- }));
-
- setState(prev => ({
- ...prev,
- syncProgress: { current: 20, total: 100, stage: 'Syncing albums...' }
- }));
-
- await offlineLibraryManager.syncFromServer(api);
-
- setState(prev => ({
- ...prev,
- syncProgress: { current: 80, total: 100, stage: 'Syncing pending operations...' }
- }));
-
- await offlineLibraryManager.syncPendingOperations(api);
-
- const stats = await offlineLibraryManager.getLibraryStats();
-
- setState(prev => ({
- ...prev,
- isSyncing: false,
- syncProgress: null,
- stats,
- lastSync: stats.lastSync
- }));
-
- } catch (error) {
- console.error('Library sync failed:', error);
- setState(prev => ({
- ...prev,
- isSyncing: false,
- syncProgress: null
- }));
- throw error;
- }
- }, [api, state.isInitialized, state.isSyncing]);
-
- // Sync only pending operations
- const syncPendingOperations = useCallback(async (): Promise => {
- if (!api || !state.isInitialized) return;
-
- try {
- await offlineLibraryManager.syncPendingOperations(api);
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({ ...prev, stats }));
- } catch (error) {
- console.error('Failed to sync pending operations:', error);
- }
- }, [api, state.isInitialized]);
-
- // Data retrieval methods (offline-first)
- const getAlbums = useCallback(async (starred?: boolean): Promise => {
- if (!state.isInitialized) return [];
-
- try {
- // Try offline first
- const offlineAlbums = await offlineLibraryManager.getAlbums(starred);
-
- // If offline data exists, return it
- if (offlineAlbums.length > 0) {
- return offlineAlbums;
- }
-
- // If no offline data and we're online, try server
- if (state.isOnline && api) {
- const serverAlbums = starred
- ? await api.getAlbums('starred')
- : await api.getAlbums('alphabeticalByName', 100);
-
- // Cache the results
- await offlineLibraryManager.storeAlbums(serverAlbums);
- return serverAlbums;
- }
-
- return [];
- } catch (error) {
- console.error('Failed to get albums:', error);
- return [];
- }
- }, [state.isInitialized, state.isOnline, api]);
-
- const getArtists = useCallback(async (starred?: boolean): Promise => {
- if (!state.isInitialized) return [];
-
- try {
- const offlineArtists = await offlineLibraryManager.getArtists(starred);
-
- if (offlineArtists.length > 0) {
- return offlineArtists;
- }
-
- if (state.isOnline && api) {
- const serverArtists = await api.getArtists();
- await offlineLibraryManager.storeArtists(serverArtists);
- return serverArtists;
- }
-
- return [];
- } catch (error) {
- console.error('Failed to get artists:', error);
- return [];
- }
- }, [state.isInitialized, state.isOnline, api]);
-
- const getAlbum = useCallback(async (albumId: string): Promise<{ album: Album; songs: Song[] } | null> => {
- if (!state.isInitialized) return null;
-
- try {
- // Try offline first
- const offlineData = await offlineLibraryManager.getAlbum(albumId);
-
- if (offlineData && offlineData.songs.length > 0) {
- return offlineData;
- }
-
- // If no offline data and we're online, try server
- if (state.isOnline && api) {
- const serverData = await api.getAlbum(albumId);
-
- // Cache the results
- await offlineLibraryManager.storeAlbums([serverData.album]);
- await offlineLibraryManager.storeSongs(serverData.songs);
-
- return serverData;
- }
-
- return offlineData;
- } catch (error) {
- console.error('Failed to get album:', error);
- return null;
- }
- }, [state.isInitialized, state.isOnline, api]);
-
- const getPlaylists = useCallback(async (): Promise => {
- if (!state.isInitialized) return [];
-
- try {
- const offlinePlaylists = await offlineLibraryManager.getPlaylists();
-
- if (offlinePlaylists.length > 0) {
- return offlinePlaylists;
- }
-
- if (state.isOnline && api) {
- const serverPlaylists = await api.getPlaylists();
- await offlineLibraryManager.storePlaylists(serverPlaylists);
- return serverPlaylists;
- }
-
- return [];
- } catch (error) {
- console.error('Failed to get playlists:', error);
- return [];
- }
- }, [state.isInitialized, state.isOnline, api]);
-
- // Search (offline-first)
- const searchOffline = useCallback(async (query: string): Promise<{ artists: Artist[]; albums: Album[]; songs: Song[] }> => {
- if (!state.isInitialized) {
- return { artists: [], albums: [], songs: [] };
- }
-
- try {
- const offlineResults = await offlineLibraryManager.searchOffline(query);
-
- // If we have good offline results, return them
- const totalResults = offlineResults.artists.length + offlineResults.albums.length + offlineResults.songs.length;
- if (totalResults > 0) {
- return offlineResults;
- }
-
- // If no offline results and we're online, try server
- if (state.isOnline && api) {
- return await api.search2(query);
- }
-
- return offlineResults;
- } catch (error) {
- console.error('Search failed:', error);
- return { artists: [], albums: [], songs: [] };
- }
- }, [state.isInitialized, state.isOnline, api]);
-
- // Offline favorites management
- const starOffline = useCallback(async (id: string, type: 'song' | 'album' | 'artist'): Promise => {
- if (!state.isInitialized) return;
-
- try {
- if (state.isOnline && api) {
- // If online, try server first
- await api.star(id, type);
- }
-
- // Always update offline data
- await offlineLibraryManager.starOffline(id, type);
-
- // Update stats
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({ ...prev, stats }));
-
- } catch (error) {
- console.error('Failed to star item:', error);
- // If server failed but we're online, still save offline for later sync
- if (state.isOnline) {
- await offlineLibraryManager.starOffline(id, type);
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({ ...prev, stats }));
- }
- throw error;
- }
- }, [state.isInitialized, state.isOnline, api]);
-
- const unstarOffline = useCallback(async (id: string, type: 'song' | 'album' | 'artist'): Promise => {
- if (!state.isInitialized) return;
-
- try {
- if (state.isOnline && api) {
- await api.unstar(id, type);
- }
-
- await offlineLibraryManager.unstarOffline(id, type);
-
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({ ...prev, stats }));
-
- } catch (error) {
- console.error('Failed to unstar item:', error);
- if (state.isOnline) {
- await offlineLibraryManager.unstarOffline(id, type);
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({ ...prev, stats }));
- }
- throw error;
- }
- }, [state.isInitialized, state.isOnline, api]);
-
- // Playlist management
- const createPlaylistOffline = useCallback(async (name: string, songIds?: string[]): Promise => {
- if (!state.isInitialized) {
- throw new Error('Offline library not initialized');
- }
-
- try {
- if (state.isOnline && api) {
- // If online, try server first
- const serverPlaylist = await api.createPlaylist(name, songIds);
- await offlineLibraryManager.storePlaylists([serverPlaylist]);
-
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({ ...prev, stats }));
-
- return serverPlaylist;
- } else {
- // If offline, create locally and queue for sync
- const offlinePlaylist = await offlineLibraryManager.createPlaylistOffline(name, songIds);
-
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({ ...prev, stats }));
-
- return offlinePlaylist;
- }
- } catch (error) {
- console.error('Failed to create playlist:', error);
-
- // If server failed but we're online, create offline version for later sync
- if (state.isOnline) {
- const offlinePlaylist = await offlineLibraryManager.createPlaylistOffline(name, songIds);
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({ ...prev, stats }));
- return offlinePlaylist;
- }
-
- throw error;
- }
- }, [state.isInitialized, state.isOnline, api]);
-
- // Scrobble (offline-capable)
- const scrobbleOffline = useCallback(async (songId: string): Promise => {
- if (!state.isInitialized) return;
-
- try {
- if (state.isOnline && api) {
- await api.scrobble(songId);
- } else {
- // Queue for later sync
- await offlineLibraryManager.addSyncOperation({
- type: 'scrobble',
- entityType: 'song',
- entityId: songId,
- data: {}
- });
-
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({ ...prev, stats }));
- }
- } catch (error) {
- console.error('Failed to scrobble:', error);
- // Queue for later sync if server failed
- await offlineLibraryManager.addSyncOperation({
- type: 'scrobble',
- entityType: 'song',
- entityId: songId,
- data: {}
- });
-
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({ ...prev, stats }));
- }
- }, [state.isInitialized, state.isOnline, api]);
-
- // Clear all offline data
- const clearOfflineData = useCallback(async (): Promise => {
- if (!state.isInitialized) return;
-
- try {
- await offlineLibraryManager.clearAllData();
-
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({
- ...prev,
- stats,
- lastSync: null
- }));
- } catch (error) {
- console.error('Failed to clear offline data:', error);
- throw error;
- }
- }, [state.isInitialized]);
-
- // Get songs with offline-first approach
- const getSongs = useCallback(async (albumId?: string, artistId?: string): Promise => {
- if (!state.isInitialized) return [];
-
- try {
- const offlineSongs = await offlineLibraryManager.getSongs(albumId, artistId);
-
- if (offlineSongs.length > 0) {
- return offlineSongs;
- }
-
- if (state.isOnline && api) {
- let serverSongs: Song[] = [];
-
- if (albumId) {
- const { songs } = await api.getAlbum(albumId);
- await offlineLibraryManager.storeSongs(songs);
- serverSongs = songs;
- } else if (artistId) {
- const { albums } = await api.getArtist(artistId);
- const allSongs: Song[] = [];
- for (const album of albums) {
- const { songs } = await api.getAlbum(album.id);
- allSongs.push(...songs);
- }
- await offlineLibraryManager.storeSongs(allSongs);
- serverSongs = allSongs;
- }
-
- return serverSongs;
- }
-
- return [];
- } catch (error) {
- console.error('Failed to get songs:', error);
- return [];
- }
- }, [api, state.isInitialized, state.isOnline]);
-
- // Queue sync operation
- const queueSyncOperation = useCallback(async (operation: Omit): Promise => {
- if (!state.isInitialized) return;
-
- const fullOperation: SyncOperation = {
- ...operation,
- id: `${operation.type}-${operation.entityId}-${Date.now()}`,
- timestamp: Date.now(),
- retryCount: 0
- };
-
- await offlineLibraryManager.addSyncOperation(fullOperation);
- await refreshStats();
- }, [state.isInitialized]);
-
- // Update playlist offline
- const updatePlaylistOffline = useCallback(async (id: string, name?: string, comment?: string, songIds?: string[]): Promise => {
- if (!state.isInitialized) return;
-
- await offlineLibraryManager.updatePlaylist(id, name, comment, songIds);
- await refreshStats();
- }, [state.isInitialized]);
-
- // Delete playlist offline
- const deletePlaylistOffline = useCallback(async (id: string): Promise => {
- if (!state.isInitialized) return;
-
- await offlineLibraryManager.deletePlaylist(id);
- await refreshStats();
- }, [state.isInitialized]);
-
- // Refresh stats
- const refreshStats = useCallback(async (): Promise => {
- if (!state.isInitialized) return;
-
- try {
- const stats = await offlineLibraryManager.getLibraryStats();
- setState(prev => ({ ...prev, stats, lastSync: stats.lastSync }));
- } catch (error) {
- console.error('Failed to refresh stats:', error);
- }
- }, [state.isInitialized]);
-
- return {
- // State
- ...state,
-
- // Sync methods
- syncLibraryFromServer,
- syncPendingOperations,
-
- // Data retrieval (offline-first)
- getAlbums,
- getArtists,
- getSongs,
- getAlbum,
- getPlaylists,
- searchOffline,
-
- // Offline operations
- starOffline,
- unstarOffline,
- createPlaylistOffline,
- updatePlaylistOffline,
- deletePlaylistOffline,
- scrobbleOffline,
- queueSyncOperation,
-
- // Management
- clearOfflineData,
- refreshStats
- };
-}
diff --git a/hooks/use-progressive-album-loading.ts b/hooks/use-progressive-album-loading.ts
index ecde93a..a29e3c3 100644
--- a/hooks/use-progressive-album-loading.ts
+++ b/hooks/use-progressive-album-loading.ts
@@ -3,8 +3,6 @@
import { useState, useEffect, useCallback } from 'react';
import { Album } from '@/lib/navidrome';
import { useNavidrome } from '@/app/components/NavidromeContext';
-import { useOfflineNavidrome } from '@/app/components/OfflineNavidromeProvider';
-import { useOfflineLibrary } from '@/hooks/use-offline-library';
const INITIAL_BATCH_SIZE = 24; // Initial number of albums to load
const BATCH_SIZE = 24; // Number of albums to load in each batch
@@ -18,8 +16,6 @@ export function useProgressiveAlbumLoading(sortBy: AlbumSortOption = 'alphabetic
const [hasMore, setHasMore] = useState(true);
const [currentOffset, setCurrentOffset] = useState(0);
const { api } = useNavidrome();
- const offlineApi = useOfflineNavidrome();
- const offlineLibrary = useOfflineLibrary();
const [error, setError] = useState(null);
// Load initial batch
@@ -36,84 +32,19 @@ export function useProgressiveAlbumLoading(sortBy: AlbumSortOption = 'alphabetic
};
}, [sortBy]);
- // We'll define the scroll listener after defining loadMoreAlbums
-
// Load initial batch of albums
const loadInitialBatch = useCallback(async () => {
- if (!api && !offlineLibrary.isInitialized) return;
+ if (!api) return;
setIsLoading(true);
setError(null);
try {
- let albumData: Album[] = [];
-
- // Try offline-first approach
- if (offlineLibrary.isInitialized) {
- try {
- // For starred albums, use the starred parameter
- if (sortBy === 'starred') {
- albumData = await offlineApi.getAlbums(true);
- } else {
- albumData = await offlineApi.getAlbums(false);
-
- // Apply client-side sorting since offline API might not support all sort options
- if (sortBy === 'newest') {
- albumData.sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime());
- } else if (sortBy === 'alphabeticalByArtist') {
- albumData.sort((a, b) => a.artist.localeCompare(b.artist));
- } else if (sortBy === 'alphabeticalByName') {
- albumData.sort((a, b) => a.name.localeCompare(b.name));
- } else if (sortBy === 'recent') {
- // Sort by recently played - if we have timestamps
- const recentlyPlayedMap = new Map();
- const recentlyPlayed = localStorage.getItem('recently-played-albums');
- if (recentlyPlayed) {
- try {
- const parsed = JSON.parse(recentlyPlayed);
- Object.entries(parsed).forEach(([id, timestamp]) => {
- recentlyPlayedMap.set(id, timestamp as number);
- });
- albumData.sort((a, b) => {
- const timestampA = recentlyPlayedMap.get(a.id) || 0;
- const timestampB = recentlyPlayedMap.get(b.id) || 0;
- return timestampB - timestampA;
- });
- } catch (error) {
- console.error('Error parsing recently played albums:', error);
- }
- }
- }
- }
-
- // If we got albums offline and it's non-empty, use that
- if (albumData && albumData.length > 0) {
- // Just take the initial batch for consistent behavior
- const initialBatch = albumData.slice(0, INITIAL_BATCH_SIZE);
- setAlbums(initialBatch);
- setCurrentOffset(initialBatch.length);
- setHasMore(albumData.length > initialBatch.length);
- setIsLoading(false);
- return;
- }
- } catch (offlineError) {
- console.error('Error loading albums from offline storage:', offlineError);
- // Continue to online API as fallback
- }
- }
-
- // Fall back to online API if needed
- if (api) {
- albumData = await api.getAlbums(sortBy, INITIAL_BATCH_SIZE, 0);
- setAlbums(albumData);
- setCurrentOffset(albumData.length);
- // Assume there are more unless we got fewer than we asked for
- setHasMore(albumData.length >= INITIAL_BATCH_SIZE);
- } else {
- // No API available
- setAlbums([]);
- setHasMore(false);
- }
+ const albumData = await api.getAlbums(sortBy, INITIAL_BATCH_SIZE, 0);
+ setAlbums(albumData);
+ setCurrentOffset(albumData.length);
+ // Assume there are more unless we got fewer than we asked for
+ setHasMore(albumData.length >= INITIAL_BATCH_SIZE);
} catch (err) {
console.error('Failed to load initial albums batch:', err);
setError(err instanceof Error ? err.message : 'Unknown error loading albums');
@@ -122,81 +53,20 @@ export function useProgressiveAlbumLoading(sortBy: AlbumSortOption = 'alphabetic
} finally {
setIsLoading(false);
}
- }, [api, offlineApi, offlineLibrary, sortBy]);
+ }, [api, sortBy]);
// Load more albums when scrolling
const loadMoreAlbums = useCallback(async () => {
- if (isLoading || !hasMore) return;
+ if (isLoading || !hasMore || !api) return;
setIsLoading(true);
try {
- let newAlbums: Album[] = [];
-
- // Try offline-first approach (if we already have offline data)
- if (offlineLibrary.isInitialized && albums.length > 0) {
- try {
- // For starred albums, use the starred parameter
- let allAlbums: Album[] = [];
- if (sortBy === 'starred') {
- allAlbums = await offlineApi.getAlbums(true);
- } else {
- allAlbums = await offlineApi.getAlbums(false);
-
- // Apply client-side sorting
- if (sortBy === 'newest') {
- allAlbums.sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime());
- } else if (sortBy === 'alphabeticalByArtist') {
- allAlbums.sort((a, b) => a.artist.localeCompare(b.artist));
- } else if (sortBy === 'alphabeticalByName') {
- allAlbums.sort((a, b) => a.name.localeCompare(b.name));
- } else if (sortBy === 'recent') {
- // Sort by recently played - if we have timestamps
- const recentlyPlayedMap = new Map();
- const recentlyPlayed = localStorage.getItem('recently-played-albums');
- if (recentlyPlayed) {
- try {
- const parsed = JSON.parse(recentlyPlayed);
- Object.entries(parsed).forEach(([id, timestamp]) => {
- recentlyPlayedMap.set(id, timestamp as number);
- });
- allAlbums.sort((a, b) => {
- const timestampA = recentlyPlayedMap.get(a.id) || 0;
- const timestampB = recentlyPlayedMap.get(b.id) || 0;
- return timestampB - timestampA;
- });
- } catch (error) {
- console.error('Error parsing recently played albums:', error);
- }
- }
- }
- }
-
- // Slice the next batch from the offline data
- if (allAlbums && allAlbums.length > currentOffset) {
- newAlbums = allAlbums.slice(currentOffset, currentOffset + BATCH_SIZE);
- setAlbums(prev => [...prev, ...newAlbums]);
- setCurrentOffset(currentOffset + newAlbums.length);
- setHasMore(allAlbums.length > currentOffset + newAlbums.length);
- setIsLoading(false);
- return;
- }
- } catch (offlineError) {
- console.error('Error loading more albums from offline storage:', offlineError);
- // Continue to online API as fallback
- }
- }
-
- // Fall back to online API
- if (api) {
- newAlbums = await api.getAlbums(sortBy, BATCH_SIZE, currentOffset);
- setAlbums(prev => [...prev, ...newAlbums]);
- setCurrentOffset(currentOffset + newAlbums.length);
- // If we get fewer albums than we asked for, we've reached the end
- setHasMore(newAlbums.length >= BATCH_SIZE);
- } else {
- setHasMore(false);
- }
+ const newAlbums = await api.getAlbums(sortBy, BATCH_SIZE, currentOffset);
+ setAlbums(prev => [...prev, ...newAlbums]);
+ setCurrentOffset(currentOffset + newAlbums.length);
+ // If we get fewer albums than we asked for, we've reached the end
+ setHasMore(newAlbums.length >= BATCH_SIZE);
} catch (err) {
console.error('Failed to load more albums:', err);
setError(err instanceof Error ? err.message : 'Unknown error loading more albums');
@@ -204,7 +74,7 @@ export function useProgressiveAlbumLoading(sortBy: AlbumSortOption = 'alphabetic
} finally {
setIsLoading(false);
}
- }, [api, offlineApi, offlineLibrary, albums, currentOffset, isLoading, hasMore, sortBy]);
+ }, [api, currentOffset, isLoading, hasMore, sortBy]);
// Manual refresh (useful for pull-to-refresh functionality)
const refreshAlbums = useCallback(() => {
@@ -214,7 +84,7 @@ export function useProgressiveAlbumLoading(sortBy: AlbumSortOption = 'alphabetic
loadInitialBatch();
}, [loadInitialBatch]);
- // Setup scroll listener after function declarations
+ // Setup scroll listener
useEffect(() => {
const handleScroll = () => {
// Don't trigger if already loading
@@ -231,7 +101,7 @@ export function useProgressiveAlbumLoading(sortBy: AlbumSortOption = 'alphabetic
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
- }, [isLoading, hasMore, currentOffset, loadMoreAlbums]);
+ }, [isLoading, hasMore, loadMoreAlbums]);
return {
albums,