+
+
Podcasts
+
Listen to generated podcasts.
+
+
+ {/* Filter and Search Bar */}
+
+
+
+
+ setSearchQuery(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+ {/* Status Messages */}
+ {isLoading && (
+
+
+
+
Loading podcasts...
+
+
+ )}
+
+ {error && !isLoading && (
+
+
Error loading podcasts
+
{error}
+
+ )}
+
+ {!isLoading && !error && filteredPodcasts.length === 0 && (
+
+
+
No podcasts found
+
+ {searchQuery
+ ? 'Try adjusting your search filters'
+ : 'Generate podcasts from your chats to get started'}
+
+
+ )}
+
+ {/* Podcast Grid */}
+ {!isLoading && !error && filteredPodcasts.length > 0 && (
+
+
+ {filteredPodcasts.map((podcast, index) => (
+
+ playPodcast(podcast)}
+ >
+ {/* Podcast image */}
+

+
+ {/* Overlay for better contrast with controls */}
+
+
+ {/* Loading indicator */}
+ {currentPodcast?.id === podcast.id && isAudioLoading && (
+
+ )}
+
+ {/* Play button */}
+ {!(currentPodcast?.id === podcast.id && (isPlaying || isAudioLoading)) && (
+
+ )}
+
+ {/* Pause button */}
+ {currentPodcast?.id === podcast.id && isPlaying && !isAudioLoading && (
+
+ )}
+
+
+
+
+ {podcast.title || 'Untitled Podcast'}
+
+
+
+ {format(new Date(podcast.created_at), 'MMM d, yyyy')}
+
+
+
+ {currentPodcast?.id === podcast.id && !isAudioLoading && (
+
+
{
+ if (!audioRef.current || !duration) return;
+ const container = e.currentTarget;
+ const rect = container.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const percentage = Math.max(0, Math.min(1, x / rect.width));
+ const newTime = percentage * duration;
+ handleSeek([newTime]);
+ }}
+ >
+
+
+
+ {formatTime(currentTime)}
+ {formatTime(duration)}
+
+
+ )}
+
+ {currentPodcast?.id === podcast.id && !isAudioLoading && (
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ {
+ setPodcastToDelete({ id: podcast.id, title: podcast.title });
+ setDeleteDialogOpen(true);
+ }}
+ >
+
+ Delete Podcast
+
+
+
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Current Podcast Player (Fixed at bottom) */}
+ {currentPodcast && !isAudioLoading && audioSrc && (
+
+
+
+
+
+
+
{currentPodcast.title}
+
+
+
+
+
+
+ {formatTime(currentTime)} / {formatTime(duration)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ {/* Delete Confirmation Dialog */}
+