 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/-6117e90a/ |
<?php
session_start();
require_once 'config/database.php';
echo "<!DOCTYPE html>
<html>
<head>
<title>Test Mobile Global Player</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background: #0a0a0a;
color: white;
}
.test-section {
border: 1px solid #333;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
}
.test-btn {
background: #4CAF50;
color: white;
padding: 15px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px 5px;
font-size: 16px;
}
.info { color: #4facfe; }
.success { color: #48bb78; }
.warning { color: #ed8936; }
.error { color: #e53e3e; }
/* Mobile-specific test styles */
@media (max-width: 768px) {
.test-btn {
display: block;
width: 100%;
margin: 10px 0;
min-height: 44px;
}
}
</style>
</head>
<body>
<h1>📱 Test Mobile Global Player</h1>
<div class='test-section'>
<h2>🎵 Mobile Player Test</h2>
<p class='info'>This page tests the mobile-friendly global player functionality.</p>
<button class='test-btn' onclick='testMobilePlayer()'>
📱 Test Mobile Player Display
</button>
<button class='test-btn' onclick='testTouchControls()'>
👆 Test Touch Controls
</button>
<button class='test-btn' onclick='testResponsiveLayout()'>
📐 Test Responsive Layout
</button>
<button class='test-btn' onclick='loadTestTrack()'>
🎵 Load Test Track
</button>
</div>
<div class='test-section'>
<h2>📊 Mobile Features Checklist</h2>
<ul>
<li class='info'>✅ Responsive layout (768px and below)</li>
<li class='info'>✅ Touch-friendly buttons (44px minimum)</li>
<li class='info'>✅ Proper spacing for mobile screens</li>
<li class='info'>✅ Landscape orientation support</li>
<li class='info'>✅ Volume controls accessible on mobile</li>
<li class='info'>✅ Playlist selector mobile-friendly</li>
<li class='info'>✅ Progress bar touch-optimized</li>
</ul>
</div>
<div class='test-section'>
<h2>🔧 Mobile Debug Info</h2>
<div id='mobileInfo'>
<p>Loading mobile information...</p>
</div>
</div>
<script>
// Include the global player
const script = document.createElement('script');
script.src = 'global_player.php';
document.head.appendChild(script);
function testMobilePlayer() {
console.log('📱 Testing mobile player display...');
if (window.enhancedGlobalPlayer) {
// Load a test track to show the player
window.enhancedGlobalPlayer.playTrack(
'https://soundstudiopro.com/audio_files/sample_track.mp3',
'Mobile Test Track',
'Test Artist',
999
);
alert('✅ Mobile player should now be visible at the bottom of the screen!');
} else {
alert('❌ Global player not loaded yet. Please wait and try again.');
}
}
function testTouchControls() {
console.log('👆 Testing touch controls...');
// Check if we're on a mobile device
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile) {
alert('📱 Mobile device detected! Touch controls should be optimized.');
} else {
alert('💻 Desktop detected. Test on a mobile device for full touch optimization.');
}
// Test touch event support
const touchSupported = 'ontouchstart' in window;
console.log('Touch support:', touchSupported);
}
function testResponsiveLayout() {
console.log('📐 Testing responsive layout...');
const width = window.innerWidth;
const height = window.innerHeight;
const orientation = width > height ? 'Landscape' : 'Portrait';
const info = document.getElementById('mobileInfo');
info.innerHTML = `
<p class='info'>Screen Size: ${width}x${height}</p>
<p class='info'>Orientation: ${orientation}</p>
<p class='info'>Device Width: ${width}px</p>
<p class='info'>Mobile Breakpoint: ${width <= 768 ? '✅ Active' : '❌ Not Active'}</p>
<p class='info'>Touch Support: ${('ontouchstart' in window) ? '✅ Yes' : '❌ No'}</p>
`;
}
function loadTestTrack() {
console.log('🎵 Loading test track...');
if (window.enhancedGlobalPlayer) {
// Simulate loading a track
window.enhancedGlobalPlayer.playTrack(
'https://soundstudiopro.com/audio_files/test_mobile.mp3',
'Mobile Test Song',
'Mobile Artist',
888
);
setTimeout(() => {
// Test all controls
const player = document.getElementById('enhancedGlobalPlayer');
if (player) {
console.log('✅ Player found and loaded');
console.log('Player classes:', player.className);
console.log('Player display:', getComputedStyle(player).display);
} else {
console.log('❌ Player not found');
}
}, 1000);
} else {
alert('❌ Global player not ready. Please wait and try again.');
}
}
// Auto-run mobile info on load
window.addEventListener('load', function() {
setTimeout(testResponsiveLayout, 1000);
});
// Monitor for global player readiness
let playerCheckInterval = setInterval(() => {
if (window.enhancedGlobalPlayer) {
console.log('✅ Global player loaded and ready for mobile testing');
clearInterval(playerCheckInterval);
}
}, 500);
</script>
</body>
</html>";
?>