mirror of
https://github.com/R0m1k3/podcastic.git
synced 2026-10-24 15:38:03 +02:00
feat: redesign complet de l'application basé sur les maquettes Stitch
Refonte du design system (CSS variables, composants glass/card/button/badge), nouvelle page PodcastDetails avec route /podcast/:id, lecteur audio immersif avec visualiseur audio, animations, thème dark/light, responsive mobile/desktop. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 4.7 committed
1 parent
ca23996c3b
commit
5c2a6438cd
20 files changed
+1463
-1570
No files matched your search
@@ -3,19 +3,11 @@ import { createPortal } from 'react-dom';
|
||||
import { Episode } from '../services/episodeService';
|
||||
import { useAudio } from '../context/AudioContext';
|
||||
import {
|
||||
Play,
|
||||
Pause,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
ChevronDown,
|
||||
Maximize2,
|
||||
X,
|
||||
RotateCcw,
|
||||
RotateCw,
|
||||
Play, Pause, Volume2, VolumeX, ChevronDown,
|
||||
Maximize2, X, RotateCcw, RotateCw, Headphones,
|
||||
} from 'lucide-react';
|
||||
import AlertModal from './AlertModal';
|
||||
import AudioVisualizer from './AudioVisualizer';
|
||||
import { useTheme } from '../context/ThemeContext';
|
||||
|
||||
interface AudioPlayerProps {
|
||||
episode: Episode | null;
|
||||
@@ -26,50 +18,31 @@ interface AudioPlayerProps {
|
||||
|
||||
export default function AudioPlayer({ episode, onClose, userId, mode = 'floating' }: AudioPlayerProps) {
|
||||
const {
|
||||
isPlaying,
|
||||
currentTime,
|
||||
duration,
|
||||
volume,
|
||||
playbackSpeed,
|
||||
isMuted,
|
||||
isResuming,
|
||||
error,
|
||||
togglePlay,
|
||||
seek,
|
||||
seekRelative,
|
||||
setVolume,
|
||||
toggleMute,
|
||||
changeSpeed,
|
||||
setError,
|
||||
setUserId,
|
||||
isPlaying, currentTime, duration, volume, playbackSpeed,
|
||||
isMuted, isResuming, error,
|
||||
togglePlay, seek, seekRelative, setVolume, toggleMute, changeSpeed,
|
||||
setError, setUserId,
|
||||
} = useAudio();
|
||||
const { theme } = useTheme();
|
||||
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [showMiniBar, setShowMiniBar] = useState(false);
|
||||
const inlineWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const inlineRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Sync userId into context so context can save/load progress
|
||||
useEffect(() => {
|
||||
setUserId(userId ?? null);
|
||||
}, [userId, setUserId]);
|
||||
useEffect(() => { setUserId(userId ?? null); }, [userId, setUserId]);
|
||||
|
||||
// IntersectionObserver: show mini-bar when inline player scrolls out of view
|
||||
useEffect(() => {
|
||||
if (mode !== 'inline' || !inlineWrapperRef.current) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
setShowMiniBar(!entry.isIntersecting);
|
||||
},
|
||||
if (mode !== 'inline' || !inlineRef.current) return;
|
||||
const obs = new IntersectionObserver(
|
||||
([entry]) => setShowMiniBar(!entry.isIntersecting),
|
||||
{ threshold: 0, rootMargin: '-40px 0px 0px 0px' }
|
||||
);
|
||||
observer.observe(inlineWrapperRef.current);
|
||||
return () => observer.disconnect();
|
||||
obs.observe(inlineRef.current);
|
||||
return () => obs.disconnect();
|
||||
}, [mode, episode?._id]);
|
||||
|
||||
const podcast = typeof episode?.podcastId === 'object' ? episode.podcastId : null;
|
||||
|
||||
const formatTime = (s: number) => {
|
||||
const fmt = (s: number) => {
|
||||
if (!isFinite(s)) return '0:00';
|
||||
const m = Math.floor(s / 60);
|
||||
const sec = Math.floor(s % 60);
|
||||
@@ -79,388 +52,266 @@ export default function AudioPlayer({ episode, onClose, userId, mode = 'floating
|
||||
if (!episode) return null;
|
||||
|
||||
const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
|
||||
const inverseTheme = theme === 'light' ? 'dark-theme' : 'light-theme';
|
||||
|
||||
const handleProgressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
seek(parseFloat(e.target.value));
|
||||
};
|
||||
const handleProgress = (e: React.ChangeEvent<HTMLInputElement>) => seek(parseFloat(e.target.value));
|
||||
const handleVolume = (e: React.ChangeEvent<HTMLInputElement>) => setVolume(parseFloat(e.target.value));
|
||||
|
||||
const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setVolume(parseFloat(e.target.value));
|
||||
};
|
||||
const closeAlert = () => { setError(null); onClose(); };
|
||||
|
||||
// ── INLINE MODE (embedded in hero card) ──
|
||||
if (mode === 'inline') {
|
||||
return (
|
||||
<>
|
||||
<div ref={inlineWrapperRef} className="premium-glass rounded-[var(--radius-panel)] p-8 lg:p-10 relative overflow-hidden border border-[var(--border-color)]">
|
||||
<AlertModal
|
||||
isOpen={!!error}
|
||||
title="Erreur de lecture"
|
||||
message={error || ""}
|
||||
type="error"
|
||||
onClose={() => {
|
||||
setError(null);
|
||||
onClose();
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Glow backdrop */}
|
||||
<div className={`absolute top-0 right-0 w-64 h-64 bg-[var(--accent-glow)] blur-[80px] -mr-32 -mt-32 pointer-events-none transition-opacity duration-700 ${isPlaying ? 'animate-aura opacity-100' : 'opacity-40'}`} />
|
||||
|
||||
<div className="relative z-10 flex flex-col lg:flex-row gap-8 items-start lg:items-center">
|
||||
{/* Artwork */}
|
||||
<div className="relative shrink-0">
|
||||
{/* Halo aura derrière l'artwork */}
|
||||
{isPlaying && (
|
||||
<div
|
||||
className="absolute inset-0 rounded-[var(--radius-card)] bg-[var(--accent-primary)]/20 blur-xl animate-aura scale-110 pointer-events-none -z-10"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
<div className="w-36 h-36 lg:w-44 lg:h-44 rounded-[var(--radius-card)] overflow-hidden shadow-2xl border border-[var(--border-color)]">
|
||||
{(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-5xl">🎙️</div>
|
||||
}
|
||||
</div>
|
||||
{isPlaying && (
|
||||
<div className="absolute -bottom-2 -right-2 px-3 py-1 rounded-full bg-[var(--accent-primary)] text-white text-[9px] font-black uppercase tracking-widest shadow-glow-indigo animate-pulse">
|
||||
En cours
|
||||
</div>
|
||||
)}
|
||||
const MiniPlayer = ({ fullWidth }: { fullWidth?: boolean }) => (
|
||||
<div className={`fixed z-[90] mx-auto animate-slide-up max-w-5xl ${fullWidth
|
||||
? '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)]'
|
||||
: 'bottom-6 left-4 right-4 sm:left-6 sm:right-6'}`}>
|
||||
<div className="glass rounded-[var(--radius-lg)] shadow-2xl overflow-hidden">
|
||||
<div className="flex items-center gap-3 px-4 h-[68px]">
|
||||
<div className="w-10 h-10 rounded-lg overflow-hidden border border-[var(--border-color)] shrink-0 shadow-md">
|
||||
{(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-base">🎙️</div>}
|
||||
</div>
|
||||
|
||||
{/* Info + controls */}
|
||||
<div className="flex-1 w-full min-w-0">
|
||||
<div className="flex items-start justify-between gap-4 mb-4">
|
||||
<div className="min-w-0">
|
||||
<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-3">
|
||||
Lecture en cours
|
||||
</div>
|
||||
<p className="text-[10px] font-black text-[var(--text-secondary)] uppercase tracking-widest mb-1 truncate">
|
||||
{podcast?.title || ''}
|
||||
</p>
|
||||
<h2 className="text-2xl lg:text-3xl font-display font-black leading-tight mb-2 line-clamp-2">
|
||||
{episode.title}
|
||||
</h2>
|
||||
{isResuming && (
|
||||
<p className="text-[10px] text-[var(--accent-primary)] font-black uppercase animate-pulse">Reprise de lecture...</p>
|
||||
)}
|
||||
</div>
|
||||
<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 shrink-0"
|
||||
aria-label="Fermer le lecteur"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<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-[0.6rem] text-[var(--accent-primary)] font-bold uppercase animate-pulse">Reprise...</p>
|
||||
: <p className="text-[0.6rem] text-[var(--text-muted)] font-semibold truncate uppercase tracking-wider">{podcast?.title || ''}</p>}
|
||||
</div>
|
||||
|
||||
{/* Progress */}
|
||||
<div className="mb-5">
|
||||
<div className="relative h-1.5 group cursor-pointer mb-2">
|
||||
<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}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] text-[var(--text-secondary)] tabular-nums font-bold">
|
||||
<span>{formatTime(currentTime)}</span>
|
||||
<span>{formatTime(duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<button onClick={() => seekRelative(-30)} className="p-1.5 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors" aria-label="-30s">
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={togglePlay}
|
||||
className="w-10 h-10 rounded-full bg-[var(--accent-primary)] text-white flex items-center justify-center shadow-lg shadow-[var(--accent-primary)]/20 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={() => seekRelative(30)} className="p-1.5 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors" aria-label="+30s">
|
||||
<RotateCw className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Visualiseur audio */}
|
||||
<div className="w-full flex justify-center my-5">
|
||||
<AudioVisualizer barCount={28} height={80} gap={3} />
|
||||
</div>
|
||||
<div className="hidden md:flex items-center gap-1.5 shrink-0 text-[0.65rem] text-[var(--text-secondary)] tabular-nums font-semibold">
|
||||
<span>{fmt(currentTime)}</span><span className="opacity-30">/</span><span>{fmt(duration)}</span>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-5">
|
||||
<button onClick={() => seekRelative(-30)}
|
||||
className="flex flex-col items-center gap-0.5 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors">
|
||||
<RotateCcw className="w-5 h-5" />
|
||||
<span className="text-[8px] font-black">-30s</span>
|
||||
</button>
|
||||
<button onClick={togglePlay}
|
||||
className="w-14 h-14 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-5 h-5 fill-current" /> : <Play className="w-5 h-5 fill-current ml-0.5" />}
|
||||
</button>
|
||||
<button onClick={() => seekRelative(30)}
|
||||
className="flex flex-col items-center gap-0.5 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors">
|
||||
<RotateCw className="w-5 h-5" />
|
||||
<span className="text-[8px] font-black">+30s</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={changeSpeed}
|
||||
className="px-3 py-2 rounded-xl bg-[var(--bg-secondary)] text-[10px] font-black text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all uppercase tracking-widest">
|
||||
{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>
|
||||
<input type="range" min="0" max="1" step="0.05" value={isMuted ? 0 : volume}
|
||||
onChange={handleVolumeChange}
|
||||
className="w-20 h-1 bg-[var(--text-primary)]/10 rounded-full appearance-none cursor-pointer accent-[var(--accent-primary)]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-0.5 shrink-0">
|
||||
<button onClick={changeSpeed} className="hidden sm:block px-2 py-1 rounded-md text-[0.6rem] font-bold text-[var(--text-secondary)] hover:text-[var(--accent-primary)] hover:bg-[var(--bg-surface)] transition-all uppercase">
|
||||
{playbackSpeed}x
|
||||
</button>
|
||||
<button onClick={() => setIsExpanded(true)}
|
||||
className="p-1.5 rounded-md text-[var(--text-secondary)] hover:text-[var(--accent-primary)] hover:bg-[var(--bg-surface)] transition-all"
|
||||
aria-label="Agrandir">
|
||||
<Maximize2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={onClose}
|
||||
className="p-1.5 rounded-md text-[var(--text-secondary)] hover:text-[var(--accent-rose)] hover:bg-[var(--bg-surface)] transition-all"
|
||||
aria-label="Fermer">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-[3px] group cursor-pointer">
|
||||
<input type="range" min="0" max={duration || 0} value={currentTime}
|
||||
onChange={handleProgress}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
|
||||
<div className="w-full h-full bg-[var(--border-color)]">
|
||||
<div className="h-full bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-secondary)] transition-all duration-150"
|
||||
style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* Mini sticky bar appears when inline player scrolls out of view */}
|
||||
{showMiniBar && createPortal(
|
||||
<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">
|
||||
// ── INLINE MODE ──
|
||||
if (mode === 'inline') {
|
||||
return (
|
||||
<>
|
||||
<div ref={inlineRef} className="glass rounded-[var(--radius-xl)] p-8 lg:p-10 relative overflow-hidden">
|
||||
<AlertModal isOpen={!!error} title="Erreur de lecture" message={error || ""} type="error" onClose={closeAlert} />
|
||||
|
||||
<div className={`absolute top-0 right-0 w-64 h-64 bg-[var(--accent-primary)]/8 blur-[80px] -mr-32 -mt-32 pointer-events-none transition-opacity duration-700 ${isPlaying ? 'animate-aura opacity-100' : 'opacity-40'}`} />
|
||||
|
||||
<div className="relative z-10 flex flex-col lg:flex-row gap-8 items-start lg:items-center">
|
||||
<div className="relative shrink-0">
|
||||
{isPlaying && (
|
||||
<div className="absolute inset-0 rounded-2xl bg-[var(--accent-primary)]/20 blur-xl animate-aura scale-110 pointer-events-none -z-10" aria-hidden="true" />
|
||||
)}
|
||||
<div className="w-36 h-36 lg:w-44 lg:h-44 rounded-2xl overflow-hidden shadow-2xl border border-[var(--border-color)] player-artwork-ring">
|
||||
{(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 className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-5xl">🎙️</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>
|
||||
<p className="text-[9px] text-[var(--text-secondary)] font-bold truncate uppercase tracking-wider">{podcast?.title || ''}</p>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<button onClick={() => seekRelative(-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={togglePlay}
|
||||
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={() => seekRelative(30)} className="text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors" aria-label="+30s">
|
||||
<RotateCw className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Time + scroll up */}
|
||||
<div className="hidden md:flex items-center gap-3 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>
|
||||
|
||||
<button onClick={() => inlineWrapperRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
|
||||
className="p-2 rounded-xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all shrink-0"
|
||||
aria-label="Remonter au lecteur"
|
||||
title="Remonter au lecteur">
|
||||
<ChevronDown className="w-4 h-4 rotate-180" />
|
||||
</button>
|
||||
{isPlaying && (
|
||||
<div className="absolute -bottom-2 -right-2 px-3 py-1 rounded-full bg-[var(--accent-primary)] text-white text-[0.6rem] font-extrabold uppercase tracking-wider shadow-lg shadow-[var(--accent-primary)]/30 animate-pulse">
|
||||
En cours
|
||||
</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>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── FLOATING MODE (all pages except dashboard) ──
|
||||
return (
|
||||
<>
|
||||
<AlertModal
|
||||
isOpen={!!error}
|
||||
title="Erreur de lecture"
|
||||
message={error || ""}
|
||||
type="error"
|
||||
onClose={() => {
|
||||
setError(null);
|
||||
onClose();
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* ── COMPACT UNIFIED MINI-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>
|
||||
|
||||
{/* 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 items-center gap-3 shrink-0">
|
||||
<button onClick={() => seekRelative(-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={togglePlay}
|
||||
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={() => seekRelative(30)} className="text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors" aria-label="+30s">
|
||||
<RotateCw className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
<div className="flex-1 w-full min-w-0">
|
||||
<div className="flex items-start justify-between gap-4 mb-4">
|
||||
<div className="min-w-0">
|
||||
<span className="badge badge-accent mb-3">
|
||||
<Headphones className="w-3 h-3" /> Lecture en cours
|
||||
</span>
|
||||
<p className="text-[0.6rem] font-bold text-[var(--text-muted)] uppercase tracking-widest mb-1 truncate">
|
||||
{podcast?.title || ''}
|
||||
</p>
|
||||
<h2 className="text-2xl lg:text-3xl mb-2 line-clamp-2">{episode.title}</h2>
|
||||
{isResuming && (
|
||||
<p className="text-[0.6rem] text-[var(--accent-primary)] font-bold uppercase animate-pulse">Reprise de lecture...</p>
|
||||
)}
|
||||
</div>
|
||||
<button onClick={onClose}
|
||||
className="p-2 rounded-xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-accent-rose transition-all"
|
||||
className="p-2 rounded-lg bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:text-[var(--accent-rose)] hover:bg-[var(--accent-rose)]/10 transition-all shrink-0"
|
||||
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}%` }} />
|
||||
{/* Audio Visualizer */}
|
||||
<div className="w-full flex justify-center my-3">
|
||||
<AudioVisualizer barCount={28} height={70} gap={3} />
|
||||
</div>
|
||||
|
||||
{/* Progress */}
|
||||
<div className="mb-4">
|
||||
<div className="relative h-1.5 group cursor-pointer mb-2">
|
||||
<input type="range" min="0" max={duration || 0} value={currentTime}
|
||||
onChange={handleProgress}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
|
||||
<div className="w-full h-full bg-[var(--border-color)] rounded-full overflow-hidden">
|
||||
<div className="h-full bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-secondary)] rounded-full transition-all"
|
||||
style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-[0.65rem] text-[var(--text-muted)] tabular-nums font-semibold">
|
||||
<span>{fmt(currentTime)}</span><span>{fmt(duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-5">
|
||||
<button onClick={() => seekRelative(-30)}
|
||||
className="flex flex-col items-center gap-0.5 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors">
|
||||
<RotateCcw className="w-5 h-5" /><span className="text-[0.55rem] font-extrabold">-30s</span>
|
||||
</button>
|
||||
<button onClick={togglePlay}
|
||||
className="w-14 h-14 rounded-full bg-[var(--accent-primary)] text-white flex items-center justify-center shadow-lg shadow-[var(--accent-primary)]/20 hover:scale-105 active:scale-95 transition-transform">
|
||||
{isPlaying ? <Pause className="w-5 h-5 fill-current" /> : <Play className="w-5 h-5 fill-current ml-0.5" />}
|
||||
</button>
|
||||
<button onClick={() => seekRelative(30)}
|
||||
className="flex flex-col items-center gap-0.5 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors">
|
||||
<RotateCw className="w-5 h-5" /><span className="text-[0.55rem] font-extrabold">+30s</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={changeSpeed}
|
||||
className="px-3 py-2 rounded-lg bg-[var(--bg-surface)] text-[0.65rem] font-bold text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all uppercase tracking-wider">
|
||||
{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>
|
||||
<input type="range" min="0" max="1" step="0.05" value={isMuted ? 0 : volume}
|
||||
onChange={handleVolume} className="w-20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── EXPANDED VIEW ── */}
|
||||
{isExpanded && (
|
||||
<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`}>
|
||||
{showMiniBar && createPortal(<MiniPlayer fullWidth />, document.body)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── FLOATING MODE ──
|
||||
return (
|
||||
<>
|
||||
<AlertModal isOpen={!!error} title="Erreur de lecture" message={error || ""} type="error" onClose={closeAlert} />
|
||||
|
||||
{!isExpanded ? (
|
||||
<MiniPlayer />
|
||||
) : (
|
||||
<div className="fixed inset-0 z-[100] bg-[var(--bg-base)]/95 backdrop-blur-2xl 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)}
|
||||
className="p-3 rounded-2xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all">
|
||||
className="w-11 h-11 rounded-xl bg-[var(--bg-surface)] border border-[var(--border-color)] flex items-center justify-center text-[var(--text-secondary)] hover:text-[var(--accent-primary)] hover:border-[var(--border-hover)] transition-all">
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
</button>
|
||||
<p className="text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-[0.3em]">En cours de lecture</p>
|
||||
<span className="text-[0.65rem] font-bold text-[var(--accent-primary)] uppercase tracking-[0.2em]">En cours de lecture</span>
|
||||
<button onClick={onClose}
|
||||
className="p-3 rounded-2xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-accent-rose transition-all">
|
||||
className="w-11 h-11 rounded-xl bg-[var(--bg-surface)] border border-[var(--border-color)] flex items-center justify-center text-[var(--text-secondary)] hover:text-[var(--accent-rose)] hover:border-[var(--border-hover)] transition-all">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-12 items-center flex-1">
|
||||
{/* Artwork */}
|
||||
<div className="w-64 h-64 lg:w-80 lg:h-80 rounded-[2.5rem] overflow-hidden shadow-2xl border border-[var(--border-color)] shrink-0">
|
||||
<div className="w-64 h-64 lg:w-80 lg:h-80 rounded-[2rem] overflow-hidden shadow-2xl border border-[var(--border-color)] shrink-0 player-artwork-ring">
|
||||
{(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-7xl">🎙️</div>
|
||||
}
|
||||
: <div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-7xl">🎙️</div>}
|
||||
</div>
|
||||
|
||||
{/* Info + controls */}
|
||||
<div className="flex flex-col gap-8 flex-1 w-full max-w-lg">
|
||||
<div>
|
||||
<p className="text-xs font-black text-[var(--accent-primary)] uppercase tracking-widest mb-2">{podcast?.title}</p>
|
||||
<h2 className="text-3xl lg:text-4xl font-display font-black leading-tight mb-3">{episode.title}</h2>
|
||||
<p className="text-sm text-[var(--text-secondary)] leading-relaxed line-clamp-3">{episode.description}</p>
|
||||
<p className="text-xs font-bold text-[var(--accent-primary)] uppercase tracking-widest mb-2">
|
||||
{podcast?.title}
|
||||
</p>
|
||||
<h2 className="text-3xl lg:text-4xl mb-3">{episode.title}</h2>
|
||||
<p className="text-sm text-[var(--text-secondary)] leading-relaxed line-clamp-3">
|
||||
{episode.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Progress */}
|
||||
<AudioVisualizer barCount={36} height={80} gap={3} />
|
||||
|
||||
<div>
|
||||
<div className="relative h-1.5 group cursor-pointer mb-2">
|
||||
<input type="range" min="0" max={duration || 0} value={currentTime}
|
||||
onChange={handleProgressChange}
|
||||
onChange={handleProgress}
|
||||
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="w-full h-full bg-[var(--border-color)] rounded-full overflow-hidden">
|
||||
<div className="h-full bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-secondary)] rounded-full"
|
||||
style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-[var(--text-secondary)] tabular-nums">
|
||||
<span>{formatTime(currentTime)}</span>
|
||||
<span>{formatTime(duration)}</span>
|
||||
<div className="flex justify-between text-xs text-[var(--text-muted)] tabular-nums">
|
||||
<span>{fmt(currentTime)}</span><span>{fmt(duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center justify-center gap-8">
|
||||
<button onClick={() => seekRelative(-30)}
|
||||
className="flex flex-col items-center gap-1 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors group">
|
||||
<RotateCcw className="w-6 h-6 group-hover:scale-110 transition-transform" />
|
||||
<span className="text-[9px] font-black">-30s</span>
|
||||
<span className="text-[0.6rem] font-extrabold">-30s</span>
|
||||
</button>
|
||||
|
||||
<button onClick={togglePlay}
|
||||
className="w-20 h-20 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">
|
||||
className="w-20 h-20 rounded-full bg-[var(--text-primary)] text-[var(--bg-base)] flex items-center justify-center shadow-2xl hover:scale-105 active:scale-95 transition-transform">
|
||||
{isPlaying ? <Pause className="w-8 h-8 fill-current" /> : <Play className="w-8 h-8 fill-current ml-1" />}
|
||||
</button>
|
||||
|
||||
<button onClick={() => seekRelative(30)}
|
||||
className="flex flex-col items-center gap-1 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors group">
|
||||
<RotateCw className="w-6 h-6 group-hover:scale-110 transition-transform" />
|
||||
<span className="text-[9px] font-black">+30s</span>
|
||||
<span className="text-[0.6rem] font-extrabold">+30s</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Volume */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={changeSpeed} className="px-3 py-1.5 rounded-xl bg-[var(--bg-secondary)] text-xs font-black text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all uppercase tracking-widest">
|
||||
<button onClick={changeSpeed}
|
||||
className="px-3 py-1.5 rounded-lg bg-[var(--bg-surface)] text-xs font-bold text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all uppercase tracking-wider border border-[var(--border-color)]">
|
||||
{playbackSpeed}x Speed
|
||||
</button>
|
||||
<button onClick={toggleMute} className="text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors shrink-0">
|
||||
{isMuted ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
|
||||
</button>
|
||||
<input type="range" min="0" max="1" step="0.05" value={isMuted ? 0 : volume}
|
||||
onChange={handleVolumeChange}
|
||||
className="flex-1 h-1 bg-[var(--text-primary)]/10 rounded-full appearance-none cursor-pointer accent-[var(--accent-primary)]" />
|
||||
onChange={handleVolume} className="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user