![]() 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/f2ac79a/ |
<?php
session_start();
// Set page variables for header
$page_title = 'Simple Button Test - SoundStudioPro';
$page_description = 'Testing pause and stop buttons';
$current_page = 'test';
include 'includes/header.php';
?>
<div class="container" id="pageContainer">
<div class="main-content">
<style>
.test-container {
max-width: 600px;
margin: 0 auto;
padding: 2rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
margin-top: 2rem;
}
.test-section {
margin-bottom: 2rem;
padding: 1.5rem;
background: rgba(102, 126, 234, 0.1);
border-radius: 8px;
border-left: 4px solid #667eea;
}
.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;
transition: all 0.3s ease;
}
.test-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.status {
padding: 1rem;
border-radius: 8px;
margin: 1rem 0;
font-family: monospace;
font-size: 1.2rem;
}
.status.success {
background: rgba(81, 207, 102, 0.2);
border: 1px solid #51cf66;
color: #51cf66;
}
.status.error {
background: rgba(255, 107, 107, 0.2);
border: 1px solid #ff6b6b;
color: #ff6b6b;
}
.status.info {
background: rgba(102, 126, 234, 0.2);
border: 1px solid #667eea;
color: #667eea;
}
.log {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
padding: 1rem;
font-family: monospace;
font-size: 1.2rem;
color: #00ff00;
max-height: 300px;
overflow-y: auto;
white-space: pre-wrap;
}
</style>
<div class="test-container">
<div class="test-section">
<h1>π΅ Simple Button Test</h1>
<p>Testing pause and stop buttons on the global player.</p>
</div>
<div class="test-section">
<h2>π§ Player Status</h2>
<div id="playerStatus" class="status info">Checking player status...</div>
<button class="test-button" onclick="checkPlayerStatus()">Check Status</button>
</div>
<div class="test-section">
<h2>βΆοΈ Test Buttons</h2>
<p>Click these to test the actual global player buttons:</p>
<button class="test-button" onclick="testPlayButton()">βΆοΈ Click Play Button</button>
<button class="test-button" onclick="testStopButton()">βΉοΈ Click Stop Button</button>
<button class="test-button" onclick="testPauseButton()">βΈοΈ Click Pause Button</button>
<div id="buttonStatus" class="status info">Button test results will appear here...</div>
</div>
<div class="test-section">
<h2>π― Direct Function Calls</h2>
<p>Test the functions directly:</p>
<button class="test-button" onclick="callTogglePlayPause()">π΅ Call togglePlayPause()</button>
<button class="test-button" onclick="callStopTrack()">βΉοΈ Call stopTrack()</button>
<div id="functionStatus" class="status info">Function test results will appear here...</div>
</div>
<div class="test-section">
<h2>π Console Logs</h2>
<button class="test-button" onclick="clearLogs()">Clear Logs</button>
<div id="consoleLogs" class="log"></div>
</div>
</div>
</div>
</div>
<script>
// Override console.log to capture logs
const originalLog = console.log;
const originalError = console.error;
const logContainer = document.getElementById('consoleLogs');
function addLog(message, type = 'log') {
const timestamp = new Date().toLocaleTimeString();
const logEntry = `[${timestamp}] ${type.toUpperCase()}: ${message}\n`;
logContainer.textContent += logEntry;
logContainer.scrollTop = logContainer.scrollHeight;
}
console.log = function(...args) {
originalLog.apply(console, args);
addLog(args.join(' '), 'log');
};
console.error = function(...args) {
originalError.apply(console, args);
addLog(args.join(' '), 'error');
};
function checkPlayerStatus() {
const statusDiv = document.getElementById('playerStatus');
let status = '';
// Check if global player exists
if (typeof window.globalPlayer === 'undefined') {
status += '<div style="color: #ff6b6b;">β Global player not found</div>';
} else {
status += '<div style="color: #51cf66;">β
Global player found</div>';
status += `<div>π΅ Is playing: ${window.globalPlayer.isPlaying}</div>`;
status += `<div>π΅ Audio exists: ${!!window.globalPlayer.audio}</div>`;
status += `<div>π΅ Playlist length: ${window.globalPlayer.playlist.length}</div>`;
}
// Check for button elements
const buttons = ['globalPlayBtn', 'globalStopBtn'];
buttons.forEach(id => {
const element = document.getElementById(id);
if (element) {
status += `<div style="color: #51cf66;">β
${id} found</div>`;
status += `<div>π ${id} onclick: ${element.onclick !== null}</div>`;
status += `<div>π ${id} has event listeners: ${element.onclick !== null || element.onclick !== undefined}</div>`;
} else {
status += `<div style="color: #ff6b6b;">β ${id} not found</div>`;
}
});
statusDiv.innerHTML = status;
}
function testPlayButton() {
console.log('βΆοΈ Testing play button click...');
const playBtn = document.getElementById('globalPlayBtn');
if (playBtn) {
console.log('β
Play button found, clicking...');
playBtn.click();
setTimeout(() => {
const statusDiv = document.getElementById('buttonStatus');
statusDiv.innerHTML = `
<div>π΅ Play button clicked</div>
<div>π΅ Is playing: ${window.globalPlayer ? window.globalPlayer.isPlaying : 'Unknown'}</div>
<div>π΅ Audio exists: ${window.globalPlayer ? !!window.globalPlayer.audio : 'Unknown'}</div>
`;
}, 500);
} else {
console.error('β Play button not found');
document.getElementById('buttonStatus').innerHTML = '<div style="color: #ff6b6b;">β Play button not found</div>';
}
}
function testStopButton() {
console.log('βΉοΈ Testing stop button click...');
const stopBtn = document.getElementById('globalStopBtn');
if (stopBtn) {
console.log('β
Stop button found, clicking...');
stopBtn.click();
setTimeout(() => {
const statusDiv = document.getElementById('buttonStatus');
statusDiv.innerHTML = `
<div>βΉοΈ Stop button clicked</div>
<div>π΅ Is playing: ${window.globalPlayer ? window.globalPlayer.isPlaying : 'Unknown'}</div>
<div>π΅ Audio time: ${window.globalPlayer && window.globalPlayer.audio ? Math.round(window.globalPlayer.audio.currentTime) : 0}s</div>
`;
}, 500);
} else {
console.error('β Stop button not found');
document.getElementById('buttonStatus').innerHTML = '<div style="color: #ff6b6b;">β Stop button not found</div>';
}
}
function testPauseButton() {
console.log('βΈοΈ Testing pause (same as play button)...');
const playBtn = document.getElementById('globalPlayBtn');
if (playBtn) {
console.log('β
Play/pause button found, clicking...');
playBtn.click();
setTimeout(() => {
const statusDiv = document.getElementById('buttonStatus');
statusDiv.innerHTML = `
<div>βΈοΈ Play/pause button clicked</div>
<div>π΅ Is playing: ${window.globalPlayer ? window.globalPlayer.isPlaying : 'Unknown'}</div>
<div>π΅ Audio exists: ${window.globalPlayer ? !!window.globalPlayer.audio : 'Unknown'}</div>
`;
}, 500);
} else {
console.error('β Play/pause button not found');
document.getElementById('buttonStatus').innerHTML = '<div style="color: #ff6b6b;">β Play/pause button not found</div>';
}
}
function callTogglePlayPause() {
console.log('π΅ Calling togglePlayPause() directly...');
if (window.globalPlayer && window.globalPlayer.togglePlayPause) {
window.globalPlayer.togglePlayPause();
setTimeout(() => {
const statusDiv = document.getElementById('functionStatus');
statusDiv.innerHTML = `
<div>π΅ togglePlayPause() called</div>
<div>π΅ Is playing: ${window.globalPlayer.isPlaying}</div>
<div>π΅ Audio exists: ${!!window.globalPlayer.audio}</div>
`;
}, 500);
} else {
console.error('β togglePlayPause function not available');
document.getElementById('functionStatus').innerHTML = '<div style="color: #ff6b6b;">β togglePlayPause function not available</div>';
}
}
function callStopTrack() {
console.log('βΉοΈ Calling stopTrack() directly...');
if (window.globalPlayer && window.globalPlayer.stopTrack) {
window.globalPlayer.stopTrack();
setTimeout(() => {
const statusDiv = document.getElementById('functionStatus');
statusDiv.innerHTML = `
<div>βΉοΈ stopTrack() called</div>
<div>π΅ Is playing: ${window.globalPlayer.isPlaying}</div>
<div>π΅ Audio time: ${window.globalPlayer.audio ? Math.round(window.globalPlayer.audio.currentTime) : 0}s</div>
`;
}, 500);
} else {
console.error('β stopTrack function not available');
document.getElementById('functionStatus').innerHTML = '<div style="color: #ff6b6b;">β stopTrack function not available</div>';
}
}
function clearLogs() {
document.getElementById('consoleLogs').textContent = '';
}
// Auto-check status when page loads
document.addEventListener('DOMContentLoaded', () => {
console.log('π§ͺ Simple button test page loaded');
setTimeout(checkPlayerStatus, 1000);
});
</script>
<?php include 'includes/footer.php'; ?>