Auto commit: 2026-02-16T20:26:39.382Z
This commit is contained in:
Flatlogic Bot
parent
d3737ce079
commit
97f37c8c7e
129
index.php
129
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";
|
||||
<div id="audio-visualizer" class="audio-visualizer"></div>
|
||||
</div>
|
||||
<div class="now-playing">
|
||||
<i class="bi bi-broadcast"></i>
|
||||
<div class="track-cover-container">
|
||||
<i id="cover-placeholder" class="bi bi-broadcast"></i>
|
||||
<img id="track-cover" src="./assets/pasted-20260215-163754-def41f49.png" alt="Cover" onerror="this.style.display='none'; document.getElementById('cover-placeholder').style.display='block';">
|
||||
</div>
|
||||
<div class="track-info">
|
||||
<span class="track-label">ESTÁS ESCUCHANDO:</span>
|
||||
<div id="track-title" class="track-title">Cargando stream...</div>
|
||||
@ -729,6 +766,11 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
<input type="range" class="volume-slider" min="0" max="1" step="0.01" value="1" oninput="changeVolume(this.value)">
|
||||
</div>
|
||||
|
||||
<div id="recent-tracks-container" style="margin-top: 1rem; display: none;">
|
||||
<span class="track-label" style="font-size: 0.65rem; margin-bottom: 0.5rem;">CANCIONES ANTERIORES:</span>
|
||||
<div id="recent-tracks-list" style="display: flex; flex-direction: column; gap: 0.5rem;"></div>
|
||||
</div>
|
||||
|
||||
<div class="interaction-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
@ -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 = `
|
||||
<img src="${track.cover}" style="width: 30px; height: 30px; border-radius: 4px; object-fit: cover;">
|
||||
<div style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 0.7;">
|
||||
${track.title}
|
||||
</div>
|
||||
`;
|
||||
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) {}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user