@decentnetwork/lan 0.1.141 → 0.1.142

package/dist/ui/desktop/app.js

@@ -52,6 +52,7 @@ 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"/>',
   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 +1031,9 @@ const inputStyle = {
   outline: "none",
   minWidth: 0
 };
-function Msg({ m, peer, T }) {
+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 +1043,42 @@ 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", { 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("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)" }))))
     ) : (() => {
       const cardStyle = {
         display: "flex",
@@ -1129,9 +1145,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 +1200,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 +1226,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/lan",
-  "version": "0.1.141",
+  "version": "0.1.142",
   "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.75",
     "ink": "^5.2.1",
     "js-yaml": "^4.1.0",
     "node-forge": "^1.4.0",