115 lines
3.5 KiB
JavaScript
115 lines
3.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import AddSongModal from './AddSongModal';
|
|
|
|
function StationPage() {
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [currentSong, setCurrentSong] = useState({
|
|
title: "No song playing",
|
|
artist: "Add songs to get started",
|
|
isPlaying: false
|
|
});
|
|
|
|
// Empty song list - no songs initially
|
|
const recommendedSongs = [];
|
|
|
|
const handlePlayPause = () => {
|
|
setCurrentSong(prev => ({ ...prev, isPlaying: !prev.isPlaying }));
|
|
};
|
|
|
|
const handleNext = () => {
|
|
console.log('Next song');
|
|
};
|
|
|
|
const handlePrevious = () => {
|
|
console.log('Previous song');
|
|
};
|
|
|
|
const openModal = () => {
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const closeModal = () => {
|
|
setIsModalOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div className="station-page">
|
|
<div className="animated-background">
|
|
{[...Array(20)].map((_, i) => (
|
|
<div key={i} className={`star star-${i + 1}`}></div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="station-content">
|
|
<header className="station-header">
|
|
<h1>Serena Station</h1>
|
|
<p className="station-subtitle">Collaborative Music Experience</p>
|
|
</header>
|
|
|
|
<div className="media-controls-section">
|
|
<div className="current-song">
|
|
<h3>{currentSong.title}</h3>
|
|
<p>{currentSong.artist}</p>
|
|
</div>
|
|
|
|
<div className="media-controls">
|
|
<button className="control-btn" onClick={handlePrevious}>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<button className="control-btn play-pause" onClick={handlePlayPause}>
|
|
{currentSong.isPlaying ? (
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
|
|
</svg>
|
|
) : (
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M8 5v14l11-7z"/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
|
|
<button className="control-btn" onClick={handleNext}>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="songs-section">
|
|
<div className="section-header">
|
|
<h2>Song Queue</h2>
|
|
<button className="add-song-btn" onClick={openModal}>
|
|
Add Song
|
|
</button>
|
|
</div>
|
|
|
|
<div className="songs-list">
|
|
{recommendedSongs.length === 0 ? (
|
|
<div className="empty-songs-state">
|
|
<p>No songs in queue yet. Add some songs to get started!</p>
|
|
</div>
|
|
) : (
|
|
recommendedSongs.map(song => (
|
|
<div key={song.id} className="song-item">
|
|
<div className="song-info">
|
|
<h4>{song.title}</h4>
|
|
<p>{song.artist}</p>
|
|
</div>
|
|
<span className="song-duration">{song.duration}</span>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isModalOpen && <AddSongModal onClose={closeModal} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default StationPage;
|