 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/3c9b6b63/ |
<?php
session_start();
include 'includes/header.php';
include 'includes/global_player.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Player Simple Test</title>
<style>
body {
font-family: 'Inter', sans-serif;
background: #0a0a0a;
color: white;
margin: 0;
padding: 20px;
}
.test-container {
max-width: 800px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.test-button {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin: 0.5rem;
display: block;
width: 100%;
}
.test-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.status {
margin: 1rem 0;
padding: 1rem;
border-radius: 8px;
font-family: monospace;
}
.status-success {
background: rgba(72, 187, 120, 0.1);
border: 1px solid rgba(72, 187, 120, 0.3);
color: #48bb78;
}
.status-error {
background: rgba(245, 101, 101, 0.1);
border: 1px solid rgba(245, 101, 101, 0.3);
color: #f56565;
}
.status-info {
background: rgba(102, 126, 234, 0.1);
border: 1px solid rgba(102, 126, 234, 0.3);
color: #667eea;
}
.debug-info {
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
font-family: monospace;
font-size: 0.9rem;
max-height: 300px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="test-container">
<h1>🎵 Global Player Simple Test</h1>
<p>This page tests if the global player is working correctly and why tracks might not be showing in the bottom bar.</p>
<div id="status"></div>
<button class="test-button" onclick="testGlobalPlayerExists()">
Test 1: Check if Global Player Exists
</button>
<button class="test-button" onclick="testPlayTrackWithGlobalPlayer()">
Test 2: Test playTrackWithGlobalPlayer Function
</button>
<button class="test-button" onclick="testDirectGlobalPlayer()">
Test 3: Test Direct Global Player
</button>
<button class="test-button" onclick="testUpdateTrackInfo()">
Test 4: Test updateTrackInfo Method
</button>
<button class="test-button" onclick="testShowPlayer()">
Test 5: Test showPlayer Method
</button>
<button class="test-button" onclick="testUIElements()">
Test 6: Check UI Elements
</button>
<button class="test-button" onclick="testFromLibrary()">
Test 7: Simulate Library Play Button
</button>
<div class="debug-info" id="debugLog">
<div>🎵 Debug log will appear here...</div>
</div>
</div>
<script>
function log(message, type = 'info') {
const debugLog = document.getElementById('debugLog');
const logEntry = document.createElement('div');
logEntry.style.color = type === 'success' ? '#48bb78' : type === 'error' ? '#f56565' : '#667eea';
logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
debugLog.appendChild(logEntry);
debugLog.scrollTop = debugLog.scrollHeight;
console.log(`🎵 ${message}`);
}
function updateStatus(message, type = 'info') {
const statusDiv = document.getElementById('status');
statusDiv.innerHTML = `<div class="status status-${type}">${message}</div>`;
}
function testGlobalPlayerExists() {
log('Testing if global player exists...');
if (typeof window.globalPlayer !== 'undefined') {
log('✅ Global player object exists', 'success');
updateStatus('✅ Global player object exists', 'success');
if (window.globalPlayer.initialized) {
log('✅ Global player is initialized', 'success');
} else {
log('⚠️ Global player is NOT initialized', 'error');
}
if (typeof window.globalPlayer.playTrack === 'function') {
log('✅ playTrack method exists', 'success');
} else {
log('❌ playTrack method missing', 'error');
}
if (typeof window.globalPlayer.updateTrackInfo === 'function') {
log('✅ updateTrackInfo method exists', 'success');
} else {
log('❌ updateTrackInfo method missing', 'error');
}
if (typeof window.globalPlayer.showPlayer === 'function') {
log('✅ showPlayer method exists', 'success');
} else {
log('❌ showPlayer method missing', 'error');
}
} else {
log('❌ Global player object does not exist', 'error');
updateStatus('❌ Global player object does not exist', 'error');
}
if (typeof window.playTrackWithGlobalPlayer === 'function') {
log('✅ playTrackWithGlobalPlayer function exists', 'success');
} else {
log('❌ playTrackWithGlobalPlayer function missing', 'error');
}
}
async function testPlayTrackWithGlobalPlayer() {
log('Testing playTrackWithGlobalPlayer function...');
if (typeof window.playTrackWithGlobalPlayer !== 'function') {
log('❌ playTrackWithGlobalPlayer function not available', 'error');
return;
}
try {
const testAudioUrl = 'https://apiboxfiles.erweima.ai/MTk4YTg3OGYtM2Y4NS00YWJhLWIxMjMtMjk1OWFjOTUwMDFk.mp3';
const testTitle = 'Test Track - playTrackWithGlobalPlayer';
const testArtist = 'Test Artist';
log(`🎵 Calling playTrackWithGlobalPlayer with: ${testTitle} by ${testArtist}`);
const success = await window.playTrackWithGlobalPlayer(testAudioUrl, testTitle, testArtist, 1);
if (success) {
log('✅ playTrackWithGlobalPlayer returned true', 'success');
updateStatus('✅ playTrackWithGlobalPlayer worked correctly', 'success');
} else {
log('❌ playTrackWithGlobalPlayer returned false', 'error');
updateStatus('❌ playTrackWithGlobalPlayer returned false', 'error');
}
// Check if track info was updated after a delay
setTimeout(() => {
const trackTitle = document.getElementById('globalTrackTitle');
const trackArtist = document.getElementById('globalTrackArtistName');
if (trackTitle && trackTitle.textContent === testTitle) {
log('✅ Track title updated correctly', 'success');
} else {
log('❌ Track title NOT updated correctly', 'error');
}
if (trackArtist && trackArtist.textContent === testArtist) {
log('✅ Track artist updated correctly', 'success');
} else {
log('❌ Track artist NOT updated correctly', 'error');
}
}, 2000);
} catch (error) {
log(`❌ Error testing playTrackWithGlobalPlayer: ${error.message}`, 'error');
updateStatus(`❌ Error: ${error.message}`, 'error');
}
}
function testDirectGlobalPlayer() {
log('Testing direct global player...');
if (typeof window.globalPlayer === 'undefined') {
log('❌ Global player object not available', 'error');
return;
}
if (typeof window.globalPlayer.playTrack !== 'function') {
log('❌ Global player playTrack method not available', 'error');
return;
}
try {
const testAudioUrl = 'https://apiboxfiles.erweima.ai/MTk4YTg3OGYtM2Y4NS00YWJhLWIxMjMtMjk1OWFjOTUwMDFk.mp3';
const testTitle = 'Direct Test Track';
const testArtist = 'Direct Test Artist';
log(`🎵 Calling globalPlayer.playTrack with: ${testTitle} by ${testArtist}`);
window.globalPlayer.wasPlaying = true;
window.globalPlayer.playTrack(testAudioUrl, testTitle, testArtist, 1);
log('✅ Direct global player call completed', 'success');
updateStatus('✅ Direct global player call completed', 'success');
} catch (error) {
log(`❌ Error testing direct global player: ${error.message}`, 'error');
updateStatus(`❌ Error: ${error.message}`, 'error');
}
}
function testUpdateTrackInfo() {
log('Testing updateTrackInfo method...');
if (typeof window.globalPlayer === 'undefined') {
log('❌ Global player object not available', 'error');
return;
}
if (typeof window.globalPlayer.updateTrackInfo !== 'function') {
log('❌ updateTrackInfo method not available', 'error');
return;
}
try {
const testTitle = 'Update Test Track';
const testArtist = 'Update Test Artist';
log(`🎵 Calling updateTrackInfo with: ${testTitle} by ${testArtist}`);
window.globalPlayer.updateTrackInfo(testTitle, testArtist, 1);
// Check if it worked
setTimeout(() => {
const trackTitle = document.getElementById('globalTrackTitle');
const trackArtist = document.getElementById('globalTrackArtistName');
if (trackTitle && trackTitle.textContent === testTitle) {
log('✅ updateTrackInfo worked correctly', 'success');
updateStatus('✅ updateTrackInfo worked correctly', 'success');
} else {
log('❌ updateTrackInfo did NOT work correctly', 'error');
updateStatus('❌ updateTrackInfo did NOT work correctly', 'error');
}
}, 500);
} catch (error) {
log(`❌ Error testing updateTrackInfo: ${error.message}`, 'error');
updateStatus(`❌ Error: ${error.message}`, 'error');
}
}
function testShowPlayer() {
log('Testing showPlayer method...');
if (typeof window.globalPlayer === 'undefined') {
log('❌ Global player object not available', 'error');
return;
}
if (typeof window.globalPlayer.showPlayer !== 'function') {
log('❌ showPlayer method not available', 'error');
return;
}
try {
log('🎵 Calling showPlayer method');
window.globalPlayer.showPlayer();
// Check if it worked
setTimeout(() => {
const playerElement = document.getElementById('globalMusicPlayer');
if (playerElement && playerElement.classList.contains('active')) {
log('✅ showPlayer worked correctly', 'success');
updateStatus('✅ showPlayer worked correctly', 'success');
} else {
log('❌ showPlayer did NOT work correctly', 'error');
updateStatus('❌ showPlayer did NOT work correctly', 'error');
}
}, 500);
} catch (error) {
log(`❌ Error testing showPlayer: ${error.message}`, 'error');
updateStatus(`❌ Error: ${error.message}`, 'error');
}
}
function testUIElements() {
log('Testing UI elements...');
const elements = [
'globalMusicPlayer',
'globalTrackTitle',
'globalTrackArtistName',
'globalPlayBtn',
'globalProgressFill',
'globalCurrentTime',
'globalTotalTime',
'globalVolumeSlider'
];
let allFound = true;
elements.forEach(elementId => {
const element = document.getElementById(elementId);
if (element) {
log(`✅ ${elementId} found`, 'success');
// Check if element is visible
const rect = element.getBoundingClientRect();
const isVisible = rect.width > 0 && rect.height > 0;
if (isVisible) {
log(`✅ ${elementId} is visible`, 'success');
} else {
log(`⚠️ ${elementId} is NOT visible`, 'error');
allFound = false;
}
} else {
log(`❌ ${elementId} NOT found`, 'error');
allFound = false;
}
});
// Check if global player is visible
const playerElement = document.getElementById('globalMusicPlayer');
if (playerElement) {
const isActive = playerElement.classList.contains('active');
if (isActive) {
log('✅ Global player has active class', 'success');
} else {
log('⚠️ Global player does NOT have active class', 'error');
allFound = false;
}
}
if (allFound) {
updateStatus('✅ All UI elements found and visible', 'success');
} else {
updateStatus('❌ Some UI elements missing or not visible', 'error');
}
}
async function testFromLibrary() {
log('Simulating library play button...');
// This simulates exactly what happens in library_new.php
const testAudioUrl = 'https://apiboxfiles.erweima.ai/MTk4YTg3OGYtM2Y4NS00YWJhLWIxMjMtMjk1OWFjOTUwMDFk.mp3';
const testTitle = 'Library Test Track';
const testArtist = 'Library Test Artist';
log(`🎵 Simulating library playTrack call: ${testTitle} by ${testArtist}`);
// Ensure global player is available and initialized
if (typeof window.ensureGlobalPlayer === 'function') {
await window.ensureGlobalPlayer();
}
// Use the global player function
if (typeof window.playTrackWithGlobalPlayer === 'function') {
log('🎵 Using playTrackWithGlobalPlayer function');
try {
const success = await window.playTrackWithGlobalPlayer(testAudioUrl, testTitle, testArtist, <?= $_SESSION['user_id'] ?>);
if (!success) {
log('❌ Global player failed, trying direct method');
// Try direct method as fallback
if (typeof window.globalPlayer !== 'undefined' && window.globalPlayer.playTrack) {
window.globalPlayer.wasPlaying = true;
window.globalPlayer.playTrack(testAudioUrl, testTitle, testArtist, <?= $_SESSION['user_id'] ?>);
log('✅ Used direct fallback method', 'success');
}
} else {
log('✅ playTrackWithGlobalPlayer successful', 'success');
updateStatus('✅ Library simulation successful', 'success');
}
} catch (error) {
log(`❌ playTrackWithGlobalPlayer failed: ${error.message}`, 'error');
updateStatus(`❌ Error: ${error.message}`, 'error');
}
} else {
log('❌ playTrackWithGlobalPlayer function not available', 'error');
updateStatus('❌ playTrackWithGlobalPlayer function not available', 'error');
}
}
// Initialize when page loads
window.addEventListener('load', function() {
log('Page loaded, global player test ready');
updateStatus('🎵 Global player test ready - click buttons to test', 'info');
});
</script>
</body>
</html>