<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LEOLIVE — Музыкальный портал 24/7</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <meta property="og:title" content="LEOLIVE">
  <meta property="og:description" content="Сайт, где звучит свежая музыка. 
  Возможность быть услышанным для начинающих
  артистов.">
  <meta property="og:image" content="https://leolive.ru/llogo.jpg">
  <meta property="og:url" content="https://leolive.ru">
  <style>
    :root {
      --bg-primary: #0f0f0f;
      --bg-secondary: #1a1a1a;
      --accent: #ff3366;
      --text-primary: #ffffff;
      --text-secondary: #cccccc;
      --top-bg: #500020;
    }
    
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Montserrat', sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; display: flex; }
    body.top-mode { background: var(--top-bg); }
    
    .sidebar { width: 280px; background: var(--bg-secondary); height: 100vh; position: fixed; left: 0; top: 0; padding: 30px 20px; overflow-y: auto; z-index: 1001; }
    .logo { text-align: right; margin-bottom: 20px; }
    .logo-text { font-size: 2.2rem; font-weight: 700; color: var(--accent); }
    
    .nav-menu { list-style: none; margin-bottom: 20px; }
    .nav-item { margin-bottom: 20px; }
    .nav-link { display: flex; align-items: center; padding: 20px 15px; color: var(--text-secondary); text-decoration: none; border-radius: 8px; }
    .nav-link:hover, .nav-link.active { background: rgba(255,51,102,0.15); color: var(--accent); }
    .nav-link i { margin-right: 12px; font-size: 1.2rem; width: 24px; text-align: center; }
    
    .top-artists { margin-top: 30px; }
    .top-artists h3 { font-size: 1.1rem; margin-bottom: 20px; color: var(--text-secondary); }
    .artist-list { list-style: none; }
    .artist-item { display: flex; align-items: center; padding: 12px 15px; margin-bottom: 10px; border-radius: 8px; cursor: pointer; }
    .artist-item:hover { background: rgba(255,255,255,0.05); }
    .artist-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 12px; border: 2px solid var(--accent); }
    
    /* Бейджи */
    .badge { display:inline-block; padding:2px 6px; border-radius:999px; font-size:.85rem; line-height:1; border:1px solid #444; background:#2a2a2a; }
    .badge.top { background:#2d2a13; border-color:#a38333; }   /* ⭐ */
    .badge.hit { background:#2d1313; border-color:#a33; }      /* 🔥 */
    .badge.new { background:#13222d; border-color:#339; }      /* 💎 */
    .artist-badges { display:inline-flex; gap:6px; margin-left:8px; vertical-align: middle; }

    .main-content { flex: 1; margin-left: 280px; padding: 30px; display: flex; flex-direction: column; min-height: 100vh; }
    .header { text-align: center; margin-bottom: 40px; }
    .header h1{
      font-size: clamp(1.3rem, 2.2vw + 0.6rem, 1.9rem);
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--accent);
    }
    .header p { font-size: 1.2rem; color: var(--text-secondary); }
    
    /* === СТАТУС-ШАПКА: 2 КОЛОНКИ === */
    .status-grid-wrap{display:flex;justify-content:center}
    .status-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      margin-bottom:20px;
      width:100%;
      max-width:880px;
    }
    .status-card-mini{
      display:flex;align-items:center;gap:12px;
      padding:10px 14px;background:var(--bg-secondary);
      border:1px solid #333;border-radius:12px;
      width:100%;max-width:420px;
      font-size:.95rem;box-shadow:0 2px 8px rgba(0,0,0,.2)
    }
    .status-indicator-mini{display:flex;align-items:center;white-space:nowrap}
    .status-dot-mini{width:10px;height:10px;border-radius:50%;margin-right:6px;background:#f44336;transition:all .3s ease}
    .status-dot-mini.online{background:#4CAF50;box-shadow:0 0 10px #4CAF50;animation:pulse 2s infinite}
    .status-text-mini{font-weight:600;font-size:.9rem;color:var(--text-primary)}

    .track-info-mini{flex:1;overflow:hidden;min-width:0}
    .track-info-mini div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
    .track-info-mini div:first-child{font-weight:600;color:var(--accent);font-size:1.02rem}
    .track-info-mini div:last-child{color:var(--text-secondary);font-size:.95rem}

    .status-card-mini.onair{background:#3a1414;border:1px solid #c62828}
    .status-card-mini.neighbors{background:var(--bg-secondary);border:1px solid #333}

    /* соседний блок — компактнее и без выделения артиста */
    .neighbors .n-artist{font-weight:600;color:var(--text-primary);font-size:.9rem}
    .neighbors .n-title{font-weight:400;color:#999;font-size:.85rem}

    /* макет двух мини-блоков (пред/след) */
    .neighbors .two{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}

    /* мини-блок */
    .neighbor{
      display:grid;
      grid-template-columns:20px 1fr;
      grid-template-rows:auto auto;
      column-gap:8px;
      align-items:center;
    }
    .neighbor .n-emoji{
      grid-column:1;
      grid-row:1 / span 2;
      align-self:center;justify-self:center;
      font-size:16px;line-height:1;opacity:.9;
    }
    .neighbor .n-artist{
      grid-column:2;grid-row:1;text-align:left;font-weight:600;font-size:.9rem;color:var(--text-primary);
    }
    .neighbor .n-title{
      grid-column:2;grid-row:2;text-align:left;font-size:.85rem;color:var(--text-secondary);
    }

    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } }
    
    .media-section { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }
    .video-container { width: 100%; max-width: 900px; margin-bottom: 30px; }
    .video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 15px; overflow: hidden; }
    .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

    /* Исполнитель + QR */
    .info-container { display: flex; justify-content: center; gap: 30px; width: 100%; max-width: 800px; }
    .qr-section, .artist-image  { background: var(--bg-secondary); padding: 15px; border-radius: 15px; text-align: center; flex: 1; min-width: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .qr-section h3, .artist-image h3 { margin-bottom: 15px; color: var(--text-secondary); font-size: 1.1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .qr-code { width: 140px; height: 140px; margin: 0 auto; background: white; padding: 10px; border-radius: 10px; }
    .artist-img { width: 180px; height: 180px; object-fit: cover; border-radius: 10px; transition: transform 0.2s ease; }
    .artist-img:hover { transform: scale(1.05); }

    .footer { margin-top: auto; text-align: center; padding: 20px; color: var(--text-secondary); font-size: 0.9rem; }
    
    @media (max-width: 992px) {
      .sidebar { transform: translateX(-100%); }
      .sidebar.active { transform: translateX(0); }
      .main-content { margin-left: 0; }
      .menu-toggle { display: block; position: fixed; top: 30px; left: 10px; z-index: 1002; background: var(--accent); color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: 2px solid #1a1a1a; }
      .info-container { flex-direction: column; align-items: center; }
      .header { margin-left: 60px; }
      .status-grid{grid-template-columns:1fr;max-width:520px}
      .status-card-mini{max-width:520px;align-items:flex-start}
      /* мобильные переносы — перенос по словам, НЕ резать слово */
      .track-info-mini div,
      .neighbor .n-artist,
      .neighbor .n-title{
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.15;
        margin: 0;
        display:block;
      }
      .neighbors .two{ gap: 12px; }
      .neighbor{ align-items: start; row-gap: 2px; }
      .status-grid-wrap, .status-grid{ overflow: visible; }
    }
    @media (max-width: 480px){
      .neighbors .two{ grid-template-columns: 1fr; }
    }

    html, body { max-width: 100%; overflow-x: hidden; }
    img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
    * { max-width: 100vw; }

    /* === СПОЙЛЕР ДЛЯ ПРЕД/СЛЕД === */
    .neighbors-summary{
      cursor:pointer;
      color:var(--text-secondary);
      font-size:.9rem;
      font-weight:600;
      list-style:none;
    }
    .neighbors-summary::-webkit-details-marker{display:none;}
    .neighbors-details[open] .neighbors-summary{margin-bottom:6px;}

    /* мобила — показываем summary, спойлер закрыт (JS убирает open) */
    @media (max-width: 992px){
      .neighbors-summary{display:block;}
    }

    /* десктоп — всегда открыт, summary не показываем */
    @media (min-width: 993px){
      .neighbors-summary{display:none;}
      .neighbors-details{display:block;}
    }
  </style>
</head>
<body class="">
  <div class="menu-toggle"><i class="fas fa-bars"></i></div>
  
  <aside class="sidebar">
    <div class="logo">
      <div class="logo-text">&nbsp;&nbsp;&nbsp;&nbsp;LEOLIVE <span style="font-size: 47px;">•</span></div>
    </div>
    
    <ul class="nav-menu">
      <li class="nav-item"><a href="#" class="nav-link active"><i class="fas fa-broadcast-tower"></i><span>Эфир<br></span></a></li>
      <li class="nav-item">
        <a href="schedule.html"
           onclick="var w=window.open(this.href,'scheduleWin'+Date.now(),'width=900,height=800,menubar=no,toolbar=no,resizable=yes,scrollbars=yes'); if(!w){location.href=this.href} return false;"
           class="nav-link">
          <i class="fas fa-calendar-alt"></i><span>Расписание</span>
        </a>
      </li>
      <li class="nav-item">
        <a href="track.php?charts=1"
           onclick="window.open(this.href,'chartsWin'+Date.now(),'width=600,height=700,resizable=yes,scrollbars=yes'); return false;"
           class="nav-link">
          <i class="fas fa-chart-bar"></i><span>Чарты</span>
        </a>
      </li>
      <li class="nav-item"><a href="https://t.me/leomusic333" target="_blank" class="nav-link"><i class="fas fa-upload"></i><span>Отправить трек</span></a></li>
    </ul>
    
    <div class="top-artists">
      <h3>Топ артистов</h3>
      <ul class="artist-list">
        <li class="artist-item" onclick="(function(u){if(window.matchMedia('(min-width:641px)').matches){var w=window.open(u,'artistWin'+Date.now(),'width=560,height=640,resizable=yes,scrollbars=yes');if(!w){location.href=u;}}else{window.open(u,'_blank');}})('track.php?artist=%D0%9B%D0%B5%D0%B2+%D0%AD%D1%85%D0%BE');"><img src="covers/11.jpg" class="artist-avatar" alt=""><span class="artist-name">Лев Эхо</span><span class="artist-badges"><span class="badge top">⭐</span></span></li><li class="artist-item" onclick="(function(u){if(window.matchMedia('(min-width:641px)').matches){var w=window.open(u,'artistWin'+Date.now(),'width=560,height=640,resizable=yes,scrollbars=yes');if(!w){location.href=u;}}else{window.open(u,'_blank');}})('track.php?artist=Kumquat');"><img src="covers/cover_1756508599_3.jpg" class="artist-avatar" alt=""><span class="artist-name">Kumquat</span><span class="artist-badges"><span class="badge hit">🔥</span></span></li><li class="artist-item" onclick="(function(u){if(window.matchMedia('(min-width:641px)').matches){var w=window.open(u,'artistWin'+Date.now(),'width=560,height=640,resizable=yes,scrollbars=yes');if(!w){location.href=u;}}else{window.open(u,'_blank');}})('track.php?artist=%D0%9F%D0%90%D0%A0%D0%A1');"><img src="covers/pars.jpg" class="artist-avatar" alt=""><span class="artist-name">ПАРС</span></li><li class="artist-item" onclick="(function(u){if(window.matchMedia('(min-width:641px)').matches){var w=window.open(u,'artistWin'+Date.now(),'width=560,height=640,resizable=yes,scrollbars=yes');if(!w){location.href=u;}}else{window.open(u,'_blank');}})('track.php?artist=%D0%98%D1%80%D0%B8%D0%BD%D0%B0+%D0%A0%D0%B5%D0%BF%D1%82%D0%B8%D0%BB%D0%B8%D1%8F');"><img src="covers/reptilia.jpg" class="artist-avatar" alt=""><span class="artist-name">Ирина Рептилия</span></li>      </ul>
    </div>
  </aside>
  
  <main class="main-content">
    <div class="header">
      <h1>Эфир 24/7</h1>
      <p><b>Свежее Музыкальное Вещание</b><br>Идёт подготовка.. Тестируем портал.</p>
    </div>
    
    <!-- ==== ШАПКА: В ЭФИРЕ | ПРЕД/СЛЕД ==== -->
    <div class="status-grid-wrap">
      <div class="status-grid">
        <!-- Левая карточка: В ЭФИРЕ -->
        <div class="status-card-mini onair">
          <div class="status-indicator-mini">
            <span class="status-dot-mini offline"></span>
            <span class="status-text-mini">ЭФИР ОСТАНОВЛЕН</span>
          </div>
                      <div class="track-info-mini"><div><em>—</em></div><div>Ожидание начала</div></div>
                  </div>

        <!-- Правая карточка: PREV/NEXT со спойлером -->
        <div class="status-card-mini neighbors">
          <details class="neighbors-details">
            <summary class="neighbors-summary">⏪⏩ Пред/След</summary>
            <div class="track-info-mini two">
              <!-- PREV -->
              <div class="neighbor">
                <div class="n-emoji">⏪</div>
                <div class="n-artist" id="prev-artist">—</div>
                <div class="n-title"  id="prev-title">—</div>
              </div>
              <!-- NEXT -->
              <div class="neighbor">
                <div class="n-emoji">⏩</div>
                <div class="n-artist" id="next-artist">—</div>
                <div class="n-title"  id="next-title">—</div>
              </div>
            </div>
          </details>
        </div>
      </div>
    </div>
    <!-- ==== /ШАПКА ==== -->
    
    <div class="media-section">
      <div class="video-container">
        <div class="video-wrapper"><iframe src="https://live.vkvideo.ru/app/embed/leo_mus" allowfullscreen></iframe></div>
        <div style="text-align: center; margin: 15px 0; font-size: 1.1rem; color: #fff;">
          <span style="font-size: 1.4rem;">👁</span> 
          <strong id="viewer-count" style="color: #ff3366; margin: 0 5px;">—</strong>
          человек смотрят
        </div>
        <div id="vote-buttons" style="margin-top:15px; display:flex; gap:12px; justify-content:center; flex-wrap: wrap;">
          <button id="btn-warm" style="padding:10px 16px; border-radius:10px; background:#2e7d32; color:#fff; border:none; cursor:pointer;">Тепло</button>
          <button id="btn-cold" style="padding:10px 16px; border-radius:10px; background:#b71c1c; color:#fff; border:none; cursor:pointer;">Холодно</button>
          <button onclick="openDonate()" style="padding:10px 16px; border-radius:10px; background:#ff3366; color:#fff; border:none; cursor:pointer; font-weight:600;">💖 Отправить донат</button>
          <button onclick="openChat()" style="padding:10px 16px; border-radius:10px; background:#0088cc; color:#fff; border:none; cursor:pointer;">💬 Открыть чат</button>
        </div>
      </div>
      
      <div class="info-container">
        <div class="artist-image">
          <h3>Исполнитель</h3><br>
          <a href="#" id="artist-link" target="_blank"><img id="artist-image" class="artist-img" src="" alt=""></a>
        </div>
        <div class="qr-section">
          <div class="qr-code"><img id="qr" src="" alt="QR Code" width="140" height="140"></div>
        </div>
      </div>
    </div>
    
    <footer class="footer">LEOLIVE © Все права защищены 2025</footer>
  </main>
  
  <script>
    document.querySelector('.menu-toggle').addEventListener('click', function() {
      document.querySelector('.sidebar').classList.toggle('active');
    });

    // === ХЕЛПЕР ТОЛЬКО ДЛЯ ОПРЕДЕЛЕНИЯ МОБИЛЫ/WEBVIEW ===
    function isMobileWebView(){
      const ua = navigator.userAgent || '';
      return (
        /Android|iPhone|iPad|iPod/i.test(ua) ||
        /wv|AppsGeyser/i.test(ua) ||
        window.matchMedia('(max-width: 992px)').matches
      );
    }

    function openDonate() {
  if (isMobileWebView()) {
    // На мобиле просто открываем страницу во всей вкладке
    window.location.href = 'donate.php';
    return;
  }

  // Десктоп — попап отдельным окном
  var w = window.open(
    'donate.php',
    'donate' + Date.now(),
    'width=800,height=600,resizable=yes,scrollbars=yes'
  );
  if (!w) {
    window.location.href = 'donate.php';
  }
}


    function openChat() {
      if (isMobileWebView()) {
        location.href = 'chat.php';
        return;
      }
      var w = window.open('chat.php', 'chat', 'width=500,height=600,resizable=yes,scrollbars=yes');
      if (!w) { location.href = 'chat.php'; }
    }

    const playlistRaw = ["00:00:00 - LEOLIVE – Презентация.mp4","00:02:28 - Kumquat – 17 лет.mp4","00:04:57 - Лев Эхо – Прожигаю.mp4","00:05:58 - Лев Эхо – Этой Ночью.mp4","00:06:43 - Лев Эхо – Твоё дыхание.mp4","00:07:20 - Kumquat – Лови баланс.mp4","00:09:50 - LEOLIVE – Презентация.mp4","00:12:18 - Лев Ефремов – Якоря.mp4","00:12:33 - Лев Эхо(piano) – М.Круг – Владимирский централ.mp4","00:15:03 - ПАРС – Ножки в окошко.MP4","00:18:10 - Ирина Рептилия – Валына.mp4","duration: 41"];
    const tracksData = {"Song1":{"title":"Слушай песню Этой Ночью на всех площадках!","artist":"Лев Эхо","cover":"covers\/11.jpg","link":"https:\/\/music.yandex.ru\/track\/139436132","socials":{"vk":"https:\/\/vk.com\/levecho","telegram":"https:\/\/t.me\/leomusic333"},"rating":{"score":454,"views":448,"warm":3,"cold":0}},"Song2":{"title":"Валына","artist":"Ирина Рептилия","cover":"covers\/reptilia.jpg","link":"https:\/\/irina-reptilia.ru\/","socials":{"vk":"https:\/\/vk.com\/reptiliairina"},"rating":{"score":58,"views":56,"warm":1,"cold":0}},"NewSong":{"title":"Ножки в окошко","artist":"ПАРС","cover":"covers\/pars.jpg","link":"https:\/\/music.yandex.ru\/artist\/23666032","socials":{"vk":"https:\/\/vk.com\/pars.space","telegram":"https:\/\/t.me\/PARS_space"},"added_at":"2025-08-30","rating":{"score":172,"views":158,"warm":7,"cold":0}},"Song3":{"title":"Творчество артиста на Яндекс.Музыке","artist":"Kumquat","cover":"covers\/cover_1756508599_3.jpg","link":"https:\/\/music.yandex.ru\/artist\/12685504","socials":{"vk":"https:\/\/vk.com\/kumquat_kumquat","telegram":"https:\/\/t.me\/kumquat_kumquat"},"added_at":"2025-08-23","rating":{"score":416,"views":390,"warm":13,"cold":0}}};
    let startTime = 0;
    let currentTrackData = null;
    let lastViewedKey = null;

    const playlist = playlistRaw
      .filter(line => line.trim() && !/^\s*duration:/i.test(line))
      .map(line => {
        const dash = line.indexOf('-');
        if (dash === -1) return null;

        const timeStr = line.substring(0, dash).trim();
        const rest = line.substring(dash + 1).trim();
        const parts = timeStr.split(':').map(x => parseInt(x, 10) || 0);

        let h = 0, m = 0, s = 0;
        if (parts.length === 3) [h, m, s] = parts;
        else if (parts.length === 2) [m, s] = parts;
        else [s] = parts;

        const startSec = h * 3600 + m * 60 + s;
        return { start: startSec, line: rest, top: line.toLowerCase().includes('top') };
      })
      .filter(Boolean)
      .sort((a, b) => a.start - b.start);

    function updateVisualsForTrack(currentTrack) {
      let hasArtist = false, cover = '';
      for (const key in tracksData) {
        const t = tracksData[key];
        if ((t.artist || '').toLowerCase() === currentTrack.artist.toLowerCase()) {
          hasArtist = true;
          cover = t.cover || '';
          break;
        }
      }

      const qr = document.getElementById('qr');
      if (qr) {
        if (hasArtist && cover) {
          const encodedArtist = encodeURIComponent(currentTrack.artist);
          const baseUrl = window.location.origin;
          const trackUrl = baseUrl + '/track.php?artist=' + encodedArtist;
          const qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=' + encodeURIComponent(trackUrl);
          qr.src = qrUrl;
          qr.style.display = 'block';
        } else {
          qr.style.display = 'none';
        }
      }

      const img = document.getElementById('artist-image');
      const link = document.getElementById('artist-link');
      if (img && link) {
        if (hasArtist && cover) {
          img.src = cover;
          img.alt = currentTrack.artist;
          link.href = `/track.php?artist=${encodeURIComponent(currentTrack.artist)}`;
          link.style.display = 'block';
        } else {
          link.style.display = 'none';
        }
      }

      const key = (currentTrack.artist + '|' + currentTrack.title).toLowerCase();
      if (hasArtist && key !== lastViewedKey) {
        lastViewedKey = key;
        const encodedArtist = encodeURIComponent(currentTrack.artist);
        fetch(`track.php?action=view&artist=${encodedArtist}`).catch(() => {});
      }

      document.body.classList.toggle('top-mode', !!currentTrack.isTop);
    }

    // === ГОЛОСОВАНИЕ ===
    ['warm', 'cold'].forEach(kind => {
      const btn = document.getElementById('btn-' + (kind === 'warm' ? 'warm' : 'cold'));
      if (btn) {
        btn.addEventListener('click', () => {
          const ct = currentTrackData || getCurrentTrack();
          if (!ct) return;
          const encodedArtist = encodeURIComponent(ct.artist);
          fetch(`track.php?action=vote&vote=${kind}&artist=${encodedArtist}`)
            .then(r => r.json())
            .then(j => {
              if (j && j.ok) { console.log('Голос засчитан'); }
              else if (j && j.reason === 'already') { console.log('Уже голосовали'); }
            }).catch(() => {});
        });
      }
    });

    // === Текущий трек ===
    function getCurrentTrack() {
      if (!startTime || !playlist.length) return null;

      const durationLine = playlistRaw.find(line => /^duration:/i.test(line.trim()));
      const lastDuration = durationLine ? parseInt(durationLine.replace(/\D/g, ''), 10) : 60;

      const lastTrack = playlist[playlist.length - 1];
      const totalCycleDuration = lastTrack.start + lastDuration;
      const elapsed = Math.floor(Date.now() / 1000) - startTime;
      const cycleTime = elapsed % totalCycleDuration;

      for (let i = playlist.length - 1; i >= 0; i--) {
        if (cycleTime >= playlist[i].start) {
          const item = playlist[i];
          const parts = item.line.split('–', 2);
          const artist = (parts[0] || 'Unknown Artist').trim();
          let title = (parts[1] || item.line).trim();
          title = title.replace(/\s+top\b/i, '').replace(/\.mp4$/i, ''); // скрываем .mp4
          return { artist, title, isTop: item.top, filename: item.line };
        }
      }

      const first = playlist[0];
      const parts = first.line.split('–', 2);
      const artist = (parts[0] || 'Unknown Artist').trim();
      let title = (parts[1] || first.line).trim();
      title = title.replace(/\s+top\b/i, '').replace(/\.mp4$/i, ''); // скрываем .mp4
      return { artist, title, isTop: first.top, filename: first.line };
    }

    // === Параллельный prev/next ===
    let initialPrevNext = {"prev":{"artist":"—","title":"—"},"next":{"artist":"—","title":"—"}};

    function computeCycleTime(){
      if (!startTime || !playlist.length) return null;
      const durationLine = playlistRaw.find(line => /^duration:/i.test(line?.trim?.() || ''));
      const lastDuration = durationLine ? parseInt(durationLine.replace(/\D/g,''),10) : 60;
      const lastTrack = playlist[playlist.length-1];
      const totalCycleDuration = lastTrack.start + lastDuration;
      const elapsed = Math.floor(Date.now()/1000) - startTime;
      return totalCycleDuration > 0 ? (elapsed % totalCycleDuration) : 0;
    }
    function getIndexForCycleTime(ct){
      if (ct === null) return null;
      for (let i=playlist.length-1; i>=0; i--){
        if (ct >= playlist[i].start) return i;
      }
      return 0;
    }
    function parseLineToArtistTitle(line){
      const parts = line.split('–',2);
      const artist = (parts[0] || 'Unknown Artist').trim();
      let title = (parts[1] || line).trim();
      title = title.replace(/\s+top\b/i,'').replace(/\.mp4$/i,'');
      return {artist, title};
    }
    function setPrevNextDOM(obj){
      if (!obj) return;
      const pa = document.getElementById('prev-artist');
      const pt = document.getElementById('prev-title');
      const na = document.getElementById('next-artist');
      const nt = document.getElementById('next-title');
      if (pa) pa.textContent = obj.prev?.artist || '—';
      if (pt) pt.textContent = obj.prev?.title  || '—';
      if (na) na.textContent = obj.next?.artist || '—';
      if (nt) nt.textContent = obj.next?.title  || '—';
    }
    function updatePrevNext(){
      if (!playlist.length || !startTime) return;
      const ct = computeCycleTime();
      const idx = getIndexForCycleTime(ct);
      if (idx === null) return;
      const prevIdx = (idx - 1 + playlist.length) % playlist.length;
      const nextIdx = (idx + 1) % playlist.length;
      const prev = parseLineToArtistTitle(playlist[prevIdx].line);
      const next = parseLineToArtistTitle(playlist[nextIdx].line);
      setPrevNextDOM({prev, next});
    }

    function updateTrackInfo() {
      const currentTrack = getCurrentTrack();
      if (!currentTrack) return;

      const isDifferent = !currentTrackData ||
        currentTrack.artist !== currentTrackData.artist ||
        currentTrack.title !== currentTrackData.title;

      if (isDifferent) {
        const elArtist = document.getElementById('current-artist');
        const elTitle = document.getElementById('current-title');
        if (elArtist) elArtist.textContent = currentTrack.artist;
        if (elTitle) elTitle.textContent = currentTrack.title;

        updateVisualsForTrack(currentTrack);
        currentTrackData = currentTrack;

        // когда меняется текущий — обновляем соседей тоже
        updatePrevNext();
      }
    }

    function updateStreamStatus() {
      fetch('get_start_time.php')
        .then(response => response.text())
        .then(data => {
          const newStartTime = parseInt(data);
          if (newStartTime !== startTime) {
            startTime = newStartTime;
            location.reload();
          } else {
            updateTrackInfo();
          }
        })
        .catch(err => console.error('Ошибка:', err));
    }

    setInterval(updateStreamStatus, 2000);
    setInterval(updateTrackInfo, 1000);

    document.addEventListener('DOMContentLoaded', () => {
      // стартовые prev/next из PHP, чтобы не мигало
      setPrevNextDOM(initialPrevNext);
      updateTrackInfo();
      updatePrevNext();
      if (currentTrackData) updateVisualsForTrack(currentTrackData);

      // Спойлер: открыт на десктопе, закрыт на мобиле
      applyNeighborsOpenState();
    });
    setInterval(updatePrevNext, 1000);

    function updateViewerCount() {
      fetch('get_views.php')
        .then(response => response.json())
        .then(data => {
          const el = document.getElementById('viewer-count');
          if (el) el.textContent = data.viewers || '0';
        })
        .catch(err => {
          console.warn('Ошибка загрузки числа зрителей:', err);
          const el = document.getElementById('viewer-count');
          if (el) el.textContent = '?';
        });
    }
    updateViewerCount();
    setInterval(updateViewerCount, 10000);

    // popup для блока "Исполнитель" снизу
    (function () {
      const link = document.getElementById('artist-link');
      if (!link) return;
      link.addEventListener('click', function (e) {
        const href = this.href;
        if (window.matchMedia('(min-width:641px)').matches) {
          e.preventDefault();
          const w = window.open(
            href,
            'artistWin' + Date.now(),
            'width=720,height=800,resizable=yes,scrollbars=yes'
          );
          if (!w) location.href = href; // фоллбэк если попап заблокирован
        }
        // на мобиле — как обычно (откроется в новой вкладке)
      });
    })();

    // === Управление открытием/закрытием спойлера на разных экранах ===
    function applyNeighborsOpenState(){
      var d = document.querySelector('.neighbors-details');
      if (!d) return;
      if (window.matchMedia('(min-width: 993px)').matches) {
        d.setAttribute('open','');   // десктоп — открыт
      } else {
        d.removeAttribute('open');   // мобила — закрыт
      }
    }
    window.addEventListener('resize', applyNeighborsOpenState);
  </script>
</body>
</html>
