![]() 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/66f3b4eb/ |
<?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>Debug Feed Play Button</title>
<style>
body {
font-family: 'Inter', sans-serif;
background: #0a0a0a;
color: white;
margin: 0;
padding: 20px;
}
.debug-container {
max-width: 1000px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.debug-section {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}
.debug-log {
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: 400px;
overflow-y: auto;
white-space: pre-wrap;
}
.btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0.5rem;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.btn-success {
background: linear-gradient(135deg, #48bb78, #38a169);
}
.btn-error {
background: linear-gradient(135deg, #f56565, #e53e3e);
}
.track-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}
.track-info {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.track-details {
flex: 1;
}
.track-title {
font-size: 1.2rem;
font-weight: 600;
color: white;
margin: 0;
}
.track-artist {
color: #a0aec0;
margin: 0.2rem 0 0 0;
}
.track-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
</style>
</head>
<body>
<div class="debug-container">
<h1>đ Debug Feed Play Button</h1>
<p>This page helps debug the play button issue on the feed page.</p>
<div class="debug-section">
<h3>đĩ Global Player Status</h3>
<div id="playerStatus">Checking...</div>
<button class="btn" onclick="checkPlayerStatus()">Refresh Status</button>
</div>
<div class="debug-section">
<h3>đĩ Test Play Function</h3>
<button class="btn btn-success" onclick="testPlayFunction()">Test Play Function</button>
<button class="btn" onclick="testGlobalPlayerDirect()">Test Global Player Direct</button>
<button class="btn" onclick="testEnsureGlobalPlayer()">Test Ensure Global Player</button>
</div>
<div class="debug-section">
<h3>đĩ Sample Track (from feed.php)</h3>
<div class="track-card">
<div class="track-info">
<div class="track-details">
<div class="track-title">Test Track - Debug</div>
<div class="track-artist">by Test Artist</div>
</div>
</div>
<div class="track-actions">
<button class="btn btn-success play-track-btn" onclick="playTrackWithGlobalPlayer('https://apiboxfiles.erweima.ai/MTk4YTg3OGYtM2Y4NS00YWJhLWIxMjMtMjk1OWFjOTUwMDFk.mp3', 'Test Track - Debug', 'Test Artist', 1)">
<i class="fas fa-play"></i> Play
</button>
<button class="btn" onclick="testDirectPlay()">Direct Play</button>
</div>
</div>
</div>
<div class="debug-section">
<h3>đ Debug Log</h3>
<div id="debugLog" class="debug-log"></div>
<button class="btn" onclick="clearLog()">Clear Log</button>
</div>
</div>
<script>
let logCount = 0;
function log(message, type = 'info') {
const logElement = document.getElementById('debugLog');
const timestamp = new Date().toLocaleTimeString();
const prefix = type === 'error' ? 'â' : type === 'success' ? 'â
' : 'âšī¸';
logElement.textContent += `[${timestamp}] ${prefix} ${message}\n`;
logElement.scrollTop = logElement.scrollHeight;
console.log(`[${timestamp}] ${message}`);
}
function clearLog() {
document.getElementById('debugLog').textContent = '';
}
function checkPlayerStatus() {
log('đ Checking global player status...');
const statusElement = document.getElementById('playerStatus');
let status = '';
// Check global player object
if (typeof window.globalPlayer !== 'undefined') {
status += 'â
Global player object exists<br>';
log('Global player object exists');
if (window.globalPlayer.initialized) {
status += 'â
Global player is initialized<br>';
log('Global player is initialized');
} else {
status += 'â Global player is NOT initialized<br>';
log('Global player is NOT initialized', 'error');
}
if (typeof window.globalPlayer.playTrack === 'function') {
status += 'â
playTrack method exists<br>';
log('playTrack method exists');
} else {
status += 'â playTrack method missing<br>';
log('playTrack method missing', 'error');
}
if (typeof window.globalPlayer.updateTrackInfo === 'function') {
status += 'â
updateTrackInfo method exists<br>';
log('updateTrackInfo method exists');
} else {
status += 'â updateTrackInfo method missing<br>';
log('updateTrackInfo method missing', 'error');
}
if (typeof window.globalPlayer.showPlayer === 'function') {
status += 'â
showPlayer method exists<br>';
log('showPlayer method exists');
} else {
status += 'â showPlayer method missing<br>';
log('showPlayer method missing', 'error');
}
} else {
status += 'â Global player object does not exist<br>';
log('Global player object does not exist', 'error');
}
// Check global functions
if (typeof window.playTrackWithGlobalPlayer === 'function') {
status += 'â
playTrackWithGlobalPlayer function exists<br>';
log('playTrackWithGlobalPlayer function exists');
} else {
status += 'â playTrackWithGlobalPlayer function missing<br>';
log('playTrackWithGlobalPlayer function missing', 'error');
}
if (typeof window.ensureGlobalPlayer === 'function') {
status += 'â
ensureGlobalPlayer function exists<br>';
log('ensureGlobalPlayer function exists');
} else {
status += 'â ensureGlobalPlayer function missing<br>';
log('ensureGlobalPlayer function missing', 'error');
}
statusElement.innerHTML = status;
}
async function testPlayFunction() {
log('đĩ Testing playTrackWithGlobalPlayer function...');
const audioUrl = 'https://apiboxfiles.erweima.ai/MTk4YTg3OGYtM2Y4NS00YWJhLWIxMjMtMjk1OWFjOTUwMDFk.mp3';
const title = 'Test Track - Debug Function';
const artist = 'Test Artist';
const artistId = 1;
try {
if (typeof window.playTrackWithGlobalPlayer === 'function') {
log('Calling window.playTrackWithGlobalPlayer...');
const success = await window.playTrackWithGlobalPlayer(audioUrl, title, artist, artistId);
if (success) {
log('â
playTrackWithGlobalPlayer returned true', 'success');
} else {
log('â playTrackWithGlobalPlayer returned false', 'error');
}
} else {
log('â playTrackWithGlobalPlayer function not available', 'error');
}
} catch (error) {
log(`â Error testing playTrackWithGlobalPlayer: ${error.message}`, 'error');
}
}
async function testGlobalPlayerDirect() {
log('đĩ Testing global player playTrack method directly...');
const audioUrl = 'https://apiboxfiles.erweima.ai/MTk4YTg3OGYtM2Y4NS00YWJhLWIxMjMtMjk1OWFjOTUwMDFk.mp3';
const title = 'Test Track - Direct Method';
const artist = 'Test Artist';
const artistId = 1;
try {
if (typeof window.globalPlayer !== 'undefined' && window.globalPlayer.playTrack) {
log('Calling window.globalPlayer.playTrack...');
window.globalPlayer.wasPlaying = true;
window.globalPlayer.playTrack(audioUrl, title, artist, artistId);
log('â
Direct playTrack call completed', 'success');
} else {
log('â Global player playTrack method not available', 'error');
}
} catch (error) {
log(`â Error testing direct playTrack: ${error.message}`, 'error');
}
}
async function testEnsureGlobalPlayer() {
log('đĩ Testing ensureGlobalPlayer function...');
try {
if (typeof window.ensureGlobalPlayer === 'function') {
log('Calling window.ensureGlobalPlayer...');
const ready = await window.ensureGlobalPlayer();
if (ready) {
log('â
ensureGlobalPlayer returned true', 'success');
} else {
log('â ensureGlobalPlayer returned false', 'error');
}
} else {
log('â ensureGlobalPlayer function not available', 'error');
}
} catch (error) {
log(`â Error testing ensureGlobalPlayer: ${error.message}`, 'error');
}
}
async function testDirectPlay() {
log('đĩ Testing direct play button click...');
const audioUrl = 'https://apiboxfiles.erweima.ai/MTk4YTg3OGYtM2Y4NS00YWJhLWIxMjMtMjk1OWFjOTUwMDFk.mp3';
const title = 'Test Track - Direct Play';
const artist = 'Test Artist';
const artistId = 1;
try {
// Try multiple approaches
log('Attempting to play track...');
// Method 1: Global function
if (typeof window.playTrackWithGlobalPlayer === 'function') {
log('Trying window.playTrackWithGlobalPlayer...');
const success = await window.playTrackWithGlobalPlayer(audioUrl, title, artist, artistId);
if (success) {
log('â
Method 1 successful', 'success');
return;
}
}
// Method 2: Direct global player
if (typeof window.globalPlayer !== 'undefined' && window.globalPlayer.playTrack) {
log('Trying window.globalPlayer.playTrack...');
window.globalPlayer.wasPlaying = true;
window.globalPlayer.playTrack(audioUrl, title, artist, artistId);
log('â
Method 2 completed', 'success');
return;
}
// Method 3: Create audio element directly
log('Trying direct audio element creation...');
const audio = new Audio(audioUrl);
audio.volume = 0.5;
await audio.play();
log('â
Method 3 successful', 'success');
} catch (error) {
log(`â All methods failed: ${error.message}`, 'error');
}
}
// Copy the playTrackWithGlobalPlayer function from feed.php
async function playTrackWithGlobalPlayer(audioUrl, title, artist, artistId = null) {
console.log('đĩ Feed playTrackWithGlobalPlayer called:', { audioUrl, title, artist, artistId });
log(`đĩ Feed playTrackWithGlobalPlayer called: ${title} by ${artist}`);
// Validate audio URL
if (!audioUrl || audioUrl === 'null' || audioUrl === 'undefined' || audioUrl === '') {
console.error('đĩ INVALID AUDIO URL:', audioUrl);
log(`â Invalid audio URL: ${audioUrl}`, 'error');
alert('â Invalid audio URL: ' + audioUrl);
return;
}
// ENSURE GLOBAL PLAYER IS READY FIRST
if (typeof window.ensureGlobalPlayer === 'function') {
console.log('đĩ Ensuring global player is ready...');
log('Ensuring global player is ready...');
try {
await window.ensureGlobalPlayer();
console.log('đĩ Global player is ready');
log('Global player is ready', 'success');
} catch (error) {
console.error('đĩ Failed to ensure global player:', error);
log(`Failed to ensure global player: ${error.message}`, 'error');
}
}
// Check if global player is available
if (typeof window.globalPlayer === 'undefined') {
console.log('đĩ Global player not available, trying to initialize...');
log('Global player not available, trying to initialize...', 'error');
if (typeof initializeGlobalPlayer === 'function') {
initializeGlobalPlayer();
}
setTimeout(() => {
playTrackWithGlobalPlayer(audioUrl, title, artist, artistId);
}, 500);
return;
}
// Try the global player function first
if (typeof window.playTrackWithGlobalPlayer === 'function') {
try {
log('Trying global playTrackWithGlobalPlayer function...');
const success = await window.playTrackWithGlobalPlayer(audioUrl, title, artist, artistId);
if (success) {
console.log('đĩ Global player playTrackWithGlobalPlayer successful');
log('Global player playTrackWithGlobalPlayer successful', 'success');
return;
} else {
console.log('đĩ Global player returned false, trying fallback...');
log('Global player returned false, trying fallback...', 'error');
throw new Error('Global player returned false');
}
} catch (error) {
console.log('đĩ Global player error, trying fallback:', error);
log(`Global player error, trying fallback: ${error.message}`, 'error');
// Fall through to fallback
}
}
// Fallback to direct global player playTrack method
if (typeof window.globalPlayer.playTrack === 'function') {
try {
console.log('đĩ Trying fallback global player playTrack...');
log('Trying fallback global player playTrack...');
window.globalPlayer.wasPlaying = true;
window.globalPlayer.playTrack(audioUrl, title, artist, artistId);
console.log('đĩ Fallback playTrack call successful');
log('Fallback playTrack call successful', 'success');
return;
} catch (error) {
console.error('đĩ Fallback playTrack failed:', error);
log(`Fallback playTrack failed: ${error.message}`, 'error');
}
}
// Final fallback - show error
console.error('đĩ All playback methods failed, showing error message');
log('All playback methods failed, showing error message', 'error');
alert(`Failed to play: ${title} by ${artist}. Please try again.`);
}
// Initialize when page loads
window.addEventListener('load', function() {
log('đĩ Debug page loaded');
// Check initial status after a delay
setTimeout(() => {
checkPlayerStatus();
}, 1000);
});
</script>
</body>
</html>