Merge remote-tracking branch 'origin/main' into tobi-dev

frontend/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+music/*

frontend/src/components/AudioPlayer.jsx

@@ -0,0 +1,35 @@
+import React, { useRef, useState } from "react";
+
+const SingleAudioPlayer = ({ src }) => {
+  const audioRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const togglePlay = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    if (isPlaying) {
+      audio.pause();
+    } else {
+      audio.play().catch((e) => {
+        console.warn("Playback error:", e);
+      });
+    }
+
+    setIsPlaying(!isPlaying);
+  };
+
+  const handleEnded = () => {
+    setIsPlaying(false);
+  };
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+      <button onClick={togglePlay}>{isPlaying ? "Pause" : "Play"}</button>
+      <span>{src.split("/").pop()}</span>
+      <audio ref={audioRef} src={src} onEnded={handleEnded} />
+    </div>
+  );
+};
+
+export default SingleAudioPlayer;

frontend/src/components/LoginButton.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { getSpotifyLoginUrl, isLoggedIn, removeAccessToken } from '../utils/spotifyAuth.js';
-
-const LoginButton = () => {
-  const loggedIn = isLoggedIn();
-
-  const handleLogout = () => {
-    removeAccessToken();
-    window.location.reload(); // Refresh to update UI
-  };
-
-  if (loggedIn) {
-    return (
-      <div className="login-status">
-        <span>✓ Connected to Spotify</span>
-        <button onClick={handleLogout} className="logout-btn">
-          Logout
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <a href={getSpotifyLoginUrl()}>
-      <button className="spotify-login-btn">Login with Spotify</button>
-    </a>
-  );
-};
-
-export default LoginButton;

frontend/src/constants/ApiConstants.js

@@ -3,6 +3,3 @@ export const RADIOSTATION_URL = "http://localhost:8080/api";
 export const CREATE_RADIOSTATION_ENDPOINT = "/radio-stations";
 export const LIST_RADIOSTATIONS_ENDPOINT = "/radio-stations";
 export const ADD_CLIENT_ENDPOINT = "/clients/connect";
-
-export const SPOTIFY_PREMIUM_TOKEN =
-  "BQCEnWrYVdmta4Eekdkewazun99IuocRAyPEbwPSrHuGYgZYg7JGlXG2BLmRL6fwjzPJkrmHiqlTLSn1yqR36awA9Rv4n9dwvTBv1DjAitsuzaEVg7PtYdbUHXqP2HJJ4dDDvTtvUfWIBDY_Afa7WgY1cyRbl-p4VobNHXUR9N3Ye1qBTgH3RZ5ziIbIoNWe_JrxYvcedkvr23zXUVabOyahTgt_YdmnCWt2Iu8XT8sjhSyc8tOCqbs_KqE-Qe1WSPUCrGS8";

frontend/src/screens/StationPage.jsx

@@ -1,13 +1,13 @@
 import React, { useState } from "react";
 import { useParams } from "react-router-dom";
-import AddSongModal from "./AddSongModal";
-import LoginButton from "../components/LoginButton";
+import React, { useState, useEffect } from "react";
 import { addClientToStation } from "../utils/AddClientToStation";
+import { getAudioFiles } from "../utils/AudioFiles";
+import SingleAudioPlayer from "../components/AudioPlayer";
 
 function StationPage() {
-  const { id: stationId } = useParams();
-  const [setClientToken] = useState("");
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { stationID } = useParams();
+  const [clientToken, setClientToken] = useState("");
   const [accessDenied, setAccessDenied] = useState(true);
   const [currentSong] = useState({ progress: 0, duration: 1 });
   const [isLoading, setIsLoading] = useState(false);
@@ -129,15 +129,7 @@ function StationPage() {
     );
   }
 
-  const recommendedSongs = [];
-
-  const openModal = () => {
-    setIsModalOpen(true);
-  };
-
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
+  const recommendedSongs = getAudioFiles() ?? [];
 
   return (
     <div className="station-page">
@@ -151,15 +143,12 @@ function StationPage() {
         <header className="station-header">
           <h1>Serena Station</h1>
           <p className="station-subtitle">Collaborative Music Experience</p>
-          <LoginButton />
         </header>
+        <SingleAudioPlayer src={recommendedSongs[0]}></SingleAudioPlayer>
 
         <div className="songs-section">
           <div className="section-header">
             <h2>Song Queue</h2>
-            <button className="add-song-btn" onClick={openModal}>
-              Add Song
-            </button>
           </div>
 
           <div className="songs-list">
@@ -168,31 +157,11 @@ function StationPage() {
                 <p>No songs in queue yet. Add some songs to get started!</p>
               </div>
             ) : (
-              recommendedSongs.map((song) => (
-                <div key={song.id} className="song-item">
-                  <div className="song-info">
-                    <h4>{song.title}</h4>
-                    <p>{song.artist}</p>
-                  </div>
-                  <span className="song-duration">{song.duration}</span>
-                </div>
-              ))
+              recommendedSongs.map((song) => <p>{song}</p>)
             )}
           </div>
         </div>
       </div>
-
-      {/* Progress Bar */}
-      <div className="progress-container">
-        <div className="progress-bar">
-          <div 
-            className="progress-fill" 
-            style={{ width: `${(currentSong.progress / currentSong.duration) * 100}%` }}
-          ></div>
-        </div>
-      </div>
-
-      {isModalOpen && <AddSongModal onClose={closeModal} />}
     </div>
   );
 }

frontend/src/utils/AudioFiles.js

@@ -0,0 +1,5 @@
+const importAll = (r) => r.keys().map(r);
+
+export const getAudioFiles = () => {
+  return importAll(require.context("../../music", false, /\.(mp3|wav)$/));
+};

frontend/src/utils/spotifyAuth.js

@@ -1,76 +0,0 @@
-const CLIENT_ID = 'e1274b6593674771bea12d8366c7978b';
-const REDIRECT_URI = 'http://localhost:3000/callback';
-const SCOPES = [
-  'user-read-private',
-  'user-read-email',
-  'playlist-read-private',
-  'user-library-read',
-];
-
-export const getSpotifyLoginUrl = () => {
-  const scope = SCOPES.join('%20');
-  return `https://accounts.spotify.com/authorize?client_id=${CLIENT_ID}&response_type=token&redirect_uri=${encodeURIComponent(
-    REDIRECT_URI
-  )}&scope=${scope}`;
-};
-
-export const getAccessTokenFromUrl = () => {
-  const hash = window.location.hash;
-  if (hash) {
-    const params = new URLSearchParams(hash.substring(1));
-    return params.get('access_token');
-  }
-  return null;
-};
-
-export const storeAccessToken = (token) => {
-  localStorage.setItem('spotify_access_token', token);
-};
-
-export const getAccessToken = () => {
-  return localStorage.getItem('spotify_access_token');
-};
-
-export const removeAccessToken = () => {
-  localStorage.removeItem('spotify_access_token');
-};
-
-export const isLoggedIn = () => {
-  return !!getAccessToken();
-};
-
-export const searchSpotifyTracks = async (query) => {
-  const token = getAccessToken();
-  if (!token) {
-    throw new Error('No access token available');
-  }
-
-  const response = await fetch(
-    `https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=track&limit=20`,
-    {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    }
-  );
-
-  if (!response.ok) {
-    if (response.status === 401) {
-      removeAccessToken();
-      throw new Error('Token expired');
-    }
-    throw new Error('Search failed');
-  }
-
-  const data = await response.json();
-  return data.tracks.items.map((track) => ({
-    id: track.id,
-    title: track.name,
-    artist: track.artists.map((artist) => artist.name).join(', '),
-    album: track.album.name,
-    coverUrl: track.album.images[0]?.url || '',
-    duration: track.duration_ms,
-    previewUrl: track.preview_url,
-    spotifyUrl: track.external_urls.spotify,
-  }));
-};