 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/721357ad/ |
<?php
session_start();
// Set page variables for header
$current_page = 'test_playlist';
$page_title = 'Playlist Button Test - SoundStudioPro';
$page_description = 'Test playlist button functionality.';
include 'includes/header.php';
?>
<div class="container" id="pageContainer">
<div class="main-content">
<style>
.test-section {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}
.test-button {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 8px;
cursor: pointer;
margin: 0.5rem;
font-size: 1.4rem;
}
.test-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.status {
padding: 1rem;
border-radius: 8px;
margin: 1rem 0;
font-family: monospace;
}
.status.success {
background: rgba(72, 187, 120, 0.2);
border: 1px solid rgba(72, 187, 120, 0.3);
color: #48bb78;
}
.status.error {
background: rgba(245, 101, 101, 0.2);
border: 1px solid rgba(245, 101, 101, 0.3);
color: #f56565;
}
.status.info {
background: rgba(102, 126, 234, 0.2);
border: 1px solid rgba(102, 126, 234, 0.3);
color: #667eea;
}
.status.warning {
background: rgba(214, 158, 46, 0.2);
border: 1px solid rgba(214, 158, 46, 0.3);
color: #d69e2e;
}
.debug-info {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
font-family: monospace;
font-size: 1.2rem;
}
</style>
<div class="test-section">
<h1>🔧 Playlist Button Test</h1>
<p>Debug the playlist button functionality to identify why it's not working on the homepage.</p>
</div>
<div class="test-section">
<h2>🎵 Global Player Status</h2>
<div id="playerStatus" class="status info">Checking global player...</div>
<button class="test-button" onclick="checkGlobalPlayer()">Check Global Player</button>
</div>
<div class="test-section">
<h2>📋 Playlist Button Test</h2>
<p>Test the playlist button functionality:</p>
<button class="test-button" onclick="testPlaylistButton()">Test Playlist Button</button>
<button class="test-button" onclick="testPlaylistPanel()">Test Playlist Panel</button>
<button class="test-button" onclick="testPlaylistToggle()">Test Toggle Function</button>
<button class="test-button" onclick="forceShowPlaylist()">Force Show Playlist</button>
</div>
<div class="test-section">
<h2>🔍 Element Debug</h2>
<p>Check if elements exist and are accessible:</p>
<button class="test-button" onclick="debugElements()">Debug Elements</button>
<button class="test-button" onclick="debugEventListeners()">Debug Event Listeners</button>
<button class="test-button" onclick="debugCSS()">Debug CSS</button>
</div>
<div class="test-section">
<h2>🎯 Manual Playlist Test</h2>
<p>Test playlist functionality manually:</p>
<button class="test-button" onclick="manualTogglePlaylist()">Manual Toggle</button>
<button class="test-button" onclick="loadTestPlaylist()">Load Test Playlist</button>
<button class="test-button" onclick="simulateClick()">Simulate Click</button>
</div>
<div class="test-section">
<h2>📝 Debug Results</h2>
<div id="debugResults" class="status info">Ready to run tests...</div>
<button class="test-button" onclick="clearResults()">Clear Results</button>
</div>
<div class="test-section">
<h2>🔧 Debug Information</h2>
<div id="debugInfo" class="debug-info">Debug information will appear here...</div>
</div>
<script>
function addResult(message, type = 'info') {
const resultsDiv = document.getElementById('debugResults');
const timestamp = new Date().toLocaleTimeString();
const resultEntry = document.createElement('div');
resultEntry.innerHTML = `<strong>[${timestamp}]</strong> ${message}`;
resultEntry.className = `status ${type}`;
resultsDiv.appendChild(resultEntry);
resultsDiv.scrollTop = resultsDiv.scrollHeight;
}
function updateDebugInfo(info) {
const debugDiv = document.getElementById('debugInfo');
debugDiv.innerHTML = info;
}
function checkGlobalPlayer() {
addResult('🔧 Checking global player status...', 'info');
const playerStatus = document.getElementById('playerStatus');
// Check if global player exists
const globalPlayer = document.getElementById('globalMusicPlayer');
const globalPlayerObj = window.globalPlayer;
let status = '';
let statusClass = 'info';
if (globalPlayer) {
status += '✅ Global player element found<br>';
} else {
status += '❌ Global player element not found<br>';
statusClass = 'error';
}
if (globalPlayerObj) {
status += '✅ Global player object exists<br>';
status += `✅ Player methods: ${Object.keys(globalPlayerObj).join(', ')}<br>`;
} else {
status += '❌ Global player object not found<br>';
statusClass = 'error';
}
// Check if player is visible
if (globalPlayer) {
const styles = getComputedStyle(globalPlayer);
status += `✅ Player visibility: ${styles.display}<br>`;
status += `✅ Player opacity: ${styles.opacity}<br>`;
status += `✅ Player z-index: ${styles.zIndex}<br>`;
}
playerStatus.innerHTML = status;
playerStatus.className = `status ${statusClass}`;
addResult(`Global player check completed - Element: ${!!globalPlayer}, Object: ${!!globalPlayerObj}`, statusClass === 'error' ? 'error' : 'success');
}
function testPlaylistButton() {
addResult('🔧 Testing playlist button...', 'info');
const playlistButton = document.getElementById('globalPlaylistToggle');
if (playlistButton) {
addResult('✅ Playlist button found', 'success');
// Check button properties
const styles = getComputedStyle(playlistButton);
addResult(`✅ Button display: ${styles.display}`, 'success');
addResult(`✅ Button visibility: ${styles.visibility}`, 'success');
addResult(`✅ Button pointer-events: ${styles.pointerEvents}`, 'success');
// Check if button is clickable
const rect = playlistButton.getBoundingClientRect();
addResult(`✅ Button position: x=${rect.x}, y=${rect.y}, width=${rect.width}, height=${rect.height}`, 'success');
// Test click event
try {
playlistButton.click();
addResult('✅ Button click event fired', 'success');
} catch (error) {
addResult('❌ Button click failed: ' + error.message, 'error');
}
} else {
addResult('❌ Playlist button not found', 'error');
}
}
function testPlaylistPanel() {
addResult('🔧 Testing playlist panel...', 'info');
const playlistPanel = document.getElementById('globalPlaylistPanel');
if (playlistPanel) {
addResult('✅ Playlist panel found', 'success');
// Check panel properties
const styles = getComputedStyle(playlistPanel);
addResult(`✅ Panel display: ${styles.display}`, 'success');
addResult(`✅ Panel visibility: ${styles.visibility}`, 'success');
addResult(`✅ Panel position: ${styles.position}`, 'success');
addResult(`✅ Panel z-index: ${styles.zIndex}`, 'success');
// Check if panel is active
const isActive = playlistPanel.classList.contains('active');
addResult(`✅ Panel active: ${isActive}`, isActive ? 'success' : 'warning');
// Check panel dimensions
const rect = playlistPanel.getBoundingClientRect();
addResult(`✅ Panel dimensions: x=${rect.x}, y=${rect.y}, width=${rect.width}, height=${rect.height}`, 'success');
} else {
addResult('❌ Playlist panel not found', 'error');
}
}
function testPlaylistToggle() {
addResult('🔧 Testing playlist toggle function...', 'info');
if (window.globalPlayer && typeof window.globalPlayer.togglePlaylist === 'function') {
addResult('✅ Toggle function exists', 'success');
try {
window.globalPlayer.togglePlaylist();
addResult('✅ Toggle function executed successfully', 'success');
// Check if panel is now active
setTimeout(() => {
const panel = document.getElementById('globalPlaylistPanel');
if (panel && panel.classList.contains('active')) {
addResult('✅ Playlist panel is now active', 'success');
} else {
addResult('❌ Playlist panel is not active after toggle', 'error');
}
}, 100);
} catch (error) {
addResult('❌ Toggle function failed: ' + error.message, 'error');
}
} else {
addResult('❌ Toggle function not available', 'error');
}
}
function forceShowPlaylist() {
addResult('🔧 Forcing playlist to show...', 'info');
const panel = document.getElementById('globalPlaylistPanel');
if (panel) {
panel.classList.add('active');
panel.style.display = 'flex';
addResult('✅ Playlist panel forced to show', 'success');
} else {
addResult('❌ Playlist panel not found', 'error');
}
}
function debugElements() {
addResult('🔧 Debugging elements...', 'info');
const elements = [
'globalMusicPlayer',
'globalPlaylistToggle',
'globalPlaylistPanel',
'globalPlaylistTracks',
'globalClosePlaylist'
];
let debugInfo = '<strong>Element Debug:</strong><br>';
elements.forEach(id => {
const element = document.getElementById(id);
if (element) {
const styles = getComputedStyle(element);
debugInfo += `✅ ${id}: display=${styles.display}, visibility=${styles.visibility}<br>`;
} else {
debugInfo += `❌ ${id}: not found<br>`;
}
});
updateDebugInfo(debugInfo);
addResult('Element debug completed', 'success');
}
function debugEventListeners() {
addResult('🔧 Debugging event listeners...', 'info');
const playlistButton = document.getElementById('globalPlaylistToggle');
let debugInfo = '<strong>Event Listener Debug:</strong><br>';
if (playlistButton) {
// Try to get event listeners (this is limited in browsers)
debugInfo += `✅ Playlist button found<br>`;
debugInfo += `✅ Button onclick: ${playlistButton.onclick ? 'exists' : 'none'}<br>`;
// Test if button responds to events
const originalOnClick = playlistButton.onclick;
let clickTested = false;
playlistButton.onclick = function(e) {
clickTested = true;
debugInfo += '✅ Button click event fired<br>';
updateDebugInfo(debugInfo);
if (originalOnClick) originalOnClick.call(this, e);
};
// Trigger a test click
setTimeout(() => {
playlistButton.click();
if (!clickTested) {
debugInfo += '❌ Button click event not fired<br>';
updateDebugInfo(debugInfo);
}
}, 100);
} else {
debugInfo += '❌ Playlist button not found<br>';
}
updateDebugInfo(debugInfo);
addResult('Event listener debug completed', 'success');
}
function debugCSS() {
addResult('🔧 Debugging CSS...', 'info');
const playlistPanel = document.getElementById('globalPlaylistPanel');
let debugInfo = '<strong>CSS Debug:</strong><br>';
if (playlistPanel) {
const styles = getComputedStyle(playlistPanel);
debugInfo += `✅ Panel found<br>`;
debugInfo += `✅ display: ${styles.display}<br>`;
debugInfo += `✅ visibility: ${styles.visibility}<br>`;
debugInfo += `✅ position: ${styles.position}<br>`;
debugInfo += `✅ z-index: ${styles.zIndex}<br>`;
debugInfo += `✅ bottom: ${styles.bottom}<br>`;
debugInfo += `✅ right: ${styles.right}<br>`;
debugInfo += `✅ width: ${styles.width}<br>`;
debugInfo += `✅ height: ${styles.height}<br>`;
debugInfo += `✅ background: ${styles.background}<br>`;
} else {
debugInfo += '❌ Playlist panel not found<br>';
}
updateDebugInfo(debugInfo);
addResult('CSS debug completed', 'success');
}
function manualTogglePlaylist() {
addResult('🔧 Manual playlist toggle...', 'info');
const panel = document.getElementById('globalPlaylistPanel');
if (panel) {
const wasActive = panel.classList.contains('active');
panel.classList.toggle('active');
const isActive = panel.classList.contains('active');
addResult(`✅ Manual toggle: ${wasActive} → ${isActive}`, 'success');
if (isActive) {
panel.style.display = 'flex';
addResult('✅ Panel display set to flex', 'success');
} else {
panel.style.display = 'none';
addResult('✅ Panel display set to none', 'success');
}
} else {
addResult('❌ Playlist panel not found', 'error');
}
}
function loadTestPlaylist() {
addResult('🔧 Loading test playlist...', 'info');
if (window.globalPlayer && typeof window.globalPlayer.loadCommunityPlaylist === 'function') {
try {
window.globalPlayer.loadCommunityPlaylist();
addResult('✅ Test playlist loaded', 'success');
} catch (error) {
addResult('❌ Test playlist failed: ' + error.message, 'error');
}
} else {
addResult('❌ Load playlist function not available', 'error');
}
}
function simulateClick() {
addResult('🔧 Simulating playlist button click...', 'info');
const playlistButton = document.getElementById('globalPlaylistToggle');
if (playlistButton) {
// Create a new click event
const clickEvent = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
// Dispatch the event
playlistButton.dispatchEvent(clickEvent);
addResult('✅ Click event dispatched', 'success');
} else {
addResult('❌ Playlist button not found', 'error');
}
}
function clearResults() {
const resultsDiv = document.getElementById('debugResults');
resultsDiv.innerHTML = '<div class="status info">Results cleared...</div>';
updateDebugInfo('Debug information cleared...');
}
// Auto-run basic checks on page load
document.addEventListener('DOMContentLoaded', () => {
addResult('🔧 Playlist Button Test Page loaded', 'info');
setTimeout(() => {
checkGlobalPlayer();
debugElements();
}, 1000);
});
</script>
</div>
</div>
<?php include 'includes/footer.php'; ?>