139 lines
5.9 KiB
PHP
139 lines
5.9 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
|
|
if (!isset($_GET['code'])) {
|
|
header("Location: index.php");
|
|
exit();
|
|
}
|
|
|
|
$session_code = $_GET['code'];
|
|
$session_id = null;
|
|
$queue_items = [];
|
|
|
|
try {
|
|
$pdo = db();
|
|
$stmt = $pdo->prepare("SELECT id, status FROM sessions WHERE session_code = ?");
|
|
$stmt->execute([$session_code]);
|
|
$session = $stmt->fetch();
|
|
|
|
if (!$session || $session['status'] !== 'active') {
|
|
header("Location: index.php?error=invalid_session");
|
|
exit();
|
|
}
|
|
$session_id = $session['id'];
|
|
|
|
$stmt = $pdo->prepare("SELECT * FROM queue_items WHERE session_id = ? ORDER BY votes DESC, created_at ASC");
|
|
$stmt->execute([$session_id]);
|
|
$queue_items = $stmt->fetchAll();
|
|
|
|
} catch (PDOException $e) {
|
|
// In a real app, you'd log this error, not show it to the user.
|
|
die("Database error. Please check configuration.");
|
|
}
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SyncUp Queue</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="index.php">SyncUp</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-4 pb-5">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="mb-0">Queue</h1>
|
|
</div>
|
|
|
|
<div id="queue-list">
|
|
<?php if (empty($queue_items)): ?>
|
|
<div id="empty-queue-message" class="text-center p-5 rounded" style="background-color: var(--surface-color);">
|
|
<h2>The Queue is Empty</h2>
|
|
<p class="text-secondary">Be the first to add a song and get the party started!</p>
|
|
</div>
|
|
<?php else: ?>
|
|
<?php foreach ($queue_items as $item): ?>
|
|
<div class="queue-item">
|
|
<img src="<?php echo htmlspecialchars($item['album_art_url'] ?: 'https://placehold.co/64x64/1E1E1E/FFFFFF?text=S'); ?>" alt="Album Art">
|
|
<div class="track-info">
|
|
<div class="track-title"><?php echo htmlspecialchars($item['track_title']); ?></div>
|
|
<div class="artist-name"><?php echo htmlspecialchars($item['artist_name']); ?></div>
|
|
</div>
|
|
<button class="vote-button">
|
|
<i class="bi bi-caret-up-fill"></i>
|
|
<span><?php echo $item['votes']; ?></span>
|
|
</button>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Action Button -->
|
|
<button class="fab" id="add-song-fab" aria-label="Add song">
|
|
<i class="bi bi-plus-lg"></i>
|
|
</button>
|
|
|
|
<!-- Add Song Modal -->
|
|
<div class="modal-overlay" id="add-song-modal-overlay">
|
|
<div class="modal-container" id="add-song-modal-container">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Add a Song</h5>
|
|
<button type="button" class="btn-close-modal" id="close-modal-btn" aria-label="Close">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="search-bar-container">
|
|
<i class="bi bi-search"></i>
|
|
<input type="text" id="song-search-input" class="form-control" placeholder="Search for a song or artist...">
|
|
</div>
|
|
<div class="source-toggles">
|
|
<button class="btn btn-source active" data-source="spotify">
|
|
<i class="bi bi-spotify"></i> Spotify
|
|
</button>
|
|
<button class="btn btn-source" data-source="youtube">
|
|
<i class="bi bi-youtube"></i> YouTube
|
|
</button>
|
|
</div>
|
|
<div id="search-results" class="mt-3">
|
|
<!-- Hardcoded placeholder results -->
|
|
<div class="search-result-item" data-title="Blinding Lights" data-artist="The Weeknd" data-album-art="https://placehold.co/64x64/1ed760/000000?text=BL" data-source="spotify">
|
|
<img src="https://placehold.co/64x64/1ed760/000000?text=BL" alt="Album Art">
|
|
<div class="track-info">
|
|
<div class="track-title">Blinding Lights</div>
|
|
<div class="artist-name">The Weeknd</div>
|
|
</div>
|
|
<i class="bi bi-spotify source-icon"></i>
|
|
</div>
|
|
<div class="search-result-item" data-title="As It Was" data-artist="Harry Styles" data-album-art="https://placehold.co/64x64/ff6347/ffffff?text=AIW" data-source="youtube">
|
|
<img src="https://placehold.co/64x64/ff6347/ffffff?text=AIW" alt="Album Art">
|
|
<div class="track-info">
|
|
<div class="track-title">As It Was</div>
|
|
<div class="artist-name">Harry Styles</div>
|
|
</div>
|
|
<i class="bi bi-youtube source-icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Pass PHP variables to JavaScript
|
|
const currentSessionCode = "<?php echo htmlspecialchars($session_code, ENT_QUOTES, 'UTF-8'); ?>";
|
|
</script>
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|