feat(client): list cast receivers as they answer

The scan still runs six seconds, but the picker polls what it has found
and shows each receiver immediately. A rescan no longer has its timer
cut short by the scan it replaced.

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

1 files changed, 19 insertions, 12 deletions

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 fa10d15..2a4d2ea 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/video-player.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/video-player.js
@@ -1433,6 +1433,19 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose, onDownload }) {
     }
   }, [phase]);
 
+  // The scan lives as long as the picker is open: closing it, or picking a
+  // receiver, stops the updates. Receivers are listed as they answer, and the
+  // spinner sits below them so one landing never moves the row being aimed at.
+  useEffect(() => {
+    if (!castPickerOpen) return undefined;
+    setCastDevices([]);
+    setCastScanning(true);
+    return platform.cast.discover((devices, scanning) => {
+      setCastDevices(devices || []);
+      setCastScanning(scanning);
+    });
+  }, [castPickerOpen]);
+
   useEffect(() => {
     return () => {
       if (blobUrlRef.current) {
@@ -1685,12 +1698,6 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose, onDownload }) {
                     setCastPickerOpen(false);
                   } else {
                     setCastPickerOpen(true);
-                    setCastScanning(true);
-                    setCastDevices([]);
-                    platform.cast.discover().then((devices) => {
-                      setCastDevices(devices || []);
-                      setCastScanning(false);
-                    }).catch(() => setCastScanning(false));
                   }
                 }
               }}
@@ -1698,12 +1705,6 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose, onDownload }) {
               <${Icon} name="cast" /></button>
             ${castPickerOpen && html`
               <div class="cast-picker">
-                ${castScanning && html`
-                  <div class="cast-picker-item cast-picker-scanning">
-                    <span class="spinner" style="width:14px;height:14px"></span>
-                    ${t('cast.scanning')}
-                  </div>
-                `}
                 ${castDevices.map(d => html`
                   <button class="cast-picker-item" onClick=${() => {
                     setCastPickerOpen(false);
@@ -1718,6 +1719,12 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose, onDownload }) {
                     <${Icon} name="cast" /> ${d.name}
                   </button>
                 `)}
+                ${castScanning && html`
+                  <div class="cast-picker-item cast-picker-scanning">
+                    <span class="spinner" style="width:14px;height:14px"></span>
+                    ${t('cast.scanning')}
+                  </div>
+                `}
                 ${!castScanning && castDevices.length === 0 && html`
                   <div class="cast-picker-item cast-picker-empty">
                     ${t('cast.no_devices')}