feat(cast): photos on the TV, and a television chosen once for the session

A cast button in Videos' toolbar, at the top of Photos, in an album's bar and
in the lightbox, in a group and in Search alike. A television chosen there is
kept for the session: a film opened plays on it with the player as its remote
from the start, and a photo opened in the lightbox is shown on it, scaled to
1920x1080, upright, as JPEG. The lightbox gains a slideshow.

The relay serves one photo at /image behind the stream's token, on the desktop
and on Android; the shell, not the page, decides that the receiver loads it as
a picture.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 393 insertions, 0 deletions

diff --git a/packages/meshbay-hub/tests/harness/cast_session_probe.py b/packages/meshbay-hub/tests/harness/cast_session_probe.py
new file mode 100644
index 0000000..2904860
--- /dev/null
+++ b/packages/meshbay-hub/tests/harness/cast_session_probe.py
@@ -0,0 +1,393 @@
+#!/usr/bin/env python3
+"""
+A television chosen once, then photos and a film sent to it.
+
+Casting a photo or opening a film on a television chosen elsewhere is a claim
+about four pieces at once: the cast button (cast-session.js), the lightbox
+that follows it, the player that opens as a remote, and the native bridge the
+page talks to. This renders the shipped `GroupPage` against a stub node and a
+stub bridge that records what the page asks of it, and walks it as a reader
+would: open an album, choose the television, page on, start a slideshow,
+then open a film from Videos and stop casting from its remote.
+
+A second case renders the same page with no bridge at all — a browser — where
+no cast button may appear.
+
+    cast_session_probe.py            Chrome, then Firefox
+"""
+
+import http.server
+import json
+import shutil
+import socketserver
+import subprocess
+import sys
+import tempfile
+import threading
+import time
+from pathlib import Path
+
+STATIC = Path(__file__).resolve().parents[2] / "src" / "meshbay_hub" / "static"
+PORT = 8763
+RECORDS = []
+FINISHED = threading.Event()
+socketserver.TCPServer.allow_reuse_address = True
+
+FRAME = r"""<!doctype html><html><head><meta charset=utf-8>
+<link rel="stylesheet" href="/style.css"></head><body>
+<nav class="nav"><div class="nav-left"><a class="nav-brand" href="#/">MeshBay</a></div></nav>
+<div class="layout"><main class="main"><div id="root"></div></main></div>
+<script>
+// A module that fails to load never reaches its own catch: say so.
+const report = (error) => parent.postMessage({ error }, '*');
+addEventListener('error', (e) => report(
+  `${e.message || 'load error'} ${e.filename || (e.target && e.target.src) || ''}`
+  + `:${e.lineno || ''}`), true);
+addEventListener('unhandledrejection',
+  (e) => report(String((e.reason && e.reason.stack) || e.reason)));
+const WITH_BRIDGE = !location.search.includes('nobridge');
+const ENTRIES = [];
+for (let i = 1; i <= 3; i++) {
+  ENTRIES.push({ id: 'p' + i, name: 'photo' + i + '.png', path: 'photos/Trip',
+    type: 'image', size: 1000, added_at: 1750000000 + i });
+}
+ENTRIES.push({ id: 'film', name: 'A.Film.mkv', display_title: 'A Film',
+  path: 'videos/films', type: 'video', duration: 6000, size: 1024, added_at: 1750000100 });
+
+const ACK = {
+  is_node_admin: false, enabled_apps: ['video', 'photo'],
+  tmdb_enabled: true, tmdb_language: 'en-US',
+  video_directories: ['videos'], music_directories: [], photo_directories: ['photos'],
+};
+
+// A camera-sized picture, made here: 4000×3000, which the television must
+// receive as 1440×1080.
+let PHOTO = null;
+async function photoBytes() {
+  if (PHOTO) return PHOTO;
+  const c = document.createElement('canvas');
+  c.width = 4000; c.height = 3000;
+  const g = c.getContext('2d');
+  g.fillStyle = '#3a7'; g.fillRect(0, 0, 4000, 3000);
+  const blob = await new Promise((r) => c.toBlob(r, 'image/png'));
+  PHOTO = new Uint8Array(await blob.arrayBuffer());
+  return PHOTO;
+}
+
+window.MeshBayCrypto = {
+  importGEK: async () => 'gek',
+  b64encode: (x) => String(x),
+  decryptChunkBin: async (_g, _f, _i, _n, ct) => ct,
+};
+
+window.MeshBayTransport = function () {
+  const self = {
+    connected: false, memberRole: 'member', supportsAppOps: true,
+    sessionKeys: null, gekRaw: 'k',
+    newNodeBundle: null, newNodeBundleRecovery: null,
+    async connect() { self.connected = true; return ACK; },
+    async fetchIndex() {
+      return { entries: ENTRIES, dirs: ['photos', 'videos'],
+               roots: [{ name: 'photos', available: true, writable: false, removable: false },
+                       { name: 'videos', available: true, writable: false, removable: false }] };
+    },
+    async fetchMediaMeta() { return { confidence: 0 }; },
+    // One chunk per photo: every photo is the same picture.
+    async fetchChunk() { return { nonce: 'n', ct: await photoBytes() }; },
+    addReconnectListener() { return () => {}; },
+    close() {},
+  };
+  return new Proxy(self, {
+    get(target, prop) {
+      if (prop in target) return target[prop];
+      if (typeof prop === 'string' && prop.startsWith('on')) return undefined;
+      if (typeof prop === 'symbol') return undefined;
+      return () => new Promise(() => {});
+    },
+    set(target, prop, value) { target[prop] = value; return true; },
+  });
+};
+
+// The native side, as the Electron preload and the Android shim present it,
+// recording every cast call.
+window.CALLS = [];
+if (WITH_BRIDGE) {
+  let connected = false, v = 0;
+  const rec = (name, arg) => { CALLS.push({ name, arg }); };
+  window.meshbay = {
+    hubBase: () => '',
+    setLocale: async () => true,
+    capabilities: { lanCast: true, nodeAdmin: false, localFolders: false, nativeSave: false },
+    cast: {
+      start: async (o) => {
+        rec('start', o && { codec: o.codec });
+        return { url: 'http://tv/stream.mp4?t=x' };
+      },
+      push: async () => true,
+      stop: async () => { rec('stop'); return true; },
+      subtitle: async () => null,
+      finish: async () => true,
+      image: async (img) => {
+        const bmp = await createImageBitmap(new Blob([img.bytes], { type: img.type }));
+        rec('image', { type: img.type, width: bmp.width, height: bmp.height,
+                       jpeg: img.bytes[0] === 0xff && img.bytes[1] === 0xd8 });
+        return { url: 'http://tv/image?t=x&v=' + (++v) };
+      },
+      status: async () => ({ active: true, url: null, chromecast: { connected } }),
+      scan: async () => { rec('scan'); return true; },
+      devices: async () => ({ devices: [{ id: 'tv1', name: 'Salon' }], scanning: false }),
+      chromecastConnect: async (o) => {
+        rec('connect', o); connected = true;
+        return { deviceName: 'Salon' };
+      },
+      chromecastReload: async (o) => { rec('reload', o); return { playerState: 'IDLE' }; },
+      chromecastDisconnect: async () => { rec('disconnect'); connected = false; return true; },
+      chromecastPause: async () => ({}),
+      chromecastPlay: async () => ({}),
+    },
+  };
+}
+</script>
+<script type="module">
+import { html, render } from '/vendor/htm-preact.js';
+import { initLocale } from '/i18n.js';
+import { GroupPage } from '/group-page.js';
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const $ = (sel) => document.querySelector(sel);
+const $$ = (sel) => [...document.querySelectorAll(sel)];
+async function until(pred, what, tries = 200) {
+  for (let i = 0; i < tries; i++) { if (pred()) return; await sleep(50); }
+  throw new Error('timed out waiting for ' + what);
+}
+const calls = (name) => CALLS.filter((c) => c.name === name);
+// Files is always first; then the enabled apps in their registry order.
+const videosTab = () => $$('.group-tab')[1];
+const count = () => (($('.photo-lightbox-count') || {}).textContent || '').trim();
+
+(async () => {
+  const out = { bridge: !!window.meshbay };
+  try {
+    await initLocale();
+    render(html`<${GroupPage} groupId="g1" token="t" username="me" userId="u1"
+      group=${{ id: 'g1', name: 'a group', owner_username: 'me', is_admin: false }}
+      userPrefs=${{ default_tab: 'photo', media_page_size: '50' }} />`,
+      document.getElementById('root'));
+
+    await until(() => $('.photo-album-card'), 'the album card');
+    out.landingButton = !!$('.photo-toolbar .cast-btn');
+    $('.photo-album-card').click();
+    await until(() => $('.photo-album-bar'), 'the album');
+    out.albumButton = !!$('.photo-album-bar .cast-btn');
+
+    if (!window.meshbay) {
+      videosTab().click();
+      await until(() => $('.video-toolbar'), 'the videos toolbar');
+      out.videosButton = !!$('.video-toolbar .cast-btn');
+      parent.postMessage(out, '*');
+      return;
+    }
+
+    // Choose the television from the album: the first photo opens and goes.
+    $('.photo-album-bar .cast-btn').click();
+    await until(() => $$('.cast-menu .ctx-menu-item').some((b) => b.textContent.includes('Salon')),
+                'the receiver in the menu');
+    $$('.cast-menu .ctx-menu-item').find((b) => b.textContent.includes('Salon')).click();
+    await until(() => $('.photo-lightbox'), 'the lightbox to open on choosing');
+    await until(() => calls('connect').length === 1, 'the first photo to reach the television');
+    out.first = { count: count(), image: calls('image')[0], connect: calls('connect')[0].arg,
+                  lightboxCasting: !!$('.photo-lightbox .cast-btn.casting') };
+
+    // Next photo: the receiver is connected, so it is reloaded.
+    $('.photo-nav-next').click();
+    await until(() => calls('reload').length === 1, 'the second photo');
+    out.second = { count: count(), reload: calls('reload')[0].arg, images: calls('image').length };
+
+    // Slideshow: on by itself to the last photo, then off.
+    const play = $$('.photo-lightbox .video-top-bar .video-close')
+      .find((b) => b.getAttribute('aria-pressed') !== null);
+    play.click();
+    await until(() => count() === '3 / 3', 'the slideshow to reach the last photo', 160);
+    await until(() => play.getAttribute('aria-pressed') === 'false', 'the slideshow to end', 160);
+    out.slideshow = { count: count(), images: calls('image').length,
+                      reloads: calls('reload').length };
+
+    // Close the lightbox; Videos shows the same television; a film opens as its remote.
+    $$('.photo-lightbox .video-top-bar .video-close').pop().click();
+    await until(() => !$('.photo-lightbox'), 'the lightbox to close');
+    videosTab().click();
+    await until(() => $('.video-toolbar'), 'the videos toolbar');
+    out.videosCasting = !!$('.video-toolbar .cast-btn.casting');
+    await until(() => $('.video-card'), 'the film card');
+    $('.video-card').click();
+    await until(() => $('.video-detail .admin-btn'), 'the film modal');
+    $('.video-detail .admin-btn').click();
+    await until(() => $('.video-remote'), 'the player as a remote');
+    out.remote = { device: $('.video-remote-device').textContent.trim(),
+                   pickerOpen: !!$('.video-player-overlay .cast-picker') };
+
+    // Stop from the remote: forgotten for the session.
+    $$('.video-remote button').pop().click();
+    await until(() => !$('.video-remote'), 'the remote to go');
+    $$('.video-player-overlay .video-top-bar .video-close').pop().click();
+    await until(() => !$('.video-player-overlay'), 'the player to close');
+    await sleep(100);
+    out.afterStop = { videosCasting: !!$('.video-toolbar .cast-btn.casting'),
+                      disconnects: calls('disconnect').length };
+    parent.postMessage(out, '*');
+  } catch (err) {
+    parent.postMessage({ ...out, calls: CALLS, error: String((err && err.stack) || err) }, '*');
+  }
+})();
+</script></body></html>"""
+
+# Firefox headless runs a page only while taking its screenshot, which is taken
+# once the page has loaded: an image that does not answer until the case has
+# reported keeps it loading (the same hold as invitation_probe.py).
+HOLD_TAG = '<img src="/hold" style="position:fixed;left:-4px;top:-4px;width:1px">'
+
+PAGE = r"""<!doctype html><html><head><meta charset=utf-8></head>
+<body style="margin:0">
+<iframe src="/case{query}" style="width:1100px;height:800px;border:0"></iframe>
+<script>
+addEventListener('message', (e) => fetch('/log', { method: 'POST', body: JSON.stringify(e.data) }));
+</script>{hold}</body></html>"""
+
+
+class H(http.server.BaseHTTPRequestHandler):
+    def log_message(self, *a):
+        pass
+
+    def do_POST(self):
+        length = int(self.headers.get("Content-Length") or 0)
+        if self.path == "/log":
+            RECORDS.append(json.loads(self.rfile.read(length).decode()))
+            FINISHED.set()
+        else:
+            self.rfile.read(length)
+        self.send_response(204)
+        self.end_headers()
+
+    def _send(self, body: bytes, ctype: str) -> None:
+        self.send_response(200)
+        self.send_header("Content-Type", ctype)
+        self.send_header("Content-Length", str(len(body)))
+        self.end_headers()
+        self.wfile.write(body)
+
+    def do_GET(self):
+        path, _, query = self.path.partition("?")
+        if path == "/hold":
+            FINISHED.wait(90)
+            self._send(b"", "image/gif")
+        elif path == "/":
+            q = f"?{query.replace('engine=firefox', '').strip('&')}" if query else ""
+            hold = HOLD_TAG if "engine=firefox" in query else ""
+            page = PAGE.replace("{query}", q if q != "?" else "").replace("{hold}", hold)
+            self._send(page.encode(), "text/html; charset=utf-8")
+        elif path == "/case":
+            self._send(FRAME.encode(), "text/html; charset=utf-8")
+        elif path == "/v1/groups/g1/nodes":
+            self._send(b'{"nodes": [{"node_id": "n1"}]}', "application/json")
+        else:
+            asset = (STATIC / path.lstrip("/")).resolve()
+            if not str(asset).startswith(str(STATIC)) or not asset.is_file():
+                self.send_response(404)
+                self.end_headers()
+                return
+            self._send(asset.read_bytes(),
+                       "text/css" if asset.suffix == ".css"
+                       else "text/javascript" if asset.suffix == ".js"
+                       else "application/octet-stream")
+
+
+def browse(engine: str, query: str) -> dict | None:
+    RECORDS.clear()
+    FINISHED.clear()
+    sep = "&" if query else "?"
+    url = f"http://127.0.0.1:{PORT}/{query}{sep + 'engine=firefox' if engine == 'firefox' else ''}"
+    # Firefox is a snap here, and needs its profile under $HOME (invitation_probe.py).
+    snap = Path.home() / "snap" / "firefox" / "common"
+    parent = (str(snap if snap.is_dir() else Path.home()) if engine == "firefox" else None)
+    with tempfile.TemporaryDirectory(ignore_cleanup_errors=True, prefix="meshbay-probe-",
+                                     dir=parent) as profile:
+        if engine == "chrome":
+            cmd = ["google-chrome", "--headless=new", "--disable-gpu", "--no-sandbox",
+                   f"--user-data-dir={profile}", "--window-size=1100,900", url]
+        else:
+            cmd = ["firefox", "--headless", "--profile", profile, "--window-size=1100,900",
+                   "--screenshot", str(Path(profile) / "shot.png"), url]
+        proc = subprocess.Popen(cmd, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+        deadline = time.time() + 90
+        while not RECORDS and time.time() < deadline:
+            time.sleep(0.2)
+        proc.terminate()
+        try:
+            proc.wait(timeout=20)
+        except subprocess.TimeoutExpired:
+            proc.kill()
+            proc.wait()
+    return RECORDS[0] if RECORDS else None
+
+
+def check(engine: str, cast: dict, plain: dict) -> list[str]:
+    bad = []
+    if "error" in cast:
+        return [f"{engine}: {cast['error']}"]
+    if not cast["landingButton"]:
+        bad.append("no cast button on the Photos landing")
+    if not cast["albumButton"]:
+        bad.append("no cast button in the album bar")
+    first = cast["first"]
+    if first["count"] != "1 / 3":
+        bad.append(f"choosing a television did not open the first photo: {first['count']}")
+    img = first["image"]["arg"]
+    if not (img["type"] == "image/jpeg" and img["jpeg"] and img["width"] == 1440
+            and img["height"] == 1080):
+        bad.append(f"the photo did not leave as a 1440x1080 JPEG: {img}")
+    if first["connect"] != {"deviceId": "tv1", "mediaUrl": "http://tv/image?t=x&v=1"}:
+        bad.append(f"connect: {first['connect']}")
+    if not first["lightboxCasting"]:
+        bad.append("the lightbox's cast button does not say it is casting")
+    if cast["second"]["count"] != "2 / 3" or cast["second"]["reload"] != {
+            "mediaUrl": "http://tv/image?t=x&v=2"}:
+        bad.append(f"next photo: {cast['second']}")
+    if cast["slideshow"]["count"] != "3 / 3" or cast["slideshow"]["images"] != 3:
+        bad.append(f"slideshow: {cast['slideshow']}")
+    if not cast["videosCasting"]:
+        bad.append("Videos does not show the television chosen in Photos")
+    if cast["remote"]["device"] != "Salon" or cast["remote"]["pickerOpen"]:
+        bad.append(f"the film did not open as the television's remote: {cast['remote']}")
+    if cast["afterStop"]["videosCasting"] or cast["afterStop"]["disconnects"] < 1:
+        bad.append(f"stopping from the remote: {cast['afterStop']}")
+    if "error" in plain:
+        bad.append(f"no bridge: {plain['error']}")
+    elif plain["landingButton"] or plain["albumButton"] or plain["videosButton"]:
+        bad.append(f"a cast button without a bridge: {plain}")
+    return [f"{engine}: {b}" for b in bad]
+
+
+def main() -> int:
+    failures = []
+    with socketserver.ThreadingTCPServer(("127.0.0.1", PORT), H) as srv:
+        threading.Thread(target=srv.serve_forever, daemon=True).start()
+        for engine in ("chrome", "firefox"):
+            if shutil.which("google-chrome" if engine == "chrome" else engine) is None:
+                print(f"{engine}: not installed, skipped")
+                continue
+            cast = browse(engine, "")
+            plain = browse(engine, "?nobridge")
+            if cast is None or plain is None:
+                failures.append(f"{engine}: the page never reported")
+                continue
+            print(f"{engine}:", json.dumps(cast, indent=1))
+            failures += check(engine, cast, plain)
+    for f in failures:
+        print("FAIL", f, file=sys.stderr)
+    if not failures:
+        print("OK")
+    return 1 if failures else 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())