Compare commits
No commits in common. "main" and "noah-dev" have entirely different histories.
9 changed files with 673 additions and 1969 deletions
12
backend/gradlew
vendored
12
backend/gradlew
vendored
|
|
@ -15,6 +15,8 @@
|
|||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
#
|
||||
# SPDX-License-Identifier: Apache-2.0
|
||||
#
|
||||
|
||||
##############################################################################
|
||||
#
|
||||
|
|
@ -55,7 +57,7 @@
|
|||
# Darwin, MinGW, and NonStop.
|
||||
#
|
||||
# (3) This script is generated from the Groovy template
|
||||
# https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
|
||||
# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
|
||||
# within the Gradle project.
|
||||
#
|
||||
# You can find Gradle at https://github.com/gradle/gradle/.
|
||||
|
|
@ -84,7 +86,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 "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
|
||||
APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
|
||||
|
||||
# Use the maximum available, or set MAX_FD != -1 to use that value.
|
||||
MAX_FD=maximum
|
||||
|
|
@ -112,7 +114,7 @@ case "$( uname )" in #(
|
|||
NONSTOP* ) nonstop=true ;;
|
||||
esac
|
||||
|
||||
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
|
||||
CLASSPATH="\\\"\\\""
|
||||
|
||||
|
||||
# Determine the Java command to use to start the JVM.
|
||||
|
|
@ -203,7 +205,7 @@ fi
|
|||
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
|
||||
|
||||
# Collect all arguments for the java command:
|
||||
# * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
|
||||
# * DEFAULT_JVM_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.
|
||||
|
|
@ -211,7 +213,7 @@ DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
|
|||
set -- \
|
||||
"-Dorg.gradle.appname=$APP_BASE_NAME" \
|
||||
-classpath "$CLASSPATH" \
|
||||
org.gradle.wrapper.GradleWrapperMain \
|
||||
-jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
|
||||
"$@"
|
||||
|
||||
# Stop when "xargs" is not available.
|
||||
|
|
|
|||
6
backend/gradlew.bat
vendored
6
backend/gradlew.bat
vendored
|
|
@ -13,6 +13,8 @@
|
|||
@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 ##########################################################################
|
||||
|
|
@ -68,11 +70,11 @@ goto fail
|
|||
:execute
|
||||
@rem Setup the command line
|
||||
|
||||
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
|
||||
set CLASSPATH=
|
||||
|
||||
|
||||
@rem Execute Gradle
|
||||
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
|
||||
"%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" %*
|
||||
|
||||
:end
|
||||
@rem End local scope for the variables with windows NT shell
|
||||
|
|
|
|||
|
|
@ -4,11 +4,6 @@ const SingleAudioPlayer = ({ src }) => {
|
|||
const audioRef = useRef(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
|
||||
// Early return if no src provided
|
||||
if (!src) {
|
||||
return <div>No audio file available</div>;
|
||||
}
|
||||
|
||||
const togglePlay = () => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,146 +1,26 @@
|
|||
import React, { useState } from 'react';
|
||||
import { searchSpotifyTracks, isLoggedIn } from '../utils/spotifyAuth.js';
|
||||
import React from 'react';
|
||||
|
||||
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 (
|
||||
<div className="add-song-modal-backdrop" onClick={handleBackdropClick}>
|
||||
<div className="add-song-modal-content">
|
||||
<div className="add-song-modal-header">
|
||||
<h2>Add Song to Station</h2>
|
||||
<button className="add-song-close-btn" onClick={onClose}>
|
||||
<div className="modal-backdrop" onClick={handleBackdropClick}>
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h2>Add Song</h2>
|
||||
<button className="close-btn" onClick={onClose}>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="add-song-modal-body">
|
||||
<div className="add-song-search-container">
|
||||
<div className="add-song-search-box">
|
||||
<svg className="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search for songs, artists, or albums..."
|
||||
value={searchQuery}
|
||||
onChange={handleSearch}
|
||||
onKeyPress={handleKeyPress}
|
||||
autoFocus
|
||||
/>
|
||||
{isLoading && (
|
||||
<div className="search-loading">
|
||||
<div className="loading-spinner"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="add-song-results-container">
|
||||
{error && (
|
||||
<div className="add-song-error">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
)}
|
||||
{searchQuery.length === 0 ? (
|
||||
<div className="add-song-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
|
||||
</svg>
|
||||
<p>Search for music to add to your station</p>
|
||||
<p className="placeholder-subtitle">Enter song title, artist, or album name</p>
|
||||
</div>
|
||||
) : searchQuery.length <= 2 ? (
|
||||
<div className="add-song-placeholder">
|
||||
<p>Type at least 3 characters to search</p>
|
||||
</div>
|
||||
) : searchResults.length === 0 && !isLoading && !error ? (
|
||||
<div className="add-song-placeholder">
|
||||
<p>No results found for "{searchQuery}"</p>
|
||||
<p className="placeholder-subtitle">Try different keywords</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="add-song-results-list">
|
||||
{searchResults.map(song => (
|
||||
<div key={song.id} className="add-song-result-item">
|
||||
<img src={song.coverUrl} alt={`${song.title} cover`} className="result-song-cover" />
|
||||
<div className="result-song-info">
|
||||
<h4>{song.title}</h4>
|
||||
<p className="result-artist">{song.artist}</p>
|
||||
<p className="result-album">{song.album}</p>
|
||||
</div>
|
||||
<button className="add-song-btn" onClick={() => console.log('Adding song:', song)}>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
|
||||
</svg>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>Song addition functionality coming soon...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,184 +1,37 @@
|
|||
import React, { useState } from "react";
|
||||
import { createStation } from "../utils/StationsCreate";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// I UNDERSTAND THIS!! --Noah
|
||||
|
||||
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 = 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);
|
||||
}
|
||||
const handleCreateStation = () => {
|
||||
setJoinCode(createStation(name, description));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="create-station-container">
|
||||
<div className="create-station-main">
|
||||
{/* Left Section - Vinyl Animation */}
|
||||
<div className="create-station-left-section">
|
||||
<div className="create-station-vinyl-container">
|
||||
<div className="create-station-vinyl-record">
|
||||
<div className="vinyl-center"></div>
|
||||
<div className="vinyl-grooves"></div>
|
||||
</div>
|
||||
|
||||
{/* Animated Music Notes */}
|
||||
<div className="create-station-music-notes">
|
||||
<div className="music-note note-1">♪</div>
|
||||
<div className="music-note note-2">♫</div>
|
||||
<div className="music-note note-3">♪</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="create-station">
|
||||
<header className="create-station-header">
|
||||
<h1>Create a Station on Serena</h1>
|
||||
</header>
|
||||
|
||||
{/* Right Section - Create Station Form */}
|
||||
<div className="create-station-right-section">
|
||||
<div className="create-station-content">
|
||||
<header className="create-station-header">
|
||||
<h1>Create a Station on Serena</h1>
|
||||
<p className="create-station-subtitle">Start your own collaborative music experience</p>
|
||||
</header>
|
||||
<main className="create-station-content">
|
||||
<textarea onChange={(e) => setName(e.target.value)} />
|
||||
<textarea onChange={(e) => setDescription(e.target.value)} />
|
||||
|
||||
{!joinCode ? (
|
||||
<form className="create-station-form" onSubmit={(e) => e.preventDefault()}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="station-name">Station Name</label>
|
||||
<input
|
||||
id="station-name"
|
||||
type="text"
|
||||
placeholder="Enter your station name..."
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="create-station-final-btn"
|
||||
onClick={handleCreateStation}
|
||||
disabled={!name || !description}
|
||||
>
|
||||
Create Radio Station
|
||||
</button>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="station-description">Description</label>
|
||||
<textarea
|
||||
id="station-description"
|
||||
placeholder="Describe your station's vibe..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
disabled={isLoading}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="error-message">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
|
||||
</svg>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="create-station-final-btn"
|
||||
onClick={handleCreateStation}
|
||||
disabled={!name.trim() || !description.trim() || isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="loading-spinner"></div>
|
||||
Creating Station...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
|
||||
</svg>
|
||||
Create Radio Station
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<div className="success-state">
|
||||
<div className="success-icon">
|
||||
<svg width="60" height="60" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2>Station Created Successfully!</h2>
|
||||
<p>Your station is ready to go. Share this join code with your friends:</p>
|
||||
|
||||
<div className="join-code-display">
|
||||
<span className="join-code">{joinCode}</span>
|
||||
<button
|
||||
className={`copy-btn ${isCopied ? 'copied' : ''}`}
|
||||
onClick={handleCopyCode}
|
||||
>
|
||||
{isCopied ? (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isCopied && (
|
||||
<div className="copy-feedback">
|
||||
<span className="copy-success-message">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
Copied to clipboard!
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button className="go-to-station-btn" onClick={handleGoToStation}>
|
||||
Go to Home
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>your joinCode: {joinCode}</p>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,29 +14,25 @@ function Home() {
|
|||
|
||||
return (
|
||||
<div className="home-container">
|
||||
<div className="home-content">
|
||||
<div className="home-header">
|
||||
<h1 className="home-title">Serena Station Hub</h1>
|
||||
<p className="home-subtitle">
|
||||
Create or join a radio station to share music with friends
|
||||
</p>
|
||||
</div>
|
||||
<div className="content">
|
||||
<h1 className="title">Radio Station Hub</h1>
|
||||
<p className="subtitle">
|
||||
Create or join a radio station to share music with friends
|
||||
</p>
|
||||
|
||||
<div className="home-actions">
|
||||
<div className="button-container">
|
||||
<button
|
||||
className="home-btn home-btn-primary"
|
||||
className="action-button primary"
|
||||
onClick={handleCreateStation}
|
||||
>
|
||||
<span className="btn-icon">🎵</span>
|
||||
Create Station
|
||||
Create Radio Station
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="home-btn home-btn-secondary"
|
||||
className="action-button secondary"
|
||||
onClick={handleJoinStation}
|
||||
>
|
||||
<span className="btn-icon">🎧</span>
|
||||
Join Station
|
||||
Join Radio Station
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,108 +5,40 @@ import { getStations } from "../utils/GetStations";
|
|||
function JoinStation() {
|
||||
const navigate = useNavigate();
|
||||
const [stations, setStations] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const handleJoinStation = (stationID) => {
|
||||
// console.log("Joining station with ID:" + stationID);
|
||||
|
||||
navigate(`/station/${stationID}`);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchStations() {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await getStations();
|
||||
setStations(result);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch stations:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
const result = await getStations();
|
||||
setStations(result);
|
||||
}
|
||||
fetchStations();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="join-station-container">
|
||||
<div className="join-station-main">
|
||||
{/* Left Section - Vinyl Animation */}
|
||||
<div className="join-station-left-section">
|
||||
<div className="join-station-vinyl-container">
|
||||
<div className="join-station-vinyl-record">
|
||||
<div className="vinyl-center"></div>
|
||||
<div className="vinyl-grooves"></div>
|
||||
</div>
|
||||
|
||||
{/* Animated Music Notes */}
|
||||
<div className="join-station-music-notes">
|
||||
<div className="music-note note-1">♪</div>
|
||||
<div className="music-note note-2">♫</div>
|
||||
<div className="music-note note-3">♪</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="join-station">
|
||||
<header className="join-station-header">
|
||||
<h1>Join a Station on Serena</h1>
|
||||
</header>
|
||||
|
||||
{/* Right Section - Join Station Content */}
|
||||
<div className="join-station-right-section">
|
||||
<div className="join-station-content">
|
||||
<header className="join-station-header">
|
||||
<h1>Join a Station on Serena</h1>
|
||||
<p className="join-station-subtitle">Connect to an existing collaborative music experience</p>
|
||||
</header>
|
||||
|
||||
<div className="join-station-body">
|
||||
{isLoading ? (
|
||||
<div className="loading-state">
|
||||
<div className="loading-spinner"></div>
|
||||
<p>Loading available stations...</p>
|
||||
</div>
|
||||
) : stations.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<div className="empty-icon">
|
||||
<svg width="60" height="60" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>No stations available</h3>
|
||||
<p>There are currently no active stations to join. Create one to get started!</p>
|
||||
<button
|
||||
className="create-station-btn"
|
||||
onClick={() => navigate('/create-station')}
|
||||
>
|
||||
Create Station
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="stations-grid">
|
||||
<h2>Available Stations</h2>
|
||||
<div className="stations-list">
|
||||
{stations.map((station, index) => (
|
||||
<div key={index} className="station-card">
|
||||
<div className="station-info">
|
||||
<h3>{station.name}</h3>
|
||||
<p className="station-description">{station.description}</p>
|
||||
<div className="station-meta">
|
||||
<span className="station-id">ID: {station.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="join-station-btn"
|
||||
onClick={() => handleJoinStation(station.id)}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z"/>
|
||||
</svg>
|
||||
Join Station
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<main className="join-station-content">
|
||||
{stations.map((station, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<p>Station Name: {station.name}</p>
|
||||
<p>Station Description: {station.description}</p>
|
||||
<button onClick={() => handleJoinStation(station.id)}>
|
||||
join this station
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,122 +8,27 @@ function StationPage() {
|
|||
const { stationID } = useParams();
|
||||
const [clientToken, setClientToken] = useState("");
|
||||
const [accessDenied, setAccessDenied] = useState(true);
|
||||
const [currentSong] = useState({ progress: 0, duration: 1 });
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const [userName, setUserName] = useState("");
|
||||
const [joinCode, setJoinCode] = useState("");
|
||||
|
||||
const auth = async () => {
|
||||
if (!userName.trim() || !joinCode.trim()) {
|
||||
setError("Please fill in all fields");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const token = await addClientToStation(userName, joinCode);
|
||||
setClientToken(token);
|
||||
setAccessDenied(false);
|
||||
} catch (error) {
|
||||
console.error("Auth failed:", error);
|
||||
setError(error.message || "Failed to join station");
|
||||
setAccessDenied(true);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (accessDenied) {
|
||||
return (
|
||||
<div className="join-station-container">
|
||||
<div className="join-station-main">
|
||||
{/* Left Section - Vinyl Animation */}
|
||||
<div className="join-station-left-section">
|
||||
<div className="join-station-vinyl-container">
|
||||
<div className="join-station-vinyl-record">
|
||||
<div className="vinyl-center"></div>
|
||||
<div className="vinyl-grooves"></div>
|
||||
</div>
|
||||
|
||||
{/* Animated Music Notes */}
|
||||
<div className="join-station-music-notes">
|
||||
<div className="music-note note-1">♪</div>
|
||||
<div className="music-note note-2">♫</div>
|
||||
<div className="music-note note-3">♪</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Section - Authentication Form */}
|
||||
<div className="join-station-right-section">
|
||||
<div className="join-station-content">
|
||||
<header className="join-station-header">
|
||||
<h1>Join Station {stationID}</h1>
|
||||
<p className="join-station-subtitle">Enter your details to access this collaborative music experience</p>
|
||||
</header>
|
||||
|
||||
<form className="create-station-form" onSubmit={(e) => e.preventDefault()}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="user-name">Your Name</label>
|
||||
<input
|
||||
id="user-name"
|
||||
type="text"
|
||||
placeholder="Enter your name..."
|
||||
value={userName}
|
||||
onChange={(e) => setUserName(e.target.value)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="join-code">Join Code</label>
|
||||
<input
|
||||
id="join-code"
|
||||
type="text"
|
||||
placeholder="Enter the station join code..."
|
||||
value={joinCode}
|
||||
onChange={(e) => setJoinCode(e.target.value)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="error-message">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
|
||||
</svg>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="create-station-final-btn"
|
||||
onClick={auth}
|
||||
disabled={!userName.trim() || !joinCode.trim() || isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="loading-spinner"></div>
|
||||
Joining Station...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z"/>
|
||||
</svg>
|
||||
Join RadioTower
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<textarea onChange={(e) => setUserName(e.target.value)} />
|
||||
<textarea onChange={(e) => setJoinCode(e.target.value)} />
|
||||
<button onClick={auth}>Access this RadioTower</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -143,9 +48,7 @@ function StationPage() {
|
|||
<h1>Serena Station</h1>
|
||||
<p className="station-subtitle">Collaborative Music Experience</p>
|
||||
</header>
|
||||
{recommendedSongs.length > 0 && (
|
||||
<SingleAudioPlayer src={recommendedSongs[0]}></SingleAudioPlayer>
|
||||
)}
|
||||
<SingleAudioPlayer src={recommendedSongs[0]}></SingleAudioPlayer>
|
||||
|
||||
<div className="songs-section">
|
||||
<div className="section-header">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue