diff --git a/index.php b/index.php index c319890..9a3cc47 100644 --- a/index.php +++ b/index.php @@ -184,10 +184,44 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; .now-playing { display: flex; align-items: center; - gap: 1rem; - background: rgba(0, 0, 0, 0.3); - padding: 1rem; + gap: 1.2rem; + background: rgba(255, 255, 255, 0.05); + padding: 1.2rem; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 15px rgba(0,0,0,0.2); + position: relative; + overflow: hidden; + } + + .track-cover-container { + width: 80px; + height: 80px; border-radius: 12px; + overflow: hidden; + flex-shrink: 0; + position: relative; + box-shadow: 0 5px 15px rgba(0,0,0,0.3); + border: 2px solid rgba(255,255,255,0.1); + transition: transform 0.3s ease, box-shadow 0.1s ease; + } + + .track-cover-container img { + width: 100%; + height: 100%; + object-fit: cover; + transition: opacity 0.5s ease; + } + + .track-cover-container i { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 1.5rem; + color: rgba(255,255,255,0.5); + z-index: 1; + display: none; } .now-playing i { @@ -709,7 +743,10 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
- +
+ + Cover +
ESTÁS ESCUCHANDO:
Cargando stream...
@@ -729,6 +766,11 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
+ +
@@ -829,6 +871,8 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; const playBtn = document.getElementById('play-pause'); const playIcon = document.getElementById('play-icon'); const trackTitle = document.getElementById('track-title'); + const trackCover = document.getElementById('track-cover'); + const coverPlaceholder = document.getElementById('cover-placeholder'); const visualizerContainer = document.getElementById('audio-visualizer'); const glassCard = document.querySelector('.glass-card'); const trackLabel = document.querySelector('.track-label'); @@ -1379,39 +1423,102 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; } } + let recentTracks = JSON.parse(localStorage.getItem('recentTracks') || '[]'); + + function renderRecentTracks() { + const container = document.getElementById('recent-tracks-container'); + const list = document.getElementById('recent-tracks-list'); + if (!list || recentTracks.length === 0) { + if (container) container.style.display = 'none'; + return; + } + if (container) container.style.display = 'block'; + list.innerHTML = ''; + recentTracks.forEach(track => { + const item = document.createElement('div'); + item.style.display = 'flex'; + item.style.alignItems = 'center'; + item.style.gap = '10px'; + item.style.background = 'rgba(255,255,255,0.03)'; + item.style.padding = '5px 10px'; + item.style.borderRadius = '8px'; + item.style.fontSize = '0.75rem'; + item.style.border = '1px solid rgba(255,255,255,0.05)'; + + item.innerHTML = ` + +
+ ${track.title} +
+ `; + list.appendChild(item); + }); + } + + // Initial render + renderRecentTracks(); + // Fetch Now Playing Metadata from RadioKing async function updateMetadata() { try { - // RadioKing Public API for current track - const response = await fetch('https://api.radioking.io/widget/radio/828046/track/current'); + // Using the more reliable widget API endpoint + const response = await fetch('https://www.radioking.com/widgets/api/v1/radio/828046/track/current'); const data = await response.json(); if (data && data.title) { const title = data.title; const artist = data.artist || 'Lili Records'; + const coverUrl = data.cover || './assets/pasted-20260215-163754-def41f49.png'; + // Clean up title if it contains artist let fullDisplay = title.includes(artist) ? title : `${artist} - ${title}`; if (trackTitle.textContent !== fullDisplay) { + // Add previous song to history before changing + if (trackTitle.textContent !== "Cargando stream..." && trackTitle.textContent !== "Lili Records Radio - En Vivo") { + const prevTrack = { + title: trackTitle.textContent, + cover: trackCover.src + }; + // Avoid duplicates + if (recentTracks.length === 0 || recentTracks[0].title !== prevTrack.title) { + recentTracks.unshift(prevTrack); + if (recentTracks.length > 5) recentTracks.pop(); + localStorage.setItem('recentTracks', JSON.stringify(recentTracks)); + renderRecentTracks(); + } + } + trackTitle.style.opacity = '0'; + if (trackCover) trackCover.style.opacity = '0'; // Reset Like Button const likeIcon = document.querySelector('#like-song-btn i'); - likeIcon.classList.remove('bi-heart-fill'); - likeIcon.classList.add('bi-heart'); - document.getElementById('like-count').innerText = ''; + if (likeIcon) { + likeIcon.classList.remove('bi-heart-fill'); + likeIcon.classList.add('bi-heart'); + } + const likeCount = document.getElementById('like-count'); + if (likeCount) likeCount.innerText = ''; trackTitle.classList.remove('scrolling'); setTimeout(async () => { trackTitle.textContent = fullDisplay; trackTitle.style.opacity = '1'; + if (trackCover) { + trackCover.src = coverUrl; + trackCover.style.display = 'block'; + if (coverPlaceholder) coverPlaceholder.style.display = 'none'; + trackCover.style.opacity = '1'; + } + // Fetch likes for this song try { const lResp = await fetch(`api/get_likes.php?song_title=${encodeURIComponent(fullDisplay)}`); const lData = await lResp.json(); - if (lData.likes_count > 0) { - document.getElementById('like-count').innerText = lData.likes_count; + if (lData.likes_count > 0 && likeCount) { + likeCount.innerText = lData.likes_count; } } catch (e) {}