linkshell-cli 0.10.50 → 0.10.52

package/dist/host/src/screen-viewer.js

@@ -17,6 +17,9 @@
 // device can reach each other, it is a video track from the app, with the hands and the pointer on
 // data channels beside it; the page draws the pointer, which that picture does not have in it.
 // Otherwise it is H.264 down the page's socket, decoded here onto a canvas, as it always was.
+import { SCREEN_LOADING_HTML, SCREEN_LOADING_SCRIPT, SCREEN_LOADING_STYLE } from "./screen-loading.js";
+/** Final for a viewer: falling back to another path would only take the screen back. The app matches it too. */
+export const SCREEN_TAKEN = "屏幕画面被另一台设备接手了";
 const icon = (body) => `<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
 const ICONS = {
     view: icon('<path d="M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12Z"/><circle cx="12" cy="12" r="2.8"/>'),
@@ -52,8 +55,6 @@ const STYLE = String.raw `
   #pointer.pressed { background: rgba(255,255,255,0.4); }
   #pointer.own { border: 0; border-radius: 0; box-shadow: none; background: transparent center / 100% 100% no-repeat; }
   #stage.own { cursor: none; }
-  #note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 32px;
-    color: rgba(255,255,255,0.72); text-align: center; pointer-events: none; }
   .glass { background: rgba(38,38,42,0.74); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
     border: 0.5px solid rgba(255,255,255,0.16); box-shadow: 0 8px 28px rgba(0,0,0,0.38); }
   #control-shell { position: absolute; pointer-events: none; z-index: 1; will-change: width, height, transform, border-radius, opacity; }
@@ -441,7 +442,9 @@ function createScreenSession(initial, effects) {
   const original = { ...desired };
   const state = () => ({ display: desired.display, width: desired.width, ...(desired.maxFps ? { maxFps: desired.maxFps } : {}), paused: !desired.active || hidden });
   const key = () => JSON.stringify(state());
-  const targetChanged = () => ["display", "width", "maxFps"].some((name) => desired[name] !== original[name]);
+  // A lower frame-rate ceiling (a 60 Hz phone, Low Power) needs no new connection from an app that can't
+  // reconfigure: the receiver just shows fewer frames. Reloading for it left the native picture "adjusting".
+  const targetChanged = () => ["display", "width"].some((name) => desired[name] !== original[name]);
   const changed = () => effects.changed?.({ ...desired, paused: state().paused, inputReady, error });
   const suspend = () => { effects.release(); inputReady = false; };
   const pump = () => {
@@ -597,8 +600,22 @@ const mods = new Set();
 
 // ---- The picture ----------------------------------------------------------
 
-let sessionError = "";
-const say = (text) => { text = sessionError || text; note.textContent = text; note.classList.toggle("gone", !text); };
+let sessionError = "", sessionPhase = "", hasPicture = false;
+const loading = createScreenLoading(note, () => {
+  if (app && chrome.canRetryScreen) tellApp({ type: "screenRetry" });
+  else if (typeof window.__linkshellReload === "function") window.__linkshellReload({});
+  else location.reload();
+}, (phase) => window.__linkshellScreenState?.(phase));
+addEventListener("pagehide", () => loading.dispose(), { once: true });
+const say = (text) => {
+  if (!text) hasPicture = true;
+  if (sessionError) loading.set("error", sessionError);
+  else if (text) loading.set("error", text);
+  else if (sessionPhase) loading.set(sessionPhase);
+  else loading.set("ready");
+};
+// Transport updates must not hide a configuration failure or a paused retained session.
+const showProgress = (phase) => { if (!sessionError && !sessionPhase) loading.set(phase); };
 const round = (value, digits) => (value == null || !isFinite(value) ? null : +value.toFixed(digits === undefined ? 1 : digits));
 const hex = (n) => n.toString(16).padStart(2, "0");
 function sps(unit) {
@@ -694,11 +711,13 @@ const session = createScreenSession({ active: true, display: Number(query.get("d
   changed: (state) => {
     width = state.width;
     const previousError = sessionError;
+    const previousPhase = sessionPhase;
     sessionError = state.error;
+    sessionPhase = state.paused ? "paused" : !state.inputReady ? "adjusting" : "";
     if (sessionError) say(sessionError);
-    else if (state.paused) say("屏幕已暂停");
-    else if (!state.inputReady) say("正在调整屏幕…");
-    else if (previousError || note.textContent === "屏幕已暂停" || note.textContent === "正在调整屏幕…") say("");
+    else if (sessionPhase) loading.set(sessionPhase);
+    // Configuration acknowledgement enables input; only received media proves the first picture exists.
+    else if (previousError || previousPhase) loading.set(hasPicture ? "ready" : "receiving");
     if (state.inputReady && mode !== "view") askControl();
     refreshWidths();
     refresh();
@@ -718,14 +737,14 @@ const ws = nativePicture
   : new WebSocket((location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/stream?" + asked);
 ws.binaryType = "arraybuffer";
 const send = (message) => { if (ws.readyState === 1) ws.send(JSON.stringify(message)); };
-let capabilityTimer = 0, socketClosed = false;
+let capabilityTimer = 0, socketClosed = false, taken = false;
 function waitForCapabilities() {
   clearTimeout(capabilityTimer);
   capabilityTimer = setTimeout(() => {
     if (!session.known()) session.receive({ t: "capabilities", version: 1, configure: false, pause: false, retainMs: 0 });
   }, 10000);
 }
-ws.onopen = () => { session.open(); waitForCapabilities(); if (mode !== "view") askControl(); };
+ws.onopen = () => { if (loading.phase === "connecting") showProgress("receiving"); session.open(); waitForCapabilities(); if (mode !== "view") askControl(); };
 // Out of sight, a page answers late (its timers slow to one a second) and shows nothing: the host sends no
 // picture down the socket meanwhile, and starts again at a keyframe.
 document.addEventListener("visibilitychange", () => session.visibility(document.hidden));
@@ -801,9 +820,9 @@ ws.onclose = () => {
   session.close();
   // A video track is this socket's: without the one there is no finding the other again, and no hands.
   drop();
-  if (requestRelay()) return;
-  tellApp({ type: "screenClosed" });
-  if (blocked || note.classList.contains("gone") || note.textContent.startsWith("正在")) say("屏幕连接已断开");
+  if (!taken && requestRelay()) return;
+  tellApp({ type: "screenClosed", ...(taken ? { reason: "taken" } : {}) });
+  if (loading.phase !== "error") say("屏幕连接已断开，请确认电脑在线后重新连接。");
   blocked = false;
 };
 
@@ -812,7 +831,10 @@ function heard(message) {
     if (message.session.t === "capabilities") clearTimeout(capabilityTimer);
     return session.receive(message.session);
   }
-  if (message.error) return say(message.error);
+  if (message.error) {
+    if (message.error === SCREEN_TAKEN) taken = true;
+    return say(message.error);
+  }
   if (message.rtc) return signal(message.rtc);
   if (message.pong) return meter && meter.pong(message.pong);
   if (message.restart) {
@@ -936,15 +958,17 @@ function watch(mine) {
   const state = mine.pc.connectionState || mine.pc.iceConnectionState;
   if (state === "failed" || mine.pc.iceConnectionState === "failed") return giveUp(mine.up ? "the connection failed" : "no path between the two (ICE failed)");
   if (state === "disconnected") {
+    showProgress("recovering");
     // A path that drops for a moment comes back by itself; one gone for longer is given up.
     if (mine.up && !mine.away) mine.away = setTimeout(() => away(mine, performance.now()), 4000);
   } else if (state === "connected" || state === "completed") {
+    if (loading.phase !== "ready") showProgress("receiving");
     clearTimeout(mine.away);
     mine.away = 0;
     if (mine.up) return;
     mine.up = true;
     clearTimeout(patience);
-    if (!live) patience = setTimeout(frameless, 4000);
+    if (loading.phase !== "ready") patience = setTimeout(frameless, 4000);
   }
 }
 
@@ -973,6 +997,7 @@ function frameless() {
 function giveUp(reason) {
   if (gaveUp) return;
   gaveUp = true;
+  showProgress("recovering");
   const pc = rtc && rtc.pc;
   const told = (detail) => {
     drop();
@@ -989,7 +1014,7 @@ function requestRelay() {
   if (!relayRequested) {
     relayRequested = true;
     tellApp({ type: "screenFallback" });
-    say("正在连接电脑屏幕…");
+    showProgress("recovering");
   }
   return true;
 }
@@ -1010,7 +1035,7 @@ function fallBack() {
   gaveUp = true;
   drop();
   if (requestRelay()) return;
-  if (blocked) say("正在连接电脑屏幕…");
+  showProgress("recovering");
   blocked = false;
   if (!windowsHost && !("VideoDecoder" in window)) return unseeable();
   if (tried) hint(live ? "直连断开了：已改用兼容方式传画面，延迟会高一些" : "没能和电脑直连：已改用兼容方式传画面，延迟会高一些", 5000);
@@ -1024,12 +1049,12 @@ function play() {
   started.then(() => {
     if (!blocked) return;
     blocked = false;
-    say(live ? "" : "正在连接电脑屏幕…");
+    showProgress("receiving");
   }, (error) => {
     // A new stream replacing the one being started rejects the first call too; that is not a refusal.
     if (error.name === "AbortError" || !rtc) return;
     blocked = true;
-    say("轻点屏幕，开始显示画面");
+    if (!sessionError && !sessionPhase) loading.set("blocked", "浏览器需要你的确认，轻点屏幕即可开始观看。");
   });
 }
 // What a browser takes as someone's say-so to start a video.
@@ -1041,19 +1066,34 @@ function sized() {
   // While this page presents the frames itself, the size that counts is the frame's own: the
   // <video> is kept running as the fallback but is not what is on screen.
   if (presenter) {
-    clearTimeout(patience);
+    if (presenter.shown) clearTimeout(patience);
     if (!live) show(true);
     return;
   }
   content.w = video.videoWidth;
   content.h = video.videoHeight;
-  if (!blocked) say("");
   if (live) return layout();
-  clearTimeout(patience);
   show(true);
 }
 video.addEventListener("resize", sized);
 video.addEventListener("loadedmetadata", sized);
+// Metadata and a connected socket do not mean a frame is visible yet.
+function videoShown() {
+  if (!rtc || blocked || video.readyState < 2 || presenter) return;
+  clearTimeout(patience);
+  sized();
+  say("");
+}
+if ("requestVideoFrameCallback" in video) {
+  const nextFrame = () => {
+    if (loading.phase !== "ready") videoShown();
+    video.requestVideoFrameCallback(nextFrame);
+  };
+  video.requestVideoFrameCallback(nextFrame);
+} else {
+  video.addEventListener("playing", videoShown);
+  video.addEventListener("timeupdate", videoShown);
+}
 
 // ---- Presenting the track's frames this page's own way --------------------
 
@@ -1129,6 +1169,7 @@ async function presentTrack(track) {
       draws.end();
       device.queue.submit([pass.finish()]);
       mine.shown += 1;
+      say("");
       if (mine.w !== frame.displayWidth || mine.h !== frame.displayHeight) {
         mine.w = frame.displayWidth;
         mine.h = frame.displayHeight;
@@ -1138,7 +1179,6 @@ async function presentTrack(track) {
         // the <video> beside it was allowed to start playing.
         clearTimeout(patience);
         blocked = false;
-        say("");
         if (!live) show(true);
         else layout();
       }
@@ -3108,7 +3148,7 @@ if (nativePicture) {
       session.reconnect();
       waitForCapabilities();
       Object.assign(control, { asked: false, known: false, trusted: false });
-      say("正在连接电脑屏幕…");
+      showProgress("connecting");
       if (mode !== "view") askControl();
     },
   };
@@ -3126,16 +3166,16 @@ if (nativePicture) {
 }
 tellApp({ type: "ready", mode });
 `;
-const SCRIPT = `(() => {${VIEWER_LOGIC}${BODY}})();`;
+const SCRIPT = `(() => {const SCREEN_TAKEN = ${JSON.stringify(SCREEN_TAKEN)};${VIEWER_LOGIC}${SCREEN_LOADING_SCRIPT}${BODY}})();`;
 export function viewerPage(platform = "darwin") {
     return `<!doctype html>
 <html><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
 <title>屏幕</title>
-<style>${STYLE}</style></head>
+<style>${STYLE}${SCREEN_LOADING_STYLE}</style></head>
 <body data-platform="${platform === "win32" ? "win32" : "darwin"}">
 <div id="stage"><div id="picture"><canvas id="screen"></canvas><canvas id="gpu" class="gone"></canvas><video id="video" class="gone" autoplay playsinline muted></video><div id="pointer"></div></div></div>
-<div id="note">正在连接电脑屏幕…</div>
+${SCREEN_LOADING_HTML}
 <div id="toast" class="glass"></div>
 <div id="menu" class="glass gone">
   <div class="choice" role="button" aria-label="只看，不操作电脑" data-mode="view"><i></i><div><b>只看</b><span>不操作电脑</span></div></div>

package/dist/host/src/screen-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"screen-viewer.js","sourceRoot":"","sources":["../../../../host/src/screen-viewer.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,2EAA2E;AAC3E,6EAA6E;AAC7E,mEAAmE;AACnE,EAAE;AACF,4DAA4D;AAC5D,yEAAyE;AACzE,2CAA2C;AAC3C,6EAA6E;AAC7E,+EAA+E;AAC/E,2CAA2C;AAC3C,qGAAqG;AACrG,+EAA+E;AAC/E,6FAA6F;AAC7F,EAAE;AACF,oGAAoG;AACpG,mGAAmG;AACnG,+FAA+F;AAC/F,8FAA8F;AAE9F,MAAM,IAAI,GAAG,CAAC,IAAY,EAAE,EAAE,CAC5B,uJAAuJ,IAAI,QAAQ,CAAC;AAEtK,MAAM,KAAK,GAAG;IACZ,IAAI,EAAE,IAAI,CAAC,qHAAqH,CAAC;IACjI,QAAQ,EAAE,IAAI,CAAC,6DAA6D,CAAC;IAC7E,KAAK,EAAE,IAAI,CAAC,oGAAoG,CAAC;IACjH,QAAQ,EAAE,IAAI,CAAC,iJAAiJ,CAAC;IACjK,GAAG,EAAE,IAAI,CAAC,0EAA0E,CAAC;IACrF,MAAM,EAAE,IAAI,CAAC,oDAAoD,CAAC;IAClE,MAAM,EAAE,IAAI,CAAC,oDAAoD,CAAC;IAClE,IAAI,EAAE,IAAI,CAAC,4BAA4B,CAAC;IACxC,KAAK,EAAE,IAAI,CAAC,qDAAqD,CAAC;IAClE,OAAO,EAAE,IAAI,CAAC,sEAAsE,CAAC;IACrF,IAAI,EAAE,IAAI,CAAC,iEAAiE,CAAC;IAC7E,KAAK,EAAE,IAAI,CAAC,4CAA4C,CAAC;CAC1D,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0YrC,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAihFtB,CAAC;AAEF,MAAM,MAAM,GAAG,WAAW,YAAY,GAAG,IAAI,OAAO,CAAC;AAErD,MAAM,UAAU,UAAU,CAAC,WAA4B,QAAQ;IAC7D,OAAO;;;;SAIA,KAAK;uBACS,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;;;;;;;;;iHAUiD,KAAK,CAAC,KAAK;;;;;;;;;;;;;;;kEAe1D,KAAK,CAAC,QAAQ;iEACf,KAAK,CAAC,KAAK;+DACb,KAAK,CAAC,GAAG;gEACR,KAAK,CAAC,IAAI;;;;;;;;;;;;;;;4CAe9B,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;;4CAEtF,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;oCAuBnG,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;oCAClC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;;;;;;;;;;6CAUzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;UACxD,MAAM;eACD,CAAC;AAChB,CAAC"}
+{"version":3,"file":"screen-viewer.js","sourceRoot":"","sources":["../../../../host/src/screen-viewer.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,2EAA2E;AAC3E,6EAA6E;AAC7E,mEAAmE;AACnE,EAAE;AACF,4DAA4D;AAC5D,yEAAyE;AACzE,2CAA2C;AAC3C,6EAA6E;AAC7E,+EAA+E;AAC/E,2CAA2C;AAC3C,qGAAqG;AACrG,+EAA+E;AAC/E,6FAA6F;AAC7F,EAAE;AACF,oGAAoG;AACpG,mGAAmG;AACnG,+FAA+F;AAC/F,8FAA8F;AAE9F,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEvG,gHAAgH;AAChH,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;AAE5C,MAAM,IAAI,GAAG,CAAC,IAAY,EAAE,EAAE,CAC5B,uJAAuJ,IAAI,QAAQ,CAAC;AAEtK,MAAM,KAAK,GAAG;IACZ,IAAI,EAAE,IAAI,CAAC,qHAAqH,CAAC;IACjI,QAAQ,EAAE,IAAI,CAAC,6DAA6D,CAAC;IAC7E,KAAK,EAAE,IAAI,CAAC,oGAAoG,CAAC;IACjH,QAAQ,EAAE,IAAI,CAAC,iJAAiJ,CAAC;IACjK,GAAG,EAAE,IAAI,CAAC,0EAA0E,CAAC;IACrF,MAAM,EAAE,IAAI,CAAC,oDAAoD,CAAC;IAClE,MAAM,EAAE,IAAI,CAAC,oDAAoD,CAAC;IAClE,IAAI,EAAE,IAAI,CAAC,4BAA4B,CAAC;IACxC,KAAK,EAAE,IAAI,CAAC,qDAAqD,CAAC;IAClE,OAAO,EAAE,IAAI,CAAC,sEAAsE,CAAC;IACrF,IAAI,EAAE,IAAI,CAAC,iEAAiE,CAAC;IAC7E,KAAK,EAAE,IAAI,CAAC,4CAA4C,CAAC;CAC1D,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4YrC,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsjFtB,CAAC;AAEF,MAAM,MAAM,GAAG,gCAAgC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,YAAY,GAAG,qBAAqB,GAAG,IAAI,OAAO,CAAC;AAElI,MAAM,UAAU,UAAU,CAAC,WAA4B,QAAQ;IAC7D,OAAO;;;;SAIA,KAAK,GAAG,oBAAoB;uBACd,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;EAE9D,mBAAmB;;;;;;;;iHAQ4F,KAAK,CAAC,KAAK;;;;;;;;;;;;;;;kEAe1D,KAAK,CAAC,QAAQ;iEACf,KAAK,CAAC,KAAK;+DACb,KAAK,CAAC,GAAG;gEACR,KAAK,CAAC,IAAI;;;;;;;;;;;;;;;4CAe9B,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;;4CAEtF,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;oCAuBnG,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;oCAClC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;;;;;;;;;;6CAUzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;UACxD,MAAM;eACD,CAAC;AAChB,CAAC"}

package/dist/host/src/screen.d.ts

@@ -56,7 +56,9 @@ export declare class ScreenShare {
     /** The servers both ends ask for their public address, to reach each other directly. */
     private readonly iceServers;
     private server?;
-    private token;
+    /** Two starts at once (the phone and a desktop, a retry) must share one bind, not read an unbound address. */
+    private listening?;
+    private tokens;
     private displays;
     private readonly captures;
     /**
@@ -80,6 +82,7 @@ export declare class ScreenShare {
     }>;
     private listDisplays;
     private listen;
+    private bind;
     private authorized;
     /**
      * Whether the screen can be watched and controlled. On a Mac that is the

package/dist/host/src/screen.js

@@ -7,7 +7,7 @@ import { WebSocketServer } from "ws";
 import { RpcError } from "@linkshell/wire";
 import { closeInputApp, inputApp, InputControl, macAppSupported, NO_APP, videoSignal } from "./input.js";
 import { LADDER, Pacer, RELAY_LEVEL, rung } from "./screen-pacer.js";
-import { viewerPage } from "./screen-viewer.js";
+import { SCREEN_TAKEN, viewerPage } from "./screen-viewer.js";
 import { screenMeasurementLog } from "./screen-metrics.js";
 import { captureWindows, configureWindowsCapture, WindowsFrameSplitter, windowsDisplays, windowsHelper, windowsProfile } from "./windows-screen.js";
 import { WindowsVideoSession, windowsMedia } from "./windows-video.js";
@@ -201,12 +201,15 @@ export async function resolvedCandidate(sdp, resolve = mdns) {
     }
 }
 const mdns = async (name) => (await lookup(name, { family: 4 })).address;
+const RECENT_TOKENS = 4;
 /** The loopback viewer server; started on first use, one capture per watching device. */
 export class ScreenShare {
     log;
     iceServers;
     server;
-    token = "";
+    /** Two starts at once (the phone and a desktop, a retry) must share one bind, not read an unbound address. */
+    listening;
+    tokens = [];
     displays = [];
     captures = new Set();
     /**
@@ -231,10 +234,12 @@ export class ScreenShare {
         const displays = (this.displays = await this.listDisplays());
         if (!displays.length)
             throw RpcError.app("not_supported", "没有找到可以捕获的屏幕");
-        // A fresh token per start: an old viewer URL stops working.
-        this.token = randomBytes(24).toString("base64url");
+        // A fresh token per start; only the last few keep working, so devices starting
+        // at the same time (the phone and a desktop) don't lock each other out.
+        const token = randomBytes(24).toString("base64url");
+        this.tokens = [token, ...this.tokens].slice(0, RECENT_TOKENS);
         const port = await this.listen();
-        return { port, token: this.token, displays: displays.map(({ index, name }) => ({ index, name })) };
+        return { port, token, displays: displays.map(({ index, name }) => ({ index, name })) };
     }
     async listDisplays() {
         if (process.platform === "win32")
@@ -255,8 +260,15 @@ export class ScreenShare {
         return [{ index: 0, name: "屏幕", screen: 0, ...(dimensions ? { w: Number(dimensions[1]), h: Number(dimensions[2]) } : {}) }];
     }
     listen() {
-        if (this.server)
-            return Promise.resolve(this.server.address().port);
+        this.listening ??= this.bind().catch((error) => {
+            this.server?.close();
+            this.server = undefined;
+            this.listening = undefined;
+            throw error;
+        });
+        return this.listening;
+    }
+    bind() {
         const server = createServer((request, response) => {
             const url = new URL(request.url ?? "/", "http://localhost");
             if (!this.authorized(url)) {
@@ -297,8 +309,10 @@ export class ScreenShare {
     }
     authorized(url) {
         const given = Buffer.from(url.searchParams.get("token") ?? "");
-        const expected = Buffer.from(this.token);
-        return this.token.length > 0 && given.length === expected.length && timingSafeEqual(given, expected);
+        return this.tokens.some((token) => {
+            const expected = Buffer.from(token);
+            return given.length === expected.length && timingSafeEqual(given, expected);
+        });
     }
     /**
      * Whether the screen can be watched and controlled. On a Mac that is the
@@ -451,7 +465,7 @@ export class ScreenShare {
                 previous.end();
                 // Another device's picture ends here; a viewer changing its own just carries on.
                 if (previous.on !== on)
-                    previous.on.exit("屏幕画面被另一台设备接手了");
+                    previous.on.exit(SCREEN_TAKEN);
                 await captureReleased(previous);
             }
             if (!wanted())
@@ -477,12 +491,13 @@ export class ScreenShare {
             await windowsDisplays();
             if (viewer.closed())
                 return "refused";
+            viewer.claim();
             this.video?.taken();
             const holder = this.holder;
             if (holder) {
                 this.holder = undefined;
                 holder.end();
-                holder.on.exit("屏幕画面被另一台设备接手了");
+                holder.on.exit(SCREEN_TAKEN);
                 await captureReleased(holder);
             }
             if (viewer.closed())
@@ -496,7 +511,7 @@ export class ScreenShare {
                     if (this.video === mine)
                         this.video = undefined;
                     session.end();
-                    viewer.refuse("屏幕画面被另一台设备接手了");
+                    viewer.refuse(SCREEN_TAKEN);
                 } };
             this.video = mine;
             const cancelled = setInterval(() => { if (viewer.closed())
@@ -538,11 +553,12 @@ export class ScreenShare {
         if (viewer.closed())
             return "refused";
         // The latest viewer has the screen, whichever way the one before was getting it.
+        viewer.claim();
         this.video?.taken();
         const holder = this.holder;
         if (holder) {
             holder.end();
-            holder.on.exit("屏幕画面被另一台设备接手了");
+            holder.on.exit(SCREEN_TAKEN);
             await captureReleased(holder);
             if (this.holder === holder)
                 this.holder = undefined;
@@ -556,7 +572,7 @@ export class ScreenShare {
                 if (this.video === mine)
                     this.video = undefined;
                 app.endVideo(id);
-                viewer.refuse("屏幕画面被另一台设备接手了");
+                viewer.refuse(SCREEN_TAKEN);
             },
         };
         this.video = mine;
@@ -599,13 +615,6 @@ export class ScreenShare {
         return { id, reconfigure: status.videoReconfigure === true, configure: configuration => app.configureVideo(id, configuration), signal: message => app.signal(id, message), end: () => app.endVideo(id) };
     }
     stream(ws, display, relayed, wantsVideo, width, maxFps, diagnostics = false, codec) {
-        // Paused viewers still own a session. A new authenticated viewer takes that ownership too.
-        for (const [previous, release] of this.viewers) {
-            if (previous.readyState === previous.OPEN)
-                previous.send(JSON.stringify({ error: "屏幕画面被另一台设备接手了" }));
-            release();
-            previous.close();
-        }
         let shown = this.displays.find((entry) => entry.index === display) ?? this.displays[0];
         let desired = { display: shown?.index ?? 0, width: width ?? 1920, maxFps: maxFps === 30 || maxFps === 60 || maxFps === 120 ? maxFps : undefined, paused: false };
         let closed = false;
@@ -938,10 +947,23 @@ export class ScreenShare {
             }
             void drain();
         };
+        // Paused viewers still own a session; the latest viewer takes it over, but only once it is
+        // about to take the capture or the video: one that fails before that mustn't end a healthy one.
+        const claim = () => {
+            for (const [previous, release] of this.viewers) {
+                if (previous === ws)
+                    continue;
+                if (previous.readyState === previous.OPEN)
+                    previous.send(JSON.stringify({ error: SCREEN_TAKEN }));
+                release();
+                previous.close();
+            }
+        };
         const startFallback = () => {
             endVideo();
             if (!live())
                 return;
+            claim();
             tell({ rtc: { t: "off" } });
             canConfigure = !!shown?.w && !!shown?.h;
             initialized = true;
@@ -1055,7 +1077,7 @@ export class ScreenShare {
         if (wantsVideo) {
             let lostWhileOpening = false;
             void this.offerVideo(shown?.screen ?? 0, width, maxFps, diagnostics, codec, {
-                closed: () => !live(), tell,
+                closed: () => !live(), claim, tell,
                 refuse: (message) => { tell({ error: message }); dispose(); ws.close(); },
                 lost: () => { if (video)
                     fallBack();
@@ -1118,6 +1140,7 @@ export class ScreenShare {
         closeInputApp();
         this.server?.close();
         this.server = undefined;
+        this.listening = undefined;
     }
 }
 //# sourceMappingURL=screen.js.map