 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/-4ab030f5/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play Button Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: #0a0a0a;
color: white;
}
.test-container {
max-width: 800px;
margin: 0 auto;
}
.test-section {
background: #1a1a1a;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
border: 1px solid #333;
}
.test-button {
background: #667eea;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 4px;
cursor: pointer;
}
.test-button:hover {
background: #5a67d8;
}
.test-button.emergency {
background: #ff6b6b;
}
.test-button.success {
background: #51cf66;
}
.log {
background: #2a2a2a;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
font-family: monospace;
white-space: pre-wrap;
max-height: 300px;
overflow-y: auto;
}
.play-button-test {
background: #333;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
text-align: center;
}
.play-button-test button {
font-size: 2rem;
padding: 20px 40px;
margin: 10px;
border-radius: 50%;
width: 80px;
height: 80px;
border: none;
cursor: pointer;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.play-button-test button:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="test-container">
<h1>🎵 Play Button Test Page</h1>
<div class="test-section">
<h2>🔧 Play Button Tests</h2>
<div class="play-button-test">
<h3>Test the Global Player Play Button:</h3>
<button onclick="testGlobalPlayButton()">
<i class="fas fa-play"></i>
</button>
<button onclick="forcePlayButton()">
<i class="fas fa-bolt"></i>
</button>
<button onclick="emergencyPlay()" class="emergency">
<i class="fas fa-exclamation-triangle"></i>
</button>
</div>
</div>
<div class="test-section">
<h2>🎛️ Manual Controls</h2>
<button class="test-button" onclick="testGlobalPlayer()">Test Global Player</button>
<button class="test-button" onclick="loadStephaneTracks()">Load Stephane Tracks</button>
<button class="test-button" onclick="checkPlayButton()">Check Play Button</button>
<button class="test-button" onclick="testPlaylistButton()">Test Playlist Button</button>
<button class="test-button success" onclick="forcePlayCurrentTrack()">Force Play Current Track</button>
</div>
<div class="test-section">
<h2>📝 Console Logs</h2>
<button class="test-button" onclick="clearLogs()">Clear Logs</button>
<div id="consoleLogs" class="log"></div>
</div>
</div>
<!-- Include the global player -->
<?php include 'includes/global_player.php'; ?>
<script>
// Override console.log to capture logs
const originalLog = console.log;
const originalError = console.error;
const originalWarn = console.warn;
function addLog(message, type = 'log') {
const logsDiv = document.getElementById('consoleLogs');
const timestamp = new Date().toLocaleTimeString();
const logEntry = document.createElement('div');
logEntry.className = type;
logEntry.textContent = `[${timestamp}] ${message}`;
logsDiv.appendChild(logEntry);
logsDiv.scrollTop = logsDiv.scrollHeight;
}
console.log = function(...args) {
originalLog.apply(console, args);
addLog(args.join(' '), 'success');
};
console.error = function(...args) {
originalError.apply(console, args);
addLog(args.join(' '), 'error');
};
console.warn = function(...args) {
originalWarn.apply(console, args);
addLog(args.join(' '), 'warning');
};
function testGlobalPlayButton() {
console.log('🎵 Testing global play button...');
// Find the actual global play button
const globalPlayBtn = document.getElementById('globalPlayBtn');
if (globalPlayBtn) {
console.log('🎵 Found global play button, clicking it...');
globalPlayBtn.click();
} else {
console.error('🎵 Global play button not found!');
}
}
function checkPlayButton() {
console.log('🎵 Checking play button status...');
const playBtn = document.getElementById('globalPlayBtn');
if (playBtn) {
console.log('🎵 Play button found');
console.log('🎵 Play button HTML:', playBtn.outerHTML);
console.log('🎵 Play button visible:', playBtn.style.display !== 'none');
console.log('🎵 Play button disabled:', playBtn.disabled);
// Check if it has event listeners
const icon = playBtn.querySelector('#globalPlayIcon');
if (icon) {
console.log('🎵 Play icon found:', icon.className);
} else {
console.error('🎵 Play icon not found!');
}
} else {
console.error('🎵 Play button not found!');
}
}
function loadStephaneTracks() {
console.log('🎵 Loading Stephane tracks...');
if (window.globalPlayer && window.globalPlayer.testStephaneTracks) {
window.globalPlayer.testStephaneTracks();
} else {
console.error('🎵 testStephaneTracks function not available!');
}
}
function clearLogs() {
document.getElementById('consoleLogs').innerHTML = '';
}
// Auto-check status when page loads
document.addEventListener('DOMContentLoaded', () => {
console.log('🎵 Play button test page loaded');
setTimeout(checkPlayButton, 1000);
setTimeout(() => {
console.log('🎵 Testing global player status...');
if (typeof window.globalPlayer !== 'undefined') {
console.log('🎵 Global player available');
console.log('🎵 Global player initialized:', window.globalPlayer.initialized);
console.log('🎵 Global player audio:', !!window.globalPlayer.audio);
console.log('🎵 Global player playlist length:', window.globalPlayer.playlist.length);
} else {
console.error('🎵 Global player not available!');
}
}, 2000);
});
</script>
</body>
</html>