Michael/podcastic
1
0 Fork 0
mirror of https://github.com/R0m1k3/podcastic.git synced 2026-10-11 17:26:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael committed 2026-04-16 15:34:09 +02:00
1 parent c9127c70c1
commit 17f2496dda
9 files changed
+274 -109
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

backend/src/services/podcastIndexService.ts
+5 -3
View File
@@ -69,8 +69,9 @@ export const podcastIndexService = {
term,
media: 'podcast',
entity: 'podcast',
country: 'FR', // Prioritize French store
limit: Math.max(limit, 50), // Get more results to find the best match
country: 'FR',
lang: 'fr_fr', // Force French localized search
limit: 100, // Fetch more candidates to improve quality
},
timeout: 10000,
}
@@ -78,7 +79,8 @@ export const podcastIndexService = {
return response.data.results
.map(mapItunesResult)
.filter((r): r is SearchResult => r !== null);
.filter((r): r is SearchResult => r !== null)
.slice(0, limit); // Respect requested limit after fetching candidates
},
getTrendingPodcasts: async (limit: number = 20, genreId?: string): Promise<SearchResult[]> => {
frontend/src/App.tsx
+81 -40
View File
@@ -1,13 +1,16 @@
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useState, useEffect } from 'react';
import './styles/globals.css';
import { authService } from './services/authService';
import { AudioProvider, useAudio } from './context/AudioContext';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import Trending from './pages/Trending';
import AddPodcast from './pages/AddPodcast';
import Library from './pages/Library';
import Navigation from './components/Navigation';
import AudioPlayer from './components/AudioPlayer';
const queryClient = new QueryClient({
defaultOptions: {
@@ -18,6 +21,78 @@ const queryClient = new QueryClient({
},
});
// App Content Wrapper to access AudioContext
function AppContent() {
const { currentEpisode, closePlayer } = useAudio();
const [user, setUser] = useState<any>(null);
// Load user for the player
useEffect(() => {
const loadUser = async () => {
try {
const { accessToken } = authService.getTokens();
if (accessToken) {
const response = await authService.getMe();
setUser(response.user);
}
} catch (error) {
console.error('Failed to load user for global player');
}
};
loadUser();
}, [currentEpisode]); // Reload if needed or on mount
return (
<>
<Routes>
<Route path="/login" element={<Login />} />
<Route
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
<Route
path="/trending"
element={
<ProtectedRoute>
<Trending />
</ProtectedRoute>
}
/>
<Route
path="/add"
element={
<ProtectedRoute>
<AddPodcast />
</ProtectedRoute>
}
/>
<Route
path="/library"
element={
<ProtectedRoute>
<Library />
</ProtectedRoute>
}
/>
<Route path="/" element={<Navigate to="/dashboard" replace />} />
<Route path="*" element={<Navigate to="/dashboard" replace />} />
</Routes>
{currentEpisode && (
<AudioPlayer
episode={currentEpisode}
onClose={closePlayer}
userId={user?._id}
/>
)}
</>
);
}
// Protected Route Component
function ProtectedRoute({ children }: { children: React.ReactNode }) {
const { accessToken } = authService.getTokens();
@@ -29,7 +104,7 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
return (
<div className="flex min-h-screen">
<Navigation />
<main className="flex-1 lg:ml-80 lg:mr-8 pb-32 pt-8 px-4 lg:px-0">
<main className="flex-1 lg:ml-80 lg:mr-8 pb-40 pt-8 px-4 lg:px-0">
<div className="reveal">
{children}
</div>
@@ -41,45 +116,11 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<Routes>
<Route path="/login" element={<Login />} />
<Route
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
<Route
path="/trending"
element={
<ProtectedRoute>
<Trending />
</ProtectedRoute>
}
/>
<Route
path="/add"
element={
<ProtectedRoute>
<AddPodcast />
</ProtectedRoute>
}
/>
<Route
path="/library"
element={
<ProtectedRoute>
<Library />
</ProtectedRoute>
}
/>
<Route path="/" element={<Navigate to="/dashboard" replace />} />
<Route path="*" element={<Navigate to="/dashboard" replace />} />
</Routes>
</BrowserRouter>
<AudioProvider>
<BrowserRouter>
<AppContent />
</BrowserRouter>
</AudioProvider>
</QueryClientProvider>
);
}
frontend/src/components/AudioPlayer.tsx
+15 -1
View File
@@ -11,7 +11,9 @@ import {
X,
RotateCcw,
RotateCw,
AlertCircle
} from 'lucide-react';
import AlertModal from './AlertModal';
interface AudioPlayerProps {
episode: Episode | null;
@@ -28,6 +30,7 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
const [playbackSpeed, setPlaybackSpeed] = useState(() => parseFloat(localStorage.getItem('podcastic-speed') || '1'));
const [isMuted, setIsMuted] = useState(false);
const [isExpanded, setIsExpanded] = useState(false);
const [error, setError] = useState<string | null>(null);
const podcast = typeof episode?.podcastId === 'object' ? episode.podcastId : null;
@@ -130,10 +133,21 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
onTimeUpdate={() => audioRef.current && setCurrentTime(audioRef.current.currentTime)}
onLoadedMetadata={() => audioRef.current && setDuration(audioRef.current.duration)}
onEnded={() => setIsPlaying(false)}
crossOrigin="anonymous"
onError={() => setError("Impossible de charger ce fichier audio. Le lien est peut-être expiré ou protégé.")}
autoPlay
/>
<AlertModal
isOpen={!!error}
title="Erreur de lecture"
message={error || ""}
type="error"
onClose={() => {
setError(null);
onClose();
}}
/>
{/* ── COMPACT BAR ── */}
<div className={`flex items-center gap-4 px-5 h-[88px] shrink-0 ${isExpanded ? 'hidden' : 'flex'}`}>
frontend/src/constants.ts
+23
View File
@@ -0,0 +1,23 @@
export interface Genre {
id: string;
label: string;
}
export const GENRES: Genre[] = [
{ 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' },
{ id: '1304', label: 'Éducation' },
{ id: '1307', label: 'Santé' },
{ id: '1305', label: 'Famille' },
{ id: '1340', label: 'Fiction' },
{ id: '1325', label: 'Histoire' },
{ id: '1333', label: 'True Crime' },
];
frontend/src/context/AudioContext.tsx
+53
View File
@@ -0,0 +1,53 @@
import React, { createContext, useContext, useState, ReactNode } from 'react';
import { Episode } from '../services/episodeService';
interface AudioContextType {
currentEpisode: Episode | null;
isPlaying: boolean;
playEpisode: (episode: Episode) => void;
togglePlay: () => void;
closePlayer: () => void;
setIsPlaying: (isPlaying: boolean) => void;
}
const AudioContext = createContext<AudioContextType | undefined>(undefined);
export function AudioProvider({ children }: { children: ReactNode }) {
const [currentEpisode, setCurrentEpisode] = useState<Episode | null>(null);
const [isPlaying, setIsPlaying] = useState(false);
const playEpisode = (episode: Episode) => {
setCurrentEpisode(episode);
setIsPlaying(true);
};
const togglePlay = () => {
setIsPlaying(prev => !prev);
};
const closePlayer = () => {
setCurrentEpisode(null);
setIsPlaying(false);
};
return (
<AudioContext.Provider value={{
currentEpisode,
isPlaying,
playEpisode,
togglePlay,
closePlayer,
setIsPlaying
}}>
{children}
</AudioContext.Provider>
);
}
export function useAudio() {
const context = useContext(AudioContext);
if (context === undefined) {
throw new Error('useAudio must be used within an AudioProvider');
}
return context;
}
frontend/src/pages/AddPodcast.tsx
+41 -17
View File
@@ -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
+37 -19
View File
@@ -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
+2 -12
View File
@@ -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 () => {
frontend/src/styles/globals.css
+17 -17
View File
@@ -16,25 +16,25 @@
--glass-blur: blur(24px) saturate(180%);
--shadow-premium: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1);
--input-bg: rgba(255, 255, 255, 0.03);
--radius-card: 1.5rem; /* 24px */
--radius-panel: 2rem; /* 32px */
--radius-card: 1rem; /* 16px - Sharper, Industrial */
--radius-panel: 1.25rem; /* 20px */
}
/* ── Premium Gold (Light Theme) ── */
:root.light-theme, .light-theme {
--bg-primary: #FDFCFB; /* Off-white */
--bg-secondary: rgba(212, 175, 55, 0.05); /* Very light gold tint */
--text-primary: #0a0a0a; /* True black */
--text-secondary: #4b5563; /* Slate 600 */
--accent-primary: #C5A028; /* Premium Gold */
--accent-secondary: #856404; /* Darker Gold */
--accent-glow: rgba(197, 160, 40, 0.2);
--border-color: rgba(197, 160, 40, 0.15);
--glass-blur: blur(20px) saturate(120%);
--shadow-premium: 0 20px 50px rgba(197, 160, 40, 0.15), 0 10px 30px rgba(0, 0, 0, 0.06);
--radius-card: 1.5rem;
--radius-panel: 2rem;
--input-bg: #ffffff;
--bg-primary: #ffffff; /* Pure white for maximum clarity */
--bg-secondary: #f8fafc; /* Slate 50 tint */
--text-primary: #0f172a; /* Slate 900 */
--text-secondary: #64748b; /* Slate 500 */
--accent-primary: #6366f1; /* Consistent Indigo across themes for brand */
--accent-secondary: #06b6d4;
--accent-glow: rgba(99, 102, 241, 0.1);
--border-color: #e2e8f0; /* Soft slate border */
--glass-blur: blur(12px);
--shadow-premium: 0 10px 40px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.05);
--radius-card: 1rem;
--radius-panel: 1.25rem;
--input-bg: #f1f5f9;
}
}
@@ -68,8 +68,8 @@ body.light-theme::before {
inset: 0;
z-index: -1;
background-image:
radial-gradient(ellipse 80% 40% at 10% 10%, rgba(197, 160, 40, 0.05) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 90%, rgba(255, 255, 255, 0.8) 0%, transparent 60%);
radial-gradient(ellipse 80% 40% at 10% 10%, rgba(99, 102, 241, 0.03) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 90%, rgba(255, 255, 255, 1) 0%, transparent 60%);
pointer-events: none;
}