Merge pull request #36 from michiganhackers/pr-34

Adding currently playing song

Author: foleyash

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

@@ -0,0 +1,31 @@
+import { GetAccessToken } from "@/src/database/db";
+import { NextResponse } from 'next/server'
+
+export async function POST(req: Request) {
+    const { sid, state } = await req.json();
+    const access_token = await GetAccessToken(sid);
+    const endpoint = state ? 'play' : 'pause';
+    console.log(endpoint)
+    const url = `https://api.spotify.com/v1/me/player/${endpoint}`;
+
+    const response = await fetch(url, {
+        method: 'PUT',
+        headers: {
+            'Authorization': `Bearer ${access_token}`,
+            'Content-Length': '0' // Required by Spotify API
+        }
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        return NextResponse.json(
+            { error: error.error.message },
+            { status: response.status }
+        );
+    }
+
+    return NextResponse.json(
+        { success: true, is_playing: state },
+        { status: 200 }
+    );
+}

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

@@ -0,0 +1,29 @@
+import { GetAccessToken } from "@/src/database/db";
+import { NextResponse } from 'next/server'
+
+export async function POST(req: Request) {
+    const { sid } = await req.json();
+    const access_token = await GetAccessToken(sid);
+    const url = 'https://api.spotify.com/v1/me/player/next';
+
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            'Authorization': `Bearer ${access_token}`,
+            'Content-Length': '0'
+        }
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        return NextResponse.json(
+            { error: error.error.message },
+            { status: response.status }
+        );
+    }
+
+    return NextResponse.json(
+        { success: true, message: 'Skipped to next track' },
+        { status: 200 }
+    );
+}

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

@@ -0,0 +1,45 @@
+import { GetAccessToken } from "@/src/database/db";
+import { NextResponse } from 'next/server'
+
+export async function GET(req: Request) {
+    const { searchParams } = new URL(req.url);
+    const sid = searchParams.get('sid');
+    
+    if (!sid) {
+        return NextResponse.json(
+            { error: 'Missing session ID' },
+            { status: 400 }
+        );
+    }
+
+    const access_token = await GetAccessToken(sid);
+    const url = 'https://api.spotify.com/v1/me/player';
+
+    const response = await fetch(url, {
+        headers: {
+            'Authorization': `Bearer ${access_token}`
+        }
+    });
+
+    if (!response.ok) {
+        if (response.status === 204) { // No content = no active playback
+            return NextResponse.json({
+                is_playing: false,
+                progress_ms: 0,
+                duration_ms: 0
+            });
+        }
+        const error = await response.json();
+        return NextResponse.json(
+            { error: error.error.message },
+            { status: response.status }
+        );
+    }
+
+    const data = await response.json();
+    return NextResponse.json({
+        is_playing: data.is_playing,
+        progress_ms: data.progress_ms || 0,
+        duration_ms: data.item?.duration_ms || 0
+    });
+}

src/app/page.tsx

@@ -1,10 +1,8 @@
 'use client'
-import { stringify } from 'querystring';
 import { useState, useEffect } from 'react';
-import { redirect, useRouter } from 'next/navigation'
-import { Router } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { handleSpotifyAuth } from '@/src/utils';
-import 'dotenv/config';
+
 const Toast: React.FC<{ message: string; onClose: () => void; }> = ({ message, onClose }) => {
   return (
     <div className="toast">
@@ -13,83 +11,131 @@ const Toast: React.FC<{ message: string; onClose: () => void; }> = ({ message, o
     </div>
   );
 };
- 
 
 export default function Home() {
-  const [guestCode, setGuestCode] = useState(""); // Can be set as Next.js cookie and passed into server side session/[id]/page.tsx
-  const [hostUsername, setHost] = useState(""); // Can be set as Next.js cookie and passed into server side session/[id]/page.tsx
+  const [guestCode, setGuestCode] = useState(""); 
+  const [hostUsername, setHost] = useState(""); 
   const [guestUsername, setGuest] = useState("");
   const [toastMessage, setToastMessage] = useState('');
   const router = useRouter();
 
-  
-  
   useEffect(() => {
-    // This effect will run only on the client side
     if (toastMessage) {
       const timer = setTimeout(() => setToastMessage(''), 3500);
-      return () => clearTimeout(timer);}
-    // You can place any client-side specific logic here
-  }, [toastMessage]); // Empty dependency array ensures the effect runs only once on mount
+      return () => clearTimeout(timer);
+    }
+  }, [toastMessage]);
+
+  const handleHostSubmit = (e?: React.FormEvent) => {
+    if (e) e.preventDefault(); // Prevent form submission behavior
+
+    if (hostUsername === "") {
+      setToastMessage("Error: Username is blank.");
+      setHost('');
+    } else {
+      sessionStorage.setItem("username", hostUsername);
+      sessionStorage.setItem("isHost", "true");
+
+      const client_id: string | undefined = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID;
+      const redirect_uri: string = `${process.env.NEXT_PUBLIC_APP_SERVER}/api/spotify/getToken`;
+      const scope: string = 'user-read-currently-playing user-read-playback-state user-modify-playback-state';
+
+      handleSpotifyAuth(client_id, redirect_uri, scope);
+    }
+  };
+
+  const handleGuestSubmit = (e?: React.FormEvent) => {
+    if (e) e.preventDefault(); // Prevent form submission behavior
+    sessionStorage.setItem("username", guestUsername);
+    sessionStorage.setItem("isHost", "false");
+    connectToSession(guestCode, guestUsername, router, setToastMessage, setGuestCode, setGuest);
+  };
+
   return (
     <main className="background flex min-h-screen flex-col items-center justify-between p-24">
-      <img src="GMJ-emblem-color.svg" alt="" />
+      <img src="GMJ-emblem-color.svg" alt="" className="logo" />
       <div className="options">
+
+        {/* Host Section */}
         <div className="hostoptions">
-            <h1>I'm a host:</h1>
-            <form data-testid="host-form">
-                <input type="text" placeholder='Username' maxLength={6} name="username" onChange={(e) => setHost(e.target.value)}/>
-            </form>
-            <button className="SubmitButton" onClick={() => {
-              if(hostUsername == ""){
-                setToastMessage('Error: Username is blank.');
-                setHost('');
-              } else {
-                sessionStorage.setItem("username", hostUsername); // change this to a nextjs cookie (server-side)
-                sessionStorage.setItem("isHost", "true"); // change this to a nextjs cookie (server-side)
-                const client_id : string | undefined = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID; // Spotify developer client id for API calls
-                const redirect_uri : string = `${process.env.NEXT_PUBLIC_APP_SERVER}/api/spotify/getToken`
-                const scope : string = 'user-read-currently-playing user-read-playback-state user-modify-playback-state';
-                handleSpotifyAuth(client_id, redirect_uri, scope); }
-                }}>
-                Host a Jam
-            </button>
+          <h1>I'm a host:</h1>
+          <form data-testid="host-form" onSubmit={handleHostSubmit}>
+            <input
+              type="text"
+              placeholder="Username"
+              maxLength={6}
+              name="username"
+              className="input-field"
+              onChange={(e) => setHost(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleHostSubmit();
+              }}
+            />
+          </form>
+          <button className="SubmitButton" onClick={handleHostSubmit}>
+            Host a Jam
+          </button>
         </div>
+
         <div className="divideDiv">
-          <hr className="divider"></hr>
+          <hr className="divider" />
         </div>
 
+        {/* Guest Section */}
         <div className="guestoptions">
-            <h1>I'm a guest:</h1>
-            <form data-testid="guest-form">
-                <input type="text" placeholder='Guest Code' maxLength={8} name="guestcode" value={guestCode}   onChange={(e) => setGuestCode(e.target.value.toUpperCase())}/>
-                <input type="text" placeholder='Username' maxLength={25} name="username" onChange={(e) => setGuest(e.target.value)}/>
-            </form>
-            <button className="SubmitButton" onClick={() => {
-                sessionStorage.setItem("username", guestUsername);
-                // console.log(guestUsername);
-                sessionStorage.setItem("isHost", "false");
-                   connectToSession(guestCode, guestUsername, router,setToastMessage,setGuestCode, setGuest)}}>
-
-                    Join
-            </button>
+          <h1>I'm a guest:</h1>
+          <form data-testid="guest-form" onSubmit={handleGuestSubmit}>
+            <input
+              type="text"
+              placeholder="Guest Code"
+              maxLength={8}
+              name="guestcode"
+              value={guestCode}
+              className="input-field"
+              onChange={(e) => setGuestCode(e.target.value.toUpperCase())}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleGuestSubmit();
+              }}
+            />
+            <input
+              type="text"
+              placeholder="Username"
+              maxLength={25}
+              name="username"
+              className="input-field"
+              onChange={(e) => setGuest(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleGuestSubmit();
+              }}
+            />
+          </form>
+          <button className="SubmitButton" onClick={handleGuestSubmit}>
+            Join
+          </button>
         </div>
+
       </div>
+
+      {/* Toast Notification */}
       {toastMessage && (
         <Toast message={toastMessage} onClose={() => setToastMessage('')} />
       )}
     </main>
   );
 }
 
-async function connectToSession(guestCode : string, username : string, router : any, setToastMessage : any, setGuestCode: any,  // Add this setter function to clear guestCode
-  setGuest: any) : Promise<void> { 
-   // Add this setter function to clear guestCode
-  
- let stat; 
+// Function to connect to a session
+async function connectToSession(
+  guestCode: string,
+  username: string,
+  router: any,
+  setToastMessage: any,
+  setGuestCode: any,
+  setGuest: any
+): Promise<void> {
+  let stat;
   try {
-    
-    await fetch(`${process.env.NEXT_PUBLIC_APP_SERVER}/api/sessionDB/connect`, {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_APP_SERVER}/api/sessionDB/connect`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -98,30 +144,25 @@ async function connectToSession(guestCode : string, username : string, router :
         guestCode: guestCode,
         username: username
       }),
-    }).then((response) => {
-        if(!response.ok){
-          stat = response.status;
-            throw Error(response.statusText);}
-
-      return response.json();
-    }).then((data) => {
-      const url = data.url;
-      router.push(url);
-    })
-  }
-  catch(e){
-    if(stat == 401){
-    console.error(e);
-    setToastMessage('Error: Guest code not found.');
-    setGuestCode('');
-   }else if (stat == 409){
-    setToastMessage('Error: Username already in use.');
-    setGuest('');
-   } else if (stat == 406) {
-    setToastMessage('Error: Username is blank.');
-    setGuest('');
-   }
-  
+    });
+
+    if (!response.ok) {
+      stat = response.status;
+      throw new Error(response.statusText);
+    }
+
+    const data = await response.json();
+    router.push(`/session/${guestCode}`); // Redirect to the correct session
+  } catch (e) {
+    if (stat === 401) {
+      setToastMessage('Error: Guest code not found.');
+      setGuestCode('');
+    } else if (stat === 409) {
+      setToastMessage('Error: Username already in use.');
+      setGuest('');
+    } else if (stat === 406) {
+      setToastMessage('Error: Username is blank.');
+      setGuest('');
+    }
   }
 }
-