mirror of
https://github.com/R0m1k3/podcastic.git
synced 2026-10-21 22:18:03 +02:00
style: unify floating player design across all pages
Replace the old compact floating bar (h-88px rounded-2rem with expand button) with the same clean mini-bar design as the Dashboard sticky sub-bar — artwork + title + seeks + play + time + speed/volume/expand/ close + thin progress bar. The Dashboard hero inline player is kept. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Sonnet 4.6 committed
1 parent
6786226a6c
commit
842ead6518
3 files changed
+120
-127
No files matched your search
+4
-14
@@ -28,21 +28,11 @@ function AppContent() {
|
||||
const isDashboard = location.pathname === '/dashboard' || location.pathname === '/';
|
||||
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
|
||||
const { accessToken } = authService.getTokens();
|
||||
if (!accessToken) return;
|
||||
authService.getMe().then(r => setUser(r.user)).catch(() => {});
|
||||
}, [currentEpisode]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -366,12 +366,7 @@ export default function AudioPlayer({ episode, onClose, userId, mode = 'floating
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`fixed z-[100] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] ${inverseTheme} text-[var(--text-primary)] ${
|
||||
isExpanded
|
||||
? 'inset-0 rounded-none'
|
||||
: 'bottom-6 left-1/2 -translate-x-1/2 w-[96%] max-w-5xl rounded-[2rem] h-[88px]'
|
||||
} ${theme === 'light' ? 'bg-gradient-to-r from-slate-800/95 to-slate-900/95 backdrop-blur-xl' : 'premium-glass'} border-[var(--border-color)] shadow-2xl overflow-hidden flex flex-col`}>
|
||||
|
||||
<>
|
||||
<audio
|
||||
ref={audioRef}
|
||||
src={episode.audioUrl}
|
||||
@@ -395,82 +390,89 @@ export default function AudioPlayer({ episode, onClose, userId, mode = 'floating
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* ── COMPACT BAR ── */}
|
||||
<div className={`flex items-center gap-4 px-5 h-[88px] shrink-0 ${isExpanded ? 'hidden' : 'flex'}`}>
|
||||
{/* ── COMPACT UNIFIED MINI-BAR (same design as Dashboard sticky bar) ── */}
|
||||
{!isExpanded && (
|
||||
<div className="fixed bottom-6 left-4 right-4 sm:left-6 sm:right-6 lg:left-auto lg:right-8 lg:bottom-8 lg:w-[calc(100%-22rem)] xl:w-[calc(100%-24rem)] z-[90] max-w-5xl mx-auto animate-slide-up">
|
||||
<div className="premium-glass rounded-[var(--radius-card)] border border-[var(--border-color)] shadow-2xl overflow-hidden">
|
||||
<div className="flex items-center gap-3 px-4 h-[72px]">
|
||||
{/* Artwork */}
|
||||
<div className="w-11 h-11 rounded-xl overflow-hidden border border-[var(--border-color)] shrink-0">
|
||||
{(episode.imageUrl || podcast?.imageUrl)
|
||||
? <img src={episode.imageUrl || podcast!.imageUrl} alt="" className="w-full h-full object-cover" />
|
||||
: <div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-lg">🎙️</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* Artwork + info */}
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1 max-w-[280px]">
|
||||
<div className="w-12 h-12 rounded-xl overflow-hidden border border-[var(--border-color)] shrink-0 shadow-lg">
|
||||
{(episode.imageUrl || podcast?.imageUrl)
|
||||
? <img src={episode.imageUrl || podcast!.imageUrl} alt="" className="w-full h-full object-cover" />
|
||||
: <div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-xl">🎙️</div>
|
||||
}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-bold truncate leading-tight">{episode.title}</p>
|
||||
{isResuming ? (
|
||||
<p className="text-[9px] text-[var(--accent-primary)] font-black uppercase animate-pulse">Reprise de lecture...</p>
|
||||
) : (
|
||||
<p className="text-[10px] text-[var(--text-secondary)] font-bold truncate uppercase tracking-wider">{podcast?.title || ''}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Title */}
|
||||
<div className="min-w-0 flex-1 hidden sm:block">
|
||||
<p className="text-xs font-bold truncate leading-tight">{episode.title}</p>
|
||||
{isResuming ? (
|
||||
<p className="text-[9px] text-[var(--accent-primary)] font-black uppercase animate-pulse">Reprise de lecture...</p>
|
||||
) : (
|
||||
<p className="text-[9px] text-[var(--text-secondary)] font-bold truncate uppercase tracking-wider">{podcast?.title || ''}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<button onClick={() => handleSeek(-30)} className="group flex flex-col items-center gap-0.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors">
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
<span className="text-[8px] font-black">30</span>
|
||||
</button>
|
||||
<button onClick={handlePlayPause}
|
||||
className="w-11 h-11 rounded-full bg-[var(--text-primary)] text-[var(--bg-primary)] flex items-center justify-center shadow-glow-indigo hover:scale-105 active:scale-95 transition-transform">
|
||||
{isPlaying ? <Pause className="w-4 h-4 fill-current" /> : <Play className="w-4 h-4 fill-current ml-0.5" />}
|
||||
</button>
|
||||
<button onClick={() => handleSeek(30)} className="group flex flex-col items-center gap-0.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors">
|
||||
<RotateCw className="w-4 h-4" />
|
||||
<span className="text-[8px] font-black">30</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Controls */}
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<button onClick={() => handleSeek(-30)} className="text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors" aria-label="-30s">
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={handlePlayPause}
|
||||
className="w-10 h-10 rounded-full bg-[var(--accent-primary)] text-white flex items-center justify-center shadow-glow-indigo hover:scale-105 active:scale-95 transition-transform">
|
||||
{isPlaying ? <Pause className="w-4 h-4 fill-current" /> : <Play className="w-4 h-4 fill-current ml-0.5" />}
|
||||
</button>
|
||||
<button onClick={() => handleSeek(30)} className="text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors" aria-label="+30s">
|
||||
<RotateCw className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Floating Progress Bar at the bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1 flex items-center gap-2 group cursor-pointer px-4">
|
||||
<span className="opacity-0 group-hover:opacity-100 transition-opacity absolute -top-6 left-4 text-[9px] bg-black/60 backdrop-blur-md px-2 py-0.5 rounded text-white tabular-nums border border-white/10">{formatTime(currentTime)}</span>
|
||||
<div className="relative flex-1 h-1">
|
||||
<input type="range" min="0" max={duration || 0} value={currentTime}
|
||||
onChange={handleProgressChange}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
|
||||
<div className="w-full h-full bg-[var(--text-primary)]/10 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-secondary)] rounded-full transition-all duration-100"
|
||||
style={{ width: `${progress}%` }} />
|
||||
{/* Time */}
|
||||
<div className="hidden md:flex items-center gap-2 shrink-0 text-[10px] text-[var(--text-secondary)] tabular-nums font-bold">
|
||||
<span>{formatTime(currentTime)}</span>
|
||||
<span className="opacity-40">/</span>
|
||||
<span>{formatTime(duration)}</span>
|
||||
</div>
|
||||
|
||||
{/* Speed + Volume + Expand + Close */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<button onClick={changeSpeed} className="hidden sm:block px-2 py-1 rounded-lg bg-[var(--bg-secondary)] text-[10px] font-black text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all uppercase tracking-tighter w-10">
|
||||
{playbackSpeed}x
|
||||
</button>
|
||||
<button onClick={toggleMute} className="hidden sm:block p-2 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors">
|
||||
{isMuted ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
|
||||
</button>
|
||||
<button onClick={() => setIsExpanded(true)}
|
||||
className="p-2 rounded-xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all"
|
||||
aria-label="Agrandir">
|
||||
<Maximize2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={onClose}
|
||||
className="p-2 rounded-xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-accent-rose transition-all"
|
||||
aria-label="Fermer">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="relative h-1 group cursor-pointer">
|
||||
<input type="range" min="0" max={duration || 0} value={currentTime}
|
||||
onChange={handleProgressChange}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
|
||||
<div className="w-full h-full bg-[var(--text-primary)]/10">
|
||||
<div className="h-full bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-secondary)] transition-all duration-100"
|
||||
style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="opacity-0 group-hover:opacity-100 transition-opacity absolute -top-6 right-4 text-[9px] bg-black/60 backdrop-blur-md px-2 py-0.5 rounded text-white tabular-nums border border-white/10">{formatTime(duration)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Right actions */}
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<button onClick={changeSpeed} className="px-2 py-1 rounded-lg bg-[var(--bg-secondary)] text-[10px] font-black text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all uppercase tracking-tighter w-10">
|
||||
{playbackSpeed}x
|
||||
</button>
|
||||
<button onClick={toggleMute} className="p-2 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors">
|
||||
{isMuted ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
|
||||
</button>
|
||||
<button onClick={() => setIsExpanded(true)}
|
||||
className="p-2 rounded-xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-[var(--accent-primary)] hover:bg-[var(--accent-primary)]/10 transition-all">
|
||||
<Maximize2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={onClose}
|
||||
className="p-2 rounded-xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-accent-rose hover:bg-accent-rose/10 transition-all">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── EXPANDED VIEW ── */}
|
||||
{/* ── EXPANDED VIEW (wrapper for fullscreen) ── */}
|
||||
{isExpanded && (
|
||||
<div className="flex-1 flex flex-col p-8 lg:p-16 overflow-y-auto">
|
||||
<div className={`fixed inset-0 z-[100] ${inverseTheme} text-[var(--text-primary)] ${theme === 'light' ? 'bg-gradient-to-r from-slate-800/95 to-slate-900/95 backdrop-blur-xl' : 'premium-glass'} overflow-hidden flex flex-col`}>
|
||||
<div className="flex-1 flex flex-col p-8 lg:p-16 overflow-y-auto">
|
||||
{/* Top bar */}
|
||||
<div className="flex items-center justify-between mb-10">
|
||||
<button onClick={() => setIsExpanded(false)}
|
||||
@@ -553,7 +555,8 @@ export default function AudioPlayer({ episode, onClose, userId, mode = 'floating
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -124,51 +124,51 @@ export default function Dashboard() {
|
||||
|
||||
<main className="">
|
||||
{/* Welcome Section / Hero — becomes audio player when playing */}
|
||||
<div className="mb-12">
|
||||
{currentEpisode ? (
|
||||
{currentEpisode ? (
|
||||
<div className="mb-12">
|
||||
<AudioPlayer
|
||||
episode={currentEpisode}
|
||||
onClose={closePlayer}
|
||||
userId={user?._id}
|
||||
mode="inline"
|
||||
/>
|
||||
) : (
|
||||
<div className="premium-glass rounded-[var(--radius-panel)] p-8 lg:p-12 relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-[var(--accent-glow)] blur-[80px] -mr-32 -mt-32 group-hover:bg-[var(--accent-primary)]/20 transition-all duration-700" />
|
||||
<div className="relative z-10">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--accent-glow)] border border-[var(--border-color)] text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-widest mb-4">
|
||||
<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 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 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">
|
||||
{episodesInProgress.length > 0 ? (
|
||||
<button
|
||||
onClick={() => playEpisode(episodesInProgress[0])}
|
||||
className="neon-button flex items-center gap-2"
|
||||
>
|
||||
<Play className="w-4 h-4 fill-current" />
|
||||
Reprendre : {episodesInProgress[0].title.substring(0, 20)}...
|
||||
</button>
|
||||
) : (
|
||||
<Link to="/trending" className="neon-button flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
Découvrir
|
||||
</Link>
|
||||
)}
|
||||
<Link to="/trending" className="px-6 py-3 rounded-2xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] font-bold text-sm hover:bg-[var(--accent-primary)]/10 transition-all border border-[var(--border-color)] flex items-center justify-center">
|
||||
Parcourir les tendances
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="premium-glass rounded-[var(--radius-panel)] p-8 lg:p-12 mb-12 relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-[var(--accent-glow)] blur-[80px] -mr-32 -mt-32 group-hover:bg-[var(--accent-primary)]/20 transition-all duration-700" />
|
||||
<div className="relative z-10">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--accent-glow)] border border-[var(--border-color)] text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-widest mb-4">
|
||||
<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 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 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">
|
||||
{episodesInProgress.length > 0 ? (
|
||||
<button
|
||||
onClick={() => playEpisode(episodesInProgress[0])}
|
||||
className="neon-button flex items-center gap-2"
|
||||
>
|
||||
<Play className="w-4 h-4 fill-current" />
|
||||
Reprendre : {episodesInProgress[0].title.substring(0, 20)}...
|
||||
</button>
|
||||
) : (
|
||||
<Link to="/trending" className="neon-button flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
Découvrir
|
||||
</Link>
|
||||
)}
|
||||
<Link to="/trending" className="px-6 py-3 rounded-2xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] font-bold text-sm hover:bg-[var(--accent-primary)]/10 transition-all border border-[var(--border-color)] flex items-center justify-center">
|
||||
Parcourir les tendances
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Continue Listening Section (Only if progression exists) */}
|
||||
{episodesInProgress.length > 0 && (
|
||||
|
||||
Reference in new issue
Block a user