Skip to content

Commit 2442502

Browse files
author
Alex Patterson
committed
adjust player
1 parent 21a2f82 commit 2442502

4 files changed

Lines changed: 38 additions & 62 deletions

File tree

‎app/(main)/(podcast)/podcast/[slug]/page.tsx‎

Lines changed: 20 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,16 @@ export default async function PodcastPage({ params }: Props) {
7474
<h1 className="mb-12 text-4xl font-bold leading-tight tracking-tighter text-balance md:text-7xl md:leading-none lg:text-8xl">
7575
{podcast.title}
7676
</h1>
77-
<div className="hidden md:mb-12 md:block">
78-
<div className="flex flex-col gap-8">
77+
78+
<div className="mb-8 sm:mx-0 md:mb-16">
79+
<CoverMedia
80+
cloudinaryImage={podcast?.coverImage}
81+
cloudinaryVideo={podcast?.videoCloudinary}
82+
youtube={podcast?.youtube}
83+
/>
84+
</div>
85+
<div className="max-w-2xl sm:max-w-none">
86+
<div className="mb-6">
7987
{(podcast?.author || podcast?.guest) && (
8088
<div className="flex flex-wrap gap-2">
8189
{podcast?.author?.map((a) => (
@@ -96,60 +104,24 @@ export default async function PodcastPage({ params }: Props) {
96104
))}
97105
</div>
98106
)}
99-
<div className="text-lg">
100-
<DateComponent dateString={podcast.date} />
101-
</div>
102-
{src && (
103-
<PlayerPlayButton podcast={podcast} />
104-
)}
105107
</div>
106-
</div>
107-
<div className="mb-8 sm:mx-0 md:mb-16">
108-
<CoverMedia
109-
cloudinaryImage={podcast?.coverImage}
110-
cloudinaryVideo={podcast?.videoCloudinary}
111-
youtube={podcast?.youtube}
112-
/>
113-
</div>
114-
<div className="block md:hidden">
115-
<div className="max-w-2xl mx-auto">
116-
<div className="mb-6">
117-
{(podcast?.author || podcast?.guest) && (
118-
<div className="flex flex-wrap gap-2">
119-
{podcast?.author?.map((a) => (
120-
<Avatar
121-
key={a._id}
122-
name={a.title}
123-
href={`/author/${a?.slug}`}
124-
coverImage={a?.coverImage}
125-
/>
126-
))}
127-
{podcast?.guest?.map((a) => (
128-
<Avatar
129-
key={a._id}
130-
name={a.title}
131-
href={`/guest/${a?.slug}`}
132-
coverImage={a?.coverImage}
133-
/>
134-
))}
135-
</div>
136-
)}
137-
</div>
138-
<div className="mb-4 text-lg">
139-
<DateComponent dateString={podcast.date} />
140-
</div>
141-
{src && (
142-
<PlayerPlayButton podcast={podcast} />
143-
)}
108+
<div className="mb-4 text-lg">
109+
<DateComponent dateString={podcast.date} />
144110
</div>
111+
{src && (
112+
<div className="flex justify-start flex-wrap w-full">
113+
<PlayerPlayButton podcast={podcast} />
114+
</div>
115+
)}
145116
</div>
146117
{podcast?.sponsor?.length && (
147-
<section className="flex flex-col mx-auto max-w-[100ch]">
118+
<section className="flex flex-col mt-10 mb-10">
148119
<h2 className="mb-4 text-2xl font-bold">Sponsors</h2>
149-
<hr className="mb-10 border-accent-2 mt-10" />
120+
<hr className="border-accent-2" />
150121
<div className="my-12 ">
151122
<SponsorCard sponsors={podcast.sponsor} />
152123
</div>
124+
<hr className="border-accent-2" />
153125
</section>
154126
)}
155127
{podcast?.content?.length && (

‎components/player-floating.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,14 @@ export default function PlayerFloating() {
2727

2828
return (
2929
<>
30-
{audioRef?.current && isOpen && (
31-
<div className="sticky inset-x-0 bottom-0 z-50 bg-background shadow-lg md:rounded-t-xl flex flex-col">
32-
<div className="px-4 py-3 md:px-6 md:py-4">
33-
<div className="flex items-center justify-between gap-2 md:gap-4">
34-
<div className="flex items-center gap-4">
30+
{audioRef?.current && isOpen && podcast && (
31+
<div className="sticky inset-x-0 bottom-0 z-50 bg-background shadow-lg rounded-t-xl flex flex-col border border-primary">
32+
<div className="px-4 py-3 md:px-6 md:py-4 flex flex-col gap-1">
33+
<div className="flex sm:hidden text-xs">
34+
{podcast.title}
35+
</div>
36+
<div className="flex items-center justify-between gap-2 md:gap-4 flex-wrap-reverse">
37+
<div className="flex items-center gap-4 flex-1">
3538
<Button variant="ghost" size="icon" onClick={() => audioRef.current!.currentTime -= 30.0}>
3639
<FaBackward className="h-5 w-5" />
3740
</Button>
@@ -48,8 +51,6 @@ export default function PlayerFloating() {
4851
<Button variant="ghost" size="icon" onClick={() => audioRef.current!.currentTime += 30.0}>
4952
<FaForward className="h-5 w-5" />
5053
</Button>
51-
</div>
52-
<div className="flex-1">
5354
<Slider
5455
className="[&>span:first-child]:h-1 [&>span:first-child]:bg-primary [&_[role=slider]]:bg-primary [&_[role=slider]]:w-3 [&_[role=slider]]:h-3 [&_[role=slider]]:border-0 [&>span:first-child_span]:bg-primary [&_[role=slider]:focus-visible]:ring-0 [&_[role=slider]:focus-visible]:ring-offset-0 [&_[role=slider]:focus-visible]:scale-105 [&_[role=slider]:focus-visible]:transition-transform"
5556
min={0}
@@ -77,8 +78,6 @@ export default function PlayerFloating() {
7778
<SelectItem value="2.0">2.0x</SelectItem>
7879
</SelectContent>
7980
</Select>
80-
</div>
81-
<div className="flex items-center gap-4">
8281
{volume === 0 ?
8382
<Button variant="ghost" size="icon" onClick={max}>
8483
<FaVolumeXmark className="h-5 w-5" />
@@ -89,7 +88,7 @@ export default function PlayerFloating() {
8988
</Button>
9089
}
9190
<Slider
92-
className="w-20 [&>span:first-child]:h-1 [&>span:first-child]:bg-primary [&_[role=slider]]:bg-primary [&_[role=slider]]:w-3 [&_[role=slider]]:h-3 [&_[role=slider]]:border-0 [&>span:first-child_span]:bg-primary [&_[role=slider]:focus-visible]:ring-0 [&_[role=slider]:focus-visible]:ring-offset-0 [&_[role=slider]:focus-visible]:scale-105 [&_[role=slider]:focus-visible]:transition-transform"
91+
className="min-w-20 [&>span:first-child]:h-1 [&>span:first-child]:bg-primary [&_[role=slider]]:bg-primary [&_[role=slider]]:w-3 [&_[role=slider]]:h-3 [&_[role=slider]]:border-0 [&>span:first-child_span]:bg-primary [&_[role=slider]:focus-visible]:ring-0 [&_[role=slider]:focus-visible]:ring-offset-0 [&_[role=slider]:focus-visible]:scale-105 [&_[role=slider]:focus-visible]:transition-transform"
9392
value={[volume]}
9493
min={0}
9594
max={100}
@@ -98,7 +97,7 @@ export default function PlayerFloating() {
9897
}}
9998
/>
10099
</div>
101-
<div className="ml-auto flex items-center gap-4">
100+
<div className="ml-auto hidden lg:flex items-center gap-4">
102101
{isMinimized ? (
103102
<Button variant="ghost" size="icon" onClick={() => setIsMinimized(false)}>
104103
<FaChevronUp className="h-5 w-5" />
@@ -108,12 +107,14 @@ export default function PlayerFloating() {
108107
<FaChevronDown className="h-5 w-5" />
109108
</Button>
110109
)}
110+
</div>
111+
<div className="ml-auto items-center gap-4 absolute top-0 right-0 sm:relative">
111112
<Button variant="ghost" size="icon" onClick={close}>
112113
<FaX className="h-5 w-5" />
113114
</Button>
114115
</div>
115116
</div>
116-
{podcast && !isMinimized && (
117+
{!isMinimized && (
117118
<div className="hidden lg:flex">
118119
<div className="w-48">
119120
{podcast?.spotify?.itunes?.image?.href && (

‎components/player-play-button.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,15 @@ export default function PlayerPlayButton({ podcast }: { podcast: NonNullable<Pod
2222
return (
2323
<>
2424
{currentPodcast?._id === podcast?._id && audio?.isPlaying ? (
25-
<Button variant="ghost" size="icon" onClick={() => audioRef.current?.pause()}>
25+
<Button variant="ghost" onClick={() => audioRef.current?.pause()} className="flex gap-2">
2626
<FaCirclePause className="h-5 w-5" />
27+
<div className="text-xl">Play Episode</div>
2728
</Button>
2829
) :
2930
(
30-
<Button variant="ghost" size="icon" onClick={setCurrent}>
31+
<Button variant="ghost" onClick={setCurrent} className="flex gap-2">
3132
<FaPlay className="h-5 w-5" />
33+
<div className="text-xl">Pause Episode</div>
3234
</Button>
3335
)
3436
}

‎components/sponsor-card.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default function SponsorCard({
2424
href={url || `/sponsor/${slug}`}
2525
key={_id}
2626
target={url ? "_blank" : "_self"}
27+
className="max-w-xl"
2728
>
2829
<Card
2930
key={_id}

0 commit comments

Comments
 (0)