diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..319ca6d --- /dev/null +++ b/.dockerignore @@ -0,0 +1,65 @@ +# Git +.git +.gitignore + +# Documentation +README.md +LICENSE +*.md + +# Node modules (will be installed in container) +frontend/node_modules +node_modules + +# Build artifacts +backend/build +frontend/build +backend/.gradle +backend/bin + +# IDE files +.vscode +.idea +*.iml + +# OS files +.DS_Store +Thumbs.db + +# Environment files +.env +.env.local +.env.development.local +.env.test.local +.env.production.local + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Coverage directory used by tools like istanbul +coverage/ + +# Dependency directories +jspm_packages/ + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity diff --git a/Dockerfile b/Dockerfile index e69de29..77ce287 100644 --- a/Dockerfile +++ b/Dockerfile @@ -0,0 +1,65 @@ +# Multi-stage Dockerfile for Serena (Backend + Frontend) + +# Stage 1: Build Frontend +FROM node:18-alpine AS frontend-builder + +WORKDIR /app/frontend + +# Copy package files +COPY frontend/package*.json ./ + +# Install dependencies +RUN npm ci --only=production + +# Copy frontend source +COPY frontend/ ./ + +# Build frontend +RUN npm run build + +# Stage 2: Build Backend +FROM openjdk:21-jdk-slim AS backend-builder + +WORKDIR /app/backend + +# Copy Gradle wrapper and build files +COPY backend/gradlew ./ +COPY backend/gradle/ ./gradle/ +COPY backend/build.gradle ./ +COPY backend/settings.gradle ./ + +# Copy source code +COPY backend/src/ ./src/ + +# Make gradlew executable and build +RUN chmod +x gradlew +RUN ./gradlew build --no-daemon -x test + +# Stage 3: Runtime +FROM openjdk:21-jre-slim + +WORKDIR /app + +# Install curl for health checks +RUN apt-get update && apt-get install -y curl && rm -rf /var/lib/apt/lists/* + +# Copy built backend JAR +COPY --from=backend-builder /app/backend/build/libs/*.jar app.jar + +# Copy built frontend (will be served by Spring Boot) +COPY --from=frontend-builder /app/frontend/build/ /app/static/ + +# Create non-root user +RUN groupadd -r serena && useradd -r -g serena serena +RUN chown -R serena:serena /app +USER serena + +# Expose port +EXPOSE 8080 + +# Health check +HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \ + CMD curl -f http://localhost:8080/actuator/health || exit 1 + +# Run the application +ENTRYPOINT ["java", "-jar", "app.jar"] \ No newline at end of file diff --git a/README.md b/README.md index 759fb12..d07009c 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,124 @@ -# team-5 +# Serena - Collaborative Radio Station Platform +**Serena** is a collaborative radio station platform that enables users to create and join virtual music stations for shared listening experiences. The application features a React frontend and Spring Boot backend, integrating with the Spotify API to provide real-time music playback and queue management. + +## ๐ŸŽต Features + +- **Create & Join Stations**: Users can create radio stations with unique join codes or join existing stations +- **Collaborative Queuing**: Multiple users can add songs to their preferred queues +- **Intelligent Recommendations**: Advanced algorithm considers song popularity, tempo similarity, audio features, and user preferences +- **Real-time Playback**: Spotify integration for seamless music streaming (station owners control playback) +- **User Authentication**: JWT-based authentication system with owner and client roles +- **Responsive UI**: Modern React interface with animated backgrounds and intuitive controls + +## ๐Ÿ—๏ธ Architecture + +### Backend (Spring Boot) +- **Language**: Java +- **Framework**: Spring Boot +- **Authentication**: JWT tokens +- **Queue Algorithm**: Multi-factor recommendation system +- **API**: RESTful endpoints for station and queue management + +### Frontend (React) +- **Language**: JavaScript (JSX) +- **Framework**: React 19.1.1 +- **Routing**: React Router DOM +- **Spotify Integration**: Web Playback SDK +- **Styling**: CSS with animations + +### External APIs +- **Spotify Web API**: Music data and playback control +- **Spotify Web Playback SDK**: Browser-based music streaming + +## ๐Ÿš€ Quick Start + +### Prerequisites +- Node.js (v16+) +- Java 11+ +- Gradle +- Docker (optional) +- Spotify Premium account (for playback control) + + +### Backend Setup +```bash +cd backend +./gradlew bootRun +``` + +The backend will start on `http://localhost:8080` + +### Frontend Setup +```bash +cd frontend +npm install +npm start +``` + +The frontend will start on `http://localhost:3000` + +### Docker Setup (Alternative) +```bash +docker-compose up +``` + +## ๐Ÿ“– API Documentation + +Detailed API documentation is available in [`backend/API_DOCUMENTATION.md`](backend/API_DOCUMENTATION.md). + +### Key Endpoints +- `POST /api/radio-stations` - Create a new radio station +- `GET /api/radio-stations` - List all radio stations +- `POST /api/clients/connect` - Join a station with join code +- `POST /api/songs/queue` - Add song to client's preferred queue +- `GET /api/songs/queue/recommended` - Get intelligently sorted queue + +## ๐ŸŽฏ How It Works + +### Station Creation +1. User creates a station with name and description +2. System generates unique station ID and 6-character join code +3. Creator becomes the station owner with playback control + +### Joining Stations +1. Users join with the station's join code +2. Receive client authentication token +3. Can add songs to their preferred queue + +### Queue Algorithm +The intelligent queue system considers: +- **Preferred Queue Position** (30%): User song preferences +- **Popularity** (20%): Spotify popularity scores +- **Tempo Similarity** (20%): BPM matching with current song +- **Audio Features** (30%): Danceability, energy, valence, etc. + +### Playback Control +- Only station owners can control playback +- Automatic progression through recommended queue +- Real-time sync with Spotify Web Playback SDK + +## ๐Ÿ”ง Configuration + +### Backend Configuration +Update `backend/src/main/resources/application.properties`: +```properties +# Add your Spotify credentials and other settings +``` + +### Frontend Configuration +Update Spotify credentials in `frontend/src/constants/ApiConstants.js` + +## ๐Ÿงช Testing + +### Backend Tests +```bash +cd backend +./gradlew test +``` + +### Frontend Tests +```bash +cd frontend +npm test +``` \ No newline at end of file diff --git a/backend/API_DOCUMENTATION.md b/backend/API_DOCUMENTATION.md index 7f5482d..64c3875 100644 --- a/backend/API_DOCUMENTATION.md +++ b/backend/API_DOCUMENTATION.md @@ -23,6 +23,28 @@ Authorization: Bearer #### Create Radio Station +#### Get All Radio Stations + +#### Get Radio Station by ID + +#### Delete Radio Station + +### Client Management + +#### Connect Client to Station + +### Song Queue Management + +#### Add Song to Client's Preferred Queue + +#### Get Radio Station Queue + +#### Get Recommended Queue + +## Radio Station Management + +#### Create Radio Station + Creates a new radio station and returns an owner token. **Endpoint:** `POST /radio-stations` @@ -170,6 +192,123 @@ Connects a client to a radio station using a join code. No authentication requir } ``` +### Song Queue Management + +#### Add Song to Client's Preferred Queue + +Adds a song to a specific client's preferred queue. The frontend can merge track and audio features objects using `const merged = { ...trackObj, ...audioFeaturesObj };` + +**Endpoint:** `POST /api/songs/queue` + +**Request Body:** + +```json +{ + "song": { + "id": "4iV5W9uYEdYUVa79Axb7Rh", + "popularity": 85, + "tempo": 120.5, + "danceability": 0.8, + "energy": 0.7, + "valence": 0.6, + "acousticness": 0.1, + "instrumentalness": 0.0, + "liveness": 0.1, + "speechiness": 0.04 + }, + "clientId": "client-uuid", + "radioStationId": "station-uuid" +} +``` + +**Response:** + +```json +{ + "success": true, + "message": "Song added to client's preferred queue successfully", + "data": null +} +``` + +#### Get Radio Station Queue + +Retrieves the main song queue for a radio station. Returns a list of song objects. + +**Endpoint:** `GET /api/songs/queue?radioStationId={radioStationId}` + +**Query Parameters:** + +- `radioStationId` (required): The ID of the radio station + +**Response:** + +```json +{ + "success": true, + "message": "Queue retrieved successfully", + "data": [ + { + "id": "4iV5W9uYEdYUVa79Axb7Rh", + "popularity": 85, + "tempo": 120.5, + "danceability": 0.8, + "energy": 0.7, + "valence": 0.6, + "acousticness": 0.1, + "instrumentalness": 0.0, + "liveness": 0.1, + "speechiness": 0.04 + }, + { + "id": "7ouMYWpwJ422jRcDASZB7P", + "popularity": 78, + "tempo": 95.0, + "danceability": 0.6, + "energy": 0.5, + "valence": 0.8, + "acousticness": 0.3, + "instrumentalness": 0.0, + "liveness": 0.2, + "speechiness": 0.06 + } + ] +} +``` + +#### Get Recommended Queue + +**Endpoint:** `GET /api/songs/queue/recommended?radioStationId={radioStationId}¤tSongId={currentSongId}` + +**Query Parameters:** + +- `radioStationId` (required): The ID of the radio station +- `currentSongId` (optional): The ID of the currently playing song for similarity analysis + +**Response:** + +```json +{ + "success": true, + "message": "Recommended queue retrieved successfully", + "data": [ + { + "id": "4iV5W9uYEdYUVa79Axb7Rh", + "popularity": 85, + "tempo": 120.5, + "audioFeatures": { + "danceability": 0.8, + "energy": 0.7, + "valence": 0.6, + "acousticness": 0.1, + "instrumentalness": 0.0, + "speechiness": 0.04 + } + } + ] +} +``` + ## Error Responses All error responses follow this format: @@ -213,3 +352,71 @@ curl -X GET "http://localhost:8080/api/radio-stations" \ curl -X DELETE http://localhost:8080/api/radio-stations/{stationId} \ -H "Authorization: Bearer {ownerToken}" ``` + +### Adding a Song to Client's Preferred Queue + +```bash +curl -X POST http://localhost:8080/api/songs/queue \ + -H "Content-Type: application/json" \ + -H "Authorization: Bearer {clientToken}" \ + -d '{ + "song": { + "id": "4iV5W9uYEdYUVa79Axb7Rh", + "popularity": 85, + "tempo": 120.5, + "danceability": 0.8, + "energy": 0.7, + "valence": 0.6, + "acousticness": 0.1, + "instrumentalness": 0.0, + "liveness": 0.1, + "speechiness": 0.04 + }, + "clientId": "client-uuid", + "radioStationId": "station-uuid" + }' +``` + +### Getting Radio Station Queue + +```bash +curl -X GET "http://localhost:8080/api/songs/queue?radioStationId=station-uuid" \ + -H "Authorization: Bearer {token}" +``` + +## Frontend Integration Notes + +### Merging Track and Audio Features + +The frontend can easily merge track information with audio features using JavaScript object spread: + +```javascript +// Track object from Spotify API +const trackObj = { + id: "4iV5W9uYEdYUVa79Axb7Rh", + popularity: 85, + tempo: 120.5, +}; + +// Audio features object from Spotify API +const audioFeaturesObj = { + danceability: 0.8, + energy: 0.7, + valence: 0.6, + acousticness: 0.1, + instrumentalness: 0.0, + liveness: 0.1, + speechiness: 0.04, +}; + +// Merge objects for API request +const merged = { ...trackObj, ...audioFeaturesObj }; +``` + +### Queue Data Structure + +The queue endpoints return/accept arrays of song objects. Each song object contains: + +- Basic track info (id, popularity, tempo) +- Audio features (danceability, energy, valence, etc.) +- All properties are at the root level (flattened structure) diff --git a/backend/gradlew b/backend/gradlew index 23d15a9..1aa94a4 100755 --- a/backend/gradlew +++ b/backend/gradlew @@ -15,8 +15,6 @@ # See the License for the specific language governing permissions and # limitations under the License. # -# SPDX-License-Identifier: Apache-2.0 -# ############################################################################## # @@ -57,7 +55,7 @@ # Darwin, MinGW, and NonStop. # # (3) This script is generated from the Groovy template -# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt +# https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt # within the Gradle project. # # You can find Gradle at https://github.com/gradle/gradle/. @@ -86,7 +84,7 @@ done # shellcheck disable=SC2034 APP_BASE_NAME=${0##*/} # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036) -APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit +APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit # Use the maximum available, or set MAX_FD != -1 to use that value. MAX_FD=maximum @@ -114,7 +112,7 @@ case "$( uname )" in #( NONSTOP* ) nonstop=true ;; esac -CLASSPATH="\\\"\\\"" +CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar # Determine the Java command to use to start the JVM. @@ -205,7 +203,7 @@ fi DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' # Collect all arguments for the java command: -# * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments, +# * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments, # and any embedded shellness will be escaped. # * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be # treated as '${Hostname}' itself on the command line. @@ -213,7 +211,7 @@ DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' set -- \ "-Dorg.gradle.appname=$APP_BASE_NAME" \ -classpath "$CLASSPATH" \ - -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \ + org.gradle.wrapper.GradleWrapperMain \ "$@" # Stop when "xargs" is not available. diff --git a/backend/gradlew.bat b/backend/gradlew.bat index db3a6ac..25da30d 100644 --- a/backend/gradlew.bat +++ b/backend/gradlew.bat @@ -13,8 +13,6 @@ @rem See the License for the specific language governing permissions and @rem limitations under the License. @rem -@rem SPDX-License-Identifier: Apache-2.0 -@rem @if "%DEBUG%"=="" @echo off @rem ########################################################################## @@ -70,11 +68,11 @@ goto fail :execute @rem Setup the command line -set CLASSPATH= +set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar @rem Execute Gradle -"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %* +"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* :end @rem End local scope for the variables with windows NT shell diff --git a/backend/src/main/java/com/serena/backend/controller/SongController.java b/backend/src/main/java/com/serena/backend/controller/SongController.java index 1694a5c..3fd5c65 100644 --- a/backend/src/main/java/com/serena/backend/controller/SongController.java +++ b/backend/src/main/java/com/serena/backend/controller/SongController.java @@ -1,40 +1,97 @@ package com.serena.backend.controller; import com.serena.backend.dto.ApiResponse; -import com.serena.backend.dto.ConnectClientRequest; -import com.serena.backend.dto.AddSongRequest; +import com.serena.backend.dto.AddSongToClientQueueRequest; +import com.serena.backend.model.Song; import com.serena.backend.service.RadioStationService; +import com.serena.backend.service.QueueService; import com.serena.backend.service.JwtService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.ResponseEntity; import org.springframework.http.HttpStatus; import org.springframework.web.bind.annotation.*; +import java.util.List; +import java.util.Optional; +import java.util.Queue; +import java.util.ArrayList; + @RestController -@RequestMapping("/api/songs/") +@RequestMapping("/api/songs") @CrossOrigin(origins = "*") public class SongController { @Autowired private RadioStationService radioStationService; + @Autowired + private QueueService queueService; + @Autowired private JwtService jwtService; - @PostMapping - public ResponseEntity> addSong(@RequestBody AddSongRequest request) { - if (request.getSong() == null || request.getRadioStationId() == null) { + @PostMapping("/queue") + public ResponseEntity> addSongToClientQueue(@RequestBody AddSongToClientQueueRequest request) { + if (request.getSong() == null || request.getClientId() == null) { return ResponseEntity.badRequest() - .body(new ApiResponse<>(false, "Song data and radio station ID are required", null)); + .body(new ApiResponse<>(false, "Song data and client ID are required", null)); } - boolean success = radioStationService.addSongToQueue(request.getRadioStationId(), request.getSong()); + boolean success = radioStationService.addSongToClientQueue(request.getClientId(), request.getSong()); if (success) { - return ResponseEntity.ok(new ApiResponse<>(true, "Song added to queue successfully", null)); + return ResponseEntity.ok(new ApiResponse<>(true, "Song added to client's preferred queue successfully", null)); } else { return ResponseEntity.status(HttpStatus.NOT_FOUND) - .body(new ApiResponse<>(false, "Radio station not found or inactive", null)); + .body(new ApiResponse<>(false, "Client not found", null)); } } + + @GetMapping("/queue") + public ResponseEntity>> getRadioStationQueue(@RequestParam String radioStationId) { + Optional station = radioStationService.getRadioStation(radioStationId); + + if (station.isPresent()) { + Queue queue = station.get().getSongQueue(); + return ResponseEntity.ok(new ApiResponse<>(true, "Queue retrieved successfully", queue)); + } else { + return ResponseEntity.status(HttpStatus.NOT_FOUND) + .body(new ApiResponse<>(false, "Radio station not found", null)); + } + } + + @GetMapping("/queue/recommended") + public ResponseEntity>> getRecommendedQueue( + @RequestParam String radioStationId, + @RequestParam(required = false) String currentSongId) { + + Optional stationOpt = radioStationService.getRadioStation(radioStationId); + + if (stationOpt.isEmpty()) { + return ResponseEntity.status(HttpStatus.NOT_FOUND) + .body(new ApiResponse<>(false, "Radio station not found", null)); + } + + com.serena.backend.model.RadioStation station = stationOpt.get(); + + List queueList = new ArrayList<>(station.getSongQueue()); + + if (queueList.isEmpty()) { + return ResponseEntity.ok(new ApiResponse<>(true, "Empty queue", queueList)); + } + + Song currentSong = null; + if (currentSongId != null && !currentSongId.isEmpty()) { + currentSong = queueList.stream() + .filter(song -> song.getId().equals(currentSongId)) + .findFirst() + .orElse(null); + } + + List clients = radioStationService.getConnectedClients(radioStationId); + + List sortedQueue = queueService.sortQueue(currentSong, queueList, clients); + + return ResponseEntity.ok(new ApiResponse<>(true, "Recommended queue retrieved successfully", sortedQueue)); + } } diff --git a/backend/src/main/java/com/serena/backend/dto/AddSongRequest.java b/backend/src/main/java/com/serena/backend/dto/AddSongRequest.java index be69f9f..ce6ed44 100644 --- a/backend/src/main/java/com/serena/backend/dto/AddSongRequest.java +++ b/backend/src/main/java/com/serena/backend/dto/AddSongRequest.java @@ -6,7 +6,8 @@ public class AddSongRequest { private Song song; private String radioStationId; - public AddSongRequest() {} + public AddSongRequest() { + } public AddSongRequest(Song song, String radioStationId) { this.song = song; diff --git a/backend/src/main/java/com/serena/backend/dto/AddSongToClientQueueRequest.java b/backend/src/main/java/com/serena/backend/dto/AddSongToClientQueueRequest.java new file mode 100644 index 0000000..05626db --- /dev/null +++ b/backend/src/main/java/com/serena/backend/dto/AddSongToClientQueueRequest.java @@ -0,0 +1,41 @@ +package com.serena.backend.dto; + +import com.serena.backend.model.Song; + +public class AddSongToClientQueueRequest { + private Song song; + private String clientId; + private String radioStationId; + + public AddSongToClientQueueRequest() {} + + public AddSongToClientQueueRequest(Song song, String clientId, String radioStationId) { + this.song = song; + this.clientId = clientId; + this.radioStationId = radioStationId; + } + + public Song getSong() { + return song; + } + + public void setSong(Song song) { + this.song = song; + } + + public String getClientId() { + return clientId; + } + + public void setClientId(String clientId) { + this.clientId = clientId; + } + + public String getRadioStationId() { + return radioStationId; + } + + public void setRadioStationId(String radioStationId) { + this.radioStationId = radioStationId; + } +} diff --git a/backend/src/main/java/com/serena/backend/model/Client.java b/backend/src/main/java/com/serena/backend/model/Client.java index 4b5e2dd..b734aeb 100644 --- a/backend/src/main/java/com/serena/backend/model/Client.java +++ b/backend/src/main/java/com/serena/backend/model/Client.java @@ -2,16 +2,20 @@ package com.serena.backend.model; import java.time.LocalDateTime; import java.util.UUID; +import java.util.LinkedList; +import java.util.Queue; public class Client { private String id; private String username; private String radioStationId; private LocalDateTime connectedAt; + private Queue preferredQueue; public Client() { this.id = UUID.randomUUID().toString(); this.connectedAt = LocalDateTime.now(); + this.preferredQueue = new LinkedList<>(); } public Client(String username, String radioStationId) { @@ -53,4 +57,20 @@ public class Client { this.connectedAt = connectedAt; } + public Queue getPreferredQueue() { + return preferredQueue; + } + + public void setPreferredQueue(Queue preferredQueue) { + this.preferredQueue = preferredQueue; + } + + public void addSongToPreferredQueue(Song song) { + this.preferredQueue.offer(song); + } + + public Song getNextPreferredSong() { + return this.preferredQueue.poll(); + } + } diff --git a/backend/src/main/java/com/serena/backend/model/RadioStation.java b/backend/src/main/java/com/serena/backend/model/RadioStation.java index 693f480..27fb3bc 100644 --- a/backend/src/main/java/com/serena/backend/model/RadioStation.java +++ b/backend/src/main/java/com/serena/backend/model/RadioStation.java @@ -15,7 +15,7 @@ public class RadioStation { private String ownerId; private String joinCode; private LocalDateTime createdAt; - private List connectedClients; + private List connectedClients; private Queue songQueue; public RadioStation() { @@ -93,11 +93,11 @@ public class RadioStation { this.createdAt = createdAt; } - public List getConnectedClients() { + public List getConnectedClients() { return connectedClients; } - public void setConnectedClients(List connectedClients) { + public void setConnectedClients(List connectedClients) { this.connectedClients = connectedClients; } diff --git a/backend/src/main/java/com/serena/backend/model/Song.java b/backend/src/main/java/com/serena/backend/model/Song.java index 0e92555..88d378e 100644 --- a/backend/src/main/java/com/serena/backend/model/Song.java +++ b/backend/src/main/java/com/serena/backend/model/Song.java @@ -57,4 +57,28 @@ public class Song { public void setAudioFeatures(Map audioFeatures) { this.audioFeatures = audioFeatures; } + + public double getAcousticness() { + return audioFeatures.getOrDefault("acousticness", 0.0); + } + + public double getDanceability() { + return audioFeatures.getOrDefault("danceability", 0.0); + } + + public double getEnergy() { + return audioFeatures.getOrDefault("energy", 0.0); + } + + public double getInstrumentalness() { + return audioFeatures.getOrDefault("instrumentalness", 0.0); + } + + public double getSpeechiness() { + return audioFeatures.getOrDefault("speechiness", 0.0); + } + + public double getValence() { + return audioFeatures.getOrDefault("valence", 0.0); + } } diff --git a/backend/src/main/java/com/serena/backend/service/QueueService.java b/backend/src/main/java/com/serena/backend/service/QueueService.java new file mode 100644 index 0000000..de50171 --- /dev/null +++ b/backend/src/main/java/com/serena/backend/service/QueueService.java @@ -0,0 +1,182 @@ +package com.serena.backend.service; + +import com.serena.backend.model.Song; +import com.serena.backend.model.Client; +import org.springframework.stereotype.Service; + +import java.util.*; +import java.util.stream.Collectors; + +@Service +public class QueueService { + + private static final double W1_PREFERRED_QUEUE = 0.3; // preferred queue position + private static final double W2_POPULARITY = 0.2; // popularity + private static final double W3_TEMPO_SIMILARITY = 0.2; // tempo similarity + private static final double W4_AUDIO_FEATURES = 0.3; // audio feature distance + + public List sortQueue(Song currentSong, List queue, List clients) { + if (queue == null || queue.isEmpty()) { + return new ArrayList<>(); + } + + if (currentSong == null) { + return queue.stream() + .sorted((s1, s2) -> Integer.compare(s2.getPopularity(), s1.getPopularity())) + .collect(Collectors.toList()); + } + + Map songScores = new HashMap<>(); + + for (Song song : queue) { + double totalScore = calculateRecommendationScore(currentSong, song, clients, queue); + songScores.put(song, totalScore); + } + + return queue.stream() + .sorted((s1, s2) -> Double.compare(songScores.get(s2), songScores.get(s1))) + .collect(Collectors.toList()); + } + + private double calculateRecommendationScore(Song currentSong, Song song, List clients, List queue) { + double p1 = calculatePreferredQueueScore(song, clients); + double p2 = calculatePopularityScore(song); + double p3 = calculateTempoSimilarityScore(currentSong, song, queue); + double p4 = calculateAudioFeatureScore(currentSong, song); + + return W1_PREFERRED_QUEUE * p1 + W2_POPULARITY * p2 + W3_TEMPO_SIMILARITY * p3 + W4_AUDIO_FEATURES * p4; + } + + /** + * P1: Preferred Queue Position Score + * For each client, find the song's rank in their preferred queue and normalize. + */ + private double calculatePreferredQueueScore(Song song, List clients) { + if (clients == null || clients.isEmpty()) { + return 0.0; + } + + List clientScores = new ArrayList<>(); + + for (Client client : clients) { + Queue preferredQueue = client.getPreferredQueue(); + if (preferredQueue == null || preferredQueue.isEmpty()) { + continue; + } + + List preferredList = new ArrayList<>(preferredQueue); + int position = -1; + + for (int i = 0; i < preferredList.size(); i++) { + if (preferredList.get(i).getId().equals(song.getId())) { + position = i + 1; // 1-based position + break; + } + } + + if (position > 0) { + // Normalize: 1 = most preferred (position 1), approaches 0 for later positions + double normalizedScore = 1.0 - ((double) (position - 1) / preferredList.size()); + clientScores.add(normalizedScore); + } + } + + return clientScores.isEmpty() ? 0.0 : clientScores.stream().mapToDouble(Double::doubleValue).average().orElse(0.0); + } + + /** + * P2: Popularity Score + * Normalize popularity from 0-100 to 0.0-1.0 + */ + private double calculatePopularityScore(Song song) { + return song.getPopularity() / 100.0; + } + + /** + * P3: Tempo Similarity Score + * Calculate similarity based on tempo difference, normalized by max tempo. + */ + private double calculateTempoSimilarityScore(Song currentSong, Song song, List queue) { + double currentTempo = currentSong.getTempo(); + double songTempo = song.getTempo(); + + // Find max tempo among current song and queue + double maxTempo = Math.max(currentTempo, + queue.stream().mapToDouble(Song::getTempo).max().orElse(currentTempo)); + + if (maxTempo == 0) { + return 1.0; + } + + double tempoDistance = Math.abs(currentTempo - songTempo); + return 1.0 - (tempoDistance / maxTempo); + } + + /** + * P4: Audio Feature Distance Score + * Calculate Euclidean distance between audio features and invert for similarity + * score. + */ + private double calculateAudioFeatureScore(Song currentSong, Song song) { + double distanceSquared = 0.0; + int featureCount = 0; + + // Calculate Euclidean distance for each audio feature + double currentAcousticness = currentSong.getAcousticness(); + double songAcousticness = song.getAcousticness(); + distanceSquared += Math.pow(currentAcousticness - songAcousticness, 2); + featureCount++; + + double currentDanceability = currentSong.getDanceability(); + double songDanceability = song.getDanceability(); + distanceSquared += Math.pow(currentDanceability - songDanceability, 2); + featureCount++; + + double currentEnergy = currentSong.getEnergy(); + double songEnergy = song.getEnergy(); + distanceSquared += Math.pow(currentEnergy - songEnergy, 2); + featureCount++; + + double currentInstrumentalness = currentSong.getInstrumentalness(); + double songInstrumentalness = song.getInstrumentalness(); + distanceSquared += Math.pow(currentInstrumentalness - songInstrumentalness, 2); + featureCount++; + + double currentSpeechiness = currentSong.getSpeechiness(); + double songSpeechiness = song.getSpeechiness(); + distanceSquared += Math.pow(currentSpeechiness - songSpeechiness, 2); + featureCount++; + + double currentValence = currentSong.getValence(); + double songValence = song.getValence(); + distanceSquared += Math.pow(currentValence - songValence, 2); + featureCount++; + + if (featureCount == 0) { + return 0.0; + } + + double distance = Math.sqrt(distanceSquared); + + double maxDistance = Math.sqrt(featureCount); + double normalizedDistance = distance / maxDistance; + + return 1.0 - normalizedDistance; + } + + public static double getW1PreferredQueue() { + return W1_PREFERRED_QUEUE; + } + + public static double getW2Popularity() { + return W2_POPULARITY; + } + + public static double getW3TempoSimilarity() { + return W3_TEMPO_SIMILARITY; + } + + public static double getW4AudioFeatures() { + return W4_AUDIO_FEATURES; + } +} diff --git a/backend/src/main/java/com/serena/backend/service/RadioStationService.java b/backend/src/main/java/com/serena/backend/service/RadioStationService.java index 9ab557b..8af4122 100644 --- a/backend/src/main/java/com/serena/backend/service/RadioStationService.java +++ b/backend/src/main/java/com/serena/backend/service/RadioStationService.java @@ -54,9 +54,10 @@ public class RadioStationService { RadioStation station = radioStations.get(stationId); if (station != null) { // Disconnect all clients + for (Client client : station.getConnectedClients()) { + clients.remove(client.getId()); + } station.getConnectedClients().clear(); - // Remove from clients map - clients.entrySet().removeIf(entry -> stationId.equals(entry.getValue().getRadioStationId())); radioStations.remove(stationId); return true; } @@ -69,7 +70,7 @@ public class RadioStationService { if (station != null && station.getJoinCode().equals(joinCode)) { Client client = new Client(username, radioStationId); clients.put(client.getId(), client); - station.getConnectedClients().add(client.getId()); + station.getConnectedClients().add(client); return Optional.of(client); } return Optional.empty(); @@ -81,7 +82,7 @@ public class RadioStationService { RadioStation station = stationOpt.get(); Client client = new Client(username, station.getId()); clients.put(client.getId(), client); - station.getConnectedClients().add(client.getId()); + station.getConnectedClients().add(client); return Optional.of(client); } return Optional.empty(); @@ -92,7 +93,7 @@ public class RadioStationService { if (client != null) { RadioStation station = radioStations.get(client.getRadioStationId()); if (station != null) { - station.getConnectedClients().remove(clientId); + station.getConnectedClients().removeIf(c -> c.getId().equals(clientId)); } clients.remove(clientId); return true; @@ -107,10 +108,7 @@ public class RadioStationService { public List getConnectedClients(String radioStationId) { RadioStation station = radioStations.get(radioStationId); if (station != null) { - return station.getConnectedClients().stream() - .map(clients::get) - .filter(client -> client != null) - .toList(); + return new ArrayList<>(station.getConnectedClients()); } return new ArrayList<>(); } @@ -132,4 +130,22 @@ public class RadioStationService { return Optional.empty(); } + // Client Queue Management + public boolean addSongToClientQueue(String clientId, Song song) { + Client client = clients.get(clientId); + if (client != null) { + client.addSongToPreferredQueue(song); + return true; + } + return false; + } + + public Optional getNextClientSong(String clientId) { + Client client = clients.get(clientId); + if (client != null) { + return Optional.ofNullable(client.getNextPreferredSong()); + } + return Optional.empty(); + } + } diff --git a/docker-compose.yml b/docker-compose.yml index e69de29..4624634 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -0,0 +1,69 @@ +version: '3.8' + +services: + # Backend Service + serena-backend: + build: + context: . + dockerfile: Dockerfile + container_name: serena-backend + ports: + - "8080:8080" + environment: + - SPRING_PROFILES_ACTIVE=docker + - SERVER_PORT=8080 + - SPRING_WEB_CORS_ALLOWED_ORIGINS=http://localhost:3000,http://127.0.0.1:3000 + healthcheck: + test: ["CMD", "curl", "-f", "http://localhost:8080/actuator/health"] + interval: 30s + timeout: 10s + retries: 3 + start_period: 60s + restart: unless-stopped + networks: + - serena-network + + # Frontend Development Service (alternative to built-in static files) + serena-frontend: + build: + context: ./frontend + dockerfile: Dockerfile.dev + container_name: serena-frontend + ports: + - "3000:3000" + environment: + - REACT_APP_API_URL=http://localhost:8080 + - CHOKIDAR_USEPOLLING=true + volumes: + - ./frontend:/app + - /app/node_modules + depends_on: + - serena-backend + networks: + - serena-network + profiles: + - development + + # Production Frontend (served by backend) + serena-app: + build: + context: . + dockerfile: Dockerfile + container_name: serena-app + ports: + - "80:8080" + environment: + - SPRING_PROFILES_ACTIVE=production + - SERVER_PORT=8080 + restart: unless-stopped + networks: + - serena-network + profiles: + - production + +networks: + serena-network: + driver: bridge + +volumes: + node_modules: \ No newline at end of file diff --git a/frontend/.gitignore b/frontend/.gitignore index 4d29575..fe844a4 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +music/* \ No newline at end of file diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 7b0b635..465c9cb 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,10 +1,10 @@ -import React from 'react'; -import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; -import Home from './screens/Home'; -import CreateStation from './screens/CreateStation'; -import JoinStation from './screens/JoinStation'; -import StationPage from './screens/StationPage'; -import './App.css'; +import React from "react"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import Home from "./screens/Home"; +import CreateStation from "./screens/CreateStation"; +import JoinStation from "./screens/JoinStation"; +import StationPage from "./screens/StationPage"; +import "./App.css"; function App() { return ( @@ -14,7 +14,7 @@ function App() { } /> } /> } /> - } /> + } /> diff --git a/frontend/src/components/AudioPlayer.jsx b/frontend/src/components/AudioPlayer.jsx new file mode 100644 index 0000000..2c3eea2 --- /dev/null +++ b/frontend/src/components/AudioPlayer.jsx @@ -0,0 +1,40 @@ +import React, { useRef, useState } from "react"; + +const SingleAudioPlayer = ({ src }) => { + const audioRef = useRef(null); + const [isPlaying, setIsPlaying] = useState(false); + + // Early return if no src provided + if (!src) { + return
No audio file available
; + } + + 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 ( +
+ + {src.split("/").pop()} +
+ ); +}; + +export default SingleAudioPlayer; diff --git a/frontend/src/components/LoginButton.jsx b/frontend/src/components/LoginButton.jsx deleted file mode 100644 index f928e40..0000000 --- a/frontend/src/components/LoginButton.jsx +++ /dev/null @@ -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 ( -
- โœ“ Connected to Spotify - -
- ); - } - - return ( - - - - ); -}; - -export default LoginButton; diff --git a/frontend/src/constants/ApiConstants.js b/frontend/src/constants/ApiConstants.js index c7fd4b7..7cdec44 100644 --- a/frontend/src/constants/ApiConstants.js +++ b/frontend/src/constants/ApiConstants.js @@ -2,3 +2,4 @@ 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"; diff --git a/frontend/src/index.css b/frontend/src/index.css index 673a327..8b51e2a 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -5,590 +5,1391 @@ } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - min-height: 100vh; - color: #333; -} - -/* Home Component Styles */ -.home-container { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; -} - -.content { - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(10px); - border-radius: 24px; - padding: 40px 30px; - text-align: center; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - max-width: 500px; - width: 100%; -} - -.title { - font-size: 2.5rem; - font-weight: 700; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - margin-bottom: 12px; - line-height: 1.2; -} - -.subtitle { - font-size: 1.1rem; - color: #666; - margin-bottom: 40px; - line-height: 1.5; -} - -.button-container { - display: flex; - flex-direction: column; - gap: 16px; -} - -.action-button { - padding: 16px 32px; - border: none; - border-radius: 12px; - font-size: 1.1rem; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - text-decoration: none; - display: inline-block; - position: relative; - overflow: hidden; -} - -.action-button.primary { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + font-family: 'Arial', sans-serif; + background: #1a1a1a; color: white; - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); -} - -.action-button.primary:hover { - transform: translateY(-2px); - box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4); -} - -.action-button.secondary { - background: white; - color: #667eea; - border: 2px solid #667eea; -} - -.action-button.secondary:hover { - background: #667eea; - color: white; - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); -} - -/* Create Station Component Styles */ -.create-station { - min-height: 100vh; - padding: 20px; - display: flex; - flex-direction: column; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -} - -.create-station-header { - text-align: center; - margin-bottom: 40px; - padding-top: 40px; -} - -.create-station-header h1 { - font-size: 2.2rem; - font-weight: 700; - color: white; - margin-bottom: 20px; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.create-station-content { - flex: 1; - max-width: 600px; - margin: 0 auto; - width: 100%; - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(10px); - border-radius: 24px; - padding: 40px 30px; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); -} - -.join-method-section h2 { - font-size: 1.4rem; - font-weight: 600; - color: #333; - margin-bottom: 30px; - line-height: 1.4; -} - -.radio-option { - margin-bottom: 24px; -} - -.radio-option label { - display: flex; - align-items: center; - font-size: 1.1rem; - font-weight: 500; - cursor: pointer; - padding: 16px 20px; - border: 2px solid #e9ecef; - border-radius: 12px; - transition: all 0.3s ease; - background: white; -} - -.radio-option label:hover { - border-color: #667eea; - background: #f8f9ff; -} - -.radio-option input[type="radio"]:checked + label, -.radio-option label:has(input[type="radio"]:checked) { - border-color: #667eea; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); - color: #667eea; -} - -.radio-option input[type="radio"] { - margin-right: 12px; - transform: scale(1.3); - accent-color: #667eea; -} - -.password-input-section { - margin-top: 30px; - animation: slideIn 0.3s ease; -} - -@keyframes slideIn { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.password-input-section label { - display: block; - font-size: 1rem; - font-weight: 600; - color: #333; - margin-bottom: 12px; -} - -.password-input-section input { - width: 100%; - padding: 16px 20px; - border: 2px solid #e9ecef; - border-radius: 12px; - font-size: 1rem; - transition: all 0.3s ease; - background: white; -} - -.password-input-section input:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.create-station-final-btn { - width: 100%; - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); - color: white; - border: none; - padding: 18px 32px; - font-size: 1.1rem; - font-weight: 600; - border-radius: 12px; - cursor: pointer; - margin-top: 40px; - transition: all 0.3s ease; - box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3); -} - -.create-station-final-btn:hover:not(:disabled) { - transform: translateY(-2px); - box-shadow: 0 12px 35px rgba(40, 167, 69, 0.4); -} - -.create-station-final-btn:disabled { - background: #ccc; - cursor: not-allowed; - transform: none; - box-shadow: none; -} - -/* Join Station Component Styles */ -.join-station { - min-height: 100vh; - padding: 20px; - display: flex; - flex-direction: column; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -} - -.join-station-header { - text-align: center; - margin-bottom: 40px; - padding-top: 40px; -} - -.join-station-header h1 { - font-size: 2.2rem; - font-weight: 700; - color: white; - margin-bottom: 20px; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.join-station-content { - flex: 1; - max-width: 600px; - margin: 0 auto; - width: 100%; - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(10px); - border-radius: 24px; - padding: 40px 30px; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); -} - -.verify-method-section h2 { - font-size: 1.4rem; - font-weight: 600; - color: #333; - margin-bottom: 30px; - line-height: 1.4; -} - -.join-station-final-btn { - width: 100%; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - padding: 18px 32px; - font-size: 1.1rem; - font-weight: 600; - border-radius: 12px; - cursor: pointer; - margin-top: 40px; - transition: all 0.3s ease; - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); -} - -.join-station-final-btn:hover:not(:disabled) { - transform: translateY(-2px); - box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4); -} - -.join-station-final-btn:disabled { - background: #ccc; - cursor: not-allowed; - transform: none; - box-shadow: none; -} - -/* Station Page Styles */ -.station-page { - min-height: 100vh; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - position: relative; overflow-x: hidden; } -.animated-background { - position: fixed; +.station-page-desktop { + min-height: 100vh; + position: relative; + display: flex; + flex-direction: column; +} + +/* Main Layout */ +.desktop-main { + display: flex; + flex: 1; + padding: 40px 40px 0 40px; + gap: 60px; + max-width: 1400px; + margin: 0 auto; + width: 100%; + height: calc(100vh - 80px); /* Account for progress bar */ + position: relative; +} + +/* Left Section */ +.left-section { + flex: 0 0 400px; /* Fixed width instead of flex: 1 */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + max-width: 400px; +} + +/* Vinyl Container */ +.vinyl-container { + position: relative; + margin-bottom: 40px; +} + +.vinyl-record-desktop { + width: 300px; + height: 300px; + background: radial-gradient(circle, #1a1a1a 30%, #333 31%, #1a1a1a 32%, #333 33%, #1a1a1a 34%); + border-radius: 50%; + position: relative; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); + transition: transform 0.3s ease; +} + +.vinyl-record-desktop.spinning { + animation: spin 3s linear infinite; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.vinyl-center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 60px; + height: 60px; + background: #8B4513; + border-radius: 50%; + box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5); +} + +.vinyl-center::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 10px; + height: 10px; + background: #000; + border-radius: 50%; +} + +.vinyl-grooves { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 200px; + height: 200px; + border-radius: 50%; + border: 2px solid transparent; /* Changed from rgba(255, 255, 255, 0.1) to transparent */ +} + +.vinyl-grooves::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + border: 1px solid transparent; /* Changed from rgba(255, 255, 255, 0.1) to transparent */ + width: 160px; + height: 160px; +} + +.vinyl-grooves::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.1); + width: 240px; + height: 240px; +} + +/* Music Notes Animation */ +.music-notes-desktop { + position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; - z-index: 1; } -.star { +.music-note { position: absolute; - background: rgba(255, 255, 255, 0.6); - border-radius: 50%; - animation: float 6s ease-in-out infinite; + font-size: 24px; + color: #4A90E2; + animation: float 3s ease-in-out infinite; } -.star:nth-child(odd) { - width: 2px; - height: 2px; - animation-duration: 8s; +.note-1 { + top: 20%; + right: -40px; + animation-delay: 0s; } -.star:nth-child(even) { - width: 3px; - height: 3px; - animation-duration: 6s; +.note-2 { + top: 50%; + right: -60px; + animation-delay: 1s; } -.star:nth-child(3n) { - width: 1px; - height: 1px; - animation-duration: 10s; +.note-3 { + top: 80%; + right: -40px; + animation-delay: 2s; } -.star-1 { top: 10%; left: 20%; animation-delay: 0s; } -.star-2 { top: 20%; left: 80%; animation-delay: 1s; } -.star-3 { top: 30%; left: 40%; animation-delay: 2s; } -.star-4 { top: 40%; left: 10%; animation-delay: 1.5s; } -.star-5 { top: 50%; left: 70%; animation-delay: 3s; } -.star-6 { top: 60%; left: 30%; animation-delay: 0.5s; } -.star-7 { top: 70%; left: 90%; animation-delay: 2.5s; } -.star-8 { top: 80%; left: 50%; animation-delay: 1.8s; } -.star-9 { top: 15%; left: 60%; animation-delay: 2.2s; } -.star-10 { top: 25%; left: 15%; animation-delay: 3.5s; } -.star-11 { top: 35%; left: 85%; animation-delay: 0.8s; } -.star-12 { top: 45%; left: 25%; animation-delay: 4s; } -.star-13 { top: 55%; left: 75%; animation-delay: 1.2s; } -.star-14 { top: 65%; left: 5%; animation-delay: 2.8s; } -.star-15 { top: 75%; left: 95%; animation-delay: 0.3s; } -.star-16 { top: 85%; left: 35%; animation-delay: 3.2s; } -.star-17 { top: 5%; left: 45%; animation-delay: 1.7s; } -.star-18 { top: 95%; left: 65%; animation-delay: 2.1s; } -.star-19 { top: 12%; left: 2%; animation-delay: 3.8s; } -.star-20 { top: 88%; left: 98%; animation-delay: 0.9s; } - @keyframes float { - 0%, 100% { - transform: translateY(0px) translateX(0px); - opacity: 0.6; - } - 50% { - transform: translateY(-10px) translateX(5px); - opacity: 1; - } + 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; } + 50% { transform: translateY(-30px) rotate(15deg); opacity: 1; } } -.station-content { - position: relative; - z-index: 2; - padding: 20px; - max-width: 800px; - margin: 0 auto; -} - -.station-header { +/* Next Song Info */ +.next-song-info { text-align: center; - margin-bottom: 40px; - padding-top: 40px; + background: rgba(255, 255, 255, 0.05); + padding: 20px; + border-radius: 15px; + margin-bottom: 30px; + width: 100%; + max-width: 300px; } -.station-header h1 { - font-size: 2.5rem; - font-weight: 700; - color: white; - margin-bottom: 10px; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +.next-label { + font-size: 14px; + color: #aaa; + margin-bottom: 8px; + text-transform: uppercase; + letter-spacing: 1px; } -.station-subtitle { - font-size: 1.1rem; - color: rgba(255, 255, 255, 0.9); - margin: 0; +.next-song-info h4 { + font-size: 18px; + margin-bottom: 5px; + color: #4A90E2; } -.media-controls-section { - background: rgba(255, 255, 255, 0.95); +.next-artist { + font-size: 14px; + color: #ccc; +} + +/* Bottom Play Icon */ +.bottom-play-icon { + display: flex; + justify-content: center; +} + +.mini-play-btn { + width: 60px; + height: 60px; + border: none; + border-radius: 50%; + background: linear-gradient(135deg, #4A90E2, #6BB6FF); + color: #fff; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3); +} + +.mini-play-btn:hover { + transform: scale(1.1); + box-shadow: 0 15px 30px rgba(74, 144, 226, 0.4); +} + +/* Right Section */ +.right-section { + position: absolute; + left: 50%; + top: 20px; /* Add top margin */ + right: 20px; /* Reduced from 40px */ + bottom: 20px; /* Add bottom margin */ + display: flex; + flex-direction: column; +} + +.recommendations-container { + background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; - margin-bottom: 30px; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); -} - -.current-song { - text-align: center; - margin-bottom: 25px; -} - -.current-song h3 { - font-size: 1.4rem; - font-weight: 600; - color: #333; - margin-bottom: 5px; -} - -.current-song p { - font-size: 1rem; - color: #666; - margin: 0; -} - -.media-controls { + height: 100%; /* Take full height of parent */ display: flex; + flex-direction: column; +} + +.recommendations-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; + border-bottom: 2px solid rgba(74, 144, 226, 0.3); + padding-bottom: 15px; +} + +.recommendations-header h2 { + font-size: 28px; + color: #4A90E2; + font-weight: bold; +} + +.add-suggestion-btn { + width: 50px; + height: 50px; + border: none; + border-radius: 50%; + background: linear-gradient(135deg, #4A90E2, #6BB6FF); + color: #fff; + cursor: pointer; + display: flex; + align-items: center; justify-content: center; + transition: all 0.3s ease; + box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3); +} + +.add-suggestion-btn:hover { + transform: scale(1.1); + box-shadow: 0 8px 20px rgba(74, 144, 226, 0.4); +} + +.recommendations-list { + display: flex; + flex-direction: column; + gap: 15px; + flex: 1; /* Take remaining space */ + overflow-y: auto; +} + +.recommendations-list::-webkit-scrollbar { + width: 8px; +} + +.recommendations-list::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; +} + +.recommendations-list::-webkit-scrollbar-thumb { + background: #4A90E2; + border-radius: 10px; +} + +.recommendation-item { + display: flex; + align-items: center; + padding: 15px; + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; + cursor: pointer; +} + +.recommendation-item:hover { + background: rgba(255, 255, 255, 0.1); + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +} + +.song-cover { + width: 60px; + height: 60px; + border-radius: 8px; + margin-right: 15px; + object-fit: cover; +} + +.song-info { + flex: 1; +} + +.song-info h4 { + font-size: 16px; + margin-bottom: 5px; + color: white; +} + +.artist { + font-size: 14px; + color: #4A90E2; + margin-bottom: 3px; +} + +.album { + font-size: 12px; + color: #aaa; +} + +.duration { + font-size: 14px; + color: #ccc; + font-weight: bold; +} + +/* Progress Container */ +.progress-container { + padding: 20px 40px; + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(10px); + position: relative; + z-index: 10; +} + +.progress-bar { + width: 100%; + height: 8px; + background: rgba(255, 255, 255, 0.2); + border-radius: 4px; + overflow: hidden; + position: relative; +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, #4A90E2, #6BB6FF); + border-radius: 4px; + transition: width 0.3s ease; + box-shadow: 0 0 10px rgba(74, 144, 226, 0.5); +} + +/* Home Page Styles - Improved */ +.home-container { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); + padding: 20px; + position: relative; +} + +.home-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 30% 20%, rgba(74, 144, 226, 0.1) 0%, transparent 50%), + radial-gradient(circle at 70% 80%, rgba(74, 144, 226, 0.05) 0%, transparent 50%); + pointer-events: none; +} + +.home-content { + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 24px; + padding: 60px 50px; + text-align: center; + position: relative; + z-index: 1; + max-width: 500px; + width: 100%; + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); +} + +.home-header { + margin-bottom: 50px; +} + +.home-title { + font-size: 42px; + font-weight: 300; + color: #ffffff; + margin-bottom: 20px; + letter-spacing: -0.5px; + line-height: 1.2; +} + +.home-title::after { + content: ''; + display: block; + width: 80px; + height: 3px; + background: linear-gradient(90deg, #4A90E2, #6BB6FF); + margin: 20px auto 0; + border-radius: 2px; +} + +.home-subtitle { + font-size: 16px; + color: #a0a0a0; + line-height: 1.6; + font-weight: 300; + max-width: 350px; + margin: 0 auto; +} + +.home-actions { + display: flex; + flex-direction: column; + gap: 16px; +} + +.home-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + padding: 18px 32px; + font-size: 16px; + font-weight: 500; + border: none; + border-radius: 12px; + cursor: pointer; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + letter-spacing: 0.5px; +} + +.home-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + transition: left 0.5s; +} + +.home-btn:hover::before { + left: 100%; +} + +.btn-icon { + font-size: 18px; + filter: grayscale(0.3); +} + +.home-btn-primary { + background: linear-gradient(135deg, #4A90E2 0%, #6BB6FF 100%); + color: white; + box-shadow: 0 8px 25px rgba(74, 144, 226, 0.25); +} + +.home-btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 15px 35px rgba(74, 144, 226, 0.35); + background: linear-gradient(135deg, #5ba0f2 0%, #7bc6ff 100%); +} + +.home-btn-secondary { + background: rgba(255, 255, 255, 0.05); + color: #ffffff; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); +} + +.home-btn-secondary:hover { + transform: translateY(-2px); + background: rgba(255, 255, 255, 0.08); + border-color: rgba(74, 144, 226, 0.3); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); + color: #4A90E2; +} + +.home-btn:active { + transform: translateY(0); +} + +/* Create Station Styles */ +.create-station-container { + min-height: 100vh; + position: relative; + display: flex; + flex-direction: column; + background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); +} + +.create-station-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 30% 20%, rgba(74, 144, 226, 0.1) 0%, transparent 50%), + radial-gradient(circle at 70% 80%, rgba(74, 144, 226, 0.05) 0%, transparent 50%); + pointer-events: none; +} + +.create-station-main { + display: flex; + flex: 1; + padding: 40px; + gap: 60px; + max-width: 1400px; + margin: 0 auto; + width: 100%; + height: 100vh; + align-items: center; + position: relative; + z-index: 1; +} + +/* Create Station Left Section */ +.create-station-left-section { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.create-station-vinyl-container { + position: relative; +} + +.create-station-vinyl-record { + width: 280px; + height: 280px; + background: radial-gradient(circle, #1a1a1a 30%, #333 31%, #1a1a1a 32%, #333 33%, #1a1a1a 34%); + border-radius: 50%; + position: relative; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); + animation: spin 6s linear infinite; +} + +.create-station-music-notes { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.create-station-music-notes .music-note { + position: absolute; + font-size: 24px; + color: #4A90E2; + animation: float 3s ease-in-out infinite; +} + +.create-station-music-notes .note-1 { + top: 20%; + right: -40px; + animation-delay: 0s; +} + +.create-station-music-notes .note-2 { + top: 50%; + right: -60px; + animation-delay: 1s; +} + +.create-station-music-notes .note-3 { + top: 80%; + right: -40px; + animation-delay: 2s; +} + +/* Create Station Right Section */ +.create-station-right-section { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.create-station-content { + width: 100%; + max-width: 500px; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%); + backdrop-filter: blur(20px); + border-radius: 20px; + padding: 40px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); +} + +.create-station-header { + text-align: center; + margin-bottom: 40px; +} + +.create-station-header h1 { + font-size: 32px; + font-weight: bold; + color: #4A90E2; + margin-bottom: 10px; + text-shadow: 0 2px 10px rgba(74, 144, 226, 0.3); +} + +.create-station-subtitle { + font-size: 16px; + color: #a0a0a0; + margin: 0; + line-height: 1.5; +} + +.create-station-form { + display: flex; + flex-direction: column; + gap: 25px; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 8px; +} + +.form-group label { + font-size: 14px; + font-weight: 600; + color: #4A90E2; + text-transform: uppercase; + letter-spacing: 1px; +} + +.form-group input, +.form-group textarea { + padding: 15px 20px; + background: rgba(255, 255, 255, 0.05); + border: 2px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + color: #fff; + font-size: 16px; + font-family: inherit; + transition: all 0.3s ease; + resize: none; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: #4A90E2; + background: rgba(255, 255, 255, 0.1); + box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1); +} + +.form-group input::placeholder, +.form-group textarea::placeholder { + color: #aaa; +} + +.form-group input:disabled, +.form-group textarea:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.error-message { + display: flex; + align-items: center; + gap: 10px; + padding: 12px 16px; + background: rgba(255, 59, 48, 0.1); + border: 1px solid rgba(255, 59, 48, 0.3); + border-radius: 8px; + color: #ff3b30; + font-size: 14px; +} + +.create-station-final-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + padding: 18px 30px; + font-size: 16px; + font-weight: bold; + border: none; + border-radius: 12px; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 1px; + min-height: 60px; + background: linear-gradient(135deg, #4A90E2, #6BB6FF); + color: white; + box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3); + margin-top: 10px; +} + +.create-station-final-btn:hover:not(:disabled) { + transform: translateY(-3px); + box-shadow: 0 15px 30px rgba(74, 144, 226, 0.4); +} + +.create-station-final-btn:disabled { + background: rgba(255, 255, 255, 0.1); + color: #666; + cursor: not-allowed; + box-shadow: none; + transform: none; +} + +/* Success State */ +.success-state { + text-align: center; + display: flex; + flex-direction: column; align-items: center; gap: 20px; } -.control-btn { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border: none; +.success-icon { + width: 80px; + height: 80px; + background: linear-gradient(135deg, #34C759, #30D158); border-radius: 50%; - width: 50px; - height: 50px; display: flex; align-items: center; justify-content: center; + color: white; + margin-bottom: 10px; + box-shadow: 0 10px 30px rgba(52, 199, 89, 0.3); +} + +.success-state h2 { + font-size: 24px; + color: #4A90E2; + margin: 0; +} + +.success-state p { + color: #a0a0a0; + margin: 0; + line-height: 1.5; +} + +.join-code-display { + display: flex; + align-items: center; + gap: 10px; + padding: 15px 20px; + background: rgba(74, 144, 226, 0.1); + border: 2px solid rgba(74, 144, 226, 0.3); + border-radius: 12px; + margin: 10px 0; +} + +.join-code { + font-family: 'Courier New', monospace; + font-size: 18px; + font-weight: bold; + color: #4A90E2; + letter-spacing: 2px; +} + +.copy-btn { + padding: 8px; + background: rgba(74, 144, 226, 0.2); + border: none; + border-radius: 6px; + color: #4A90E2; cursor: pointer; transition: all 0.3s ease; +} + +.copy-btn:hover { + background: rgba(74, 144, 226, 0.3); + transform: scale(1.1); +} + +.go-to-station-btn { + padding: 15px 30px; + background: linear-gradient(135deg, #4A90E2, #6BB6FF); color: white; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); + border: none; + border-radius: 12px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 10px; } -.control-btn.play-pause { - width: 60px; - height: 60px; - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); -} - -.control-btn:hover { +.go-to-station-btn:hover { transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5); + box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3); +} + +/* Join Station Styles */ +.join-station-container { + min-height: 100vh; + position: relative; + display: flex; + flex-direction: column; + background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); +} + +.join-station-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 30% 20%, rgba(74, 144, 226, 0.1) 0%, transparent 50%), + radial-gradient(circle at 70% 80%, rgba(74, 144, 226, 0.05) 0%, transparent 50%); + pointer-events: none; +} + +.join-station-main { + display: flex; + flex: 1; + padding: 40px; + gap: 60px; + max-width: 1400px; + margin: 0 auto; + width: 100%; + height: 100vh; + align-items: center; + position: relative; + z-index: 1; +} + +/* Join Station Left Section */ +.join-station-left-section { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.join-station-vinyl-container { + position: relative; +} + +.join-station-vinyl-record { + width: 280px; + height: 280px; + background: radial-gradient(circle, #1a1a1a 30%, #333 31%, #1a1a1a 32%, #333 33%, #1a1a1a 34%); + border-radius: 50%; + position: relative; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); + animation: spin 6s linear infinite; +} + +.join-station-music-notes { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.join-station-music-notes .music-note { + position: absolute; + font-size: 24px; + color: #4A90E2; + animation: float 3s ease-in-out infinite; +} + +.join-station-music-notes .note-1 { + top: 20%; + right: -40px; + animation-delay: 0s; +} + +.join-station-music-notes .note-2 { + top: 50%; + right: -60px; + animation-delay: 1s; +} + +.join-station-music-notes .note-3 { + top: 80%; + right: -40px; + animation-delay: 2s; +} + +/* Join Station Right Section */ +.join-station-right-section { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.join-station-content { + width: 100%; + max-width: 600px; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%); + backdrop-filter: blur(20px); + border-radius: 20px; + padding: 40px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); + max-height: 80vh; + overflow-y: auto; +} + +.join-station-header { + text-align: center; + margin-bottom: 40px; +} + +.join-station-header h1 { + font-size: 32px; + font-weight: bold; + color: #4A90E2; + margin-bottom: 10px; + text-shadow: 0 2px 10px rgba(74, 144, 226, 0.3); +} + +.join-station-subtitle { + font-size: 16px; + color: #a0a0a0; + margin: 0; + line-height: 1.5; +} + +.join-station-body { + display: flex; + flex-direction: column; + gap: 25px; +} + +/* Loading State */ +.loading-state { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + padding: 40px 20px; + text-align: center; +} + +.loading-spinner { + width: 40px; + height: 40px; + border: 3px solid rgba(74, 144, 226, 0.2); + border-top: 3px solid #4A90E2; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +.loading-state p { + color: #a0a0a0; + font-size: 16px; +} + +/* Empty State */ +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + padding: 40px 20px; + text-align: center; +} + +.empty-icon { + width: 80px; + height: 80px; + background: rgba(74, 144, 226, 0.1); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: #4A90E2; + margin-bottom: 10px; +} + +.empty-state h3 { + font-size: 20px; + color: #4A90E2; + margin: 0; +} + +.empty-state p { + color: #a0a0a0; + margin: 0; + line-height: 1.5; + max-width: 300px; +} + +.create-station-btn { + padding: 15px 30px; + background: linear-gradient(135deg, #4A90E2, #6BB6FF); + color: white; + border: none; + border-radius: 12px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 10px; +} + +.create-station-btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3); +} + +/* Stations Grid */ +.stations-grid { + display: flex; + flex-direction: column; + gap: 25px; +} + +.stations-grid h2 { + font-size: 24px; + color: #4A90E2; + margin: 0; + text-align: center; + padding-bottom: 15px; + border-bottom: 2px solid rgba(74, 144, 226, 0.3); +} + +.stations-list { + display: flex; + flex-direction: column; + gap: 15px; + max-height: 400px; + overflow-y: auto; + padding-right: 10px; +} + +.stations-list::-webkit-scrollbar { + width: 6px; +} + +.stations-list::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; +} + +.stations-list::-webkit-scrollbar-thumb { + background: #4A90E2; + border-radius: 10px; +} + +/* Station Card */ +.station-card { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 15px; + transition: all 0.3s ease; + cursor: pointer; +} + +.station-card:hover { + background: rgba(255, 255, 255, 0.08); + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); + border-color: rgba(74, 144, 226, 0.3); +} + +.station-info { + flex: 1; + margin-right: 20px; +} + +.station-info h3 { + font-size: 18px; + color: #ffffff; + margin: 0 0 8px 0; + font-weight: 600; +} + +.station-description { + font-size: 14px; + color: #a0a0a0; + margin: 0 0 10px 0; + line-height: 1.4; +} + +.station-meta { + display: flex; + gap: 15px; + margin-top: 8px; +} + +.station-id { + font-size: 12px; + color: #4A90E2; + font-family: 'Courier New', monospace; + background: rgba(74, 144, 226, 0.1); + padding: 4px 8px; + border-radius: 6px; +} + +.join-station-btn { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 20px; + background: linear-gradient(135deg, #4A90E2, #6BB6FF); + color: white; + border: none; + border-radius: 10px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + white-space: nowrap; +} + +.join-station-btn:hover { + transform: translateY(-1px); + box-shadow: 0 6px 15px rgba(74, 144, 226, 0.4); + background: linear-gradient(135deg, #5ba0f2, #7bc6ff); +} + +/* Station Page Styles */ +.station-page { + min-height: 100vh; + position: relative; + display: flex; + flex-direction: column; + background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); +} + +.animated-background { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + pointer-events: none; +} + +.star { + position: absolute; + width: 2px; + height: 2px; + background: #4A90E2; + border-radius: 50%; + animation: twinkle 3s ease-in-out infinite; +} + +.star-1 { top: 10%; left: 10%; animation-delay: 0s; } +.star-2 { top: 20%; left: 80%; animation-delay: 0.5s; } +.star-3 { top: 30%; left: 20%; animation-delay: 1s; } +.star-4 { top: 40%; left: 90%; animation-delay: 1.5s; } +.star-5 { top: 50%; left: 60%; animation-delay: 2s; } +.star-6 { top: 60%; left: 30%; animation-delay: 2.5s; } +.star-7 { top: 70%; left: 70%; animation-delay: 3s; } +.star-8 { top: 80%; left: 15%; animation-delay: 3.5s; } +.star-9 { top: 90%; left: 85%; animation-delay: 4s; } +.star-10 { top: 15%; left: 50%; animation-delay: 4.5s; } + +@keyframes twinkle { + 0%, 100% { opacity: 0; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.2); } +} + +.station-content { + position: relative; + z-index: 1; + padding: 40px; + flex: 1; + display: flex; + flex-direction: column; + max-width: 1200px; + margin: 0 auto; + width: 100%; +} + +.station-header { + text-align: center; + margin-bottom: 50px; + padding: 30px; + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(20px); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.station-header h1 { + font-size: 36px; + color: #4A90E2; + margin-bottom: 10px; + text-shadow: 0 2px 10px rgba(74, 144, 226, 0.3); +} + +.station-subtitle { + font-size: 16px; + color: #a0a0a0; + margin-bottom: 20px; } .songs-section { - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(10px); + flex: 1; + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(20px); border-radius: 20px; padding: 30px; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); } .section-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 25px; + margin-bottom: 30px; + padding-bottom: 15px; + border-bottom: 2px solid rgba(74, 144, 226, 0.3); } .section-header h2 { - font-size: 1.5rem; - font-weight: 600; - color: #333; - margin: 0; + font-size: 24px; + color: #4A90E2; } .add-song-btn { - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); + padding: 12px 24px; + background: linear-gradient(135deg, #4A90E2, #6BB6FF); color: white; border: none; - padding: 12px 20px; border-radius: 10px; - font-size: 0.9rem; + font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; - box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); } .add-song-btn:hover { transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4); + box-shadow: 0 8px 20px rgba(74, 144, 226, 0.3); } .songs-list { - max-height: 400px; - overflow-y: auto; - margin: -5px; - padding: 5px; + display: flex; + flex-direction: column; + gap: 15px; } -.songs-list::-webkit-scrollbar { - width: 6px; +.empty-songs-state { + text-align: center; + padding: 60px 20px; + color: #a0a0a0; } -.songs-list::-webkit-scrollbar-track { - background: #f1f1f1; - border-radius: 3px; -} - -.songs-list::-webkit-scrollbar-thumb { - background: #c1c1c1; - border-radius: 3px; -} - -.songs-list::-webkit-scrollbar-thumb:hover { - background: #a8a8a8; +.empty-songs-state p { + font-size: 16px; + margin: 0; } .song-item { display: flex; - justify-content: space-between; align-items: center; - padding: 15px 20px; + justify-content: space-between; + padding: 15px; + background: rgba(255, 255, 255, 0.05); border-radius: 12px; - margin-bottom: 8px; + border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; - cursor: pointer; - border: 2px solid transparent; } .song-item:hover { - background: rgba(102, 126, 234, 0.05); - border-color: rgba(102, 126, 234, 0.2); + background: rgba(255, 255, 255, 0.1); + transform: translateY(-2px); } .song-info h4 { - font-size: 1rem; - font-weight: 600; - color: #333; - margin: 0 0 4px 0; + font-size: 16px; + color: white; + margin-bottom: 5px; } .song-info p { - font-size: 0.9rem; - color: #666; + font-size: 14px; + color: #4A90E2; margin: 0; } .song-duration { - font-size: 0.9rem; - color: #888; - font-weight: 500; + font-size: 14px; + color: #ccc; + font-weight: bold; } -/* Modal Styles */ -.modal-backdrop { +/* Login Button Styles */ +.login-status { + display: flex; + align-items: center; + gap: 15px; + font-size: 14px; +} + +.login-status span { + color: #34C759; + font-weight: 600; +} + +.logout-btn { + padding: 8px 16px; + background: rgba(255, 255, 255, 0.1); + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + font-size: 12px; + cursor: pointer; + transition: all 0.3s ease; +} + +.logout-btn:hover { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.3); +} + +.spotify-login-btn { + padding: 12px 24px; + background: #1DB954; + color: white; + border: none; + border-radius: 10px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.spotify-login-btn:hover { + background: #1ed760; + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(29, 185, 84, 0.3); +} + +/* Add Song Modal Styles */ +.add-song-modal-backdrop { position: fixed; top: 0; left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; @@ -596,312 +1397,370 @@ body { padding: 20px; } -.modal-content { - background: white; +.add-song-modal-content { + background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); border-radius: 20px; + padding: 0; + max-width: 600px; width: 100%; - max-width: 500px; max-height: 80vh; - overflow-y: auto; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } -.modal-header { +.add-song-modal-header { display: flex; justify-content: space-between; align-items: center; - padding: 25px 30px 20px; - border-bottom: 1px solid #eee; + padding: 25px 30px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } -.modal-header h2 { - font-size: 1.4rem; - font-weight: 600; - color: #333; +.add-song-modal-header h2 { + font-size: 20px; + color: #4A90E2; margin: 0; } -.close-btn { +.add-song-close-btn { background: none; border: none; + color: #ccc; cursor: pointer; padding: 5px; - border-radius: 50%; - color: #666; + border-radius: 5px; transition: all 0.3s ease; } -.close-btn:hover { - background: #f5f5f5; - color: #333; +.add-song-close-btn:hover { + background: rgba(255, 255, 255, 0.1); + color: #fff; } -.modal-body { +.add-song-modal-body { padding: 30px; } -.modal-body p { - text-align: center; - color: #666; - font-size: 1rem; - margin: 0; +.add-song-search-container { + margin-bottom: 25px; } -/* Empty State Styles */ -.empty-songs-state { +.add-song-search-box { + position: relative; + display: flex; + align-items: center; +} + +.search-icon { + position: absolute; + left: 15px; + color: #4A90E2; + z-index: 1; +} + +.add-song-search-box input { + width: 100%; + padding: 15px 20px 15px 50px; + background: rgba(255, 255, 255, 0.05); + border: 2px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + color: #fff; + font-size: 16px; + transition: all 0.3s ease; +} + +.add-song-search-box input:focus { + outline: none; + border-color: #4A90E2; + background: rgba(255, 255, 255, 0.1); + box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1); +} + +.search-loading { + position: absolute; + right: 15px; +} + +.add-song-results-container { + max-height: 400px; + overflow-y: auto; +} + +.add-song-results-container::-webkit-scrollbar { + width: 6px; +} + +.add-song-results-container::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; +} + +.add-song-results-container::-webkit-scrollbar-thumb { + background: #4A90E2; + border-radius: 10px; +} + +.add-song-placeholder { text-align: center; padding: 40px 20px; - color: #666; + color: #a0a0a0; } -.empty-songs-state p { - font-size: 1.1rem; +.add-song-placeholder svg { + margin-bottom: 15px; + color: #4A90E2; +} + +.add-song-placeholder p { + margin: 0 0 5px 0; + font-size: 16px; +} + +.placeholder-subtitle { + font-size: 14px !important; + color: #666 !important; +} + +.add-song-error { + text-align: center; + padding: 20px; + background: rgba(255, 59, 48, 0.1); + border: 1px solid rgba(255, 59, 48, 0.3); + border-radius: 10px; + margin-bottom: 20px; +} + +.add-song-error p { + color: #ff3b30; margin: 0; - font-style: italic; + font-size: 14px; } -/* Mobile Responsive Design */ +.add-song-results-list { + display: flex; + flex-direction: column; + gap: 10px; +} + +.add-song-result-item { + display: flex; + align-items: center; + padding: 15px; + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; +} + +.add-song-result-item:hover { + background: rgba(255, 255, 255, 0.1); + transform: translateY(-1px); +} + +.result-song-cover { + width: 50px; + height: 50px; + border-radius: 8px; + margin-right: 15px; + object-fit: cover; +} + +.result-song-info { + flex: 1; +} + +.result-song-info h4 { + font-size: 14px; + color: white; + margin: 0 0 3px 0; +} + +.result-artist { + font-size: 12px; + color: #4A90E2; + margin: 0 0 2px 0; +} + +.result-album { + font-size: 11px; + color: #aaa; + margin: 0; +} + +.add-song-btn { + display: flex; + align-items: center; + gap: 5px; + padding: 8px 16px; + background: linear-gradient(135deg, #4A90E2, #6BB6FF); + color: white; + border: none; + border-radius: 8px; + font-size: 12px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + white-space: nowrap; +} + +.add-song-btn:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4); +} + +/* Responsive Design */ @media (max-width: 768px) { - .content { - padding: 30px 20px; - margin: 10px; - border-radius: 20px; + .desktop-main { + flex-direction: column; + padding: 20px 20px 0 20px; + gap: 30px; + height: auto; } - .title { - font-size: 2rem; + .left-section { + flex: none; + max-width: none; } - .subtitle { - font-size: 1rem; - margin-bottom: 30px; + .recommendations-container { + height: auto; + min-height: 400px; } - .create-station-header { - padding-top: 20px; - margin-bottom: 30px; + .vinyl-record-desktop { + width: 200px; + height: 200px; } - .create-station-header h1 { - font-size: 1.8rem; + .progress-container { + padding: 15px 20px; + } + + .home-main { + flex-direction: column; + padding: 20px; + gap: 40px; + height: auto; + min-height: 100vh; + } + + .home-content { + padding: 40px 30px; + margin: 20px; + } + + .home-title { + font-size: 32px; + } + + .home-subtitle { + font-size: 15px; + } + + .home-btn { + padding: 16px 28px; + font-size: 15px; + } + + .create-station-main { + flex-direction: column; + padding: 20px; + gap: 40px; + height: auto; + min-height: 100vh; + } + + .create-station-vinyl-record { + width: 200px; + height: 200px; } .create-station-content { padding: 30px 20px; - border-radius: 20px; - margin: 10px; + } + + .create-station-header h1 { + font-size: 28px; } .join-method-section h2 { - font-size: 1.2rem; - } - - .radio-option label { - padding: 14px 16px; - font-size: 1rem; - } - - .password-input-section input { - padding: 14px 16px; + font-size: 16px; } .create-station-final-btn { - padding: 16px 24px; - font-size: 1rem; + padding: 15px 25px; + font-size: 14px; } - .join-station-header { - padding-top: 20px; - margin-bottom: 30px; + .add-song-modal-content { + max-width: 100%; + max-height: 90vh; } - .join-station-header h1 { - font-size: 1.8rem; + .join-station-main { + flex-direction: column; + padding: 20px; + gap: 40px; + height: auto; + min-height: 100vh; + } + + .join-station-vinyl-record { + width: 200px; + height: 200px; } .join-station-content { padding: 30px 20px; - border-radius: 20px; - margin: 10px; + max-width: 100%; } - .verify-method-section h2 { - font-size: 1.2rem; + .join-station-header h1 { + font-size: 28px; } - .join-station-final-btn { - padding: 16px 24px; - font-size: 1rem; - } - - .station-content { - padding: 15px; - } - - .station-header { - padding-top: 20px; - margin-bottom: 30px; - } - - .station-header h1 { - font-size: 2rem; - } - - .station-subtitle { - font-size: 1rem; - } - - .media-controls-section { - padding: 25px 20px; - } - - .songs-section { - padding: 25px 20px; - } - - .section-header { + .station-card { flex-direction: column; - align-items: stretch; gap: 15px; + text-align: center; } - .add-song-btn { - align-self: center; - min-width: 120px; + .station-info { + margin-right: 0; } - .song-item { - padding: 12px 15px; - } - - .songs-list { - max-height: 300px; - } - - .modal-header { - padding: 20px 25px 15px; - } - - .modal-body { - padding: 25px; + .join-station-btn { + width: 100%; + justify-content: center; } } @media (max-width: 480px) { - .home-container { - padding: 15px; + .home-title { + font-size: 28px; } - .content { - padding: 25px 15px; + .home-subtitle { + font-size: 14px; } - .title { - font-size: 1.8rem; - } - - .create-station { - padding: 15px; - } - - .create-station-content { - padding: 25px 15px; - } - - .join-station { - padding: 15px; - } - - .join-station-content { - padding: 25px 15px; - } - - .station-content { - padding: 10px; - } - - .station-header h1 { - font-size: 1.8rem; - } - - .media-controls-section { - padding: 20px 15px; - } - - .songs-section { - padding: 20px 15px; - } - - .control-btn { - width: 45px; - height: 45px; - } - - .control-btn.play-pause { - width: 55px; - height: 55px; - } - - .modal-backdrop { - padding: 15px; - } - - .modal-header { - padding: 15px 20px 10px; - } - - .modal-body { - padding: 20px; - } -} - -/* Larger screens */ -@media (min-width: 1024px) { - .title { - font-size: 3rem; - } - - .subtitle { - font-size: 1.2rem; + .home-vinyl-record { + width: 150px; + height: 150px; } .create-station-header h1 { - font-size: 2.5rem; + font-size: 24px; } - .button-container { - flex-direction: row; - justify-content: center; - gap: 20px; + .create-station-vinyl-record { + width: 150px; + height: 150px; } - .action-button { - min-width: 200px; + .password-input-section input { + padding:12px 15px; + font-size: 14px; } - - .join-station-header h1 { - font-size: 2.5rem; - } - - .station-header h1 { - font-size: 3rem; - } - - .station-subtitle { - font-size: 1.2rem; - } - - .media-controls { - gap: 30px; - } - - .control-btn { - width: 55px; - height: 55px; - } - - .control-btn.play-pause { - width: 70px; - height: 70px; - } -} +} \ No newline at end of file diff --git a/frontend/src/screens/AddSongModal.jsx b/frontend/src/screens/AddSongModal.jsx index b4d50bc..a6b024f 100644 --- a/frontend/src/screens/AddSongModal.jsx +++ b/frontend/src/screens/AddSongModal.jsx @@ -1,26 +1,146 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { searchSpotifyTracks, isLoggedIn } from '../utils/spotifyAuth.js'; function AddSongModal({ onClose }) { + const [searchQuery, setSearchQuery] = useState(''); + const [searchResults, setSearchResults] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(''); + const handleBackdropClick = (e) => { if (e.target === e.currentTarget) { onClose(); } }; + const handleSearch = async (e) => { + const query = e.target.value; + setSearchQuery(query); + setError(''); + + if (query.length > 2) { + if (!isLoggedIn()) { + setError('Please login to Spotify to search for songs'); + return; + } + + setIsLoading(true); + try { + const results = await searchSpotifyTracks(query); + setSearchResults(results); + } catch (err) { + setError(err.message === 'Token expired' ? 'Session expired. Please login again.' : 'Search failed. Please try again.'); + setSearchResults([]); + if (err.message === 'Token expired') { + setTimeout(() => window.location.reload(), 2000); + } + } finally { + setIsLoading(false); + } + } else { + setSearchResults([]); + } + }; + + const handleKeyPress = async (e) => { + if (e.key === 'Enter' && searchQuery.trim() && searchQuery.length > 2) { + if (!isLoggedIn()) { + setError('Please login to Spotify to search for songs'); + return; + } + + setIsLoading(true); + try { + const results = await searchSpotifyTracks(searchQuery); + setSearchResults(results); + setError(''); + } catch (err) { + setError(err.message === 'Token expired' ? 'Session expired. Please login again.' : 'Search failed. Please try again.'); + setSearchResults([]); + } finally { + setIsLoading(false); + } + } + }; + return ( -
-
-
-

Add Song

-
-
-

Song addition functionality coming soon...

+
+
+
+ + + + + {isLoading && ( +
+
+
+ )} +
+
+ +
+ {error && ( +
+

{error}

+
+ )} + {searchQuery.length === 0 ? ( +
+ + + +

Search for music to add to your station

+

Enter song title, artist, or album name

+
+ ) : searchQuery.length <= 2 ? ( +
+

Type at least 3 characters to search

+
+ ) : searchResults.length === 0 && !isLoading && !error ? ( +
+

No results found for "{searchQuery}"

+

Try different keywords

+
+ ) : ( +
+ {searchResults.map(song => ( +
+ {`${song.title} +
+

{song.title}

+

{song.artist}

+

{song.album}

+
+ +
+ ))} +
+ )} +
diff --git a/frontend/src/screens/CreateStation.jsx b/frontend/src/screens/CreateStation.jsx index bd53ac0..dfe8152 100644 --- a/frontend/src/screens/CreateStation.jsx +++ b/frontend/src/screens/CreateStation.jsx @@ -1,34 +1,184 @@ import React, { useState } from "react"; import { createStation } from "../utils/StationsCreate"; - -// I UNDERSTAND THIS!! --Noah +import { useNavigate } from "react-router-dom"; function CreateStation() { + const navigate = useNavigate(); const [name, setName] = useState(""); const [description, setDescription] = useState(""); + const [joinCode, setJoinCode] = useState(""); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(""); + const [isCopied, setIsCopied] = useState(false); - const handleCreateStation = () => { - createStation(name, description); + const handleCreateStation = async () => { + if (!name.trim() || !description.trim()) { + setError("Please fill in all fields"); + return; + } + + setIsLoading(true); + setError(""); + + try { + const code = await createStation(name, description); + setJoinCode(code); + } catch (error) { + setError(error.message || "Failed to create station"); + } finally { + setIsLoading(false); + } + }; + + const handleGoToStation = () => { + // Navigate to the station or home page + navigate("/"); + }; + + const handleCopyCode = async () => { + try { + await navigator.clipboard.writeText(joinCode); + setIsCopied(true); + // Reset the animation after 2 seconds + setTimeout(() => { + setIsCopied(false); + }, 2000); + } catch (err) { + console.error('Failed to copy: ', err); + } }; return ( -
-
-

Create a Station on Serena

-
+
+
+ {/* Left Section - Vinyl Animation */} +
+
+
+
+
+
+ + {/* Animated Music Notes */} +
+
โ™ช
+
โ™ซ
+
โ™ช
+
+
+
-
-