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

Enhance FullScreenPlayer for improved iOS scrolling; add debug tools in SettingsPage for localStorage management

Browse Source
This commit is contained in:
angel
2025-07-25 15:46:38 +00:00
committed by GitHub
parent 86e198aa24
commit 74b9648eef
3 changed files with 120 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@@ -1 +1 @@
NEXT_PUBLIC_COMMIT_SHA=a957398
NEXT_PUBLIC_COMMIT_SHA=86e198a

130
app/components/FullScreenPlayer.tsx
View File

@@ -108,55 +108,41 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
if (currentLyricIndex >= 0 && shouldScroll && lyricsRef.current) {
const scrollTimeout = setTimeout(() => {
// Try multiple selectors for better iOS compatibility
let scrollContainer = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
// Fallback for iOS - look for the actual scrollable container
if (!scrollContainer) {
scrollContainer = lyricsRef.current?.querySelector('.scrollable-area') as HTMLElement;
}
// Another fallback - use the lyricsRef itself if it's scrollable
if (!scrollContainer && lyricsRef.current) {
const computedStyle = window.getComputedStyle(lyricsRef.current);
if (computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll') {
try {
// Simplified scroll container detection for better iOS compatibility
let scrollContainer = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
// Fallback to the lyrics container itself on mobile (iOS)
if (!scrollContainer && isMobile && lyricsRef.current) {
scrollContainer = lyricsRef.current;
}
}
// Final fallback - look for any scrollable parent
if (!scrollContainer) {
let element = lyricsRef.current?.parentElement;
while (element) {
const computedStyle = window.getComputedStyle(element);
if (computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll') {
scrollContainer = element;
break;
}
element = element.parentElement;
}
}
const currentLyricElement = lyricsRef.current?.querySelector(`[data-lyric-index="${currentLyricIndex}"]`) as HTMLElement;
if (scrollContainer && currentLyricElement) {
const containerHeight = scrollContainer.clientHeight;
const elementTop = currentLyricElement.offsetTop;
const elementHeight = currentLyricElement.offsetHeight;
// Calculate scroll position to center the current lyric
const targetScrollTop = elementTop - (containerHeight / 2) + (elementHeight / 2);
const currentLyricElement = lyricsRef.current?.querySelector(`[data-lyric-index="${currentLyricIndex}"]`) as HTMLElement;
// Use both scrollTo and scrollTop for better iOS compatibility
try {
scrollContainer.scrollTo({
top: Math.max(0, targetScrollTop),
behavior: 'smooth'
if (scrollContainer && currentLyricElement) {
const containerHeight = scrollContainer.clientHeight;
const elementTop = currentLyricElement.offsetTop;
const elementHeight = currentLyricElement.offsetHeight;
// Calculate scroll position to center the current lyric
const targetScrollTop = elementTop - (containerHeight / 2) + (elementHeight / 2);
// Use requestAnimationFrame for smoother iOS performance
requestAnimationFrame(() => {
try {
scrollContainer.scrollTo({
top: Math.max(0, targetScrollTop),
behavior: 'smooth'
});
} catch (error) {
// Simple fallback for iOS
scrollContainer.scrollTop = Math.max(0, targetScrollTop);
}
});
} catch (error) {
// Fallback for older iOS versions
scrollContainer.scrollTop = Math.max(0, targetScrollTop);
}
} catch (error) {
// Silently fail to prevent breaking audio playback
console.warn('Lyrics scroll failed:', error);
}
}, 100);
@@ -169,48 +155,32 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
const shouldReset = isMobile ? (activeTab === 'lyrics' && lyrics.length > 0) : (showLyrics && lyrics.length > 0);
if (currentTrack && shouldReset && lyricsRef.current) {
// Reset scroll position using lyricsRef with iOS compatibility
// Simplified reset scroll logic for better iOS compatibility
const resetScroll = () => {
// Try multiple selectors for better iOS compatibility
let scrollContainer = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
// Fallback for iOS - look for the actual scrollable container
if (!scrollContainer) {
scrollContainer = lyricsRef.current?.querySelector('.scrollable-area') as HTMLElement;
}
// Another fallback - use the lyricsRef itself if it's scrollable
if (!scrollContainer && lyricsRef.current) {
const computedStyle = window.getComputedStyle(lyricsRef.current);
if (computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll') {
try {
let scrollContainer = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
// Fallback to the lyrics container itself on mobile (iOS)
if (!scrollContainer && isMobile && lyricsRef.current) {
scrollContainer = lyricsRef.current;
}
}
// Final fallback - look for any scrollable parent
if (!scrollContainer) {
let element = lyricsRef.current?.parentElement;
while (element) {
const computedStyle = window.getComputedStyle(element);
if (computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll') {
scrollContainer = element;
break;
}
element = element.parentElement;
}
}
if (scrollContainer) {
// Use both scrollTo and scrollTop for better iOS compatibility
try {
scrollContainer.scrollTo({
top: 0,
behavior: 'instant' // Use instant for track changes
if (scrollContainer) {
// Use requestAnimationFrame for smoother iOS performance
requestAnimationFrame(() => {
try {
scrollContainer.scrollTo({
top: 0,
behavior: 'instant'
});
} catch (error) {
scrollContainer.scrollTop = 0;
}
});
} catch (error) {
// Fallback for older iOS versions
scrollContainer.scrollTop = 0;
}
} catch (error) {
// Silently fail to prevent breaking audio playback
console.warn('Lyrics reset scroll failed:', error);
}
};

69
app/settings/page.tsx
View File

@@ -47,6 +47,7 @@ const SettingsPage = () => {
// Client-side hydration state
const [isClient, setIsClient] = useState(false);
const [isDev, setIsDev] = useState(false);
// Check if Navidrome is configured via environment variables
const hasEnvConfig = React.useMemo(() => {
@@ -62,6 +63,7 @@ const SettingsPage = () => {
// Initialize client-side state after hydration
useEffect(() => {
setIsClient(true);
setIsDev(process.env.NODE_ENV === 'development');
// Initialize form data with config values
setFormData({
@@ -333,6 +335,39 @@ const SettingsPage = () => {
}
};
const handleDebugClearStorage = () => {
if (!isClient) return;
try {
// Preserve Navidrome config
const navidromeConfig = localStorage.getItem('navidrome-config');
// Clear all localStorage
localStorage.clear();
// Restore Navidrome config if it existed
if (navidromeConfig) {
localStorage.setItem('navidrome-config', navidromeConfig);
}
toast({
title: "Debug: Storage Cleared",
description: "All localStorage cleared except Navidrome config. Page will reload.",
});
// Reload the page to reset all state
setTimeout(() => {
window.location.reload();
}, 1500);
} catch (error) {
toast({
title: "Debug: Clear Failed",
description: "Failed to clear localStorage: " + (error instanceof Error ? error.message : "Unknown error"),
variant: "destructive"
});
}
};
return (
<div className="p-6 pb-24 w-full">
{!isClient ? (
@@ -712,6 +747,40 @@ const SettingsPage = () => {
<CacheManagement />
</div>
{/* Debug Tools - Only in Development */}
{isDev && (
<Card className="mb-6 break-inside-avoid border-orange-200 dark:border-orange-800">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-orange-600 dark:text-orange-400">
<FaCog className="w-5 h-5" />
Debug Tools (Dev Only)
</CardTitle>
<CardDescription>
Development tools for debugging and testing
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="p-4 bg-orange-50 dark:bg-orange-950/20 rounded-lg border border-orange-200 dark:border-orange-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-orange-800 dark:text-orange-200">Clear Storage</h4>
<p className="text-sm text-orange-600 dark:text-orange-400">
Clears all localStorage except Navidrome config
</p>
</div>
<Button
onClick={handleDebugClearStorage}
variant="destructive"
size="sm"
>
Clear Storage
</Button>
</div>
</div>
</CardContent>
</Card>
)}
<Card className="mb-6 break-inside-avoid">
<CardHeader>
<CardTitle>Appearance</CardTitle>