@decentnetwork/lan 0.1.141 → 0.1.143

package/dist/ui/desktop/app.js

@@ -52,6 +52,8 @@ const ICON_PATHS = {
   trash: '<path d="M3 6h18"/><path d="M8 6V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6"/><path d="M18.5 6l-1 13.5a2 2 0 0 1-2 1.5h-7a2 2 0 0 1-2-1.5L5.5 6"/><path d="M10 10.5v6M14 10.5v6"/>',
   arrowDown: '<path d="M12 4v15M6 13l6 6 6-6"/>',
   shrink: '<path d="M4 14h6v6"/><path d="M20 10h-6V4"/><path d="m14 10 7-7"/><path d="m3 21 7-7"/>',
+  maximize: '<path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/>',
+  theater: '<rect x="2.5" y="6.5" width="19" height="11" rx="2"/>',
   speaker: '<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="M16 9a3 3 0 0 1 0 6"/><path d="M19 7a6 6 0 0 1 0 10"/>',
   micFill: '<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"/>'
 };
@@ -1030,9 +1032,21 @@ const inputStyle = {
   outline: "none",
   minWidth: 0
 };
-function Msg({ m, peer, T }) {
+const mediaBtnStyle = {
+  width: 28,
+  height: 28,
+  borderRadius: 8,
+  border: "none",
+  background: "rgba(0,0,0,0.5)",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  lineHeight: 0
+};
+function Msg({ m, peer, T, onTheater }) {
   const mine = m.from === "me";
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: mine ? "flex-end" : "flex-start", alignItems: "flex-end", gap: 8, margin: "3px 0" } }, !mine && /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 24, radius: 6, dot: false }), /* @__PURE__ */ React.createElement("div", { style: { maxWidth: "64%", display: "flex", flexDirection: "column", alignItems: mine ? "flex-end" : "flex-start" } }, m.file ? (
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: mine ? "flex-end" : "flex-start", alignItems: "flex-end", gap: 8, margin: "3px 0" } }, !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 ? (
     // 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.
@@ -1042,27 +1056,48 @@ function Msg({ m, peer, T }) {
         display: "flex",
         flexDirection: "column",
         gap: 6,
-        maxWidth: 300,
+        maxWidth: m.file.media === "image" || m.file.media === "video" ? "100%" : 300,
+        width: m.file.media === "image" || m.file.media === "video" ? "100%" : void 0,
         background: "var(--bub-them)",
         border: "1px solid var(--line)",
         borderRadius: 12,
         padding: 6
-      } }, m.file.media === "image" && /* @__PURE__ */ React.createElement("a", { href: dkFileUrl(m.file.name), target: "_blank", rel: "noreferrer", style: { display: "block", lineHeight: 0 } }, /* @__PURE__ */ React.createElement(
+      } }, (m.file.media === "image" || m.file.media === "video") && /* @__PURE__ */ React.createElement("div", { "data-media": true, style: { position: "relative", lineHeight: 0 } }, m.file.media === "image" ? /* @__PURE__ */ React.createElement(
         "img",
         {
           src: dkFileUrl(m.file.name),
           alt: m.file.name,
-          style: { display: "block", maxWidth: "100%", maxHeight: 280, borderRadius: 8, objectFit: "cover" }
+          style: { display: "block", width: "100%", maxHeight: "72vh", borderRadius: 8, objectFit: "contain" }
         }
-      )), m.file.media === "video" && /* @__PURE__ */ React.createElement(
+      ) : /* @__PURE__ */ React.createElement(
         "video",
         {
           src: dkFileUrl(m.file.name),
           controls: true,
           preload: "metadata",
-          style: { maxWidth: "100%", maxHeight: 320, borderRadius: 8, background: "#000" }
+          style: { display: "block", width: "100%", maxHeight: "72vh", borderRadius: 8, objectFit: "contain", background: "#000" }
         }
-      ), m.file.media === "audio" && /* @__PURE__ */ React.createElement("audio", { src: dkFileUrl(m.file.name), 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" } }, m.file.name), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)", flexShrink: 0 } }, m.file.size), /* @__PURE__ */ React.createElement("a", { href: dkFileDownloadUrl(m.file.name), download: m.file.name, title: "download", style: { display: "inline-flex", flexShrink: 0 } }, /* @__PURE__ */ React.createElement(Icon, { name: "download", size: 15, stroke: 2, color: "var(--accent)" }))))
+      ), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", top: 8, right: 8, display: "flex", gap: 6 } }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: () => onTheater({ kind: m.file.media, url: dkFileUrl(m.file.name), name: m.file.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" })
+      ))), m.file.media === "audio" && /* @__PURE__ */ React.createElement("audio", { src: dkFileUrl(m.file.name), 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" } }, m.file.name), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)", flexShrink: 0 } }, m.file.size), /* @__PURE__ */ React.createElement("a", { href: dkFileDownloadUrl(m.file.name), download: m.file.name, title: "download", style: { display: "inline-flex", flexShrink: 0 } }, /* @__PURE__ */ React.createElement(Icon, { name: "download", size: 15, stroke: 2, color: "var(--accent)" }))))
     ) : (() => {
       const cardStyle = {
         display: "flex",
@@ -1129,9 +1164,21 @@ function Conversation({ T, peer, lang, thread: threadProp, onSend, onSendFile, o
   const [draft, setDraft] = React.useState("");
   const [dragOver, setDragOver] = React.useState(false);
   const [sending, setSending] = React.useState(null);
+  const [theater, setTheater] = React.useState(null);
   React.useEffect(() => {
     setDraft("");
   }, [peer.id]);
+  React.useEffect(() => {
+    setTheater(null);
+  }, [peer.id]);
+  React.useEffect(() => {
+    if (!theater) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setTheater(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [theater]);
   const sendDraft = () => {
     if (draft.trim()) {
       onSend(draft);
@@ -1172,7 +1219,7 @@ function Conversation({ T, peer, lang, thread: threadProp, onSend, onSendFile, o
       setMenu(false);
       onRemove(peer);
     } }))))),
-    /* @__PURE__ */ React.createElement("div", { ref: scrollRef, style: { flex: 1, overflow: "auto", padding: "18px 22px" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 760, margin: "0 auto" } }, thread.map((m, i) => m.day ? /* @__PURE__ */ React.createElement("div", { key: i, style: { display: "flex", justifyContent: "center", margin: "14px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, fontWeight: 600, color: "var(--faint)", background: "var(--chip)", padding: "3px 10px", borderRadius: 999 } }, m.day)) : /* @__PURE__ */ React.createElement(Msg, { key: i, m, peer, T })))),
+    /* @__PURE__ */ React.createElement("div", { ref: scrollRef, style: { flex: 1, overflow: "auto", padding: "18px 22px" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 760, margin: "0 auto" } }, thread.map((m, i) => m.day ? /* @__PURE__ */ React.createElement("div", { key: i, style: { display: "flex", justifyContent: "center", margin: "14px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, fontWeight: 600, color: "var(--faint)", background: "var(--chip)", padding: "3px 10px", borderRadius: 999 } }, m.day)) : /* @__PURE__ */ React.createElement(Msg, { key: i, m, peer, T, onTheater: setTheater })))),
     /* @__PURE__ */ React.createElement("div", { style: { flexShrink: 0, borderTop: "1px solid var(--line)", padding: "12px 16px", background: "var(--panel)" } }, sending && /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 760, margin: "0 auto 8px", display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--faint)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "paperclip", size: 13, stroke: 2, color: "var(--accent)" }), (lang === "zh" ? "\u53D1\u9001\u4E2D: " : "Sending: ") + sending.name), /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 760, margin: "0 auto", display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React.createElement(
       "input",
       {
@@ -1198,7 +1245,53 @@ function Conversation({ T, peer, lang, thread: threadProp, onSend, onSendFile, o
         placeholder: `${T.message} ${peer.alias || shortKey(peer.userId, 6, 4)}\u2026`,
         style: { flex: 1, height: 38, borderRadius: 9, border: "1px solid var(--line)", background: "var(--panel-2)", color: "var(--text)", fontFamily: "var(--ui)", fontSize: 13.5, padding: "0 14px", outline: "none", minWidth: 0 }
       }
-    ), /* @__PURE__ */ React.createElement(Btn, { tone: "solid", icon: "arrowUp", title: T.send, onClick: sendDraft })))
+    ), /* @__PURE__ */ React.createElement(Btn, { tone: "solid", icon: "arrowUp", title: T.send, onClick: sendDraft }))),
+    theater && /* @__PURE__ */ React.createElement("div", { onClick: () => setTheater(null), style: {
+      position: "absolute",
+      inset: 0,
+      zIndex: 60,
+      background: "rgba(0,0,0,0.86)",
+      display: "flex",
+      flexDirection: "column"
+    } }, /* @__PURE__ */ React.createElement("div", { onClick: (e) => e.stopPropagation(), style: { flexShrink: 0, height: 46, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "0 14px" } }, /* @__PURE__ */ React.createElement("span", { style: { minWidth: 0, fontFamily: "var(--mono)", fontSize: 12, color: "rgba(255,255,255,0.72)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, theater.name), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 } }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        title: lang === "zh" ? "\u5168\u5C4F" : "fullscreen",
+        onClick: () => {
+          const el = document.getElementById("dk-theater-media");
+          if (el && el.requestFullscreen) el.requestFullscreen();
+        },
+        style: { width: 34, height: 34, borderRadius: 8, border: "none", background: "rgba(255,255,255,0.14)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "maximize", size: 18, stroke: 2, color: "#fff" })
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        title: (lang === "zh" ? "\u5173\u95ED" : "close") + " \xB7 Esc",
+        onClick: () => setTheater(null),
+        style: { width: 34, height: 34, borderRadius: 8, border: "none", background: "rgba(255,255,255,0.14)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "x", size: 20, stroke: 2.2, color: "#fff" })
+    ))), /* @__PURE__ */ React.createElement("div", { onClick: () => setTheater(null), style: { flex: 1, minHeight: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 16px 16px" } }, theater.kind === "video" ? /* @__PURE__ */ React.createElement(
+      "video",
+      {
+        id: "dk-theater-media",
+        src: theater.url,
+        controls: true,
+        autoPlay: true,
+        onClick: (e) => e.stopPropagation(),
+        style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain", borderRadius: 6, background: "#000" }
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        id: "dk-theater-media",
+        src: theater.url,
+        alt: theater.name,
+        onClick: (e) => e.stopPropagation(),
+        style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain", borderRadius: 6 }
+      }
+    )))
   );
 }
 function MenuItem({ icon, label, onClick, danger }) {

package/dist/ui/server.js

@@ -176,7 +176,10 @@ export function startFriendUi(opts) {
             const desktopIndex = join(DESKTOP_DIR, "index.html");
             if (req.method === "GET" && (url === "/" || url === "/index.html")) {
                 if (existsSync(desktopIndex)) {
-                    res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+                    // no-store: the UI bundle is rebuilt in place on every UI change, so the
+                    // browser must never serve a stale cached index/app.js (that's why UI
+                    // updates appeared to "not take" until a hard reload).
+                    res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
                     res.end(readFileSync(desktopIndex));
                     return;
                 }
@@ -195,7 +198,12 @@ 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)) {
-                    res.writeHead(200, { "content-type": "application/javascript; charset=utf-8" });
+                    // app.js changes on every UI rebuild → never cache it. Vendored React
+                    // UMD is stable, so let it cache normally.
+                    const headers = { "content-type": "application/javascript; charset=utf-8" };
+                    if (rel === "app.js")
+                        headers["cache-control"] = "no-store";
+                    res.writeHead(200, headers);
                     res.end(readFileSync(file));
                     return;
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/lan",
-  "version": "0.1.141",
+  "version": "0.1.143",
   "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",
@@ -79,7 +79,7 @@
   },
   "dependencies": {
     "@decentnetwork/dora": "^0.1.11",
-    "@decentnetwork/peer": "^0.1.74",
+    "@decentnetwork/peer": "^0.1.76",
     "ink": "^5.2.1",
     "js-yaml": "^4.1.0",
     "node-forge": "^1.4.0",