diff --git a/frontend/index.html b/frontend/index.html index 75d8554..a16e6e3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,8 +5,11 @@ - - Podcastic - Podcast Streaming + + + + + Podcastic - Premium Podcast Streaming
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 39e0a84..f569483 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -27,9 +27,13 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) { } return ( -
+
-
{children}
+
+
+ {children} +
+
); } diff --git a/frontend/src/components/AudioPlayer.tsx b/frontend/src/components/AudioPlayer.tsx index 56a6e5a..2c2204f 100644 --- a/frontend/src/components/AudioPlayer.tsx +++ b/frontend/src/components/AudioPlayer.tsx @@ -8,6 +8,14 @@ import { SkipBack, SkipForward, ChevronDown, + Maximize2, + Minimize2, + List, + VolumeX, + FastForward, + Rewind, + X, + Info } from 'lucide-react'; interface AudioPlayerProps { @@ -24,6 +32,8 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro const [volume, setVolume] = useState(1); const [playbackSpeed, setPlaybackSpeed] = useState(1); const [isSaving, setIsSaving] = useState(false); + const [isMuted, setIsMuted] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); const podcast = typeof episode?.podcastId === 'object' ? episode.podcastId : null; @@ -124,172 +134,165 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro return `${mins}:${secs.toString().padStart(2, '0')}`; }; - if (!episode) { - return null; - } + if (!episode) return null; return (
{ - // Close if clicking the backdrop itself - if (e.target === e.currentTarget) onClose(); - }} + className={`fixed bottom-8 left-1/2 -translate-x-1/2 w-[95%] max-w-6xl z-[100] transition-all duration-700 ease-[cubic-bezier(0.2,0.8,0.2,1)] ${ + isExpanded ? 'h-[80vh] bottom-1/2 translate-y-1/2 rounded-[3rem]' : 'h-24 rounded-[2.5rem]' + } premium-glass p-0 shadow-2xl border-white/10 flex flex-col overflow-hidden animate-slide-up`} > -
- {/* Header */} -
-
-

En cours de lecture

- -
-
- - {/* Player Content */} -
- {/* Artwork */} -
- {podcast?.imageUrl ? ( - {podcast.title} - ) : ( -
- 🎙️ -
- )} -
+