modal

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,15 +10,21 @@ 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");
   const { setMP3List } = useContext(MP3Context);
   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">

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}

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;