Merge branch 'dev' into main

Author: foleyash

public/Spotify_Primary_Logo_RGB_Green.png

@@ -1,3 +1,4 @@
+import { Song } from "@/src/app/session/[id]/client";
 import { NextResponse } from "next/server";
 
 // REQUIRES: req contains the access token of the host of the session
@@ -32,7 +33,8 @@ export async function POST(req: Request) {
         songName: currentSong.name,
         albumCover: currentSong.album.images[0].url,
         artistName: currentSong.artists[0].name,
-        placement: 1
+        placement: 1,
+        spotifyURL: currentSong.external_urls.spotify
     }
     queue.push(currentSongObject);
 
@@ -43,8 +45,10 @@ export async function POST(req: Request) {
             songName: song.name,
             albumCover: song.album.images[0].url,
             artistName: song.artists[0].name,
-            placement: index + 2    // Accounts for currently playing and 1-based indexing for placement value
+            placement: index + 2,    // Accounts for currently playing and 1-based indexing for placement value
+            spotifyURL: song.external_urls.spotify
         }
+        // console.log(song.external_urls.spotify)
         queue.push(songObject);
     })
 

src/app/api/spotify/getQueue/route.ts

@@ -37,7 +37,8 @@ export async function POST(req: Request) {
                 "songId": item.id,
                 "songName": item.name,
                 "albumCover": item.album.images[0].url,
-                "artistName": item.artists[0].name
+                "artistName": item.artists[0].name,
+                "spotifyURL": item.external_urls.spotify
             })
         });
     }

src/app/api/spotify/searchSongs/route.ts

@@ -214,11 +214,15 @@ img {
   display: flex;
   transition: background-color 0.3s; 
 }
-
 .song:hover {
+  background-color: rgb(67, 67, 67);
+}
+
+.song:hover:not(:has(img.spotify-logo:hover)) {
   background-color: rgb(80, 80, 80);
 }
 
+
 .song:active {
   background-color: rgb(60, 60, 60);
 }
@@ -238,10 +242,61 @@ img {
     flex: 2;
 }
 
-.song p {
-    text-align: right;
+.song-text {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-direction: row;
+    height: 100%;
+}
+
+.song-content{
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  flex-direction: column;
+  
+}
+
+img.spotify-logo{
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+  filter: brightness(70%);
+  border: 1px black solid;
+  margin-right: 10px;
+  transition: all 0.2s ease-in;
+  z-index:1000;
+}
+
+img.spotify-logo:hover{
+  filter: brightness(100%);
+  border: 1px white solid;
+  box-shadow: 2px 2px 5px black;
+  transition: all 0.1s ease-in;
+}
+
+.queue-header{
+  z-index: 1;
+}
+
+.song-text p {
+    text-align:left;
+    padding-right: 5px;
     color: rgb(166, 238, 166);
+    display: flex;
+    flex-direction: column;
+    gap: 5px; /* Adjust spacing between lines */
+}
+
+.song p {
+    /*text-align: right;
     padding-right: 5px;
+    color: rgb(166, 238, 166);
+    display: flex;
+    flex-direction: column;
+    gap: 5px; */
 }
 
 .container {
@@ -342,6 +397,7 @@ img {
     left: 0;
     width: 100%;
     height: 100%;
+    color: white;
     background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
     display: flex; /* Enable flexbox for centering */
     justify-content: center; /* Center horizontally */
@@ -350,9 +406,10 @@ img {
   }
 
   .end-session-overlay-content {
-    background-color: white;
+    background-color: rgb(50,50,50);
     padding: 20px 40px;
     border-radius: 10px;
+    border: 5px solid #5900ff;
     text-align: center;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
   }
@@ -365,9 +422,9 @@ img {
 
   .end-session-overlay-content button {
     padding: 10px 20px;
-    background-color: #007bff;
+    background-color: black;
+    border: 5px solid rgb(16, 161, 16); 
     color: white;
-    border: none;
     border-radius: 5px;
     font-size: 1rem;
     cursor: pointer;

src/app/favicon.ico

@@ -5,7 +5,7 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "The Jelly Dot Club",
   description: "Generated by create next app",
 };
 

src/app/favicon_logo.png

@@ -10,4 +10,6 @@ export function EndSessionOverlay({ onReturnToHome }: { onReturnToHome: () => vo
       </div>
     </div>
   );
-}
+}
+
+export default EndSessionOverlay;