fix $ improv

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

@@ -11,6 +11,7 @@ export default function CategoryPage({ params }) {
   const [error, setError] = useState(null);
   const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(true);
+  const [maxPage, setMaxPage] = useState(Infinity); // Store the calculated max page
 
   useEffect(() => {
     const fetchMusicByCategory = async () => {
@@ -31,8 +32,12 @@ export default function CategoryPage({ params }) {
           return [...prevItems, ...newItems];
         });
 
-        // Check if there are more files to load based on total_files from the response
-        setHasMore(musicItems.length + data.files.length < data.total_files); // Update hasMore based on total files
+        // Calculate maxPage based on total_files and limit, then set it
+        const calculatedMaxPage = Math.ceil(data.total_files / data.limit);
+        setMaxPage(calculatedMaxPage);
+
+        // Update hasMore based on whether we have reached maxPage
+        setHasMore(page < calculatedMaxPage);
       } catch (err) {
         setError(err.message);
       } finally {
@@ -43,7 +48,7 @@ export default function CategoryPage({ params }) {
     fetchMusicByCategory();
   }, [category, page]);
 
-  // Load more when scrolled to bottom of the app container
+  // Load more when scrolled to the bottom of the app container
   useEffect(() => {
     const appContainer = document.querySelector('.app-container'); // Get the app-container element
     if (!appContainer) return;
@@ -65,7 +70,7 @@ export default function CategoryPage({ params }) {
   }, [hasMore, loading]);
 
   const loadMore = () => {
-    if (hasMore) {
+    if (hasMore && page < maxPage) { // Ensure page does not exceed maxPage
       setPage(prevPage => prevPage + 1);
     }
   };

frontend/src/app/globals.css

@@ -3,12 +3,13 @@
 @tailwind utilities;
 
 :root {
-  --background: #0a0523;
+  --background: #080523;
   --foreground: #ededed;
-  --background-secondary: #110652;
+  --background-secondary: #060a52;
   --foreground-secondary: #1d85b9;
-  --background-2: #332a77;
-  --foreground-2: #0b32a9;
+  --background-2: #2a3477;
+  --foreground-2: #0b5da9;
+  --foreground-3: #0f0e60;
 }
 
 html,

frontend/src/components/Card.css

@@ -1,7 +1,7 @@
 .music-card {
   width: 250px;
   height: 40;
-  background-image: linear-gradient(var(--background-2), var(--foreground-2));
+  background-image: linear-gradient(var(--background-2), var(--foreground-3));
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 5px;
@@ -10,6 +10,7 @@
   align-items: center;
   gap: 10px;
   overflow: hidden;
+  transition: scale .3s ease;
 }
 
 .card-title {
@@ -27,3 +28,30 @@
   font-size: 40px;
   overflow: visible;
 }
+
+.music-card:hover{
+  scale: 1.03;
+}
+
+.music-card.music-card.now-playing{
+  background-image: linear-gradient(var(--background-2), var(--foreground-2));
+  border: 2px solid var(--foreground-secondary);
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+  box-shadow: 0 0 15px var(--foreground-secondary);
+  scale: 1.03;
+}
+
+.music-card.now-playing .card-icon{
+  animation: rotateInfinite 1.5s linear infinite;
+}
+
+@keyframes rotateInfinite {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}

frontend/src/components/Card.js

@@ -2,20 +2,19 @@
 import "./Card.css";
 import { FaCompactDisc } from "react-icons/fa";
 import { useMusicPlayer } from "@/context/MusicPlayerContext";
+import { formatTitle } from "@/lib/utils";
 
 const Card = ({ src }) => {
-  const { initializePlayer } = useMusicPlayer();
-
-  // Extract title from the src by parsing the file name
-  const title = src.split('/').pop().split('.')[0]; // Remove path and extension
+  const { initializePlayer, nowPlaying } = useMusicPlayer();
+  const title = formatTitle(src);
 
   const handleButtonClick = () => {
-    initializePlayer(src);
+    initializePlayer(src, title);
   };
 
   return (
     <button onClick={handleButtonClick}>
-      <div className="music-card">
+      <div className={`music-card ${nowPlaying === title ? "now-playing" : ""}`}>
         <FaCompactDisc className="card-icon" />
         <label className="card-title">{title}</label>
       </div>

frontend/src/components/MusicPlayer.js

@@ -26,9 +26,13 @@ export default function MusicPlayer() {
     togglePlayerSize,
     setIsPlayerVisible,
     initializePlayer,
-    fileName,
+    title,
+    setNowPlaying,
+    nowPlaying,
+    didDestroy, 
+    setDidDestroy,
   } = useMusicPlayer();
-
+  
   const [currentSrc, setCurrentSrc] = useState(src);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
@@ -42,69 +46,79 @@ export default function MusicPlayer() {
   const [isFullscreen, setIsFullscreen] = useState(false);
   const overlayTimeout = useRef(null);
   const seekTime = 5;
-
-  useEffect(() => {
-    if (!currentSrc) return;
-
-    const videoElement = videoRef.current;
-
-    const handleTimeUpdate = () => {
-      if (videoElement) {
-        setCurrentTime(videoElement.currentTime);
-        setProgress((videoElement.currentTime / videoElement.duration) * 100);
-      }
-    };
-
-    const handleLoadedMetadata = () => {
-      if (videoElement) {
-        setDuration(videoElement.duration);
-        setProgress(0);
-        setCurrentTime(0);
-      }
-    };
-
-    const handleProgress = () => {
-      const videoElement = videoRef.current;
-      if (videoElement.buffered.length > 0) {
-        const bufferEnd = videoElement.buffered.end(
-          videoElement.buffered.length - 1
-        );
-        const bufferValue = (bufferEnd / videoElement.duration) * 100;
-        setBufferProgress(bufferValue);
-      }
-    };
-
-    const handlePlay = () => setIsPlaying(true);
-    const handlePause = () => setIsPlaying(false);
-
+  
+  // Event Handlers
+  const handleTimeUpdate = (videoElement) => {
+    if (videoElement) {
+      setCurrentTime(videoElement.currentTime);
+      setProgress((videoElement.currentTime / videoElement.duration) * 100);
+    }
+  };
+  
+  const handleLoadedMetadata = (videoElement) => {
+    if (videoElement) {
+      setDuration(videoElement.duration);
+      setProgress(0);
+      setCurrentTime(0);
+    }
+  };
+  
+  const handleProgress = (videoElement) => {
+    if (videoElement && videoElement.buffered.length > 0) {
+      const bufferEnd = videoElement.buffered.end(videoElement.buffered.length - 1);
+      const bufferValue = (bufferEnd / videoElement.duration) * 100;
+      setBufferProgress(bufferValue);
+    }
+  };
+  
+  const handlePlay = () => {
+    setIsPlaying(true);
+    setNowPlaying(title);
+  };
+  
+  const handlePause = () => {
+    setIsPlaying(false);
+    setNowPlaying("");
+  };
+  
+  const attachEventListeners = (videoElement) => {
     if (videoElement) {
-      videoElement.addEventListener("timeupdate", handleTimeUpdate);
-      videoElement.addEventListener("loadedmetadata", handleLoadedMetadata);
-      videoElement.addEventListener("progress", handleProgress);
+      videoElement.addEventListener("timeupdate", () => handleTimeUpdate(videoElement));
+      videoElement.addEventListener("loadedmetadata", () => handleLoadedMetadata(videoElement));
+      videoElement.addEventListener("progress", () => handleProgress(videoElement));
       videoElement.addEventListener("play", handlePlay);
       videoElement.addEventListener("pause", handlePause);
     }
-
+  };
+  
+  const detachEventListeners = (videoElement) => {
+    if (videoElement) {
+      videoElement.removeEventListener("timeupdate", () => handleTimeUpdate(videoElement));
+      videoElement.removeEventListener("loadedmetadata", () => handleLoadedMetadata(videoElement));
+      videoElement.removeEventListener("progress", () => handleProgress(videoElement));
+      videoElement.removeEventListener("play", handlePlay);
+      videoElement.removeEventListener("pause", handlePause);
+    }
+  };
+  
+  useEffect(() => {
+    const videoElement = videoRef.current;
+  
+    // Attach event listeners
+    attachEventListeners(videoElement);
+  
     return () => {
-      if (videoElement) {
-        videoElement.removeEventListener("timeupdate", handleTimeUpdate);
-        videoElement.removeEventListener(
-          "loadedmetadata",
-          handleLoadedMetadata
-        );
-        videoElement.removeEventListener("progress", handleProgress);
-        videoElement.removeEventListener("play", handlePlay);
-        videoElement.removeEventListener("pause", handlePause);
-      }
+      // Detach event listeners
+      detachEventListeners(videoElement);
     };
-  }, [videoRef, currentSrc]);
-
+  }, [videoRef, currentSrc, nowPlaying, didDestroy]);
+  
   useEffect(() => {
     if (src !== currentSrc) {
       setCurrentSrc(src);
     }
   }, [src, currentSrc]);
-
+  
   useEffect(() => {
     if (showControls) {
       if (overlayTimeout.current) {
@@ -112,10 +126,10 @@ export default function MusicPlayer() {
       }
       overlayTimeout.current = setTimeout(() => setShowControls(false), 3000);
     }
-
+  
     return () => clearTimeout(overlayTimeout.current);
   }, [showControls]);
-
+  
   const togglePlayPause = () => {
     if (videoRef.current) {
       if (isPlaying) {
@@ -126,23 +140,20 @@ export default function MusicPlayer() {
       setIsPlaying(!isPlaying);
     }
   };
+  
   const handleVolumeChange = (event) => {
     let volumeValue = parseFloat(event.target.value);
-
+  
     // Ensure the volume is a finite number between 0 and 1
-    if (!isFinite(volumeValue) || volumeValue < 0) {
-      volumeValue = 0;
-    } else if (volumeValue > 1) {
-      volumeValue = 1;
-    }
-
+    volumeValue = Math.max(0, Math.min(1, volumeValue));
+  
     setVolume(volumeValue);
     if (videoRef.current) {
       videoRef.current.volume = volumeValue;
     }
     setIsMuted(volumeValue === 0);
   };
-
+  
   const toggleMute = () => {
     if (isMuted) {
       videoRef.current.volume = volume;
@@ -152,38 +163,50 @@ export default function MusicPlayer() {
       setIsMuted(true);
     }
   };
-
+  
   const toggleFullscreen = () => {
     const doc = window.document;
     const docEl = doc.documentElement;
-
+  
     const requestFullscreen =
       docEl.requestFullscreen ||
       docEl.mozRequestFullScreen ||
       docEl.webkitRequestFullscreen ||
       docEl.msRequestFullscreen;
+  
     const exitFullscreen =
       doc.exitFullscreen ||
       doc.mozCancelFullScreen ||
       docEl.webkitExitFullscreen ||
       doc.msExitFullscreen;
-
+  
     if (!isFullscreen) {
       requestFullscreen.call(docEl);
     } else {
       exitFullscreen.call(doc);
     }
-
+  
     setIsFullscreen(!isFullscreen);
   };
-
+  
   const destroyPlayer = () => {
     if (videoRef.current) {
-      videoRef.current.src = "";
+      videoRef.current.pause();
+      videoRef.current.removeAttribute("src"); // Clear the source
+      videoRef.current.load(); // Reload to reset duration/currentTime
+      setNowPlaying("");
+      setCurrentSrc("/reset");
+      setCurrentTime(0);
+      setDuration(0);
+      setProgress(0);
+      setBufferProgress(0);
+      setIsPlaying(false);
       setIsPlayerVisible(false);
+      setDidDestroy(true);
+      console.log("setting didDestroy to true");
     }
   };
-
+  
   const handleProgressClick = (e) => {
     const progressBar = e.currentTarget;
     const rect = progressBar.getBoundingClientRect();
@@ -194,7 +217,7 @@ export default function MusicPlayer() {
       setCurrentTime(newTime);
     }
   };
-
+  
   const handleFastForward = () => {
     if (videoRef.current) {
       videoRef.current.currentTime = Math.min(
@@ -203,7 +226,7 @@ export default function MusicPlayer() {
       );
     }
   };
-
+  
   const handleRewind = () => {
     if (videoRef.current) {
       videoRef.current.currentTime = Math.max(
@@ -212,11 +235,13 @@ export default function MusicPlayer() {
       );
     }
   };
+  
   const handleMouseMove = () => {
     setShowControls(true);
   };
+  
   if (!isPlayerVisible || !currentSrc) return null;
-
+  
   return (
     <div
       className={
@@ -230,7 +255,7 @@ export default function MusicPlayer() {
         <div className={`player-controls ${showControls ? "show" : "hide"}`}>
           <div className="player-controls-top">
             <div className="name-container">
-              <label className="music-title">{fileName}</label>
+              <label className="music-title">{title}</label>
               <button className="player-max-button" onClick={togglePlayerSize}>
                 <IoIosArrowDown />
               </button>
@@ -339,7 +364,7 @@ export default function MusicPlayer() {
         {!isPlayerMaximized && (
           <div className="player-controls-mini">
             <div className="player-mini-control-top">
-              <label className="music-title player-mini">{fileName}</label>
+              <label className="music-title player-mini">{title}</label>
               <button className="player-min-button" onClick={togglePlayerSize}>
                 <IoIosArrowUp />
               </button>

frontend/src/context/MusicPlayerContext.js

@@ -1,52 +1,47 @@
-"use client";
-
-import React, { createContext, useContext, useRef, useState } from "react";
+import React, { createContext, useContext, useRef, useState, useEffect } from "react";
 
 const MusicPlayerContext = createContext();
 
 export const MusicPlayerProvider = ({ children }) => {
   const videoRef = useRef(null);
   const [src, setSrc] = useState("");
-  const [fileName, setFileName] = useState("");
+  const [title, setTitle] = useState("");
+  const [nowPlaying, setNowPlaying] = useState("");
   const [isPlayerVisible, setIsPlayerVisible] = useState(false);
   const [isPlayerMaximized, setIsPlayerMaximized] = useState(false);
   const [loadingProgress, setLoadingProgress] = useState(null);
   const [abortController, setAbortController] = useState(null); // AbortController for stopping
+  const [didDestroy, setDidDestroy] = useState(false);
 
-  const initializePlayer = async (source) => {
-    // Stop any ongoing initializePlayer process if called again
+  const initializePlayer = async (source, title) => {
     if (abortController) {
-      abortController.abort(); // Cancel the previous request
+      abortController.abort();
     }
-
-    // Set up a new AbortController
+    
     const newAbortController = new AbortController();
     setAbortController(newAbortController);
 
-    // Extract the file name and start the player
     const extractedFileName = source.split('/').pop();
-    setFileName(extractedFileName);
-    if (videoRef.current){
+    setTitle(title);
+    if (videoRef.current) {
       videoRef.current.pause();
     }
     
     try {
-      // Call the API with the signal to allow aborting
       const response = await fetch(`/api/get/music/${encodeURIComponent(extractedFileName)}`, {
         signal: newAbortController.signal,
       });
       const data = await response.json();
 
-      // If the file is being downloaded, check progress
       if (data.status === "Download started") {
         const progressUrl = data.progress_url;
         checkProgress(progressUrl, extractedFileName, newAbortController);
       } else {
-        startPlayer(data.url); // Start the player with the final URL if available
+        startPlayer(data.url);
       }
     } catch (error) {
       if (error.name !== 'AbortError') {
-        console.error("Error initializing player:", error); // Log only non-abort errors
+        console.error("Error initializing player:", error);
       }
     }
   };
@@ -56,7 +51,6 @@ export const MusicPlayerProvider = ({ children }) => {
       try {
         const response = await fetch(progressUrl, { signal: abortController.signal });
         const progressData = await response.json();
-
         setLoadingProgress(progressData.progress);
 
         if (progressData.progress.status === "Completed") {
@@ -65,7 +59,7 @@ export const MusicPlayerProvider = ({ children }) => {
         }
       } catch (error) {
         if (error.name === 'AbortError') {
-          clearInterval(intervalId); // Stop checking progress if aborted
+          clearInterval(intervalId);
         } else {
           console.error("Error fetching progress:", error);
         }
@@ -83,32 +77,35 @@ export const MusicPlayerProvider = ({ children }) => {
       if (data.url) {
         startPlayer(data.url);
       } else {
-        // Retry after a delay if the URL is not available
         retryFetchFinalUrl(fileName, abortController, attempt);
       }
     } catch (error) {
       if (error.name !== 'AbortError') {
         console.error("Error fetching final URL:", error);
-        // Retry after a delay if any error occurs
         retryFetchFinalUrl(fileName, abortController, attempt);
       }
     }
   };
 
   const retryFetchFinalUrl = (fileName, abortController, attempt) => {
-    const retryDelay = 2000; // Delay before retrying
+    const retryDelay = 2000;
     setTimeout(() => {
       console.log(`Retry attempt ${attempt} for ${fileName}`);
-      fetchFinalUrl(fileName, abortController, attempt + 1); // Increment the attempt count
+      fetchFinalUrl(fileName, abortController, attempt + 1);
     }, retryDelay);
   };
 
   const startPlayer = (source) => {
+    setDidDestroy(false);
+    console.log("setting didDestroy to false");
     setSrc(source);
     setIsPlayerVisible(true);
     if (videoRef.current) {
       videoRef.current.src = source;
       videoRef.current.load();
+      videoRef.current.play().catch((error) => {
+        console.error("Error playing video:", error);
+      });
     }
   };
 
@@ -121,11 +118,15 @@ export const MusicPlayerProvider = ({ children }) => {
         initializePlayer,
         isPlayerVisible,
         src,
-        fileName,
+        title,
         isPlayerMaximized,
         togglePlayerSize,
         setIsPlayerVisible,
         loadingProgress,
+        nowPlaying,
+        setNowPlaying,
+        didDestroy, 
+        setDidDestroy,
       }}
     >
       {children}

frontend/src/lib/utils.js

@@ -0,0 +1,3 @@
+export function formatTitle(src){
+    return src.split('/').pop().split('.')[0];
+}