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/-109ca8d5/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<?php
// Global Music Player - Simplified and Reliable
// This player will be included in the main layout and stay active during page navigation

// Prevent multiple includes
if (defined('GLOBAL_PLAYER_INCLUDED')) {
    return;
}
define('GLOBAL_PLAYER_INCLUDED', true);
?>

<!-- Global Music Player -->
<div id="globalMusicPlayer" class="global-music-player">
    <div class="player-container">
        <!-- Track Info -->
        <div class="track-info">
            <div class="track-details">
                <div class="track-title" id="globalTrackTitle">
                    Ready to Play
                </div>
                <div class="track-artist" id="globalTrackArtist">
                    <span id="globalTrackArtistName">Click preview to start</span>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <div class="player-controls">
            <button class="control-btn" id="globalPrevBtn" title="Previous">
                <i class="fas fa-step-backward"></i>
            </button>
            <button class="control-btn play-btn" id="globalPlayBtn" title="Play/Pause">
                <i class="fas fa-play" id="globalPlayIcon"></i>
            </button>
            <button class="control-btn" id="globalStopBtn" title="Stop">
                <i class="fas fa-stop"></i>
            </button>
            <button class="control-btn" id="globalNextBtn" title="Next">
                <i class="fas fa-step-forward"></i>
            </button>
        </div>

        <!-- Progress Bar -->
        <div class="progress-container">
            <div class="progress-bar" id="globalProgressBar">
                <div class="progress-fill" id="globalProgressFill"></div>
            </div>
            <div class="time-display">
                <span id="globalCurrentTime">0:00</span>
                <span id="globalTotalTime">0:00</span>
            </div>
        </div>

        <!-- Volume Control -->
        <div class="volume-control">
            <i class="fas fa-volume-up" id="globalVolumeIcon"></i>
            <input type="range" id="globalVolumeSlider" min="0" max="100" value="50" class="volume-slider">
        </div>
    </div>
</div>

<style>
/* Global Music Player Styles */
.global-music-player {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    z-index: 9999 !important;
    padding: 1rem 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 80px !important;
    transform: translateY(0) !important;
    transition: transform 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.player-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.track-info {
    flex: 1;
    min-width: 200px;
}

.track-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.track-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-artist {
    font-size: 1.2rem;
    color: #a0aec0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.play-btn {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.play-btn:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
}

.progress-container {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 300px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s ease;
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    color: #a0aec0;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 150px;
}

.volume-control i {
    color: #a0aec0;
    font-size: 1.4rem;
}

.volume-slider {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    background: #667eea;
    border-radius: 50%;
    cursor: pointer;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .global-music-player {
        padding: 0.8rem 1rem;
        min-height: 60px;
    }
    
    .player-container {
        gap: 0.8rem;
        flex-wrap: wrap;
    }
    
    .track-info {
        min-width: 100px;
        flex: 1;
        min-width: 0;
    }
    
    .track-title {
        font-size: 1.2rem;
    }
    
    .track-artist {
        font-size: 1rem;
    }
    
    .player-controls {
        gap: 0.5rem;
        flex-shrink: 0;
    }
    
    .control-btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .play-btn {
        width: 40px;
        height: 40px;
    }
    
    .progress-container {
        min-width: 120px;
        flex: 1;
        min-width: 0;
    }
    
    .progress-bar {
        height: 4px;
    }
    
    .time-display {
        font-size: 1rem;
    }
    
    .volume-control {
        min-width: 80px;
        flex-shrink: 0;
    }
    
    .volume-slider {
        width: 60px;
    }
}

@media (max-width: 480px) {
    .global-music-player {
        padding: 0.6rem 0.8rem;
        min-height: 55px;
    }
    
    .player-container {
        gap: 0.5rem;
    }
    
    .track-title {
        font-size: 1.1rem;
    }
    
    .track-artist {
        font-size: 0.9rem;
    }
    
    .control-btn {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    
    .play-btn {
        width: 35px;
        height: 35px;
    }
    
    .progress-container {
        min-width: 100px;
    }
    
    .time-display {
        font-size: 0.9rem;
    }
    
    .volume-control {
        min-width: 60px;
    }
    
    .volume-slider {
        width: 50px;
    }
}
</style>

<script>
console.log('🎵 Global player script starting...');

// Global Music Player JavaScript - Simplified
const globalPlayer = {
    audio: null,
    isPlaying: false,
    volume: 0.5,
    initialized: false,
    
    init() {
        if (this.initialized) {
            console.log('🎵 Global player already initialized');
            return Promise.resolve();
        }
        
        console.log('🎵 Initializing global player...');
        
        try {
            this.setupEventListeners();
            this.showPlayer();
            this.initialized = true;
            
            console.log('🎵 Global player initialized successfully');
            
            // Dispatch ready event
            window.dispatchEvent(new CustomEvent('globalPlayerReady'));
            
            return Promise.resolve();
        } catch (error) {
            console.error('🎵 Error initializing global player:', error);
            return Promise.reject(error);
        }
    },
    
    setupEventListeners() {
        console.log('🎵 Setting up event listeners...');
        
        // Play button
        const playBtn = document.getElementById('globalPlayBtn');
        if (playBtn) {
            playBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                console.log('🎵 Play button clicked');
                this.togglePlayPause();
            });
        }
        
        // Stop button
        const stopBtn = document.getElementById('globalStopBtn');
        if (stopBtn) {
            stopBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                console.log('🎵 Stop button clicked');
                this.stopTrack();
            });
        }
        
        // Previous button
        const prevBtn = document.getElementById('globalPrevBtn');
        if (prevBtn) {
            prevBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                console.log('🎵 Previous button clicked');
                // For now, just restart current track
                if (this.audio) {
                    this.audio.currentTime = 0;
                }
            });
        }
        
        // Next button
        const nextBtn = document.getElementById('globalNextBtn');
        if (nextBtn) {
            nextBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                console.log('🎵 Next button clicked');
                // For now, just stop current track
                this.stopTrack();
            });
        }
        
        // Volume slider
        const volumeSlider = document.getElementById('globalVolumeSlider');
        if (volumeSlider) {
            volumeSlider.value = this.volume * 100;
            
            volumeSlider.addEventListener('input', (e) => {
                this.volume = e.target.value / 100;
                console.log('🎵 Volume changed to:', this.volume);
                
                if (this.audio) {
                    this.audio.volume = this.volume;
                }
                
                this.updateVolumeIcon();
            });
            
            this.updateVolumeIcon();
        }
        
        // Progress bar
        const progressBar = document.getElementById('globalProgressBar');
        if (progressBar) {
            progressBar.addEventListener('click', (e) => {
                if (this.audio && this.audio.duration) {
                    const rect = e.target.getBoundingClientRect();
                    const percent = (e.clientX - rect.left) / rect.width;
                    const newTime = percent * this.audio.duration;
                    this.audio.currentTime = newTime;
                }
            });
        }
        
        // Keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
                e.preventDefault();
                this.togglePlayPause();
            }
        });
    },
    
    playTrack(audioUrl, title, artist) {
        console.log('🎵 Playing track:', { audioUrl, title, artist });
        
        // Stop any current audio
        if (this.audio) {
            this.audio.pause();
            this.audio = null;
        }
        
        // Create new audio element
        this.audio = new Audio(audioUrl);
        this.audio.volume = this.volume;
        
        // Update track info immediately
        this.updateTrackInfo(title, artist);
        
        // Setup audio event listeners
        this.audio.addEventListener('loadedmetadata', () => {
            const totalTimeElement = document.getElementById('globalTotalTime');
            if (totalTimeElement && this.audio.duration) {
                totalTimeElement.textContent = this.formatTime(this.audio.duration);
            }
        });
        
        this.audio.addEventListener('timeupdate', () => {
            if (this.audio.duration) {
                const progress = (this.audio.currentTime / this.audio.duration) * 100;
                const progressFill = document.getElementById('globalProgressFill');
                const currentTimeElement = document.getElementById('globalCurrentTime');
                
                if (progressFill) {
                    progressFill.style.width = progress + '%';
                }
                if (currentTimeElement) {
                    currentTimeElement.textContent = this.formatTime(this.audio.currentTime);
                }
            }
        });
        
        this.audio.addEventListener('ended', () => {
            console.log('🎵 Track ended');
            this.isPlaying = false;
            this.updatePlayButton();
        });
        
        this.audio.addEventListener('canplaythrough', () => {
            console.log('🎵 Audio ready to play');
            this.playAudio();
        });
        
        this.audio.addEventListener('error', (e) => {
            console.error('🎵 Audio error:', e);
            this.isPlaying = false;
            this.updatePlayButton();
        });
        
        // Show player
        this.showPlayer();
        this.updatePlayButton();
    },
    
    togglePlayPause() {
        console.log('🎵 togglePlayPause called');
        
        if (!this.audio) {
            console.log('🎵 No audio loaded');
            return;
        }
        
        if (this.isPlaying) {
            console.log('🎵 Pausing audio');
            this.pauseAudio();
        } else {
            console.log('🎵 Playing audio');
            this.playAudio();
        }
    },
    
    playAudio() {
        if (!this.audio) {
            console.error('🎵 No audio element to play');
            return;
        }
        
        this.audio.play().then(() => {
            this.isPlaying = true;
            this.updatePlayButton();
            console.log('🎵 Play successful');
        }).catch(error => {
            console.error('🎵 Play failed:', error);
            this.isPlaying = false;
            this.updatePlayButton();
        });
    },
    
    pauseAudio() {
        if (this.audio) {
            this.audio.pause();
        }
        
        this.isPlaying = false;
        this.updatePlayButton();
    },
    
    stopTrack() {
        console.log('🎵 Stop track called');
        
        if (this.audio) {
            this.audio.pause();
            this.audio.currentTime = 0;
            this.audio.src = '';
            this.audio = null;
        }
        
        this.isPlaying = false;
        this.updatePlayButton();
        
        // Reset progress bar
        const progressFill = document.getElementById('globalProgressFill');
        if (progressFill) {
            progressFill.style.width = '0%';
        }
        
        // Reset time display
        const currentTime = document.getElementById('globalCurrentTime');
        if (currentTime) {
            currentTime.textContent = '0:00';
        }
        
        const totalTime = document.getElementById('globalTotalTime');
        if (totalTime) {
            totalTime.textContent = '0:00';
        }
        
        console.log('🎵 Track stopped');
    },
    
    updateTrackInfo(title, artist) {
        console.log('🎵 Updating track info:', { title, artist });
        
        const trackTitleElement = document.getElementById('globalTrackTitle');
        const trackArtistElement = document.getElementById('globalTrackArtistName');
        
        if (trackTitleElement) {
            trackTitleElement.textContent = title;
        }
        
        if (trackArtistElement) {
            trackArtistElement.textContent = artist;
        }
    },
    
    updatePlayButton() {
        const playButton = document.getElementById('globalPlayBtn');
        if (playButton) {
            const icon = playButton.querySelector('i');
            if (icon) {
                icon.className = this.isPlaying ? 'fas fa-pause' : 'fas fa-play';
            }
        }
    },
    
    updateVolumeIcon() {
        const volumeIcon = document.getElementById('globalVolumeIcon');
        if (volumeIcon) {
            if (this.volume === 0) {
                volumeIcon.className = 'fas fa-volume-mute';
            } else if (this.volume < 0.3) {
                volumeIcon.className = 'fas fa-volume-down';
            } else if (this.volume < 0.7) {
                volumeIcon.className = 'fas fa-volume-off';
            } else {
                volumeIcon.className = 'fas fa-volume-up';
            }
        }
    },
    
    showPlayer() {
        console.log('🎵 Showing global player');
        const playerElement = document.getElementById('globalMusicPlayer');
        if (playerElement) {
            playerElement.style.display = 'flex';
            playerElement.style.opacity = '1';
            playerElement.style.visibility = 'visible';
        }
    },
    
    formatTime(seconds) {
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins}:${secs.toString().padStart(2, '0')}`;
    }
};

// Initialize global player
console.log('🎵 Creating global player object...');
window.globalPlayer = globalPlayer;

// Initialize when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
        console.log('🎵 DOM loaded, initializing global player...');
        setTimeout(() => {
            window.globalPlayer.init();
        }, 100);
    });
} else {
    console.log('🎵 DOM already loaded, initializing immediately...');
    setTimeout(() => {
        window.globalPlayer.init();
    }, 100);
}

// Global function to play track
window.playTrackWithGlobalPlayer = function(audioUrl, title, artist) {
    console.log('🎵 playTrackWithGlobalPlayer called:', { audioUrl, title, artist });
    
    if (window.globalPlayer && window.globalPlayer.playTrack) {
        window.globalPlayer.playTrack(audioUrl, title, artist);
        return true;
    } else {
        console.error('🎵 Global player not available');
        return false;
    }
};

console.log('🎵 Global player script loaded');
</script>