fix and improv

frontend/src/app/globals.css

@@ -11,24 +11,52 @@
   --foreground-2: #0b32a9;
 }
 
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
 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 {
   background-color: var(--background-secondary);
 }
 
-.app-container{
+.app-container {
   margin-left: 10px;
   margin-right: 10px;
-  height: 85vh;
-}
+  flex-grow: 1;
+  overflow-y: auto;
+
+  /* Styled scrollbar */
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: #888 #222;
+}
+
+/* For WebKit browsers (Chrome, Edge, Safari) */
+.app-container::-webkit-scrollbar {
+  width: 8px; /* Width of the scrollbar */
+}
+
+.app-container::-webkit-scrollbar-track {
+  background: #222; /* Track color */
+  border-radius: 4px;
+}
+
+.app-container::-webkit-scrollbar-thumb {
+  background-color: #888; /* Scrollbar thumb color */
+  border-radius: 4px;
+}
+
+.app-container::-webkit-scrollbar-thumb:hover {
+  background-color: #555; /* Thumb color on hover */
+}

frontend/src/components/CategoriesSection.css

@@ -21,4 +21,5 @@
   font-size: 1rem;
   text-transform: capitalize;
   font-weight: 600;
+  cursor: pointer;
 }

frontend/src/components/MusicPlayer.css

@@ -4,9 +4,10 @@
 }
 
 .player-minimized video {
+  max-width: 18vh;
   height: 10vh;
-  width: 25vh;
-  background-color: black;
+  min-width: 18vh;
+  background-color: #000;
 }
 
 .music-title {
@@ -18,9 +19,11 @@
   white-space: normal;             /* Allows wrapping but limits line count */
   line-height: 1.2em;              /* Optional: Adjust line spacing */
   max-height: 1.2em;               /* Optional: Adjust to fit one line */
+  width: 100%;
 }
 
-.music-title.mini{
+.music-title.player-mini{
+  font-size: .85rem;
 }
 
 .player-minimized {
@@ -40,9 +43,14 @@
   align-items: center;
 }
 
-.player-mini-top {
+.player-top {
   display: flex;
 }
+.name-container{
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
 
 .player-controls {
   position: absolute;
@@ -117,6 +125,8 @@
   width: 100%;
   justify-content: center;
   align-items: center;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
 .player-controls-left {
@@ -153,6 +163,12 @@
   border-radius: 10px;
 }
 
+.progress-bar-container.player-mini {
+  width: 100%;
+  height: 6px;
+  margin: 7px 0;
+}
+
 .buffer-bar {
   position: absolute;
   top: 0;
@@ -192,10 +208,16 @@
 
 .player-mini-control-bottom {
   display: flex;
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
   padding-bottom: 10px;
   gap: 5px;
+  font-size: .8rem;
+}
+
+.player-mini-volume{
+  display: flex;
+  gap: 5px;
 }
 
 /********** Range Input Styles **********/

frontend/src/components/MusicPlayer.js

@@ -64,15 +64,15 @@ export default function MusicPlayer() {
     };
 
     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 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);
@@ -179,7 +179,8 @@ export default function MusicPlayer() {
 
   const destroyPlayer = () => {
     if (videoRef.current) {
-      initializePlayer("");
+      videoRef.current.src = "";
+      setIsPlayerVisible(false);
     }
   };
 
@@ -228,10 +229,12 @@ export default function MusicPlayer() {
       {isPlayerMaximized && (
         <div className={`player-controls ${showControls ? "show" : "hide"}`}>
           <div className="player-controls-top">
-            <label className="music-title">{fileName}</label>
-            <button className="player-max-button" onClick={togglePlayerSize}>
-              <IoIosArrowDown />
-            </button>
+            <div className="name-container">
+              <label className="music-title">{fileName}</label>
+              <button className="player-max-button" onClick={togglePlayerSize}>
+                <IoIosArrowDown />
+              </button>
+            </div>
           </div>
           <div className="player-controls-center">
             <button className="player-max-button" onClick={handleRewind}>
@@ -263,70 +266,80 @@ export default function MusicPlayer() {
               <label className="duration">{formatTime(duration)}</label>
             </div>
             <div className="player-controls-down">
-            <div className="player-controls-left">
-              <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}
-              />
-              <button
-                onClick={handleRewind}
-                className="previous-btn player-min-button"
-              >
-                <TbPlayerSkipBack />
-              </button>
+              <div className="player-controls-left">
+                <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}
+                />
+                <button
+                  onClick={handleRewind}
+                  className="previous-btn player-min-button"
+                >
+                  <TbPlayerSkipBack />
+                </button>
 
-              <button
-                onClick={handleFastForward}
-                className="next-btn player-min-button"
-              >
-                <TbPlayerSkipForward />
-              </button>
-              {isPlaying ? (
-                <button className="playlist-btn player-min-button">
-                  <TbPlaylist />
+                <button
+                  onClick={handleFastForward}
+                  className="next-btn player-min-button"
+                >
+                  <TbPlayerSkipForward />
                 </button>
-              ) : (
+                <button className="player-min-button" onClick={destroyPlayer}>
+                  <TbPlayerStop />
+                </button>
+                {isPlaying ? (
+                  <button className="playlist-btn player-min-button">
+                    <TbPlaylist />
+                  </button>
+                ) : (
+                  <button
+                    className="playlist-btn player-min-button"
+                    disabled={true}
+                  >
+                    <TbPlaylistOff />
+                  </button>
+                )}
+              </div>
+              <div className="player-controls-right">
                 <button
-                  className="playlist-btn player-min-button"
-                  disabled={true}
+                  onClick={toggleFullscreen}
+                  className="player-min-button"
                 >
-                  <TbPlaylistOff />
+                  {isFullscreen ? (
+                    <RiFullscreenExitLine />
+                  ) : (
+                    <RiFullscreenLine />
+                  )}
                 </button>
-              )}
-            </div>
-            <div className="player-controls-right">
-              <button onClick={toggleFullscreen} className="player-min-button">
-                {isFullscreen ? <RiFullscreenExitLine /> : <RiFullscreenLine />}
-              </button>
+              </div>
             </div>
           </div>
-          </div>
-        
         </div>
       )}
-      <div className="player-mini-top">
+      <div className="player-top">
         <video
           ref={videoRef}
           src={currentSrc}
           preload="metadata"
           className="video-element"
           autoPlay
+          onClick={isPlayerMaximized ? null : togglePlayerSize}
         />
         {!isPlayerMaximized && (
           <div className="player-controls-mini">
             <div className="player-mini-control-top">
-              <label className="music-title mini">{fileName}</label>
+              <label className="music-title player-mini">{fileName}</label>
               <button className="player-min-button" onClick={togglePlayerSize}>
                 <IoIosArrowUp />
               </button>
@@ -344,6 +357,8 @@ export default function MusicPlayer() {
               <button className="player-min-button" onClick={destroyPlayer}>
                 <TbPlayerStop />
               </button>
+            </div>
+            <div className="player-mini-volume">
               <button
                 onClick={toggleMute}
                 className="player-min-button volumn-btn"
@@ -366,7 +381,10 @@ export default function MusicPlayer() {
       {!isPlayerMaximized && (
         <div className="player-mini-control-bottom">
           <label className="current-time">{formatTime(currentTime)}</label>
-          <div className="progress-bar-container" onClick={handleProgressClick}>
+          <div
+            className="progress-bar-container player-mini"
+            onClick={handleProgressClick}
+          >
             <div
               className="buffer-bar"
               style={{ width: `${bufferProgress}%` }}

frontend/src/context/MusicPlayerContext.js

@@ -7,69 +7,89 @@ const MusicPlayerContext = createContext();
 export const MusicPlayerProvider = ({ children }) => {
   const videoRef = useRef(null);
   const [src, setSrc] = useState("");
-  const [fileName, setFileName] = useState(""); // New state for the file name
+  const [fileName, setFileName] = useState("");
   const [isPlayerVisible, setIsPlayerVisible] = useState(false);
   const [isPlayerMaximized, setIsPlayerMaximized] = useState(false);
-  const [loadingProgress, setLoadingProgress] = useState(null); // New state for loading progress
+  const [loadingProgress, setLoadingProgress] = useState(null);
+  const [abortController, setAbortController] = useState(null); // AbortController for stopping
 
   const initializePlayer = async (source) => {
+    // Stop any ongoing initializePlayer process if called again
+    if (abortController) {
+      abortController.abort(); // Cancel the previous request
+    }
+
+    // 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); // Set the file name state
+    setFileName(extractedFileName);
+    startPlayer(extractedFileName);
 
     try {
-      // Call the API to get the music file or start the download
-      const response = await fetch(`/api/get/music/${encodeURIComponent(extractedFileName)}`);
+      // 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, get the progress URL
+      // If the file is being downloaded, check progress
       if (data.status === "Download started") {
         const progressUrl = data.progress_url;
-        checkProgress(progressUrl, extractedFileName);
+        checkProgress(progressUrl, extractedFileName, newAbortController);
       } else {
-        // If the music file is available, initialize the player
-        startPlayer(data.url);
+        startPlayer(data.url); // Start the player with the final URL if available
       }
     } catch (error) {
-      console.error("Error initializing player:", error);
+      if (error.name !== 'AbortError') {
+        console.error("Error initializing player:", error); // Log only non-abort errors
+      }
     }
   };
 
-  const checkProgress = (progressUrl, fileName) => {
+  const checkProgress = (progressUrl, fileName, abortController) => {
     const intervalId = setInterval(async () => {
       try {
-        const response = await fetch(progressUrl);
+        const response = await fetch(progressUrl, { signal: abortController.signal });
         const progressData = await response.json();
 
-        setLoadingProgress(progressData.progress); // Update loading progress state
+        setLoadingProgress(progressData.progress);
 
-        // Check if the download is complete
         if (progressData.progress.status === "Completed") {
-          clearInterval(intervalId); // Stop checking progress
-          fetchFinalUrl(fileName); // Fetch the final URL
+          clearInterval(intervalId);
+          fetchFinalUrl(fileName, abortController);
         }
       } catch (error) {
-        console.error("Error fetching progress:", error);
+        if (error.name === 'AbortError') {
+          clearInterval(intervalId); // Stop checking progress if aborted
+        } else {
+          console.error("Error fetching progress:", error);
+        }
       }
-    }, 1000); // Check progress every second
+    }, 1000);
   };
 
-  const fetchFinalUrl = async (fileName, attempt = 1) => {
+  const fetchFinalUrl = async (fileName, abortController, attempt = 1) => {
     try {
-      const response = await fetch(`/api/get/music/${encodeURIComponent(fileName)}`);
+      const response = await fetch(`/api/get/music/${encodeURIComponent(fileName)}`, {
+        signal: abortController.signal,
+      });
       const data = await response.json();
 
       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);
+        const retryDelay = 2000;
+        setTimeout(() => fetchFinalUrl(fileName, abortController, 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);
+      if (error.name !== 'AbortError') {
+        console.error("Error fetching final URL:", error);
+        const retryDelay = 2000;
+        setTimeout(() => fetchFinalUrl(fileName, abortController, attempt + 1), retryDelay);
+      }
     }
   };
 
@@ -91,7 +111,7 @@ export const MusicPlayerProvider = ({ children }) => {
         initializePlayer,
         isPlayerVisible,
         src,
-        fileName, // Export the file name
+        fileName,
         isPlayerMaximized,
         togglePlayerSize,
         setIsPlayerVisible,