diff options
Diffstat (limited to 'packages/meshbay-hub')
19 files changed, 944 insertions, 17 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..007722c --- /dev/null +++ b/packages/meshbay-hub/src/meshbay_hub/static/cast-session.js @@ -0,0 +1,191 @@ +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 a film or a +// picture and nothing else; the interface itself stays on this device. + +let current = null; +const listeners = new Set(); + +function notify() { + for (const fn of listeners) fn(current); +} + +export const castSession = { + get device() { return current; }, + get supported() { return Boolean(platform.capabilities.lanCast && platform.cast.available); }, + 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() { + 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 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 () => { + const device = current; + if (gen !== photoGen || !device || !platform.cast.canShowImages) return; + const bytes = await scaledForTv(blob); + if (gen !== photoGen) return; + const shown = await platform.cast.image({ bytes, type: 'image/jpeg' }); + if (!shown || gen !== photoGen) return; + const status = await platform.cast.status(); + if (status && status.chromecast && status.chromecast.connected) { + await platform.cast.chromecastReload({ mediaUrl: shown.url }); + } else { + await platform.cast.chromecastConnect({ deviceId: device.id, mediaUrl: shown.url }); + } + }).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. + +export function CastButton({ variant = 'page', cls = 'tb-btn tb-btn-icon', iconCls = '', onChosen }) { + 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'; + 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> + `; +} diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js index bdc4dd5..c72de49 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js @@ -377,6 +377,8 @@ export default { 'photo.prev': 'Vorherige (←)', 'photo.next': 'Nächste (→)', 'photo.zip_album': 'Album als ZIP herunterladen', + 'photo.slideshow': 'Diashow', + 'photo.slideshow_stop': 'Diashow beenden', 'photo.zoom_in': 'Vergrößern', 'photo.zoom_out': 'Verkleinern', 'photo.zoom_fit_title': 'An Fenster anpassen', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js index 658f388..a799b34 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js @@ -375,6 +375,8 @@ export default { 'photo.prev': 'Previous (←)', 'photo.next': 'Next (→)', 'photo.zip_album': 'Download album as zip', + 'photo.slideshow': 'Slideshow', + 'photo.slideshow_stop': 'Stop slideshow', 'photo.zoom_in': 'Zoom in', 'photo.zoom_out': 'Zoom out', 'photo.zoom_fit_title': 'Fit to window', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js index 9e73017..8e49240 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js @@ -375,6 +375,8 @@ export default { 'photo.prev': 'Anterior (←)', 'photo.next': 'Siguiente (→)', 'photo.zip_album': 'Descargar álbum como zip', + 'photo.slideshow': 'Presentación', + 'photo.slideshow_stop': 'Detener la presentación', 'photo.zoom_in': 'Acercar', 'photo.zoom_out': 'Alejar', 'photo.zoom_fit_title': 'Ajustar a la ventana', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js index 5d18d41..1432f11 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js @@ -376,6 +376,8 @@ export default { 'photo.prev': 'Précédent (←)', 'photo.next': 'Suivant (→)', 'photo.zip_album': "Télécharger l'album en zip", + 'photo.slideshow': 'Diaporama', + 'photo.slideshow_stop': 'Arrêter le diaporama', 'photo.zoom_in': 'Zoomer', 'photo.zoom_out': 'Dézoomer', 'photo.zoom_fit_title': 'Ajuster à la fenêtre', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js index c4d2acc..579f8da 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js @@ -376,6 +376,8 @@ export default { 'photo.prev': 'Precedente (←)', 'photo.next': 'Successiva (→)', 'photo.zip_album': "Scarica l'album come zip", + 'photo.slideshow': 'Presentazione', + 'photo.slideshow_stop': 'Interrompi la presentazione', 'photo.zoom_in': 'Ingrandisci', 'photo.zoom_out': 'Riduci', 'photo.zoom_fit_title': 'Adatta alla finestra', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js index fe52bfa..cea7bfc 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js @@ -373,6 +373,8 @@ export default { 'photo.prev': '前へ（←）', 'photo.next': '次へ（→）', 'photo.zip_album': 'アルバムをzipでダウンロード', + 'photo.slideshow': 'スライドショー', + 'photo.slideshow_stop': 'スライドショーを停止', 'photo.zoom_in': '拡大', 'photo.zoom_out': '縮小', 'photo.zoom_fit_title': 'ウィンドウに合わせる', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js index 90b71f0..007154a 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js @@ -377,6 +377,8 @@ export default { 'photo.prev': 'Vorige (←)', 'photo.next': 'Volgende (→)', 'photo.zip_album': 'Album downloaden als zip', + 'photo.slideshow': 'Diavoorstelling', + 'photo.slideshow_stop': 'Diavoorstelling stoppen', 'photo.zoom_in': 'Inzoomen', 'photo.zoom_out': 'Uitzoomen', 'photo.zoom_fit_title': 'Passend maken', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js index 8c31cf3..7969cd0 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js @@ -388,6 +388,8 @@ export default { 'photo.prev': 'Poprzednie (←)', 'photo.next': 'Następne (→)', 'photo.zip_album': 'Pobierz album jako zip', + 'photo.slideshow': 'Pokaz slajdów', + 'photo.slideshow_stop': 'Zatrzymaj pokaz slajdów', 'photo.zoom_in': 'Powiększ', 'photo.zoom_out': 'Pomniejsz', 'photo.zoom_fit_title': 'Dopasuj do okna', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js index 2f951ee..52d9d4c 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js @@ -377,6 +377,8 @@ export default { 'photo.prev': 'Anterior (←)', 'photo.next': 'Próxima (→)', 'photo.zip_album': 'Baixar álbum como zip', + 'photo.slideshow': 'Apresentação de slides', + 'photo.slideshow_stop': 'Parar a apresentação', 'photo.zoom_in': 'Aumentar zoom', 'photo.zoom_out': 'Diminuir zoom', 'photo.zoom_fit_title': 'Ajustar à janela', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js index ea02545..3739dcf 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js @@ -370,6 +370,8 @@ export default { 'photo.prev': '上一张（←）', 'photo.next': '下一张（→）', 'photo.zip_album': '将相册下载为 zip', + 'photo.slideshow': '幻灯片放映', + 'photo.slideshow_stop': '停止幻灯片放映', 'photo.zoom_in': '放大', 'photo.zoom_out': '缩小', 'photo.zoom_fit_title': '适应窗口', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js b/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js index 73b8c15..00bc288 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js @@ -9,6 +9,7 @@ import { import { transfers } from './transfers.js'; import { MediaThumb, LazyTile } from './media-tiles.js'; import { SourceTag } from './group-name.js'; +import { CastButton, castSession, useCastDevice, showPhoto } from './cast-session.js'; // ── Photos ─────────────────────────────────────────────────────────────────── // @@ -21,6 +22,8 @@ import { SourceTag } from './group-name.js'; // keyboard arrows, EXIF info when present) and a "zip this album" button // that reuses Files' own zip mechanism unchanged (file-utils.js's // downloadDirectory, lifted out of files-app.js for exactly this reuse). +// With a television chosen (cast-session.js), the photo the lightbox shows +// is the photo the television shows, and a slideshow pages through both. function underAnyPhotoRoot(entry, photoRoots) { const p = entry.path || ''; @@ -133,6 +136,10 @@ function PhotoTile({ entry, transportRef, gekRef, onOpen }) { // _thumbBlobCache — clicking back and forth between two photos decrypts // each once, not once per visit. const _fullBlobCache = new Map(); +// The same photos as blobs, for the television: a cast scales the picture +// itself, and reading it back through its URL would be a fetch the page's +// content policy has no reason to allow. +const _fullBlobs = new Map(); // Zoom is only ever meaningful for the lightbox's own full-resolution // image — nowhere else in the app shows one, so there is nothing to gate @@ -142,6 +149,10 @@ const ZOOM_STEP = 25; const ZOOM_MIN = 25; const ZOOM_MAX = 400; +// How long a slideshow stays on a photo, counted from when it has loaded: +// a slow node must not skip a photo nobody saw. +const SLIDESHOW_MS = 5000; + function Lightbox({ photos, index, transportRef, gekRef, onClose, onNav }) { const entry = photos[index]; const tRef = entry._tRef || transportRef; @@ -155,7 +166,9 @@ function Lightbox({ photos, index, transportRef, gekRef, onClose, onNav }) { // same way the browser renders the <img> itself. const [zoomPercent, setZoomPercent] = useState(null); const [naturalSize, setNaturalSize] = useState(null); + const [slideshow, setSlideshow] = useState(false); const slotRef = useRef(null); + const castDevice = useCastDevice(); useEffect(() => { const cached = _fullBlobCache.get(entry.id); @@ -171,8 +184,10 @@ function Lightbox({ photos, index, transportRef, gekRef, onClose, onNav }) { const chunks = await pipelinedDownload( transport, gRef.current, entry.id, totalChunks); if (cancelled) return; - const url = URL.createObjectURL(new Blob(chunks)); + const blob = new Blob(chunks); + const url = URL.createObjectURL(blob); _fullBlobCache.set(entry.id, url); + _fullBlobs.set(entry.id, blob); setBlobUrl(url); } catch { /* leave the placeholder — a transient fetch failure isn't fatal, next/close still work */ @@ -187,6 +202,23 @@ function Lightbox({ photos, index, transportRef, gekRef, onClose, onNav }) { // level chosen for one picture saying nothing about the next. useEffect(() => { setZoomPercent(null); setNaturalSize(null); }, [entry.id]); + // The television follows the lightbox, from the moment one is chosen. + useEffect(() => { + const blob = _fullBlobs.get(entry.id); + if (castDevice && blobUrl && blob) showPhoto(blob); + }, [castDevice, blobUrl, entry.id]); + + // Next photo once this one has been on screen for SLIDESHOW_MS; the last + // photo ends the slideshow rather than wrapping round. + useEffect(() => { + if (!slideshow || !blobUrl) return undefined; + const id = setTimeout(() => { + if (index < photos.length - 1) onNav(1); + else setSlideshow(false); + }, SLIDESHOW_MS); + return () => clearTimeout(id); + }, [slideshow, blobUrl, index, photos.length, onNav]); + useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); @@ -245,6 +277,13 @@ function Lightbox({ photos, index, transportRef, gekRef, onClose, onNav }) { <button class="photo-icon-btn photo-icon-btn-text ${zoomPercent === 100 ? 'active' : ''}" disabled=${!blobUrl} onClick=${zoomActual} title=${t('photo.zoom_100')}>100%</button> </div> + <button class="video-close ${slideshow ? 'cast-active' : ''}" + disabled=${photos.length < 2} + onClick=${() => setSlideshow(!slideshow)} + title=${slideshow ? t('photo.slideshow_stop') : t('photo.slideshow')} + aria-pressed=${slideshow ? 'true' : 'false'}> + <${Icon} name=${slideshow ? 'pause' : 'play'} /></button> + <${CastButton} variant="overlay" cls="video-close" /> <button class="video-close" onClick=${onClose} title=${t('video.close')}> <${Icon} name="close" /></button> </div> @@ -300,8 +339,14 @@ function AlbumView({ album, entries, transportRef, gekRef, setError, onBack, rea ${year && html`<span class="photo-album-heading-year">${year}</span>`} </div> </div> - ${!readOnly && html`<button class="photo-icon-btn" onClick=${zip} title=${t('photo.zip_album')}> - <${Icon} name="archive" cls="photo-icon-btn-icon" /></button>`} + <div class="photo-album-actions"> + ${/* Choosing a television from here shows the album on it: the first + photo opens, since nothing is on screen yet to send. */''} + <${CastButton} cls="photo-icon-btn" iconCls="photo-icon-btn-icon" + onChosen=${() => setLightboxIndex((i) => (i === null ? 0 : i))} /> + ${!readOnly && html`<button class="photo-icon-btn" onClick=${zip} title=${t('photo.zip_album')}> + <${Icon} name="archive" cls="photo-icon-btn-icon" /></button>`} + </div> </div> <div class="photo-grid"> ${album.photos.map((e, i) => html` @@ -353,17 +398,19 @@ function PhotosApp({ <p class="page-message">${t('photo.no_roots_configured')}</p> `} ${status === 'connected' && (photoDirectories || []).length > 0 && !openAlbum && html` - ${/* The filter is the only thing in it, so under `hideFilter` there is - no toolbar rather than an empty one — an empty band still pins, - and would hold a strip of the page open under the search field - for nothing. */ - !hideFilter && html` + ${/* The filter and the cast button are all it holds, so with neither — + Search hides the filter, a browser cannot cast — there is no + toolbar rather than an empty one: an empty band still pins, and + would hold a strip of the page open under the search field for + nothing. */ + (!hideFilter || castSession.supported) && html` <div class="photo-toolbar"> - <div class="tb-search"> + <${CastButton} /> + ${!hideFilter && html`<div class="tb-search"> <${Icon} name="search" /> <input type="text" placeholder="${t('group.filter')}" value=${filter} onInput=${(e) => setFilter(e.target.value)} /> - </div> + </div>`} </div> `} ${filteredAlbums.length === 0 && html` diff --git a/packages/meshbay-hub/src/meshbay_hub/static/platform.js b/packages/meshbay-hub/src/meshbay_hub/static/platform.js index 0174edc..3a0c628 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/platform.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/platform.js @@ -460,6 +460,15 @@ export const cast = { if (!bridge || !bridge.cast || !bridge.cast.subtitle) return null; return bridge.cast.subtitle(sub); }, + // A photo for the receiver: `{ bytes, type }`, already scaled to the + // television. Absent from an older shell, so callers check `canShowImages`. + get canShowImages() { + return Boolean(bridge && bridge.cast && bridge.cast.image); + }, + async image(img) { + if (!this.canShowImages) return null; + return bridge.cast.image(img); + }, async finish() { if (!bridge || !bridge.cast) return false; return bridge.cast.finish(); diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index e1e152e..9be414f 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -2043,7 +2043,21 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } cursor: text; outline: none; } .cast-url-input:focus { border-color: rgba(59, 130, 246, 0.6); } -.cast-wrapper { display: inline-block; } +.cast-wrapper { display: inline-block; position: relative; } +.video-close:disabled { opacity: 0.4; cursor: default; } +.video-close.cast-btn.casting { background: rgba(59, 130, 246, 0.35); } +.video-close.cast-btn.casting:hover { background: rgba(59, 130, 246, 0.5); } +.cast-picker-item.cast-menu-current { color: #94a3b8; cursor: default; } +.cast-picker-item.cast-menu-current:hover { background: none; } + +/* The cast button in a page's toolbar (cast-session.js): the same panel as + any other menu there, hung under the button rather than at a point. */ +.cast-btn.casting { color: var(--accent); border-color: var(--accent); } +.ctx-menu.cast-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 150; } +.ctx-menu-item.cast-menu-current { color: var(--text-dim); cursor: default; } +.ctx-menu-item.cast-menu-current:hover { background: none; } +.ctx-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; } +.photo-album-actions { display: flex; align-items: center; gap: 4px; } .cast-picker { position: absolute; top: calc(100% + 4px); right: 0; z-index: 100; background: rgba(28, 28, 32, 0.97); border: 1px solid rgba(255, 255, 255, 0.14); diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js index 4757395..aa1edf2 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js @@ -7,6 +7,7 @@ import { formatSize } from './file-utils.js'; import { SourceTag } from './group-name.js'; import { usePager, Pager, pageSizeFrom } from './pager.js'; import { LazyTile, MediaThumb } from './media-tiles.js'; +import { CastButton } from './cast-session.js'; // ── Videos ─────────────────────────────────────────────────────────────────── // @@ -1083,6 +1084,8 @@ function VideoApp({ </button> </div> <${Pager} pager=${pager} /> + ${/* The television a film opened from here plays on (cast-session.js). */''} + <${CastButton} /> ${!hideFilter && html`<div class="tb-search"> <${Icon} name="search" /> <input type="text" placeholder="${t('group.filter')}" diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-player.js b/packages/meshbay-hub/src/meshbay_hub/static/video-player.js index 2c424fb..ed1f18c 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/video-player.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/video-player.js @@ -6,6 +6,7 @@ import { Icon } from './icon.js'; import { formatSize, CHUNK_SIZE, pipelinedDownload } from './file-utils.js'; import { loadAuth } from './hub-client.js'; import * as platform from './platform.js'; +import { castSession } from './cast-session.js'; // Seconds of already-watched video kept in the SourceBuffer, and the queue depth // past which we start making room before being forced to. @@ -484,17 +485,22 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose, onDownload }) { // Where the stream the node is sending begins, in film time. The same number // the SourceBuffer gets as its `timestampOffset`. const streamStartRef = useRef(0); - const [castActive, setCastActive] = useState(false); + // A television already chosen this session (cast-session.js) takes the film + // from its first segment: the cast starts as a restart would, pending until + // the init segment arrives, and the player opens as its remote. Read once — + // a television chosen while this film plays is chosen here, by the picker. + const [autoCast] = useState(() => (castSession.supported ? castSession.device : null)); + const [castActive, setCastActive] = useState(Boolean(autoCast)); const [castUrl, setCastUrl] = useState(null); const [castPickerOpen, setCastPickerOpen] = useState(false); const [castDevices, setCastDevices] = useState([]); const [castScanning, setCastScanning] = useState(false); - const [castDeviceName, setCastDeviceName] = useState(null); - const castActiveRef = useRef(false); + const [castDeviceName, setCastDeviceName] = useState(autoCast ? autoCast.name : null); + const castActiveRef = useRef(Boolean(autoCast)); const castCodecRef = useRef(null); const initSegmentRef = useRef(null); - const castRestartPendingRef = useRef(false); - const castDeviceRef = useRef(null); + const castRestartPendingRef = useRef(Boolean(autoCast)); + const castDeviceRef = useRef(autoCast); const castRestartGenRef = useRef(0); // The receiver as last polled: { playerState, position } with the position // on the film's timeline, or null before it has answered. @@ -1758,7 +1764,10 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose, onDownload }) { return () => { stopped = true; clearInterval(id); }; }, [remoteMode]); + // Stopping here is stopping for the session: the next film or photo stays + // on this device until a television is chosen again. const stopCast = async () => { + castSession.forget(); await platform.cast.chromecastDisconnect().catch(() => {}); await platform.cast.stop(); setCastActive(false); castActiveRef.current = false; @@ -1896,6 +1905,7 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose, onDownload }) { ${castDevices.map(d => html` <button class="cast-picker-item" onClick=${() => { setCastPickerOpen(false); + castSession.choose(d); setCastDeviceName(d.name); setCastActive(true); castActiveRef.current = true; castRestartPendingRef.current = true; 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()) diff --git a/packages/meshbay-hub/tests/test_android_cast.py b/packages/meshbay-hub/tests/test_android_cast.py index bc5264e..b537df7 100644 --- a/packages/meshbay-hub/tests/test_android_cast.py +++ b/packages/meshbay-hub/tests/test_android_cast.py @@ -103,7 +103,7 @@ def test_the_receiver_is_pointed_at_the_relay_and_nothing_else(): def test_relay_calls_keep_their_order(): """The page does not await each push; on a pool they could overtake.""" channels = _read(CAST / "CastChannels.kt") - assert '"cast:start", "cast:push", "cast:subtitle", "cast:finish", "cast:stop"' in channels + assert '"cast:start", "cast:push", "cast:subtitle", "cast:image", "cast:finish", "cast:stop"' in channels bridge = _read(SRC / "bridge" / "Bridge.kt") assert "Executors.newSingleThreadExecutor()" in bridge assert "(if (ordered) serial else work).execute" in bridge diff --git a/packages/meshbay-hub/tests/test_cast_photos.py b/packages/meshbay-hub/tests/test_cast_photos.py new file mode 100644 index 0000000..699e663 --- /dev/null +++ b/packages/meshbay-hub/tests/test_cast_photos.py @@ -0,0 +1,240 @@ +""" +Photos on a cast receiver, and the television a session casts to. + +A photo takes a different road to the television than a film: no stream, one +picture at a time, served by the relay at `/image` and loaded as a picture by +the default media receiver. The page scales and re-encodes it first +(cast-session.js), so what reaches the relay is a JPEG the receiver can show. + +The first half runs the desktop relay itself, as test_cast_subtitles.py does: +it is plain Node with no dependencies. The photo is behind the same token as +the stream, its address changes with every photo — a receiver handed the same +URL twice shows what it already has — and only a picture is served as one. + +The second half holds the wiring: the receiver is told a photo is a photo by +the shell, never by the page; Android accepts no URL but the relay's own; and +a television chosen anywhere is the one a film opens on, with the player as +its remote from the start. +""" + +import json +import re +import shutil +import subprocess +from pathlib import Path + +import pytest + +PACKAGES = Path(__file__).resolve().parents[2] +STATIC = PACKAGES / "meshbay-hub" / "src" / "meshbay_hub" / "static" +DESKTOP = PACKAGES / "meshbay-client" / "src" +RELAY = DESKTOP / "cast-relay.js" +CHROMECAST = DESKTOP / "cast-chromecast.js" +ANDROID_SRC = PACKAGES / "meshbay-android" / "app" / "src" / "main" / "kotlin" +CAST = ANDROID_SRC / "org" / "meshbay" / "client" / "cast" + + +def _read(path: Path) -> str: + return path.read_text(encoding="utf-8") + + +RELAY_SCRIPT = r""" +const http = require('node:http'); +const CastRelay = require(process.argv[2]); +const get = (url) => new Promise((resolve, reject) => { + http.get(url, (res) => { + const parts = []; + res.on('data', (c) => parts.push(c)); + res.on('end', () => resolve({ status: res.statusCode, headers: res.headers, + body: Buffer.concat(parts).toString('hex') })); + }).on('error', reject); +}); +(async () => { + const relay = new CastRelay(); + const out = {}; + out.activeBefore = relay.active; + try { + await relay.showImage({ bytes: Buffer.from('<p>'), type: 'text/html' }); + out.htmlRefused = false; + } catch { out.htmlRefused = true; } + out.activeAfterRefusal = relay.active; + + const jpeg = Buffer.from([0xff, 0xd8, 1, 2, 0xff, 0xd9]); + const first = await relay.showImage({ bytes: jpeg, type: 'image/jpeg' }); + out.activeAfterPhoto = relay.active; + out.firstUrl = first.url; + out.imageType = relay.imageType; + out.photo = await get(first.url); + out.badToken = (await get(first.url.replace(/t=[0-9a-f]+/, 't=x'))).status; + const second = await relay.showImage({ bytes: Buffer.from([9]), type: 'image/jpeg' }); + out.secondUrl = second.url; + out.second = await get(second.url); + + await relay.start({}); + out.imageAfterFilm = relay.imageUrl; + await relay.stop(); + out.imageAfterStop = relay.imageUrl; + console.log(JSON.stringify(out)); +})().catch((e) => { console.error(e); process.exit(1); }); +""" + + +@pytest.fixture(scope="module") +def relay_run(tmp_path_factory): + if shutil.which("node") is None or not RELAY.exists(): + pytest.skip("node or the desktop client sources are not available") + script = tmp_path_factory.mktemp("cp") / "relay.cjs" + script.write_text(RELAY_SCRIPT, encoding="utf-8") + proc = subprocess.run(["node", str(script), str(RELAY)], + capture_output=True, text=True, encoding="utf-8", timeout=30) + assert proc.returncode == 0, proc.stderr + return json.loads(proc.stdout) + + +def test_a_photo_starts_the_relay_and_is_served_behind_its_token(relay_run): + assert relay_run["activeBefore"] is False + assert relay_run["activeAfterPhoto"] is True + photo = relay_run["photo"] + assert photo["status"] == 200 + assert photo["headers"]["content-type"] == "image/jpeg" + assert photo["headers"]["cache-control"] == "no-store" + assert photo["body"] == "ffd80102ffd9" + assert relay_run["badToken"] == 403 + assert relay_run["imageType"] == "image/jpeg" + + +def test_every_photo_has_its_own_address(relay_run): + assert re.search(r"/image\?t=[0-9a-f]{32}&v=\d+$", relay_run["firstUrl"]) + assert relay_run["secondUrl"] != relay_run["firstUrl"] + assert relay_run["second"]["body"] == "09" + + +def test_only_a_picture_is_served_as_one(relay_run): + assert relay_run["htmlRefused"] is True + assert relay_run["activeAfterRefusal"] is False, "a refused photo starts nothing" + + +def test_a_film_or_a_stop_takes_the_photo_down(relay_run): + assert relay_run["imageAfterFilm"] is None + assert relay_run["imageAfterStop"] is None + + +def test_the_receiver_loads_a_photo_as_a_picture(): + if shutil.which("node") is None or not CHROMECAST.exists(): + pytest.skip("node or the desktop client sources are not available") + script = ( + "const Module = require('node:module');" + "const real = Module._load;" + "Module._load = function (r, ...a) {" + " if (r === 'bonjour-service') return { Bonjour: class {} };" + " if (r === 'castv2-client') return { Client: class {}, DefaultMediaReceiver: {} };" + " return real.call(this, r, ...a); };" + f"const {{ mediaFor }} = require({json.dumps(str(CHROMECAST))});" + "console.log(JSON.stringify({" + " photo: mediaFor('http://x/image?t=a&v=1', null, 'image/jpeg')," + " film: mediaFor('http://x/stream.mp4?t=a', null, 'video/mp4')," + " legacy: mediaFor('http://x/stream.mp4?t=a', null) }));") + proc = subprocess.run(["node", "-e", script], capture_output=True, text=True, + encoding="utf-8", timeout=30) + assert proc.returncode == 0, proc.stderr + out = json.loads(proc.stdout) + assert out["photo"]["contentType"] == "image/jpeg" + assert out["photo"]["streamType"] == "NONE" + assert "tracks" not in out["photo"] + assert out["film"] == out["legacy"], "a film is loaded exactly as before" + assert out["film"]["streamType"] == "LIVE" and out["film"]["contentType"] == "video/mp4" + + +def test_the_shell_not_the_page_says_what_the_receiver_loads(): + """The page names a URL; whether it is a photo is the relay's to say. A + page that could name the content type could have a television load the + stream URL as anything at all.""" + main = _read(DESKTOP / "main.js") + load_of = main.split("const loadOf = ", 1)[1].split("\n\n", 1)[0] + assert "mediaUrl === castRelay.imageUrl" in load_of + assert "contentType: castRelay.imageType" in load_of + assert "contentType: 'video/mp4'" in load_of + assert "subtitle: null" in load_of, "a photo carries no subtitle" + assert main.count("loadOf(mediaUrl, subtitle)") == 2, "connect and reload both" + + +def test_android_accepts_the_relays_photo_and_nothing_else(): + if not CAST.exists(): + pytest.skip("android sources not present") + channels = _read(CAST / "CastChannels.kt") + check = channels.split("private fun relayUrl(", 1)[1].split("\n }", 1)[0] + assert "asked != ours && asked != relay.imageUrl" in check + assert "if (url == relay.imageUrl) relay.imageType" in channels + assert "url == relay.imageUrl -> null" in channels, "a photo carries no subtitle" + # A photo is not a cast that has to survive the screen going off. + image = channels.split('"cast:image" ->', 1)[1].split('\n "', 1)[0] + assert "onCasting" not in image + relay = _read(CAST / "CastRelay.kt") + assert '"/image" -> serveImage(out, socket)' in relay + serve = relay.split("private fun serve(", 1)[1] + assert serve.index('query["t"] != token') < serve.index('"/image"'), "behind the token" + control = _read(CAST / "CastControl.kt") + assert "MediaInfo.STREAM_TYPE_NONE" in control + assert "MediaMetadata.MEDIA_TYPE_PHOTO" in control + # Loaded is shown: a photo never reaches PLAYING, and waiting for it + # would hold every photo for the full fifteen seconds. + load = control.split("private fun load(", 1)[1] + assert load.index("if (photo) return") < load.index("PLAY_WAIT_MS") + + +def test_a_television_chosen_anywhere_takes_the_next_film(): + """The player opens as the remote of a television chosen before it, the + cast pending until the first segment exactly as a restart is; choosing one + in the player keeps it for the session, and stopping there forgets it.""" + player = _read(STATIC / "video-player.js") + assert ("const [autoCast] = useState(() => " + "(castSession.supported ? castSession.device : null));") in player + assert "useState(Boolean(autoCast))" in player + assert "castActiveRef = useRef(Boolean(autoCast))" in player + assert "castRestartPendingRef = useRef(Boolean(autoCast))" in player + assert "castDeviceRef = useRef(autoCast)" in player + assert "useState(autoCast ? autoCast.name : null)" in player + stop = player.split("const stopCast = async () => {", 1)[1].split("};", 1)[0] + assert "castSession.forget()" in stop + assert "castSession.choose(d);" in player + + +def test_the_cast_button_is_where_the_media_are(): + """Videos' toolbar, the Photos landing and a photo album's bar are drawn by + the group page and the search page alike, so one button in each covers + both. On the landing the button keeps a toolbar Search would otherwise + hide.""" + videos = _read(STATIC / "video-app.js") + assert "<${CastButton} />" in videos.split('<div class="video-toolbar">', 1)[1] + photos = _read(STATIC / "photos-app.js") + landing = photos.split("function PhotosApp(", 1)[1] + assert "(!hideFilter || castSession.supported) && html`" in landing + assert "<${CastButton} />" in landing.split('<div class="photo-toolbar">', 1)[1] + album = photos.split("function AlbumView(", 1)[1] + assert "<${CastButton}" in album + lightbox = photos.split("function Lightbox(", 1)[1].split("function AlbumView(", 1)[0] + assert '<${CastButton} variant="overlay"' in lightbox + assert "if (castDevice && blobUrl && blob) showPhoto(blob);" in lightbox + # The group page draws them through the app registry, the search page + # imports them: the same components either way. + registry = _read(STATIC / "apps.js") + search = _read(STATIC / "search-page.js") + for page in (registry, search): + assert "VideoApp" in page and "PhotosApp" in page + + +def test_a_photo_leaves_scaled_and_upright(): + session = _read(STATIC / "cast-session.js") + assert "imageOrientation: 'from-image'" in session + assert "const TV_WIDTH = 1920;" in session and "const TV_HEIGHT = 1080;" in session + assert "Math.min(1, TV_WIDTH / bitmap.width, TV_HEIGHT / bitmap.height)" in session + assert "'image/jpeg'" in session + # Only the newest photo asked for is sent. + assert session.count("gen !== photoGen") >= 2 + + +def test_every_locale_names_the_slideshow(): + for f in sorted((STATIC / "locales").glob("*.js")): + text = f.read_text(encoding="utf-8") + for key in ("photo.slideshow", "photo.slideshow_stop"): + assert f"'{key}':" in text, f"{f.name} lacks {key}" |