<?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>PLAZMORADIO</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <header>
      <h1>PLAZMORADIO</h1>
      <p class="tagline">Система мониторинга: plazmocraft.ru | Локация: Красноперекопск</p>
    </header>
    <div id="menu">
      <ul>
        <li>
          <a href="admin/">АДМИНКА</a>
        </li>
        <li>
          <a href="status.xsl">СТАТУС</a>
        </li>
        <li>
          <a href="server_version.xsl">ИНФО</a>
        </li>
      </ul>
    </div>
    <div class="roundbox">
      <div class="mounthead">
        <h3 class="mount">⭐ 
                            ПОТОК: /radio_10141</h3>
        <div class="right">
          <ul class="mountlist">
            <li>
              <a class="play" download="radio_10141.m3u" href="data:audio/x-mpegurl;charset=utf-8,https://radio.plazmocraft.ru/radio_10141">
                                        M3U
                                    </a>
            </li>
            <p></p>
            <li>
              <a class="play" download="radio_10141.xspf" href="data:application/xspf+xml;charset=utf-8,&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&lt;playlist version=&quot;1&quot; xmlns=&quot;http://xspf.org/ns/0/&quot;&gt;&lt;trackList&gt;&lt;track&gt;&lt;location&gt;https://radio.plazmocraft.ru/radio_10141&lt;/location&gt;&lt;title&gt;101.5&lt;/title&gt;&lt;/track&gt;&lt;/trackList&gt;&lt;/playlist&gt;">
                                        XSPF
                                    </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="mountcont">
        <div class="plazmo-player" id="player_box_radio_10141">
          <div class="player-status">
            <span><span class="blink-dot"></span> СИГНАЛ: ONLINE</span>
            <span id="timer_radio_10141">00:00:00</span>
          </div>
          <div class="player-controls">
            <button class="btn-play" onclick="togglePlay('/radio_10141', this)">PLAY</button>
            <div style="display:flex; align-items:center; gap:10px; flex-grow:1;">
              <span style="font-size:10px; color:#00ff00;">VOL</span>
              <input type="range" class="volume-slider" min="0" max="1" step="0.05" value="0.8" oninput="changeVolume('/radio_10141', this.value)" />
            </div>
          </div>
          <audio id="audio_radio_10141" src="/radio_10141" preload="none" ontimeupdate="updateTimer('/radio_10141')"></audio>
        </div>
        <table class="yellowkeys">
          <tr>
            <td>НАЗВАНИЕ ПОТОКА:</td>
            <td>101.5</td>
          </tr>
          <tr>
            <td>ОПИСАНИЕ:</td>
            <td>Ресивер радио-станции Радио Крым</td>
          </tr>
          <tr>
            <td>СЛУШАТЕЛИ (ТЕК):</td>
            <td class="streamstats">0<div style="background: var(--neon-green-dim); width: 250px; height: 8px; margin-top: 10px; border: 1px solid var(--neon-green);"><div style="&#10;                                                width: 0%; background: var(--neon-green); height: 100%; box-shadow: 0 0 10px var(--neon-green);&#10;                                            "></div></div></td>
          </tr>
        </table>
      </div>
    </div>
    <script type="text/javascript">
		function togglePlay(mount, btn) {
			var mid = mount.replace(/\//g, '');
			var audio = document.getElementById("audio_" + mid);
			var container = btn.parentNode.parentNode;

			if (audio.paused) {
				// Сбрасываем старый источник перед игрой, чтобы получить свежий поток
				audio.load(); 
				
				// Обрабатываем Promise для предотвращения Uncaught DOMException
				var playPromise = audio.play();

				if (playPromise !== undefined) {
					playPromise.then(function() {
						// Воспроизведение началось успешно
						btn.innerText = 'STOP';
						container.className += ' is-playing';
					}).catch(function(error) {
						// Обработка ошибки (например, если браузер заблокировал автоплей)
						console.log("Ошибка воспроизведения: ", error);
					});
				}
			} else {
				audio.pause();
				// Очищаем источник после паузы, чтобы не копился буфер в фоне
				audio.src = ''; 
				audio.load();
				audio.src = mount; 
				
				btn.innerText = 'PLAY';
				container.className = container.className.replace(' is-playing', '');
			}
		}

		function changeVolume(mount, val) {
			var mid = mount.replace(/\//g, '');
			var audio = document.getElementById("audio_" + mid);
			if(audio) audio.volume = val;
		}

		function updateTimer(mount) {
			var mid = mount.replace(/\//g, '');
			var audio = document.getElementById("audio_" + mid);
			var timerDisplay = document.getElementById("timer_" + mid);
			
			if (audio &amp;&amp; timerDisplay) {
				var s = Math.floor(audio.currentTime);
				var h = Math.floor(s / 3600);
				var m = Math.floor((s % 3600) / 60);
				var sec = s % 60;
				
				timerDisplay.innerText = 
					(h &lt; 10 ? "0"+h : h) + ":" + 
					(m &lt; 10 ? "0"+m : m) + ":" + 
					(sec &lt; 10 ? "0"+sec : sec);
			}
		}
	</script>
    <div id="footer">
        PLAZMORADIO | plazmocraft.ru
    </div>
  </body>
</html>
