 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/.cursor-server/data/User/History/-6f045dc0/ |
<?php
require_once 'config/database.php';
// Get artist ID from URL
$artist_id = isset($_GET['id']) ? (int)$_GET['id'] : 5;
// Get artist info
$pdo = getDBConnection();
$artist = null;
$tracks = [];
if ($pdo) {
// Get artist
$stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
$stmt->execute([$artist_id]);
$artist = $stmt->fetch();
if ($artist) {
// Get tracks
$stmt = $pdo->prepare("SELECT * FROM music_tracks WHERE user_id = ? AND status = 'complete' ORDER BY created_at DESC LIMIT 3");
$stmt->execute([$artist_id]);
$tracks = $stmt->fetchAll();
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Debug Preview Buttons</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background: #1a1a1a; color: white; }
.debug-section { background: #333; padding: 20px; margin: 20px 0; border-radius: 10px; }
.track-card { background: #444; padding: 15px; margin: 10px 0; border-radius: 8px; }
.preview-btn { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin: 5px; }
.preview-btn:hover { background: #5a67d8; }
.test-btn { background: #48bb78; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin: 5px; }
.error { color: #e53e3e; }
.success { color: #48bb78; }
.info { color: #4299e1; }
</style>
</head>
<body>
<h1>Debug Preview Buttons - Artist ID <?= $artist_id ?></h1>
<div class="debug-section">
<h2>Artist Information</h2>
<?php if ($artist): ?>
<p><strong>Name:</strong> <?= htmlspecialchars($artist['name']) ?></p>
<p><strong>Email:</strong> <?= htmlspecialchars($artist['email']) ?></p>
<p><strong>ID:</strong> <?= $artist['id'] ?></p>
<?php else: ?>
<p class="error">Artist not found!</p>
<?php endif; ?>
</div>
<div class="debug-section">
<h2>Tracks (<?= count($tracks) ?>)</h2>
<?php if (!empty($tracks)): ?>
<?php foreach ($tracks as $track): ?>
<div class="track-card">
<h3><?= htmlspecialchars($track['title']) ?></h3>
<p><strong>ID:</strong> <?= $track['id'] ?></p>
<p><strong>Status:</strong> <?= $track['status'] ?></p>
<p><strong>Audio URL:</strong> <?= htmlspecialchars($track['audio_url']) ?></p>
<button class="preview-btn play-track-btn"
data-audio-url="<?= htmlspecialchars($track['audio_url']) ?>"
data-title="<?= htmlspecialchars($track['title']) ?>"
data-artist="<?= htmlspecialchars($artist['name']) ?>"
data-track-id="<?= $track['id'] ?>">
<i class="fas fa-play"></i> Preview
</button>
<button class="test-btn" onclick="testDirectPlay('<?= htmlspecialchars($track['audio_url']) ?>', '<?= htmlspecialchars($track['title']) ?>', '<?= htmlspecialchars($artist['name']) ?>')">
Test Direct Play
</button>
</div>
<?php endforeach; ?>
<?php else: ?>
<p class="error">No tracks found!</p>
<?php endif; ?>
</div>
<div class="debug-section">
<h2>Debug Tests</h2>
<button class="test-btn" onclick="testGlobalPlayer()">Test Global Player</button>
<button class="test-btn" onclick="testPreviewButtons()">Test Preview Buttons</button>
<button class="test-btn" onclick="testEventListeners()">Test Event Listeners</button>
<div id="debug-output" style="margin-top: 10px; padding: 10px; background: #555; border-radius: 5px; min-height: 200px;"></div>
</div>
<script>
function log(message, type = 'info') {
const debugOutput = document.getElementById('debug-output');
const color = type === 'error' ? '#e53e3e' : type === 'success' ? '#48bb78' : '#4299e1';
const timestamp = new Date().toLocaleTimeString();
debugOutput.innerHTML += `<p style="color: ${color}">[${timestamp}] ${message}</p>`;
debugOutput.scrollTop = debugOutput.scrollHeight;
}
function testGlobalPlayer() {
log('=== Testing Global Player ===');
log(`window.globalPlayer exists: ${typeof window.globalPlayer !== 'undefined'}`);
log(`window.playTrackWithGlobalPlayer exists: ${typeof window.playTrackWithGlobalPlayer === 'function'}`);
if (typeof window.globalPlayer !== 'undefined') {
log(`globalPlayer.playTrack exists: ${typeof window.globalPlayer.playTrack === 'function'}`);
log(`globalPlayer.init exists: ${typeof window.globalPlayer.init === 'function'}`);
}
}
function testPreviewButtons() {
log('=== Testing Preview Buttons ===');
const buttons = document.querySelectorAll('.preview-btn.play-track-btn');
log(`Found ${buttons.length} preview buttons`);
buttons.forEach((button, index) => {
const audioUrl = button.getAttribute('data-audio-url');
const title = button.getAttribute('data-title');
const artist = button.getAttribute('data-artist');
const trackId = button.getAttribute('data-track-id');
log(`Button ${index + 1}: ${title} by ${artist} (ID: ${trackId})`);
log(`Audio URL: ${audioUrl}`);
});
}
function testEventListeners() {
log('=== Testing Event Listeners ===');
const buttons = document.querySelectorAll('.preview-btn.play-track-btn');
log(`Found ${buttons.length} preview buttons`);
buttons.forEach((button, index) => {
// Test if button is clickable
log(`Testing button ${index + 1} clickability...`);
try {
button.click();
log(`Button ${index + 1} click event fired`, 'success');
} catch (error) {
log(`Button ${index + 1} click error: ${error.message}`, 'error');
}
});
}
function testDirectPlay(audioUrl, title, artist) {
log(`=== Testing Direct Play ===`);
log(`Title: ${title}`);
log(`Artist: ${artist}`);
log(`Audio URL: ${audioUrl}`);
if (typeof window.playTrackWithGlobalPlayer === 'function') {
try {
log('Calling window.playTrackWithGlobalPlayer...');
const result = window.playTrackWithGlobalPlayer(audioUrl, title, artist);
log(`Result: ${result}`, result ? 'success' : 'error');
} catch (error) {
log(`Error: ${error.message}`, 'error');
}
} else {
log('Global player function not available', 'error');
}
}
// Setup event listeners for preview buttons
document.addEventListener('DOMContentLoaded', function() {
log('=== DOM Loaded - Setting up event listeners ===');
const previewButtons = document.querySelectorAll('.preview-btn.play-track-btn');
log(`Found ${previewButtons.length} preview buttons`);
previewButtons.forEach((button, index) => {
log(`Setting up preview button ${index + 1}`);
button.addEventListener('click', function(e) {
log(`Preview button ${index + 1} clicked!`);
e.preventDefault();
e.stopPropagation();
const audioUrl = this.getAttribute('data-audio-url');
const title = this.getAttribute('data-title');
const artist = this.getAttribute('data-artist');
const trackId = this.getAttribute('data-track-id');
log(`Playing: ${title} by ${artist} (ID: ${trackId})`);
log(`Audio URL: ${audioUrl}`);
if (typeof window.playTrackWithGlobalPlayer === 'function') {
try {
const result = window.playTrackWithGlobalPlayer(audioUrl, title, artist);
log(`Play result: ${result}`, result ? 'success' : 'error');
} catch (error) {
log(`Play error: ${error.message}`, 'error');
}
} else {
log('Global player function not available', 'error');
}
});
});
});
// Auto-run tests on load
window.addEventListener('load', function() {
log('=== Page Loaded - Auto-running tests ===');
setTimeout(testGlobalPlayer, 1000);
setTimeout(testPreviewButtons, 1500);
});
</script>
<!-- Include global player -->
<?php include 'includes/global_player.php'; ?>
</body>
</html>