open-standards/wai/wai-app/web/room-frame.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The room</title>
<!-- A frame of the page that holds a room widget, not a page of its own: not indexed. -->
<meta name="robots" content="noindex">
<link rel="icon" href="data:,">
<!-- The room client of joule-moq-web in a frame of the page that holds a WAI room widget
     (wai-app's components.js): the same markup as the client's own page, every element it
     looks up present, and shown in part. The widget drives the client through its interface
     (roomTest) from the page around it, which seals every action; the frame shows the room's
     video (view=stage), the file a watch room watches (view=watch), or nothing (view=none). -->
<style>
  :root { --bg: #f6f7f9; --fg: #15171a; --muted: #5d6470; --panel: #ffffff; --line: #d9dde3; --human: #1f6f43; --machine: #8a4b00; }
  @media (prefers-color-scheme: dark) { :root { --bg: #111317; --fg: #e8eaee; --muted: #9aa2ae; --panel: #1a1d23; --line: #2c313a; --human: #6fd39b; --machine: #f0a957; } }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body { margin: 0; padding: 16px; background: var(--bg); color: var(--fg); font: 14px/1.45 system-ui, sans-serif; }
  header { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; }
  h1 { font-size: 16px; margin: 0; }
  #who { color: var(--muted); font-family: ui-monospace, monospace; }
  main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
  @media (max-width: 760px) { main { grid-template-columns: minmax(0, 1fr); } }
  section { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px; min-width: 0; }
  canvas { width: 100%; height: auto; display: block; background: #101218; border-radius: 4px; }
  #caption { min-height: 2.6em; margin-top: 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  #caption .origin { font-size: 12px; padding: 1px 6px; border-radius: 3px; border: 1px solid currentColor; }
  #caption .origin-human { color: var(--human); }
  #caption .origin-machine, #caption .origin-machine-reviewed { color: var(--machine); }
  #timeline { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; font-family: ui-monospace, monospace; font-size: 12px; }
  #timeline li { padding: 2px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  #log { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); max-height: 220px; overflow: auto; margin: 0; overflow-wrap: anywhere; }
  h2 { font-size: 13px; margin: 0 0 6px; color: var(--muted); font-weight: 600; }
  .controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
  #status { color: var(--muted); }
  /* Co-performance: the floor, what's next, the audience and fidelity. */
  .co-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .co-grid h3 { font-size: 12px; margin: 0 0 4px; color: var(--muted); font-weight: 600; }
  .co-grid ul, .co-grid ol { margin: 0; padding-left: 18px; font-size: 13px; }
  .co-grid li { padding: 1px 0; overflow-wrap: anywhere; }
  #co-now { margin: 0 0 6px; font-weight: 600; }
  #co-marks, #co-left { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
  #co-intents li[data-outcome="upcoming"] { color: var(--machine); }
  #co-intents li[data-outcome="kept"] { color: var(--human); }
  #co-lead { margin-top: 8px; }
  #co-lead input[type="number"] { width: 4.5em; }
  #co-input { margin-top: 6px; }
  #co-options { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
  table.binding { border-collapse: collapse; font-family: ui-monospace, monospace; font-size: 12px; width: 100%; }
  table.binding th, table.binding td { text-align: left; padding: 2px 8px 2px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
  table.binding tr[data-state="verified"] td:nth-child(2) { color: var(--human); }
  table.binding tr[data-state="refused"] td:nth-child(2), table.binding tr[data-state="unbound"] td:nth-child(2) { color: var(--machine); }

  body.embed { padding: 0; background: transparent; }
  body.embed > header, body.embed #room-app, body.embed #dvr, body.embed #dvr-canvas, body.embed #remote,
  body.embed #co, body.embed #binding-debug, body.embed main > section:has(#timeline), body.embed main > section:has(#log) { display: none !important; }
  body.embed main { display: block; }
  body.embed main > section { border: 0; padding: 0; background: transparent; }
  body.embed #cowatch .controls > :not(#cw-sync) { display: none !important; }
  body.embed[data-view="none"] main { display: none; }
  body.embed[data-view="watch"] main > section:has(#canvas) { display: none; }
  body.embed[data-view="stage"] #cowatch { display: none !important; }
</style>
</head>
<body class="embed">

<header><h1>MoQ room client</h1><span id="who">loading</span></header>
<!-- An end-to-end encrypted room: its epoch and the members of its group. -->
<div id="e2ee" class="controls" hidden><strong>End-to-end encrypted</strong> <span id="e2ee-state"></span></div>
<!-- With a room service (?service=<url>): enter as a publisher or a viewer. -->
<div id="room-app" class="controls">
  <button id="join" type="button">Join with camera and microphone</button>
  <button id="watch" type="button">Watch</button>
  <button id="leave" type="button" hidden>Leave</button>
  <span id="status" role="status" aria-live="polite"></span>
  <form id="caption-form" hidden><label for="caption-text">Caption</label> <input id="caption-text" maxlength="200" autocomplete="off"> <button type="submit">Send</button></form>
</div>
<main>
  <section>
    <h2>The room, composed</h2>
    <canvas id="canvas" width="640" height="360"></canvas>
    <div id="caption" aria-live="polite"></div>
    <div id="dvr" class="controls" style="margin: 8px 0 0">
      <label for="seek-s">Seconds back</label>
      <input id="seek-s" type="number" min="1" max="900" value="10" style="width: 5em">
      <button id="seek" type="button" disabled>Seek back</button>
      <button id="live" type="button" hidden>Back to live</button>
      <span id="dvr-status" role="status" aria-live="polite"></span>
    </div>
    <canvas id="dvr-canvas" width="640" height="360" hidden style="margin-top: 8px" aria-label="The participant's earlier video, from the relay's window"></canvas>
  </section>
  <!-- A watch room (WAI co-watch): the source the room watches, its shared controls and how
       closely the room keeps together. -->
  <section id="cowatch" hidden style="grid-column: 1 / -1">
    <h2>Watching together</h2>
    <video id="cowatch-media" playsinline style="width: 100%; max-height: 360px; background: #101218; border-radius: 4px"></video>
    <div class="controls" style="margin: 8px 0 0">
      <button id="cw-play" type="button">Play</button>
      <button id="cw-pause" type="button">Pause</button>
      <button id="cw-back" type="button">Back 10 s</button>
      <button id="cw-fwd" type="button">Ahead 10 s</button>
      <label for="cw-rate">Speed</label>
      <select id="cw-rate"><option value="750000">0.75×</option><option value="1000000" selected>1×</option><option value="1250000">1.25×</option><option value="1500000">1.5×</option></select>
      <span id="cw-sync" role="status" aria-live="polite"></span>
    </div>
  </section>
  <!-- A remote desktop room (WAI remote-desktop): the host's screen, what it captures and who
       holds the floor. -->
  <section id="remote" hidden style="grid-column: 1 / -1" aria-label="Remote desktop">
    <h2>Remote desktop</h2>
    <canvas id="remote-canvas" width="1280" height="720" aria-label="The host's screen"></canvas>
    <div class="controls" style="margin: 8px 0 0">
      <button id="remote-request" type="button" hidden>Ask for control</button>
      <button id="remote-release" type="button" hidden>Give control back</button>
      <span id="remote-state" role="status" aria-live="polite"></span>
    </div>
  </section>
  <section>
    <h2>Events</h2>
    <ul id="timeline"></ul>
  </section>
  <!-- A room with co-performance (WAI co-performance): see co.js. -->
  <section id="co" hidden style="grid-column: 1 / -1" aria-label="Co-performance">
    <h2>Co-performance</h2>
    <div class="co-grid">
      <div>
        <h3>The floor</h3>
        <p id="co-now" role="status" aria-live="polite"></p>
        <ol id="co-turns"></ol>
        <p id="co-marks"></p>
        <div class="controls" style="margin: 6px 0 0"><button id="co-pass" type="button" hidden>Pass the floor</button></div>
      </div>
      <div>
        <h3>What's next</h3>
        <ul id="co-intents" aria-live="polite"></ul>
      </div>
      <div>
        <h3>The audience</h3>
        <p id="co-question"></p>
        <form id="co-input" hidden>
          <div id="co-options"></div>
          <div id="co-prompt-row" hidden><label for="co-prompt">Your prompt</label> <input id="co-prompt" maxlength="200" autocomplete="off"> <button type="submit">Send</button></div>
          <p id="co-left"></p>
        </form>
        <ul id="co-selections"></ul>
      </div>
      <div>
        <h3>Fidelity</h3>
        <ul id="co-fidelity"></ul>
      </div>
    </div>
    <div id="co-lead" class="controls" hidden>
      <label for="co-turn-s">Turn (s)</label> <input id="co-turn-s" type="number" min="1" max="60" value="4">
      <label for="co-turns-n">Turns</label> <input id="co-turns-n" type="number" min="1" max="64" value="4">
      <label for="co-mode">Out of turn</label> <select id="co-mode"><option value="mark">marked</option><option value="refuse">refused</option></select>
      <button id="co-start" type="button">Start turns</button>
      <label for="co-q">Ask</label> <input id="co-q" maxlength="200" placeholder="Which way next?">
      <label for="co-options-n">Options</label> <input id="co-options-n" type="number" min="2" max="32" value="3">
      <label for="co-window-s">Open for (s)</label> <input id="co-window-s" type="number" min="2" max="300" value="8">
      <button id="co-vote" type="button">Open a vote</button>
      <button id="co-prompts" type="button">Ask for prompts</button>
      <button id="co-fid" type="button">State fidelity</button>
    </div>
  </section>
  <!-- With ?debug=binding: the state of the frame each tile shows (WAI browser-sink §10). -->
  <section id="binding-debug" style="grid-column: 1 / -1" hidden>
    <h2>Frames on screen</h2>
    <div style="overflow-x: auto"><table class="binding">
      <thead><tr><th>Tile</th><th>State</th><th>Tier</th><th>Digest</th><th>Receipt</th><th>Chain</th><th>Provenance</th><th>Route</th><th>Power efficient</th><th>Energy</th></tr></thead>
      <tbody></tbody>
    </table></div>
  </section>
  <section style="grid-column: 1 / -1">
    <h2>Log</h2>
    <pre id="log"></pre>
  </section>
</main>
<button id="sound" type="button" hidden style="margin: 6px 0">Turn the room's sound on</button>
<script>
  document.body.dataset.view = new URLSearchParams(location.search).get("view") || "none";
  // The room's audio plays in this frame, and a browser starts a frame's audio only after a
  // click in the frame itself: every audio context the client makes is kept here, and while
  // one waits for that click, this button asks for it.
  const contexts = [];
  if (window.AudioContext) {
    const Real = window.AudioContext;
    window.AudioContext = class extends Real {
      constructor(...a) { super(...a); contexts.push(this); }
    };
  }
  const sound = document.getElementById("sound");
  sound.addEventListener("click", () => { for (const c of contexts) c.resume(); });
  setInterval(() => { sound.hidden = !contexts.some((c) => c.state === "suspended"); }, 500);
</script>
<script type="module" src="../../../joule-code/joule-code-rs/crates/joule-moq-web/web/room/app.js"></script>
</body>
</html>