feat: Enhance audio settings with ReplayGain, crossfade, and equalizer presets; add AudioSettingsDialog component

app/components/AudioPlayerContext.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import React, { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
-import { Song, Album, Artist } from '@/lib/navidrome';
+import React, { createContext, useContext, useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { Song } from '@/lib/navidrome';
 import { getNavidromeAPI } from '@/lib/navidrome';
 import { useToast } from "@/hooks/use-toast";
+import { AudioEffects } from '@/lib/audio-effects';
 
 export interface Track {
   id: string;
@@ -15,8 +16,16 @@ export interface Track {
   coverArt?: string;
   albumId: string;
   artistId: string;
-  autoPlay?: boolean; // Flag to control auto-play
-  starred?: boolean; // Flag for starred/favorited tracks
+  autoPlay?: boolean;
+  starred?: boolean;
+  replayGain?: number; // Added ReplayGain field
+}
+
+interface AudioSettings {
+  crossfadeDuration: number;
+  equalizer: string;
+  replayGainEnabled: boolean;
+  gaplessPlayback: boolean;
 }
 
 interface AudioPlayerContextProps {
@@ -42,16 +51,37 @@ interface AudioPlayerContextProps {
   clearHistory: () => void;
   toggleCurrentTrackStar: () => Promise<void>;
   updateTrackStarred: (trackId: string, starred: boolean) => void;
+  // Audio settings
+  audioSettings: AudioSettings;
+  updateAudioSettings: (settings: Partial<AudioSettings>) => void;
+  equalizerPreset: string;
+  setEqualizerPreset: (preset: string) => void;
+  audioEffects: AudioEffects | null;
+  // Playback state
+  isPlaying: boolean;
+  togglePlayPause: () => Promise<void>;
 }
 
 const AudioPlayerContext = createContext<AudioPlayerContextProps | undefined>(undefined);
 
+export // Default audio settings
+const DEFAULT_AUDIO_SETTINGS: AudioSettings = {
+  crossfadeDuration: 3,
+  equalizer: 'normal',
+  replayGainEnabled: true,
+  gaplessPlayback: true
+};
+
 export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [currentTrack, setCurrentTrack] = useState<Track | null>(null);
   const [queue, setQueue] = useState<Track[]>([]);
   const [playedTracks, setPlayedTracks] = useState<Track[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [shuffle, setShuffle] = useState(false);
+  const [audioSettings, setAudioSettings] = useState<AudioSettings>(DEFAULT_AUDIO_SETTINGS);
+  const [equalizerPreset, setEqualizerPreset] = useState('normal');
+  const [audioEffects, setAudioEffects] = useState<AudioEffects | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
   const { toast } = useToast();
   const api = useMemo(() => {
     const navidromeApi = getNavidromeAPI();
@@ -102,6 +132,73 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     }
   }, [currentTrack]);
 
+  // Initialize audio effects when audio element is available
+  useEffect(() => {
+    const audioElement = audioRef.current;
+    if (audioElement && !audioEffects) {
+      const effects = new AudioEffects(audioElement);
+      setAudioEffects(effects);
+
+      // Load saved audio settings
+      const savedSettings = localStorage.getItem('navidrome-audio-settings');
+      if (savedSettings) {
+        try {
+          const settings = JSON.parse(savedSettings);
+          setAudioSettings(settings);
+          effects.setPreset(settings.equalizer);
+          setEqualizerPreset(settings.equalizer);
+        } catch (error) {
+          console.error('Failed to load audio settings:', error);
+        }
+      }
+
+      return () => {
+        effects.disconnect();
+      };
+    }
+  }, [audioEffects]);
+
+  // Save all audio-related settings
+  const saveSettings = useCallback(() => {
+    try {
+      // Save audio settings
+      localStorage.setItem('navidrome-audio-settings', JSON.stringify(audioSettings));
+      // Save equalizer preset
+      localStorage.setItem('navidrome-equalizer-preset', equalizerPreset);
+      // Save other playback settings
+      const playbackSettings = {
+        replayGainEnabled: audioSettings.replayGainEnabled,
+        gaplessPlayback: audioSettings.gaplessPlayback,
+        crossfadeDuration: audioSettings.crossfadeDuration,
+        volume: audioRef.current?.volume || 1,
+        lastPosition: audioRef.current?.currentTime || 0
+      };
+      localStorage.setItem('navidrome-playback-settings', JSON.stringify(playbackSettings));
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+    }
+  }, [audioSettings, equalizerPreset]);
+
+  // Save settings whenever they change
+  useEffect(() => {
+    saveSettings();
+  }, [audioSettings, equalizerPreset, saveSettings]);
+
+  // Update equalizer when preset changes
+  useEffect(() => {
+    if (audioEffects) {
+      audioEffects.setPreset(equalizerPreset);
+    }
+  }, [equalizerPreset, audioEffects]);
+
+  const updateAudioSettings = useCallback((settings: Partial<AudioSettings>) => {
+    setAudioSettings(prev => {
+      const newSettings = { ...prev, ...settings };
+      localStorage.setItem('navidrome-audio-settings', JSON.stringify(newSettings));
+      return newSettings;
+    });
+  }, []);
+
   const songToTrack = useMemo(() => (song: Song): Track => {
     if (!api) {
       throw new Error('Navidrome API not configured');
@@ -120,7 +217,8 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
       coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 512) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
-      starred: !!song.starred
+      starred: !!song.starred,
+      replayGain: song.replayGain || 0 // Add ReplayGain support
     };
   }, [api]);
 
@@ -573,6 +671,32 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
       }
     }
   }, []);
+  // Track playback state
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  // Shared playback control function
+  const togglePlayPause = useCallback(async () => {
+    const audioElement = audioRef.current;
+    if (!audioElement || !currentTrack) return;
+
+    try {
+      if (isPlaying) {
+        audioElement.pause();
+        setIsPlaying(false);
+      } else {
+        await audioElement.play();
+        setIsPlaying(true);
+      }
+    } catch (error) {
+      console.error('Failed to toggle playback:', error);
+      toast({
+        variant: "destructive",
+        title: "Playback Error",
+        description: "Failed to control playback. Please try again.",
+      });
+    }
+  }, [currentTrack, isPlaying, toast]);
+
   const contextValue = useMemo(() => ({
     currentTrack, 
     playTrack, 
@@ -594,6 +718,15 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     playArtist,
     playedTracks,
     clearHistory,
+    // Audio settings
+    audioSettings,
+    updateAudioSettings,
+    equalizerPreset,
+    setEqualizerPreset,
+    audioEffects,
+    // Playback state
+    isPlaying,
+    togglePlayPause,
     toggleCurrentTrackStar: async () => {
       if (!currentTrack || !api) {
         toast({
@@ -684,7 +817,14 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     playedTracks,
     clearHistory,
     api,
-    toast
+    toast,
+    audioEffects,
+    audioSettings,
+    equalizerPreset,
+    updateAudioSettings,
+    setEqualizerPreset,
+    isPlaying,
+    togglePlayPause
   ]);
 
   return (