 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/domains/soundstudiopro.com/private_html/utils/ |
<?php
session_start();
// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
header('Location: /auth/login.php');
exit;
}
require_once 'config/database.php';
$pdo = getDBConnection();
$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';
// OPTIMIZED: Using JOINs instead of correlated subqueries for better performance
// Get feed 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,
COALESCE(like_stats.like_count, 0) as like_count,
COALESCE(comment_stats.comment_count, 0) as comment_count,
CASE WHEN user_like_stats.track_id IS NOT NULL THEN 1 ELSE 0 END 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
LEFT JOIN (SELECT track_id, COUNT(*) as like_count FROM track_likes GROUP BY track_id) like_stats ON mt.id = like_stats.track_id
LEFT JOIN (SELECT track_id, COUNT(*) as comment_count FROM track_comments GROUP BY track_id) comment_stats ON mt.id = comment_stats.track_id
LEFT JOIN (SELECT track_id FROM track_likes WHERE user_id = ?) user_like_stats ON mt.id = user_like_stats.track_id
WHERE uf.follower_id = ? AND mt.status = 'complete'
AND mt.is_public = TRUE
ORDER BY COALESCE(mt.published_at, mt.created_at) DESC
LIMIT 20
");
$stmt->execute([$user_id, $user_id]);
$feed_tracks = $stmt->fetchAll();
// If feed is empty, get some recent tracks as fallback
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,
COALESCE(like_stats.like_count, 0) as like_count,
COALESCE(comment_stats.comment_count, 0) as comment_count,
CASE WHEN user_like_stats.track_id IS NOT NULL THEN 1 ELSE 0 END as user_liked
FROM music_tracks mt
JOIN users u ON mt.user_id = u.id
LEFT JOIN (SELECT track_id, COUNT(*) as like_count FROM track_likes GROUP BY track_id) like_stats ON mt.id = like_stats.track_id
LEFT JOIN (SELECT track_id, COUNT(*) as comment_count FROM track_comments GROUP BY track_id) comment_stats ON mt.id = comment_stats.track_id
LEFT JOIN (SELECT track_id FROM track_likes WHERE user_id = ?) user_like_stats ON mt.id = user_like_stats.track_id
WHERE mt.status = 'complete'
AND mt.is_public = TRUE
ORDER BY COALESCE(mt.published_at, mt.created_at) DESC
LIMIT 5
");
$stmt->execute([$user_id]);
$feed_tracks = $stmt->fetchAll();
}
// Get suggested users to follow
// OPTIMIZED: Using JOINs instead of correlated subqueries for better performance
$stmt = $pdo->prepare("
SELECT
u.id,
u.name,
COUNT(mt.id) as track_count,
COALESCE(follower_stats.followers_count, 0) as followers_count
FROM users u
LEFT JOIN music_tracks mt ON u.id = mt.user_id AND mt.status = 'complete'
LEFT JOIN (SELECT following_id, COUNT(*) as followers_count FROM user_follows GROUP BY following_id) follower_stats ON u.id = follower_stats.following_id
WHERE u.id NOT IN (
SELECT following_id FROM user_follows WHERE follower_id = ?
) AND u.id != ?
GROUP BY u.id, follower_stats.followers_count
ORDER BY track_count DESC, followers_count DESC
LIMIT 5
");
$stmt->execute([$user_id, $user_id]);
$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.';
// Include header
include 'includes/header.php';
?>
<style>
/* Main Content */
.main-content {
margin-top: 10rem;
padding: 4rem 0;
min-height: calc(100vh - 10rem);
}
/* 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;
}
.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-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-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-title {
font-size: 4rem;
}
.track-actions {
flex-direction: column;
}
.social-actions {
flex-wrap: wrap;
}
}
</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
// 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";
}
?>
</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">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: ?>
<?php foreach ($feed_tracks as $track): ?>
<div class="track-card">
<div class="track-header">
<div>
<div class="track-title"><?= htmlspecialchars($track['title']) ?></div>
<div class="track-artist">by <?= htmlspecialchars($track['artist_name']) ?></div>
</div>
</div>
<div class="track-prompt"><?= htmlspecialchars(substr($track['prompt'], 0, 100)) ?>...</div>
<div class="track-details">
<span><i class="fas fa-clock"></i> <?= $track['duration'] ?>s</span>
<span><i class="fas fa-calendar"></i> <?= date('M j, Y', strtotime($track['created_at'])) ?></span>
</div>
<div class="track-actions">
<button class="btn btn-primary" onclick="playTrack('<?= htmlspecialchars($track['audio_url']) ?>', '<?= htmlspecialchars($track['title']) ?>', '<?= htmlspecialchars($track['artist_name']) ?>')">
<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>
</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>
</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.php" class="btn btn-secondary">
<i class="fas fa-music"></i> My Library
</a>
</div>
</div>
</div>
</div>
</section>
<script>
let currentAudio = null;
let currentTrackIndex = 0;
let playlist = [];
let isPlaying = false;
// Play track
function playTrack(audioUrl, title, artist) {
if (currentAudio) {
currentAudio.pause();
currentAudio = null;
}
currentAudio = new Audio(audioUrl);
currentAudio.addEventListener('loadedmetadata', () => {
document.getElementById('totalTime').textContent = formatTime(currentAudio.duration);
});
currentAudio.addEventListener('timeupdate', () => {
const progress = (currentAudio.currentTime / currentAudio.duration) * 100;
document.getElementById('progressFill').style.width = progress + '%';
document.getElementById('currentTime').textContent = formatTime(currentAudio.currentTime);
});
currentAudio.addEventListener('ended', () => {
nextTrack();
});
// Auto-play disabled - user must click play button
// currentAudio.play();
// isPlaying = true;
document.getElementById('currentTrackTitle').textContent = title;
document.getElementById('currentTrackArtist').textContent = artist;
document.getElementById('playIcon').className = 'fas fa-play'; // Show play button since auto-play is disabled
// Show player
document.getElementById('player').style.display = 'block';
// Update current track index
currentTrackIndex = playlist.findIndex(track => track.audioUrl === audioUrl);
}
// Toggle play/pause
function togglePlay() {
if (!currentAudio) return;
if (isPlaying) {
currentAudio.pause();
document.getElementById('playIcon').className = 'fas fa-play';
} else {
currentAudio.play();
document.getElementById('playIcon').className = 'fas fa-pause';
}
isPlaying = !isPlaying;
}
// Next track
function nextTrack() {
if (playlist.length === 0) return;
currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
const track = playlist[currentTrackIndex];
playTrack(track.audioUrl, track.title, track.artist);
}
// Previous track
function previousTrack() {
if (playlist.length === 0) return;
currentTrackIndex = currentTrackIndex === 0 ? playlist.length - 1 : currentTrackIndex - 1;
const track = playlist[currentTrackIndex];
playTrack(track.audioUrl, track.title, track.artist);
}
// Seek in track
function seek(event) {
if (!currentAudio) return;
const rect = event.target.getBoundingClientRect();
const clickX = event.clientX - rect.left;
const width = rect.width;
const seekTime = (clickX / width) * currentAudio.duration;
currentAudio.currentTime = seekTime;
}
// Set volume
function setVolume(event) {
if (!currentAudio) return;
const rect = event.target.getBoundingClientRect();
const clickX = event.clientX - rect.left;
const width = rect.width;
const volume = clickX / width;
currentAudio.volume = volume;
}
// Format time
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
// Social Functions
function toggleLike(trackId, button) {
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) {
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');
button.textContent = button.classList.contains('following') ? 'Following' : 'Follow';
}
});
}
function showComments(trackId) {
// TODO: Implement comments modal
alert('Comments feature coming soon!');
}
</script>
<!-- Winamp-style Player -->
<div class="winamp-container" id="player" style="display: none;">
<div class="player-main">
<div class="player-controls">
<button class="control-btn" onclick="previousTrack()">
<i class="fas fa-step-backward"></i>
</button>
<button class="control-btn play-btn" id="playPauseBtn" onclick="togglePlay()">
<i class="fas fa-play" id="playIcon"></i>
</button>
<button class="control-btn" onclick="nextTrack()">
<i class="fas fa-step-forward"></i>
</button>
</div>
<div class="track-info">
<div class="track-title" id="currentTrackTitle">No track selected</div>
<div class="track-artist" id="currentTrackArtist">SoundStudioPro</div>
</div>
<div class="progress-container">
<div class="progress-bar" onclick="seek(event)">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="time-display">
<span id="currentTime">0:00</span> / <span id="totalTime">0:00</span>
</div>
</div>
<div class="volume-control">
<i class="fas fa-volume-up"></i>
<div class="volume-slider" onclick="setVolume(event)">
<div style="width: 70%; height: 100%; background: #3498db;"></div>
</div>
</div>
</div>
</div>
<style>
/* Winamp-style Player */
.winamp-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: linear-gradient(90deg, #2c3e50, #34495e);
border-top: 2px solid #3498db;
box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
}
.player-main {
display: flex;
align-items: center;
padding: 10px 20px;
height: 80px;
}
.player-controls {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
}
.control-btn {
background: #3498db;
border: none;
color: white;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
.control-btn:hover {
background: #2980b9;
transform: scale(1.05);
}
.play-btn {
background: #27ae60;
padding: 12px 16px;
border-radius: 50%;
}
.play-btn:hover {
background: #229954;
}
.track-info {
flex: 1;
margin: 0 20px;
}
.track-title {
font-weight: bold;
font-size: 14px;
margin-bottom: 5px;
}
.track-artist {
font-size: 12px;
opacity: 0.8;
}
.progress-container {
flex: 1;
margin: 0 20px;
}
.progress-bar {
width: 100%;
height: 6px;
background: #34495e;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #3498db, #27ae60);
width: 0%;
transition: width 0.1s;
}
.time-display {
font-size: 12px;
margin-top: 5px;
text-align: center;
}
.volume-control {
display: flex;
align-items: center;
gap: 10px;
margin-left: 20px;
}
.volume-slider {
width: 80px;
height: 4px;
background: #34495e;
border-radius: 2px;
cursor: pointer;
}
</style>
<?php include 'includes/footer.php'; ?>