Podcast polish: taller videocast, redesigned player + episode list - Videocast featured height 200 -> 440px, rounded - Podcast: full-width navy player card (cover, progress, controls) + clean episode list with active highlight; RTL-correct prev/next + play direction Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> @
This commit is contained in:
alireza
parent
27e64ee3e6
commit
121082abc9
|
|
@ -99,8 +99,8 @@ export default function VideocastPodcastSection({ only }: { only?: 'video' | 'po
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* featured */}
|
{/* featured */}
|
||||||
<div style={{ marginBottom: 16, position: 'relative', overflow: 'hidden', background: '#000', flex: 1, minHeight: 200 }}>
|
<div style={{ marginBottom: 16, position: 'relative', overflow: 'hidden', background: '#000', flex: 1, minHeight: 440, borderRadius: 14 }} className="max-md:!min-h-[260px]">
|
||||||
<img src={VIDEOS[activeVideo].thumb} alt="" style={{ width: '100%', height: '100%', minHeight: 220, objectFit: 'cover', display: 'block', opacity: 0.82, position: 'absolute', inset: 0 }} />
|
<img src={VIDEOS[activeVideo].thumb} alt="" style={{ width: '100%', height: '100%', minHeight: 440, objectFit: 'cover', display: 'block', opacity: 0.82, position: 'absolute', inset: 0 }} />
|
||||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(7,29,73,0.88) 0%, transparent 55%)' }} />
|
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(7,29,73,0.88) 0%, transparent 55%)' }} />
|
||||||
{/* play */}
|
{/* play */}
|
||||||
<div style={{
|
<div style={{
|
||||||
|
|
@ -147,12 +147,13 @@ export default function VideocastPodcastSection({ only }: { only?: 'video' | 'po
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* ── PODCAST 30% ── */}
|
{/* ── PODCAST (full width) ── */}
|
||||||
{showPod && (
|
{showPod && (
|
||||||
<div style={{ padding: '48px 40px 80px 0', background: 'var(--paper)', display: 'flex', flexDirection: 'column', borderRight: 'none' }} className="max-md:!p-5 max-lg:!border-r-0 max-lg:!border-t-2 max-lg:!border-t-[var(--ink)] max-lg:!pt-10">
|
<div style={{ padding: '48px 40px 80px', background: 'var(--paper)' }} className="max-md:!p-5">
|
||||||
|
|
||||||
{/* heading */}
|
{/* heading */}
|
||||||
<div style={{ marginBottom: 28 }}>
|
<div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 28, flexWrap: 'wrap', gap: 12 }}>
|
||||||
|
<div>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
|
||||||
<div style={{ width: 28, height: 2, background: 'var(--red)' }} />
|
<div style={{ width: 28, height: 2, background: 'var(--red)' }} />
|
||||||
<span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', color: 'var(--ink-4)' }}>PODCAST</span>
|
<span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', color: 'var(--ink-4)' }}>PODCAST</span>
|
||||||
|
|
@ -160,68 +161,87 @@ export default function VideocastPodcastSection({ only }: { only?: 'video' | 'po
|
||||||
<h2 style={{ fontSize: 22, fontWeight: 900, letterSpacing: '-0.5px', color: 'var(--ink)', margin: 0 }}>{t.podLabel}</h2>
|
<h2 style={{ fontSize: 22, fontWeight: 900, letterSpacing: '-0.5px', color: 'var(--ink)', margin: 0 }}>{t.podLabel}</h2>
|
||||||
<p style={{ fontSize: 12, color: 'var(--ink-4)', margin: '4px 0 0' }}>{t.podSub}</p>
|
<p style={{ fontSize: 12, color: 'var(--ink-4)', margin: '4px 0 0' }}>{t.podSub}</p>
|
||||||
</div>
|
</div>
|
||||||
|
<button style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink)', background: 'none', border: '1px solid var(--ink)', padding: '6px 16px', cursor: 'pointer', fontFamily: 'inherit' }}>
|
||||||
{/* circular cover + info */}
|
{t.listenAll}
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 24 }}>
|
</button>
|
||||||
<div style={{ position: 'relative', marginBottom: 20 }}>
|
|
||||||
{/* spinning gradient ring */}
|
|
||||||
<div style={{
|
|
||||||
position: 'absolute', inset: -4,
|
|
||||||
borderRadius: '50%',
|
|
||||||
background: 'conic-gradient(from 0deg, #07468a, #0ea5e9, #14b8a6, #9b1c1c, #07468a)',
|
|
||||||
animation: 'spinRing 3s linear infinite',
|
|
||||||
zIndex: 0,
|
|
||||||
}} />
|
|
||||||
{/* white gap ring */}
|
|
||||||
<div style={{
|
|
||||||
position: 'absolute', inset: -1,
|
|
||||||
borderRadius: '50%',
|
|
||||||
background: 'var(--paper)',
|
|
||||||
zIndex: 1,
|
|
||||||
}} />
|
|
||||||
<img src={pod.cover} alt="" style={{ position: 'relative', width: 180, height: 180, borderRadius: '50%', objectFit: 'cover', display: 'block', zIndex: 2 }} />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ textAlign: 'center' }}>
|
{/* featured player (start) + episode list (end) */}
|
||||||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', color: 'var(--red)', marginBottom: 6 }}>{pod[lang].ep}</div>
|
<div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 28, alignItems: 'start' }} className="max-lg:!grid-cols-1">
|
||||||
<h3 style={{ fontSize: 15, fontWeight: 900, color: 'var(--ink)', margin: '0 0 8px', lineHeight: 1.3 }}>{pod[lang].title}</h3>
|
|
||||||
<p style={{ fontSize: 11, color: 'var(--ink-3)', margin: '0 0 12px', lineHeight: 1.7 }}>{pod[lang].desc}</p>
|
{/* ── featured episode player card ── */}
|
||||||
<span style={{ fontSize: 10, color: 'var(--ink-5)' }}>{pod.duration}</span>
|
<div style={{
|
||||||
|
background: 'var(--ink)', borderRadius: 20, padding: 28, color: '#fff',
|
||||||
|
boxShadow: '0 30px 70px -30px rgba(7,29,73,0.5)', position: 'relative', overflow: 'hidden',
|
||||||
|
}}>
|
||||||
|
{/* soft glow */}
|
||||||
|
<div style={{ position: 'absolute', top: -60, insetInlineEnd: -60, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(0,174,239,0.25), transparent 70%)', pointerEvents: 'none' }} />
|
||||||
|
<div style={{ position: 'relative', display: 'flex', gap: 16, alignItems: 'center', marginBottom: 22 }}>
|
||||||
|
<img src={pod.cover} alt="" style={{ width: 84, height: 84, borderRadius: 16, objectFit: 'cover', flexShrink: 0, boxShadow: '0 12px 30px -10px rgba(0,0,0,0.5)' }} />
|
||||||
|
<div style={{ minWidth: 0 }}>
|
||||||
|
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', color: '#00AEEF', marginBottom: 6 }}>{pod[lang].ep}</div>
|
||||||
|
<h3 style={{ fontSize: 16, fontWeight: 900, color: '#fff', margin: 0, lineHeight: 1.4 }}>{pod[lang].title}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<p style={{ position: 'relative', fontSize: 12, color: 'rgba(255,255,255,0.6)', lineHeight: 1.9, margin: '0 0 22px' }}>{pod[lang].desc}</p>
|
||||||
|
|
||||||
{/* progress */}
|
{/* progress */}
|
||||||
<div style={{ width: '100%', marginTop: 16 }}>
|
<div style={{ position: 'relative', marginBottom: 18 }}>
|
||||||
<div style={{ height: 3, background: 'var(--rule-thin)', borderRadius: 2, marginBottom: 6 }}>
|
<div style={{ height: 4, background: 'rgba(255,255,255,0.15)', borderRadius: 2, marginBottom: 7 }}>
|
||||||
<div style={{ width: '35%', height: '100%', background: 'var(--ink)', borderRadius: 2 }} />
|
<div style={{ width: '35%', height: '100%', background: '#00AEEF', borderRadius: 2 }} />
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, color: 'var(--ink-5)' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'rgba(255,255,255,0.5)' }}>
|
||||||
<span>۲۰:۱۲</span><span>{pod.duration}</span>
|
<span>۲۰:۱۲</span><span>{pod.duration}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* controls */}
|
||||||
|
<div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 22 }}>
|
||||||
|
<span style={{ color: 'rgba(255,255,255,0.6)', fontSize: 18 }}>⏭</span>
|
||||||
|
<button aria-label="play" style={{
|
||||||
|
width: 52, height: 52, borderRadius: '50%', border: 'none', cursor: 'pointer',
|
||||||
|
background: '#00AEEF', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
boxShadow: '0 10px 24px -8px rgba(0,174,239,0.7)',
|
||||||
|
}}>
|
||||||
|
<div style={{ width: 0, height: 0, borderTop: '9px solid transparent', borderBottom: '9px solid transparent', borderLeft: '15px solid #fff', marginLeft: 3 }} />
|
||||||
|
</button>
|
||||||
|
<span style={{ color: 'rgba(255,255,255,0.6)', fontSize: 18 }}>⏮</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* episode list */}
|
{/* ── episode list ── */}
|
||||||
<div style={{ borderTop: '1px solid var(--rule-thin)', paddingTop: 12, flex: 1 }}>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||||
{PODCASTS.map((p, i) => (
|
{PODCASTS.map((p, i) => (
|
||||||
<button key={p.id} onClick={() => setActivePod(i)} style={{
|
<button key={p.id} onClick={() => setActivePod(i)} style={{
|
||||||
display: 'flex', alignItems: 'center', gap: 10, width: '100%',
|
display: 'flex', alignItems: 'center', gap: 14, width: '100%',
|
||||||
padding: '12px 0', background: 'none', border: 'none', cursor: 'pointer',
|
padding: '12px 14px', cursor: 'pointer', borderRadius: 14,
|
||||||
borderBottom: i < PODCASTS.length - 1 ? '1px solid var(--rule-thin)' : 'none',
|
background: i === activePod ? '#fff' : 'transparent',
|
||||||
textAlign: lang === 'fa' ? 'right' : 'left',
|
border: i === activePod ? '1px solid var(--rule-thin)' : '1px solid transparent',
|
||||||
}}>
|
boxShadow: i === activePod ? '0 10px 28px -18px rgba(7,29,73,0.3)' : 'none',
|
||||||
<img src={p.cover} alt="" style={{ width: 52, height: 52, borderRadius: '50%', objectFit: 'cover', flexShrink: 0, opacity: i === activePod ? 1 : 0.55, border: i === activePod ? '2px solid var(--ink)' : '2px solid transparent' }} />
|
textAlign: lang === 'fa' ? 'right' : 'left', transition: 'background 150ms, box-shadow 150ms',
|
||||||
<div style={{ flex: 1, minWidth: 0 }}>
|
}}
|
||||||
<div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p[lang].title}</div>
|
onMouseEnter={e => { if (i !== activePod) (e.currentTarget as HTMLElement).style.background = 'rgba(7,29,73,0.04)' }}
|
||||||
<div style={{ fontSize: 10, color: 'var(--ink-4)' }}>{p[lang].ep} · {p.duration}</div>
|
onMouseLeave={e => { if (i !== activePod) (e.currentTarget as HTMLElement).style.background = 'transparent' }}
|
||||||
|
>
|
||||||
|
<div style={{ position: 'relative', flexShrink: 0 }}>
|
||||||
|
<img src={p.cover} alt="" style={{ width: 56, height: 56, borderRadius: 12, objectFit: 'cover', display: 'block' }} />
|
||||||
|
{i === activePod && (
|
||||||
|
<div style={{ position: 'absolute', inset: 0, borderRadius: 12, background: 'rgba(7,29,73,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||||
|
<div style={{ width: 0, height: 0, borderTop: '6px solid transparent', borderBottom: '6px solid transparent', borderLeft: '10px solid #fff', marginLeft: 2 }} />
|
||||||
</div>
|
</div>
|
||||||
{i === activePod && <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--red)', flexShrink: 0 }} />}
|
)}
|
||||||
|
</div>
|
||||||
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<div style={{ fontSize: 13, fontWeight: 800, color: 'var(--ink)', marginBottom: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p[lang].title}</div>
|
||||||
|
<div style={{ fontSize: 11, color: 'var(--ink-4)' }}>{p[lang].ep} · {p.duration}</div>
|
||||||
|
</div>
|
||||||
|
{i === activePod
|
||||||
|
? <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#00AEEF', flexShrink: 0 }} />
|
||||||
|
: <span style={{ color: 'var(--ink-5)', fontSize: 16, flexShrink: 0 }}>{lang === 'fa' ? '▸' : '▸'}</span>}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<button style={{ marginTop: 20, fontSize: 11, fontWeight: 700, color: 'var(--ink)', background: 'none', border: '1px solid var(--ink)', padding: '8px 16px', cursor: 'pointer', fontFamily: 'inherit', width: '100%' }}>
|
|
||||||
{t.listenAll}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue