From b22faedd291f4b05f4f8f044a6c6e49c8e380dee Mon Sep 17 00:00:00 2001
From: Mandeep Singh <mandeeparora132@gmail.com>
Date: Wed, 13 Nov 2024 03:35:42 +0530
Subject: [PATCH] Replace the basic progress bar with a functional slider and
 revamp the podcast player

---
 components/LeftSidebar.tsx         |   2 +-
 components/PodcastDetailPlayer.tsx |  12 +-
 components/PodcastPlayer.tsx       | 169 +++++++++++++----
 components/ProfileCard.tsx         |   1 +
 components/RightSidebar.tsx        |  13 +-
 components/ui/progress.tsx         |  28 ---
 components/ui/slider.tsx           |  28 +++
 hooks/useIncrementPodcastViews.ts  |  56 ++++++
 package-lock.json                  | 279 ++++++++++++++++++++++++++---
 package.json                       |   2 +-
 public/icons/close-circle.svg      |   4 +
 types/index.ts                     |   1 +
 12 files changed, 486 insertions(+), 109 deletions(-)
 delete mode 100644 components/ui/progress.tsx
 create mode 100644 components/ui/slider.tsx
 create mode 100644 hooks/useIncrementPodcastViews.ts
 create mode 100644 public/icons/close-circle.svg

diff --git a/components/LeftSidebar.tsx b/components/LeftSidebar.tsx
index c771a9a..d0c236a 100644
--- a/components/LeftSidebar.tsx
+++ b/components/LeftSidebar.tsx
@@ -18,7 +18,7 @@ const LeftSidebar = () => {
 
   return (
     <section className={cn("left_sidebar h-[calc(100vh-1px)]", {
-      'h-[calc(100vh-140px)]': audio?.audioUrl
+      'h-[calc(100vh-113px)]': audio?.audioUrl
     })}>
       <nav className="flex flex-col gap-6">
         <Link href="/" className="flex cursor-pointer items-center gap-1 pb-10 max-lg:justify-center">
diff --git a/components/PodcastDetailPlayer.tsx b/components/PodcastDetailPlayer.tsx
index f318d8f..d17b003 100644
--- a/components/PodcastDetailPlayer.tsx
+++ b/components/PodcastDetailPlayer.tsx
@@ -11,7 +11,6 @@ import { PodcastDetailPlayerProps } from "@/types";
 import LoaderSpinner from "./LoaderSpinner";
 import { Button } from "./ui/button";
 import { useToast } from "./ui/use-toast";
-import { useClerk } from "@clerk/nextjs";
 
 const PodcastDetailPlayer = ({
   audioUrl,
@@ -26,12 +25,10 @@ const PodcastDetailPlayer = ({
   authorId,
 }: PodcastDetailPlayerProps) => {
   const router = useRouter();
-  const { audio, setAudio } = useAudio();
+  const { setAudio } = useAudio();
   const { toast } = useToast();
-  const { user } = useClerk();
   const [isDeleting, setIsDeleting] = useState(false);
   const deletePodcast = useMutation(api.podcasts.deletePodcast);
-  const incrementViews = useMutation(api.podcasts.incrementPodcastViews);
 
   const handleDelete = async () => {
     try {
@@ -55,14 +52,9 @@ const PodcastDetailPlayer = ({
       audioUrl,
       imageUrl,
       author,
+      authorId,
       podcastId,
     });
-    // increment views if user is not the author and the current audio is not the same as the audio being played
-    if (!isOwner && audio?.audioUrl !== audioUrl) {
-      setTimeout(() => {
-        incrementViews({ podcastId: podcastId });
-      }, 10000);
-    };
   };
 
   if (!imageUrl || !authorImageUrl) return <LoaderSpinner />;
diff --git a/components/PodcastPlayer.tsx b/components/PodcastPlayer.tsx
index b3c01b1..4287e7a 100644
--- a/components/PodcastPlayer.tsx
+++ b/components/PodcastPlayer.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 import Image from "next/image";
 import Link from "next/link";
@@ -6,16 +7,30 @@ import { useEffect, useRef, useState } from "react";
 import { formatTime } from "@/lib/formatTime";
 import { cn } from "@/lib/utils";
 import { useAudio } from "@/providers/AudioProvider";
+import useIncrementPodcastViews from "@/hooks/useIncrementPodcastViews";
+import { useMutation } from "convex/react";
+import { api } from "@/convex/_generated/api";
+import { Id } from "@/convex/_generated/dataModel";
+import { useClerk } from "@clerk/nextjs";
+import { Slider } from "./ui/slider";
 
-import { Progress } from "./ui/progress";
+const PLAY_TIME_REQUIRED_FOR_VIEW_IN_SECONDS = 10;
 
 const PodcastPlayer = () => {
   const audioRef = useRef<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [duration, setDuration] = useState(0);
   const [isMuted, setIsMuted] = useState(false);
+  const [volume, setVolume] = useState(100);
   const [currentTime, setCurrentTime] = useState(0);
-  const { audio } = useAudio();
+  const { audio, setAudio } = useAudio();
+  const { isViewValid, setResetTimer } = useIncrementPodcastViews({
+    targetTime: PLAY_TIME_REQUIRED_FOR_VIEW_IN_SECONDS,
+    isPlaying: isPlaying,
+    duration: audioRef?.current?.duration ?? 0,
+  });
+  const incrementViews = useMutation(api.podcasts.incrementPodcastViews);
+  const { user } = useClerk();
 
   const togglePlayPause = () => {
     if (audioRef.current?.paused) {
@@ -80,7 +95,7 @@ const PodcastPlayer = () => {
       }
     } else {
       audioElement?.pause();
-      setIsPlaying(true);
+      setIsPlaying(false);
     }
   }, [audio]);
   const handleLoadedMetadata = () => {
@@ -93,19 +108,56 @@ const PodcastPlayer = () => {
     setIsPlaying(false);
   };
 
+  const handlePlayerClose = () => {
+    setAudio(undefined);
+    setIsPlaying(false);
+    setResetTimer();
+  };
+
+  const handleVolumeChange = (value: number) => {
+    if (!audioRef.current) return;
+    audioRef.current.volume = value / 100;
+    setVolume(value);
+  };
+
+  const handleProgressChange = (value: number) => {
+    if (!audioRef.current) return;
+    audioRef.current.currentTime = value
+    setCurrentTime(value);
+  }
+
+  // mute the audio when the volume is 0
+  useEffect(() => {
+    if (!audioRef.current) return;
+    setIsMuted(volume === 0);
+  }, [volume]);
+
+  // set the volume to 0 when the audio is muted (Vice versa as above)
+  useEffect(() => {
+    if (!audioRef.current) return;
+    setVolume(isMuted ? 0 : 100);
+  }, [isMuted]);
+
+  // increment views if user is not the author of the podcast
+  useEffect(() => {
+    if (!audio || !user || audio.authorId === user.id) return;
+    if (audio.podcastId && isViewValid) {
+      incrementViews({ podcastId: audio.podcastId as Id<"podcasts"> });
+    }
+  }, [isViewValid]);
+
+  // reset the timer when the audio changes
+  useEffect(() => {
+    setResetTimer();
+  }, [audio]);
+
   return (
     <div
       className={cn("sticky bottom-0 left-0 flex size-full flex-col", {
         hidden: !audio?.audioUrl || audio?.audioUrl === "",
       })}
     >
-      {/* change the color for indicator inside the Progress component in ui folder */}
-      <Progress
-        value={(currentTime / duration) * 100}
-        className="w-full"
-        max={duration}
-      />
-      <section className="glassmorphism-black flex h-[112px] w-full items-center justify-between px-4 max-md:justify-center max-md:gap-5 md:px-12">
+      <section className="glassmorphism-black relative flex h-[112px] w-full items-center justify-between px-4 max-md:justify-center md:gap-5 md:px-12">
         <audio
           ref={audioRef}
           src={audio?.audioUrl}
@@ -113,6 +165,7 @@ const PodcastPlayer = () => {
           onLoadedMetadata={handleLoadedMetadata}
           onEnded={handleAudioEnded}
         />
+
         <div className="flex items-center gap-4 max-md:hidden">
           <Link href={`/podcast/${audio?.podcastId}`}>
             <Image
@@ -130,50 +183,88 @@ const PodcastPlayer = () => {
             <p className="text-12 font-normal text-white-2">{audio?.author}</p>
           </div>
         </div>
-        <div className="flex-center cursor-pointer gap-3 md:gap-6">
-          <div className="flex items-center gap-1.5">
+        <div className="flex-center w-full max-w-[600px] flex-col gap-3">
+          <div className="flex items-center cursor-pointer gap-3 md:gap-6">
+            <div className="flex items-center gap-1.5">
+              <Image
+                src={"/icons/reverse.svg"}
+                width={24}
+                height={24}
+                alt="rewind"
+                onClick={rewind}
+                aria-label="Rewind"
+              />
+              <h2 className="text-12 font-bold text-white-4">-5</h2>
+            </div>
             <Image
-              src={"/icons/reverse.svg"}
-              width={24}
-              height={24}
-              alt="rewind"
-              onClick={rewind}
+              src={isPlaying ? "/icons/Pause.svg" : "/icons/Play.svg"}
+              width={30}
+              height={30}
+              alt="play"
+              onClick={togglePlayPause}
+              aria-label={isPlaying ? "Pause" : "Play"}
             />
-            <h2 className="text-12 font-bold text-white-4">-5</h2>
+            <div className="flex items-center gap-1.5">
+              <h2 className="text-12 font-bold text-white-4">+5</h2>
+              <Image
+                src={"/icons/forward.svg"}
+                width={24}
+                height={24}
+                alt="forward"
+                onClick={forward}
+                aria-label="Forward"
+              />
+            </div>
           </div>
-          <Image
-            src={isPlaying ? "/icons/Pause.svg" : "/icons/Play.svg"}
-            width={30}
-            height={30}
-            alt="play"
-            onClick={togglePlayPause}
-          />
-          <div className="flex items-center gap-1.5">
-            <h2 className="text-12 font-bold text-white-4">+5</h2>
-            <Image
-              src={"/icons/forward.svg"}
-              width={24}
-              height={24}
-              alt="forward"
-              onClick={forward}
-            />
+          <div className="flex w-full justify-between items-center gap-2">
+            <div className="min-w-[40px] text-right text-sm font-normal text-white-2 max-md:hidden">
+              {formatTime(currentTime)}
+            </div>
+            <div className="flex w-full h-4 items-center">
+              <Slider
+                min={0}
+                max={duration}
+                onValueChange={(value) => handleProgressChange(value[0])}
+                value={[currentTime]}
+                aria-label="Progress"
+              />
+            </div>
+
+            <div className="min-w-[40px] text-left text-sm font-normal text-white-2 max-md:hidden">
+              {formatTime(duration)}
+            </div>
           </div>
         </div>
         <div className="flex items-center gap-6">
-          <h2 className="text-16 font-normal text-white-2 max-md:hidden">
-            {formatTime(duration)}
-          </h2>
-          <div className="flex w-full gap-2">
+          <div className="flex w-full items-center justify-center h-full gap-2">
             <Image
               src={isMuted ? "/icons/unmute.svg" : "/icons/mute.svg"}
               width={24}
               height={24}
               alt="mute unmute"
               onClick={toggleMute}
-              className="cursor-pointer"
+              className="md:block hidden cursor-pointer"
+              aria-label="mute unmute"
+            />
+            <Slider
+              min={0}
+              max={100}
+              onValueChange={(value) => handleVolumeChange(value[0])}
+              value={[volume]}
+              className="w-full md:min-w-[93px] hidden md:flex h-4"
+              aria-label="Volume"
             />
           </div>
         </div>
+        <Image
+          src="/icons/close-circle.svg"
+          width={24}
+          height={24}
+          className="absolute top-2 right-4 cursor-pointer"
+          onClick={() => handlePlayerClose()}
+          alt="close"
+          aria-label="close"
+        />
       </section>
     </div>
   );
diff --git a/components/ProfileCard.tsx b/components/ProfileCard.tsx
index 2cc3628..6dfb880 100644
--- a/components/ProfileCard.tsx
+++ b/components/ProfileCard.tsx
@@ -42,6 +42,7 @@ const ProfileCard = ({
         audioUrl: randomPodcast.audioUrl || "",
         imageUrl: randomPodcast.imageUrl || "",
         author: randomPodcast.author,
+        authorId: randomPodcast.authorId,
         podcastId: randomPodcast._id,
       });
     }
diff --git a/components/RightSidebar.tsx b/components/RightSidebar.tsx
index 7dd6a25..83c767f 100644
--- a/components/RightSidebar.tsx
+++ b/components/RightSidebar.tsx
@@ -9,7 +9,6 @@ import Carousel from './Carousel';
 import { useQuery } from 'convex/react';
 import { api } from '@/convex/_generated/api';
 import { useRouter } from 'next/navigation';
-import LoaderSpinner from './LoaderSpinner';
 import { useAudio } from '@/providers/AudioProvider';
 import { cn } from '@/lib/utils';
 
@@ -22,8 +21,8 @@ const RightSidebar = () => {
 
   return (
     <section className={cn('right_sidebar h-[calc(100vh-5px)]', {
-      'h-[calc(100vh-140px)]': audio?.audioUrl
-    })}>
+        'h-[calc(100vh-113px)]': audio?.audioUrl
+      })}>
       <SignedIn>
         <Link href={`/profile/${user?.id}`} className="flex gap-3 pb-12">
           <UserButton />
@@ -45,8 +44,12 @@ const RightSidebar = () => {
       <section className="flex flex-col gap-8 pt-12">
         <Header headerTitle="Top Creators" />
         <div className="flex flex-col gap-6">
-          {topPodcasters?.slice(0, 3).map((podcaster) => (
-            <div key={podcaster._id} className="flex cursor-pointer justify-between" onClick={() => router.push(`/profile/${podcaster.clerkId}`)}>
+          {topPodcasters?.slice(0, audio?.audioUrl ? 2 : 3).map((podcaster) => (
+            <div
+              key={podcaster._id}
+              className="flex cursor-pointer justify-between"
+              onClick={() => router.push(`/profile/${podcaster.clerkId}`)}
+            >
               <figure className="flex items-center gap-2">
                 <Image
                   src={podcaster.imageUrl}
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
deleted file mode 100644
index e50d39d..0000000
--- a/components/ui/progress.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
-
-import { cn } from "@/lib/utils"
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-black-5",
-      className
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="size-full flex-1 bg-white-1 transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
-
-export { Progress }
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
new file mode 100644
index 0000000..7607c57
--- /dev/null
+++ b/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative group flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative cursor-pointer h-4 w-full grow overflow-hidden rounded-full bg-black-5">
+      <SliderPrimitive.Range className="SliderRange absolute h-full bg-white-1 group-hover:bg-[--accent-color]" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="SliderThumb block invisible group-hover:visible  cursor-grabbing h-5 w-5 group-hover:bg-white-1 !ring-0 outline-none focus:outline-none focus:ring-0 rounded-full bg-white-1 transition-colors" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
diff --git a/hooks/useIncrementPodcastViews.ts b/hooks/useIncrementPodcastViews.ts
new file mode 100644
index 0000000..d31a459
--- /dev/null
+++ b/hooks/useIncrementPodcastViews.ts
@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+
+type PodcastViewHookProps = {
+  targetTime: number;
+  isPlaying: boolean;
+  duration: number;
+};
+
+const useIncrementPodcastViews = ({
+  targetTime,
+  isPlaying,
+  duration,
+}: PodcastViewHookProps): {
+  isViewValid: boolean;
+  setResetTimer: () => void;
+} => {
+  const [timePlayed, setTimePlayed] = useState(0); // Track total time the audio has been played
+
+  useEffect(() => {
+    if (!isPlaying || timePlayed >= targetTime) {
+      return;
+    }
+
+    // Function to update timePlayed based on actual audio playback time (using an internal timer with setInterval)
+    const updateTime = () => {
+      setTimePlayed((prevTime) => {
+        const newTime = prevTime + 0.1;
+        // Case 1: Stop the timer once the audio has played for the targetTime
+        if (newTime >= targetTime) {
+          return targetTime; // Cap the time at targetTime (e.g., 10 seconds)
+        }
+        // Case 2: Stop the timer once the audio has ended (*2 to account for some inaccuracy)
+        if (newTime * 2 >= duration) {
+          return targetTime;
+        }
+        return newTime;
+      });
+    };
+
+    // Start updating time when audio is playing
+    const intervalId = setInterval(() => {
+      updateTime();
+    }, 100); // Update every 100ms NOTE: (Lower values may cause performance issues or inaccuracy)
+
+    return () => {
+      clearInterval(intervalId); // Clear the interval
+    };
+  }, [duration, isPlaying, targetTime, timePlayed]);
+
+  if (timePlayed >= targetTime) {
+    return { isViewValid: true, setResetTimer: () => setTimePlayed(0) };
+  }
+  return { isViewValid: false, setResetTimer: () => setTimePlayed(0) };
+};
+
+export default useIncrementPodcastViews;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index fd85667..500e390 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,8 @@
         "@hookform/resolvers": "^3.4.2",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-label": "^2.0.2",
-        "@radix-ui/react-progress": "^1.0.3",
         "@radix-ui/react-select": "^2.0.0",
+        "@radix-ui/react-slider": "^1.2.1",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-toast": "^1.1.5",
         "@xixixao/uploadstuff": "^0.0.5",
@@ -1281,30 +1281,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-progress": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.0.3.tgz",
-      "integrity": "sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
@@ -1348,6 +1324,259 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.1.tgz",
+      "integrity": "sha512-bEzQoDW0XP+h/oGbutF5VMWJPAl/UU8IJjr7h02SOHDIIIxq+cep8nItVNoBV+OMmahCdqdF38FTpmXoqQUGvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
diff --git a/package.json b/package.json
index a10603a..46ca108 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,8 @@
     "@hookform/resolvers": "^3.4.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@xixixao/uploadstuff": "^0.0.5",
diff --git a/public/icons/close-circle.svg b/public/icons/close-circle.svg
new file mode 100644
index 0000000..f618426
--- /dev/null
+++ b/public/icons/close-circle.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="white"/>
+<path d="M13.0594 12.0001L15.3594 9.70011C15.6494 9.41011 15.6494 8.93011 15.3594 8.64011C15.0694 8.35011 14.5894 8.35011 14.2994 8.64011L11.9994 10.9401L9.69937 8.64011C9.40937 8.35011 8.92937 8.35011 8.63938 8.64011C8.34938 8.93011 8.34938 9.41011 8.63938 9.70011L10.9394 12.0001L8.63938 14.3001C8.34938 14.5901 8.34938 15.0701 8.63938 15.3601C8.78938 15.5101 8.97937 15.5801 9.16937 15.5801C9.35937 15.5801 9.54937 15.5101 9.69937 15.3601L11.9994 13.0601L14.2994 15.3601C14.4494 15.5101 14.6394 15.5801 14.8294 15.5801C15.0194 15.5801 15.2094 15.5101 15.3594 15.3601C15.6494 15.0701 15.6494 14.5901 15.3594 14.3001L13.0594 12.0001Z" fill="#292D32"/>
+</svg>
diff --git a/types/index.ts b/types/index.ts
index 8a2d6f9..6048786 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -96,6 +96,7 @@ export interface AudioProps {
   title: string;
   audioUrl: string;
   author: string;
+  authorId: string;
   imageUrl: string;
   podcastId: string;
 }