open-standards/wai/wai-web/compose/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WAI composing sink</title>
<style>
  :root {
    --bg: #fbfbfa; --fg: #1b1c1e; --muted: #5d6168; --line: #d9dadc; --panel: #ffffff;
    --ok: #1d6b3a; --bad: #a3261b; --accent: #2b59c3;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #141518; --fg: #e8e9eb; --muted: #a0a4ab; --line: #34363b; --panel: #1c1d21;
            --ok: #6fcf8f; --bad: #ff8a7a; --accent: #8fb0ff; }
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
  main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }
  h1 { font-size: 1.35rem; margin: 0 0 4px; }
  h2 { font-size: 1.05rem; margin: 28px 0 8px; }
  p.lede { color: var(--muted); margin: 0 0 16px; max-width: 70ch; }
  .controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0; }
  button, select { font: inherit; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg); }
  button:disabled { opacity: .5; }
  #status { color: var(--muted); }
  #status.bad { color: var(--bad); font-weight: 600; }
  .stage-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 16px; }
  @media (max-width: 720px) { .stage-row { grid-template-columns: 1fr; } }
  .stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
  .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  #video { image-rendering: pixelated; }
  #text { position: absolute; inset: 0; pointer-events: none; padding: 3% 4%; display: flex; flex-direction: column; }
  .cue { background: rgba(0, 0, 0, .72); color: #fff; padding: .2em .6em; border-radius: 3px; font-size: clamp(12px, 2.4vw, 22px); max-width: 90%; }
  .cue.top { align-self: center; order: 0; }
  .cue.bottom { align-self: center; margin-top: auto; }
  .cue.align-left { align-self: flex-start; } .cue.align-right { align-self: flex-end; }
  #floor { position: absolute; inset: 0; pointer-events: none; padding: 3% 4%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; }
  .floor-block { background: rgba(0, 0, 0, .72); color: #fff; padding: .2em .6em; border-radius: 3px; font-size: clamp(12px, 2.4vw, 22px); max-width: 90%; white-space: pre-line; margin: 0; font-weight: 400; }
  .floor-block[data-purpose="1"] { font-size: clamp(14px, 3.2vw, 30px); font-weight: 600; }
  #floor-announce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
  #state table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  #state td { padding: 2px 4px; border-bottom: 1px solid var(--line); }
  .meta { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
  table.grid { width: 100%; border-collapse: collapse; font-size: .9rem; }
  table.grid th, table.grid td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
  table.grid th { color: var(--muted); font-weight: 600; }
  .scroll { overflow-x: auto; }
  .ok { color: var(--ok); } .bad { color: var(--bad); }
  code { font-size: .85em; overflow-wrap: anywhere; }
</style>
</head>
<body>
<main>
  <h1>Composing sink</h1>
  <p class="lede">A WAI package of several components, each carried in the capability that suits it. This page checks the
    package's signed receipt and every object it is about to present, dispatches each component to a decoder this
    device can run, and composes them on one timeline with the video as its clock. Titles this device cannot draw
    are presented as text, from the transcript the package carries for them. A field, or a picture with layers,
    is computed here stage by stage, and each stage is presented once it holds its signed digest.</p>
  <div class="controls">
    <button id="play" disabled>Play</button>
    <label>Device profile
      <select id="profile">
        <option value="">this device</option>
        <option value="wai.video.int_motion,wai.image.png">without the integer video rung</option>
        <option value="wai.video.av1">without the AV1 decoder</option>
        <option value="wai.graphics.vector">without the vector overlay</option>
        <option value="wai.audio.score">without the score</option>
        <option value="wai.splat.int_codec">without the splat decoder</option>
        <option value="wai.image.int_cond_refine,wai.field.int_refine">without layers</option>
      </select>
    </label>
    <span id="status" role="status">Opening the package…</span>
  </div>
  <div class="stage-row">
    <div class="stage" aria-label="the composed picture">
      <canvas id="video" width="64" height="36"></canvas>
      <canvas id="overlay" width="1280" height="720"></canvas>
      <div id="floor" role="group" aria-label="titles, as text"></div>
      <div id="text" aria-live="polite"></div>
      <div id="floor-announce" aria-live="polite"></div>
    </div>
    <div class="panel" id="state" aria-label="feed state"><div class="meta">Feed state appears here.</div></div>
  </div>
  <p class="meta" id="clock"></p>
  <h2>What this device dispatched, and why</h2>
  <div class="scroll"><table class="grid" id="dispatch"><thead><tr><th>Component</th><th>Piece</th><th>Presented</th><th>Route</th><th>Why</th></tr></thead><tbody></tbody></table></div>
  <h2>Checks before presenting</h2>
  <div class="scroll"><table class="grid" id="checks"><thead><tr><th></th><th>Check</th><th>Detail</th></tr></thead><tbody></tbody></table></div>
  <p class="meta" id="device"></p>
</main>
<script type="module" src="page.js"></script>
</body>
</html>