 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/-523c73d0/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIP Playlist Test - SoundStudioPro</title>
<style>
body {
background: #0a0a0a;
color: white;
font-family: Arial, sans-serif;
padding: 2rem;
margin-bottom: 100px;
}
.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; }
.track-list {
max-height: 300px;
overflow-y: auto;
background: rgba(0,0,0,0.3);
padding: 1rem;
border-radius: 8px;
margin: 1rem 0;
}
.track-item {
padding: 0.5rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
cursor: pointer;
transition: background 0.3s ease;
}
.track-item:hover {
background: rgba(102, 126, 234, 0.2);
}
.track-item:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<h1>🎵 VIP Playlist Test</h1>
<div class="test-section">
<h2>🔍 VIP Playlist Loading Test</h2>
<p>This test will verify that the VIP playlist is loading correctly in the global player.</p>
<button onclick="testVIPPlaylist()" class="test-btn">Test VIP Playlist Loading</button>
<button onclick="testPlaylistSwitch()" class="test-btn">Test Playlist Switching</button>
<button onclick="testTrackPlayback()" class="test-btn">Test Track Playback</button>
<div id="playlistStatus" class="status info">Click to test VIP playlist...</div>
</div>
<div class="test-section">
<h2>📋 VIP Tracks List</h2>
<div id="tracksList" class="track-list">No tracks loaded yet...</div>
</div>
<div class="test-section">
<h2>🎵 Global Player Status</h2>
<div id="playerStatus" class="status info">Checking player status...</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}`;
}
}
async function testVIPPlaylist() {
console.log('🎵 Testing VIP playlist loading...');
updateStatus('playlistStatus', '⏳ Loading VIP playlist...', 'info');
try {
// Test direct API call
const response = await fetch('/api/get_vip_sample_tracks.php?per_page=10');
const data = await response.json();
if (data.success && data.tracks && data.tracks.length > 0) {
updateStatus('playlistStatus', `✅ VIP playlist loaded successfully! Found ${data.tracks.length} tracks`, 'success');
// Display tracks
displayTracks(data.tracks);
// Test global player playlist loading
if (window.enhancedGlobalPlayer && typeof window.enhancedGlobalPlayer.loadPlaylist === 'function') {
window.enhancedGlobalPlayer.loadPlaylist('vip');
console.log('🎵 Global player playlist loading triggered');
} else {
console.warn('⚠️ Global player playlist function not available');
}
} else {
updateStatus('playlistStatus', '❌ No VIP tracks found or API error', 'error');
}
} catch (error) {
updateStatus('playlistStatus', '❌ VIP playlist test failed: ' + error.message, 'error');
console.error('❌ VIP playlist test error:', error);
}
}
function testPlaylistSwitch() {
console.log('🎵 Testing playlist switching...');
if (window.enhancedGlobalPlayer) {
const playlists = ['vip', 'featured', 'community'];
const currentPlaylist = window.enhancedGlobalPlayer.getCurrentPlaylist();
const trackCount = window.enhancedGlobalPlayer.getPlaylistTrackCount();
updateStatus('playlistStatus', `✅ Current playlist: ${currentPlaylist}, Tracks: ${trackCount}`, 'success');
// Test switching to featured
if (typeof window.enhancedGlobalPlayer.loadPlaylist === 'function') {
window.enhancedGlobalPlayer.loadPlaylist('featured');
console.log('🎵 Switched to featured playlist');
}
} else {
updateStatus('playlistStatus', '❌ Global player not available', 'error');
}
}
function testTrackPlayback() {
console.log('🎵 Testing track playback...');
if (window.enhancedGlobalPlayer && typeof window.enhancedGlobalPlayer.playRandomTrack === 'function') {
try {
window.enhancedGlobalPlayer.playRandomTrack();
updateStatus('playlistStatus', '✅ Random track playback triggered!', 'success');
} catch (error) {
updateStatus('playlistStatus', '❌ Random track playback failed: ' + error.message, 'error');
}
} else {
updateStatus('playlistStatus', '❌ Random track function not available', 'error');
}
}
function displayTracks(tracks) {
const tracksList = document.getElementById('tracksList');
if (!tracksList) return;
if (tracks.length === 0) {
tracksList.innerHTML = 'No tracks found';
return;
}
const tracksHtml = tracks.map((track, index) => `
<div class="track-item" onclick="playTrack('${track.audio_url}', '${track.title}', '${track.artist_name}')">
<strong>${index + 1}. ${track.title}</strong><br>
<small>by ${track.artist_name}</small>
${track.play_count ? `<br><small>🎵 ${track.play_count} plays</small>` : ''}
</div>
`).join('');
tracksList.innerHTML = tracksHtml;
}
function playTrack(audioUrl, title, artist) {
console.log('🎵 Playing track:', title, 'by', artist);
if (window.enhancedGlobalPlayer && typeof window.enhancedGlobalPlayer.playTrack === 'function') {
window.enhancedGlobalPlayer.playTrack(audioUrl, title, artist);
updateStatus('playlistStatus', `✅ Now playing: ${title}`, 'success');
} else {
updateStatus('playlistStatus', '❌ Global player not available', 'error');
}
}
function updatePlayerStatus() {
const player = document.getElementById('enhancedGlobalPlayer');
if (player) {
const computedStyle = window.getComputedStyle(player);
const isVisible = computedStyle.display !== 'none';
const status = {
'Player Element': !!player,
'Player Visible': isVisible,
'Global Player Object': !!window.enhancedGlobalPlayer,
'Player Ready': !!window.globalPlayerReady,
'Current Playlist': window.enhancedGlobalPlayer?.getCurrentPlaylist() || 'N/A',
'Track Count': window.enhancedGlobalPlayer?.getPlaylistTrackCount() || 'N/A'
};
const statusDiv = document.getElementById('playerStatus');
statusDiv.innerHTML = Object.entries(status)
.map(([key, value]) => `${key}: ${value}`)
.join('\n');
} else {
updateStatus('playerStatus', '❌ Global player element not found', 'error');
}
}
function updateDebugInfo() {
const debugInfo = {
'Page URL': window.location.href,
'Global Player Element': !!document.getElementById('enhancedGlobalPlayer'),
'Enhanced Global Player Object': !!window.enhancedGlobalPlayer,
'Global Player Ready': !!window.globalPlayerReady,
'Fetch Available': typeof fetch !== 'undefined',
'Console Available': typeof console !== 'undefined'
};
const debugDiv = document.getElementById('debugInfo');
debugDiv.innerHTML = Object.entries(debugInfo)
.map(([key, value]) => `${key}: ${value}`)
.join('\n');
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
updateDebugInfo();
updatePlayerStatus();
// Auto-test VIP playlist after page load
setTimeout(testVIPPlaylist, 2000);
});
// Update status periodically
setInterval(() => {
updatePlayerStatus();
updateDebugInfo();
}, 5000);
</script>
</body>
</html>