@decentnetwork/lan 0.1.142 → 0.1.143

package/dist/ui/desktop/app.js

@@ -53,6 +53,7 @@ const ICON_PATHS = {
   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"/>'
 };
@@ -1031,6 +1032,18 @@ const inputStyle = {
   outline: "none",
   minWidth: 0
 };
+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: 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 ? (
@@ -1049,7 +1062,7 @@ function Msg({ m, peer, T, onTheater }) {
         border: "1px solid var(--line)",
         borderRadius: 12,
         padding: 6
-      } }, (m.file.media === "image" || m.file.media === "video") && /* @__PURE__ */ React.createElement("div", { style: { position: "relative", lineHeight: 0 } }, m.file.media === "image" ? /* @__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),
@@ -1064,21 +1077,27 @@ function Msg({ m, peer, T, onTheater }) {
           preload: "metadata",
           style: { display: "block", width: "100%", maxHeight: "72vh", borderRadius: 8, objectFit: "contain", background: "#000" }
         }
-      ), /* @__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: {
-        position: "absolute",
-        top: 8,
-        right: 8,
-        width: 30,
-        height: 30,
-        borderRadius: 8,
-        border: "none",
-        background: "rgba(0,0,0,0.5)",
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        lineHeight: 0
-      } }, /* @__PURE__ */ React.createElement(Icon, { name: "maximize", size: 17, 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)" }))))
+      ), /* @__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",

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.142",
+  "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.75",
+    "@decentnetwork/peer": "^0.1.76",
     "ink": "^5.2.1",
     "js-yaml": "^4.1.0",
     "node-forge": "^1.4.0",