@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap’);
#vtx-player-footer {
position: fixed;
bottom: 0; left: 0; width: 100%;
background: #000;
border-top: 3px solid #BF2B18;
padding: 8px 0;
z-index: 999999;
font-family: ‘Montserrat’, sans-serif;
height: 65px;
display: flex !important; /* Forzamos visibilidad */
align-items: center;
box-sizing: border-box;
}
.vtx-container {
width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
box-sizing: border-box;
}
.vtx-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.vtx-cover-box {
width: 45px; height: 45px;
border-radius: 4px;
background-size: cover;
background-position: center;
background-color: #111;
border: 1px solid #BF2B18;
flex-shrink: 0;
background-image: url(‘https://vorterix.com/assets/img/logo-vorterix.png’);
}
.vtx-text { overflow: hidden; white-space: nowrap; color: #fff; }
.vtx-live-tag { font-size: 9px; font-weight: 900; color: #ff0000; display: flex; align-items: center; gap: 5px; }
.vtx-dot { width: 6px; height: 6px; background: #ff0000; border-radius: 50%; animation: vtx-blink 1.5s infinite; }
#vtx-artist { font-size: 10px; color: #aaa; display: block; text-transform: uppercase; }
#vtx-track { font-size: 13px; font-weight: 700; display: block; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.vtx-play-btn {
width: 48px; height: 48px; border-radius: 50%; border: none;
background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: 0.2s; flex-shrink: 0; margin-left: 15px;
}
.vtx-play-btn:hover { background: #ff0000; transform: scale(1.05); }
.vtx-play-btn svg { width: 24px; height: 24px; fill: #000; }
.vtx-play-btn:hover svg { fill: #fff; }
/* Lógica de iconos */
.icon-pause { display: none; }
.is-playing .icon-pause { display: block; }
.is-playing .icon-play { display: none; }
.vtx-loading { animation: vtx-loadPulse 0.6s infinite alternate; opacity: 0.5; }
@keyframes vtx-loadPulse { from { transform: scale(1); } to { transform: scale(0.85); } }
@keyframes vtx-blink { 0%, 100% {opacity:1} 50% {opacity:0.3} }
body { padding-bottom: 65px !important; }
document.addEventListener(‘DOMContentLoaded’, function() {
const audio = document.getElementById(‘vtx-audio’);
const btn = document.getElementById(‘vtx-btn’);
const cover = document.getElementById(‘vtx-cover’);
const artistEl = document.getElementById(‘vtx-artist’);
const trackEl = document.getElementById(‘vtx-track’);
const streamUrl = “https://stream.zeno.fm/hspzyrvmug0uv”;
const sId = “hspzyrvmug0uv”;
const fallbackCover = “https://vorterix.com/assets/img/logo-vorterix.png”;
// Función para reproducir
function playAudio() {
btn.classList.add(‘vtx-loading’);
audio.src = streamUrl + “?cb=” + Date.now();
audio.play()
.then(() => {
btn.classList.remove(‘vtx-loading’);
btn.classList.add(‘is-playing’);
localStorage.setItem(‘vtx_playing’, ‘true’);
})
.catch(() => {
btn.classList.remove(‘vtx-loading’);
});
}
// Función para pausar
function pauseAudio() {
audio.pause();
audio.src = “”;
btn.classList.remove(‘is-playing’);
localStorage.setItem(‘vtx_playing’, ‘false’);
}
// Evento Click
btn.addEventListener(‘click’, () => {
if (audio.paused) playAudio();
else pauseAudio();
});
// Auto-resume al cambiar de página
if (localStorage.getItem(‘vtx_playing’) === ‘true’) {
playAudio();
}
// Metadatos y Carátulas
async function updateCover(art, trk) {
if (!art || art.toLowerCase().includes(“vorterix”)) {
cover.style.backgroundImage = `url(‘${fallbackCover}’)`;
return;
}
try {
const res = await fetch(`https://itunes.apple.com/search?term=${encodeURIComponent(art + ” ” + trk)}&entity=song&limit=1`);
const data = await res.json();
if (data.results && data.results.length > 0) {
const img = data.results[0].artworkUrl100.replace(“100×100”, “600×600″);
cover.style.backgroundImage = `url(‘${img}’)`;
}
} catch (e) {}
}
function initZeno() {
try {
const es = new EventSource(`https://api.zeno.fm/mounts/metadata/subscribe/${sId}`);
es.onmessage = (e) => {
const data = JSON.parse(e.data);
if (data.streamTitle) {
let [art, trk] = data.streamTitle.includes(” – “) ? data.streamTitle.split(” – “) : [“VORTERIX”, data.streamTitle];
artistEl.innerText = art.trim();
trackEl.innerText = trk.trim();
updateCover(art.trim(), trk.trim());
}
};
es.onerror = () => { es.close(); setTimeout(initZeno, 10000); };
} catch (err) {}
}
initZeno();
});
