From 625384a0cff6d6fc768e484d5bc1fc7b777fb7aa Mon Sep 17 00:00:00 2001
From: Metin <misaxanli@gmail.com>
Date: Mon, 28 Oct 2024 15:54:44 +0400
Subject: [PATCH] modal

---
 src/App.jsx                    |  17 +-
 src/components/Modal.jsx       |  13 +-
 src/components/MusicPlayer.jsx |  37 +++
 src/layouts/MP3Player.jsx      | 472 ++++++++++++++++-----------------
 src/utils/RefreshLink.js       |  26 +-
 5 files changed, 296 insertions(+), 269 deletions(-)
 create mode 100644 src/components/MusicPlayer.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 5af4051..0964ded 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import { useContext, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { toast, ToastContainer, Slide } from "react-toastify";
 
 import { fetchMP3Data } from "./utils/ConvertToMP3";
@@ -10,8 +10,10 @@ import Footer from "./components/Footer";
 import CustomSelect from "./components/ReactSelect";
 import { MP3Context } from "./contexts/MP3Context";
 import ResultLink from "./components/ResultLink";
+import Modal from "./components/Modal";
 
 function App() {
+  const [modal, setModal] = useState(false);
   const inputUrl = useRef(null);
   const [loading, setLoading] = useState(false);
   const [convertType, setConvertType] = useState("mp3");
@@ -19,6 +21,10 @@ function App() {
   const options = [{ value: "mp3", label: "MP3" }];
   const [lastConvertedMP3, setLastConvertedMP3] = useState(null);
 
+  const handleModal = () => {
+    setModal(false);
+  };
+
   const handleSelectChange = (e) => {
     setConvertType(e);
   };
@@ -40,6 +46,15 @@ function App() {
 
   return (
     <>
+      {modal && (
+        <Modal
+          isOpen={modal}
+          onClose={handleModal}
+          description="For Registered Users"
+          paragraph="Enhance your experience by signing up! Once logged in, you'll easily access your converted MP3 list. You’ll have the ability to save your converted songs and listen to them with the integrated MP3 player. Log in to take advantage of our helpful features and make your music conversion process even smoother!"
+        />
+      )}
+
       <ToastContainer position="bottom-right" transition={Slide} stacked limit={8} />
       <div className="min-h-screen flex flex-col justify-between bg-[#1E1E1E] transition-all duration-300">
         <div className="flex flex-col justify-center items-center flex-grow my-20 md:mt-40">
diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 737aa08..6e99cbc 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -2,12 +2,7 @@ import React from "react";
 import { Transition } from "@headlessui/react";
 import Button from "./Button";
 
-const Modal = ({
-  isOpen = null,
-  onClose = () => {},
-  children = "",
-  description = "",
-}) => {
+const Modal = ({ isOpen = null, onClose = () => {}, paragraph = "", description = "" }) => {
   return (
     <Transition
       show={isOpen}
@@ -18,12 +13,10 @@ const Modal = ({
       leaveFrom="opacity-100"
       leaveTo="opacity-0">
       <div className="fixed inset-0 flex items-center justify-center z-50">
-        <div
-          className="fixed inset-0 bg-black opacity-60"
-          onClick={onClose}></div>
+        <div className="fixed inset-0 bg-black opacity-60" onClick={onClose}></div>
         <div className="bg-[#1E1E1E] p-8 rounded-lg shadow-lg relative z-10 max-w-lg mx-auto">
           <h2 className="text-xl font-bold mb-4 text-white">{description}</h2>
-          <p className="mb-4 text-[#ccc]">{children}</p>
+          <p className="mb-4 text-[#ccc]">{paragraph}</p>
           <Button
             type="button"
             onClick={onClose}
diff --git a/src/components/MusicPlayer.jsx b/src/components/MusicPlayer.jsx
new file mode 100644
index 0000000..fe21dfc
--- /dev/null
+++ b/src/components/MusicPlayer.jsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useRef } from "react";
+
+const AudioPlayer = ({ track, index, handlePlayPause, onLoadedMetadata, onPlay, onPause, isPlaying }) => {
+  const audioRef = useRef(null);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+
+    const playAudio = async () => {
+      try {
+        const playPromise = audio.play();
+        if (playPromise !== undefined) {
+          await playPromise;
+          onPlay();
+        }
+      } catch (error) {
+        console.log("Playback prevented or failed:", error);
+        onPause();
+      }
+    };
+
+    if (isPlaying) {
+      playAudio();
+    } else {
+      audio.pause();
+    }
+
+    return () => {
+      audio.pause();
+      audio.src = "";
+    };
+  }, [isPlaying, onPlay, onPause]);
+
+  return <audio ref={audioRef} src={track.url} preload="none" onLoadedMetadata={() => onLoadedMetadata(index)} />;
+};
+
+export default AudioPlayer;
diff --git a/src/layouts/MP3Player.jsx b/src/layouts/MP3Player.jsx
index d904cde..a293308 100644
--- a/src/layouts/MP3Player.jsx
+++ b/src/layouts/MP3Player.jsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback, useContext, useReducer } from "react";
+import React, { useState, useRef, useEffect, useCallback, useContext, useReducer } from "react";
 import { FiPlay, FiPause, FiVolume2, FiRepeat } from "react-icons/fi";
 
 import { Slide, toast, ToastContainer } from "react-toastify";
@@ -14,15 +14,16 @@ import { refreshMP3Link } from "../utils/RefreshLink";
 import { deleteMP3 } from "../database/music/deleteMP3";
 import { UserContext } from "../contexts/UserContext";
 import FloatingMP3Displayer from "../components/FloatingMP3Player";
+import AudioPlayer from "../components/MusicPlayer";
 
 const MP3Player = () => {
+  const { mp3List, setMP3List, loading } = useContext(MP3Context);
+  const { authUser, loadingUser } = useContext(UserContext);
+
   const initialState = {
     floatingPlayer: false,
     playingIndex: null,
     loopingStates: {},
-    volumes: {},
-    progresses: {},
-    tooltips: {},
     refreshingItem: null,
   };
 
@@ -34,12 +35,6 @@ const MP3Player = () => {
         return { ...state, playingIndex: action.payload };
       case "SET_LOOPING_STATES":
         return { ...state, loopingStates: action.payload };
-      case "SET_VOLUME_STATES":
-        return { ...state, volumes: action.payload };
-      case "SET_PROGRESS_STATES":
-        return { ...state, progresses: action.payload };
-      case "SET_TOOLTIP_STATES":
-        return { ...state, tooltips: action.payload };
       case "SET_REFRESHING_ITEM":
         return { ...state, refreshingItem: action.payload };
       default:
@@ -49,16 +44,17 @@ const MP3Player = () => {
 
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  const [mp3Object, setMP3Object] = useState({
+    volumes: {},
+    progresses: {},
+    tooltips: {},
+  });
+
   const [durations, setDurations] = useState({});
-  const [tooltips, setTooltips] = useState({});
   const [searchTerm, setSearchTerm] = useState("");
   const audioRefs = useRef([]);
   const refs = audioRefs.current;
   const isAudioPlaying = refs[state.playingIndex]?.paused;
-
-  const { mp3List, setMP3List, loading } = useContext(MP3Context);
-  const { authUser, loadingUser } = useContext(UserContext);
-
   const filteredMP3s = Object.keys(mp3List).filter((key) =>
     mp3List[key].title.toLowerCase().includes(searchTerm.toLowerCase())
   );
@@ -67,18 +63,16 @@ const MP3Player = () => {
     dispatch({ type: "SET_FLOATING_PLAYER", payload: !state.floatingPlayer });
     dispatch({ type: "SET_PLAYING_INDEX", payload: index });
   });
-  const handlePlayPause = useCallback(
-    (index) => {
-      const audioRef = refs[index];
-      if (audioRef.paused) {
-        audioRef.play();
-      } else {
-        audioRef.pause();
-      }
-      dispatch({ type: "SET_PLAYING_INDEX", payload: index });
-    },
-    [state.playingIndex, refs]
-  );
+
+  const handlePlayPause = (index) => {
+    const audioRef = refs[index];
+    if (audioRef.paused) {
+      audioRef.play();
+    } else {
+      audioRef.pause();
+    }
+    dispatch({ type: "SET_PLAYING_INDEX", payload: index });
+  };
 
   const handleNextTrack = useCallback(() => {
     if (filteredMP3s.length > 0) {
@@ -97,38 +91,40 @@ const MP3Player = () => {
   const handleVolumeChange = useCallback(
     (e, index) => {
       const newVolume = e.target.value;
-      dispatch({
-        type: "SET_VOLUME_STATES",
-        payload: {
-          ...state.volumes,
+      setMP3Object((prev) => ({
+        ...prev,
+        volumes: {
+          ...prev.volumes,
           [index]: newVolume,
         },
-      });
+      }));
       if (refs[index]) {
         refs[index].volume = newVolume;
       }
     },
-    [refs, state.volumes]
+    [refs]
   );
 
-  const handleProgressChange = useCallback(
-    (e, index) => {
-      const newTime = (e.target.value / 100) * (refs[index]?.duration || 0);
-      if (isFinite(newTime)) {
-        if (refs[index]) {
-          refs[index].currentTime = newTime;
-          dispatch({
-            type: "SET_PROGRESS_STATES",
-            payload: {
-              ...state.progresses,
-              [index]: e.target.value,
-            },
-          });
+  const handleProgressChange = useCallback((e, index) => {
+    const newTime = (e.target.value / 100) * (refs[index]?.duration || 0);
+
+    if (isFinite(newTime) && refs[index] && refs[index].currentTime !== newTime) {
+      refs[index].currentTime = newTime;
+
+      setMP3Object((prev) => {
+        if (prev.progresses[index] === e.target.value) {
+          return prev;
         }
-      }
-    },
-    [dispatch, refs, state.progresses]
-  );
+        return {
+          ...prev,
+          progresses: {
+            ...prev.progresses,
+            [index]: e.target.value,
+          },
+        };
+      });
+    }
+  }, []);
 
   const toggleLoop = (index) => {
     const title = mp3List[index]?.title;
@@ -157,21 +153,24 @@ const MP3Player = () => {
     const percentage = (offsetX / rect.width) * 100;
     const duration = refs[index]?.duration || 0;
     const currentTime = (percentage / 100) * duration;
-    setTooltips((prevTooltips) => ({
-      ...prevTooltips,
-      [index]: {
-        visible: true,
-        x: e.clientX - rect.left + progressBar.offsetLeft,
-        y: e.clientY - rect.top - 40,
-        time: formatDuration(currentTime),
+    setMP3Object((prev) => ({
+      ...prev,
+      tooltips: {
+        ...prev.tooltips,
+        [index]: {
+          visible: true,
+          x: e.clientX - rect.left + progressBar.offsetLeft,
+          y: e.clientY - rect.top - 40,
+          time: formatDuration(currentTime),
+        },
       },
     }));
   });
 
   const handleProgressMouseLeave = (index) => {
-    setTooltips((prevTooltips) => ({
-      ...prevTooltips,
-      [index]: { ...prevTooltips[index], visible: false },
+    setMP3Object((prev) => ({
+      ...prev,
+      tooltips: { ...prev.tooltips, [index]: { visible: false } },
     }));
   };
 
@@ -183,63 +182,53 @@ const MP3Player = () => {
     const percentage = (offsetX / rect.width) * 100;
     const duration = refs[index]?.duration || 0;
     const currentTime = (percentage / 100) * duration;
-    setTooltips((prevTooltips) => ({
-      ...prevTooltips,
-      [index]: {
-        visible: true,
-        x: touch.clientX - rect.left + progressBar.offsetLeft,
-        y: touch.clientY - rect.top - 40,
-        time: formatDuration(currentTime),
+    setMP3Object((prev) => ({
+      ...prev,
+      tooltips: {
+        ...prev.tooltips,
+        [index]: {
+          visible: true,
+          x: touch.clientX - rect.left + progressBar.offsetLeft,
+          y: touch.clientY - rect.top - 40,
+          time: formatDuration(currentTime),
+        },
       },
     }));
   };
 
   const handleProgressTouchEnd = (index) => {
-    setTooltips((prevTooltips) => ({
-      ...prevTooltips,
-      [index]: { ...prevTooltips[index], visible: false },
+    setMP3Object((prev) => ({
+      ...prev,
+      tooltips: { ...prev.tooltips, [index]: { visible: false } },
     }));
   };
 
-  const defineDurations = () => {
+  const defineDurations = useCallback(() => {
     refs.forEach((audio, index) => {
       if (audio) {
-        const handleMetadataLoad = () => {
-          setDurations((prevDurations) => ({
-            ...prevDurations,
-            [index]: audio.duration,
-          }));
-        };
-        audio.addEventListener("loadedmetadata", handleMetadataLoad);
-        return () => {
-          audio.removeEventListener("loadedmetadata", handleMetadataLoad);
-        };
+        setDurations((prev) => ({
+          ...prev,
+          [index]: audio.duration,
+        }));
       }
     });
-  };
+  }, [refs, mp3List]);
 
   useEffect(() => {
     defineDurations();
-    return () => {
-      refs.forEach((audio) => {
-        if (audio) {
-          audio.removeEventListener("loadedmetadata", () => {});
-        }
-      });
-    };
-  }, [audioRefs.current, mp3List.length]);
+  }, [refs, mp3List]);
 
   useEffect(() => {
     const updateProgress = (index) => {
       if (refs[index] && isFinite(refs[index].duration)) {
         const progressPercentage = (refs[index].currentTime / refs[index].duration) * 100;
-        dispatch({
-          type: "SET_PROGRESS_STATES",
-          payload: {
-            ...state.progresses,
+        setMP3Object((prev) => ({
+          ...prev,
+          progresses: {
+            ...prev.progresses,
             [index]: isFinite(progressPercentage) ? progressPercentage : 0,
           },
-        });
+        }));
       }
     };
 
@@ -299,12 +288,120 @@ const MP3Player = () => {
     if (authUser) {
       await deleteMP3(authUser, key, toast);
       setMP3List((prevMp3List) => {
-        const newMp3List = prevMp3List.filter((item) => item.youtubeID !== key.youtubeID);
+        const newMp3List = prevMp3List.filter((item) => item.youtubeID !== key);
         return newMp3List;
       });
+    } else {
+      toast.error("You need to be logged in to delete this song.");
     }
   };
 
+  const loadingScreen = (
+    <div className="flex min-h-screen">
+      <section className="flex-grow">
+        <LoadingAnimation />
+      </section>
+    </div>
+  );
+
+  const noMp3ListMessage = (
+    <p className="text-lg text-center text-gray-300 h-screen">Convert any music to be able to listen to it here.</p>
+  );
+
+  const noResultsMessage = (
+    <p className="text-lg text-center text-gray-300 h-screen">
+      No music matches your search. Try being more case-sensitive.
+    </p>
+  );
+
+  // Play and Pause Button
+  const PlayButton = ({ isPlaying, onClick }) => (
+    <Button
+      aria_label="Play&Pause"
+      children={
+        isPlaying ? (
+          <FiPlay className="stroke-gray-400" size={20} />
+        ) : (
+          <FiPause className="stroke-green-400" size={20} />
+        )
+      }
+      onClick={onClick}
+      className="p-2 rounded-full bg-transparent hover:bg-[#777]"
+    />
+  );
+
+  // Song Title and Link
+  const SongTitleLink = ({ title, url, youtubeURL }) => (
+    <ResultLink className="text-sm sm:text-xl" target="_blank" url={youtubeURL} href={url} title={title} />
+  );
+
+  // Action Buttons (Refresh, Delete, Floating Player Toggle)
+  const ActionButtons = ({ onRefresh, onDelete, onToggleFloatingPlayer }) => (
+    <div className="flex space-x-1 sm:space-x-4">
+      <Button
+        aria_label="Refresh item"
+        children="Refresh Link"
+        onClick={onRefresh}
+        className="py-1 px-1 text-sm sm:py-2 sm:px-4 sm:text-base bg-[#555] text-[#4ecb52] hover:bg-[#777]"
+      />
+      <Button
+        aria_label="Delete item"
+        children="Delete item"
+        onClick={onDelete}
+        className="py-1 px-1 text-sm sm:py-2 sm:px-4 sm:text-base bg-[#555] text-[#FF5252] hover:bg-[#777]"
+      />
+      <Button
+        aria_label="Toggle Floating Player"
+        children="Toggle Floating Player"
+        onClick={onToggleFloatingPlayer}
+        className="py-1 px-1 text-sm sm:py-2 sm:px-4 sm:text-base bg-green-500 text-white rounded hover:bg-green-700"
+      />
+    </div>
+  );
+
+  // Progress Bar with Tooltip
+  const ProgressBar = ({ progress, onChange, onHover, tooltip }) => (
+    <div className="relative w-full h-2 bg-gray-600 rounded-full max-w-[1000px]">
+      <div className="absolute top-0 left-0 h-full bg-green-500 rounded-full" style={{ width: `${progress}%` }} />
+      <input
+        type="range"
+        min="0"
+        max="100"
+        className="absolute top-0 left-0 w-full h-2 appearance-none cursor-pointer bg-transparent z-10"
+        style={{ opacity: 0 }}
+        value={progress}
+        onChange={onChange}
+        onMouseMove={onHover}
+      />
+      {tooltip?.visible && <div style={{ position: "absolute", left: tooltip.x, top: tooltip.y }}>{tooltip.time}</div>}
+    </div>
+  );
+
+  // Loop and Volume Control
+  const LoopAndVolumeControls = ({ isLooping, onLoopToggle, volume, onVolumeChange, fileSize }) => (
+    <div className="flex items-center space-x-4 w-full">
+      <Button
+        aria_label="Repeat"
+        children={<FiRepeat className={isLooping ? "stroke-green-400" : "stroke-gray-400"} size={20} />}
+        onClick={onLoopToggle}
+        className="p-3 rounded-full bg-transparent hover:bg-[#777]"
+      />
+      <div className="flex items-center m-0 w-full space-x-3 max-w-[400px]">
+        <FiVolume2 className="stroke-green-400" size={35} />
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.01"
+          value={volume}
+          onChange={onVolumeChange}
+          className="h-2 w-full rounded-lg cursor-pointer accent-green-500"
+        />
+        <p className="text-gray-400 text-sm text-right whitespace-nowrap">File size: {fileSize}</p>
+      </div>
+    </div>
+  );
+
   return (
     <div className="bg-[#1E1E1E] pt-20 px-2 sm:px-6 py-14 sm:py-8">
       <ToastContainer stacked position="bottom-right" transition={Slide} limit={8} />
@@ -322,17 +419,11 @@ const MP3Player = () => {
       </div>
 
       {loading ? (
-        <div className="flex min-h-screen">
-          <section className="flex-grow">
-            <LoadingAnimation />
-          </section>
-        </div>
+        loadingScreen
       ) : Object.keys(mp3List).length === 0 ? (
-        <p className="text-lg text-center text-gray-300 h-screen">Convert any music to be able to listen to it here.</p>
+        noMp3ListMessage
       ) : Object.keys(filteredMP3s).length == 0 ? (
-        <p className="text-lg text-center text-gray-300 h-screen">
-          No music matches your search. Try being more case-sensitive.
-        </p>
+        noResultsMessage
       ) : (
         <ul className="space-y-4 sm:space-y-6 text-ssm max-w-[1000px] w-full min-h-screen mx-auto">
           {filteredMP3s.map((key, index) => {
@@ -354,148 +445,49 @@ const MP3Player = () => {
                 ) : (
                   <div className="flex flex-col items-center space-y-2 sm:space-y-4 w-full max-w-[1000px] mx-auto">
                     <div className="flex flex-col justify-start items-start text-start w-full space-y-3">
-                      {/* Floating Player Toggle Button */}
                       <div className="flex items-center w-full">
-                        {/* Play Button */}
-                        <Button
-                          aria_label="Play&Pause"
-                          children={
-                            isCurrentTrackPlaying ? (
-                              <FiPlay className="stroke-gray-400" size={20} />
-                            ) : (
-                              <FiPause className="stroke-green-400" size={20} />
-                            )
-                          }
-                          onClick={() => handlePlayPause(index)}
-                          className="p-2 rounded-full bg-transparent hover:bg-[#777]"
-                        />
-                        {/* Song Title with Share Button */}
-                        <ResultLink
-                          className="text-sm sm:text-xl"
-                          target="_blank"
-                          url={currentTrack.youtubeURL}
-                          href={currentTrack.url}
+                        <PlayButton isPlaying={isCurrentTrackPlaying} onClick={() => handlePlayPause(index)} />
+                        <SongTitleLink
                           title={currentTrack.title}
+                          url={currentTrack.url}
+                          youtubeURL={currentTrack.youtubeURL}
                         />
                       </div>
-
-                      {/* Container for the action buttons, aligned to the right */}
                       <div className="flex justify-between w-full space-x-4">
-                        <div className="flex space-x-1 sm:space-x-4">
-                          <Button
-                            aria_label="Refresh item"
-                            type="button"
-                            children="Refresh Link"
-                            onClick={() => handleRefreshLink(currentTrack)}
-                            className="py-1 px-1 text-sm sm:py-2 sm:px-4 sm:text-base  bg-[#555] text-[#4ecb52] hover:bg-[#777] duration-300"
-                          />
-                          <Button
-                            aria_label="Delete item"
-                            type="button"
-                            children="Delete item"
-                            onClick={() => handleDeleteItem(currentTrack, toast)}
-                            className="py-1 px-1 text-sm sm:py-2 sm:px-4 sm:text-base bg-[#555] text-[#FF5252] hover:bg-[#777]"
-                          />
-                          {/* Floating Player Toggle Button */}
-                          <Button
-                            aria_label="Toggle Floating Player"
-                            onClick={() => handleFloatingPlayer(index)}
-                            className="py-1 px-1 text-sm sm:py-2 sm:px-4 sm:text-base bg-green-500 text-white rounded hover:bg-green-700"
-                            children="Toggle Floating Player"
-                          />
-                        </div>
-                      </div>
-
-                      {/* Total Duration */}
-                      <p className="text-sm text-gray-400 whitespace-nowrap">Duration: {duration}</p>
-                    </div>
-
-                    {/* Volume and Progress Bars Column */}
-                    <div className="flex flex-col items-center space-y-4 w-full">
-                      <div className="relative w-full h-2 bg-gray-600 rounded-full max-w-[1000px]">
-                        {/* Progress bar */}
-                        <div className="h-2 bg-gray-600 rounded-full">
-                          {/* Progress bar fill */}
-                          <div
-                            className="absolute top-0 left-0 h-full bg-green-500 rounded-full"
-                            style={{
-                              width: `${state.progresses[index] || 0}%`,
-                            }}></div>
-
-                          {/* Movable round div at the end of the progress */}
-                          <div
-                            className="absolute top-[-6px] transform -translate-x-1/2 w-5 h-5 bg-white rounded-full shadow-md"
-                            style={{
-                              left: `${state.progresses[index] || 0}%`,
-                            }}></div>
-                          {/* Hidden progress bar input */}
-                          <input
-                            type="range"
-                            min="0"
-                            max="100"
-                            value={state.progresses[index] || 0}
-                            onChange={(e) => handleProgressChange(e, index)}
-                            className="absolute top-0 left-0 w-full h-2 appearance-none cursor-pointer bg-transparent z-10"
-                            style={{
-                              opacity: 0,
-                            }}
-                            onMouseMove={(e) => handleProgressMouseMove(e, index)}
-                            onMouseLeave={() => handleProgressMouseLeave(index)}
-                            onTouchMove={(e) => handleProgressTouchMove(e, index)}
-                            onTouchEnd={() => handleProgressTouchEnd(index)}
-                          />
-                        </div>
-
-                        {/* Tooltip */}
-                        {tooltips[index]?.visible && (
-                          <div
-                            style={{
-                              left: `${tooltips[index].x}px`,
-                              top: `${tooltips[index].y}px`,
-                            }}
-                            className="absolute transform -translate-x-1/2 px-2 py-1 bg-black text-white text-xs rounded">
-                            {tooltips[index].time}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Loop Button and Volume Control */}
-                    <div className="flex items-center space-x-4 w-full">
-                      <Button
-                        aria_label="Repeat"
-                        children={
-                          <FiRepeat
-                            className={`${isCurrentTrackLooping ? "stroke-green-400" : "stroke-gray-400"}`}
-                            size={20}
-                          />
-                        }
-                        onClick={() => toggleLoop(index)}
-                        className="p-3 rounded-full bg-transparent hover:bg-[#777]"
-                      />
-                      {/* Volume Control */}
-                      <div className="flex items-center m-0 w-full space-x-3 max-w-[400px]">
-                        <FiVolume2 className="stroke-green-400" size={35} />
-                        <input
-                          type="range"
-                          min="0"
-                          max="1"
-                          step="0.01"
-                          value={state.volumes[index] || 0.5}
-                          onChange={(e) => handleVolumeChange(e, index)}
-                          className="h-2 w-full rounded-lg cursor-pointer accent-green-500"
+                        <ActionButtons
+                          onRefresh={() => handleRefreshLink(currentTrack)}
+                          onDelete={() => handleDeleteItem(currentTrack, toast)}
+                          onToggleFloatingPlayer={() => handleFloatingPlayer(index)}
                         />
-                        <p className="text-gray-400 text-sm text-right whitespace-nowrap">
-                          File size: {formatFileSize(mp3List[key].fileSize)}
-                        </p>
                       </div>
+                      <p className="text-sm text-gray-400 whitespace-nowrap">Duration: {duration}</p>
                     </div>
-                    {/* Audio Element */}
-                    <audio
-                      inputMode="text"
-                      ref={(el) => (audioRefs.current[index] = el)}
-                      src={currentTrack.url}
-                      preload="none"
+                    <ProgressBar
+                      progress={mp3Object.progresses[index] || 0}
+                      onChange={(e) => handleProgressChange(e, index)}
+                      onHover={(e) => handleProgressMouseMove(e, index)}
+                      tooltip={mp3Object.tooltips[index]}
+                    />
+                    <LoopAndVolumeControls
+                      isLooping={isCurrentTrackLooping}
+                      onLoopToggle={() => toggleLoop(index)}
+                      volume={mp3Object.volumes[index] || 0.5}
+                      onVolumeChange={(e) => handleVolumeChange(e, index)}
+                      fileSize={formatFileSize(mp3List[key].fileSize)}
+                    />
+                    <AudioPlayer
+                      track={currentTrack}
+                      index={index}
+                      onLoadedMetadata={() => {
+                        /* Handle metadata if needed */
+                      }}
+                      onPlay={() => {
+                        /* Handle play event if needed */
+                      }}
+                      onPause={() => {
+                        /* Handle pause event if needed */
+                      }}
+                      isPlaying={isCurrentTrackPlaying}
                     />
                   </div>
                 )}
@@ -515,7 +507,7 @@ const MP3Player = () => {
             onPrevious={handlePreviousTrack}
             onClosePlayer={() => handleFloatingPlayer(state.playingIndex)}
             onVolumeChange={(e) => handleVolumeChange(e, state.playingIndex)}
-            currentVolume={state.volumes[state.playingIndex] || 1}
+            currentVolume={mp3Object.volumes[state.playingIndex] || 1}
           />
         )}
       </div>
diff --git a/src/utils/RefreshLink.js b/src/utils/RefreshLink.js
index f4ac485..d7264f9 100644
--- a/src/utils/RefreshLink.js
+++ b/src/utils/RefreshLink.js
@@ -4,21 +4,10 @@ import { refreshMP3 } from "../database/music/refreshMP3";
 
 export const refreshMP3Link = async (itemUrl, youtubeID, setMp3List, toast, fileSize, authUser, loadingUser) => {
   try {
-    let rangeEnd;
-    const tenMB = 10485760;
-
-    if (fileSize <= tenMB) {
-      rangeEnd = fileSize - 1;
-      console.log("File size is 10MB or less. Fetching the entire file for validation.");
-    } else {
-      rangeEnd = Math.floor(fileSize * 0.5) - 1;
-      console.log("File size is larger than 10MB. Fetching 50% of the file for validation.");
-    }
-
     const response = await fetch(itemUrl, {
       method: "GET",
       headers: {
-        Range: `bytes=0-${rangeEnd}`,
+        Range: `bytes=0-${fileSize - 1}`,
       },
     });
 
@@ -28,7 +17,7 @@ export const refreshMP3Link = async (itemUrl, youtubeID, setMp3List, toast, file
     }
 
     toast.info("Executing link refresh.");
-    await refresh(toast, youtubeID, setMp3List, authUser, loadingUser);
+    await refreshLink(toast, youtubeID, setMp3List, authUser, loadingUser);
     return false;
   } catch (error) {
     console.error("Error checking the link:", error.message);
@@ -37,7 +26,7 @@ export const refreshMP3Link = async (itemUrl, youtubeID, setMp3List, toast, file
   }
 };
 
-const refresh = async (toast, youtubeID, setMp3List, authUser, loadingUser) => {
+const refreshLink = async (toast, youtubeID, setMp3List, authUser, loadingUser) => {
   const allMP3s = await getAllMP3s(authUser, loadingUser);
   try {
     const options = {
@@ -62,13 +51,14 @@ const refresh = async (toast, youtubeID, setMp3List, authUser, loadingUser) => {
 
     const mp3ToUpdate = updatedMP3s.find((mp3) => mp3.youtubeID === youtubeID);
     if (mp3ToUpdate) {
-      await refreshMP3(youtubeID, mp3ToUpdate).then(() => {
-        setMp3List(updatedMP3s);
-        toast.success("Link refreshed and replaced successfully!");
-      });
+      await refreshMP3(youtubeID, mp3ToUpdate);
+      setMp3List(updatedMP3s);
+      toast.success("Link refreshed and replaced successfully!");
+      return true;
     }
   } catch (error) {
     toast.error("Failed to refresh the link. Please try again.");
     console.error("Error refreshing the link:", error);
+    return false;
   }
 };