<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OPHI-118 / Music Box cover</title>
<link rel="stylesheet" href="{{ asset('css/hud.css') }}">
<style>
  html, body {
    background: var(--term-bg);
    color: var(--term-fg);
    font-family: var(--mono);
  }
  body {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--frame);
    box-shadow:
      0 0 18px var(--frame-glow),
      inset 0 0 50px rgba(0, 30, 0, 0.55);
    text-shadow: 0 0 4px var(--term-glow);
  }
  .corner {
    position: absolute;
    width: 14px; height: 14px;
    border-color: var(--frame);
    border-style: solid;
    border-width: 0;
    z-index: 4;
  }
  .corner.tl { top: 4px;    left: 4px;   border-top-width: 2px;    border-left-width: 2px;  }
  .corner.tr { top: 4px;    right: 4px;  border-top-width: 2px;    border-right-width: 2px; }
  .corner.bl { bottom: 4px; left: 4px;   border-bottom-width: 2px; border-left-width: 2px;  }
  .corner.br { bottom: 4px; right: 4px;  border-bottom-width: 2px; border-right-width: 2px; }
  .header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 22px 10px;
    font-size: 13px; letter-spacing: 0.22em;
    color: var(--hud);
    border-bottom: 1px solid rgba(79, 210, 255, 0.22);
    flex: 0 0 auto;
  }
  .header .left  { display: inline-flex; gap: 10px; align-items: center; }
  .header .right { color: var(--hud-dim); font-size: 13px; letter-spacing: 0.12em; }
  .art-stage {
    position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
    background: #02080a;
  }
  #cover {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 320ms ease;
  }
  #cover.on { opacity: 1; }
  .placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px; text-align: center; padding: 0 22px;
    color: var(--term-fg-dim);
    transition: opacity 320ms ease;
  }
  .placeholder.off { opacity: 0; }
  .placeholder svg { opacity: 0.55; }
  .placeholder .ph-text { font-size: 13px; letter-spacing: 0.42em; color: rgba(95, 220, 98, 0.65); }
  .placeholder .ph-sub  { font-size: 11px; letter-spacing: 0.18em; color: var(--term-fg-dim); }
  .scanlines { opacity: 0.32; z-index: 3; }
  .caption {
    flex: 0 0 auto;
    padding: 10px 22px 12px;
    font-size: 14px;
    border-top: 1px solid rgba(95, 220, 98, 0.18);
    color: var(--term-fg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; gap: 10px; align-items: baseline;
  }
  .caption .arrow {
    color: var(--term-fg-bright);
    flex: 0 0 auto;
    animation: np-pulse 1.05s ease-in-out infinite alternate;
  }
  .caption .text {
    color: var(--term-fg-bright);
    flex: 1 1 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
  }
  .caption.empty .arrow,
  .caption.empty .text { color: var(--term-fg-dim); }
  body.no-bars .header,
  body.no-bars .caption { display: none; }
</style>
</head>
<body>
<span class="corner tl"></span>
<span class="corner tr"></span>
<span class="corner bl"></span>
<span class="corner br"></span>

<div class="header">
  <span class="left">ALBUM ART</span>
  <span class="right">CH 118.0 // MUSIC</span>
</div>

<div class="art-stage">
  <img id="cover" alt="">
  <div class="placeholder" id="placeholder">
    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="6" y="6" width="52" height="52" rx="2" stroke="#5fdc62" stroke-width="2"/>
      <circle cx="32" cy="32" r="14" stroke="#5fdc62" stroke-width="2"/>
      <circle cx="32" cy="32" r="3"  fill="#5fdc62"/>
    </svg>
    <span class="ph-text">— NO ART —</span>
    <span class="ph-sub">awaiting cover…</span>
  </div>
  <div class="scanlines"></div>
</div>

<div class="caption empty" id="caption">
  <span class="arrow">▶</span><span class="text" id="captionText">connecting…</span>
</div>

@include('partials.obs-ws-scripts')
<script src="{{ asset('js/obs-ws-bootstrap.js') }}"></script>
<script>
  'use strict';
  const params = new URLSearchParams(location.search);
  if (params.get('bars') === '0') document.body.classList.add('no-bars');

  const coverImg    = document.getElementById('cover');
  const placeholder = document.getElementById('placeholder');
  const caption     = document.getElementById('caption');
  const captionText = document.getElementById('captionText');

  // Cover served by Laravel — same origin as the page, so a relative
  // /cover.jpg works without CORS concerns. Cache-busted with ?v=<hash>.
  const COVER_URL = '/cover.jpg';

  let lastHash = undefined;
  function showArt(_path, hash) {
    if (hash === lastHash) return;
    lastHash = hash;
    if (!hash) {
      coverImg.classList.remove('on');
      placeholder.classList.remove('off');
      coverImg.removeAttribute('src');
      return;
    }
    coverImg.onload = () => {
      coverImg.classList.add('on');
      placeholder.classList.add('off');
    };
    coverImg.onerror = () => {
      coverImg.classList.remove('on');
      placeholder.classList.remove('off');
    };
    coverImg.src = `${COVER_URL}?v=${hash}`;
  }

  function applyState(s) {
    showArt(s.coverPath, s.coverHash);
    if (s.title) {
      captionText.textContent = s.title;
      caption.classList.remove('empty');
    } else {
      captionText.textContent = '—';
      caption.classList.add('empty');
    }
  }
  function setOffline(msg) {
    captionText.textContent = msg;
    caption.classList.add('empty');
    coverImg.classList.remove('on');
    placeholder.classList.remove('off');
    coverImg.removeAttribute('src');
    lastHash = undefined;
  }

  OBSWSBootstrap.onState(applyState, {
    onClose: () => setOffline('disconnected'),
  });
</script>
</body>
</html>
