api routes

frontend/public/Aaj Ki Raat _ Stree 2 _ Tamannaah Bhatia _ Sachin-Jigar _ Madhubanti _ Divya _ Amitabh _ 15th August.mp4

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:cfd9855ea9bf3f44c75472ac682fd31171dea80747fabf84b5b26d88409dabc7
-size 32005937

frontend/public/Dil Ka Darzi Song - STREE - VAYU, Prakriti Kakar - Sachin-Jigar - Rajkummar Rao, Shraddha Kapoor (320).mp3

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:444cdf1a4bdaf659c762d9150e1dfea6f025e80f8bca0c9000936999c69b0f2c
-size 5905965

frontend/src/app/api/get/category/[category]/route.js

@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server';
+
+import {BASE_URL} from "@/lib/config";
+
+export async function GET(request, { params }) {
+    // Await the params before using them
+    const { category } = await params;
+    const { page = 1, limit = 10 } = Object.fromEntries(new URL(request.url).searchParams);
+
+    try {
+        const response = await fetch(`${BASE_URL}/api/get/category/${category}?page=${page}&limit=${limit}`);
+        
+        // Check if the response is ok
+        if (!response.ok) {
+            const errorData = await response.json();
+            return NextResponse.json({ error: errorData.error || 'Failed to fetch music from category' }, { status: response.status });
+        }
+
+        const data = await response.json();
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Error fetching music from category:', error);
+        return NextResponse.json({ error: 'Failed to fetch music from category' }, { status: 500 });
+    }
+}

frontend/src/app/api/get/category/all/route.js

@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+
+import {BASE_URL} from "@/lib/config";
+
+export async function GET() {
+    try {
+        const response = await fetch(`${BASE_URL}/api/get/category/all`);
+        
+        // Check if the response is ok
+        if (!response.ok) {
+            const errorData = await response.json();
+            return NextResponse.json({ error: errorData.error || 'Failed to fetch categories' }, { status: response.status });
+        }
+
+        const data = await response.json();
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Error fetching categories:', error);
+        return NextResponse.json({ error: 'Failed to fetch categories' }, { status: 500 });
+    }
+}

frontend/src/app/api/get/music/[fileName]/route.js

@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server';
+
+import {BASE_URL} from "@/lib/config";
+
+export async function GET(request, { params }) {
+    // Get the file name from the URL parameters
+    const { fileName } = await params;
+
+    try {
+        // Fetch the music file from the FastAPI backend
+        const response = await fetch(`${BASE_URL}/api/get/music/${encodeURIComponent(fileName)}`);
+        
+        // Check if the response is ok
+        if (!response.ok) {
+            const errorData = await response.json();
+            return NextResponse.json({ error: errorData.error || 'Failed to fetch music file' }, { status: response.status });
+        }
+
+        const data = await response.json();
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Error fetching music file:', error);
+        return NextResponse.json({ error: 'Failed to fetch music file' }, { status: 500 });
+    }
+}

frontend/src/app/api/get/music/all/route.js

@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server';
+
+import {BASE_URL} from "@/lib/config";
+
+export async function GET(request) {
+    const { searchParams } = new URL(request.url);
+    const page = searchParams.get('page');
+    const limit = searchParams.get('limit');
+
+    let url = `${BASE_URL}/api/get/music/all`;
+    const params = new URLSearchParams();
+
+    if (page) params.append("page", page);
+    if (limit) params.append("limit", limit);
+
+    if (params.toString()) {
+        url += `?${params.toString()}`;
+    }
+
+    try {
+        const response = await fetch(url);
+        
+        // Check if the response is ok
+        if (!response.ok) {
+            const errorData = await response.json();
+            return NextResponse.json({ error: errorData.error || 'Failed to fetch music' }, { status: response.status });
+        }
+
+        const data = await response.json();
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Error fetching all music:', error);
+        return NextResponse.json({ error: 'Failed to fetch all music' }, { status: 500 });
+    }
+}

frontend/src/app/api/get/store/route.js

@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+
+import {BASE_URL} from "@/lib/config";
+
+export async function GET() {
+    try {
+        const response = await fetch(`${BASE_URL}/api/get/music/store`);
+
+        // Check if the response is ok
+        if (!response.ok) {
+            const errorData = await response.json();
+            return NextResponse.json({ error: errorData.error || 'Failed to fetch music store' }, { status: response.status });
+        }
+
+        const data = await response.json();
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Error fetching music store:', error);
+        return NextResponse.json({ error: 'Failed to fetch music store' }, { status: 500 });
+    }
+}

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

@@ -0,0 +1,76 @@
+'use client';
+import Card from "@/components/Card";
+import './CategoryPage.css';
+import { useEffect, useState } from 'react';
+import { use } from 'react';
+
+export default function CategoryPage({ params }) {
+  const { category } = use(params); // Unwrap params using React.use()
+  const [musicItems, setMusicItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+
+  useEffect(() => {
+    const fetchMusicByCategory = async () => {
+      try {
+        const response = await fetch(`/api/get/category/${category}?page=${page}&limit=10`);
+        if (!response.ok) {
+          throw new Error("Failed to fetch music");
+        }
+        const data = await response.json();
+
+        // Update music items based on response, avoiding duplicates
+        setMusicItems(prevItems => {
+          const newItems = data.files.filter(file => !prevItems.includes(file));
+          return [...prevItems, ...newItems];
+        });
+
+        // Check if there are more files to load
+        if (data.files.length < data.limit) {
+          setHasMore(false); // No more music to load
+        }
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMusicByCategory();
+  }, [category, page]);
+
+  const loadMore = () => {
+    if (hasMore) {
+      setPage(prevPage => prevPage + 1);
+    }
+  };
+
+  if (loading) {
+    return <div>Loading music...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  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">
+        {musicItems.map((file, index) => (
+          <Card 
+            key={`${file}-${page}`} // Ensure unique key by appending page number
+            src={`/${file}`} // Assuming the base URL is handled correctly
+          />
+        ))}
+      </div>
+      {hasMore && (
+        <button onClick={loadMore} className="load-more">
+          Load More
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/app/globals.css

@@ -7,6 +7,7 @@
   --foreground: #ededed;
   --background-secondary: #110652;
   --foreground-secondary: #1d85b9;
+  --background-2: #332a77;
 }
 
 body {

frontend/src/app/page.js

@@ -1,14 +1,11 @@
 import Card from "@/components/Card";
+import CategoriesSection from "@/components/CategoriesSection";
+import './indexpage.css';
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <Card src={"/Aaj Ki Raat _ Stree 2 _ Tamannaah Bhatia _ Sachin-Jigar _ Madhubanti _ Divya _ Amitabh _ 15th August.mp4"} title={"Aaj Ki Raat"}/>
-          <Card src={"/Dil Ka Darzi Song - STREE - VAYU, Prakriti Kakar - Sachin-Jigar - Rajkummar Rao, Shraddha Kapoor (320).mp3"} title={"Dil Ka Darzi"}/>
-        </div>
-      </main>
+    <div className="index-page font-[family-name:var(--font-geist-sans)]">
+      <CategoriesSection/>
     </div>
   );
 }

frontend/src/components/Card.css

@@ -1,21 +1,26 @@
-.music-card{
-    width: 200px;
-    height: 60;
-    background-color: rgb(35, 26, 108);
-    border-radius:50px;
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    gap: 10px;
+.music-card {
+  width: 180px;
+  height: 40;
+  background-color: var(--background-2);
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
 }
 
-.card-title{
-    display: -webkit-box;            /* Fallback for multi-line ellipsis */
-    -webkit-line-clamp: 1;           /* Limits to one line */
-    -webkit-box-orient: vertical;    /* Specifies the box orientation */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;             /* Allows wrapping but limits line count */
-    line-height: 1.2em;              /* Optional: Adjust line spacing */
-    max-height: 1.2em;       
-}
+.card-title {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -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;
+}
+
+.card-icon {
+  font-size: 40px;
+  overflow: visible;
+}

frontend/src/components/Card.js

@@ -3,9 +3,12 @@ import "./Card.css";
 import { FaCompactDisc } from "react-icons/fa";
 import { useMusicPlayer } from "@/context/MusicPlayerContext";
 
-const Card = ({ src, title }) => {
+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 handleButtonClick = () => {
     initializePlayer(src);
   };
@@ -13,8 +16,7 @@ const Card = ({ src, title }) => {
   return (
     <button onClick={handleButtonClick}>
       <div className="music-card">
-        <FaCompactDisc size={60} />
-
+        <FaCompactDisc className="card-icon" />
         <label className="card-title">{title}</label>
       </div>
     </button>

frontend/src/components/CategoriesSection.css

@@ -0,0 +1,24 @@
+.categories-section {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 10px;
+  justify-content: center;
+}
+
+.category-card {
+  width: 120px;
+  height: 60px;
+  padding: 10px;
+  background-color: var(--foreground-secondary);
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.category-title {
+  font-size: 1rem;
+  text-transform: capitalize;
+  font-weight: 600;
+}

frontend/src/components/CategoriesSection.js

@@ -0,0 +1,57 @@
+"use client";
+import { useEffect, useState } from "react";
+import "./CategoriesSection.css";
+import Link from "next/link";
+
+const CategoriesSection = () => {
+  const [categories, setCategories] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const response = await fetch('/api/get/category/all');
+        if (!response.ok) {
+          throw new Error("Failed to fetch categories");
+        }
+        const data = await response.json();
+        setCategories(data); // Assuming data is ["english", "hindi", "rap"]
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCategories();
+  }, []);
+
+  if (loading) {
+    return <div>Loading categories...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  return (
+    <div className="categories-section">
+      {categories.map((category, index) => (
+        <CategoryCard key={index} label={category} />
+      ))}
+    </div>
+  );
+};
+
+const CategoryCard = ({ label }) => {
+  return (
+    <Link href={`/category/${label}`}>
+    <div className="category-card">
+      <label className="category-title">{label}</label>
+    </div>
+    </Link>
+  );
+};
+
+export default CategoriesSection;

frontend/src/components/MusicPlayer.js

@@ -26,6 +26,7 @@ export default function MusicPlayer() {
     togglePlayerSize,
     setIsPlayerVisible,
     initializePlayer,
+    fileName,
   } = useMusicPlayer();
 
   const [currentSrc, setCurrentSrc] = useState(src);
@@ -227,7 +228,7 @@ export default function MusicPlayer() {
       {isPlayerMaximized && (
         <div className={`player-controls ${showControls ? "show" : "hide"}`}>
           <div className="player-controls-top">
-            <label className="music-title">{src}</label>
+            <label className="music-title">{fileName}</label>
             <button className="player-max-button" onClick={togglePlayerSize}>
               <IoIosArrowDown />
             </button>
@@ -325,7 +326,7 @@ export default function MusicPlayer() {
         {!isPlayerMaximized && (
           <div className="player-controls-mini">
             <div className="player-mini-control-top">
-              <label className="music-title mini">{src}</label>
+              <label className="music-title mini">{fileName}</label>
               <button className="player-min-button" onClick={togglePlayerSize}>
                 <IoIosArrowUp />
               </button>

frontend/src/context/MusicPlayerContext.js

@@ -1,4 +1,3 @@
-// MusicPlayerContext.js
 "use client";
 
 import React, { createContext, useContext, useRef, useState } from "react";
@@ -8,10 +7,66 @@ 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 [isPlayerVisible, setIsPlayerVisible] = useState(false);
   const [isPlayerMaximized, setIsPlayerMaximized] = useState(false);
+  const [loadingProgress, setLoadingProgress] = useState(null); // New state for loading progress
 
-  const initializePlayer = (source) => {
+  const initializePlayer = async (source) => {
+    // Extract the file name from the source path
+    const extractedFileName = source.split('/').pop();
+    setFileName(extractedFileName); // Set the file name state
+
+    try {
+      // Call the API to get the music file or start the download
+      const response = await fetch(`/api/get/music/${encodeURIComponent(extractedFileName)}`);
+      const data = await response.json();
+
+      // If the file is being downloaded, get the progress URL
+      if (data.status === "Download started") {
+        const progressUrl = data.progress_url;
+        checkProgress(progressUrl, extractedFileName);
+      } else {
+        // If the music file is available, initialize the player
+        startPlayer(data.url);
+      }
+    } catch (error) {
+      console.error("Error initializing player:", error);
+    }
+  };
+
+  const checkProgress = (progressUrl, fileName) => {
+    const intervalId = setInterval(async () => {
+      try {
+        const response = await fetch(progressUrl);
+        const progressData = await response.json();
+
+        setLoadingProgress(progressData.progress); // Update loading progress state
+
+        // Check if the download is complete
+        if (progressData.progress.status === "Completed") {
+          clearInterval(intervalId); // Stop checking progress
+          fetchFinalUrl(fileName); // Fetch the final URL
+        }
+      } catch (error) {
+        console.error("Error fetching progress:", error);
+      }
+    }, 2000); // Check progress every 2 seconds
+  };
+
+  const fetchFinalUrl = async (fileName) => {
+    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);
+    } catch (error) {
+      console.error("Error fetching final URL:", error);
+    }
+  };
+
+  const startPlayer = (source) => {
     setSrc(source);
     setIsPlayerVisible(true);
     if (videoRef.current) {
@@ -29,9 +84,11 @@ export const MusicPlayerProvider = ({ children }) => {
         initializePlayer,
         isPlayerVisible,
         src,
+        fileName, // Export the file name
         isPlayerMaximized,
         togglePlayerSize,
-        setIsPlayerVisible
+        setIsPlayerVisible,
+        loadingProgress,
       }}
     >
       {children}

frontend/src/lib/LBApi.js

@@ -0,0 +1,89 @@
+import {BASE_URL} from "@/lib/config";
+
+// Function to get music store
+async function getMusicStore() {
+    try {
+        const response = await fetch(`${BASE_URL}/api/get/music/store`);
+        if (!response.ok) {
+            throw new Error("Failed to fetch music store");
+        }
+        return await response.json();
+    } catch (error) {
+        console.error("Error fetching music store:", error);
+        throw error;
+    }
+}
+
+// Function to get all music with optional pagination
+async function getAllMusic(page = null, limit = null) {
+    let url = `${BASE_URL}/api/get/music/all`;
+    const params = new URLSearchParams();
+
+    if (page) params.append("page", page);
+    if (limit) params.append("limit", limit);
+
+    if (params.toString()) {
+        url += `?${params.toString()}`;
+    }
+
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error("Failed to fetch music");
+        }
+        return await response.json();
+    } catch (error) {
+        console.error("Error fetching all music:", error);
+        throw error;
+    }
+}
+
+// Function to get categories
+async function getCategories() {
+    try {
+        const response = await fetch(`${BASE_URL}/api/get/category/all`);
+        if (!response.ok) {
+            throw new Error("Failed to fetch categories");
+        }
+        return await response.json();
+    } catch (error) {
+        console.error("Error fetching categories:", error);
+        throw error;
+    }
+}
+
+// Function to get music by category with pagination
+async function getMusicByCategory(category, page = 1, limit = 10) {
+    try {
+        const response = await fetch(`${BASE_URL}/api/get/category/${category}?page=${page}&limit=${limit}`);
+        if (!response.ok) {
+            throw new Error("Failed to fetch music from category");
+        }
+        return await response.json();
+    } catch (error) {
+        console.error("Error fetching music from category:", error);
+        throw error;
+    }
+}
+
+// Function to get a specific music file by name
+async function getMusicByFileName(fileName) {
+    try {
+        const response = await fetch(`${BASE_URL}/api/get/music/${encodeURIComponent(fileName)}`);
+        if (!response.ok) {
+            throw new Error("Failed to fetch music file");
+        }
+        return await response.json();
+    } catch (error) {
+        console.error("Error fetching music file:", error);
+        throw error;
+    }
+}
+
+export {
+    getMusicStore,
+    getAllMusic,
+    getCategories,
+    getMusicByCategory,
+    getMusicByFileName,
+};

frontend/src/lib/config.js

@@ -0,0 +1 @@
+export const BASE_URL = "https://hans-r-d-load-balancer.hf.space";