From 873bf64a4e2baa6ccec32be3c47033405ef26946 Mon Sep 17 00:00:00 2001 From: Tobias Date: Sat, 2 Aug 2025 02:00:11 +0200 Subject: [PATCH 1/8] search bar, design update --- frontend/src/index.css | 1757 ++++++++++++++---------- frontend/src/screens/AddSongModal.jsx | 136 +- frontend/src/screens/CreateStation.jsx | 110 +- frontend/src/screens/Home.jsx | 64 +- frontend/src/screens/JoinStation.jsx | 110 +- frontend/src/screens/StationPage.jsx | 147 +- frontend/src/utils/spotifyAuth.js | 36 + 7 files changed, 1438 insertions(+), 922 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index 673a327..fa303ed 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -5,590 +5,794 @@ } 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; +/* Next Song Info */ +.next-song-info { + text-align: center; + background: rgba(255, 255, 255, 0.05); padding: 20px; - max-width: 800px; - margin: 0 auto; -} - -.station-header { - text-align: center; - margin-bottom: 40px; - padding-top: 40px; -} - -.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); -} - -.station-subtitle { - font-size: 1.1rem; - color: rgba(255, 255, 255, 0.9); - margin: 0; -} - -.media-controls-section { - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(10px); - border-radius: 20px; - padding: 30px; + border-radius: 15px; margin-bottom: 30px; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); + width: 100%; + max-width: 300px; } -.current-song { - text-align: center; - margin-bottom: 25px; +.next-label { + font-size: 14px; + color: #aaa; + margin-bottom: 8px; + text-transform: uppercase; + letter-spacing: 1px; } -.current-song h3 { - font-size: 1.4rem; - font-weight: 600; - color: #333; +.next-song-info h4 { + font-size: 18px; margin-bottom: 5px; + color: #4A90E2; } -.current-song p { - font-size: 1rem; - color: #666; - margin: 0; +.next-artist { + font-size: 14px; + color: #ccc; } -.media-controls { +/* Bottom Play Icon */ +.bottom-play-icon { display: flex; justify-content: center; - align-items: center; - gap: 20px; } -.control-btn { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border: none; - border-radius: 50%; - width: 50px; - height: 50px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.3s ease; - color: white; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.control-btn.play-pause { +.mini-play-btn { width: 60px; height: 60px; - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); + 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); } -.control-btn:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5); +.mini-play-btn:hover { + transform: scale(1.1); + box-shadow: 0 15px 30px rgba(74, 144, 226, 0.4); } -.songs-section { - background: rgba(255, 255, 255, 0.95); +/* 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; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); + height: 100%; /* Take full height of parent */ + display: flex; + flex-direction: column; } -.section-header { +.recommendations-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 25px; + margin-bottom: 30px; + border-bottom: 2px solid rgba(74, 144, 226, 0.3); + padding-bottom: 15px; } -.section-header h2 { - font-size: 1.5rem; - font-weight: 600; - color: #333; - margin: 0; +.recommendations-header h2 { + font-size: 28px; + color: #4A90E2; + font-weight: bold; } -.add-song-btn { - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); - color: white; +.add-suggestion-btn { + width: 50px; + height: 50px; border: none; - padding: 12px 20px; - border-radius: 10px; - font-size: 0.9rem; - font-weight: 600; + border-radius: 50%; + background: linear-gradient(135deg, #4A90E2, #6BB6FF); + color: #fff; 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); -} - -.songs-list { - max-height: 400px; - overflow-y: auto; - margin: -5px; - padding: 5px; -} - -.songs-list::-webkit-scrollbar { - width: 6px; -} - -.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; -} - -.song-item { display: flex; - justify-content: space-between; align-items: center; - padding: 15px 20px; - border-radius: 12px; - margin-bottom: 8px; + justify-content: center; transition: all 0.3s ease; - cursor: pointer; - border: 2px solid transparent; + box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3); } -.song-item:hover { - background: rgba(102, 126, 234, 0.05); - border-color: rgba(102, 126, 234, 0.2); +.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: 1rem; - font-weight: 600; - color: #333; - margin: 0 0 4px 0; + font-size: 16px; + margin-bottom: 5px; + color: white; } -.song-info p { - font-size: 0.9rem; - color: #666; - margin: 0; +.artist { + font-size: 14px; + color: #4A90E2; + margin-bottom: 3px; } -.song-duration { - font-size: 0.9rem; - color: #888; - font-weight: 500; +.album { + font-size: 12px; + color: #aaa; } -/* Modal Styles */ -.modal-backdrop { - position: fixed; +.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 */ +.home-container { + min-height: 100vh; + position: relative; + display: flex; + flex-direction: column; + background: #1a1a1a; +} + +.home-main { + display: flex; + flex: 1; + padding: 40px; + gap: 60px; + max-width: 1400px; + margin: 0 auto; + width: 100%; + height: 100vh; + align-items: center; +} + +/* Home Left Section */ +.home-left-section { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.home-vinyl-container { + position: relative; +} + +.home-vinyl-record { + width: 250px; + height: 250px; + 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 8s linear infinite; +} + +.home-music-notes { + position: absolute; top: 0; left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, 0.5); + pointer-events: none; +} + +.home-music-notes .music-note { + position: absolute; + font-size: 20px; + color: #4A90E2; + animation: float 4s ease-in-out infinite; +} + +.home-music-notes .note-1 { + top: 20%; + right: -30px; + animation-delay: 0s; +} + +.home-music-notes .note-2 { + top: 50%; + right: -50px; + animation-delay: 1.5s; +} + +.home-music-notes .note-3 { + top: 80%; + right: -30px; + animation-delay: 3s; +} + +/* Home Right Section */ +.home-right-section { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.home-content { + text-align: center; + max-width: 500px; + background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); + backdrop-filter: blur(10px); + border-radius: 20px; + padding: 50px 40px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.home-title { + font-size: 48px; + font-weight: bold; + color: #4A90E2; + margin-bottom: 20px; + text-shadow: 0 2px 10px rgba(74, 144, 226, 0.3); +} + +.home-subtitle { + font-size: 18px; + color: #ccc; + margin-bottom: 40px; + line-height: 1.6; +} + +.home-button-container { + display: flex; + flex-direction: column; + gap: 20px; +} + +.home-action-button { + 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; +} + +.home-action-button.primary { + background: linear-gradient(135deg, #4A90E2, #6BB6FF); + color: white; + box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3); +} + +.home-action-button.primary:hover { + transform: translateY(-3px); + box-shadow: 0 15px 30px rgba(74, 144, 226, 0.4); +} + +.home-action-button.secondary { + background: transparent; + color: #4A90E2; + border: 2px solid #4A90E2; + box-shadow: 0 5px 15px rgba(74, 144, 226, 0.2); +} + +.home-action-button.secondary:hover { + background: rgba(74, 144, 226, 0.1); + transform: translateY(-3px); + box-shadow: 0 10px 25px rgba(74, 144, 226, 0.3); +} + +/* Create Station Styles */ +.create-station-container { + min-height: 100vh; + position: relative; + display: flex; + flex-direction: column; + background: #1a1a1a; +} + +.create-station-main { + display: flex; + flex: 1; + padding: 40px; + gap: 60px; + max-width: 1400px; + margin: 0 auto; + width: 100%; + height: 100vh; + align-items: center; +} + +/* 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, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); + backdrop-filter: blur(10px); + 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-form { + display: flex; + flex-direction: column; + gap: 30px; +} + +.join-method-section h2 { + font-size: 18px; + color: #fff; + margin-bottom: 20px; + font-weight: 600; +} + +.radio-option { + margin-bottom: 20px; +} + +.radio-option label { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + padding: 15px 20px; + background: rgba(255, 255, 255, 0.05); + border: 2px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + transition: all 0.3s ease; + font-size: 16px; + font-weight: 500; + color: #fff; +} + +.radio-option label:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(74, 144, 226, 0.5); +} + +.radio-option input[type="radio"] { + display: none; +} + +.radio-custom { + width: 20px; + height: 20px; + border: 2px solid #4A90E2; + border-radius: 50%; + position: relative; + transition: all 0.3s ease; +} + +.radio-option input[type="radio"]:checked + .radio-custom { + background: #4A90E2; + box-shadow: 0 0 10px rgba(74, 144, 226, 0.5); +} + +.radio-option input[type="radio"]:checked + .radio-custom::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 8px; + height: 8px; + background: white; + border-radius: 50%; +} + +.password-input-section { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 20px; + padding: 20px; + background: rgba(255, 255, 255, 0.03); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.password-input-section label { + font-size: 14px; + font-weight: 600; + color: #4A90E2; + text-transform: uppercase; + letter-spacing: 1px; +} + +.password-input-section input { + padding: 15px 20px; + background: rgba(255, 255, 255, 0.05); + border: 2px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + color: #fff; + font-size: 16px; + transition: all 0.3s ease; +} + +.password-input-section 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); +} + +.password-input-section input::placeholder { + color: #aaa; +} + +.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: 20px; +} + +.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; +} + +/* Add Song Modal Styles */ +.add-song-modal-backdrop { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; @@ -596,312 +800,371 @@ body { padding: 20px; } -.modal-content { - background: white; +.add-song-modal-content { + background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); border-radius: 20px; width: 100%; - max-width: 500px; + max-width: 600px; max-height: 80vh; - overflow-y: auto; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); + display: flex; + flex-direction: column; + overflow: hidden; } -.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: 2px solid rgba(74, 144, 226, 0.3); + background: rgba(255, 255, 255, 0.02); } -.modal-header h2 { - font-size: 1.4rem; - font-weight: 600; - color: #333; +.add-song-modal-header h2 { + font-size: 24px; + color: #4A90E2; + font-weight: bold; margin: 0; } -.close-btn { - background: none; +.add-song-close-btn { + width: 40px; + height: 40px; border: none; - cursor: pointer; - padding: 5px; border-radius: 50%; - color: #666; + background: rgba(255, 255, 255, 0.1); + color: #fff; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; transition: all 0.3s ease; } -.close-btn:hover { - background: #f5f5f5; - color: #333; +.add-song-close-btn:hover { + background: rgba(255, 255, 255, 0.2); + transform: scale(1.1); } -.modal-body { +.add-song-modal-body { padding: 30px; + flex: 1; + display: flex; + flex-direction: column; + min-height: 0; } -.modal-body p { +.add-song-search-container { + margin-bottom: 25px; +} + +.add-song-search-box { + position: relative; + display: flex; + align-items: center; +} + +.add-song-search-box .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); +} + +.add-song-search-box input::placeholder { + color: #aaa; +} + +.search-loading { + position: absolute; + right: 15px; + display: flex; + align-items: center; +} + +.loading-spinner { + width: 20px; + height: 20px; + border: 2px solid rgba(74, 144, 226, 0.3); + border-top: 2px solid #4A90E2; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +.add-song-results-container { + flex: 1; + display: flex; + flex-direction: column; + min-height: 300px; + overflow: hidden; +} + +.add-song-placeholder { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; text-align: center; - color: #666; - font-size: 1rem; + color: #aaa; + gap: 15px; +} + +.add-song-placeholder svg { + color: #4A90E2; + opacity: 0.6; +} + +.add-song-placeholder p { margin: 0; + font-size: 16px; } -/* Empty State Styles */ -.empty-songs-state { - text-align: center; - padding: 40px 20px; - color: #666; +.placeholder-subtitle { + font-size: 14px !important; + color: #666 !important; } -.empty-songs-state p { - font-size: 1.1rem; +.add-song-results-list { + display: flex; + flex-direction: column; + gap: 12px; + flex: 1; + overflow-y: auto; + padding-right: 10px; +} + +.add-song-results-list::-webkit-scrollbar { + width: 6px; +} + +.add-song-results-list::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; +} + +.add-song-results-list::-webkit-scrollbar-thumb { + background: #4A90E2; + border-radius: 10px; +} + +.add-song-result-item { + display: flex; + align-items: center; + padding: 15px; + background: rgba(255, 255, 255, 0.03); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; + gap: 15px; +} + +.add-song-result-item:hover { + background: rgba(255, 255, 255, 0.08); + transform: translateY(-1px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +} + +.result-song-cover { + width: 50px; + height: 50px; + border-radius: 8px; + object-fit: cover; + flex-shrink: 0; +} + +.result-song-info { + flex: 1; + min-width: 0; +} + +.result-song-info h4 { + font-size: 16px; + margin: 0 0 5px 0; + color: white; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.result-artist { + font-size: 14px; + color: #4A90E2; + margin: 0 0 3px 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.result-album { + font-size: 12px; + color: #aaa; margin: 0; - font-style: italic; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -/* Mobile Responsive Design */ +.add-song-btn { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 16px; + background: linear-gradient(135deg, #4A90E2, #6BB6FF); + color: white; + border: none; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + flex-shrink: 0; +} + +.add-song-btn:hover { + transform: scale(1.05); + box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4); +} + +/* Responsive Design */ @media (max-width: 768px) { - .content { + .desktop-main { + flex-direction: column; + padding: 20px 20px 0 20px; + gap: 30px; + height: auto; + } + + .left-section { + flex: none; + max-width: none; + } + + .recommendations-container { + height: auto; + min-height: 400px; + } + + .vinyl-record-desktop { + width: 200px; + height: 200px; + } + + .progress-container { + padding: 15px 20px; + } + + .home-main { + flex-direction: column; + padding: 20px; + gap: 40px; + height: auto; + min-height: 100vh; + } + + .home-vinyl-record { + width: 180px; + height: 180px; + } + + .home-content { padding: 30px 20px; - margin: 10px; - border-radius: 20px; } - .title { - font-size: 2rem; + .home-title { + font-size: 36px; } - .subtitle { - font-size: 1rem; - margin-bottom: 30px; + .home-subtitle { + font-size: 16px; } - .create-station-header { - padding-top: 20px; - margin-bottom: 30px; + .home-action-button { + padding: 15px 25px; + font-size: 14px; } - .create-station-header h1 { - font-size: 1.8rem; + .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; - } - - .join-station-header h1 { - font-size: 1.8rem; - } - - .join-station-content { - padding: 30px 20px; - border-radius: 20px; - margin: 10px; - } - - .verify-method-section h2 { - font-size: 1.2rem; - } - - .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 { - flex-direction: column; - align-items: stretch; - gap: 15px; - } - - .add-song-btn { - align-self: center; - min-width: 120px; - } - - .song-item { - padding: 12px 15px; - } - - .songs-list { - max-height: 300px; - } - - .modal-header { - padding: 20px 25px 15px; - } - - .modal-body { - padding: 25px; + .add-song-modal-content { + max-width: 100%; + max-height: 90vh; } } @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 16c8688..8fb2603 100644 --- a/frontend/src/screens/CreateStation.jsx +++ b/frontend/src/screens/CreateStation.jsx @@ -9,50 +9,78 @@ function CreateStation() { }; return ( -
-
-

Create a Station on Serena

-
- -
-
-

How should people be able to join your station?

- -
- -
- - {joinMethod === 'password' && ( -
- - setPassword(e.target.value)} - placeholder="Enter station password" - /> +
+
+ {/* Left Section - Vinyl Animation */} +
+
+
+
+
- )} + + {/* Animated Music Notes */} +
+
+
+
+
+
- -
+ {/* Right Section - Create Station Form */} +
+
+
+

Create a Station on Serena

+
+ +
+
+

How should people be able to join your station?

+ +
+ +
+ + {joinMethod === 'password' && ( +
+ + setPassword(e.target.value)} + placeholder="Enter station password" + /> +
+ )} +
+ + +
+
+
+
); } diff --git a/frontend/src/screens/Home.jsx b/frontend/src/screens/Home.jsx index 414e9d9..5863cac 100644 --- a/frontend/src/screens/Home.jsx +++ b/frontend/src/screens/Home.jsx @@ -14,24 +14,52 @@ function Home() { return (
-
-

Radio Station Hub

-

Create or join a radio station to share music with friends

- -
- - - +
+ {/* Left Section - Logo/Animation */} +
+
+
+
+
+
+ + {/* Animated Music Notes */} +
+
+
+
+
+
+
+ + {/* Right Section - Content */} +
+
+

Serena Hub

+

Create or join a radio station to share music with friends

+ +
+ + + +
+
diff --git a/frontend/src/screens/JoinStation.jsx b/frontend/src/screens/JoinStation.jsx index 3bb3302..0dcd834 100644 --- a/frontend/src/screens/JoinStation.jsx +++ b/frontend/src/screens/JoinStation.jsx @@ -13,50 +13,78 @@ function JoinStation() { }; return ( -
-
-

Join a Station on Serena

-
- -
-
-

How would you like to verify access?

- -
- -
- - {verifyMethod === 'password' && ( -
- - setPassword(e.target.value)} - placeholder="Enter station password" - /> +
+
+ {/* Left Section - Vinyl Animation */} +
+
+
+
+
- )} + + {/* Animated Music Notes */} +
+
+
+
+
+
- -
+ {/* Right Section - Join Station Form */} +
+
+
+

Join a Station on Serena

+
+ +
+
+

How would you like to verify access?

+ +
+ +
+ + {verifyMethod === 'password' && ( +
+ + setPassword(e.target.value)} + placeholder="Enter station password" + /> +
+ )} +
+ + +
+
+
+
); } diff --git a/frontend/src/screens/StationPage.jsx b/frontend/src/screens/StationPage.jsx index 77d5058..08a4287 100644 --- a/frontend/src/screens/StationPage.jsx +++ b/frontend/src/screens/StationPage.jsx @@ -1,30 +1,27 @@ import React, { useState } from 'react'; import AddSongModal from './AddSongModal'; -import LoginButton from '../components/LoginButton'; function StationPage() { const [isModalOpen, setIsModalOpen] = useState(false); const [currentSong, setCurrentSong] = useState({ title: "No song playing", artist: "Add songs to get started", - isPlaying: false + isPlaying: false, + progress: 0, + duration: 180 // 3 minutes in seconds + }); + + const [nextSong] = useState({ + title: "No song queued", + artist: "No Artist Queued" }); - // 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); }; @@ -34,34 +31,38 @@ function StationPage() { }; return ( -
-
- {[...Array(20)].map((_, i) => ( -
- ))} -
- -
-
-

Serena Station

-

Collaborative Music Experience

- -
- -
-
-

{currentSong.title}

-

{currentSong.artist}

-
- -
- +
+ {/* Main Layout */} +
+ {/* Left Section */} +
+ {/* Vinyl Record */} +
+
+
+
+
-
+ + {/* Next Song Info */} +
+

Next song:

+

{nextSong.title}

+

{nextSong.artist}

+
+ + {/* Bottom Play Icon */} +
+ - -
-
-
-

Song Queue

- -
- -
- {recommendedSongs.length === 0 ? ( -
-

No songs in queue yet. Add some songs to get started!

-
- ) : ( - recommendedSongs.map(song => ( -
-
-

{song.title}

-

{song.artist}

-
- {song.duration} + {/* Right Section - Recommendations */} +
+
+
+

Song Suggestions

+ +
+ +
+ {recommendedSongs.length === 0 ? ( +
+

No songs suggested yet

+

Add songs to get started!

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

{song.title}

+

{song.artist}

+

{song.album}

+
+ {song.duration} +
+ )) + )} +
+ {/* Progress Bar */} +
+
+
+
+
+ {isModalOpen && }
); diff --git a/frontend/src/utils/spotifyAuth.js b/frontend/src/utils/spotifyAuth.js index 67fc94a..342897c 100644 --- a/frontend/src/utils/spotifyAuth.js +++ b/frontend/src/utils/spotifyAuth.js @@ -38,3 +38,39 @@ export const removeAccessToken = () => { export const isLoggedIn = () => { return !!getAccessToken(); }; + +export const searchSpotifyTracks = async (query) => { + const token = getAccessToken(); + if (!token) { + throw new Error('No access token available'); + } + + const response = await fetch( + `https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=track&limit=20`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + + if (!response.ok) { + if (response.status === 401) { + removeAccessToken(); + throw new Error('Token expired'); + } + throw new Error('Search failed'); + } + + const data = await response.json(); + return data.tracks.items.map((track) => ({ + id: track.id, + title: track.name, + artist: track.artists.map((artist) => artist.name).join(', '), + album: track.album.name, + coverUrl: track.album.images[0]?.url || '', + duration: track.duration_ms, + previewUrl: track.preview_url, + spotifyUrl: track.external_urls.spotify, + })); +}; From 7e9b155fa1a7cc1cf4786b16a3c1d01910447d14 Mon Sep 17 00:00:00 2001 From: Tobias Date: Sat, 2 Aug 2025 02:07:47 +0200 Subject: [PATCH 2/8] fix --- frontend/src/screens/CreateStation.jsx | 3 +++ frontend/src/screens/JoinStation.jsx | 3 +++ 2 files changed, 6 insertions(+) diff --git a/frontend/src/screens/CreateStation.jsx b/frontend/src/screens/CreateStation.jsx index 5a75fa4..c7c56f6 100644 --- a/frontend/src/screens/CreateStation.jsx +++ b/frontend/src/screens/CreateStation.jsx @@ -51,6 +51,9 @@ function CreateStation() {
+
+
+
); } diff --git a/frontend/src/screens/JoinStation.jsx b/frontend/src/screens/JoinStation.jsx index 3444137..2961198 100644 --- a/frontend/src/screens/JoinStation.jsx +++ b/frontend/src/screens/JoinStation.jsx @@ -53,6 +53,9 @@ function JoinStation() { ); })} +
+
+
); } From d9b227fb8559f7d1e78de148ffca40985d3353b8 Mon Sep 17 00:00:00 2001 From: Noah Date: Sat, 2 Aug 2025 06:39:33 +0200 Subject: [PATCH 3/8] I don't remember please just KIIIIIIIIIIIIIIIIIIIIIIILL me --- frontend/src/screens/StationPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/screens/StationPage.jsx b/frontend/src/screens/StationPage.jsx index 35ea7e9..c7698a0 100644 --- a/frontend/src/screens/StationPage.jsx +++ b/frontend/src/screens/StationPage.jsx @@ -29,7 +29,7 @@ function StationPage() {