Spaces:

Hans-R-D
/

Nexora-Music

Sleeping

ChandimaPrabath commited on Oct 27, 2024

Commit

ffc893c

1 Parent(s): b875c69

nprogress

Files changed (5) hide show

frontend/package-lock.json CHANGED Viewed

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "next": "15.0.1",
         "react": "19.0.0-rc-69d4b800-20241021",
         "react-dom": "19.0.0-rc-69d4b800-20241021",
         "react-icons": "^5.3.0"
@@ -1288,6 +1289,14 @@
         }
       }
     },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -1324,6 +1333,11 @@
         "node": ">=0.10.0"
       }
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

       "version": "0.1.0",
       "dependencies": {
         "next": "15.0.1",
+        "next-nprogress-bar": "^2.3.14",
         "react": "19.0.0-rc-69d4b800-20241021",
         "react-dom": "19.0.0-rc-69d4b800-20241021",
         "react-icons": "^5.3.0"
         }
       }
     },
+    "node_modules/next-nprogress-bar": {
+      "version": "2.3.14",
+      "resolved": "https://registry.npmjs.org/next-nprogress-bar/-/next-nprogress-bar-2.3.14.tgz",
+      "integrity": "sha512-r2zdo5SFakm1CSYLBo2/+9X2F5NRnbV/LI1b/Iu3mFLa9ln+Dlwx3vjJc3kVHI4i42jRC0an++obVHeWkYU6gA==",
+      "dependencies": {
+        "nprogress": "^0.2.0"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

frontend/package.json CHANGED Viewed

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "next": "15.0.1",
     "react": "19.0.0-rc-69d4b800-20241021",
     "react-dom": "19.0.0-rc-69d4b800-20241021",
     "react-icons": "^5.3.0"

   },
   "dependencies": {
     "next": "15.0.1",
+    "next-nprogress-bar": "^2.3.14",
     "react": "19.0.0-rc-69d4b800-20241021",
     "react-dom": "19.0.0-rc-69d4b800-20241021",
     "react-icons": "^5.3.0"

frontend/src/app/layout.js CHANGED Viewed

@@ -5,7 +5,7 @@ import localFont from "next/font/local";
 import "./globals.css";
 import MusicPlayer from "@/components/MusicPlayer";
 import { MusicPlayerProvider } from "@/context/MusicPlayerContext";
-import { useState } from "react";
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -25,9 +25,15 @@ export default function RootLayout({ children }) {
         <body
           className={`${geistSans.variable} ${geistMono.variable} antialiased max-h-screen overflow-hidden`}
         >
           <div className="app-container">{children}</div>
           <footer className="bottom-0 flex items-center w-full">
-            <MusicPlayer/>
           </footer>
         </body>
       </MusicPlayerProvider>

 import "./globals.css";
 import MusicPlayer from "@/components/MusicPlayer";
 import { MusicPlayerProvider } from "@/context/MusicPlayerContext";
+import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
         <body
           className={`${geistSans.variable} ${geistMono.variable} antialiased max-h-screen overflow-hidden`}
         >
+          <ProgressBar
+            height="5px"
+            color="var(--foreground-secondary)"
+            options={{ showSpinner: false }}
+            shallowRouting
+          />
           <div className="app-container">{children}</div>
           <footer className="bottom-0 flex items-center w-full">
+            <MusicPlayer />
           </footer>
         </body>
       </MusicPlayerProvider>

frontend/src/components/CategoriesSection.css CHANGED Viewed

@@ -7,11 +7,13 @@
 }
 .category-card {
-  width: 120px;
-  height: 60px;
   padding: 10px;
-  background-image: linear-gradient(var(--foreground-secondary), var(--foreground-2));
-  border-radius: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,4 +24,10 @@
   text-transform: capitalize;
   font-weight: 600;
   cursor: pointer;
 }

 }
 .category-card {
+  width: 90px;
+  height: 70px;
   padding: 10px;
+  background-image: linear-gradient(var(--foreground-secondary), var(--foreground-3));
+  border-radius: 10px;
+  border-top-right-radius: 25%;
+  border-top-left-radius: 25%;
   display: flex;
   justify-content: center;
   align-items: center;
   text-transform: capitalize;
   font-weight: 600;
   cursor: pointer;
+  transition: scale .3s ease;
+  overflow-wrap: break-word;
 }
+.category-card:hover .category-title{
+scale: 1.1;
+}

frontend/src/components/MusicPlayer.js CHANGED Viewed

@@ -60,6 +60,7 @@ export default function MusicPlayer() {
       setDuration(videoElement.duration);
       setProgress(0);
       setCurrentTime(0);
     }
   };

       setDuration(videoElement.duration);
       setProgress(0);
       setCurrentTime(0);
+      videoElement.play();
     }
   };