Loading...
Installation
Usage
import PodcastCardPlayer from "@/components/ruixen/podcast-card-player";
export default function App() {
return (
<PodcastCardPlayer
imageSrc="https://example.com/podcast-cover.jpg"
title="The Tech Podcast"
episode="Episode 42: AI Revolution"
audioSrc="https://example.com/episode-42.mp3"
width={350}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageSrc | string | - | URL of the podcast cover image |
title | string | - | Podcast title |
episode | string | - | Episode title/description |
audioSrc | string | - | URL of the audio file |
width | number | 350 | Width of the card |
className | string | - | Additional CSS classes |
Features
- Cover Art Display: Large podcast cover image
- Episode Information: Title and episode details
- Progress Bar: Visual progress indicator
- Seek Control: Click progress bar to seek
- Play/Pause Button: Audio playback controls
- Time Display: Current time and total duration
- Card Layout: Clean, organized design
- Responsive: Adapts to different screen sizes
Layout Structure
The card includes:
- Cover Image: 160px height, rounded corners
- Title Section: Podcast and episode names
- Progress Bar: Clickable seek control
- Controls Row: Play button and time display
Time Format
Times are displayed in MM:SS format:
- Current:
2:34 - Total:
45:12
