 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/-28d26f47/ |
<?php
session_start();
// Handle AJAX requests
$is_ajax = isset($_GET['ajax']) && $_GET['ajax'] == '1';
// For AJAX requests, we might not have a session, so handle gracefully
if (!$is_ajax) {
// Check if user is logged in for full page loads
if (!isset($_SESSION['user_id'])) {
header('Location: /auth/login.php');
exit;
}
// Include header only for full page loads
include 'includes/header.php';
// Global player is included via footer.php
}
require_once 'config/database.php';
$pdo = getDBConnection();
// For AJAX requests, we might not have a session, so handle gracefully
if (isset($_SESSION['user_id'])) {
$user_id = $_SESSION['user_id'];
// Get user info
$stmt = $pdo->prepare("SELECT name FROM users WHERE id = ?");
$stmt->execute([$user_id]);
$user = $stmt->fetch();
$user_name = $user['name'] ?? 'User';
} else {
// For AJAX requests without session, use a default user or handle differently
$user_id = null;
$user_name = 'Guest';
}
// Get feed tracks - show recent tracks from followed users first, then recent tracks as fallback
if ($user_id) {
// First try to get tracks from followed users
$stmt = $pdo->prepare("
SELECT
mt.id,
mt.title,
mt.prompt,
mt.audio_url,
mt.duration,
mt.created_at,
u.name as artist_name,
u.id as artist_id,
(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 track_likes WHERE track_id = mt.id AND user_id = ?) as user_liked
FROM music_tracks mt
JOIN users u ON mt.user_id = u.id
JOIN user_follows uf ON mt.user_id = uf.following_id
WHERE uf.follower_id = ? AND mt.status = 'complete'
ORDER BY mt.created_at DESC
LIMIT 10
");
$stmt->execute([$user_id, $user_id]);
$feed_tracks = $stmt->fetchAll();
// If no tracks from followed users, get recent tracks
if (empty($feed_tracks)) {
$stmt = $pdo->prepare("
SELECT
mt.id,
mt.title,
mt.prompt,
mt.audio_url,
mt.duration,
mt.created_at,
u.name as artist_name,
u.id as artist_id,
(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 track_likes WHERE track_id = mt.id AND user_id = ?) as user_liked
FROM music_tracks mt
JOIN users u ON mt.user_id = u.id
WHERE mt.status = 'complete'
ORDER BY mt.created_at DESC
LIMIT 15
");
$stmt->execute([$user_id]);
$feed_tracks = $stmt->fetchAll();
}
} else {
// For guests, get recent tracks
$stmt = $pdo->prepare("
SELECT
mt.id,
mt.title,
mt.prompt,
mt.audio_url,
mt.duration,
mt.created_at,
u.name as artist_name,
u.id as artist_id,
(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,
0 as user_liked
FROM music_tracks mt
JOIN users u ON mt.user_id = u.id
WHERE mt.status = 'complete'
ORDER BY mt.created_at DESC
LIMIT 15
");
$stmt->execute();
$feed_tracks = $stmt->fetchAll();
}
// Get suggested users to follow
if ($user_id) {
$stmt = $pdo->prepare("
SELECT
u.id,
u.name,
COUNT(mt.id) as track_count,
(SELECT COUNT(*) FROM user_follows WHERE following_id = u.id) as followers_count
FROM users u
LEFT JOIN music_tracks mt ON u.id = mt.user_id AND mt.status = 'complete'
WHERE u.id NOT IN (
SELECT following_id FROM user_follows WHERE follower_id = ?
) AND u.id != ?
GROUP BY u.id
ORDER BY track_count DESC, followers_count DESC
LIMIT 5
");
$stmt->execute([$user_id, $user_id]);
$suggested_users = $stmt->fetchAll();
} else {
// For guests, show some popular users
$stmt = $pdo->prepare("
SELECT
u.id,
u.name,
COUNT(mt.id) as track_count,
(SELECT COUNT(*) FROM user_follows WHERE following_id = u.id) as followers_count
FROM users u
LEFT JOIN music_tracks mt ON u.id = mt.user_id AND mt.status = 'complete'
GROUP BY u.id
ORDER BY track_count DESC, followers_count DESC
LIMIT 5
");
$stmt->execute();
$suggested_users = $stmt->fetchAll();
}
// Set page variables for header
$page_title = 'Your Feed - SoundStudioPro';
$page_description = 'Discover music from artists you follow. Your personalized AI music feed.';
$current_page = 'feed';
// Include header only for full page loads
if (!isset($_GET['ajax'])) {
include 'includes/header.php';
} else {
// For AJAX requests, wrap content in the proper container structure
echo '<div class="container" id="pageContainer">';
}
?>
<style>
/* 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;
}
/* Feed Content */
.feed-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;
}
.feed-container {
max-width: 120rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 300px;
gap: 4rem;
}
/* Feed Main */
.feed-main {
min-height: 50rem;
}
.feed-header {
margin-bottom: 4rem;
}
.feed-title {
font-size: 3.2rem;
font-weight: 700;
color: white;
margin-bottom: 1rem;
}
.feed-subtitle {
font-size: 1.6rem;
color: #a0aec0;
}
/* Feed Sidebar */
.feed-sidebar {
position: sticky;
top: 12rem;
height: fit-content;
}
.sidebar-section {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 3rem;
margin-bottom: 3rem;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-title {
font-size: 2rem;
font-weight: 700;
color: white;
margin-bottom: 2rem;
}
/* Suggested Users */
.suggested-user {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.suggested-user:last-child {
border-bottom: none;
}
.user-avatar {
width: 5rem;
height: 5rem;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 900;
color: white;
}
.user-info {
flex: 1;
}
.user-name {
font-size: 1.6rem;
font-weight: 600;
color: white;
margin-bottom: 0.5rem;
}
.user-stats {
font-size: 1.2rem;
color: #a0aec0;
}
.follow-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 8px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.follow-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.follow-btn.following {
background: rgba(34, 197, 94, 0.2);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #22c55e;
}
/* Track Cards */
.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;
margin-bottom: 3rem;
}
.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-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;
}
.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;
}
.track-details-info {
flex: 1;
}
.track-title {
font-size: 2rem;
font-weight: 700;
color: white;
margin-bottom: 0.5rem;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.track-artist {
font-size: 1.4rem;
color: #667eea;
font-weight: 500;
word-wrap: break-word;
overflow-wrap: break-word;
}
.playable-badge {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.track-stats {
display: flex;
gap: 0.5rem;
align-items: center;
flex-shrink: 0;
margin-left: auto;
}
.stat-item {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 1.1rem;
color: #ffffff;
background: rgba(255, 255, 255, 0.15);
padding: 0.2rem 0.6rem;
border-radius: 8px;
transition: all 0.3s ease;
white-space: nowrap;
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.status-badge {
padding: 0.3rem 0.8rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
}
.status-complete {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
}
/* Comments Modal */
.comments-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 10000;
backdrop-filter: blur(10px);
}
.comments-modal-content {
background: var(--bg-card);
border-radius: 20px;
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
border: 1px solid var(--border-light);
}
.comments-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
border-bottom: 1px solid var(--border-light);
}
.comments-modal-header h3 {
color: white;
font-size: 2rem;
margin: 0;
}
.close-modal {
background: none;
border: none;
color: #a0aec0;
font-size: 2rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.close-modal:hover {
color: white;
background: rgba(255, 255, 255, 0.1);
}
.comments-list {
max-height: 400px;
overflow-y: auto;
padding: 2rem;
}
.comment-item {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-light);
}
.comment-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.comment-avatar {
flex-shrink: 0;
}
.comment-avatar .default-avatar {
width: 40px;
height: 40px;
font-size: 1.6rem;
}
.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;
line-height: 1.6;
font-size: 1.4rem;
}
.comment-form {
padding: 2rem;
border-top: 1px solid var(--border-light);
background: rgba(255, 255, 255, 0.02);
}
.comment-form textarea {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 1rem;
color: white;
font-size: 1.4rem;
resize: vertical;
margin-bottom: 1rem;
}
.comment-form textarea:focus {
outline: none;
border-color: var(--primary-gradient);
}
.loading-comments, .no-comments {
text-align: center;
color: #a0aec0;
font-size: 1.4rem;
padding: 2rem;
}
/* Notifications */
.notification {
position: fixed;
top: 100px;
right: 20px;
background: var(--bg-card);
color: white;
padding: 1.5rem 2rem;
border-radius: 12px;
box-shadow: var(--shadow-medium);
border: 2px solid var(--border-medium);
z-index: 10001;
transform: translateX(100%);
transition: transform 0.3s ease;
max-width: 300px;
}
.notification.show {
transform: translateX(0);
}
.notification-content {
display: flex;
align-items: center;
gap: 1rem;
}
.notification-success {
border-color: #28a745;
}
.notification-error {
border-color: #dc3545;
}
.notification-info {
border-color: #17a2b8;
}
/* Social button states */
.social-btn.liked {
color: #e53e3e;
background: rgba(229, 62, 62, 0.1);
}
.social-btn.liked i {
animation: heartBeat 0.3s ease;
}
@keyframes heartBeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
.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-count {
font-size: 1.2rem;
font-weight: 600;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 8rem 2rem;
color: #a0aec0;
}
.empty-icon {
font-size: 8rem;
margin-bottom: 2rem;
color: #667eea;
}
.empty-title {
font-size: 3.2rem;
color: white;
margin-bottom: 1.5rem;
}
.empty-description {
font-size: 1.8rem;
margin-bottom: 3rem;
}
/* Responsive */
@media (max-width: 1024px) {
.feed-container {
grid-template-columns: 1fr;
}
.feed-sidebar {
position: static;
}
}
@media (max-width: 768px) {
.hero {
margin-top: 6rem; /* Less margin on mobile */
padding: 6rem 0 4rem;
}
.hero-title {
font-size: 4rem;
}
.hero-subtitle {
font-size: 1.6rem;
}
.feed-container {
grid-template-columns: 1fr;
gap: 3rem;
}
.feed-title {
font-size: 2.8rem;
}
.feed-subtitle {
font-size: 1.4rem;
}
.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;
}
.sidebar-section {
padding: 2rem;
}
.sidebar-title {
font-size: 1.8rem;
}
.suggested-user {
padding: 1.5rem;
}
.user-name {
font-size: 1.4rem;
}
.user-stats {
font-size: 1.2rem;
}
.follow-btn {
padding: 0.8rem 1.5rem;
font-size: 1.2rem;
}
.feed-sidebar .btn {
padding: 1.2rem 2rem;
font-size: 1.4rem;
}
.container {
padding: 0 1.5rem;
}
.feed-content {
padding: 4rem 0;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 3.2rem;
}
.hero-subtitle {
font-size: 1.4rem;
}
.feed-title {
font-size: 2.4rem;
}
.feed-subtitle {
font-size: 1.3rem;
}
.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;
}
.social-btn {
padding: 0.8rem 1.2rem;
font-size: 1.1rem;
}
.sidebar-section {
padding: 1.5rem;
}
.sidebar-title {
font-size: 1.6rem;
}
.suggested-user {
padding: 1.2rem;
}
.user-name {
font-size: 1.3rem;
}
.user-stats {
font-size: 1.1rem;
}
.follow-btn {
padding: 0.6rem 1.2rem;
font-size: 1.1rem;
}
.feed-sidebar .btn {
padding: 1rem 1.5rem;
font-size: 1.3rem;
}
.container {
padding: 0 1rem;
}
.feed-content {
padding: 3rem 0;
}
}
</style>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<div class="hero-badge">🎵 Your Feed</div>
<h1 class="hero-title">Discover Music from Artists You Follow</h1>
<p class="hero-subtitle">Your personalized AI music feed. Stay updated with the latest tracks from your favorite creators.</p>
</div>
</section>
<!-- Feed Content -->
<section class="feed-content">
<div class="feed-container">
<!-- Feed Main -->
<div class="feed-main">
<div class="feed-header">
<h2 class="feed-title">Your Feed</h2>
<p class="feed-subtitle">
<?php
if ($user_id) {
// Check if we have follows
$follow_check = $pdo->prepare("SELECT COUNT(*) as follow_count FROM user_follows WHERE follower_id = ?");
$follow_check->execute([$user_id]);
$follows = $follow_check->fetch();
if ($follows['follow_count'] > 0) {
echo "Latest tracks from artists you follow";
} else {
echo "Discover some recent tracks while you start following artists";
}
} else {
echo "Discover some recent tracks from our community";
}
?>
</p>
</div>
<?php if (empty($feed_tracks)): ?>
<div class="empty-state">
<div class="empty-icon">🎵</div>
<h3 class="empty-title">Your feed is empty</h3>
<p class="empty-description">
Debug: User ID = <?= $user_id ? $user_id : 'Not logged in' ?><br>
Feed tracks count: <?= count($feed_tracks) ?><br>
Start following artists to see their latest tracks in your feed!
</p>
<div style="display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap;">
<a href="/community.php" class="btn btn-primary">
<i class="fas fa-users"></i> Discover Artists
</a>
<a href="/create.php" class="btn btn-secondary">
<i class="fas fa-plus"></i> Create Your First Track
</a>
</div>
</div>
<?php else: ?>
<div style="background: rgba(102, 126, 234, 0.1); padding: 1rem; border-radius: 8px; margin-bottom: 2rem; color: white;">
<strong>Debug:</strong> Found <?= count($feed_tracks) ?> tracks. User ID: <?= $user_id ? 'Yes' : 'No' ?>
</div>
<?php foreach ($feed_tracks as $track): ?>
<div class="track-card" data-track-id="<?= $track['id'] ?>">
<div class="track-header">
<div class="track-info">
<div class="artist-profile">
<div class="default-avatar clickable-avatar"
title="<?= htmlspecialchars($track['artist_name']) ?>'s profile"
onclick="window.ajaxNavigation ? window.ajaxNavigation.navigateToArtistProfile(<?= $track['artist_id'] ?>) : window.location.href='/artist_profile.php?id=<?= $track['artist_id'] ?>'">
<?= substr(htmlspecialchars($track['artist_name']), 0, 1) ?>
</div>
</div>
<div class="track-details-info">
<div class="track-title">
<?= htmlspecialchars($track['title']) ?>
<span class="playable-badge" title="Available for playback">
<i class="fas fa-play-circle"></i> Playable
</span>
</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="Likes">
<i class="fas fa-heart"></i> <?= number_format($track['like_count']) ?>
</span>
<span class="stat-item" title="Comments">
<i class="fas fa-comment"></i> <?= number_format($track['comment_count']) ?>
</span>
</div>
</div>
<div class="track-prompt">
<strong>Original Prompt:</strong> <?= htmlspecialchars(substr($track['prompt'], 0, 150)) ?>...
</div>
<div class="track-details">
<span><i class="fas fa-clock"></i> <?= floor($track['duration'] / 60) ?>m <?= $track['duration'] % 60 ?>s</span>
<span><i class="fas fa-calendar"></i> <?= date('M j, Y', strtotime($track['created_at'])) ?></span>
<span class="status-badge status-complete">
Complete
</span>
</div>
<div class="track-actions">
<button class="btn btn-primary play-track-btn"
onclick="playTrackWithGlobalPlayer('<?= htmlspecialchars($track['audio_url']) ?>', '<?= htmlspecialchars($track['title']) ?>', '<?= htmlspecialchars($track['artist_name']) ?>', <?= $track['artist_id'] ?>)">
<i class="fas fa-play"></i> Play
</button>
<a href="/artist_profile.php?id=<?= $track['artist_id'] ?>" class="btn btn-secondary">
<i class="fas fa-user"></i> View Artist
</a>
<button class="btn btn-secondary" onclick="downloadTrack('<?= htmlspecialchars($track['audio_url']) ?>', '<?= htmlspecialchars($track['title']) ?>')">
<i class="fas fa-download"></i> Download
</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']) ?>')">
<i class="fas fa-share"></i>
</button>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<!-- Feed Sidebar -->
<div class="feed-sidebar">
<!-- Suggested Users -->
<div class="sidebar-section">
<h3 class="sidebar-title">Suggested Artists</h3>
<?php if (empty($suggested_users)): ?>
<p style="color: #a0aec0; text-align: center;">No suggestions available</p>
<?php else: ?>
<?php foreach ($suggested_users as $user): ?>
<div class="suggested-user">
<div class="user-avatar">
<?= strtoupper(substr($user['name'], 0, 1)) ?>
</div>
<div class="user-info">
<div class="user-name"><?= htmlspecialchars($user['name']) ?></div>
<div class="user-stats"><?= $user['track_count'] ?> tracks • <?= $user['followers_count'] ?> followers</div>
</div>
<button class="follow-btn" onclick="toggleFollow(<?= $user['id'] ?>, this)">
Follow
</button>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<!-- Quick Actions -->
<div class="sidebar-section">
<h3 class="sidebar-title">Quick Actions</h3>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<a href="/create.php" class="btn btn-primary">
<i class="fas fa-plus"></i> Create Music
</a>
<a href="/community.php" class="btn btn-secondary">
<i class="fas fa-users"></i> Discover Artists
</a>
<a href="/library_new.php" class="btn btn-secondary">
<i class="fas fa-music"></i> My Library
</a>
</div>
</div>
</div>
</div>
</section>
<script>
// Play track using global player - ENHANCED VERSION
async function playTrackWithGlobalPlayer(audioUrl, title, artist, artistId = null) {
console.log('🎵 Feed playTrackWithGlobalPlayer called:', { audioUrl, title, artist, artistId });
// Check if global player is available
if (typeof window.globalPlayer === 'undefined') {
console.log('🎵 Global player not available, trying to initialize...');
if (typeof initializeGlobalPlayer === 'function') {
initializeGlobalPlayer();
}
setTimeout(() => {
playTrackWithGlobalPlayer(audioUrl, title, artist, artistId);
}, 500);
return;
}
// Try the global player function first
if (typeof window.playTrackWithGlobalPlayer === 'function') {
const success = await window.playTrackWithGlobalPlayer(audioUrl, title, artist, artistId);
if (success) {
console.log('🎵 Global player playTrackWithGlobalPlayer successful');
return;
}
}
// Fallback to direct global player playTrack method
if (typeof window.globalPlayer.playTrack === 'function') {
try {
console.log('🎵 Trying fallback global player playTrack...');
window.globalPlayer.playTrack(audioUrl, title, artist, artistId);
console.log('🎵 Fallback playTrack call successful');
return;
} catch (error) {
console.error('🎵 Fallback playTrack failed:', error);
}
}
// Final fallback - show error
console.error('🎵 All playback methods failed, showing error message');
alert(`Failed to play: ${title} by ${artist}. Please try again.`);
}
// Download track function
function downloadTrack(audioUrl, title) {
const link = document.createElement('a');
link.href = audioUrl;
link.download = `${title}.mp3`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// Share track function
function shareTrack(trackId, title) {
const url = `${window.location.origin}/artist_profile.php?track=${trackId}`;
const text = `Check out "${title}" on SoundStudioPro!`;
if (navigator.share) {
navigator.share({
title: title,
text: text,
url: url
});
} else {
// Fallback: copy to clipboard
navigator.clipboard.writeText(`${text} ${url}`).then(() => {
alert('Track link copied to clipboard!');
}).catch(() => {
// Final fallback: show URL
prompt('Share this link:', url);
});
}
}
// Social Functions
function toggleLike(trackId, button) {
// Show loading state
const originalHTML = button.innerHTML;
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
button.disabled = true;
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);
if (data.action === 'liked') {
countSpan.textContent = currentCount + 1;
showNotification('Track liked!', 'success');
} else {
countSpan.textContent = Math.max(0, currentCount - 1);
showNotification('Track unliked', 'info');
}
} else {
showNotification(data.message || 'Error updating like', 'error');
}
})
.catch(error => {
console.error('Like error:', error);
showNotification('Error updating like', 'error');
})
.finally(() => {
// Restore button state
button.innerHTML = originalHTML;
button.disabled = false;
});
}
function toggleFollow(userId, button) {
// Show loading state
const originalText = button.textContent;
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
button.disabled = true;
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');
if (data.action === 'followed') {
button.textContent = 'Following';
showNotification('Artist followed!', 'success');
} else {
button.textContent = 'Follow';
showNotification('Artist unfollowed', 'info');
}
} else {
showNotification(data.message || 'Error updating follow', 'error');
}
})
.catch(error => {
console.error('Follow error:', error);
showNotification('Error updating follow', 'error');
})
.finally(() => {
// Restore button state if error
if (!button.classList.contains('following') && button.textContent === 'Following') {
button.textContent = 'Follow';
}
button.disabled = false;
});
}
// Comments Modal System
let commentsModal = null;
let currentTrackId = null;
function showComments(trackId) {
currentTrackId = trackId;
// Create modal if it doesn't exist
if (!commentsModal) {
createCommentsModal();
}
// Load comments
loadComments(trackId);
// Show modal
commentsModal.style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function createCommentsModal() {
commentsModal = document.createElement('div');
commentsModal.className = 'comments-modal';
commentsModal.innerHTML = `
<div class="comments-modal-content">
<div class="comments-modal-header">
<h3>Comments</h3>
<button class="close-modal" onclick="closeCommentsModal()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="comments-list" id="commentsList">
<div class="loading-comments">
<i class="fas fa-spinner fa-spin"></i> Loading comments...
</div>
</div>
<div class="comment-form">
<textarea id="commentText" placeholder="Write a comment..." rows="3"></textarea>
<button onclick="addComment()" class="btn btn-primary">
<i class="fas fa-paper-plane"></i> Post Comment
</button>
</div>
</div>
`;
document.body.appendChild(commentsModal);
// Close modal when clicking outside
commentsModal.addEventListener('click', (e) => {
if (e.target === commentsModal) {
closeCommentsModal();
}
});
}
function closeCommentsModal() {
if (commentsModal) {
commentsModal.style.display = 'none';
document.body.style.overflow = 'auto';
}
}
function loadComments(trackId) {
const commentsList = document.getElementById('commentsList');
commentsList.innerHTML = '<div class="loading-comments"><i class="fas fa-spinner fa-spin"></i> Loading comments...</div>';
fetch(`/api_social.php?action=get_comments&track_id=${trackId}`)
.then(response => response.json())
.then(data => {
if (data.success) {
displayComments(data.comments);
} else {
commentsList.innerHTML = '<div class="no-comments">Error loading comments</div>';
}
})
.catch(error => {
console.error('Error loading comments:', error);
commentsList.innerHTML = '<div class="no-comments">Error loading comments</div>';
});
}
function displayComments(comments) {
const commentsList = document.getElementById('commentsList');
if (comments.length === 0) {
commentsList.innerHTML = '<div class="no-comments">No comments yet. Be the first to comment!</div>';
return;
}
commentsList.innerHTML = 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\'>${comment.user_name.charAt(0)}</div>'">` :
`<div class="default-avatar">${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">${escapeHtml(comment.comment)}</div>
</div>
</div>
`).join('');
}
function addComment() {
const commentText = document.getElementById('commentText').value.trim();
if (!commentText) {
showNotification('Please enter a comment', 'error');
return;
}
const button = document.querySelector('.comment-form button');
const originalText = button.innerHTML;
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Posting...';
button.disabled = true;
fetch('/api_social.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
action: 'comment',
track_id: currentTrackId,
comment: commentText
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
document.getElementById('commentText').value = '';
loadComments(currentTrackId);
showNotification('Comment posted successfully!', 'success');
} else {
showNotification(data.message || 'Error posting comment', 'error');
}
})
.catch(error => {
console.error('Comment error:', error);
showNotification('Error posting comment', 'error');
})
.finally(() => {
button.innerHTML = originalText;
button.disabled = false;
});
}
// Utility functions
function formatDate(dateString) {
const date = new Date(dateString);
const now = new Date();
const diff = now - date;
if (diff < 60000) return 'Just now';
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
if (diff < 2592000000) return `${Math.floor(diff / 86400000)}d ago`;
return date.toLocaleDateString();
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `notification notification-${type}`;
notification.innerHTML = `
<div class="notification-content">
<i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
<span>${message}</span>
</div>
`;
document.body.appendChild(notification);
// Animate in
setTimeout(() => notification.classList.add('show'), 100);
// Remove after 3 seconds
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => document.body.removeChild(notification), 300);
}, 3000);
}
</script>
<?php
// Include footer only for full page loads
if (!$is_ajax) {
include 'includes/footer.php';
} else {
// For AJAX requests, include footer which already contains global player
include 'includes/footer.php';
echo '</div>';
}
?>