@decentnetwork/lan 0.1.225 → 0.1.227

package/dist/ui/desktop/app.js

@@ -1181,8 +1181,18 @@ const mediaBtnStyle = {
   justifyContent: "center",
   lineHeight: 0
 };
+function dkRtcFileFromText(peerId, text) {
+  const m = /^received file via WebRTC: (.+) \(([^)]+)\)$/.exec(String(text || ""));
+  if (!m || !window.__dkRtcFiles) return null;
+  const name = m[1];
+  for (const item of window.__dkRtcFiles.values()) {
+    if (item && item.peerId === peerId && item.name === name) return item;
+  }
+  return null;
+}
 function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, selMode, selected, onToggleSel, busy }) {
   const mine = m.from === "me";
+  const rtcFile = !mine && !m.file ? dkRtcFileFromText(peer.userId || peer.id, m.text) : null;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -1212,7 +1222,52 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, selMode, sele
       justifyContent: "center"
     } }, selected && /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, stroke: 3, color: "#fff" })),
     !mine && /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 24, radius: 6, dot: false }),
-    /* @__PURE__ */ React.createElement("div", { style: { maxWidth: m.file && (m.file.media === "image" || m.file.media === "video") ? "min(680px, 88%)" : "64%", display: "flex", flexDirection: "column", alignItems: mine ? "flex-end" : "flex-start" } }, m.file ? (
+    /* @__PURE__ */ React.createElement("div", { style: { maxWidth: m.file && (m.file.media === "image" || m.file.media === "video") || rtcFile && (rtcFile.media === "image" || rtcFile.media === "video") ? "min(680px, 88%)" : "64%", display: "flex", flexDirection: "column", alignItems: mine ? "flex-end" : "flex-start" } }, rtcFile ? /* @__PURE__ */ React.createElement("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 6,
+      maxWidth: rtcFile.media === "image" || rtcFile.media === "video" ? "100%" : 300,
+      width: rtcFile.media === "image" || rtcFile.media === "video" ? "100%" : void 0,
+      background: "var(--bub-them)",
+      border: "1px solid var(--line)",
+      borderRadius: 12,
+      padding: 6
+    } }, (rtcFile.media === "image" || rtcFile.media === "video") && /* @__PURE__ */ React.createElement("div", { "data-media": true, style: { position: "relative", lineHeight: 0 } }, rtcFile.media === "image" ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: rtcFile.url,
+        alt: rtcFile.name,
+        style: { display: "block", width: "100%", maxHeight: "72vh", borderRadius: 8, objectFit: "contain" }
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      "video",
+      {
+        src: rtcFile.url,
+        controls: true,
+        preload: "metadata",
+        style: { display: "block", width: "100%", maxHeight: "72vh", borderRadius: 8, objectFit: "contain", background: "#000" }
+      }
+    ), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", top: 8, right: 8, display: "flex", gap: 6 } }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        onClick: () => onTheater({ kind: rtcFile.media, url: rtcFile.url, name: rtcFile.name }),
+        title: "theater / \u7F51\u9875\u5168\u5C4F",
+        style: mediaBtnStyle
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "theater", size: 16, stroke: 2, color: "#fff" })
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        onClick: (e) => {
+          const w = e.currentTarget.closest("[data-media]");
+          const el = w && w.querySelector("video,img");
+          if (el && el.requestFullscreen) el.requestFullscreen();
+        },
+        title: "fullscreen / \u5168\u5C4F",
+        style: mediaBtnStyle
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "maximize", size: 16, stroke: 2, color: "#fff" })
+    ))), rtcFile.media === "audio" && /* @__PURE__ */ React.createElement("audio", { src: rtcFile.url, controls: true, style: { width: "100%" } }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "0 2px" } }, /* @__PURE__ */ React.createElement("span", { style: { flex: 1, minWidth: 0, fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, rtcFile.name), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)", flexShrink: 0 } }, dkFileSize(rtcFile.size)), /* @__PURE__ */ React.createElement("a", { href: rtcFile.url, download: rtcFile.name, title: "download", style: { display: "inline-flex", flexShrink: 0 } }, /* @__PURE__ */ React.createElement(Icon, { name: "download", size: 15, stroke: 2, color: "var(--accent)" })))) : m.file ? (
       // Inline preview/player. Received media: as soon as it's saved.
       // Sent media: once it's fully delivered ('sent') — the daemon keeps a
       // local copy so it plays on the sender's side too.
@@ -1947,9 +2002,19 @@ function dkFileDownload(blob, name) {
   a.textContent = name || "agentnet-file";
   return { url, name: a.download };
 }
+function dkRememberRtcFile(peerId, fileId, name, size, url) {
+  if (!window.__dkRtcFiles) window.__dkRtcFiles = /* @__PURE__ */ new Map();
+  const item = { id: fileId, peerId, name, size, url, media: dkFileMediaKind(name) };
+  window.__dkRtcFiles.set(peerId + "|" + name + "|" + size, item);
+  return item;
+}
 function useRtcFileController(selfId, onReceivedText) {
   const [incoming, setIncoming] = React.useState([]);
   const peersRef = React.useRef(/* @__PURE__ */ new Map());
+  const onReceivedTextRef = React.useRef(onReceivedText);
+  React.useEffect(() => {
+    onReceivedTextRef.current = onReceivedText;
+  }, [onReceivedText]);
   React.useEffect(() => {
     if (!selfId || !window.RTCPeerConnection || !window.dkRtcSignalBus) return;
     const bus = dkRtcSignalBus();
@@ -1988,8 +2053,9 @@ function useRtcFileController(selfId, onReceivedText) {
             const meta = sess.meta || {};
             const blob = new Blob(sess.chunks, { type: meta.mime || "application/octet-stream" });
             const dl = dkFileDownload(blob, meta.name || "agentnet-file");
+            dkRememberRtcFile(peerId, fileId, dl.name, blob.size, dl.url);
             setIncoming((arr) => [{ id: fileId, peerId, name: dl.name, size: blob.size, url: dl.url }].concat(arr).slice(0, 8));
-            if (onReceivedText) onReceivedText(peerId, "received file via WebRTC: " + dl.name + " (" + dkFileSize(blob.size) + ")");
+            if (onReceivedTextRef.current) onReceivedTextRef.current(peerId, "received file via WebRTC: " + dl.name + " (" + dkFileSize(blob.size) + ")");
             cleanup(fileId);
           } else if (msg.type === "cancel") {
             cleanup(fileId);
@@ -2071,7 +2137,7 @@ function useRtcFileController(selfId, onReceivedText) {
       off();
       for (const id of Array.from(peersRef.current.keys())) cleanup(id);
     };
-  }, [selfId, onReceivedText]);
+  }, [selfId]);
   const sendFile = React.useCallback(async (peerId, file, onProgress) => {
     if (!peerId || !file || !window.RTCPeerConnection || !window.dkRtcSignalBus) {
       return { ok: false, fallback: true, error: "WebRTC unavailable" };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/lan",
-  "version": "0.1.225",
+  "version": "0.1.227",
   "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",