feat: implement global audio player with playback controls, progress tracking, and persistent settings

frontend/src/pages/AddPodcast.tsx

@@ -6,14 +6,16 @@ import { episodeService, Episode } from '../services/episodeService';
 import Header from '../components/Header';
 import EpisodeCard from '../components/EpisodeCard';
 import EpisodeDetails from '../components/EpisodeDetails';
-import AudioPlayer from '../components/AudioPlayer';
+import { useAudio } from '../context/AudioContext';
 import AlertModal, { AlertType } from '../components/AlertModal';
 import { Search, Plus, Loader, Rss, Check, Globe, Sparkles, PlusCircle, LayoutGrid, ListMusic } from 'lucide-react';
 import { authService } from '../services/authService';
 import SuccessModal from '../components/SuccessModal';
+import { GENRES } from '../constants';
 
 export default function AddPodcast() {
   const queryClient = useQueryClient();
+  const { playEpisode } = useAudio();
   const [user, setUser] = useState<any>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchType, setSearchType] = useState<'podcasts' | 'episodes'>('podcasts');
@@ -35,9 +37,9 @@ export default function AddPodcast() {
   });
 
   const [rssSuccess, setRssSuccess] = useState<string | null>(null);
-  const [selectedEpisode, setSelectedEpisode] = useState<Episode | null>(null);
   const [detailsEpisode, setDetailsEpisode] = useState<Episode | null>(null);
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+  const [selectedGenre, setSelectedGenre] = useState<string>(GENRES[1].id); // Tech by default or first genre
   
   // Modal state
   const [showSuccessModal, setShowSuccessModal] = useState(false);
@@ -76,6 +78,14 @@ export default function AddPodcast() {
       staleTime: 2 * 60 * 1000,
   });
 
+  // Trending discovery for the "Add" page when no search is active
+  const { data: trendingResults, isLoading: isTrendingLoading } = useQuery({
+    queryKey: ['discover', 'trending', selectedGenre],
+    queryFn: () => discoveryService.getTrendingPodcasts(18, selectedGenre),
+    enabled: searchQuery.length === 0 && searchType === 'podcasts',
+    staleTime: 30 * 60 * 1000,
+  });
+
   const { data: subsData } = useQuery({
     queryKey: ['podcasts', 'subscriptions'],
     queryFn: () => podcastService.getUserSubscriptions(),
@@ -215,17 +225,39 @@ export default function AddPodcast() {
               />
               <Sparkles className="absolute left-6 top-1/2 -translate-y-1/2 w-6 h-6 text-slate-500 group-focus-within:text-[var(--accent-primary)] transition-colors" />
            </div>
+
+           {/* Category Discovery Pills */}
+           {searchType === 'podcasts' && (
+             <div className="flex items-center gap-2 overflow-x-auto pb-4 mt-8 no-scrollbar">
+               {GENRES.map(genre => (
+                 <button
+                   key={genre.id}
+                   onClick={() => {
+                       setSelectedGenre(genre.id);
+                       setSearchQuery(''); 
+                   }}
+                   className={`px-4 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest whitespace-nowrap transition-all border ${
+                     selectedGenre === genre.id && searchQuery === ''
+                      ? 'bg-[var(--accent-primary)] text-white border-[var(--accent-primary)] shadow-glow-indigo' 
+                      : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] border-[var(--border-color)] hover:border-[var(--accent-primary)]'
+                   }`}
+                 >
+                   {genre.label || 'Explorer'}
+                 </button>
+               ))}
+             </div>
+           )}
         </div>
 
         {/* Dynamic Results Grid */}
-        {(isSearching || isSearchingEpisodes) ? (
+        {(isSearching || isSearchingEpisodes || isTrendingLoading) ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-             {[1,2,3].map(i => <div key={i} className="premium-glass rounded-[2.5rem] h-64 animate-pulse" />)}
+             {[1,2,3,4,5,6].map(i => <div key={i} className="premium-glass rounded-[var(--radius-card)] h-64 animate-pulse opacity-50" />)}
           </div>
-        ) : searchType === 'podcasts' && searchResults?.podcasts && searchResults.podcasts.length > 0 ? (
+        ) : searchType === 'podcasts' && (searchQuery.length > 0 ? searchResults?.podcasts : trendingResults?.podcasts) ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
-            {searchResults.podcasts.map((podcast) => (
-              <div key={podcast.id} className="group premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
+            {(searchQuery.length > 0 ? searchResults?.podcasts : trendingResults?.podcasts).map((podcast: any) => (
+              <div key={podcast.id} className="group premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500 border-[var(--border-color)]">
                 <div className="relative aspect-[16/10] overflow-hidden">
                    {podcast.imageUrl ? (
                      <img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
@@ -260,7 +292,7 @@ export default function AddPodcast() {
                 <EpisodeCard 
                   key={episode._id} 
                   episode={episode} 
-                  onPlay={setSelectedEpisode} 
+                  onPlay={playEpisode} 
                   onDetails={handleOpenDetails}
                 />
              ))}
@@ -284,7 +316,7 @@ export default function AddPodcast() {
         episode={detailsEpisode}
         isOpen={isDetailsOpen}
         onClose={() => setIsDetailsOpen(false)}
-        onPlay={setSelectedEpisode}
+        onPlay={playEpisode}
       />
 
       <AlertModal
@@ -295,14 +327,6 @@ export default function AddPodcast() {
         onClose={() => setAlertConfig(prev => ({ ...prev, isOpen: false }))}
       />
 
-      {selectedEpisode && (
-        <AudioPlayer
-          episode={selectedEpisode}
-          onClose={() => setSelectedEpisode(null)}
-          userId={user?.id}
-        />
-      )}
-
       <SuccessModal
         isOpen={showSuccessModal}
         onClose={() => setShowSuccessModal(false)}

frontend/src/pages/Dashboard.tsx

@@ -6,12 +6,13 @@ import { authService } from '../services/authService';
 import Header from '../components/Header';
 import EpisodeCard from '../components/EpisodeCard';
 import EpisodeDetails from '../components/EpisodeDetails';
-import AudioPlayer from '../components/AudioPlayer';
+import { useAudio } from '../context/AudioContext';
+import AlertModal, { AlertType } from '../components/AlertModal';
 import { Sparkles, Play, Clock, TrendingUp, Loader, RefreshCcw } from 'lucide-react';
 
 export default function Dashboard() {
+  const { playEpisode } = useAudio();
   const [user, setUser] = useState<any>(null);
-  const [selectedEpisode, setSelectedEpisode] = useState<Episode | null>(null);
   const [detailsEpisode, setDetailsEpisode] = useState<Episode | null>(null);
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -20,6 +21,19 @@ export default function Dashboard() {
   const [hasMore, setHasMore] = useState(true);
   const LIMIT = 32;
 
+  // Alert states
+  const [alertConfig, setAlertConfig] = useState<{
+    isOpen: boolean;
+    title: string;
+    message: string;
+    type: AlertType;
+  }>({
+    isOpen: false,
+    title: '',
+    message: '',
+    type: 'error'
+  });
+
   const handleOpenDetails = (episode: Episode) => {
     setDetailsEpisode(episode);
     setIsDetailsOpen(true);
@@ -78,7 +92,12 @@ export default function Dashboard() {
       authService.clearTokens();
       window.location.href = '/login';
     } catch (error) {
-      console.error('Logout failed:', error);
+      setAlertConfig({
+        isOpen: true,
+        title: "Erreur de déconnexion",
+        message: "Une erreur s'est produite lors de la déconnexion. Veuillez rafraîchir la page.",
+        type: 'error'
+      });
     }
   };
 
@@ -111,10 +130,10 @@ export default function Dashboard() {
                  <Sparkles className="w-3 h-3" />
                  Podcastic Premium
               </div>
-              <h2 className="text-4xl lg:text-5xl font-display font-black mb-4 tracking-tight leading-tight max-w-2xl">
+              <h2 className="text-4xl lg:text-5xl font-display font-black mb-4 tracking-tight leading-tight max-w-2xl text-[var(--text-primary)]">
                  Découvrez les nouveautés de votre univers audio.
               </h2>
-              <p className="text-[var(--text-secondary)] text-lg mb-8 max-w-xl leading-relaxed">
+              <p className="text-[var(--text-secondary)] text-lg mb-8 max-w-xl leading-relaxed font-medium">
                  Vous avez des nouveaux épisodes qui n'attendent que vous. Prêt pour une immersion ?
               </p>
               <div className="flex flex-wrap gap-4">
@@ -153,7 +172,7 @@ export default function Dashboard() {
                   <EpisodeCard
                     key={`progress-${episode._id}`}
                     episode={episode}
-                    onPlay={setSelectedEpisode}
+                    onPlay={playEpisode}
                     onDetails={handleOpenDetails}
                   />
                 ))}
@@ -185,7 +204,7 @@ export default function Dashboard() {
                 <EpisodeCard
                   key={`${skip}-${episode._id}`}
                   episode={episode}
-                  onPlay={setSelectedEpisode}
+                  onPlay={playEpisode}
                   onDetails={handleOpenDetails}
                 />
               ))}
@@ -205,10 +224,10 @@ export default function Dashboard() {
             )}
           </>
         ) : (
-          <div className="premium-glass p-16 rounded-[var(--radius-panel)] text-center max-w-2xl mx-auto border-dashed border-white/10">
+          <div className="premium-glass p-16 rounded-[var(--radius-panel)] text-center max-w-2xl mx-auto border-dashed border-[var(--border-color)]">
             <div className="text-4xl mb-6 opacity-40">🧘</div>
-            <p className="text-white font-bold text-lg mb-2">Silence radio...</p>
-            <p className="text-slate-500 text-sm leading-relaxed mb-8">
+            <p className="font-bold text-lg mb-2 text-[var(--text-primary)]">Silence radio...</p>
+            <p className="text-[var(--text-secondary)] text-sm leading-relaxed mb-8">
               Vous n'avez pas encore d'épisodes ici. Abonnez-vous à vos podcasts favoris pour commencer votre collection.
             </p>
             <Link to="/trending" className="neon-button">Explorer les podcasts</Link>
@@ -221,17 +240,16 @@ export default function Dashboard() {
         episode={detailsEpisode}
         isOpen={isDetailsOpen}
         onClose={() => setIsDetailsOpen(false)}
-        onPlay={setSelectedEpisode}
+        onPlay={playEpisode}
       />
 
-      {/* Audio Player Management */}
-      {selectedEpisode && (
-        <AudioPlayer
-          episode={selectedEpisode}
-          onClose={() => setSelectedEpisode(null)}
-          userId={user?._id}
-        />
-      )}
+      <AlertModal
+        isOpen={alertConfig.isOpen}
+        title={alertConfig.title}
+        message={alertConfig.message}
+        type={alertConfig.type}
+        onClose={() => setAlertConfig(prev => ({ ...prev, isOpen: false }))}
+      />
     </div>
   );
 }

frontend/src/pages/Trending.tsx

@@ -7,6 +7,7 @@ import { Loader, Plus, Flame, Check, Sparkles, TrendingUp } from 'lucide-react';
 import { authService } from '../services/authService';
 import SuccessModal from '../components/SuccessModal';
 import AlertModal, { AlertType } from '../components/AlertModal';
+import { GENRES } from '../constants';
 
 export default function Trending() {
   const queryClient = useQueryClient();
@@ -31,18 +32,7 @@ export default function Trending() {
     type: 'error'
   });
 
-  const GENRES = [
-    { id: '', label: 'Tout' },
-    { id: '1318', label: 'Technologie' },
-    { id: '1303', label: 'Humour' },
-    { id: '1321', label: 'Business' },
-    { id: '1311', label: 'News' },
-    { id: '1324', label: 'Société' },
-    { id: '1316', label: 'Sports' },
-    { id: '1310', label: 'Musique' },
-    { id: '1301', label: 'Arts' },
-    { id: '1315', label: 'Science' },
-  ];
+
 
   useEffect(() => {
     const loadUser = async () => {