<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Icecast2 Потоковый Медиа Сервер</title>
    <link rel="stylesheet" type="text/css" href="/style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <style type="text/css">
        /* Контейнер для главного аудиоплеера */
        .audioplayer {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
        }

        #audio-controls {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
        }

        .play-btn {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            background-color: #3498db;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 2px solid transparent;
            font-size: 20px;
            transition: all 0.3s ease;
            position: relative;
        }

        .play-btn:hover {
            background-color: #2980b9;
            border: 2px solid #3498db;
            transform: scale(1.05);
        }

        .play-btn::before {
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 0 10px 16px;
            border-color: transparent transparent transparent #ffffff;
            margin-left: 2px;
        }

        .play-btn::after {
            content: '';
            width: 16px;
            height: 16px;
            background-color: #ffffff;
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .play-btn.stopped::before {
            display: flex;
        }

        .play-btn.playing::before {
            display: none;
        }

        .play-btn.playing::after {
            display: flex;
        }

        .volume-control {
            height: 6px;
            border-radius: 5px;
            width: 100px;
            background: #333;
        }

        input[type="range"] {
            accent-color: #ff9d00;
        }

        /* Кнопка воспроизведения для отдельных потоков */
        .play-mount-btn {
            background: #27ae60;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 5px;
            font-size: 12px;
            transition: background 0.3s ease;
        }

        .play-mount-btn:hover {
            background: #219653;
        }

        /* Стили для отображения текущего трека */
        .now-playing {
            color: #000000;
            font-weight: bold;
            min-height: 1.2em;
            font-size: 14px;
        }

        .now-playing-track {
            color: #000000;
            font-weight: bold;
            min-height: 1.2em;
            margin-bottom: 5px;
            padding: 5px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }

        /* Адаптивность */
        @media (max-width: 768px) {
            #audio-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .volume-control {
                width: 100%;
            }
        }
    </style>
  </head>
  <body>
    <h2 id="header">Статус сервера</h2>
    <div id="menu">
      <ul>
        <li>
          <a href="admin/" target="_blank">Администрирование</a>
        </li>
        <li>
          <a href="status.xsl">Статус сервера</a>
        </li>
      </ul>
    </div>
    <div class="roundbox">
      <h3>Основной плеер</h3>
      <div class="audioplayer">
        <div id="audio-controls">
          <button id="mainPlayBtn" class="play-btn stopped" onclick="toggleMainStream()"></button>
          <input type="range" id="mainVolumeControl" class="volume-control" min="0" max="1" step="0.01" value="0.5" />
          <span id="nowPlaying" class="now-playing">Выберите поток для воспроизведения</span>
        </div>
      </div>
    </div>
    <div class="roundbox">
      <div class="mounthead">
        <h3 class="mount">Точка подключения /80x.mp3</h3>
        <div class="right"></div>
      </div>
      <div class="mountcont">
        <table class="yellowkeys">
          <tbody>
            <tr>
              <td>Название потока:</td>
              <td>Hits 80x</td>
            </tr>
            <tr>
              <td>Описание потока:</td>
              <td>Radio Best 80x Music</td>
            </tr>
            <tr>
              <td>Тип контента:</td>
              <td>audio/mpeg</td>
            </tr>
            <tr>
              <td>Начало потока:</td>
              <td class="streamstats">Sun, 17 May 2026 04:59:45 +0300</td>
            </tr>
            <tr>
              <td>Слушатели (текущие):</td>
              <td class="streamstats">46</td>
            </tr>
            <tr>
              <td>Слушатели (пиковое):</td>
              <td class="streamstats">49</td>
            </tr>
            <tr>
              <td>Жанр:</td>
              <td class="streamstats">Retro</td>
            </tr>
            <tr>
              <td>Сейчас играет:</td>
              <td class="streamstats">
                <div class="now-playing-track" data-mount="/80x.mp3">Песняры - Ясь Конюшину</div>
                <button class="play-mount-btn" data-mount="/80x.mp3" data-type="audio/mpeg" onclick="playMount('/80x.mp3', 'audio/mpeg')">
                                        Воспроизвести
                                    </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="roundbox">
      <div class="mounthead">
        <h3 class="mount">Точка подключения /best.mp3</h3>
        <div class="right"></div>
      </div>
      <div class="mountcont">
        <table class="yellowkeys">
          <tbody>
            <tr>
              <td>Название потока:</td>
              <td>Best Trance</td>
            </tr>
            <tr>
              <td>Описание потока:</td>
              <td>Best Trance Music</td>
            </tr>
            <tr>
              <td>Тип контента:</td>
              <td>audio/mpeg</td>
            </tr>
            <tr>
              <td>Начало потока:</td>
              <td class="streamstats">Sun, 17 May 2026 04:59:51 +0300</td>
            </tr>
            <tr>
              <td>Слушатели (текущие):</td>
              <td class="streamstats">24</td>
            </tr>
            <tr>
              <td>Слушатели (пиковое):</td>
              <td class="streamstats">29</td>
            </tr>
            <tr>
              <td>Жанр:</td>
              <td class="streamstats">Trance</td>
            </tr>
            <tr>
              <td>Сейчас играет:</td>
              <td class="streamstats">
                <div class="now-playing-track" data-mount="/best.mp3">666 - Rhythm takes control (Mike Bound Remix)</div>
                <button class="play-mount-btn" data-mount="/best.mp3" data-type="audio/mpeg" onclick="playMount('/best.mp3', 'audio/mpeg')">
                                        Воспроизвести
                                    </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div id="footer">
        Поддержите разработку Icecast на <a href="https://www.icecast.org/">www.icecast.org</a></div>
    <script type="text/javascript">
        // Глобальные переменные
        var currentAudio = null;
        var currentMount = null;
        var currentTrackInfo = 'Выберите поток для воспроизведения';
        var updateInterval = null;
        var lastUpdateTime = 0;

        // Инициализация при загрузке
        document.addEventListener("DOMContentLoaded", function() {
            var mainPlayBtn = document.getElementById('mainPlayBtn');
            var mainVolumeControl = document.getElementById('mainVolumeControl');
            var nowPlayingElement = document.getElementById('nowPlaying');
            
            // Устанавливаем начальное состояние кнопки
            mainPlayBtn.classList.add('stopped');
            
            // Загрузка сохраненной громкости
            var savedVolume = localStorage.getItem('volume');
            if (savedVolume !== null) {
                mainVolumeControl.value = savedVolume;
            }

            // Обработчик громкости
            mainVolumeControl.addEventListener('input', function() {
                if (currentAudio) {
                    currentAudio.volume = mainVolumeControl.value;
                }
                localStorage.setItem('volume', mainVolumeControl.value);
            });

            // Обновляем отображение текущего трека
            nowPlayingElement.textContent = currentTrackInfo;
            
            // Запуск автообновления информации о треках
            updateNowPlayingInfo();
            // Обновляем каждые 3 секунды
            updateInterval = setInterval(updateNowPlayingInfo, 3000);
            
            console.log('Плеер инициализирован, автообновление запущено');
        });

        // Воспроизведение конкретного mount point
        function playMount(mount, mimeType) {
            console.log('Запуск воспроизведения:', mount);
            if (currentAudio &amp;&amp; currentMount === mount) {
                // Если уже воспроизводится этот поток - переключить
                toggleMainStream();
                return;
            }
            
            // Запускаем новый поток
            startPlayback(mount, mimeType);
        }

        // Основная функция переключения воспроизведения
        function toggleMainStream() {
            if (currentAudio) {
                console.log('Остановка воспроизведения');
                stopPlayback();
            } else {
                // Если нет текущего потока, пытаемся воспроизвести первый доступный
                var firstMount = document.querySelector('.play-mount-btn');
                if (firstMount) {
                    var mount = firstMount.getAttribute('data-mount');
                    var type = firstMount.getAttribute('data-type');
                    console.log('Автовыбор потока:', mount);
                    startPlayback(mount, type);
                } else {
                    console.log('Нет доступных потоков для воспроизведения');
                }
            }
        }

        // Запуск воспроизведения
        function startPlayback(mount, mimeType) {
            // Останавливаем предыдущее воспроизведение
            if (currentAudio) {
                currentAudio.pause();
                currentAudio = null;
            }
            
            try {
                // Создаем URL для потока
                var streamUrl = window.location.origin + mount;
                console.log('Создание аудио для:', streamUrl);
                
                currentAudio = new Audio(streamUrl);
                currentMount = mount;
                
                // Устанавливаем громкость
                var mainVolumeControl = document.getElementById('mainVolumeControl');
                currentAudio.volume = mainVolumeControl.value;
                
                // Настраиваем события
                setupAudioEvents();
                
                // Запускаем воспроизведение
                currentAudio.play().then(function() {
                    console.log('Воспроизведение успешно запущено');
                    var mainPlayBtn = document.getElementById('mainPlayBtn');
                    var nowPlayingElement = document.getElementById('nowPlaying');
                    
                    mainPlayBtn.classList.remove('stopped');
                    mainPlayBtn.classList.add('playing');
                    
                    // Немедленно обновляем информацию о текущем треке
                    updateCurrentTrackInfo(mount);
                    
                }).catch(function(error) {
                    console.error('Ошибка воспроизведения:', error);
                    stopPlayback();
                    var nowPlayingElement = document.getElementById('nowPlaying');
                    nowPlayingElement.textContent = 'Ошибка воспроизведения: ' + error.message;
                });
                
            } catch (error) {
                console.error('Ошибка создания аудиопотока:', error);
                stopPlayback();
            }
        }

        // Остановка воспроизведения
        function stopPlayback() {
            if (currentAudio) {
                currentAudio.pause();
                currentAudio.src = "";
                currentAudio = null;
            }
            currentMount = null;
            
            var mainPlayBtn = document.getElementById('mainPlayBtn');
            var nowPlayingElement = document.getElementById('nowPlaying');
            
            mainPlayBtn.classList.remove('playing');
            mainPlayBtn.classList.add('stopped');
            nowPlayingElement.textContent = 'Воспроизведение остановлено';
            currentTrackInfo = 'Воспроизведение остановлено';
        }

        // Настройка событий аудио
        function setupAudioEvents() {
            if (!currentAudio) return;

            currentAudio.addEventListener('error', function(e) {
                console.error('Ошибка аудио:', e);
                var nowPlayingElement = document.getElementById('nowPlaying');
                nowPlayingElement.textContent = 'Ошибка соединения';
            });

            currentAudio.addEventListener('loadeddata', function() {
                console.log('Аудио данные загружены');
            });

            currentAudio.addEventListener('waiting', function() {
                var nowPlayingElement = document.getElementById('nowPlaying');
                nowPlayingElement.textContent = 'Буферизация...';
            });

            currentAudio.addEventListener('playing', function() {
                console.log('Аудио воспроизводится');
                var nowPlayingElement = document.getElementById('nowPlaying');
                nowPlayingElement.textContent = currentTrackInfo;
            });
        }

        // Обновление информации о текущем треке для конкретного mount
        function updateCurrentTrackInfo(mount) {
            var trackElement = document.querySelector('.now-playing-track[data-mount="' + mount + '"]');
            if (trackElement) {
                currentTrackInfo = trackElement.textContent.trim();
                var nowPlayingElement = document.getElementById('nowPlaying');
                if (currentAudio &amp;&amp; !currentAudio.paused) {
                    nowPlayingElement.textContent = currentTrackInfo;
                }
                console.log('Обновлен трек для', mount, ':', currentTrackInfo);
            }
        }

        // Автообновление информации о треках
        function updateNowPlayingInfo() {
            var now = Date.now();
            // Добавляем timestamp для предотвращения кэширования
            var url = '/status-json.xsl?t=' + now;
            
            console.log('Запрос обновления информации о треках...', url);
            
            fetch(url, {
                method: 'GET',
                headers: {
                    'Cache-Control': 'no-cache',
                    'Pragma': 'no-cache'
                }
            })
            .then(function(response) {
                if (!response.ok) throw new Error('HTTP error ' + response.status);
                return response.json();
            })
            .then(function(data) {
                if (!data || !data.icestats) {
                    console.log('Нет данных icestats');
                    return;
                }
                
                var sources = data.icestats.source;
                if (!sources) {
                    console.log('Нет источников');
                    return;
                }
                
                if (!Array.isArray(sources)) {
                    sources = [sources];
                }
                
                console.log('Найдено источников:', sources.length);
                console.log('Данные получены:', data);
                
                var updated = false;
                sources.forEach(function(source) {
                    if (!source) return;
                    
                    // Получаем mount point разными способами
                    var mount = source.mount || 
                               (source.listenurl ? source.listenurl.split('/').pop() : null);
                    
                    if (!mount) {
                        console.log('Пропуск источника без mount:', source);
                        return;
                    }
                    
                    // Нормализуем mount point
                    if (!mount.startsWith('/')) {
                        mount = '/' + mount;
                    }
                    
                    // Получаем информацию о треке
                    var title = source.title || 'Неизвестно';
                    var nowPlayingText = title;
                    
                    console.log('Обработка потока:', mount, 'Трек:', title);
                    
                    // Обновляем информацию в таблицах
                    var trackElements = document.querySelectorAll('.now-playing-track[data-mount="' + mount + '"]');
                    
                    if (trackElements.length === 0) {
                        console.log('Не найден элемент для mount:', mount);
                        return;
                    }
                    
                    trackElements.forEach(function(element) {
                        var currentText = element.textContent.trim();
                        if (currentText !== nowPlayingText) {
                            element.textContent = nowPlayingText;
                            console.log('Обновлен трек для', mount, 'с:', currentText, 'на:', nowPlayingText);
                            updated = true;
                            
                            // Если это текущий воспроизводимый поток, обновляем плеер
                            if (currentMount === mount) {
                                currentTrackInfo = nowPlayingText;
                                var nowPlayingElement = document.getElementById('nowPlaying');
                                if (currentAudio &amp;&amp; !currentAudio.paused) {
                                    nowPlayingElement.textContent = nowPlayingText;
                                    console.log('Обновлен текущий трек в плеере:', nowPlayingText);
                                }
                            }
                        }
                    });
                });
                
                if (updated) {
                    console.log('Информация о треках обновлена');
                } else {
                    console.log('Изменений не обнаружено');
                }
            })
            .catch(function(error) {
                console.error('Ошибка получения статуса:', error);
            });
        }

        // Очистка интервала при закрытии страницы
        window.addEventListener('beforeunload', function() {
            if (updateInterval) {
                clearInterval(updateInterval);
                console.log('Интервал автообновления очищен');
            }
        });
    </script>
  </body>
</html>
