 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/-4256bbac/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library Player Test - Single Global Player</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f5f5f5;
}
.test-container {
background: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.status {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
.success { background: #d4edda; color: #155724; }
.error { background: #f8d7da; color: #721c24; }
.warning { background: #fff3cd; color: #856404; }
.info { background: #d1ecf1; color: #0c5460; }
.test-button {
background: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
.test-button:hover {
background: #0056b3;
}
.nav-link {
display: inline-block;
background: #28a745;
color: white;
text-decoration: none;
padding: 10px 20px;
margin: 5px;
border-radius: 4px;
}
.nav-link:hover {
background: #218838;
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<h1>🎵 Library Player Test - Single Global Player</h1>
<div class="test-container">
<h2>Test Instructions</h2>
<ol>
<li>Click the link below to go to the library page</li>
<li>Check if there's only ONE global player at the bottom</li>
<li>Test that the global player works correctly</li>
<li>Verify no duplicate players or errors</li>
</ol>
</div>
<div class="test-container">
<h2>Navigation</h2>
<a href="/library_new.php" class="nav-link">📚 Go to Library Page</a>
<a href="/feed.php" class="nav-link">📰 Go to Feed Page</a>
<a href="/dashboard.php" class="nav-link">📊 Go to Dashboard</a>
</div>
<div class="test-container">
<h2>Player Count Check</h2>
<p>This will check how many global players exist on the current page:</p>
<button class="test-button" onclick="checkPlayerCount()">🔍 Check Player Count</button>
<div id="playerCount" class="status info">Click button to check...</div>
</div>
<div class="test-container">
<h2>Global Player Status</h2>
<button class="test-button" onclick="checkGlobalPlayer()">🎵 Check Global Player</button>
<div id="globalPlayerStatus" class="status info">Click button to check...</div>
</div>
<div class="test-container">
<h2>Expected Results</h2>
<ul>
<li>✅ Only ONE global player should exist</li>
<li>✅ Global player should be at the bottom of the page</li>
<li>✅ No JavaScript errors in console</li>
<li>✅ Play buttons should work correctly</li>
<li>✅ Navigation between pages should work smoothly</li>
</ul>
</div>
<script>
function checkPlayerCount() {
const statusDiv = document.getElementById('playerCount');
// Count global player elements
const globalPlayers = document.querySelectorAll('[id*="global"], [class*="global-player"], [class*="globalPlayer"]');
const audioElements = document.querySelectorAll('audio');
const playerElements = document.querySelectorAll('[id*="player"], [class*="player"]');
let info = '';
info += `🎵 Global player elements found: ${globalPlayers.length}<br>`;
info += `🎵 Audio elements found: ${audioElements.length}<br>`;
info += `🎵 Player elements found: ${playerElements.length}<br>`;
if (globalPlayers.length === 1) {
info += '✅ Perfect! Only one global player found<br>';
statusDiv.className = 'status success';
} else if (globalPlayers.length === 0) {
info += '⚠️ No global player found<br>';
statusDiv.className = 'status warning';
} else {
info += '❌ Multiple global players found - this is a problem!<br>';
statusDiv.className = 'status error';
}
// Check for window.globalPlayer
if (typeof window.globalPlayer !== 'undefined') {
info += '✅ window.globalPlayer object exists<br>';
} else {
info += '❌ window.globalPlayer object not found<br>';
}
statusDiv.innerHTML = info;
}
function checkGlobalPlayer() {
const statusDiv = document.getElementById('globalPlayerStatus');
if (typeof window.globalPlayer === 'undefined') {
statusDiv.innerHTML = '❌ Global player not found';
statusDiv.className = 'status error';
return;
}
let info = '✅ Global player found<br>';
info += `🎵 Initialized: ${window.globalPlayer.initialized}<br>`;
info += `🎵 Is playing: ${window.globalPlayer.isPlaying}<br>`;
info += `🎵 Current track index: ${window.globalPlayer.currentTrackIndex}<br>`;
if (window.globalPlayer.audio) {
info += `🎵 Audio src: ${window.globalPlayer.audio.src}<br>`;
info += `🎵 Audio paused: ${window.globalPlayer.audio.paused}<br>`;
} else {
info += '⚠️ No audio element<br>';
}
if (window.globalPlayer.playlist && window.globalPlayer.playlist.length > 0) {
info += `🎵 Playlist has ${window.globalPlayer.playlist.length} tracks<br>`;
} else {
info += '⚠️ No playlist<br>';
}
statusDiv.innerHTML = info;
statusDiv.className = 'status success';
}
// Check on page load
window.addEventListener('load', function() {
console.log('🎵 Library player test page loaded');
setTimeout(checkPlayerCount, 1000);
});
// Update checks every 3 seconds
setInterval(checkPlayerCount, 3000);
</script>
</body>
</html>