@decentnetwork/lan 0.1.175 → 0.1.177

package/dist/ui/desktop/app.js

@@ -20,6 +20,7 @@ const ICON_PATHS = {
   qr: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><path d="M14 14h3v3M21 14v.01M14 21h.01M17 21h.01M21 17v4"/>',
   // ---- app tiles ----
   video: '<path d="m22 8.5-5.4 3.5 5.4 3.5V8.5Z"/><rect x="2" y="6" width="14.5" height="12" rx="3"/>',
+  monitor: '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>',
   sparkles: '<path d="M12 3.5 13.6 9 19 10.5 13.6 12 12 17.5 10.4 12 5 10.5 10.4 9 12 3.5Z"/><path d="M19 3.5v3.2M20.6 5.1h-3.2"/><path d="M5 16v2.4M6.2 17.2H3.8"/>',
   mic: '<rect x="9" y="2.5" width="6" height="11.5" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0"/><path d="M12 17.5v3.5"/>',
   flask: '<path d="M9.5 3v6.2L4.8 17.4A2 2 0 0 0 6.5 20.5h11a2 2 0 0 0 1.7-3.1L14.5 9.2V3"/><path d="M8.5 3h7"/><path d="M7.3 15h9.4"/>',
@@ -1596,6 +1597,7 @@ function useCallController(selfId) {
   const [active, setActive] = React.useState(null);
   const [localStream, setLocalStream] = React.useState(null);
   const [remoteStream, setRemoteStream] = React.useState(null);
+  const [sharing, setSharing] = React.useState(false);
   const engineRef = React.useRef(null);
   React.useEffect(() => {
     if (!selfId || engineRef.current) return;
@@ -1610,12 +1612,19 @@ function useCallController(selfId) {
       signaling,
       createPeerConnection: (c) => new RTCPeerConnection(c),
       getLocalMedia: (k) => navigator.mediaDevices.getUserMedia({ audio: k.audio, video: k.video }),
+      getDisplayMedia: (c) => navigator.mediaDevices.getDisplayMedia(c || { video: true, audio: false }),
       iceServers: CALL_ICE_SERVERS,
       logger: (m) => console.log(m)
     });
     engine.on("incomingCall", (info) => setIncoming(info));
     engine.on("stateChanged", (info, state) => setActive((a) => a && a.callId === info.callId ? { ...a, state } : a));
-    engine.on("localStream", (id, s) => setLocalStream(s));
+    engine.on("localStream", (id, s) => {
+      setLocalStream(s);
+      try {
+        setSharing(engine.isSharingScreen(id));
+      } catch (e) {
+      }
+    });
     engine.on("remoteStream", (id, s) => setRemoteStream(s));
     engine.on("ended", (id) => {
       setActive((a) => a && a.callId === id ? null : a);
@@ -1675,11 +1684,21 @@ function useCallController(selfId) {
     const eng = engineRef.current, a = active;
     if (eng && a && a.callId) eng.setLocalTrackEnabled(a.callId, "audio", !m);
   }, [active]);
+  const toggleShare = React.useCallback(async () => {
+    const eng = engineRef.current, a = active;
+    if (!eng || !a || !a.callId) return;
+    try {
+      if (eng.isSharingScreen(a.callId)) await eng.stopScreenShare(a.callId);
+      else await eng.shareScreen(a.callId);
+    } catch (e) {
+      if (e && e.name !== "NotAllowedError") alert("Screen share failed: " + (e && e.message || e));
+    }
+  }, [active]);
   const setVideoOn = React.useCallback((v) => {
     const eng = engineRef.current, a = active;
     if (eng && a && a.callId) eng.setLocalTrackEnabled(a.callId, "video", v);
   }, [active]);
-  return { incoming, active, localStream, remoteStream, start, accept, reject, hangup, setMuted, setVideoOn };
+  return { incoming, active, localStream, remoteStream, sharing, start, accept, reject, hangup, setMuted, setVideoOn, toggleShare };
 }
 function VideoSurface({ stream, muted, style }) {
   const ref = React.useCallback((el) => {
@@ -1780,7 +1799,8 @@ function CallOverlay({ T, ctl, peers }) {
   if (!call) return null;
   const peer = (peers || []).find((p) => p.id === call.peerId) || { id: call.peerId };
   const name = peer.alias || peer.name || shortKey(call.peerId, 10, 6);
-  const video = call.video;
+  const streamHasVideo = (s) => !!(s && s.getVideoTracks && s.getVideoTracks().length > 0);
+  const video = call.video || ctl.sharing || streamHasVideo(ctl.remoteStream) || streamHasVideo(ctl.localStream);
   const mm = String(Math.floor(secs / 60)).padStart(2, "0");
   const ss = String(secs % 60).padStart(2, "0");
   const stateLabel = connected ? mm + ":" + ss : call.state === "ringing" ? T && T.ringing || "ringing\u2026" : call.state === "connecting" ? T && T.connecting || "connecting\u2026" : call.state;
@@ -1789,7 +1809,8 @@ function CallOverlay({ T, ctl, peers }) {
     setMuted(n);
     ctl.setMuted(n);
   };
-  const controls = /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 18, alignItems: "flex-start" } }, /* @__PURE__ */ React.createElement(CallBtn, { icon: muted ? "micFill" : "mic", label: muted ? T && T.unmute || "unmute" : T && T.mute || "mute", active: muted, onClick: toggleMute }), /* @__PURE__ */ React.createElement(CallBtn, { icon: "phone", label: T && T.endCall || "end", danger: true, wide: true, onClick: ctl.hangup }));
+  const canShare = connected && typeof navigator !== "undefined" && navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia;
+  const controls = /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 18, alignItems: "flex-start" } }, /* @__PURE__ */ React.createElement(CallBtn, { icon: muted ? "micFill" : "mic", label: muted ? T && T.unmute || "unmute" : T && T.mute || "mute", active: muted, onClick: toggleMute }), canShare && /* @__PURE__ */ React.createElement(CallBtn, { icon: "monitor", label: ctl.sharing ? T && T.stopShare || "stop share" : T && T.share || "share", active: ctl.sharing, onClick: ctl.toggleShare }), /* @__PURE__ */ React.createElement(CallBtn, { icon: "phone", label: T && T.endCall || "end", danger: true, wide: true, onClick: ctl.hangup }));
   return /* @__PURE__ */ React.createElement("div", { style: { position: "fixed", inset: 0, zIndex: 70, background: "var(--bg)", display: "flex", flexDirection: "column" } }, ctl.remoteStream && /* @__PURE__ */ React.createElement(AudioSink, { stream: ctl.remoteStream }), /* @__PURE__ */ React.createElement("div", { style: { height: 52, flexShrink: 0, display: "flex", alignItems: "center", gap: 10, padding: "0 18px", borderBottom: "1px solid var(--line)" } }, /* @__PURE__ */ React.createElement(Icon, { name: video ? "video" : "phone", size: 16, color: "var(--accent)", stroke: 2 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 13, fontWeight: 700, color: "var(--text)" } }, name), /* @__PURE__ */ React.createElement(Tag, { tone: connected ? "ok" : "warn" }, stateLabel), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), connected && /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 14, fontWeight: 700, color: "var(--text)", letterSpacing: 1 } }, mm, ":", ss)), video ? /* @__PURE__ */ React.createElement("div", { style: { flex: 1, position: "relative", padding: 18 } }, /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", inset: 18, borderRadius: 14, overflow: "hidden", background: "#000", border: "1px solid var(--line)" } }, ctl.remoteStream ? /* @__PURE__ */ React.createElement(VideoSurface, { stream: ctl.remoteStream, muted: true, style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ React.createElement("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React.createElement(DkIdenticon, { seed: call.peerId, size: 92, radius: 22 }))), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", right: 30, bottom: 30, width: 220, height: 148, borderRadius: 12, overflow: "hidden", background: "#000", border: "1px solid var(--line)" } }, ctl.localStream ? /* @__PURE__ */ React.createElement(VideoSurface, { stream: ctl.localStream, muted: true, style: { width: "100%", height: "100%", objectFit: "cover", transform: "scaleX(-1)" } }) : /* @__PURE__ */ React.createElement("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React.createElement(Icon, { name: "userRound", size: 30, color: "var(--faint)", stroke: 1.4 }))), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", left: 0, right: 0, bottom: 30, display: "flex", justifyContent: "center" } }, /* @__PURE__ */ React.createElement("div", { style: { padding: "16px 26px", borderRadius: 20, background: "color-mix(in oklab, var(--panel), transparent 8%)", border: "1px solid var(--line)" } }, controls))) : /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 22 } }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center" } }, !connected && /* @__PURE__ */ React.createElement("span", { style: { position: "absolute", width: 150, height: 150, borderRadius: 999, border: "2px solid var(--accent)", animation: "dkpulse 2s ease-out infinite" } }), /* @__PURE__ */ React.createElement(DkIdenticon, { seed: call.peerId, size: 108, radius: 26 })), /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 22, fontWeight: 700, color: "var(--text)" } }, name), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 8, fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--faint)" } }, stateLabel)), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 18 } }, controls)));
 }
 Object.assign(window, { useCallController, CallOverlay, IncomingCallModal });

package/dist/ui/desktop/vendor/peer-webrtc.js

@@ -153,7 +153,7 @@ var PeerWebRTC = (() => {
   var DEFAULT_ICE_SERVERS = [
     { urls: "stun:stun.l.google.com:19302" }
   ];
-  var _opts, _iceServers, _sessions, _CallEngine_instances, handleSignal_fn, onOffer_fn, onAnswer_fn, onCandidate_fn, onBye_fn, onAuxiliary_fn, createSession_fn, wirePeerConnection_fn, ensureRemoteStream_fn, attachLocalMedia_fn, flushLocalCandidates_fn, drainRemoteCandidates_fn, send_fn, sendByeSafe_fn, cleanup_fn, setState_fn, normId_fn, _toInfo, newCallId_fn, log_fn;
+  var _opts, _iceServers, _sessions, _CallEngine_instances, setOutgoingVideoTrack_fn, renegotiate_fn, handleSignal_fn, onOffer_fn, answerRenegotiation_fn, onAnswer_fn, onCandidate_fn, onBye_fn, onAuxiliary_fn, createSession_fn, wirePeerConnection_fn, ensureRemoteStream_fn, attachLocalMedia_fn, flushLocalCandidates_fn, drainRemoteCandidates_fn, send_fn, sendByeSafe_fn, cleanup_fn, setState_fn, normId_fn, _toInfo, newCallId_fn, log_fn;
   var CallEngine = class extends Emitter {
     constructor(opts) {
       var _a;
@@ -286,6 +286,50 @@ var PeerWebRTC = (() => {
           track.enabled = enabled;
       }
     }
+    /** Start sharing the screen on an active call. Captures the display, sends it
+     *  as the outgoing video track (replacing the camera if any), and renegotiates
+     *  so the peer receives it. Works even with no camera. Ending the OS "stop
+     *  sharing" prompt reverts automatically. */
+    async shareScreen(callId) {
+      const session = __privateGet(this, _sessions).get(__privateMethod(this, _CallEngine_instances, normId_fn).call(this, callId));
+      if (!session)
+        throw new Error(`shareScreen: no call ${callId}`);
+      if (!__privateGet(this, _opts).getDisplayMedia)
+        throw new Error("screen share not supported here");
+      const screen = await __privateGet(this, _opts).getDisplayMedia({ video: true, audio: false });
+      const track = screen.getVideoTracks()[0];
+      if (!track)
+        return;
+      if (!session.screenStream)
+        session.cameraStream = session.localStream;
+      session.screenStream = screen;
+      await __privateMethod(this, _CallEngine_instances, setOutgoingVideoTrack_fn).call(this, session, track, screen);
+      track.addEventListener("ended", () => {
+        void this.stopScreenShare(callId);
+      });
+      await __privateMethod(this, _CallEngine_instances, renegotiate_fn).call(this, session);
+      __privateMethod(this, _CallEngine_instances, log_fn).call(this, `shareScreen started for ${callId}`);
+    }
+    /** Stop screen sharing; restore the camera track if there was one. */
+    async stopScreenShare(callId) {
+      var _a;
+      const session = __privateGet(this, _sessions).get(__privateMethod(this, _CallEngine_instances, normId_fn).call(this, callId));
+      if (!(session == null ? void 0 : session.screenStream))
+        return;
+      for (const t of session.screenStream.getTracks())
+        t.stop();
+      session.screenStream = void 0;
+      const camTrack = (_a = session.cameraStream) == null ? void 0 : _a.getVideoTracks()[0];
+      await __privateMethod(this, _CallEngine_instances, setOutgoingVideoTrack_fn).call(this, session, camTrack != null ? camTrack : null, session.cameraStream);
+      session.cameraStream = void 0;
+      await __privateMethod(this, _CallEngine_instances, renegotiate_fn).call(this, session);
+      __privateMethod(this, _CallEngine_instances, log_fn).call(this, `shareScreen stopped for ${callId}`);
+    }
+    /** True when the call is currently sharing the screen. */
+    isSharingScreen(callId) {
+      var _a;
+      return !!((_a = __privateGet(this, _sessions).get(__privateMethod(this, _CallEngine_instances, normId_fn).call(this, callId))) == null ? void 0 : _a.screenStream);
+    }
     /** Tear down every call (e.g. on app shutdown). */
     dispose() {
       for (const session of [...__privateGet(this, _sessions).values()]) {
@@ -298,6 +342,44 @@ var PeerWebRTC = (() => {
   _iceServers = new WeakMap();
   _sessions = new WeakMap();
   _CallEngine_instances = new WeakSet();
+  setOutgoingVideoTrack_fn = async function(session, track, stream) {
+    var _a;
+    const transceivers = session.pc.getTransceivers();
+    const tr = (_a = transceivers.find((t) => {
+      var _a2;
+      return ((_a2 = t.sender.track) == null ? void 0 : _a2.kind) === "video";
+    })) != null ? _a : transceivers.find((t) => {
+      var _a2;
+      return ((_a2 = t.receiver.track) == null ? void 0 : _a2.kind) === "video";
+    });
+    if (tr) {
+      await tr.sender.replaceTrack(track);
+      if (track) {
+        if (tr.direction === "recvonly")
+          tr.direction = "sendrecv";
+        else if (tr.direction === "inactive")
+          tr.direction = "sendonly";
+      }
+    } else if (track && stream) {
+      session.pc.addTrack(track, stream);
+    }
+    session.localStream = stream;
+    this.emit("localStream", session.callId, stream != null ? stream : new MediaStream());
+  };
+  renegotiate_fn = async function(session) {
+    try {
+      const offer = await session.pc.createOffer();
+      await session.pc.setLocalDescription(offer);
+      const options = [];
+      if (session.audio)
+        options.push("audio");
+      if (session.video || session.screenStream)
+        options.push("video");
+      await __privateMethod(this, _CallEngine_instances, send_fn).call(this, session.peerId, { type: "offer", sdp: offer.sdp, options, callId: session.callId });
+    } catch (err) {
+      __privateMethod(this, _CallEngine_instances, log_fn).call(this, `renegotiate failed: ${err.message}`);
+    }
+  };
   // ---- internals -------------------------------------------------------
   handleSignal_fn = function(peerId, signal) {
     switch (signal.type) {
@@ -328,7 +410,10 @@ var PeerWebRTC = (() => {
       return;
     const existing = __privateGet(this, _sessions).get(__privateMethod(this, _CallEngine_instances, normId_fn).call(this, signal.callId));
     if (existing) {
-      existing.pendingOffer = signal.sdp;
+      if (existing.hasReceivedSdp)
+        void __privateMethod(this, _CallEngine_instances, answerRenegotiation_fn).call(this, existing, signal.sdp);
+      else
+        existing.pendingOffer = signal.sdp;
       return;
     }
     const audio = signal.options ? signal.options.includes("audio") : true;
@@ -339,6 +424,16 @@ var PeerWebRTC = (() => {
     this.emit("incomingCall", __privateGet(this, _toInfo).call(this, session));
     __privateMethod(this, _CallEngine_instances, log_fn).call(this, `incoming call from ${peerId} callId=${signal.callId} audio=${audio} video=${video}`);
   };
+  answerRenegotiation_fn = async function(session, sdp) {
+    try {
+      await session.pc.setRemoteDescription({ type: "offer", sdp });
+      const answer = await session.pc.createAnswer();
+      await session.pc.setLocalDescription(answer);
+      await __privateMethod(this, _CallEngine_instances, send_fn).call(this, session.peerId, { type: "answer", sdp: answer.sdp, callId: session.callId });
+    } catch (err) {
+      __privateMethod(this, _CallEngine_instances, log_fn).call(this, `renegotiation answer failed: ${err.message}`);
+    }
+  };
   onAnswer_fn = function(peerId, signal) {
     const session = __privateGet(this, _sessions).get(__privateMethod(this, _CallEngine_instances, normId_fn).call(this, signal.callId));
     if (!session || !signal.sdp)
@@ -348,7 +443,8 @@ var PeerWebRTC = (() => {
       try {
         await session.pc.setRemoteDescription({ type: "answer", sdp: signal.sdp });
         session.hasReceivedSdp = true;
-        __privateMethod(this, _CallEngine_instances, setState_fn).call(this, session, "connecting");
+        if (session.state !== "connected")
+          __privateMethod(this, _CallEngine_instances, setState_fn).call(this, session, "connecting");
         await __privateMethod(this, _CallEngine_instances, drainRemoteCandidates_fn).call(this, session);
         await __privateMethod(this, _CallEngine_instances, flushLocalCandidates_fn).call(this, session);
       } catch (err) {
@@ -439,12 +535,14 @@ var PeerWebRTC = (() => {
       }
     };
     pc.ontrack = (ev) => {
-      var _a;
-      const stream = (_a = ev.streams[0]) != null ? _a : __privateMethod(this, _CallEngine_instances, ensureRemoteStream_fn).call(this, session, ev.track);
-      if (session.remoteStream !== stream) {
-        session.remoteStream = stream;
-        this.emit("remoteStream", session.callId, stream);
-      }
+      __privateMethod(this, _CallEngine_instances, ensureRemoteStream_fn).call(this, session, ev.track);
+      const snapshot = new MediaStream(session.remoteStream.getTracks());
+      this.emit("remoteStream", session.callId, snapshot);
+      ev.track.addEventListener("unmute", () => {
+        if (!session.remoteStream)
+          return;
+        this.emit("remoteStream", session.callId, new MediaStream(session.remoteStream.getTracks()));
+      });
     };
     pc.oniceconnectionstatechange = () => {
       switch (pc.iceConnectionState) {
@@ -471,7 +569,8 @@ var PeerWebRTC = (() => {
   ensureRemoteStream_fn = function(session, track) {
     if (!session.remoteStream)
       session.remoteStream = new MediaStream();
-    session.remoteStream.addTrack(track);
+    if (!session.remoteStream.getTracks().includes(track))
+      session.remoteStream.addTrack(track);
     return session.remoteStream;
   };
   attachLocalMedia_fn = async function(session) {

package/dist/ui/server.js

@@ -198,11 +198,13 @@ export function startFriendUi(opts) {
                 const file = join(DESKTOP_DIR, rel);
                 // Guard against path traversal: resolved file must stay under DESKTOP_DIR.
                 if (existsSync(file) && file.startsWith(DESKTOP_DIR)) {
-                    // app.js changes on every UI rebuild → never cache it. Vendored React
-                    // UMD is stable, so let it cache normally.
+                    // app.js AND vendor/peer-webrtc.js change on every rebuild / SDK bump
+                    // → never cache them, or the browser keeps running stale call/UI code
+                    // (this silently defeated every peer-webrtc fix). Only the truly stable
+                    // vendored libs (React UMD) may cache.
                     const headers = { "content-type": "application/javascript; charset=utf-8" };
-                    if (rel === "app.js")
-                        headers["cache-control"] = "no-store";
+                    const volatile = rel === "app.js" || rel.includes("peer-webrtc");
+                    headers["cache-control"] = volatile ? "no-store" : "public, max-age=31536000";
                     res.writeHead(200, headers);
                     res.end(readFileSync(file));
                     return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/lan",
-  "version": "0.1.175",
+  "version": "0.1.177",
   "description": "Private virtual LAN for self-hosted services and AI agents, built on Elastos Carrier. NAT-traversal, name service, ACL, all over a peer-to-peer mesh — no public IP required.",
   "type": "module",
   "main": "./dist/index.js",
@@ -80,7 +80,7 @@
   "dependencies": {
     "@decentnetwork/dora": "^0.1.13",
     "@decentnetwork/peer": "^0.1.91",
-    "@decentnetwork/peer-webrtc": "^0.2.7",
+    "@decentnetwork/peer-webrtc": "^0.2.9",
     "ink": "^5.2.1",
     "js-yaml": "^4.1.0",
     "node-forge": "^1.4.0",