Auto commit: 2026-02-16T22:38:48.047Z
This commit is contained in:
Flatlogic Bot
parent
aa442dcd29
commit
c4c712a980
89
index.php
89
index.php
@ -59,8 +59,8 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
height: 100%;
|
||||
background: url('assets/images/background.jpg') center/cover no-repeat;
|
||||
z-index: -1;
|
||||
transition: filter 0.05s ease-out, transform 0.05s ease-out;
|
||||
will-change: filter, transform;
|
||||
transition: filter 0.05s ease-out, transform 0.05s ease-out, background-image 1.5s ease-in-out;
|
||||
will-change: filter, transform, background-image;
|
||||
}
|
||||
|
||||
.background::after {
|
||||
@ -855,16 +855,23 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
<div class="now-playing">
|
||||
<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';">
|
||||
<img id="track-cover" src="./assets/pasted-20260215-163754-def41f49.png" alt="Cover" crossorigin="anonymous" 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>
|
||||
<div id="track-artist" class="track-artist" style="font-size: 0.95rem; font-weight: 600; opacity: 0.8; color: var(--primary-color); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px;">Lili Records Radio</div>
|
||||
<div id="track-album" style="font-size: 0.8rem; opacity: 0.6; color: #fff; margin-top: 2px; display: none; font-style: italic;"></div>
|
||||
<div class="track-status" style="margin-top: 5px; display: flex; align-items: center; gap: 5px; font-size: 0.75rem;">
|
||||
<span style="width: 8px; height: 8px; background: #ff4444; border-radius: 50%; display: inline-block; animation: pulse 1.5s infinite;"></span>
|
||||
EN VIVO
|
||||
</div>
|
||||
<div id="track-progress-container" style="width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-top: 10px; display: none; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);">
|
||||
<div id="track-progress-bar" style="height: 100%; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); width: 0%; transition: width 1s linear;"></div>
|
||||
</div>
|
||||
<a id="lyrics-link" href="#" target="_blank" style="font-size: 0.7rem; color: var(--primary-color); text-decoration: none; margin-top: 8px; display: none; align-items: center; gap: 4px; opacity: 0.8; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
|
||||
<i class="bi bi-music-note-list"></i> BUSCAR LETRA
|
||||
</a>
|
||||
</div>
|
||||
<button id="like-song-btn" onclick="likeSong()" style="background: none; border: none; color: #ff4444; font-size: 1.8rem; cursor: pointer; transition: transform 0.2s; display: flex; align-items: center; gap: 5px;">
|
||||
<i class="bi bi-heart"></i>
|
||||
@ -1006,6 +1013,8 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
const playIcon = document.getElementById('play-icon');
|
||||
const trackTitle = document.getElementById('track-title');
|
||||
const trackArtist = document.getElementById('track-artist');
|
||||
const trackAlbum = document.getElementById('track-album');
|
||||
const lyricsLink = document.getElementById('lyrics-link');
|
||||
const trackCover = document.getElementById('track-cover');
|
||||
const coverPlaceholder = document.getElementById('cover-placeholder');
|
||||
const visualizerContainer = document.getElementById('audio-visualizer');
|
||||
@ -1613,6 +1622,8 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
}
|
||||
|
||||
// Fetch Now Playing Metadata from RadioKing
|
||||
let progressInterval = null;
|
||||
|
||||
async function updateMetadata() {
|
||||
try {
|
||||
const response = await fetch('https://www.radioking.com/widgets/api/v1/radio/828046/track/current');
|
||||
@ -1621,11 +1632,15 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
if (data && data.title) {
|
||||
const title = data.title;
|
||||
const artist = data.artist || 'Lili Records';
|
||||
const album = data.album || '';
|
||||
const coverUrl = data.cover || './assets/pasted-20260215-163754-def41f49.png';
|
||||
|
||||
const fullDisplay = title.includes(artist) ? title : `${artist} - ${title}`;
|
||||
|
||||
if (trackTitle.textContent !== title || (trackArtist && trackArtist.textContent !== artist)) {
|
||||
// Clear existing progress interval
|
||||
if (progressInterval) clearInterval(progressInterval);
|
||||
|
||||
// Add previous song to history before changing
|
||||
if (trackTitle.textContent !== "Cargando stream..." && trackTitle.textContent !== "Lili Records Radio - En Vivo") {
|
||||
const prevTrack = {
|
||||
@ -1643,6 +1658,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
|
||||
trackTitle.style.opacity = '0';
|
||||
if (trackArtist) trackArtist.style.opacity = '0';
|
||||
if (trackAlbum) trackAlbum.style.opacity = '0';
|
||||
if (trackCover) trackCover.style.opacity = '0';
|
||||
|
||||
// Reset Like Button
|
||||
@ -1659,6 +1675,21 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
trackTitle.textContent = title;
|
||||
if (trackArtist) trackArtist.textContent = artist;
|
||||
|
||||
if (trackAlbum) {
|
||||
if (album) {
|
||||
trackAlbum.textContent = album;
|
||||
trackAlbum.style.display = 'block';
|
||||
trackAlbum.style.opacity = '0.6';
|
||||
} else {
|
||||
trackAlbum.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
if (lyricsLink) {
|
||||
lyricsLink.href = `https://www.google.com/search?q=${encodeURIComponent(fullDisplay + " letra lyrics")}`;
|
||||
lyricsLink.style.display = 'flex';
|
||||
}
|
||||
|
||||
trackTitle.style.opacity = '1';
|
||||
if (trackArtist) trackArtist.style.opacity = '0.8';
|
||||
|
||||
@ -1667,6 +1698,58 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
trackCover.style.display = 'block';
|
||||
if (coverPlaceholder) coverPlaceholder.style.display = 'none';
|
||||
trackCover.style.opacity = '1';
|
||||
|
||||
// Dynamic Color Extraction
|
||||
trackCover.onload = function() {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = 1;
|
||||
canvas.height = 1;
|
||||
ctx.drawImage(trackCover, 0, 0, 1, 1);
|
||||
const rgb = ctx.getImageData(0, 0, 1, 1).data;
|
||||
if (rgb[0] + rgb[1] + rgb[2] > 30) {
|
||||
const color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
|
||||
document.documentElement.style.setProperty('--primary-color', color);
|
||||
document.documentElement.style.setProperty('--dynamic-glow', `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.7)`);
|
||||
}
|
||||
} catch(e) {}
|
||||
};
|
||||
}
|
||||
|
||||
// Dynamic Background Update
|
||||
fetch(`api/pexels.php?query=${encodeURIComponent(artist + " " + title + " music background")}`)
|
||||
.then(res => res.json())
|
||||
.then(pData => {
|
||||
if (pData.success && pData.url && bg) {
|
||||
bg.style.backgroundImage = `url('${pData.url}')`;
|
||||
}
|
||||
}).catch(() => {});
|
||||
|
||||
// Progress Bar Logic
|
||||
const progContainer = document.getElementById('track-progress-container');
|
||||
const progBar = document.getElementById('track-progress-bar');
|
||||
|
||||
if (data.started_at && data.end_at && progContainer && progBar) {
|
||||
progContainer.style.display = 'block';
|
||||
const start = new Date(data.started_at).getTime();
|
||||
const end = new Date(data.end_at).getTime();
|
||||
const duration = end - start;
|
||||
|
||||
function updateProgressBar() {
|
||||
const now = new Date().getTime();
|
||||
const elapsed = now - start;
|
||||
let percent = (elapsed / duration) * 100;
|
||||
if (percent > 100) percent = 100;
|
||||
if (percent < 0) percent = 0;
|
||||
progBar.style.width = percent + '%';
|
||||
if (percent >= 100) clearInterval(progressInterval);
|
||||
}
|
||||
|
||||
updateProgressBar();
|
||||
progressInterval = setInterval(updateProgressBar, 1000);
|
||||
} else if (progContainer) {
|
||||
progContainer.style.display = 'none';
|
||||
}
|
||||
|
||||
// Fetch likes for this song
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user