![]() 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/-4c839b8b/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play Button 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;
}
.test-btn:hover {
background: #5a6fd8;
}
.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-info {
background: rgba(0,0,0,0.3);
padding: 1rem;
border-radius: 8px;
margin: 1rem 0;
}
.debug-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 1rem 0;
}
.debug-item {
background: rgba(0,0,0,0.2);
padding: 1rem;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.1);
}
.debug-label {
font-weight: bold;
color: #667eea;
margin-bottom: 0.5rem;
}
.debug-value {
font-family: monospace;
word-break: break-all;
}
</style>
</head>
<body>
<h1>βΆοΈ Play Button Test</h1>
<div class="test-section">
<h2>π΅ Global Player Status</h2>
<button onclick="checkGlobalPlayer()" class="test-btn">Check Global Player</button>
<button onclick="testPlayButton()" class="test-btn">Test Play Button</button>
<button onclick="testPlaylistLoading()" class="test-btn">Test Playlist Loading</button>
<button onclick="testTrackPlayback()" class="test-btn">Test Track Playback</button>
<div id="playerStatus" class="status info">Click to check global player status...</div>
</div>
<div class="test-section">
<h2>π΅ Current Track Information</h2>
<div class="track-info">
<div><strong>Title:</strong> <span id="currentTitle">No track loaded</span></div>
<div><strong>Artist:</strong> <span id="currentArtist">No artist</span></div>
<div><strong>Audio URL:</strong> <span id="currentAudioUrl">No URL</span></div>
<div><strong>Duration:</strong> <span id="currentDuration">0:00</span></div>
<div><strong>Playing:</strong> <span id="currentPlaying">No</span></div>
</div>
</div>
<div class="test-section">
<h2>π§ Debug Information</h2>
<div class="debug-grid">
<div class="debug-item">
<div class="debug-label">Global Player Object</div>
<div class="debug-value" id="debugPlayerObject">Checking...</div>
</div>
<div class="debug-item">
<div class="debug-label">Player Ready Status</div>
<div class="debug-value" id="debugPlayerReady">Checking...</div>
</div>
<div class="debug-item">
<div class="debug-label">Current Track Object</div>
<div class="debug-value" id="debugCurrentTrack">Checking...</div>
</div>
<div class="debug-item">
<div class="debug-label">Playlist Data</div>
<div class="debug-value" id="debugPlaylistData">Checking...</div>
</div>
<div class="debug-item">
<div class="debug-label">Audio Element</div>
<div class="debug-value" id="debugAudioElement">Checking...</div>
</div>
<div class="debug-item">
<div class="debug-label">Audio Source</div>
<div class="debug-value" id="debugAudioSource">Checking...</div>
</div>
</div>
</div>
<div class="test-section">
<h2>π΅ Manual Track Test</h2>
<button onclick="loadTestTrack()" class="test-btn">Load Test Track</button>
<button onclick="playTestTrack()" class="test-btn">Play Test Track</button>
<button onclick="pauseTestTrack()" class="test-btn">Pause Test Track</button>
<div id="manualTestStatus" class="status info">Click to test manual track loading...</div>
</div>
<script>
function updateStatus(elementId, message, type = 'info') {
const element = document.getElementById(elementId);
if (element) {
element.textContent = message;
element.className = `status ${type}`;
}
}
function updateDebugInfo() {
// Global Player Object
const playerObj = !!window.enhancedGlobalPlayer;
document.getElementById('debugPlayerObject').textContent = playerObj ? 'Available' : 'Not Found';
// Player Ready Status
const playerReady = !!window.globalPlayerReady;
document.getElementById('debugPlayerReady').textContent = playerReady ? 'Ready' : 'Not Ready';
// Current Track Object
let currentTrack = 'None';
if (window.enhancedGlobalPlayer && window.enhancedGlobalPlayer.getCurrentTrack) {
const track = window.enhancedGlobalPlayer.getCurrentTrack();
if (track) {
currentTrack = `${track.title} - ${track.artist}`;
}
}
document.getElementById('debugCurrentTrack').textContent = currentTrack;
// Playlist Data
let playlistData = 'None';
if (window.enhancedGlobalPlayer && window.enhancedGlobalPlayer.getPlaylistTrackCount) {
const count = window.enhancedGlobalPlayer.getPlaylistTrackCount();
playlistData = `${count} tracks`;
}
document.getElementById('debugPlaylistData').textContent = playlistData;
// Audio Element
const audioElement = document.getElementById('globalAudioElement');
document.getElementById('debugAudioElement').textContent = audioElement ? 'Found' : 'Not Found';
// Audio Source
let audioSource = 'None';
if (audioElement && audioElement.src) {
audioSource = audioElement.src.split('/').pop() || 'Unknown';
}
document.getElementById('debugAudioSource').textContent = audioSource;
}
function updateTrackInfo() {
if (window.enhancedGlobalPlayer && window.enhancedGlobalPlayer.getCurrentTrack) {
const track = window.enhancedGlobalPlayer.getCurrentTrack();
if (track) {
document.getElementById('currentTitle').textContent = track.title || 'Unknown';
document.getElementById('currentArtist').textContent = track.artist || 'Unknown';
document.getElementById('currentAudioUrl').textContent = track.audioUrl || 'No URL';
document.getElementById('currentDuration').textContent = formatTime(track.duration || 0);
}
}
if (window.enhancedGlobalPlayer && window.enhancedGlobalPlayer.isPlaying) {
const playing = window.enhancedGlobalPlayer.isPlaying();
document.getElementById('currentPlaying').textContent = playing ? 'Yes' : 'No';
}
}
function formatTime(seconds) {
if (!seconds || isNaN(seconds)) return '0:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
function checkGlobalPlayer() {
console.log('π Checking global player status...');
const player = window.enhancedGlobalPlayer;
const ready = window.globalPlayerReady;
if (player && ready) {
updateStatus('playerStatus', 'β
Global player is available and ready!', 'success');
console.log('β
Global player ready:', player);
} else if (player && !ready) {
updateStatus('playerStatus', 'β οΈ Global player exists but not ready', 'error');
console.log('β οΈ Player exists but not ready:', player);
} else {
updateStatus('playerStatus', 'β Global player not found', 'error');
console.log('β Global player not found');
}
updateDebugInfo();
updateTrackInfo();
}
function testPlayButton() {
console.log('βΆοΈ Testing play button...');
if (window.enhancedGlobalPlayer && window.enhancedGlobalPlayer.togglePlayPause) {
try {
window.enhancedGlobalPlayer.togglePlayPause();
updateStatus('playerStatus', 'β
Play button clicked successfully!', 'success');
console.log('β
Play button clicked');
// Update track info after a short delay
setTimeout(() => {
updateTrackInfo();
updateDebugInfo();
}, 1000);
} catch (error) {
updateStatus('playerStatus', 'β Play button failed: ' + error.message, 'error');
console.error('β Play button failed:', error);
}
} else {
updateStatus('playerStatus', 'β Play button function not available', 'error');
}
}
function testPlaylistLoading() {
console.log('π Testing playlist loading...');
if (window.enhancedGlobalPlayer && window.enhancedGlobalPlayer.loadPlaylist) {
try {
window.enhancedGlobalPlayer.loadPlaylist('vip');
updateStatus('playerStatus', 'β
VIP playlist loading...', 'info');
console.log('β
VIP playlist loading');
// Check playlist status after loading
setTimeout(() => {
updateDebugInfo();
updateTrackInfo();
updateStatus('playerStatus', 'β
Playlist loaded! Check debug info above.', 'success');
}, 2000);
} catch (error) {
updateStatus('playerStatus', 'β Playlist loading failed: ' + error.message, 'error');
console.error('β Playlist loading failed:', error);
}
} else {
updateStatus('playerStatus', 'β Load playlist function not available', 'error');
}
}
function testTrackPlayback() {
console.log('π΅ Testing track playback...');
if (window.enhancedGlobalPlayer && window.enhancedGlobalPlayer.getCurrentTrack) {
const track = window.enhancedGlobalPlayer.getCurrentTrack();
if (track && track.audioUrl) {
updateStatus('playerStatus', 'β
Track found, attempting playback...', 'info');
console.log('β
Track found:', track);
// Try to play the track
if (window.enhancedGlobalPlayer.togglePlayPause) {
window.enhancedGlobalPlayer.togglePlayPause();
setTimeout(() => {
updateTrackInfo();
updateDebugInfo();
updateStatus('playerStatus', 'β
Track playback test completed!', 'success');
}, 2000);
}
} else {
updateStatus('playerStatus', 'β No track with audio URL found', 'error');
}
} else {
updateStatus('playerStatus', 'β Get current track function not available', 'error');
}
}
function loadTestTrack() {
console.log('π Loading test track...');
const testTrack = {
audio_url: '/test-audio.mp3', // This won't work but good for testing
title: 'Test Track',
artist_name: 'Test Artist',
duration: 120
};
if (window.enhancedGlobalPlayer && window.enhancedGlobalPlayer.playTrack) {
try {
window.enhancedGlobalPlayer.playTrack(
testTrack.audio_url,
testTrack.title,
testTrack.artist_name,
testTrack.duration
);
updateStatus('manualTestStatus', 'β
Test track loaded!', 'success');
console.log('β
Test track loaded');
} catch (error) {
updateStatus('manualTestStatus', 'β Test track loading failed: ' + error.message, 'error');
console.error('β Test track loading failed:', error);
}
} else {
updateStatus('manualTestStatus', 'β Play track function not available', 'error');
}
}
function playTestTrack() {
console.log('βΆοΈ Playing test track...');
if (window.enhancedGlobalPlayer && window.enhancedGlobalPlayer.togglePlayPause) {
try {
window.enhancedGlobalPlayer.togglePlayPause();
updateStatus('manualTestStatus', 'β
Test track play toggled!', 'success');
console.log('β
Test track play toggled');
} catch (error) {
updateStatus('manualTestStatus', 'β Test track play failed: ' + error.message, 'error');
console.error('β Test track play failed:', error);
}
} else {
updateStatus('manualTestStatus', 'β Toggle play/pause function not available', 'error');
}
}
function pauseTestTrack() {
console.log('βΈοΈ Pausing test track...');
if (window.enhancedGlobalPlayer && window.enhancedGlobalPlayer.stopPlayback) {
try {
window.enhancedGlobalPlayer.stopPlayback();
updateStatus('manualTestStatus', 'β
Test track paused!', 'success');
console.log('β
Test track paused');
} catch (error) {
updateStatus('manualTestStatus', 'β Test track pause failed: ' + error.message, 'error');
console.error('β Test track pause failed:', error);
}
} else {
updateStatus('manualTestStatus', 'β Stop playback function not available', 'error');
}
}
// Initialize debug info
document.addEventListener('DOMContentLoaded', () => {
updateDebugInfo();
updateTrackInfo();
// Update debug info periodically
setInterval(() => {
updateDebugInfo();
updateTrackInfo();
}, 3000);
});
// Listen for global player ready
window.addEventListener('load', () => {
// Wait a bit for the global player to initialize
setTimeout(() => {
checkGlobalPlayer();
}, 1000);
});
</script>
</body>
</html>