 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/-3defd8f0/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Player Visibility Test - SoundStudioPro</title>
<style>
body {
background: #0a0a0a;
color: white;
font-family: Arial, sans-serif;
padding: 2rem;
margin-bottom: 100px; /* Space for global player */
}
.test-section {
background: rgba(255,255,255,0.1);
padding: 2rem;
border-radius: 8px;
margin: 2rem 0;
}
.test-btn {
padding: 1rem 2rem;
margin: 0.5rem;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
.status {
padding: 1rem;
margin: 1rem 0;
border-radius: 8px;
font-family: monospace;
}
.status.success { background: rgba(34, 197, 94, 0.2); border: 1px solid #22c55e; }
.status.error { background: rgba(245, 101, 101, 0.2); border: 1px solid #f56565; }
.status.info { background: rgba(59, 130, 246, 0.2); border: 1px solid #3b82f6; }
</style>
</head>
<body>
<h1>🎵 Global Player Visibility Test</h1>
<div class="test-section">
<h2>🔍 Player Visibility Check</h2>
<p>You should see the global player at the bottom of this page. If you don't see it, there's still an issue.</p>
<button onclick="checkPlayerVisibility()" class="test-btn">Check Player Status</button>
<button onclick="forceShowPlayer()" class="test-btn">Force Show Player</button>
<div id="visibilityStatus" class="status info">Click to check player visibility...</div>
</div>
<div class="test-section">
<h2>🎵 Player Functionality Test</h2>
<button onclick="testPlayTrack()" class="test-btn">Test Play Track</button>
<button onclick="testPlayerControls()" class="test-btn">Test Player Controls</button>
<div id="functionalityStatus" class="status info">Click to test player functionality...</div>
</div>
<div class="test-section">
<h2>🔧 Debug Information</h2>
<div id="debugInfo" class="status info">Loading debug information...</div>
</div>
<script>
function updateStatus(elementId, message, type = 'info') {
const element = document.getElementById(elementId);
if (element) {
element.textContent = message;
element.className = `status ${type}`;
}
}
function checkPlayerVisibility() {
const player = document.getElementById('enhancedGlobalPlayer');
if (player) {
const computedStyle = window.getComputedStyle(player);
const isVisible = computedStyle.display !== 'none' && computedStyle.visibility !== 'hidden';
if (isVisible) {
updateStatus('visibilityStatus', '✅ Global player is visible!', 'success');
} else {
updateStatus('visibilityStatus', '❌ Global player is hidden (display: ' + computedStyle.display + ')', 'error');
}
console.log('🎵 Player visibility check:', {
element: !!player,
display: computedStyle.display,
visibility: computedStyle.visibility,
isVisible: isVisible
});
} else {
updateStatus('visibilityStatus', '❌ Global player element not found!', 'error');
}
}
function forceShowPlayer() {
const player = document.getElementById('enhancedGlobalPlayer');
if (player) {
player.style.display = 'flex';
player.style.visibility = 'visible';
updateStatus('visibilityStatus', '✅ Player visibility forced to show', 'success');
console.log('🎵 Player visibility forced to show');
} else {
updateStatus('visibilityStatus', '❌ Cannot force show - player element not found', 'error');
}
}
function testPlayTrack() {
if (window.enhancedGlobalPlayer && typeof window.enhancedGlobalPlayer.playTrack === 'function') {
try {
window.enhancedGlobalPlayer.playTrack(
'https://apiboxfiles.erweima.ai/MjE4OGJiZWMtNDRkMi00OTYwLTkyZGYtNWExMjQ1OTlkMGQx.mp3',
'Test Track for Visibility',
'Test Artist',
120
);
updateStatus('functionalityStatus', '✅ PlayTrack function working!', 'success');
} catch (error) {
updateStatus('functionalityStatus', '❌ PlayTrack failed: ' + error.message, 'error');
}
} else {
updateStatus('functionalityStatus', '❌ PlayTrack function not available', 'error');
}
}
function testPlayerControls() {
const player = document.getElementById('enhancedGlobalPlayer');
if (player) {
const playBtn = player.querySelector('#playerPlayBtn');
const volumeSlider = player.querySelector('#playerVolumeSlider');
if (playBtn && volumeSlider) {
updateStatus('functionalityStatus', '✅ Player controls found and working', 'success');
} else {
updateStatus('functionalityStatus', '❌ Some player controls missing', 'error');
}
} else {
updateStatus('functionalityStatus', '❌ Player element not found for control test', 'error');
}
}
function updateDebugInfo() {
const debugInfo = {
'Global Player Element': !!document.getElementById('enhancedGlobalPlayer'),
'Enhanced Global Player Object': !!window.enhancedGlobalPlayer,
'Global Player Ready': !!window.globalPlayerReady,
'Player Display Style': document.getElementById('enhancedGlobalPlayer')?.style.display || 'N/A',
'Player Computed Display': window.getComputedStyle(document.getElementById('enhancedGlobalPlayer') || {}).display || 'N/A',
'Page Bottom Padding': document.body.style.paddingBottom || 'N/A'
};
const debugDiv = document.getElementById('debugInfo');
debugDiv.innerHTML = Object.entries(debugInfo)
.map(([key, value]) => `${key}: ${value}`)
.join('\n');
}
// Initialize debug info
document.addEventListener('DOMContentLoaded', () => {
updateDebugInfo();
// Auto-check player visibility after page load
setTimeout(checkPlayerVisibility, 1000);
});
// Update debug info periodically
setInterval(updateDebugInfo, 3000);
</script>
</body>
</html>