 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;
}
// Include database configuration
require_once 'config/database.php';
$user = getUserById($_SESSION['user_id']);
$user_name = $user['name'] ?? 'User';
$credits = $_SESSION['credits'] ?? 10;
// Get user's music tracks
$user_tracks = getUserMusicTracks($_SESSION['user_id']);
// Set page variables for header
$page_title = 'Social Music Player - SoundStudioPro';
$page_description = 'Experience music together with real-time reactions, comments, and collaborative features.';
$current_page = 'social_player';
// Include header
include 'includes/header.php';
?>
<style>
/* Social Music Player Styles */
.social-player-container {
margin-top: 10rem;
min-height: calc(100vh - 10rem);
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
position: relative;
overflow: hidden;
}
.social-player-container::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;
}
/* Main Player Layout */
.player-layout {
display: grid;
grid-template-columns: 1fr 400px;
gap: 2rem;
max-width: 140rem;
margin: 0 auto;
padding: 2rem;
position: relative;
z-index: 2;
}
/* Main Player Area */
.main-player-area {
background: rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 3rem;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* Visualizer */
.visualizer-container {
height: 300px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-radius: 16px;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.visualizer {
width: 100%;
height: 100%;
position: relative;
}
.visualizer-bar {
position: absolute;
bottom: 0;
width: 4px;
background: linear-gradient(to top, #667eea, #764ba2);
border-radius: 2px 2px 0 0;
animation: visualize 0.5s ease-in-out infinite alternate;
}
@keyframes visualize {
0% { height: 20%; }
100% { height: 100%; }
}
/* Track Info */
.track-info-large {
text-align: center;
margin-bottom: 2rem;
}
.track-artwork-large {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto 2rem;
object-fit: cover;
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
animation: rotate 20s linear infinite;
animation-play-state: paused;
}
.track-artwork-large.playing {
animation-play-state: running;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.track-title-large {
font-size: 2.8rem;
font-weight: 700;
color: white;
margin-bottom: 0.5rem;
}
.track-artist-large {
font-size: 1.6rem;
color: #667eea;
margin-bottom: 1rem;
}
.track-stats {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
}
.stat-item {
text-align: center;
color: #a0aec0;
}
.stat-value {
font-size: 1.8rem;
font-weight: 700;
color: #667eea;
display: block;
}
.stat-label {
font-size: 1.2rem;
}
/* Enhanced Controls */
.player-controls-enhanced {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
}
.control-btn-large {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 1.5rem;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
font-size: 1.8rem;
}
.control-btn-large:hover {
background: rgba(102, 126, 234, 0.3);
border-color: #667eea;
transform: scale(1.1);
}
.play-btn-large {
background: linear-gradient(135deg, #667eea, #764ba2);
border-color: transparent;
padding: 2rem;
font-size: 2.4rem;
}
.play-btn-large:hover {
background: linear-gradient(135deg, #764ba2, #667eea);
transform: scale(1.15);
}
/* Progress Bar */
.progress-container-enhanced {
margin-bottom: 2rem;
}
.progress-bar-enhanced {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
cursor: pointer;
overflow: hidden;
position: relative;
}
.progress-fill-enhanced {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
width: 0%;
transition: width 0.1s;
position: relative;
}
.progress-fill-enhanced::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
.time-display-enhanced {
display: flex;
justify-content: space-between;
color: #a0aec0;
font-size: 1.4rem;
margin-top: 0.5rem;
}
/* Social Sidebar */
.social-sidebar {
background: rgba(255, 255, 255, 0.05);
border-radius: 24px;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.sidebar-header {
padding: 2rem;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-title {
font-size: 2rem;
font-weight: 700;
color: white;
margin-bottom: 0.5rem;
}
.sidebar-subtitle {
color: #a0aec0;
font-size: 1.4rem;
}
.sidebar-content {
flex: 1;
overflow-y: auto;
padding: 2rem;
}
/* Live Reactions */
.reactions-section {
margin-bottom: 3rem;
}
.reactions-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.reactions-title {
font-size: 1.6rem;
font-weight: 600;
color: white;
}
.live-indicator {
width: 8px;
height: 8px;
background: #48bb78;
border-radius: 50%;
animation: pulse 2s infinite;
}
.reactions-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.reaction-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 1rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
font-size: 1.4rem;
}
.reaction-btn:hover {
background: rgba(102, 126, 234, 0.3);
border-color: #667eea;
transform: translateY(-2px);
}
.reaction-btn.active {
background: linear-gradient(135deg, #667eea, #764ba2);
border-color: transparent;
}
.reaction-count {
font-size: 1.2rem;
color: #a0aec0;
margin-top: 0.5rem;
}
/* Live Comments */
.comments-section {
margin-bottom: 3rem;
}
.comments-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.comments-title {
font-size: 1.6rem;
font-weight: 600;
color: white;
}
.comments-count {
background: rgba(102, 126, 234, 0.2);
color: #667eea;
padding: 0.3rem 0.8rem;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 600;
}
.comments-list {
max-height: 300px;
overflow-y: auto;
margin-bottom: 1.5rem;
}
.comment-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
animation: slideInUp 0.3s ease;
}
@keyframes slideInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.comment-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.8rem;
}
.comment-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: white;
font-size: 1.2rem;
}
.comment-author {
font-weight: 600;
color: white;
font-size: 1.3rem;
}
.comment-time {
color: #a0aec0;
font-size: 1.1rem;
}
.comment-text {
color: #e2e8f0;
line-height: 1.5;
font-size: 1.3rem;
}
.comment-input {
display: flex;
gap: 1rem;
align-items: flex-end;
}
.comment-input input {
flex: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 1rem 1.5rem;
color: white;
font-size: 1.3rem;
}
.comment-input input:focus {
outline: none;
border-color: #667eea;
background: rgba(255, 255, 255, 0.15);
}
.comment-input input::placeholder {
color: #a0aec0;
}
.send-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
color: white;
padding: 1rem 1.5rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.3rem;
}
.send-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}
/* Collaborative Features */
.collaborative-section {
margin-bottom: 3rem;
}
.collaborative-header {
margin-bottom: 1.5rem;
}
.collaborative-title {
font-size: 1.6rem;
font-weight: 600;
color: white;
margin-bottom: 0.5rem;
}
.collaborative-subtitle {
color: #a0aec0;
font-size: 1.3rem;
}
.collaborative-actions {
display: flex;
flex-direction: column;
gap: 1rem;
}
.collab-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 1.2rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.3rem;
}
.collab-btn:hover {
background: rgba(102, 126, 234, 0.3);
border-color: #667eea;
transform: translateY(-2px);
}
/* Floating Action Button */
.fab {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
transition: all 0.3s ease;
z-index: 1000;
font-size: 2rem;
color: white;
}
.fab:hover {
transform: scale(1.1);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}
/* Responsive Design */
@media (max-width: 1200px) {
.player-layout {
grid-template-columns: 1fr;
gap: 1rem;
}
.social-sidebar {
order: -1;
}
}
@media (max-width: 768px) {
.main-player-area {
padding: 2rem;
}
.track-artwork-large {
width: 150px;
height: 150px;
}
.track-title-large {
font-size: 2.2rem;
}
.player-controls-enhanced {
gap: 1rem;
}
.control-btn-large {
padding: 1.2rem;
font-size: 1.5rem;
}
.play-btn-large {
padding: 1.5rem;
font-size: 2rem;
}
}
</style>
<div class="social-player-container">
<div class="player-layout">
<!-- Main Player Area -->
<div class="main-player-area">
<!-- Visualizer -->
<div class="visualizer-container">
<div class="visualizer" id="visualizer">
<!-- Visualizer bars will be generated by JavaScript -->
</div>
</div>
<!-- Track Info -->
<div class="track-info-large">
<img src="/assets/images/default-album-art.jpg" alt="Track Artwork" class="track-artwork-large" id="trackArtwork">
<div class="track-title-large" id="trackTitle">Select a track to start</div>
<div class="track-artist-large" id="trackArtist">SoundStudioPro</div>
<div class="track-stats">
<div class="stat-item">
<span class="stat-value" id="playCount">0</span>
<span class="stat-label">Plays</span>
</div>
<div class="stat-item">
<span class="stat-value" id="likeCount">0</span>
<span class="stat-label">Likes</span>
</div>
<div class="stat-item">
<span class="stat-value" id="shareCount">0</span>
<span class="stat-label">Shares</span>
</div>
</div>
</div>
<!-- Enhanced Controls -->
<div class="player-controls-enhanced">
<button class="control-btn-large" onclick="previousTrack()">
<i class="fas fa-step-backward"></i>
</button>
<button class="control-btn-large" onclick="shufflePlaylist()">
<i class="fas fa-random"></i>
</button>
<button class="control-btn-large play-btn-large" id="playPauseBtn" onclick="togglePlay()">
<i class="fas fa-play" id="playIcon"></i>
</button>
<button class="control-btn-large" onclick="toggleRepeat()">
<i class="fas fa-redo" id="repeatIcon"></i>
</button>
<button class="control-btn-large" onclick="nextTrack()">
<i class="fas fa-step-forward"></i>
</button>
</div>
<!-- Progress Bar -->
<div class="progress-container-enhanced">
<div class="progress-bar-enhanced" onclick="seek(event)">
<div class="progress-fill-enhanced" id="progressFill"></div>
</div>
<div class="time-display-enhanced">
<span id="currentTime">0:00</span>
<span id="totalTime">0:00</span>
</div>
</div>
</div>
<!-- Social Sidebar -->
<div class="social-sidebar">
<div class="sidebar-header">
<div class="sidebar-title">Live Social</div>
<div class="sidebar-subtitle">Connect with other listeners</div>
</div>
<div class="sidebar-content">
<!-- Live Reactions -->
<div class="reactions-section">
<div class="reactions-header">
<div class="reactions-title">Live Reactions</div>
<div class="live-indicator"></div>
</div>
<div class="reactions-grid">
<div class="reaction-btn" onclick="sendReaction('fire')">
<div>🔥</div>
<div class="reaction-count" id="fireCount">0</div>
</div>
<div class="reaction-btn" onclick="sendReaction('heart')">
<div>❤️</div>
<div class="reaction-count" id="heartCount">0</div>
</div>
<div class="reaction-btn" onclick="sendReaction('clap')">
<div>👏</div>
<div class="reaction-count" id="clapCount">0</div>
</div>
<div class="reaction-btn" onclick="sendReaction('rocket')">
<div>🚀</div>
<div class="reaction-count" id="rocketCount">0</div>
</div>
</div>
</div>
<!-- Live Comments -->
<div class="comments-section">
<div class="comments-header">
<div class="comments-title">Live Comments</div>
<div class="comments-count" id="commentsCount">0</div>
</div>
<div class="comments-list" id="commentsList">
<!-- Comments will be populated here -->
</div>
<div class="comment-input">
<input type="text" placeholder="Add a comment..." id="commentInput" maxlength="200">
<button class="send-btn" onclick="sendComment()">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
<!-- Collaborative Features -->
<div class="collaborative-section">
<div class="collaborative-header">
<div class="collaborative-title">Collaborate</div>
<div class="collaborative-subtitle">Create together</div>
</div>
<div class="collaborative-actions">
<div class="collab-btn" onclick="createCollaborativePlaylist()">
<i class="fas fa-users"></i>
<span>Create Collaborative Playlist</span>
</div>
<div class="collab-btn" onclick="inviteFriends()">
<i class="fas fa-user-plus"></i>
<span>Invite Friends</span>
</div>
<div class="collab-btn" onclick="startListeningParty()">
<i class="fas fa-broadcast-tower"></i>
<span>Start Listening Party</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Floating Action Button -->
<div class="fab" onclick="toggleFullscreen()">
<i class="fas fa-expand"></i>
</div>
<script>
// Global variables
let currentAudio = null;
let currentTrackIndex = 0;
let playlist = [];
let isPlaying = false;
let isShuffled = false;
let repeatMode = 'none'; // none, one, all
let reactions = { fire: 0, heart: 0, clap: 0, rocket: 0 };
let comments = [];
let visualizerBars = [];
// Initialize the social player
function initSocialPlayer() {
// Populate playlist from music cards
const musicCards = document.querySelectorAll('.music-card');
playlist = Array.from(musicCards).map((card, index) => ({
index: index,
title: card.querySelector('.music-title').textContent,
artist: card.querySelector('.music-prompt').textContent,
audioUrl: card.querySelector('.play-btn')?.getAttribute('onclick')?.match(/'([^']+)'/)?.[1] || null,
artwork: card.querySelector('.artwork-image')?.src || '/assets/images/default-album-art.jpg'
})).filter(track => track.audioUrl);
// Initialize visualizer
initVisualizer();
// Start reaction updates
startReactionUpdates();
// Start comment updates
startCommentUpdates();
console.log('🎵 Social Player initialized with', playlist.length, 'tracks');
}
// Initialize visualizer
function initVisualizer() {
const visualizer = document.getElementById('visualizer');
const barCount = 32;
for (let i = 0; i < barCount; i++) {
const bar = document.createElement('div');
bar.className = 'visualizer-bar';
bar.style.left = (i * (100 / barCount)) + '%';
bar.style.animationDelay = (i * 0.1) + 's';
visualizer.appendChild(bar);
visualizerBars.push(bar);
}
}
// Play track with social features
function playTrack(audioUrl, title, artist, artwork = null) {
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);
// Update visualizer
updateVisualizer();
});
currentAudio.addEventListener('ended', () => {
if (repeatMode === 'one') {
currentAudio.currentTime = 0;
currentAudio.play();
} else if (repeatMode === 'all') {
nextTrack();
} else {
nextTrack();
}
});
// Auto-play disabled - user must click play button
// currentAudio.play();
// isPlaying = true;
// Update UI
document.getElementById('trackTitle').textContent = title;
document.getElementById('trackArtist').textContent = artist;
document.getElementById('playIcon').className = 'fas fa-play'; // Show play button since auto-play is disabled
if (artwork) {
document.getElementById('trackArtwork').src = artwork;
}
document.getElementById('trackArtwork').classList.add('playing');
// Update current track index
currentTrackIndex = playlist.findIndex(track => track.audioUrl === audioUrl);
// Reset reactions for new track
resetReactions();
// Add play count
updatePlayCount();
// Broadcast to other users
broadcastTrackChange(title, artist);
console.log('🎵 Now playing:', title, 'by', artist);
}
// Toggle play/pause
function togglePlay() {
if (!currentAudio) return;
if (isPlaying) {
currentAudio.pause();
document.getElementById('playIcon').className = 'fas fa-play';
document.getElementById('trackArtwork').classList.remove('playing');
} else {
currentAudio.play();
document.getElementById('playIcon').className = 'fas fa-pause';
document.getElementById('trackArtwork').classList.add('playing');
}
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, track.artwork);
}
// 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, track.artwork);
}
// Shuffle playlist
function shufflePlaylist() {
isShuffled = !isShuffled;
const btn = event.target.closest('.control-btn-large');
if (isShuffled) {
btn.style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
btn.style.borderColor = 'transparent';
} else {
btn.style.background = 'rgba(255, 255, 255, 0.1)';
btn.style.borderColor = 'rgba(255, 255, 255, 0.2)';
}
console.log('🔀 Shuffle:', isShuffled ? 'ON' : 'OFF');
}
// Toggle repeat mode
function toggleRepeat() {
const btn = event.target.closest('.control-btn-large');
const icon = btn.querySelector('i');
switch (repeatMode) {
case 'none':
repeatMode = 'all';
icon.className = 'fas fa-redo';
btn.style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
break;
case 'all':
repeatMode = 'one';
icon.className = 'fas fa-redo-alt';
btn.style.background = 'linear-gradient(135deg, #48bb78, #38a169)';
break;
case 'one':
repeatMode = 'none';
icon.className = 'fas fa-redo';
btn.style.background = 'rgba(255, 255, 255, 0.1)';
break;
}
console.log('🔁 Repeat mode:', repeatMode);
}
// 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;
}
// Update visualizer
function updateVisualizer() {
if (!currentAudio || !isPlaying) return;
visualizerBars.forEach((bar, index) => {
const intensity = Math.random() * 100;
bar.style.height = intensity + '%';
bar.style.animationDelay = (index * 0.05) + 's';
});
}
// Send reaction
function sendReaction(type) {
const btn = event.target.closest('.reaction-btn');
reactions[type]++;
// Update UI
document.getElementById(type + 'Count').textContent = reactions[type];
// Add animation
btn.style.transform = 'scale(1.2)';
setTimeout(() => {
btn.style.transform = 'scale(1)';
}, 200);
// Broadcast to other users
broadcastReaction(type);
console.log('🔥 Sent reaction:', type);
}
// Reset reactions for new track
function resetReactions() {
reactions = { fire: 0, heart: 0, clap: 0, rocket: 0 };
Object.keys(reactions).forEach(type => {
document.getElementById(type + 'Count').textContent = '0';
});
}
// Send comment
function sendComment() {
const input = document.getElementById('commentInput');
const text = input.value.trim();
if (!text) return;
const comment = {
id: Date.now(),
author: '<?php echo htmlspecialchars($user_name); ?>',
text: text,
time: new Date().toLocaleTimeString(),
avatar: '<?php echo substr($user_name, 0, 1); ?>'
};
comments.unshift(comment);
updateCommentsDisplay();
// Clear input
input.value = '';
// Broadcast to other users
broadcastComment(comment);
console.log('💬 Sent comment:', text);
}
// Update comments display
function updateCommentsDisplay() {
const list = document.getElementById('commentsList');
const count = document.getElementById('commentsCount');
list.innerHTML = '';
count.textContent = comments.length;
comments.slice(0, 10).forEach(comment => {
const item = document.createElement('div');
item.className = 'comment-item';
item.innerHTML = `
<div class="comment-header">
<div class="comment-avatar">${comment.avatar}</div>
<div>
<div class="comment-author">${comment.author}</div>
<div class="comment-time">${comment.time}</div>
</div>
</div>
<div class="comment-text">${comment.text}</div>
`;
list.appendChild(item);
});
}
// Start reaction updates (simulate real-time)
function startReactionUpdates() {
setInterval(() => {
if (isPlaying && Math.random() < 0.3) {
const types = ['fire', 'heart', 'clap', 'rocket'];
const randomType = types[Math.floor(Math.random() * types.length)];
reactions[randomType]++;
document.getElementById(randomType + 'Count').textContent = reactions[randomType];
}
}, 3000);
}
// Start comment updates (simulate real-time)
function startCommentUpdates() {
setInterval(() => {
if (isPlaying && Math.random() < 0.2) {
const sampleComments = [
"This is amazing! 🔥",
"Love this track! ❤️",
"Great vibes! 👏",
"Can't stop listening! 🚀",
"Perfect for my mood! ✨"
];
const comment = {
id: Date.now(),
author: 'Music Lover',
text: sampleComments[Math.floor(Math.random() * sampleComments.length)],
time: new Date().toLocaleTimeString(),
avatar: 'M'
};
comments.unshift(comment);
updateCommentsDisplay();
}
}, 5000);
}
// Update play count
function updatePlayCount() {
const count = document.getElementById('playCount');
const current = parseInt(count.textContent);
count.textContent = current + 1;
}
// Broadcast functions (simulate real-time communication)
function broadcastTrackChange(title, artist) {
// In a real app, this would send to WebSocket server
console.log('📡 Broadcasting track change:', title, 'by', artist);
}
function broadcastReaction(type) {
// In a real app, this would send to WebSocket server
console.log('📡 Broadcasting reaction:', type);
}
function broadcastComment(comment) {
// In a real app, this would send to WebSocket server
console.log('📡 Broadcasting comment:', comment.text);
}
// Collaborative features
function createCollaborativePlaylist() {
alert('🎵 Collaborative playlist feature coming soon!');
}
function inviteFriends() {
alert('👥 Friend invitation feature coming soon!');
}
function startListeningParty() {
alert('🎉 Listening party feature coming soon!');
}
// Toggle fullscreen
function toggleFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
}
// Format time
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
// Handle Enter key in comment input
document.getElementById('commentInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendComment();
}
});
// Initialize when page loads
document.addEventListener('DOMContentLoaded', function() {
initSocialPlayer();
});
</script>
<?php include 'includes/footer.php'; ?>