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

.env.local

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

app/components/FullScreenPlayer.tsx

@@ -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
+        try {
-        let scrollContainer = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+          // Simplified scroll container detection 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) {
+          // Fallback to the lyrics container itself on mobile (iOS)
-          scrollContainer = lyricsRef.current?.querySelector('.scrollable-area') as HTMLElement;
+          if (!scrollContainer && isMobile && lyricsRef.current) {
-        }
-        
-        // 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') {
             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 currentLyricElement = lyricsRef.current?.querySelector(`[data-lyric-index="${currentLyricIndex}"]`) as HTMLElement;
-          const targetScrollTop = elementTop - (containerHeight / 2) + (elementHeight / 2);
           
-          // Use both scrollTo and scrollTop for better iOS compatibility
+          if (scrollContainer && currentLyricElement) {
-          try {
+            const containerHeight = scrollContainer.clientHeight;
-            scrollContainer.scrollTo({
+            const elementTop = currentLyricElement.offsetTop;
-              top: Math.max(0, targetScrollTop),
+            const elementHeight = currentLyricElement.offsetHeight;
-              behavior: 'smooth'
+            
+            // 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
+        try {
-        let scrollContainer = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+          let scrollContainer = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
-        
+          
-        // Fallback for iOS - look for the actual scrollable container
+          // Fallback to the lyrics container itself on mobile (iOS)
-        if (!scrollContainer) {
+          if (!scrollContainer && isMobile && lyricsRef.current) {
-          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') {
             scrollContainer = lyricsRef.current;
           }
-        }
+          
-        
+          if (scrollContainer) {
-        // Final fallback - look for any scrollable parent
+            // Use requestAnimationFrame for smoother iOS performance
-        if (!scrollContainer) {
+            requestAnimationFrame(() => {
-          let element = lyricsRef.current?.parentElement;
+              try {
-          while (element) {
+                scrollContainer.scrollTo({
-            const computedStyle = window.getComputedStyle(element);
+                  top: 0,
-            if (computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll') {
+                  behavior: 'instant'
-              scrollContainer = element;
+                });
-              break;
+              } catch (error) {
-            }
+                scrollContainer.scrollTop = 0;
-            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
             });
-          } 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);
         }
       };
       

app/settings/page.tsx

@@ -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>