patch 3

frontend/src/app/category/[category]/CategoryPage.css

@@ -0,0 +1,9 @@
+.music-card-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+}

frontend/src/app/category/[category]/page.js

@@ -15,7 +15,7 @@ export default function CategoryPage({ params }) {
   useEffect(() => {
     const fetchMusicByCategory = async () => {
       try {
-        const response = await fetch(`/api/get/category/${category}?page=${page}&limit=10`);
+        const response = await fetch(`/api/get/category/${category}?page=${page}&limit=20`);
         if (!response.ok) {
           throw new Error("Failed to fetch music");
         }
@@ -58,7 +58,7 @@ export default function CategoryPage({ params }) {
   return (
     <div className="category-page font-[family-name:var(--font-geist-sans)]">
       <h1>{category.charAt(0).toUpperCase() + category.slice(1)} Music</h1>
-      <div className="card-section">
+      <div className="music-card-section">
         {musicItems.map((file, index) => (
           <Card 
             key={`${file}-${page}`} // Ensure unique key by appending page number

frontend/src/app/globals.css

@@ -8,12 +8,19 @@
   --background-secondary: #110652;
   --foreground-secondary: #1d85b9;
   --background-2: #332a77;
+  --foreground-2: #0b32a9;
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  max-width: 100vw;
+  min-height: 100vh;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 footer {
@@ -21,6 +28,7 @@ footer {
 }
 
 .app-container{
-  overflow: hidden;
-  max-width: 100vw;
+  margin-left: 10px;
+  margin-right: 10px;
+  height: 85vh;
 }

frontend/src/app/layout.js

@@ -26,7 +26,7 @@ export default function RootLayout({ children }) {
           className={`${geistSans.variable} ${geistMono.variable} antialiased max-h-screen overflow-hidden`}
         >
           <div className="app-container">{children}</div>
-          <footer className="absolute bottom-0 flex items-center w-full">
+          <footer className="bottom-0 flex items-center w-full">
             <MusicPlayer/>
           </footer>
         </body>

frontend/src/components/Card.css

@@ -1,21 +1,23 @@
 .music-card {
-  width: 180px;
+  width: 200px;
   height: 40;
-  background-color: var(--background-2);
-  border-radius: 50px;
+  background-image: linear-gradient(var(--background-2), var(--foreground-2));
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 20px;
   display: flex;
   align-items: center;
+  gap: 10px;
 }
 
 .card-title {
   display: -webkit-box;
-  -webkit-line-clamp: 1;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;
-  line-height: 1.2em;
-  max-height: 1.2em;
   font-size: 0.8rem;
   cursor: pointer;
 }

frontend/src/components/CategoriesSection.css

@@ -10,7 +10,7 @@
   width: 120px;
   height: 60px;
   padding: 10px;
-  background-color: var(--foreground-secondary);
+  background-image: linear-gradient(var(--foreground-secondary), var(--foreground-2));
   border-radius: 5px;
   display: flex;
   justify-content: center;

frontend/src/components/MusicPlayer.css

@@ -5,6 +5,8 @@
 
 .player-minimized video {
   height: 10vh;
+  width: 25vh;
+  background-color: black;
 }
 
 .music-title {
@@ -121,12 +123,14 @@
   width: 100%;
   display: flex;
   justify-content: left;
+  gap: 10px;
 }
 
 .player-controls-right {
   width: 100%;
   display: flex;
   justify-content: right;
+  gap: 10px;
 }
 
 
@@ -168,7 +172,8 @@
 }
 
 .player-controls-mini {
-
+  background-image: linear-gradient(var(--background-2), var(--background-secondary));
+  width: 100%;
 }
 
 .player-mini-control-top {

frontend/src/components/MusicPlayer.js

@@ -344,6 +344,21 @@ export default function MusicPlayer() {
               <button className="player-min-button" onClick={destroyPlayer}>
                 <TbPlayerStop />
               </button>
+              <button
+                onClick={toggleMute}
+                className="player-min-button volumn-btn"
+              >
+                {isMuted ? <TbVolumeOff /> : <TbVolume />}
+              </button>
+              <input
+                type="range"
+                className="volume-control"
+                min="0"
+                max="1"
+                step="0.01"
+                value={volume}
+                onChange={handleVolumeChange}
+              />
             </div>
           </div>
         )}

frontend/src/context/MusicPlayerContext.js

@@ -13,7 +13,6 @@ export const MusicPlayerProvider = ({ children }) => {
   const [loadingProgress, setLoadingProgress] = useState(null); // New state for loading progress
 
   const initializePlayer = async (source) => {
-    // Extract the file name from the source path
     const extractedFileName = source.split('/').pop();
     setFileName(extractedFileName); // Set the file name state
 
@@ -51,18 +50,26 @@ export const MusicPlayerProvider = ({ children }) => {
       } catch (error) {
         console.error("Error fetching progress:", error);
       }
-    }, 2000); // Check progress every 2 seconds
+    }, 1000); // Check progress every second
   };
 
-  const fetchFinalUrl = async (fileName) => {
+  const fetchFinalUrl = async (fileName, attempt = 1) => {
     try {
       const response = await fetch(`/api/get/music/${encodeURIComponent(fileName)}`);
       const data = await response.json();
 
-      // Start the player with the final URL
-      startPlayer(data.url);
+      if (data.url) {
+        // Start the player with the final URL if available
+        startPlayer(data.url);
+      } else {
+        // If URL is not yet available, retry with exponential backoff
+        const retryDelay = Math.min(2000 * attempt, 10000); // Increase delay with each attempt, maxing at 10 seconds
+        setTimeout(() => fetchFinalUrl(fileName, attempt + 1), retryDelay);
+      }
     } catch (error) {
       console.error("Error fetching final URL:", error);
+      const retryDelay = Math.min(2000 * attempt, 10000); // Retry after delay in case of error
+      setTimeout(() => fetchFinalUrl(fileName, attempt + 1), retryDelay);
     }
   };