<?php
session_start();
$listenUrl = '/stream-proxy.php';
$directListenUrl = 'http://cr3.broadcasturself.com:6660/stream';

$hostname = 'cr3.broadcasturself.com';
$port     = 6660;
$user     = 'Admin';
$pass     = 'RBtV72ZAr6pw';
$mount    = '/stream';

$statsUrl = "http://$hostname:$port/admin/stats";
$nowPlaying = 'Loading...';

$context = stream_context_create([
  'http' => [
    'timeout' => 3,
    'header'  => "Authorization: Basic " . base64_encode("$user:$pass")
  ]
]);

$response = @file_get_contents($statsUrl, false, $context);

if ($response) {
    $xml = @simplexml_load_string($response);

    if ($xml && isset($xml->source)) {
        $streamTitle = null;
        $autodjTitle = null;

        foreach ($xml->source as $source) {
            $mountName = (string)$source['mount'];
            $title     = trim((string)$source->title);

            if ($mountName === $mount && $title !== '') {
                $streamTitle = $title;
            }
            if ($mountName === '/autodj' && $title !== '') {
                $autodjTitle = $title;
            }
        }

        if ($streamTitle) {
            $nowPlaying = $streamTitle;
        } elseif ($autodjTitle) {
            $nowPlaying = $autodjTitle;
        }
    }
}
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Thunder Mountain Radio Pop Out Player</title>
  <link rel="stylesheet" href="/assets/css/style.css">
  <style>
    body.page-player-popout{
      margin:0; min-height:100vh;
      background:
        radial-gradient(circle at 20% 15%, rgba(102,217,255,.18), transparent 24%),
        radial-gradient(circle at 80% 80%, rgba(255,138,29,.16), transparent 28%),
        linear-gradient(rgba(3,8,16,.62), rgba(3,8,16,.82)),
        url('/assets/images/tmr.png') center center / cover fixed no-repeat;
      color:#eefaff;
      padding:36px 18px;
      display:flex; align-items:center; justify-content:center;
    }
    body.page-player-popout .content-area{width:100%;}
    body.page-player-popout .content-wrapper{max-width:1180px;margin:0 auto;}
    .popout-player-card{
      max-width:1100px; margin:0 auto; padding:34px;
      border-radius:28px;
      background:linear-gradient(180deg, rgba(6,12,22,.86), rgba(8,17,31,.78));
      border:1px solid rgba(102,217,255,.22) !important;
      box-shadow:0 0 0 1px rgba(255,138,29,.18), 0 18px 60px rgba(0,0,0,.42), 0 0 42px rgba(102,217,255,.14), inset 0 0 30px rgba(255,255,255,.03) !important;
      overflow:hidden; position:relative;
    }
    .popout-player-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(255,138,29,.10), transparent 32%), radial-gradient(circle at bottom left, rgba(102,217,255,.10), transparent 34%);pointer-events:none;}
    .player-pop-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:26px;align-items:center;position:relative;z-index:1;}
    .player-pop-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(255,138,29,.12);border:1px solid rgba(255,138,29,.24);font-weight:700;color:#ffd8b0;margin-bottom:14px;}
    .player-pop-title{font-size:clamp(2rem,4vw,3.25rem);line-height:1.05;margin:0 0 12px;color:#fff;}
    .player-pop-subtitle{font-size:1.02rem;line-height:1.7;color:#cbe7f5;max-width:58ch;margin:0 0 22px;}
    .eq-wrap{display:flex;gap:8px;align-items:flex-end;height:84px;margin:18px 0 24px;}
    .eq-bar{display:block;width:10px;border-radius:999px;background:linear-gradient(180deg, #66d9ff, #ff8a1d);box-shadow:0 0 12px rgba(102,217,255,.24);animation:eqBounce 1.8s ease-in-out infinite;}
    .eq-bar:nth-child(2n){animation-duration:2.2s}.eq-bar:nth-child(3n){animation-duration:1.5s}
    @keyframes eqBounce{0%,100%{transform:scaleY(.78)}50%{transform:scaleY(1.08)}}
    .player-nowplaying{padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.03);border:1px solid rgba(102,217,255,.16);box-shadow:inset 0 0 20px rgba(102,217,255,.05);}
    .player-nowplaying-label{text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;color:#8fe7ff;margin-bottom:8px;font-weight:800;}
    .player-nowplaying strong{display:block;font-size:1.28rem;line-height:1.4;color:#fff;margin-bottom:14px;}
    .player-meta-row{display:flex;gap:10px;flex-wrap:wrap;}
    .player-meta-chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,138,29,.10);border:1px solid rgba(255,138,29,.24);color:#ffe3c1;font-weight:700;}
    .player-audio-shell{padding:28px;border-radius:28px;background:linear-gradient(180deg, rgba(5,12,22,.92), rgba(8,18,34,.82));border:1px solid rgba(255,138,29,.24);box-shadow:0 0 32px rgba(255,138,29,.12), inset 0 0 24px rgba(255,255,255,.02);position:relative;}
    .player-orb{width:160px;height:160px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 35%, rgba(102,217,255,.35), rgba(10,17,30,.88) 60%);border:1px solid rgba(102,217,255,.18);}
    .player-orb-center{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:2.3rem;background:linear-gradient(180deg, rgba(255,138,29,.82), rgba(102,217,255,.72));color:#07111d;box-shadow:0 0 22px rgba(255,138,29,.28);}
    .player-glow-line{height:4px;border-radius:999px;background:linear-gradient(90deg, rgba(102,217,255,.06), rgba(102,217,255,.84), rgba(255,138,29,.84), rgba(255,138,29,.06));box-shadow:0 0 22px rgba(102,217,255,.2),0 0 22px rgba(255,138,29,.16);margin:0 0 22px;}
    .player-audio-shell audio{width:100%;display:block;margin:0 auto 20px;filter:drop-shadow(0 0 14px rgba(102,217,255,.22));}
    .player-action-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
    .player-action-row .button{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:800;border:1px solid rgba(102,217,255,.22);background:rgba(255,255,255,.03);color:#eefaff;}
    .player-action-row .play-btn{background:linear-gradient(135deg, #1ea7ff, #ff8a1d);color:#08111f;border:none;}
    @media (max-width: 860px){body.page-player-popout{padding:18px 12px}.popout-player-card{padding:22px}.player-pop-layout{grid-template-columns:1fr}.player-orb{width:132px;height:132px}.player-orb-center{width:82px;height:82px;font-size:2rem}}
  </style>
</head>
<body class="page-player-popout">
  <main class="content-area">
    <div class="content-wrapper">
      <section class="content-card popout-player-card">
        <div class="player-pop-layout">
          <div class="player-pop-copy">
            <div class="player-pop-kicker">🎙️ Thunder Mountain Radio</div>
            <h1 class="player-pop-title">Pop Out Player</h1>
            <p class="player-pop-subtitle">Country heart, jukebox soul, and a little late-night sparkle. Keep the station playing in its own window with a richer, cleaner live player.</p>

            <div class="eq-wrap" aria-hidden="true">
              <span class="eq-bar" style="height:38%"></span>
              <span class="eq-bar" style="height:62%"></span>
              <span class="eq-bar" style="height:46%"></span>
              <span class="eq-bar" style="height:88%"></span>
              <span class="eq-bar" style="height:55%"></span>
              <span class="eq-bar" style="height:78%"></span>
              <span class="eq-bar" style="height:44%"></span>
              <span class="eq-bar" style="height:68%"></span>
            </div>

            <div class="player-nowplaying">
              <div class="player-nowplaying-label">Now Playing</div>
              <strong id="nowPlayingText"><?= htmlspecialchars($nowPlaying) ?></strong>
              <div class="player-meta-row">
                <span class="player-meta-chip">📻 Live stream ready</span>
                <span class="player-meta-chip">🔊 Dedicated player window</span>
                <span class="player-meta-chip">⚡ Thunder mode on</span>
              </div>
            </div>
          </div>

          <div class="player-audio-shell">
            <div class="player-orb" aria-hidden="true">
              <div class="player-orb-center">🎧</div>
            </div>
            <div class="player-glow-line"></div>
            <audio controls autoplay preload="none" src="<?= htmlspecialchars($listenUrl) ?>"></audio>
            <div class="player-action-row">
              <a class="button play-btn" href="<?= htmlspecialchars($listenUrl) ?>" target="_blank" rel="noopener">Open Stream Link</a>
              <a class="button" href="<?= htmlspecialchars($directListenUrl) ?>" target="_blank" rel="noopener">Open External Source</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
<script>
async function refreshNowPlaying(){
  try{
    const res = await fetch('/api/nowplaying.php?ts=' + Date.now(), {cache:'no-store'});
    if(!res.ok) return;
    const data = await res.json();
    const el = document.getElementById('nowPlayingText');
    if(el && data && data.title){
      el.textContent = data.title;
    }
  }catch(e){}
}
refreshNowPlaying();
setInterval(refreshNowPlaying, 30000);
</script>
</body>
</html>
