1 files changed, 220 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/cast-session.js b/packages/meshbay-hub/src/meshbay_hub/static/cast-session.js
new file mode 100644
index 0000000..9f93919
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/cast-session.js
@@ -0,0 +1,220 @@
+import { html, useState, useEffect, useRef } from './vendor/htm-preact.js';
+import { t } from './i18n.js';
+import { Icon } from './icon.js';
+import * as platform from './platform.js';
+
+// ── The television this session casts to ─────────────────────────────────────
+//
+// docs/MESHBAY_DESIGN.md §11.4. Chosen once, from any cast button — Videos'
+// toolbar, a photo album's bar, the lightbox, the player — and from then on a
+// film opened plays there with the player as its remote, and a photo opened
+// in the lightbox is shown there. In memory only: a television chosen
+// yesterday may be off today, and choosing it again is one tap.
+//
+// The receiver is the default media receiver, which shows one film, one
+// picture or one track at a time and nothing else; the interface itself stays
+// on this device. `owner` says which of the three the television is showing
+// now ('video', 'photo', 'music'), so that the music bar stops treating the
+// receiver as its own once a film or a photo has taken it.
+
+let current = null;
+let owner = null;
+const listeners = new Set();
+
+function notify() {
+  for (const fn of listeners) fn(current);
+}
+
+export const castSession = {
+  get device() { return current; },
+  get owner() { return owner; },
+  get supported() { return Boolean(platform.capabilities.lanCast && platform.cast.available); },
+  /** Whether a whole file (a photo, a track) can be sent: an older shell cannot. */
+  get canSendFiles() { return this.supported && platform.cast.canSendFiles; },
+  /** The television now shows what `who` sends it. */
+  claim(who) {
+    owner = who;
+    notify();
+  },
+  choose(device) {
+    current = device ? { id: device.id, name: device.name } : null;
+    notify();
+  },
+  /** Forget the television without touching it: whoever stopped it already has. */
+  forget() { this.choose(null); },
+  /** Stop casting: the television goes back to its idle screen. */
+  async end() {
+    owner = null;
+    this.choose(null);
+    photoGen++;
+    await platform.cast.chromecastDisconnect().catch(() => {});
+    await platform.cast.stop().catch(() => {});
+  },
+  subscribe(fn) {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+  },
+};
+
+export function useCastDevice() {
+  const [device, setDevice] = useState(castSession.device);
+  useEffect(() => castSession.subscribe(setDevice), []);
+  return device;
+}
+
+// ── A file on the television ─────────────────────────────────────────────────
+//
+// A photo or a music track, whole, handed to the relay and loaded on the
+// session's television — connected if it is not yet, reloaded if it is. The
+// relay, not the page, tells the receiver what the file is; the page only
+// names it (title, artist, album, cover) and says where in it to begin.
+
+export async function loadFile({ owner: who, startAt = 0, ...file }) {
+  const device = current;
+  if (!device || !castSession.canSendFiles) throw new Error('No television to cast to');
+  castSession.claim(who);
+  const sent = await platform.cast.file(file);
+  if (!sent) throw new Error('The cast relay did not take the file');
+  const status = await platform.cast.status();
+  if (status && status.chromecast && status.chromecast.connected) {
+    await platform.cast.chromecastReload({ mediaUrl: sent.url, startAt });
+  } else {
+    await platform.cast.chromecastConnect({ deviceId: device.id, mediaUrl: sent.url, startAt });
+  }
+}
+
+// ── A photo on the television ────────────────────────────────────────────────
+//
+// Scaled to fit 1920×1080 and re-encoded as JPEG before it leaves: a camera's
+// original is 20 MB and 6000 px wide, more than a receiver decodes in good
+// time, and some are formats it does not decode at all. EXIF orientation is
+// applied here, so a portrait photo arrives upright and the receiver centres
+// it. Photos asked for while one is still on its way are skipped to the
+// newest: paging quickly through an album shows where the reader stopped,
+// not every photo passed on the way.
+
+const TV_WIDTH = 1920;
+const TV_HEIGHT = 1080;
+const JPEG_QUALITY = 0.9;
+
+async function scaledForTv(blob) {
+  const bitmap = await createImageBitmap(blob, { imageOrientation: 'from-image' });
+  try {
+    const scale = Math.min(1, TV_WIDTH / bitmap.width, TV_HEIGHT / bitmap.height);
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+    canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+    canvas.getContext('2d').drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+    const jpeg = await new Promise((resolve, reject) => canvas.toBlob(
+      (b) => (b ? resolve(b) : reject(new Error('JPEG encoding failed'))),
+      'image/jpeg', JPEG_QUALITY));
+    return new Uint8Array(await jpeg.arrayBuffer());
+  } finally {
+    bitmap.close();
+  }
+}
+
+let photoGen = 0;
+let photoChain = Promise.resolve();
+
+/** Show `blob` on the session's television, if there is one. */
+export function showPhoto(blob) {
+  const gen = ++photoGen;
+  photoChain = photoChain.then(async () => {
+    if (gen !== photoGen || !current || !castSession.canSendFiles) return;
+    const bytes = await scaledForTv(blob);
+    if (gen !== photoGen) return;
+    await loadFile({ owner: 'photo', bytes, type: 'image/jpeg' });
+  }).catch((err) => console.warn('[cast] photo not shown:', err));
+  return photoChain;
+}
+
+// ── The cast button ──────────────────────────────────────────────────────────
+//
+// One button, wherever it is put: with no television chosen it lists the
+// receivers as they answer; with one, it says which and offers to stop.
+// `overlay` is for the dark full-screen views (lightbox), `page` for a
+// toolbar. `cls` and `iconCls` are the button's and its icon's own classes,
+// so it matches its neighbours.
+// `onChosen` runs after a television is picked, for the view that has
+// something to show on it straight away. `up` opens the menu above the
+// button, for one at the bottom of the window.
+
+export function CastButton({
+  variant = 'page', cls = 'tb-btn tb-btn-icon', iconCls = '', onChosen, up = false,
+}) {
+  const device = useCastDevice();
+  const [open, setOpen] = useState(false);
+  const [devices, setDevices] = useState([]);
+  const [scanning, setScanning] = useState(false);
+  const wrapRef = useRef(null);
+
+  useEffect(() => {
+    if (!open || device) return undefined;
+    setDevices([]);
+    setScanning(true);
+    return platform.cast.discover((list, still) => {
+      setDevices(list || []);
+      setScanning(still);
+    });
+  }, [open, device]);
+
+  // Closed by a press anywhere else, as any menu is.
+  useEffect(() => {
+    if (!open) return undefined;
+    const outside = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('pointerdown', outside);
+    return () => document.removeEventListener('pointerdown', outside);
+  }, [open]);
+
+  if (!castSession.supported) return null;
+
+  const overlay = variant === 'overlay';
+  const menuCls = `${overlay ? 'cast-picker' : 'ctx-menu cast-menu'}${up ? ' cast-menu-up' : ''}`;
+  const itemCls = overlay ? 'cast-picker-item' : 'ctx-menu-item';
+  const title = device ? `${t('cast.casting_to')} ${device.name}` : t('cast.start');
+
+  return html`
+    <div class="cast-wrapper" ref=${wrapRef}>
+      <button class="${cls} cast-btn ${device ? 'casting' : ''}"
+        onClick=${() => setOpen(!open)} title=${title} aria-label=${title}
+        aria-expanded=${open ? 'true' : 'false'}>
+        <${Icon} name="cast" cls=${iconCls} /></button>
+      ${open && html`
+        <div class=${menuCls} role="menu">
+          ${device && html`
+            <div class="${itemCls} cast-menu-current">
+              <${Icon} name="cast" /> ${t('cast.casting_to')} ${device.name}
+            </div>
+            <button class=${itemCls} role="menuitem" onClick=${() => {
+              setOpen(false);
+              castSession.end();
+            }}>
+              <${Icon} name="close" /> ${t('cast.stop')}
+            </button>
+          `}
+          ${!device && devices.map((d) => html`
+            <button class=${itemCls} role="menuitem" key=${d.id} onClick=${() => {
+              setOpen(false);
+              castSession.choose(d);
+              if (onChosen) onChosen(d);
+            }}>
+              <${Icon} name="cast" /> ${d.name}
+            </button>
+          `)}
+          ${!device && scanning && html`
+            <div class="${itemCls} cast-picker-scanning">
+              <span class="spinner" style="width:14px;height:14px"></span>
+              ${t('cast.scanning')}
+            </div>
+          `}
+          ${!device && !scanning && devices.length === 0 && html`
+            <div class="${itemCls} cast-picker-empty">${t('cast.no_devices')}</div>
+          `}
+        </div>
+      `}
+    </div>
+  `;
+}