Michael/podcastic
1
0 Fork 0
mirror of https://github.com/R0m1k3/podcastic.git synced 2026-10-24 15:38:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement AudioPlayer component with playback controls, progress tracking, and persistence

Browse Source
This commit is contained in:
Michael committed 2026-04-16 16:22:46 +02:00
1 parent 5305f3e5f6
commit dfd2cce761
1 file changed
+9 -7
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AudioPlayer.tsx
+9 -7
View File
@@ -205,8 +205,8 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
</div> </div>
</div> </div>
{/* Controls + progress */} {/* Controls */}
<div className="flex-1 flex flex-col items-center gap-1.5"> <div className="flex-1 flex items-center justify-center">
<div className="flex items-center gap-5"> <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"> <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" /> <RotateCcw className="w-4 h-4" />
@@ -221,9 +221,12 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
<span className="text-[8px] font-black">30</span> <span className="text-[8px] font-black">30</span>
</button> </button>
</div> </div>
<div className="w-full max-w-lg flex items-center gap-2"> </div>
<span className="text-[9px] text-[var(--text-secondary)] tabular-nums w-8 text-right">{formatTime(currentTime)}</span>
<div className="relative flex-1 h-1 group cursor-pointer"> {/* 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} <input type="range" min="0" max={duration || 0} value={currentTime}
onChange={handleProgressChange} onChange={handleProgressChange}
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" /> className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
@@ -232,8 +235,7 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
style={{ width: `${progress}%` }} /> style={{ width: `${progress}%` }} />
</div> </div>
</div> </div>
<span className="text-[9px] text-[var(--text-secondary)] tabular-nums w-8">{formatTime(duration)}</span> <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>
</div> </div>
{/* Right actions */} {/* Right actions */}