From 2d3a2c921c1fe874720f97446d9b8f9c7ea482b8 Mon Sep 17 00:00:00 2001 From: meetoza30 Date: Thu, 21 Aug 2025 20:13:49 +0530 Subject: [PATCH] updated the design of the podcasts page --- src/pages/podcasts/details.css | 765 +++++++++++++++++++++++++++++++++ src/pages/podcasts/details.tsx | 302 +++++++++++-- src/pages/podcasts/index.css | 735 +++++++++++++++++++++++++------ src/pages/podcasts/index.tsx | 266 +++++++++--- 4 files changed, 1837 insertions(+), 231 deletions(-) create mode 100644 src/pages/podcasts/details.css diff --git a/src/pages/podcasts/details.css b/src/pages/podcasts/details.css new file mode 100644 index 00000000..925f324c --- /dev/null +++ b/src/pages/podcasts/details.css @@ -0,0 +1,765 @@ +/* Enhanced Podcast Details Styles - Matching Main Design */ + +/* Keyframe Animations */ +@keyframes detailsFadeIn { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes shimmerLoad { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +@keyframes floatAnimation { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-6px); + } +} + +@keyframes pulseGlow { + 0%, 100% { + box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); + } + 50% { + box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.1); + } +} + +/* Main Container */ +.enhanced-details-container { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; + background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important; + color: #e2e8f0 !important; + min-height: 100vh; + position: relative; + overflow: hidden; +} + +/* Force theme independence */ +[data-theme='dark'] .enhanced-details-container, +[data-theme='light'] .enhanced-details-container, +html[data-theme='dark'] .enhanced-details-container, +html[data-theme='light'] .enhanced-details-container { + background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important; + color: #e2e8f0 !important; +} + +/* Background Effects */ +.enhanced-details-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 30% 20%, rgba(120, 119, 198, 0.08) 0%, transparent 60%), + radial-gradient(circle at 70% 80%, rgba(255, 119, 198, 0.06) 0%, transparent 60%), + radial-gradient(circle at 20% 60%, rgba(120, 219, 255, 0.04) 0%, transparent 60%); + animation: backgroundShift 20s ease-in-out infinite; + pointer-events: none; +} + +@keyframes backgroundShift { + 0%, 100% { transform: translateX(0px) translateY(0px) scale(1); } + 33% { transform: translateX(20px) translateY(-15px) scale(1.01); } + 66% { transform: translateX(-15px) translateY(20px) scale(0.99); } +} + +/* Navigation Header */ +.details-navigation { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24px 32px; + background: rgba(255, 255, 255, 0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(20px); + position: sticky; + top: 0; + z-index: 100; +} + +.nav-back-button { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 20px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 12px; + color: #cbd5e1; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; +} + +.nav-back-button:hover { + background: rgba(255, 255, 255, 0.15); + color: #ffffff; + transform: translateX(-2px); + border-color: rgba(102, 126, 234, 0.3); +} + +.nav-icon { + font-size: 16px; + transition: transform 0.3s ease; +} + +.nav-back-button:hover .nav-icon { + transform: translateX(-2px); +} + +.nav-actions { + display: flex; + gap: 12px; +} + +.nav-action-button { + width: 44px; + height: 44px; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 12px; + background: rgba(255, 255, 255, 0.1); + color: #cbd5e1; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.nav-action-button:hover { + background: rgba(255, 255, 255, 0.2); + color: #ffffff; + transform: scale(1.1); + border-color: rgba(102, 126, 234, 0.3); +} + +.action-icon { + font-size: 16px; +} + +/* Main Content */ +.details-content { + max-width: 1000px; + margin: 0 auto; + padding: 40px 32px 80px; + position: relative; + z-index: 2; +} + +/* Hero Section */ +.details-hero { + text-align: center; + margin-bottom: 60px; + animation: detailsFadeIn 0.8s ease-out; +} + +.hero-content { + max-width: 800px; + margin: 0 auto; +} + +/* Enhanced Podcast Title */ +.enhanced-podcast-title { + margin-bottom: 32px; +} + +.title-badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 20px; + font-size: 14px; + font-weight: 600; + color: white; + margin-bottom: 20px; + animation: pulseGlow 3s infinite; +} + +.badge-icon { + font-size: 16px; +} + +.main-title { + font-size: 42px; + font-weight: 900; + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #e2e8f0 60%, #cbd5e1 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin: 0 0 16px 0; + line-height: 1.2; + letter-spacing: -0.02em; +} + +.artist-info { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + margin-top: 12px; +} + +.by-text { + color: #94a3b8; + font-size: 16px; + font-weight: 500; +} + +.artist-name { + color: #cbd5e1; + font-size: 16px; + font-weight: 700; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Loading States */ +.title-loading { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + margin-bottom: 32px; +} + +.loading-shimmer { + background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%); + background-size: 200% 100%; + animation: shimmerLoad 2s infinite; + border-radius: 8px; + height: 20px; +} + +.loading-shimmer.large { width: 400px; height: 32px; } +.loading-shimmer.medium { width: 250px; height: 16px; } +.loading-shimmer.small { width: 150px; height: 12px; } + +.hero-description { + font-size: 18px; + color: #cbd5e1; + line-height: 1.6; + margin-bottom: 32px; + opacity: 0.9; +} + +/* Quick Stats */ +.quick-stats { + display: flex; + justify-content: center; + gap: 16px; + flex-wrap: wrap; +} + +.stat-pill { + display: flex; + align-items: center; + gap: 6px; + padding: 8px 16px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 20px; + font-size: 14px; + font-weight: 600; + backdrop-filter: blur(10px); + animation: floatAnimation 4s ease-in-out infinite; +} + +.stat-pill:nth-child(2) { animation-delay: 0.5s; } +.stat-pill:nth-child(3) { animation-delay: 1s; } + +.stat-icon { + font-size: 14px; +} + +/* Enhanced Embed Section */ +.enhanced-embed-section { + margin-bottom: 60px; + animation: detailsFadeIn 0.8s ease-out 0.2s both; +} + +.embed-container { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 24px; + padding: 24px; + backdrop-filter: blur(20px); + transition: all 0.3s ease; +} + +.embed-container:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(102, 126, 234, 0.3); + transform: translateY(-4px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); +} + +.embed-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.embed-title { + display: flex; + align-items: center; + gap: 12px; + font-size: 22px; + font-weight: 700; + color: #ffffff; + margin: 0; +} + +.title-icon { + font-size: 20px; +} + +.embed-controls { + display: flex; + gap: 8px; +} + +.control-button { + width: 36px; + height: 36px; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + background: rgba(255, 255, 255, 0.1); + color: #cbd5e1; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.control-button:hover { + background: rgba(255, 255, 255, 0.2); + color: #ffffff; +} + +.spotify-embed-wrapper { + border-radius: 16px; + overflow: hidden; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); + margin-bottom: 20px; +} + +.spotify-embed-wrapper iframe { + border-radius: 16px; +} + +.embed-footer { + display: flex; + justify-content: space-between; + align-items: center; +} + +.platform-badge { + display: flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%); + border-radius: 16px; + font-size: 12px; + font-weight: 600; + color: white; +} + +.spotify-icon { + font-size: 12px; +} + +.embed-actions { + display: flex; + gap: 12px; +} + +.embed-action { + display: flex; + align-items: center; + gap: 6px; + padding: 8px 16px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + color: #cbd5e1; + text-decoration: none; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.embed-action:hover { + background: rgba(255, 255, 255, 0.2); + color: #ffffff; + transform: translateY(-1px); +} + +.embed-action.external { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-color: transparent; + color: white; +} + +.embed-action.external:hover { + background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4); +} + +/* Features Section */ +.features-section { + margin-bottom: 60px; + animation: detailsFadeIn 0.8s ease-out 0.4s both; +} + +.section-title { + display: flex; + align-items: center; + gap: 12px; + font-size: 28px; + font-weight: 700; + color: #ffffff; + margin-bottom: 32px; + text-align: center; + justify-content: center; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 20px; +} + +.feature-card { + display: flex; + align-items: center; + gap: 16px; + padding: 20px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + backdrop-filter: blur(10px); + transition: all 0.3s ease; + animation: detailsFadeIn 0.6s ease-out both; +} + +.feature-card:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(102, 126, 234, 0.3); + transform: translateY(-4px); + box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); +} + +.feature-icon { + font-size: 24px; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 12px; + flex-shrink: 0; +} + +.feature-content { + flex: 1; +} + +.feature-title { + font-size: 16px; + font-weight: 700; + color: #ffffff; + margin: 0 0 4px 0; +} + +.feature-description { + font-size: 14px; + color: #94a3b8; + margin: 0; + line-height: 1.4; +} + +/* Suggestions Section */ +.suggestions-section { + animation: detailsFadeIn 0.8s ease-out 0.6s both; +} + +.suggestions-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 24px; +} + +.suggestion-card { + display: flex; + align-items: center; + gap: 20px; + padding: 24px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 20px; + backdrop-filter: blur(20px); + transition: all 0.4s ease; + position: relative; + overflow: hidden; +} + +.suggestion-card::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent); + transition: left 0.6s ease; +} + +.suggestion-card:hover::before { + left: 100%; +} + +.suggestion-card:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(102, 126, 234, 0.3); + transform: translateY(-6px); + box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2); +} + +.suggestion-card.primary { + background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); +} + +.suggestion-card.secondary { + background: linear-gradient(135deg, rgba(240, 147, 251, 0.1) 0%, rgba(245, 87, 108, 0.1) 100%); +} + +.suggestion-icon { + font-size: 32px; + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 16px; + flex-shrink: 0; +} + +.suggestion-text { + flex: 1; +} + +.suggestion-text h3 { + font-size: 18px; + font-weight: 700; + color: #ffffff; + margin: 0 0 8px 0; +} + +.suggestion-text p { + font-size: 14px; + color: #94a3b8; + margin: 0; + line-height: 1.4; +} + +.suggestion-button { + padding: 12px 20px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 12px; + color: white; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + white-space: nowrap; +} + +.suggestion-button:hover { + background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4); +} + +/* Error State */ +.error-state { + text-align: center; + padding: 120px 20px; + max-width: 500px; + margin: 0 auto; +} + +.error-icon { + font-size: 80px; + margin-bottom: 32px; + opacity: 0.6; + animation: floatAnimation 3s ease-in-out infinite; +} + +.error-title { + font-size: 32px; + font-weight: 700; + color: #ffffff; + margin: 0 0 16px 0; +} + +.error-description { + font-size: 16px; + color: #94a3b8; + margin: 0 0 32px 0; + line-height: 1.6; +} + +.back-to-podcasts { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 16px 24px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 12px; + color: white; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; +} + +.back-to-podcasts:hover { + background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%); + transform: translateY(-2px); + box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4); +} + +.button-icon { + font-size: 16px; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .details-navigation { + padding: 16px 20px; + } + + .nav-back-button { + padding: 10px 16px; + } + + .nav-text { + display: none; + } + + .details-content { + padding: 32px 20px 60px; + } + + .main-title { + font-size: 28px; + } + + .hero-description { + font-size: 16px; + } + + .quick-stats { + flex-direction: column; + align-items: center; + } + + .embed-container { + padding: 20px; + } + + .embed-header { + flex-direction: column; + gap: 16px; + text-align: center; + } + + .embed-footer { + flex-direction: column; + gap: 16px; + text-align: center; + } + + .features-grid { + grid-template-columns: 1fr; + } + + .feature-card { + flex-direction: column; + text-align: center; + } + + .suggestions-content { + grid-template-columns: 1fr; + } + + .suggestion-card { + flex-direction: column; + text-align: center; + } +} + +@media (max-width: 480px) { + .main-title { + font-size: 24px; + } + + .section-title { + font-size: 22px; + } + + .embed-container { + padding: 16px; + } + + .spotify-embed-wrapper iframe { + height: 300px; + } +} + +/* Force all text colors to be consistent */ +[data-theme='dark'] .enhanced-details-container *, +[data-theme='light'] .enhanced-details-container *, +html[data-theme='dark'] .enhanced-details-container *, +html[data-theme='light'] .enhanced-details-container * { + color: inherit !important; +} + +[data-theme='dark'] .enhanced-details-container h1, +[data-theme='dark'] .enhanced-details-container h2, +[data-theme='dark'] .enhanced-details-container h3, +[data-theme='light'] .enhanced-details-container h1, +[data-theme='light'] .enhanced-details-container h2, +[data-theme='light'] .enhanced-details-container h3 { + color: #ffffff !important; +} diff --git a/src/pages/podcasts/details.tsx b/src/pages/podcasts/details.tsx index 4101c5e4..9adbaf72 100644 --- a/src/pages/podcasts/details.tsx +++ b/src/pages/podcasts/details.tsx @@ -1,8 +1,8 @@ import React from 'react'; import Layout from '@theme/Layout'; import type { ReactElement } from 'react'; -import { useLocation } from '@docusaurus/router'; -import './index.css'; +import { useLocation, useHistory } from '@docusaurus/router'; +import './details.css'; interface PodcastData { id: string; @@ -19,56 +19,146 @@ interface SpotifyTitleProps { type: 'episode' | 'show' | 'playlist'; } -// Fetches the podcast/show/episode title from Spotify oEmbed API +// Enhanced Spotify Title Component const SpotifyTitle: React.FC = ({ spotifyUrl, type }) => { const [title, setTitle] = React.useState(''); + const [artist, setArtist] = React.useState(''); + const [loading, setLoading] = React.useState(true); React.useEffect(() => { let cancelled = false; + setLoading(true); fetch(`https://open.spotify.com/oembed?url=${encodeURIComponent(spotifyUrl)}`) .then(res => res.json()) .then(data => { - if (!cancelled) setTitle(data.title); + if (!cancelled) { + setTitle(data.title); + // Extract artist/show info if available + if (data.author_name) { + setArtist(data.author_name); + } + setLoading(false); + } }) .catch(() => { - if (!cancelled) setTitle(''); + if (!cancelled) { + setTitle(''); + setLoading(false); + } }); return () => { cancelled = true; }; }, [spotifyUrl]); + + if (loading) { + return ( +
+
+
+
+
+ ); + } + return ( -
- {title || (type.charAt(0).toUpperCase() + type.slice(1))} +
+
+ + {type === 'episode' ? '🎙️' : type === 'show' ? '📻' : '🎵'} + + {type.charAt(0).toUpperCase() + type.slice(1)} +
+

+ {title || `Featured ${type.charAt(0).toUpperCase() + type.slice(1)}`} +

+ {artist && ( +
+ by + {artist} +
+ )}
); }; export default function PodcastDetails(): ReactElement { const location = useLocation(); + const history = useHistory(); const state = location.state as LocationState; const podcast = state?.podcast; - // Random descriptive text about podcasts - const descriptions = [ - "Dive deep into fascinating conversations and thought-provoking content.", - "Experience the power of audio storytelling at its finest.", - "Join us on a journey of discovery through captivating discussions.", - "Explore new perspectives and expand your horizons.", - "Listen to expert insights and engaging narratives.", - "Uncover the stories behind the stories.", - "Get inspired by the voices that shape our world.", - "Tune in to the latest trends and timeless tales.", - "Discover the art of conversation and the beauty of sound.", + // Enhanced descriptions with categories + const descriptions = { + episode: [ + "Dive deep into fascinating conversations and thought-provoking content that challenges conventional thinking.", + "Experience expert insights and engaging narratives that expand your understanding of the world.", + "Join compelling discussions that bridge the gap between knowledge and practical wisdom.", + "Explore unique perspectives from industry leaders and innovative thinkers.", + "Uncover hidden stories and behind-the-scenes insights that mainstream media rarely covers." + ], + show: [ + "Discover a treasure trove of episodes covering diverse topics and groundbreaking ideas.", + "Follow an incredible journey of storytelling that spans multiple fascinating episodes.", + "Experience consistent quality content that keeps you coming back for more insights.", + "Join a community of listeners who appreciate depth, authenticity, and expert curation.", + "Explore a comprehensive collection of discussions that shape modern discourse." + ], + playlist: [ + "Enjoy a carefully curated selection of audio content designed for your listening pleasure.", + "Experience the perfect blend of entertainment and education in one convenient collection.", + "Discover diverse voices and perspectives assembled into a cohesive listening experience.", + "Tune into a handpicked selection that showcases the best of podcast storytelling.", + "Explore a thoughtfully arranged collection that takes you on an audio journey." + ] + }; + + // Additional podcast features + const features = [ + { icon: "🎯", label: "Expert Insights", description: "Learn from industry professionals" }, + { icon: "🌟", label: "Premium Quality", description: "High-quality audio production" }, + { icon: "📈", label: "Trending Content", description: "Stay ahead with latest topics" }, + { icon: "🎧", label: "Immersive Experience", description: "Engaging storytelling format" } ]; - // Get a random description - const randomDescription = descriptions[Math.floor(Math.random() * descriptions.length)]; + const getRandomDescription = (type: 'episode' | 'show' | 'playlist') => { + const typeDescriptions = descriptions[type]; + return typeDescriptions[Math.floor(Math.random() * typeDescriptions.length)]; + }; + + const handleBack = () => { + history.goBack(); + }; + + const handleShare = async () => { + if (navigator.share) { + try { + await navigator.share({ + title: `Check out this ${podcast.type}`, + url: podcast.spotifyUrl + }); + } catch (err) { + // Fallback to clipboard + navigator.clipboard.writeText(podcast.spotifyUrl); + } + } else { + navigator.clipboard.writeText(podcast.spotifyUrl); + } + }; if (!podcast) { return ( -
-

Podcast Not Found

-

Sorry, we couldn't find the podcast you're looking for.

+
+
+
🔍
+

Podcast Not Found

+

+ Sorry, we couldn't find the podcast you're looking for. +

+ +
); @@ -76,26 +166,158 @@ export default function PodcastDetails(): ReactElement { return ( -
-
-
-
+
+ {/* Navigation Header */} +
+ +
+ + +
+
+ + {/* Main Content */} +
+ {/* Hero Section */} +
+
+

+ {getRandomDescription(podcast.type)} +

+ + {/* Quick Stats */} +
+
+ ⏱️ + Premium Content +
+
+ 🎯 + Expert Curated +
+
+ 🔥 + Trending +
+
-
-

{randomDescription}

+
+ + {/* Enhanced Embed Section */} +
+
+
+

+ 🎧 + Listen Now +

+
+ +
+
+ +
+