angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove PostHog analytics and update dependencies to latest minor versions

Browse Source 
- Remove posthog-js and posthog-node dependencies
- Delete PostHogProvider component and lib/posthog.ts
- Remove PostHog configuration from environment files
- Remove PostHog rewrites from next.config.mjs
- Update all npm subdependencies to latest minor versions
- Update @types/react and @types/react-dom overrides to 19.2.9 and 19.2.3
This commit is contained in:
angel
2026-01-25 00:12:04 +00:00
committed by GitHub
parent 52a00ca899
commit a0051576c6
21 changed files with 2021 additions and 3030 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.docker
View File

@@ -11,10 +11,6 @@ PORT=3000
# NAVIDROME_USERNAME=your_username
# NAVIDROME_PASSWORD=your_password
# PostHog Analytics (optional)
POSTHOG_KEY=
POSTHOG_HOST=
# Example for external Navidrome server:
# NAVIDROME_URL=https://your-navidrome-server.com
# NAVIDROME_USERNAME=your_username

6
.env.example
View File

@@ -3,15 +3,9 @@ NEXT_PUBLIC_NAVIDROME_URL=http://localhost:4533
NEXT_PUBLIC_NAVIDROME_USERNAME=your_username
NEXT_PUBLIC_NAVIDROME_PASSWORD=your_password
# PostHog Analytics (optional)
NEXT_PUBLIC_POSTHOG_KEY=your_posthog_key
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
# For Docker deployment, use these variable names in your .env file:
# NAVIDROME_URL=https://your-navidrome-server.com
# NAVIDROME_USERNAME=your_username
# NAVIDROME_PASSWORD=your_password
# POSTHOG_KEY=your_posthog_key
# POSTHOG_HOST=https://us.i.posthog.com
# HOST_PORT=3000
# PORT=3000

4
DOCKER.md
View File

@@ -65,8 +65,6 @@ When running with Docker, use these variable names (without the `NEXT_PUBLIC_` p
- `NAVIDROME_PASSWORD`: Navidrome password (optional - app will prompt if not set)
- `PORT`: Port for the application to listen on (default: `3000`)
- `HOST_PORT`: Host port to map to container port (docker-compose only, default: `3000`)
- `POSTHOG_KEY`: PostHog analytics key (optional)
- `POSTHOG_HOST`: PostHog analytics host (optional)
### Development Environment Variables
@@ -75,8 +73,6 @@ For local development (non-Docker), use these variable names:
- `NEXT_PUBLIC_NAVIDROME_URL`: URL of your Navidrome server
- `NEXT_PUBLIC_NAVIDROME_USERNAME`: Navidrome username
- `NEXT_PUBLIC_NAVIDROME_PASSWORD`: Navidrome password
- `NEXT_PUBLIC_POSTHOG_KEY`: PostHog analytics key (optional)
- `NEXT_PUBLIC_POSTHOG_HOST`: PostHog analytics host (optional)
**Note**: Docker deployment uses a runtime replacement mechanism to inject environment variables, while development uses Next.js's built-in `NEXT_PUBLIC_` variables.

2
Dockerfile
View File

@@ -24,8 +24,6 @@ COPY README.md /app/
ENV NEXT_PUBLIC_NAVIDROME_URL=NEXT_PUBLIC_NAVIDROME_URL
ENV NEXT_PUBLIC_NAVIDROME_USERNAME=NEXT_PUBLIC_NAVIDROME_USERNAME
ENV NEXT_PUBLIC_NAVIDROME_PASSWORD=NEXT_PUBLIC_NAVIDROME_PASSWORD
ENV NEXT_PUBLIC_POSTHOG_KEY=NEXT_PUBLIC_POSTHOG_KEY
ENV NEXT_PUBLIC_POSTHOG_HOST=NEXT_PUBLIC_POSTHOG_HOST
ENV PORT=3000
# Generate git commit hash for build info (fallback if not available)

1
README.md
View File

@@ -19,7 +19,6 @@ This is a "Modern" Navidrome (or Subsonic) client built with [Next.js](https://n
- **Audio Player** with queue management
- **Scrobbling** - Track your listening history
- **Playlist Management** - Create and manage playlists
- **Caching** - Cache/Offline save your server
### Preview
![preview](https://github.com/sillyangel/mice/blob/main/public/home-preview.png?raw=true)

560
app/components/CacheManagement.tsx
View File

@@ -1,560 +0,0 @@
'use client';
import React, { useState, useEffect, useCallback } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Progress } from '@/components/ui/progress';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
import {
Database,
Trash2,
RefreshCw,
HardDrive,
Download,
Wifi,
WifiOff,
X,
Music,
Globe,
Settings
} from 'lucide-react';
import { CacheManager } from '@/lib/cache';
import { useOfflineDownloads, OfflineItem } from '@/hooks/use-offline-downloads';
import { useAudioPlayer, Track } from '@/app/components/AudioPlayerContext';
export function CacheManagement() {
const [cacheStats, setCacheStats] = useState({
total: 0,
expired: 0,
size: '0 B'
});
const [isClearing, setIsClearing] = useState(false);
const [lastCleared, setLastCleared] = useState<string | null>(null);
const [offlineItems, setOfflineItems] = useState<OfflineItem[]>([]);
const [offlineMode, setOfflineMode] = useState(false);
const [autoDownloadQueue, setAutoDownloadQueue] = useState(false);
const [isDownloadingQueue, setIsDownloadingQueue] = useState(false);
const {
isSupported: isOfflineSupported,
isInitialized: isOfflineInitialized,
downloadProgress,
offlineStats,
downloadQueue,
enableOfflineMode,
deleteOfflineContent,
getOfflineItems,
clearDownloadProgress
} = useOfflineDownloads();
const { queue } = useAudioPlayer();
const loadCacheStats = () => {
if (typeof window === 'undefined') return;
let total = 0;
let expired = 0;
let totalSize = 0;
const now = Date.now();
// Check localStorage for cache entries
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && (key.startsWith('cache-') || key.startsWith('navidrome-cache-') || key.startsWith('library-cache-'))) {
total++;
const value = localStorage.getItem(key);
if (value) {
totalSize += key.length + value.length;
try {
const parsed = JSON.parse(value);
if (parsed.expiresAt && now > parsed.expiresAt) {
expired++;
}
} catch (error) {
expired++;
}
}
}
}
// Convert bytes to human readable format
const formatSize = (bytes: number): string => {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
setCacheStats({
total,
expired,
size: formatSize(totalSize * 2) // *2 for UTF-16 encoding
});
};
const loadOfflineItems = useCallback(async () => {
if (isOfflineInitialized) {
const items = await getOfflineItems();
setOfflineItems(items);
}
}, [isOfflineInitialized, getOfflineItems]);
useEffect(() => {
loadCacheStats();
loadOfflineItems();
// Load offline mode settings
const storedOfflineMode = localStorage.getItem('offline-mode-enabled');
const storedAutoDownload = localStorage.getItem('auto-download-queue');
if (storedOfflineMode) {
setOfflineMode(JSON.parse(storedOfflineMode));
}
if (storedAutoDownload) {
setAutoDownloadQueue(JSON.parse(storedAutoDownload));
}
// Check if there's a last cleared timestamp
const lastClearedTime = localStorage.getItem('cache-last-cleared');
if (lastClearedTime) {
setLastCleared(new Date(parseInt(lastClearedTime)).toLocaleString());
}
}, [loadOfflineItems]);
const handleClearCache = async () => {
setIsClearing(true);
try {
// Clear all cache using the CacheManager
CacheManager.clearAll();
// Also clear any other cache-related localStorage items
if (typeof window !== 'undefined') {
const keys = Object.keys(localStorage);
keys.forEach(key => {
if (key.startsWith('cache-') ||
key.startsWith('navidrome-cache-') ||
key.startsWith('library-cache-') ||
key.includes('album') ||
key.includes('artist') ||
key.includes('song')) {
localStorage.removeItem(key);
}
});
// Set last cleared timestamp
localStorage.setItem('cache-last-cleared', Date.now().toString());
}
// Update stats
loadCacheStats();
setLastCleared(new Date().toLocaleString());
// Show success feedback
setTimeout(() => {
setIsClearing(false);
}, 1000);
} catch (error) {
console.error('Failed to clear cache:', error);
setIsClearing(false);
}
};
const handleCleanExpired = () => {
if (typeof window === 'undefined') return;
const now = Date.now();
const keysToRemove: string[] = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && (key.startsWith('cache-') || key.startsWith('navidrome-cache-') || key.startsWith('library-cache-'))) {
try {
const value = localStorage.getItem(key);
if (value) {
const parsed = JSON.parse(value);
if (parsed.expiresAt && now > parsed.expiresAt) {
keysToRemove.push(key);
}
}
} catch (error) {
// Invalid cache item, remove it
keysToRemove.push(key);
}
}
}
keysToRemove.forEach(key => localStorage.removeItem(key));
loadCacheStats();
};
const handleDeleteOfflineItem = async (item: OfflineItem) => {
try {
await deleteOfflineContent(item.id, item.type);
loadOfflineItems();
loadCacheStats();
} catch (error) {
console.error('Failed to delete offline item:', error);
}
};
// Convert Track to Song format for offline downloads
const convertTrackToSong = (track: Track) => ({
id: track.id,
parent: track.albumId || '',
isDir: false,
title: track.name,
album: track.album,
artist: track.artist,
size: 0, // Will be filled when downloaded
contentType: 'audio/mpeg',
suffix: 'mp3',
duration: track.duration,
path: '',
created: new Date().toISOString(),
albumId: track.albumId,
artistId: track.artistId,
type: 'music'
});
const handleOfflineModeToggle = async (enabled: boolean) => {
setOfflineMode(enabled);
localStorage.setItem('offline-mode-enabled', JSON.stringify(enabled));
if (enabled && isOfflineSupported) {
try {
const convertedQueue = queue.map(convertTrackToSong);
await enableOfflineMode({
forceOffline: enabled,
autoDownloadQueue,
currentQueue: convertedQueue
});
} catch (error) {
console.error('Failed to enable offline mode:', error);
}
}
};
const handleAutoDownloadToggle = async (enabled: boolean) => {
setAutoDownloadQueue(enabled);
localStorage.setItem('auto-download-queue', JSON.stringify(enabled));
if (enabled && isOfflineSupported) {
const convertedQueue = queue.map(convertTrackToSong);
await enableOfflineMode({
forceOffline: offlineMode,
autoDownloadQueue: enabled,
currentQueue: convertedQueue
});
}
};
const handleDownloadCurrentQueue = async () => {
if (!queue.length || !isOfflineSupported) return;
setIsDownloadingQueue(true);
try {
const convertedQueue = queue.map(convertTrackToSong);
await downloadQueue(convertedQueue);
loadOfflineItems();
} catch (error) {
console.error('Failed to download queue:', error);
} finally {
setIsDownloadingQueue(false);
}
};
const formatSize = (bytes: number): string => {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
return (
<Card className="break-inside-avoid py-5">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Database className="h-5 w-5" />
Cache & Offline Downloads
</CardTitle>
<CardDescription>
Manage application cache and offline content for better performance
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
{/* Regular Cache Statistics */}
<div>
<h4 className="text-sm font-medium mb-3">Application Cache</h4>
<div className="grid grid-cols-3 gap-4 text-center">
<div className="space-y-1">
<p className="text-2xl font-bold">{cacheStats.total}</p>
<p className="text-xs text-muted-foreground">Total Items</p>
</div>
<div className="space-y-1">
<p className="text-2xl font-bold">{cacheStats.expired}</p>
<p className="text-xs text-muted-foreground">Expired</p>
</div>
<div className="space-y-1">
<p className="text-2xl font-bold">{cacheStats.size}</p>
<p className="text-xs text-muted-foreground">Storage Used</p>
</div>
</div>
{/* Cache Actions */}
<div className="space-y-2 mt-4">
<div className="flex gap-2">
<Button
onClick={handleClearCache}
disabled={isClearing}
variant="destructive"
size="sm"
className="flex-1"
>
{isClearing ? (
<RefreshCw className="h-4 w-4 mr-2 animate-spin" />
) : (
<Trash2 className="h-4 w-4 mr-2" />
)}
{isClearing ? 'Clearing...' : 'Clear All Cache'}
</Button>
<Button
onClick={handleCleanExpired}
variant="outline"
size="sm"
className="flex-1"
>
<HardDrive className="h-4 w-4 mr-2" />
Clean Expired
</Button>
</div>
<Button
onClick={loadCacheStats}
variant="ghost"
size="sm"
className="w-full"
>
<RefreshCw className="h-4 w-4 mr-2" />
Refresh Stats
</Button>
</div>
</div>
<Separator />
{/* Offline Downloads Section */}
<div>
<h4 className="text-sm font-medium mb-3 flex items-center gap-2">
{isOfflineSupported ? (
<Wifi className="h-4 w-4 text-green-600" />
) : (
<WifiOff className="h-4 w-4 text-red-600" />
)}
Offline Downloads
{!isOfflineSupported && (
<span className="text-xs text-muted-foreground">(Limited Support)</span>
)}
</h4>
{isOfflineSupported && (
<div className="grid grid-cols-3 gap-4 text-center mb-4">
<div className="space-y-1">
<p className="text-lg font-bold">{offlineStats.downloadedAlbums}</p>
<p className="text-xs text-muted-foreground">Albums</p>
</div>
<div className="space-y-1">
<p className="text-lg font-bold">{offlineStats.downloadedSongs}</p>
<p className="text-xs text-muted-foreground">Songs</p>
</div>
<div className="space-y-1">
<p className="text-lg font-bold">{formatSize(offlineStats.totalSize)}</p>
<p className="text-xs text-muted-foreground">Total Size</p>
</div>
</div>
)}
{/* Offline Mode Controls */}
{isOfflineSupported && (
<div className="space-y-4 mb-4 p-3 bg-muted/50 rounded-lg">
<div className="flex items-center justify-between">
<div className="space-y-1">
<Label htmlFor="offline-mode" className="text-sm font-medium">
Offline Mode
</Label>
<p className="text-xs text-muted-foreground">
Force app to use only cached content (good for slow connections)
</p>
</div>
<Switch
id="offline-mode"
checked={offlineMode}
onCheckedChange={handleOfflineModeToggle}
/>
</div>
<div className="flex items-center justify-between">
<div className="space-y-1">
<Label htmlFor="auto-download" className="text-sm font-medium">
Auto-download Queue
</Label>
<p className="text-xs text-muted-foreground">
Automatically download songs when added to queue
</p>
</div>
<Switch
id="auto-download"
checked={autoDownloadQueue}
onCheckedChange={handleAutoDownloadToggle}
/>
</div>
{/* Queue Download Controls */}
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">Current Queue</span>
<span className="text-xs text-muted-foreground">
{queue.length} song{queue.length !== 1 ? 's' : ''}
</span>
</div>
{queue.length > 0 && (
<Button
onClick={handleDownloadCurrentQueue}
disabled={isDownloadingQueue || downloadProgress.status === 'downloading'}
size="sm"
className="w-full"
variant="outline"
>
{isDownloadingQueue ? (
<RefreshCw className="h-4 w-4 mr-2 animate-spin" />
) : (
<Music className="h-4 w-4 mr-2" />
)}
{isDownloadingQueue ? 'Downloading...' : 'Download Current Queue'}
</Button>
)}
{queue.length === 0 && (
<p className="text-xs text-muted-foreground text-center py-2">
Add songs to queue to enable downloading
</p>
)}
</div>
</div>
)}
{/* Download Progress */}
{downloadProgress.status !== 'idle' && (
<div className="space-y-2 mb-4 p-3 bg-muted rounded-lg">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">
{downloadProgress.status === 'downloading' && 'Downloading...'}
{downloadProgress.status === 'starting' && 'Starting download...'}
{downloadProgress.status === 'complete' && 'Download complete!'}
{downloadProgress.status === 'error' && 'Download failed'}
</span>
<Button
variant="ghost"
size="sm"
onClick={clearDownloadProgress}
className="h-6 w-6 p-0"
>
<X className="h-4 w-4" />
</Button>
</div>
{downloadProgress.total > 0 && (
<div className="space-y-1">
<Progress
value={(downloadProgress.completed / downloadProgress.total) * 100}
className="h-2"
/>
<div className="flex justify-between text-xs text-muted-foreground">
<span>
{downloadProgress.completed} / {downloadProgress.total} songs
{downloadProgress.failed > 0 && ` (${downloadProgress.failed} failed)`}
</span>
<span>{Math.round((downloadProgress.completed / downloadProgress.total) * 100)}%</span>
</div>
</div>
)}
{downloadProgress.currentSong && (
<p className="text-xs text-muted-foreground truncate">
Current: {downloadProgress.currentSong}
</p>
)}
{downloadProgress.error && (
<p className="text-xs text-red-600">
Error: {downloadProgress.error}
</p>
)}
</div>
)}
{/* Offline Items List */}
{offlineItems.length > 0 && (
<div className="space-y-2">
<Label className="text-xs font-medium">Downloaded Content</Label>
<div className="max-h-40 overflow-y-auto space-y-1">
{offlineItems.map((item) => (
<div
key={`${item.type}-${item.id}`}
className="flex items-center justify-between p-2 bg-muted rounded text-sm"
>
<div className="flex items-center gap-2 min-w-0 flex-1">
<Download className="h-3 w-3 text-green-600 flex-shrink-0" />
<div className="min-w-0 flex-1">
<p className="font-medium truncate">{item.name}</p>
<p className="text-xs text-muted-foreground truncate">
{item.artist} • {item.type}
</p>
</div>
</div>
<Button
variant="ghost"
size="sm"
onClick={() => handleDeleteOfflineItem(item)}
className="h-6 w-6 p-0 flex-shrink-0"
>
<X className="h-3 w-3" />
</Button>
</div>
))}
</div>
</div>
)}
{offlineItems.length === 0 && (
<div className="text-center py-8 text-muted-foreground">
<Download className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p className="text-sm">No offline content downloaded</p>
<p className="text-xs">Visit an album page to download content for offline listening</p>
</div>
)}
</div>
{/* Cache Info */}
<div className="text-sm text-muted-foreground space-y-1">
<p>Cache includes albums, artists, songs, and image URLs to improve loading times.</p>
{isOfflineSupported && (
<p>Offline downloads use Service Workers for true offline audio playback.</p>
)}
{!isOfflineSupported && (
<p>Limited offline support - only metadata cached without Service Worker support.</p>
)}
{lastCleared && (
<p>Last cleared: {lastCleared}</p>
)}
</div>
</CardContent>
</Card>
);
}

66
app/components/PostHogProvider.tsx
View File

@@ -1,66 +0,0 @@
"use client"
import posthog from "posthog-js"
import { PostHogProvider as PHProvider, usePostHog } from "posthog-js/react"
import { Suspense, useEffect } from "react"
import { usePathname, useSearchParams } from "next/navigation"
function PathnameTracker() {
const posthogClient = usePostHog()
const pathname = usePathname()
const searchParams = useSearchParams()
useEffect(() => {
// Only track if PostHog client is available and properly initialized
if (posthogClient && typeof posthogClient.capture === 'function') {
posthogClient.capture('$pageview', {
path: pathname + (searchParams.toString() ? `?${searchParams.toString()}` : ''),
})
}
}, [posthogClient, pathname, searchParams])
return null
}
function SuspendedPostHogPageView() {
return (
<Suspense fallback={null}>
<PathnameTracker />
</Suspense>
)
}
export function PostHogProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
// Only initialize PostHog if we have a valid key
if (posthogKey && posthogKey.trim() !== '') {
posthog.init(posthogKey, {
api_host: "/ingest",
ui_host: "https://us.posthog.com",
capture_pageview: 'history_change',
capture_pageleave: true,
capture_exceptions: true,
debug: process.env.NODE_ENV === "development",
});
} else {
console.log('PostHog not initialized - NEXT_PUBLIC_POSTHOG_KEY not provided');
}
}, [])
// Only provide PostHog context if we have a key
const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
if (posthogKey && posthogKey.trim() !== '') {
return (
<PHProvider client={posthog}>
<SuspendedPostHogPageView />
{children}
</PHProvider>
);
}
// Return children without PostHog context if no key is provided
return <>{children}</>;
}

41
app/components/RootLayoutClient.tsx
View File

@@ -5,7 +5,6 @@ import { AudioPlayerProvider } from "../components/AudioPlayerContext";
import { OfflineNavidromeProvider, useOfflineNavidrome } from "../components/OfflineNavidromeProvider";
import { NavidromeConfigProvider } from "../components/NavidromeConfigContext";
import { ThemeProvider } from "../components/ThemeProvider";
import { PostHogProvider } from "../components/PostHogProvider";
import { WhatsNewPopup } from "../components/WhatsNewPopup";
import Ihateserverside from "./ihateserverside";
import DynamicViewportTheme from "./DynamicViewportTheme";
@@ -101,26 +100,24 @@ function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
export default function RootLayoutClient({ children }: { children: React.ReactNode }) {
return (
<PostHogProvider>
<ThemeProvider>
<DynamicViewportTheme />
<ThemeColorHandler />
<ServiceWorkerRegistration />
<NavidromeConfigProvider>
<OfflineNavidromeProvider>
<NavidromeErrorBoundary>
<AudioPlayerProvider>
<GlobalSearchProvider>
<Ihateserverside>
<PageTransition>{children}</PageTransition>
</Ihateserverside>
<WhatsNewPopup />
</GlobalSearchProvider>
</AudioPlayerProvider>
</NavidromeErrorBoundary>
</OfflineNavidromeProvider>
</NavidromeConfigProvider>
</ThemeProvider>
</PostHogProvider>
<ThemeProvider>
<DynamicViewportTheme />
<ThemeColorHandler />
<ServiceWorkerRegistration />
<NavidromeConfigProvider>
<OfflineNavidromeProvider>
<NavidromeErrorBoundary>
<AudioPlayerProvider>
<GlobalSearchProvider>
<Ihateserverside>
<PageTransition>{children}</PageTransition>
</Ihateserverside>
<WhatsNewPopup />
</GlobalSearchProvider>
</AudioPlayerProvider>
</NavidromeErrorBoundary>
</OfflineNavidromeProvider>
</NavidromeConfigProvider>
</ThemeProvider>
);
}

1
app/components/WhatsNewPopup.tsx
View File

@@ -47,7 +47,6 @@ const CHANGELOG = [
'Enhanced Home page layout and content',
'Themes updated to use OKLCH (from HSL)',
'All themes updated (light themes look similar)',
'Caching system added (incomplete)',
'Skeleton loading added across all pages'
],
fixes: [

6
app/settings/page.tsx
View File

@@ -14,7 +14,6 @@ import { useStandaloneLastFm } from '@/hooks/use-standalone-lastfm';
import { useSidebarShortcuts, SidebarShortcutType } from '@/hooks/use-sidebar-shortcuts';
import { SidebarCustomization } from '@/app/components/SidebarCustomization';
import { SettingsManagement } from '@/app/components/SettingsManagement';
import { CacheManagement } from '@/app/components/CacheManagement';
import EnhancedOfflineManager from '@/app/components/EnhancedOfflineManager';
import { AutoTaggingSettings } from '@/app/components/AutoTaggingSettings';
import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog, FaTags } from 'react-icons/fa';
@@ -779,11 +778,6 @@ const SettingsPage = () => {
<SettingsManagement />
</div>
{/* Cache Management */}
<div className="break-inside-avoid mb-6">
<CacheManagement />
</div>
{/* Offline Library Management */}
<div className="break-inside-avoid mb-6">
<EnhancedOfflineManager />

4
docker-compose.example.yml
View File

@@ -12,10 +12,6 @@ services:
# - NAVIDROME_USERNAME=user
# - NAVIDROME_PASSWORD=password
# # PostHog Analytics
# - POSTHOG_KEY=phc_Sa39J7754MwaHrPxYiWnWETVSD3g1cU4nOplMGczRE9
# - POSTHOG_HOST=https://us.i.posthog.com
# Application Port
- PORT=40625

2
docker-compose.override.yml.example
View File

@@ -14,8 +14,6 @@ services:
- NEXT_PUBLIC_NAVIDROME_URL=http://localhost:4533
- NEXT_PUBLIC_NAVIDROME_USERNAME=admin
- NEXT_PUBLIC_NAVIDROME_PASSWORD=admin
- NEXT_PUBLIC_POSTHOG_KEY=${POSTHOG_KEY:-}
- NEXT_PUBLIC_POSTHOG_HOST=${POSTHOG_HOST:-}
- PORT=${PORT:-3000}
# Mount source code for development (optional)

4
docker-compose.yml
View File

@@ -13,10 +13,6 @@ services:
- NEXT_PUBLIC_NAVIDROME_USERNAME=${NAVIDROME_USERNAME:-}
- NEXT_PUBLIC_NAVIDROME_PASSWORD=${NAVIDROME_PASSWORD:-}
# PostHog Analytics (optional)
# - NEXT_PUBLIC_POSTHOG_KEY=phc_Sa39J7754MwaHrPxYiWnWETVSD3g1cU4nOplMGczRE9
# - NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
# Application Port
- PORT=40625

0
hooks/use-cached-image.ts
View File

110
hooks/use-library-cache.ts
View File

@@ -1,110 +0,0 @@
'use client';
import { useState, useEffect } from 'react';
interface LibraryCacheItem<T> {
data: T;
timestamp: number;
expiresAt: number;
}
export function useLibraryCache<T>(
key: string,
fetcher: () => Promise<T>,
ttl: number = 30 * 60 * 1000 // 30 minutes default
) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
const getCacheKey = (key: string) => `library-cache-${key}`;
const getFromCache = (key: string): T | null => {
if (typeof window === 'undefined') return null;
try {
const cached = localStorage.getItem(getCacheKey(key));
if (!cached) return null;
const item: LibraryCacheItem<T> = JSON.parse(cached);
// Check if expired
if (Date.now() > item.expiresAt) {
localStorage.removeItem(getCacheKey(key));
return null;
}
return item.data;
} catch (error) {
console.warn('Failed to get cached data:', error);
localStorage.removeItem(getCacheKey(key));
return null;
}
};
const setToCache = (key: string, data: T, ttl: number) => {
if (typeof window === 'undefined') return;
const item: LibraryCacheItem<T> = {
data,
timestamp: Date.now(),
expiresAt: Date.now() + ttl
};
try {
localStorage.setItem(getCacheKey(key), JSON.stringify(item));
} catch (error) {
console.warn('Failed to cache data:', error);
}
};
useEffect(() => {
const loadData = async () => {
setLoading(true);
setError(null);
// Check cache first
const cached = getFromCache(key);
if (cached) {
setData(cached);
setLoading(false);
return;
}
// Fetch fresh data
try {
const result = await fetcher();
setData(result);
setToCache(key, result, ttl);
} catch (err) {
setError(err as Error);
} finally {
setLoading(false);
}
};
loadData();
}, [key, ttl]);
const refresh = async () => {
setLoading(true);
setError(null);
try {
const result = await fetcher();
setData(result);
setToCache(key, result, ttl);
} catch (err) {
setError(err as Error);
} finally {
setLoading(false);
}
};
const clearCache = () => {
if (typeof window === 'undefined') return;
localStorage.removeItem(getCacheKey(key));
};
return { data, loading, error, refresh, clearCache };
}

258
lib/cache.ts
View File

@@ -1,258 +0,0 @@
'use client';
// Types for caching (simplified versions to avoid circular imports)
interface Album {
id: string;
name: string;
artist: string;
artistId: string;
coverArt?: string;
songCount: number;
duration: number;
playCount?: number;
created: string;
starred?: string;
year?: number;
genre?: string;
}
interface Artist {
id: string;
name: string;
albumCount: number;
starred?: string;
coverArt?: string;
}
interface Song {
id: string;
parent: string;
isDir: boolean;
title: string;
artist?: string;
artistId?: string;
album?: string;
albumId?: string;
year?: number;
genre?: string;
coverArt?: string;
size?: number;
contentType?: string;
suffix?: string;
starred?: string;
duration?: number;
bitRate?: number;
path?: string;
playCount?: number;
created: string;
}
export interface CacheItem<T> {
data: T;
timestamp: number;
expiresAt: number;
}
export interface CacheConfig {
defaultTTL: number; // Time to live in milliseconds
maxSize: number; // Maximum number of items in cache
}
class Cache<T> {
private cache = new Map<string, CacheItem<T>>();
private config: CacheConfig;
constructor(config: CacheConfig = { defaultTTL: 24 * 60 * 60 * 1000, maxSize: 1000 }) {
this.config = config;
}
set(key: string, data: T, ttl?: number): void {
const now = Date.now();
const expiresAt = now + (ttl || this.config.defaultTTL);
// Remove expired items before adding new one
this.cleanup();
// If cache is at max size, remove oldest item
if (this.cache.size >= this.config.maxSize) {
const oldestKey = this.cache.keys().next().value;
if (oldestKey) {
this.cache.delete(oldestKey);
}
}
this.cache.set(key, {
data,
timestamp: now,
expiresAt
});
}
get(key: string): T | null {
const item = this.cache.get(key);
if (!item) return null;
// Check if item has expired
if (Date.now() > item.expiresAt) {
this.cache.delete(key);
return null;
}
return item.data;
}
has(key: string): boolean {
return this.get(key) !== null;
}
delete(key: string): boolean {
return this.cache.delete(key);
}
clear(): void {
this.cache.clear();
}
size(): number {
this.cleanup();
return this.cache.size;
}
keys(): string[] {
this.cleanup();
return Array.from(this.cache.keys());
}
private cleanup(): void {
const now = Date.now();
for (const [key, item] of this.cache.entries()) {
if (now > item.expiresAt) {
this.cache.delete(key);
}
}
}
// Get cache statistics
getStats() {
this.cleanup();
const items = Array.from(this.cache.values());
const totalSize = items.length;
const oldestItem = items.reduce((oldest, item) =>
!oldest || item.timestamp < oldest.timestamp ? item : oldest, null as CacheItem<T> | null);
const newestItem = items.reduce((newest, item) =>
!newest || item.timestamp > newest.timestamp ? item : newest, null as CacheItem<T> | null);
return {
size: totalSize,
maxSize: this.config.maxSize,
oldestTimestamp: oldestItem?.timestamp,
newestTimestamp: newestItem?.timestamp,
defaultTTL: this.config.defaultTTL
};
}
}
// Specific cache instances
export const albumCache = new Cache<Album[]>({ defaultTTL: 24 * 60 * 60 * 1000, maxSize: 500 }); // 24 hours
export const artistCache = new Cache<Artist[]>({ defaultTTL: 24 * 60 * 60 * 1000, maxSize: 200 }); // 24 hours
export const songCache = new Cache<Song[]>({ defaultTTL: 12 * 60 * 60 * 1000, maxSize: 1000 }); // 12 hours
export const imageCache = new Cache<string>({ defaultTTL: 7 * 24 * 60 * 60 * 1000, maxSize: 1000 }); // 7 days for image URLs
// Cache management utilities
export const CacheManager = {
clearAll() {
albumCache.clear();
artistCache.clear();
songCache.clear();
imageCache.clear();
// Also clear localStorage cache data
if (typeof window !== 'undefined') {
const keys = Object.keys(localStorage);
keys.forEach(key => {
if (key.startsWith('cache-') || key.startsWith('library-cache-')) {
localStorage.removeItem(key);
}
});
}
},
getStats() {
return {
albums: albumCache.getStats(),
artists: artistCache.getStats(),
songs: songCache.getStats(),
images: imageCache.getStats()
};
},
getCacheSizeBytes() {
if (typeof window === 'undefined') return 0;
let size = 0;
const keys = Object.keys(localStorage);
keys.forEach(key => {
if (key.startsWith('cache-') || key.startsWith('library-cache-')) {
size += localStorage.getItem(key)?.length || 0;
}
});
return size;
}
};
// Persistent cache for localStorage
export const PersistentCache = {
set<T>(key: string, data: T, ttl: number = 24 * 60 * 60 * 1000): void {
if (typeof window === 'undefined') return;
const item: CacheItem<T> = {
data,
timestamp: Date.now(),
expiresAt: Date.now() + ttl
};
try {
localStorage.setItem(`cache-${key}`, JSON.stringify(item));
} catch (error) {
console.warn('Failed to store in localStorage cache:', error);
}
},
get<T>(key: string): T | null {
if (typeof window === 'undefined') return null;
try {
const stored = localStorage.getItem(`cache-${key}`);
if (!stored) return null;
const item: CacheItem<T> = JSON.parse(stored);
// Check if expired
if (Date.now() > item.expiresAt) {
localStorage.removeItem(`cache-${key}`);
return null;
}
return item.data;
} catch (error) {
console.warn('Failed to read from localStorage cache:', error);
return null;
}
},
delete(key: string): void {
if (typeof window === 'undefined') return;
localStorage.removeItem(`cache-${key}`);
},
clear(): void {
if (typeof window === 'undefined') return;
const keys = Object.keys(localStorage);
keys.forEach(key => {
if (key.startsWith('cache-')) {
localStorage.removeItem(key);
}
});
}
};

1
lib/navidrome.ts
View File

@@ -1,5 +1,4 @@
import crypto from 'crypto';
import { albumCache, artistCache, songCache, imageCache, PersistentCache } from './cache';
export interface NavidromeConfig {
serverUrl: string;

11
lib/posthog.ts
View File

@@ -1,11 +0,0 @@
import { PostHog } from "posthog-node"
export default function PostHogClient() {
const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
// capture_pageview: 'history_change',
flushAt: 1,
flushInterval: 0,
})
return posthogClient
}

19
next.config.mjs
View File

@@ -53,25 +53,6 @@ const nextConfig = {
},
];
},
async rewrites() {
return [
{
source: '/ingest/static/:path*',
destination: 'https://us-assets.i.posthog.com/static/:path*',
},
{
source: '/ingest/:path*',
destination: 'https://us.i.posthog.com/:path*',
},
{
source: '/ingest/decide',
destination: 'https://us.i.posthog.com/decide',
},
];
},
// This is required to support PostHog trailing slash API requests
skipTrailingSlashRedirect: true,
};
export default nextConfig;

122
package.json
View File

@@ -13,88 +13,86 @@
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@hookform/resolvers": "^5.2.0",
"@radix-ui/react-accordion": "^1.2.11",
"@radix-ui/react-alert-dialog": "^1.1.14",
"@radix-ui/react-aspect-ratio": "^1.1.7",
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-checkbox": "^1.3.2",
"@radix-ui/react-collapsible": "^1.1.11",
"@radix-ui/react-context-menu": "^2.2.15",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.15",
"@radix-ui/react-hover-card": "^1.1.14",
"@hookform/resolvers": "^5.2.2",
"@radix-ui/react-accordion": "^1.2.12",
"@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-aspect-ratio": "^1.1.8",
"@radix-ui/react-avatar": "^1.1.11",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-context-menu": "^2.2.16",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-hover-card": "^1.1.15",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-menubar": "^1.1.15",
"@radix-ui/react-navigation-menu": "^1.2.13",
"@radix-ui/react-popover": "^1.1.14",
"@radix-ui/react-progress": "^1.1.7",
"@radix-ui/react-radio-group": "^1.3.7",
"@radix-ui/react-scroll-area": "^1.2.1",
"@radix-ui/react-select": "^2.2.5",
"@radix-ui/react-separator": "^1.1.7",
"@radix-ui/react-slider": "^1.3.5",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-switch": "^1.2.5",
"@radix-ui/react-tabs": "^1.1.12",
"@radix-ui/react-toast": "^1.2.4",
"@radix-ui/react-toggle": "^1.1.9",
"@radix-ui/react-toggle-group": "^1.1.10",
"@radix-ui/react-tooltip": "^1.2.7",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-menubar": "^1.1.16",
"@radix-ui/react-navigation-menu": "^1.2.14",
"@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-progress": "^1.1.8",
"@radix-ui/react-radio-group": "^1.3.8",
"@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slider": "^1.3.6",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-switch": "^1.2.6",
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-toast": "^1.2.15",
"@radix-ui/react-toggle": "^1.1.10",
"@radix-ui/react-toggle-group": "^1.1.11",
"@radix-ui/react-tooltip": "^1.2.8",
"@types/react-beautiful-dnd": "^13.1.8",
"axios": "^1.11.0",
"class-variance-authority": "^0.7.0",
"axios": "^1.13.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"colorthief": "^2.6.0",
"date-fns": "^4.1.0",
"embla-carousel-react": "^8.6.0",
"framer-motion": "^11.18.2",
"framer-motion": "^12.29.0",
"input-otp": "^1.4.2",
"lucide-react": "^0.525.0",
"next": "15.4.4",
"lucide-react": "^0.563.0",
"next": "16.1.4",
"next-themes": "^0.4.6",
"posthog-js": "^1.255.0",
"posthog-node": "^5.1.1",
"react": "19.1.0",
"react-day-picker": "^9.7.0",
"react-dom": "19.1.0",
"react-hook-form": "^7.60.0",
"react-icons": "^5.3.0",
"react-intersection-observer": "^9.16.0",
"react-resizable-panels": "^3.0.3",
"recharts": "^3.0.2",
"sonner": "^2.0.5",
"tailwind-merge": "^3.3.1",
"react": "19.2.3",
"react-day-picker": "^9.13.0",
"react-dom": "19.2.3",
"react-hook-form": "^7.71.1",
"react-icons": "^5.5.0",
"react-intersection-observer": "^10.0.2",
"react-resizable-panels": "^4.5.1",
"recharts": "^3.7.0",
"sonner": "^2.0.7",
"tailwind-merge": "^3.4.0",
"tailwindcss-animate": "^1.0.7",
"vaul": "^1.1.2",
"zod": "^4.0.10"
"zod": "^4.3.6"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.11",
"@types/node": "^24.1.0",
"@types/react": "19.1.8",
"@types/react-dom": "19.1.6",
"chalk": "^5.3.0",
"eslint": "^9.32",
"eslint-config-next": "15.4.5",
"postcss": "^8",
"@tailwindcss/postcss": "^4.1.18",
"@types/node": "^25.0.10",
"@types/react": "19.2.9",
"@types/react-dom": "19.2.3",
"chalk": "^5.6.2",
"eslint": "^9.39.2",
"eslint-config-next": "16.1.4",
"postcss": "^8.5.6",
"source-map-support": "^0.5.21",
"tailwindcss": "^4.1.11",
"typescript": "^5"
"tailwindcss": "^4.1.18",
"typescript": "5.9.3"
},
"packageManager": "pnpm@10.13.1",
"overrides": {
"@types/react": "19.1.8",
"@types/react-dom": "19.1.6",
"typescript": "5.9.2"
"@types/react": "19.2.9",
"@types/react-dom": "19.2.3",
"typescript": "5.9.3"
},
"pnpm": {
"overrides": {
"@types/react": "19.1.8",
"@types/react-dom": "19.1.6",
"typescript": "5.9.2"
"@types/react": "19.2.9",
"@types/react-dom": "19.2.3",
"typescript": "5.9.3"
},
"onlyBuiltDependencies": [
"sharp",

3829
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff