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/-1a053046/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<?php
session_start();
require_once 'config/database.php';

// Include header
include 'includes/header.php';

$pdo = getDBConnection();

// Get recent community tracks
$stmt = $pdo->prepare("
    SELECT mt.*, u.name as artist_name
    FROM music_tracks mt 
    JOIN users u ON mt.user_id = u.id 
    WHERE mt.status = 'complete' 
    AND mt.audio_url IS NOT NULL
    ORDER BY mt.created_at DESC 
    LIMIT 20
");
$stmt->execute();
$tracks = $stmt->fetchAll();
?>

<div class="main-content">
    <style>
    body {
        padding-bottom: 120px; /* Space for global player */
    }
    
    .track-card {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .play-track-btn {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border: none;
        padding: 1rem 2rem;
        border-radius: 12px;
        cursor: pointer;
        margin: 1rem 0;
    }
    
    .play-track-btn.playing {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
        animation: playingPulse 2s ease-in-out infinite;
    }
    
    @keyframes playingPulse {
        0%, 100% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.5); }
        50% { box-shadow: 0 0 30px rgba(102, 126, 234, 0.8); }
    }
    </style>
    
    <section class="hero">
        <div class="container">
            <h1>🎵 Music Community</h1>
            <p>Latest tracks from our community</p>
        </div>
    </section>
    
    <section class="tracks">
        <div class="container">
            <?php if (empty($tracks)): ?>
                <p>No tracks found.</p>
            <?php else: ?>
                <?php foreach ($tracks as $track): ?>
                    <div class="track-card">
                        <h3><?= htmlspecialchars($track['title'] ?: 'Untitled') ?></h3>
                        <p>by <?= htmlspecialchars($track['artist_name']) ?></p>
                        <p><?= htmlspecialchars(substr($track['prompt'], 0, 100)) ?>...</p>
                        
                        <button class="play-track-btn" 
                                data-audio-url="<?= htmlspecialchars($track['audio_url']) ?>"
                                data-title="<?= htmlspecialchars($track['title'] ?: 'Untitled') ?>"
                                data-artist="<?= htmlspecialchars($track['artist_name']) ?>"
                                data-track-id="<?= $track['id'] ?>">
                            <i class="fas fa-play"></i> Play
                        </button>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </section>
</div>

<script>
console.log('🎵 SIMPLE COMMUNITY PAGE LOADED');

document.addEventListener('DOMContentLoaded', function() {
    console.log('🎵 DOMContentLoaded fired');
    
    const playButtons = document.querySelectorAll('.play-track-btn');
    console.log('🎵 Found', playButtons.length, 'play buttons');
    
    playButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            
            const audioUrl = this.getAttribute('data-audio-url');
            const title = this.getAttribute('data-title');
            const artist = this.getAttribute('data-artist');
            
            console.log('🎵 Play button clicked:', { audioUrl, title, artist });
            
            if (!audioUrl) {
                alert('No audio URL');
                return;
            }
            
            // Clear other playing states
            document.querySelectorAll('.play-track-btn').forEach(btn => {
                btn.classList.remove('playing');
                btn.innerHTML = '<i class="fas fa-play"></i> Play';
            });
            
            // Set this as playing
            this.classList.add('playing');
            this.innerHTML = '<i class="fas fa-pause"></i> Playing';
            
            // Try to use global player
            if (typeof window.enhancedGlobalPlayer !== 'undefined') {
                window.enhancedGlobalPlayer.playTrack(audioUrl, title, artist);
                console.log('🎵 Sent to enhanced global player');
            } else {
                alert('Global player not found');
            }
        });
    });
});
</script>

<?php include 'includes/footer.php'; ?>