feat: basic audio player

app/(home)/page.tsx

@@ -22,6 +22,7 @@ async function EpisodeDemo() {
 
   return (
     <EpisodeDetail.Content
+      audio_url={data.audio_url}
       description={data.description}
       duration={data.duration}
       id={data.id}

components/audio-player.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import AudioPlayer from './audio-player';
+
+export const Base: StoryObj<typeof AudioPlayer> = {
+  render: () => (
+    <AudioPlayer
+      audioUrl="https://traffic.megaphone.fm/FRCH6920528984.mp3?updated=1701990875"
+      duration={4775}
+    />
+  ),
+};
+
+const meta: Meta<typeof AudioPlayer> = {
+  component: AudioPlayer,
+};
+
+export default meta;

components/audio-player.tsx

@@ -0,0 +1,110 @@
+/* eslint-disable jsx-a11y/media-has-caption -- we don't have any captions for our audio. */
+'use client';
+import { Flex, IconButton, Slider, Text } from '@radix-ui/themes';
+import formatDuration from 'format-duration';
+import { useRef, useState } from 'react';
+import { FaPauseCircle } from 'react-icons/fa';
+import { FaCirclePlay } from 'react-icons/fa6';
+
+type Props = {
+  audioUrl: string;
+  duration: number;
+};
+
+function AudioPlayerControls({
+  onPlayPause,
+  playing,
+}: {
+  onPlayPause: () => void;
+  playing: boolean;
+}) {
+  return (
+    <IconButton highContrast onClick={onPlayPause} variant="ghost">
+      {playing ? (
+        <FaPauseCircle style={{ height: 36, width: 36 }} />
+      ) : (
+        <FaCirclePlay style={{ height: 36, width: 36 }} />
+      )}
+    </IconButton>
+  );
+}
+
+export default function AudioPlayer({ audioUrl, duration }: Props) {
+  const [playing, setPlaying] = useState(false);
+  const playerRef = useRef<HTMLAudioElement | null>(null);
+  const [sliderPosition, setSliderPosition] = useState(0);
+
+  const onPlayPause = async () => {
+    if (!playerRef.current) return;
+    playerRef.current.paused
+      ? await playerRef.current.play()
+      : playerRef.current.pause();
+  };
+
+  return (
+    <Flex
+      direction="row"
+      gap={{
+        initial: '2',
+        xs: '2',
+      }}
+      style={{
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      <audio
+        onEnded={() => {
+          setPlaying(false);
+        }}
+        onPause={() => {
+          setPlaying(false);
+        }}
+        onPlay={() => {
+          if (!playerRef.current) return;
+          if (playerRef.current.currentTime === duration) {
+            setSliderPosition(0);
+            playerRef.current.currentTime = 0;
+          }
+          setPlaying(true);
+        }}
+        onTimeUpdate={(e) => {
+          setSliderPosition(e.currentTarget.currentTime);
+          if (e.currentTarget.currentTime === duration) {
+            setSliderPosition(0);
+          }
+        }}
+        ref={playerRef}
+        src={audioUrl}
+      />
+      <AudioPlayerControls onPlayPause={onPlayPause} playing={playing} />
+      <Slider
+        defaultValue={[sliderPosition]}
+        max={duration}
+        onValueChange={(value) => {
+          if (typeof value[0] !== 'number' || !playerRef.current) {
+            return;
+          }
+          const position = Math.floor(value[0]);
+          setSliderPosition(position);
+          playerRef.current.currentTime = position;
+        }}
+        size="2"
+        style={{
+          width: '65%',
+        }}
+        value={[sliderPosition]}
+      />
+      <Text
+        color="gray"
+        highContrast
+        size={{
+          initial: '1',
+          xs: '2',
+        }}
+      >
+        {formatDuration((duration - sliderPosition) * 1000)} left.
+      </Text>
+    </Flex>
+  );
+}

components/episode-detail.tsx

@@ -6,16 +6,22 @@ import { createSupabaseServerClient } from '@/lib/services/supabase/server';
 import { Avatar, Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { cookies } from 'next/headers';
 
+import AudioPlayer from './audio-player';
 import { EpisodeAISummary } from './episode-ai-summary/episode-ai-summary';
 import { EpisodeDescription } from './episode-description';
 import { CollapsiblePanel } from './ui/collapsible-panel';
-import { DecorativeBox } from './ui/decorative-box';
 
 function EpisodeDetailContent(
   props: PropsWithChildren<
     Pick<
       Tables<'episode'>,
-      'description' | 'duration' | 'id' | 'image' | 'published_date' | 'title'
+      | 'audio_url'
+      | 'description'
+      | 'duration'
+      | 'id'
+      | 'image'
+      | 'published_date'
+      | 'title'
     > & {
       show: {
         id: Tables<'show'>['id'];
@@ -25,24 +31,47 @@ function EpisodeDetailContent(
   >,
 ) {
   return (
-    <Flex direction="column" gap="4">
-      <Flex align="start" direction="row" gap="5">
+    <Flex direction="column" gap="6">
+      <Flex
+        align="center"
+        direction="row"
+        gap={{
+          initial: '3',
+          xs: '5',
+        }}
+      >
         <Avatar
           fallback="/images/placeholder.png"
           radius="small"
-          size="9"
+          size={{
+            initial: '6',
+            xs: '9',
+          }}
           src={props.image ?? ''}
         />
 
-        <Flex direction="column" gap="1">
-          <Heading size="3">{props.title}</Heading>
+        <Flex direction="column" gap="2" justify="end">
+          <Heading
+            size={{
+              initial: '2',
+              xs: '3',
+            }}
+          >
+            {props.title}
+          </Heading>
 
-          <Text color="gray" size="2">
+          <Text
+            color="gray"
+            size={{
+              initial: '1',
+              xs: '2',
+            }}
+          >
             {props.show.title}
           </Text>
 
-          <Box height="9" width="100%">
-            <DecorativeBox />
+          <Box height="5">
+            <AudioPlayer audioUrl={props.audio_url} duration={props.duration} />
           </Box>
         </Flex>
       </Flex>
@@ -73,6 +102,7 @@ async function EpisodeDetailPage(props: { id: Tables<'episode'>['id'] }) {
 
   return (
     <EpisodeDetailContent
+      audio_url={data.audio_url}
       description={data.description}
       duration={data.duration}
       id={data.id}