 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/-1caf4efe/ |
<?php
session_start();
require_once 'config/database.php';
// Handle AJAX requests
$is_ajax = isset($_GET['ajax']) && $_GET['ajax'] == '1';
// Include header only for full page loads
if (!$is_ajax) {
include 'includes/header.php';
}
// Global player is included via footer.php
$pdo = getDBConnection();
// Get user name from database if logged in
$user_name = 'Guest';
$user_id = null;
if (isset($_SESSION['user_id'])) {
$stmt = $pdo->prepare("SELECT name FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$user = $stmt->fetch();
$user_name = $user['name'] ?? 'User';
$user_id = $_SESSION['user_id'];
}
// Get recent community tracks with social data
try {
$stmt = $pdo->prepare("
SELECT
mt.id,
mt.title,
mt.prompt,
mt.audio_url,
mt.duration,
mt.created_at,
mt.user_id,
u.name as artist_name,
u.id as artist_id,
u.profile_image,
(SELECT COUNT(*) FROM track_likes WHERE track_id = mt.id) as like_count,
(SELECT COUNT(*) FROM track_comments WHERE track_id = mt.id) as comment_count,
(SELECT COUNT(*) FROM user_follows WHERE follower_id = ? AND following_id = mt.user_id) as is_following,
(SELECT COUNT(*) FROM track_likes WHERE track_id = mt.id AND user_id = ?) as user_liked,
0 as view_count,
0 as share_count,
0 as play_count,
CASE
WHEN mt.created_at >= DATE_SUB(NOW(), INTERVAL 1 HOUR) THEN '🔥 Hot'
WHEN mt.created_at >= DATE_SUB(NOW(), INTERVAL 24 HOUR) THEN '⭐ New'
WHEN (SELECT COUNT(*) FROM track_likes WHERE track_id = mt.id) > 10 THEN '💎 Popular'
ELSE ''
END as badge
FROM music_tracks mt
JOIN users u ON mt.user_id = u.id
WHERE mt.status = 'complete'
AND mt.audio_url IS NOT NULL
AND mt.audio_url != ''
AND mt.audio_url LIKE '%apiboxfiles.erweima.ai%' -- Only CDN tracks
ORDER BY
CASE
WHEN mt.created_at >= DATE_SUB(NOW(), INTERVAL 1 HOUR) THEN 1
WHEN mt.created_at >= DATE_SUB(NOW(), INTERVAL 24 HOUR) THEN 2
ELSE 3
END,
(SELECT COUNT(*) FROM track_likes WHERE track_id = mt.id) DESC,
mt.created_at DESC
LIMIT 20
");
$stmt->execute([$user_id ?? 0, $user_id ?? 0]);
$recent_tracks = $stmt->fetchAll();
} catch (Exception $e) {
// Fallback to basic query if social query fails
$stmt = $pdo->prepare("
SELECT
mt.id,
mt.title,
mt.prompt,
mt.audio_url,
mt.duration,
mt.created_at,
mt.user_id,
u.name as artist_name,
u.id as artist_id,
u.profile_image,
0 as like_count,
0 as comment_count,
0 as is_following,
0 as user_liked,
0 as view_count,
0 as share_count,
0 as play_count,
'' as badge
FROM music_tracks mt
JOIN users u ON mt.user_id = u.id
WHERE mt.status = 'complete'
AND mt.audio_url IS NOT NULL
AND mt.audio_url != ''
AND mt.audio_url LIKE '%apiboxfiles.erweima.ai%' -- Only CDN tracks
ORDER BY mt.created_at DESC
LIMIT 20
");
$stmt->execute();
$recent_tracks = $stmt->fetchAll();
}
// Get community stats
try {
$stmt = $pdo->prepare("
SELECT
COUNT(DISTINCT mt.id) as total_tracks,
COUNT(DISTINCT mt.user_id) as total_artists,
COALESCE(SUM(mt.duration), 0) as total_duration,
(SELECT COUNT(*) FROM track_likes) as total_likes,
(SELECT COUNT(*) FROM track_comments) as total_comments,
(SELECT COUNT(*) FROM user_follows) as total_follows
FROM music_tracks mt
WHERE mt.status = 'complete'
");
$stmt->execute();
$community_stats = $stmt->fetch();
} catch (Exception $e) {
// Fallback stats if query fails
$community_stats = [
'total_tracks' => count($recent_tracks),
'total_artists' => count(array_unique(array_column($recent_tracks, 'artist_name'))),
'total_duration' => 0,
'total_likes' => 0,
'total_comments' => 0,
'total_follows' => 0
];
}
// Set page variables for header
$page_title = 'Community - SoundStudioPro';
$page_description = 'Explore the latest AI-generated music from our community. Discover amazing tracks from talented creators.';
$current_page = 'community';
// Include header only for full page loads
if (!$is_ajax) {
include 'includes/header.php';
} else {
// For AJAX requests, wrap content in the proper container structure
echo '<div class="container" id="pageContainer">';
}
?>
<div class="main-content">
<style>
/* Main Content */
.main-content {
margin-top: 0;
padding: 0;
min-height: calc(100vh - 100px);
}
/* Hero Section */
.hero {
padding: 8rem 0 6rem;
text-align: center;
color: white;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
position: relative;
overflow: hidden;
margin-bottom: 4rem;
margin-top: 0; /* Account for fixed header */
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(102,126,234,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
opacity: 0.3;
}
.hero-content {
max-width: 90rem;
margin: 0 auto;
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
color: #667eea;
padding: 1.2rem 2.4rem;
border-radius: 50px;
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 3rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(102, 126, 234, 0.3);
}
.hero-title {
font-size: 5.6rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 2.4rem;
background: linear-gradient(135deg, #ffffff, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 2rem;
font-weight: 400;
margin-bottom: 4rem;
opacity: 0.9;
max-width: 70rem;
margin-left: auto;
margin-right: auto;
color: #a0aec0;
}
/* Community Content */
.community-content {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
padding: 6rem 0;
border-radius: 40px 40px 0 0;
margin-top: -2rem;
position: relative;
z-index: 10;
}
.community-container {
max-width: 120rem;
margin: 0 auto;
}
/* Community Stats */
.community-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-bottom: 6rem;
}
.stat-card {
background: rgba(255, 255, 255, 0.05);
padding: 3rem;
border-radius: 20px;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
border-color: rgba(102, 126, 234, 0.3);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.1);
}
.stat-number {
font-size: 4.8rem;
font-weight: 900;
color: #667eea;
margin-bottom: 1rem;
}
.stat-label {
color: #a0aec0;
font-size: 1.8rem;
font-weight: 500;
}
/* Tracks Section */
.tracks-section {
margin-bottom: 6rem;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-title {
font-size: 4.8rem;
font-weight: 700;
color: white;
margin-bottom: 1.5rem;
}
.section-subtitle {
font-size: 2rem;
color: #a0aec0;
}
.tracks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 3rem;
}
.track-card {
background: rgba(255, 255, 255, 0.05);
padding: 3rem;
border-radius: 20px;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.track-card:hover {
transform: translateY(-5px);
border-color: rgba(102, 126, 234, 0.3);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.1);
}
.track-card.has-badge {
border-color: rgba(255, 193, 7, 0.3);
box-shadow: 0 10px 30px rgba(255, 193, 7, 0.1);
}
.track-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: linear-gradient(135deg, #ff6b6b, #ffa500);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 1.2rem;
font-weight: 700;
z-index: 10;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.track-stats {
display: flex;
gap: 1rem;
align-items: center;
}
.stat-item {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 1.2rem;
color: #a0aec0;
background: rgba(255, 255, 255, 0.05);
padding: 0.3rem 0.8rem;
border-radius: 12px;
transition: all 0.3s ease;
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.track-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
}
.track-info {
display: flex;
align-items: center;
gap: 1.5rem;
flex: 1;
}
.artist-profile {
flex-shrink: 0;
}
.artist-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.artist-avatar:hover {
transform: scale(1.05);
border-color: rgba(102, 126, 234, 0.6);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.clickable-avatar {
cursor: pointer;
position: relative;
}
.clickable-avatar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: rgba(102, 126, 234, 0.1);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.clickable-avatar:hover::after {
opacity: 1;
}
.default-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
font-weight: 700;
border: 3px solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.default-avatar:hover {
transform: scale(1.05);
border-color: rgba(102, 126, 234, 0.6);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.default-avatar.clickable-avatar {
cursor: pointer;
}
/* Comments Modal */
.comments-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.comments-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.comments-container {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
width: 100%;
max-width: 600px;
max-height: 80vh;
display: flex;
flex-direction: column;
}
.comments-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.comments-header h3 {
color: white;
font-size: 2rem;
margin: 0;
}
.close-btn {
background: none;
border: none;
color: white;
font-size: 2.4rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.3s ease;
}
.close-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.comments-list {
flex: 1;
overflow-y: auto;
padding: 2rem;
max-height: 400px;
}
.comment-item {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
}
.comment-avatar {
flex-shrink: 0;
}
.default-avatar-small {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
font-weight: 700;
}
.comment-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.comment-content {
flex: 1;
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.comment-author {
color: white;
font-weight: 600;
font-size: 1.4rem;
}
.comment-date {
color: #a0aec0;
font-size: 1.2rem;
}
.comment-text {
color: #e2e8f0;
font-size: 1.4rem;
line-height: 1.5;
}
.comment-form {
padding: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.comment-form textarea {
width: 100%;
min-height: 80px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 1rem;
color: white;
font-size: 1.4rem;
resize: vertical;
margin-bottom: 1rem;
}
.comment-form textarea::placeholder {
color: #a0aec0;
}
.no-comments, .loading, .error {
text-align: center;
color: #a0aec0;
font-size: 1.4rem;
padding: 2rem;
}
.track-details-info {
flex: 1;
}
.track-title {
font-size: 2rem;
font-weight: 700;
color: white;
margin-bottom: 0.5rem;
}
.track-artist {
font-size: 1.4rem;
color: #667eea;
font-weight: 500;
}
.track-prompt {
font-size: 1.4rem;
color: #a0aec0;
line-height: 1.6;
margin-bottom: 2rem;
background: rgba(255, 255, 255, 0.05);
padding: 1.5rem;
border-radius: 12px;
}
.track-details {
display: flex;
gap: 2rem;
margin-bottom: 2rem;
font-size: 1.2rem;
color: #a0aec0;
}
.track-details span {
display: flex;
align-items: center;
gap: 0.5rem;
}
.track-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn {
padding: 1rem 2rem;
border: none;
border-radius: 12px;
font-size: 1.4rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.8rem;
}
.btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
/* Social Actions */
.social-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.social-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #a0aec0;
padding: 0.8rem 1.5rem;
border-radius: 8px;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.social-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.social-btn.liked {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.3);
color: #ef4444;
}
.social-btn.following {
background: rgba(34, 197, 94, 0.2);
border-color: rgba(34, 197, 94, 0.3);
color: #22c55e;
}
.social-count {
font-size: 1.2rem;
font-weight: 600;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 4rem;
grid-column: 1 / -1;
}
.empty-icon {
font-size: 6rem;
margin-bottom: 2rem;
}
.empty-title {
font-size: 2.4rem;
color: white;
margin-bottom: 1rem;
}
.empty-description {
font-size: 1.6rem;
color: #a0aec0;
margin-bottom: 3rem;
}
/* Responsive */
@media (max-width: 768px) {
.hero-title {
font-size: 4rem;
}
.hero-subtitle {
font-size: 1.6rem;
}
.section-title {
font-size: 3.2rem;
}
.section-subtitle {
font-size: 1.4rem;
}
.community-stats {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.stat-card {
padding: 2rem 1.5rem;
}
.stat-number {
font-size: 2.8rem;
}
.stat-label {
font-size: 1.2rem;
}
.tracks-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.track-card {
padding: 2rem;
}
.track-title {
font-size: 2rem;
}
.track-artist {
font-size: 1.4rem;
}
.track-prompt {
font-size: 1.4rem;
line-height: 1.5;
}
.track-details {
flex-wrap: wrap;
gap: 1rem;
}
.track-details span {
font-size: 1.2rem;
}
.track-actions {
flex-direction: column;
gap: 1rem;
}
.track-actions .btn {
width: 100%;
justify-content: center;
padding: 1.2rem 2rem;
font-size: 1.4rem;
}
.social-actions {
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.social-btn {
padding: 1rem 1.5rem;
font-size: 1.2rem;
}
.social-count {
font-size: 1.2rem;
}
.container {
padding: 0 1.5rem;
}
.community-content {
padding: 4rem 0;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 3.2rem;
}
.hero-subtitle {
font-size: 1.4rem;
}
.section-title {
font-size: 2.8rem;
}
.community-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.stat-card {
padding: 1.5rem;
}
.stat-number {
font-size: 2.4rem;
}
.track-card {
padding: 1.5rem;
}
.track-title {
font-size: 1.8rem;
}
.track-artist {
font-size: 1.2rem;
}
.track-prompt {
font-size: 1.3rem;
}
.track-actions .btn {
padding: 1rem 1.5rem;
font-size: 1.3rem;
}
.track-info {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.artist-avatar {
width: 50px;
height: 50px;
}
.default-avatar {
width: 50px;
height: 50px;
font-size: 2rem;
}
.social-btn {
padding: 0.8rem 1.2rem;
font-size: 1.1rem;
}
.container {
padding: 0 1rem;
}
.community-content {
padding: 3rem 0;
}
}
</style>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-badge">🌍 Community</div>
<h1 class="hero-title">Discover Amazing AI Music</h1>
<p class="hero-subtitle">Explore the latest tracks from our creative community. Get inspired by AI-generated music from talented artists around the world.</p>
</div>
</div>
</section>
<!-- Community Content -->
<section class="community-content">
<div class="container">
<div class="community-container">
<!-- Community Stats -->
<div class="community-stats">
<div class="stat-card">
<div class="stat-number"><?= $community_stats['total_tracks'] ?? count($recent_tracks) ?></div>
<div class="stat-label">Total Tracks</div>
</div>
<div class="stat-card">
<div class="stat-number"><?= $community_stats['total_artists'] ?? count(array_unique(array_column($recent_tracks, 'artist_name'))) ?></div>
<div class="stat-label">Active Artists</div>
</div>
<div class="stat-card">
<div class="stat-number"><?= $community_stats['total_likes'] ?? 0 ?></div>
<div class="stat-label">Total Likes</div>
</div>
<div class="stat-card">
<div class="stat-number"><?= $community_stats['total_follows'] ?? 0 ?></div>
<div class="stat-label">Total Follows</div>
</div>
</div>
<!-- Recent Tracks -->
<div class="tracks-section">
<div class="section-header">
<h2 class="section-title">Latest Community Tracks</h2>
<p class="section-subtitle">Fresh AI-generated music from our talented community</p>
</div>
<div class="tracks-grid">
<?php if (empty($recent_tracks)): ?>
<div class="empty-state">
<div class="empty-icon">🎵</div>
<h3 class="empty-title">No tracks yet</h3>
<p class="empty-description">Be the first to create amazing AI music for the community!</p>
<a href="/#create" class="btn btn-primary">
<i class="fas fa-plus"></i> Create Your First Track
</a>
</div>
<?php else: ?>
<?php foreach ($recent_tracks as $track): ?>
<div class="track-card <?= !empty($track['badge']) ? 'has-badge' : '' ?>" data-track-id="<?= $track['id'] ?>">
<?php if (!empty($track['badge'])): ?>
<div class="track-badge"><?= $track['badge'] ?></div>
<?php endif; ?>
<div class="track-header">
<div class="track-info">
<div class="artist-profile">
<?php if (!empty($track['profile_image'])): ?>
<img src="<?= htmlspecialchars($track['profile_image']) ?>"
alt="<?= htmlspecialchars($track['artist_name']) ?>"
class="artist-avatar clickable-avatar"
onclick="loadArtistProfile(<?= $track['user_id'] ?>)"
title="View <?= htmlspecialchars($track['artist_name']) ?>'s profile"
onerror="this.parentElement.innerHTML='<div class=\'default-avatar clickable-avatar\' onclick=\'loadArtistProfile(<?= $track['user_id'] ?>)\' title=\'View <?= htmlspecialchars($track['artist_name']) ?>\\'s profile\'><?= substr(htmlspecialchars($track['artist_name']), 0, 1) ?></div>'">
<?php else: ?>
<div class="default-avatar clickable-avatar" onclick="loadArtistProfile(<?= $track['user_id'] ?>)" title="View <?= htmlspecialchars($track['artist_name']) ?>'s profile"><?= substr(htmlspecialchars($track['artist_name']), 0, 1) ?></div>
<?php endif; ?>
</div>
<div class="track-details-info">
<div class="track-title"><?= htmlspecialchars($track['title']) ?></div>
<div class="track-artist">by <?= htmlspecialchars($track['artist_name']) ?></div>
</div>
</div>
<div class="track-stats">
<span class="stat-item" title="Views">
<i class="fas fa-eye"></i> <?= number_format($track['view_count'] ?? 0) ?>
</span>
<span class="stat-item" title="Plays">
<i class="fas fa-play"></i> <?= number_format($track['play_count'] ?? 0) ?>
</span>
</div>
</div>
<div class="track-prompt"><?= htmlspecialchars(substr($track['prompt'], 0, 100)) ?>...</div>
<div class="track-details">
<span><i class="fas fa-clock"></i> <?= round($track['duration'] / 60, 1) ?>m</span>
<span><i class="fas fa-calendar"></i> <?= date('M j, Y', strtotime($track['created_at'])) ?></span>
<span><i class="fas fa-share"></i> <?= number_format($track['share_count'] ?? 0) ?> shares</span>
</div>
<div class="track-actions">
<button class="btn btn-primary play-track-btn"
data-audio-url="<?= htmlspecialchars($track['audio_url']) ?>"
data-title="<?= htmlspecialchars($track['title']) ?>"
data-artist="<?= htmlspecialchars($track['artist_name']) ?>"
onclick="trackPlay(<?= $track['id'] ?>)">
<i class="fas fa-play"></i> Play
</button>
<button class="btn btn-secondary" onclick="loadArtistProfile(<?= $track['user_id'] ?>)">
<i class="fas fa-user"></i> View Artist
</button>
</div>
<!-- Social Actions -->
<div class="social-actions">
<button class="social-btn <?= $track['user_liked'] ? 'liked' : '' ?>" onclick="toggleLike(<?= $track['id'] ?>, this)">
<i class="fas fa-heart"></i>
<span class="social-count"><?= $track['like_count'] ?></span>
</button>
<button class="social-btn" onclick="showComments(<?= $track['id'] ?>)">
<i class="fas fa-comment"></i>
<span class="social-count"><?= $track['comment_count'] ?></span>
</button>
<button class="social-btn" onclick="shareTrack(<?= $track['id'] ?>, '<?= htmlspecialchars($track['title']) ?>', '<?= htmlspecialchars($track['artist_name']) ?>')">
<i class="fas fa-share-alt"></i>
<span class="social-count"><?= $track['share_count'] ?? 0 ?></span>
</button>
<?php if ($user_id && $user_id != $track['user_id']): ?>
<button class="social-btn <?= $track['is_following'] ? 'following' : '' ?>" onclick="toggleFollow(<?= $track['user_id'] ?>, this)">
<i class="fas fa-user-plus"></i>
<span><?= $track['is_following'] ? 'Following' : 'Follow' ?></span>
</button>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</section>
<script>
// Community page functionality using global player
// Check if global player is loaded
window.addEventListener('load', function() {
console.log('🎵 Community page loaded');
console.log('🎵 Global player status:', typeof window.globalPlayer !== 'undefined');
console.log('🎵 Global player element exists:', !!document.getElementById('globalMusicPlayer'));
if (typeof window.globalPlayer === 'undefined') {
console.error('🎵 Global player not loaded!');
// Try to manually initialize if not loaded
setTimeout(() => {
if (typeof window.globalPlayer !== 'undefined') {
console.log('🎵 Global player loaded after delay');
} else {
console.error('🎵 Global player still not available after delay');
}
}, 1000);
} else {
console.log('🎵 Global player loaded successfully');
// Force show the player
window.globalPlayer.showPlayer();
// Test the global player with a simple track
setTimeout(() => {
console.log('🎵 Testing global player with sample track...');
if (typeof window.globalPlayer.playTrack === 'function') {
console.log('🎵 Global player playTrack function exists');
} else {
console.error('🎵 Global player playTrack function missing!');
}
}, 2000);
}
});
// Social Functions
function toggleLike(trackId, button) {
if (!<?= $user_id ? 'true' : 'false' ?>) {
alert('Please log in to like tracks');
return;
}
fetch('/api_social.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'like', track_id: trackId })
})
.then(response => response.json())
.then(data => {
if (data.success) {
button.classList.toggle('liked');
const countSpan = button.querySelector('.social-count');
const currentCount = parseInt(countSpan.textContent);
countSpan.textContent = button.classList.contains('liked') ? currentCount + 1 : currentCount - 1;
}
});
}
function toggleFollow(userId, button) {
if (!<?= $user_id ? 'true' : 'false' ?>) {
alert('Please log in to follow users');
return;
}
fetch('/api_social.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'follow', user_id: userId })
})
.then(response => response.json())
.then(data => {
if (data.success) {
button.classList.toggle('following');
const span = button.querySelector('span');
span.textContent = button.classList.contains('following') ? 'Following' : 'Follow';
}
});
}
function showComments(trackId) {
// Create and show comments modal
const modal = document.createElement('div');
modal.className = 'comments-modal';
modal.innerHTML = `
<div class="comments-overlay">
<div class="comments-container">
<div class="comments-header">
<h3>Comments</h3>
<button class="close-btn" onclick="closeComments()">×</button>
</div>
<div class="comments-list" id="comments-list-${trackId}">
<div class="loading">Loading comments...</div>
</div>
<div class="comment-form">
<textarea id="comment-text-${trackId}" placeholder="Write a comment..." maxlength="500"></textarea>
<button onclick="addComment(${trackId})" class="btn btn-primary">Post Comment</button>
</div>
</div>
</div>
`;
document.body.appendChild(modal);
// Load comments
loadComments(trackId);
}
function closeComments() {
const modal = document.querySelector('.comments-modal');
if (modal) {
modal.remove();
}
}
function loadComments(trackId) {
fetch(`/api_social.php?action=get_comments&track_id=${trackId}`)
.then(response => response.json())
.then(data => {
const commentsList = document.getElementById(`comments-list-${trackId}`);
if (data.success && data.comments.length > 0) {
commentsList.innerHTML = data.comments.map(comment => `
<div class="comment-item">
<div class="comment-avatar">
${comment.profile_image ?
`<img src="${comment.profile_image}" alt="${comment.user_name}" onerror="this.parentElement.innerHTML='<div class=\'default-avatar-small\'>${comment.user_name.charAt(0)}</div>'">` :
`<div class="default-avatar-small">${comment.user_name.charAt(0)}</div>`
}
</div>
<div class="comment-content">
<div class="comment-header">
<span class="comment-author">${comment.user_name}</span>
<span class="comment-date">${formatDate(comment.created_at)}</span>
</div>
<div class="comment-text">${comment.comment}</div>
</div>
</div>
`).join('');
} else {
commentsList.innerHTML = '<div class="no-comments">No comments yet. Be the first to comment!</div>';
}
})
.catch(error => {
document.getElementById(`comments-list-${trackId}`).innerHTML = '<div class="error">Failed to load comments</div>';
});
}
function addComment(trackId) {
const commentText = document.getElementById(`comment-text-${trackId}`).value.trim();
if (!commentText) return;
if (!<?= $user_id ? 'true' : 'false' ?>) {
alert('Please log in to comment');
return;
}
fetch('/api_social.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'comment', track_id: trackId, comment: commentText })
})
.then(response => response.json())
.then(data => {
if (data.success) {
document.getElementById(`comment-text-${trackId}`).value = '';
loadComments(trackId); // Reload comments
// Update comment count
const commentBtn = document.querySelector(`[onclick="showComments(${trackId})"]`);
const countSpan = commentBtn.querySelector('.social-count');
const currentCount = parseInt(countSpan.textContent);
countSpan.textContent = currentCount + 1;
} else {
alert(data.message || 'Failed to post comment');
}
});
}
function formatDate(dateString) {
const date = new Date(dateString);
const now = new Date();
const diffMs = now - date;
const diffMins = Math.floor(diffMs / 60000);
const diffHours = Math.floor(diffMs / 3600000);
const diffDays = Math.floor(diffMs / 86400000);
if (diffMins < 1) return 'Just now';
if (diffMins < 60) return `${diffMins}m ago`;
if (diffHours < 24) return `${diffHours}h ago`;
if (diffDays < 7) return `${diffDays}d ago`;
return date.toLocaleDateString();
}
function shareTrack(trackId, title, artist) {
const shareUrl = `${window.location.origin}/artist_profile.php?id=${trackId}`;
const shareText = `Check out "${title}" by ${artist} on SoundStudioPro! 🎵`;
if (navigator.share) {
navigator.share({
title: `${title} by ${artist}`,
text: shareText,
url: shareUrl
}).then(() => {
// Track share
fetch('/api_social.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'share', track_id: trackId })
});
});
} else {
// Fallback: copy to clipboard
const shareData = `${shareText}\n${shareUrl}`;
navigator.clipboard.writeText(shareData).then(() => {
alert('Track link copied to clipboard!');
// Track share
fetch('/api_social.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'share', track_id: trackId })
});
});
}
}
// Track view when track card is visible
function trackView(trackId) {
fetch('/api_social.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'view', track_id: trackId })
});
}
// Track play when play button is clicked
function trackPlay(trackId) {
fetch('/api_social.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'play', track_id: trackId })
});
}
// Use global player for track playback
async function playTrack(audioUrl, title, artist) {
console.log('🎵 Community playTrack called:', { audioUrl, title, artist });
// Use the global player function
const success = await window.playTrackWithGlobalPlayer(audioUrl, title, artist);
if (!success) {
console.error('🎵 Global player failed, showing error message');
alert(`Failed to play: ${title} by ${artist}. Please try again.`);
}
}
// Setup play button event listeners with AJAX interference prevention
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.play-track-btn').forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
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 });
playTrack(audioUrl, title, artist);
});
});
// Track views when track cards come into view
const trackCards = document.querySelectorAll('.track-card');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const trackId = entry.target.getAttribute('data-track-id');
if (trackId) {
trackView(trackId);
}
}
});
}, { threshold: 0.5 });
trackCards.forEach(card => {
observer.observe(card);
});
});
// AJAX navigation for artist profiles
function loadArtistProfile(userId) {
console.log('🎵 Loading artist profile for user ID:', userId);
// Show loading state
const pageContainer = document.getElementById('pageContainer');
if (pageContainer) {
pageContainer.innerHTML = '<div class="loading-spinner"><i class="fas fa-spinner fa-spin"></i> Loading artist profile...</div>';
}
// Load the artist profile page via AJAX
fetch(`/artist_profile.php?id=${userId}&ajax=1`)
.then(response => response.text())
.then(html => {
if (pageContainer) {
pageContainer.innerHTML = html;
}
// Update browser URL without page reload
window.history.pushState({ userId: userId }, '', `/artist_profile.php?id=${userId}`);
console.log('🎵 Artist profile loaded successfully');
})
.catch(error => {
console.error('🎵 Error loading artist profile:', error);
alert('Failed to load artist profile. Please try again.');
// Fallback to regular navigation
window.location.href = `/artist_profile.php?id=${userId}`;
});
}
</script>
</div>
</div>
<?php
// Include footer only for full page loads
if (!$is_ajax) {
include 'includes/footer.php';
} else {
// Close the AJAX container
echo '</div>';
}
?>